diff --git a/.commitlintrc.ts b/.commitlintrc.ts index 281aaf6ce..c916b3617 100644 --- a/.commitlintrc.ts +++ b/.commitlintrc.ts @@ -1,30 +1,22 @@ -import { - RuleConfigCondition, - RuleConfigSeverity, - TargetCaseType -} from "@commitlint/types" +import { RuleConfigSeverity, type UserConfig } from "@commitlint/types" -export default { +const config: UserConfig = { rules: { - "body-leading-blank": [RuleConfigSeverity.Error, "always"] as const, - "body-max-line-length": [RuleConfigSeverity.Error, "always", 100] as const, - "footer-leading-blank": [RuleConfigSeverity.Warning, "never"] as const, - "footer-max-line-length": [ - RuleConfigSeverity.Error, - "always", - 100, - ] as const, - "header-max-length": [RuleConfigSeverity.Error, "always", 100] as const, - "header-trim": [RuleConfigSeverity.Error, "always"] as const, + "body-leading-blank": [RuleConfigSeverity.Error, "always"], + "body-max-line-length": [RuleConfigSeverity.Error, "always", 100], + "footer-leading-blank": [RuleConfigSeverity.Warning, "never"], + "footer-max-line-length": [RuleConfigSeverity.Error, "always", 100], + "header-max-length": [RuleConfigSeverity.Error, "always", 100], + "header-trim": [RuleConfigSeverity.Error, "always"], "subject-case": [ RuleConfigSeverity.Error, "never", ["sentence-case", "start-case", "pascal-case", "upper-case"], - ] as [RuleConfigSeverity, RuleConfigCondition, TargetCaseType[]], - "subject-empty": [RuleConfigSeverity.Error, "never"] as const, - "subject-full-stop": [RuleConfigSeverity.Error, "never", "."] as const, - "type-case": [RuleConfigSeverity.Error, "always", "lower-case"] as const, - "type-empty": [RuleConfigSeverity.Error, "never"] as const, + ], + "subject-empty": [RuleConfigSeverity.Error, "never"], + "subject-full-stop": [RuleConfigSeverity.Error, "never", "."], + "type-case": [RuleConfigSeverity.Error, "always", "lower-case"], + "type-empty": [RuleConfigSeverity.Error, "never"], "type-enum": [ RuleConfigSeverity.Error, "always", @@ -42,7 +34,9 @@ export default { "test", "i18n", ], - ] satisfies [RuleConfigSeverity, RuleConfigCondition, string[]], + ] }, prompt: {}, -} \ No newline at end of file +} + +export default config \ No newline at end of file diff --git a/.github/ISSUE_TEMPLATE/bug-report---bug---.md b/.github/ISSUE_TEMPLATE/bug-report---bug---.md deleted file mode 100644 index 3f8052829..000000000 --- a/.github/ISSUE_TEMPLATE/bug-report---bug---.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -name: Bug report / BUG 提交 -about: Create a report to help us improve / 帮助我们改善扩展功能 -title: '[BUG]' -labels: '' -assignees: '' ---- - -## Tell me the environment / 请先填写版本信息 - -Version: [Extension version / 扩展版本] -OS: [操作系统:Mac/Linux/Win] -Browser: [浏览器名称:Chrome/Edge/Firefox]-[浏览器版本，选填] - -## Detail / Bug 详情 - -[Describe the bug / 描述您使用过程中遇到的问题] diff --git a/.github/ISSUE_TEMPLATE/bug-report---bug---.yaml b/.github/ISSUE_TEMPLATE/bug-report---bug---.yaml new file mode 100644 index 000000000..610e65a1d --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug-report---bug---.yaml @@ -0,0 +1,61 @@ +name: Bug report +title: "[BUG] " +labels: bug +description: Create a report to help us improve +body: + - type: markdown + attributes: + value: | + Create a report to help us improve + - type: input + id: version + validations: + required: true + attributes: + label: Version + description: Which version of the extension/addon are you using? + placeholder: ex. v1.0.0 + - type: dropdown + id: os + validations: + required: true + attributes: + label: OS + description: Which operating system are you using? (Mac/Linux/Win) + options: + - Win + - Mac + - Linux + - Android + - Other + default: 0 + - type: dropdown + id: browser + validations: + required: true + attributes: + label: Browser + description: Which browser are you using? (Chrome/Firefox/Edge/Other) + options: + - Chrome + - Firefox + - Edge + - Brave + - Other + default: 0 + - type: input + id: browser_version + validations: + required: false + attributes: + label: Browser Version + description: Which version of the browser? (Optional) + placeholder: ex. 91.0.4472.124 + - type: textarea + id: description + validations: + required: true + attributes: + label: Bug Description + description: Please describe the bug in detail. + placeholder: "Steps to reproduce the behavior, and what you expected to happen." diff --git a/.github/ISSUE_TEMPLATE/feature-request-------.md b/.github/ISSUE_TEMPLATE/feature-request-------.md deleted file mode 100644 index 5db3c2de7..000000000 --- a/.github/ISSUE_TEMPLATE/feature-request-------.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -name: Feature request / 需求提交 -about: Suggest an idea for this project / 说出你宝贵的需求！ -title: "[FEATURE]" -labels: '' -assignees: '' - ---- - - diff --git a/.github/ISSUE_TEMPLATE/feature-request.yaml b/.github/ISSUE_TEMPLATE/feature-request.yaml new file mode 100644 index 000000000..ef5ec5286 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/feature-request.yaml @@ -0,0 +1,46 @@ +name: Feature Request +title: "[FEATURE] " +labels: feature +description: Suggest an idea for this project +body: + - type: markdown + attributes: + value: | + Tell us your wants~ + - type: dropdown + id: browser + validations: + required: true + attributes: + label: Browser + multiple: true + description: Which browsers are you using? (Chrome/Firefox/Edge/Other) + options: + - Chrome + - Firefox + - Edge + - Brave + - Other + default: 0 + - type: dropdown + id: os + validations: + required: false + attributes: + label: OS + description: Which operating system are you using? (Mac/Linux/Win, Optional) + options: + - Win + - Mac + - Linux + - Android + - Other + default: 0 + - type: textarea + id: description + validations: + required: false + attributes: + label: Feature Description + description: Please describe the feature in detail. + placeholder: "1. What you want.\n2. Why you want it.\n3. Any additional context." diff --git a/.github/workflows/crowdin-export.yml b/.github/workflows/crowdin-export.yml index afd0cded5..0ae69d015 100644 --- a/.github/workflows/crowdin-export.yml +++ b/.github/workflows/crowdin-export.yml @@ -10,24 +10,38 @@ jobs: TIMER_CROWDIN_AUTH: ${{ secrets.TIMER_CROWDIN_AUTH }} steps: - name: Prepare branch - uses: actions/checkout@v4 + uses: actions/checkout@v6 with: fetch-depth: 1 token: ${{secrets.GITHUB_TOKEN}} + - name: Test using Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v6 with: - node-version: "v22" - - name: Install ts-node - run: npm i -g ts-node + node-version: "lts/*" + - name: Install dependencies run: npm install + - name: Export translations - run: ts-node --project ./tsconfig.node.json ./script/crowdin/export-translation.ts - - name: Test typescript - uses: icrawl/action-tsc@v1 + run: | + npx ts-node --project ./tsconfig.node.json ./script/crowdin/export-translation.ts 2>&1 | tee /tmp/export-output.log + exit ${PIPESTATUS[0]} + continue-on-error: true + + - name: Check exporting logs + if: always() + run: | + if grep -q -F "[CROWDIN-ERROR]" /tmp/export-output.log; then + echo "::error:: Found errors in export logs" + exit 1 + else + echo "No errors found in export logs" + fi + - name: Create Pull Request - uses: peter-evans/create-pull-request@v7 + if: success() + uses: peter-evans/create-pull-request@v8 with: commit-message: "i18n(download): download translations by bot" branch: crowdin-export/patch diff --git a/.github/workflows/crowdin-sync.yml b/.github/workflows/crowdin-sync.yml index 805105ffb..ff42e5b46 100644 --- a/.github/workflows/crowdin-sync.yml +++ b/.github/workflows/crowdin-sync.yml @@ -10,7 +10,7 @@ jobs: - name: Test using Node.js uses: actions/setup-node@v1 with: - node-version: "v20.11.0" + node-version: "v22" - name: Install ts-node run: npm i -g ts-node - name: Install dependencies diff --git a/.github/workflows/end-to-end-tests.yml b/.github/workflows/end-to-end-tests.yml index 965d682a5..bd5e3ea2a 100644 --- a/.github/workflows/end-to-end-tests.yml +++ b/.github/workflows/end-to-end-tests.yml @@ -1,30 +1,22 @@ name: End-to-end tests CI -on: [pull_request] +on: [pull_request, workflow_dispatch] jobs: test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v6 - name: Test using Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v6 with: - node-version: "v20.11.0" + node-version: "v24" - name: Install dependencies run: npm install - - name: Install http-server - run: npm install -g http-server pm2 - - name: Build e2e outputs - run: npm run dev:e2e - - name: Build production outputs - run: npm run build - - - name: Start up mock server - run: | - pm2 start 'http-server ./test-e2e/example -p 12345' - pm2 start 'http-server ./test-e2e/example -p 12346' + - name: Setup e2e environment + run: bash script/setup-e2e.sh --all - name: Run tests env: + DEBUG: "rstest" USE_HEADLESS_PUPPETEER: true run: npm run test-e2e - name: Tests ✅ @@ -44,4 +36,4 @@ jobs: "state": "failure", "description": "Tests failed", "target_url": "https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}" - } + }' diff --git a/.github/workflows/knip.yml b/.github/workflows/knip.yml new file mode 100644 index 000000000..a65a39fac --- /dev/null +++ b/.github/workflows/knip.yml @@ -0,0 +1,19 @@ +name: Knip +on: + pull_request: +concurrency: + group: knip-${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }} + cancel-in-progress: true +jobs: + knip: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v6 + - name: Use Node.js + uses: actions/setup-node@v6 + with: + node-version: "24" + - name: Install dependencies + run: npm install + - name: Run Knip + run: npx knip --treat-config-hints-as-errors diff --git a/.github/workflows/psl-update.yml b/.github/workflows/psl-update.yml index 14d45d0ad..cfde5fd37 100644 --- a/.github/workflows/psl-update.yml +++ b/.github/workflows/psl-update.yml @@ -21,7 +21,7 @@ jobs: - name: Install dependencies run: npm install - name: Update psl - run: ts-node ./script/psl.ts + run: ts-node -P tsconfig.node.json ./script/psl.ts - name: Create Pull Request uses: peter-evans/create-pull-request@v7 with: diff --git a/.github/workflows/publish-all.yml b/.github/workflows/publish-all.yml index 7f08ba52c..ae4c03f4f 100644 --- a/.github/workflows/publish-all.yml +++ b/.github/workflows/publish-all.yml @@ -4,20 +4,38 @@ on: [workflow_dispatch] env: MAX_PACKAGE_SIZE: 2621440 # 2.5MB in bytes + FF_MIN_VER: "140.0" jobs: build: runs-on: ubuntu-latest steps: - name: Checkout repository - uses: actions/checkout@v4 + uses: actions/checkout@v6 with: fetch-depth: 0 + - name: Verify branch + run: | + if [[ "$GITHUB_REF" == refs/heads/main ]]; then + echo "Running on main branch ✅" + elif [[ "$GITHUB_REF" == refs/tags/* ]]; then + git fetch origin main + if git merge-base --is-ancestor HEAD origin/main; then + echo "Tag is on main branch ✅" + else + echo "❌ Tag is not on main branch" + exit 1 + fi + else + echo "❌ Not on main branch or a tag on main" + exit 1 + fi + - name: Setup Node.js - uses: actions/setup-node@v4 + uses: actions/setup-node@v6 with: - node-version: "v20.11.0" + node-version: "v24" - name: Install dependencies run: npm install @@ -28,6 +46,9 @@ jobs: - name: Build for Firefox run: npm run build:firefox + - name: Source package + run: bash script/source-archive.sh + - name: Check file sizes run: | # Check Chrome/Edge package size @@ -53,19 +74,19 @@ jobs: fi - name: Upload Chrome/Edge Artifact - uses: actions/upload-artifact@v4 + uses: actions/upload-artifact@v7 with: name: chrome-edge-package path: market_packages/target.zip - name: Upload Firefox XPI Artifact - uses: actions/upload-artifact@v4 + uses: actions/upload-artifact@v7 with: name: firefox-xpi-package path: market_packages/target.firefox.zip - name: Upload Firefox Source Artifact - uses: actions/upload-artifact@v4 + uses: actions/upload-artifact@v7 with: name: firefox-source-package path: market_packages/target.src.zip @@ -75,7 +96,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Download Chrome/Edge Artifact - uses: actions/download-artifact@v4 + uses: actions/download-artifact@v8 with: name: chrome-edge-package @@ -94,7 +115,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Download Chrome/Edge Artifact - uses: actions/download-artifact@v4 + uses: actions/download-artifact@v8 with: name: chrome-edge-package @@ -112,21 +133,23 @@ jobs: runs-on: ubuntu-latest steps: - name: Download Firefox XPI Artifact - uses: actions/download-artifact@v4 + uses: actions/download-artifact@v8 with: name: firefox-xpi-package - name: Download Firefox Source Artifact - uses: actions/download-artifact@v4 + uses: actions/download-artifact@v8 with: name: firefox-source-package - name: Upload to Firefox Add-on Store - uses: wdzeng/firefox-addon@v1.2.0-alpha.0 + uses: wdzeng/firefox-addon@v1.2.0 with: addon-guid: "{a8cf72f7-09b7-4cd4-9aaa-7a023bf09916}" xpi-path: target.firefox.zip source-file-path: target.src.zip - compatibility: firefox, android + compatibility: + '{"firefox": {"min": "${{ env.FF_MIN_VER }}"}, "android": + {"min": "${{ env.FF_MIN_VER}}"}}' jwt-issuer: ${{ secrets.FIREFOX_JWD_ISSUER }} jwt-secret: ${{ secrets.FIREFOX_JWD_SECRET }} diff --git a/.github/workflows/publish-chrome.yml b/.github/workflows/publish-chrome.yml index a3b8b12ab..68e3e7bb6 100644 --- a/.github/workflows/publish-chrome.yml +++ b/.github/workflows/publish-chrome.yml @@ -10,7 +10,7 @@ jobs: - name: Setup NodeJS uses: actions/setup-node@v4 with: - node-version: "v20.11.0" + node-version: "v22" - name: Install dependencies run: npm install - name: Build diff --git a/.github/workflows/publish-edge.yml b/.github/workflows/publish-edge.yml index 240e52d8e..6cd541152 100644 --- a/.github/workflows/publish-edge.yml +++ b/.github/workflows/publish-edge.yml @@ -3,6 +3,8 @@ on: [workflow_dispatch] jobs: publish: runs-on: ubuntu-latest + env: + ACTIONS_RUNNER_DEBUG: true steps: - uses: actions/checkout@v4 with: @@ -10,7 +12,7 @@ jobs: - name: Setup NodeJS uses: actions/setup-node@v4 with: - node-version: "v20.11.0" + node-version: "v24" - name: Install dependencies run: npm install - name: Build diff --git a/.github/workflows/publish-firefox.yml b/.github/workflows/publish-firefox.yml index 3bc021f53..22e9c6096 100644 --- a/.github/workflows/publish-firefox.yml +++ b/.github/workflows/publish-firefox.yml @@ -3,24 +3,30 @@ on: [workflow_dispatch] jobs: publish: runs-on: ubuntu-latest + env: + FF_MIN_VER: "140.0" steps: - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Setup NodeJS - uses: actions/setup-node@v4 + uses: actions/setup-node@v6 with: - node-version: "v20.11.0" + node-version: "v24" - name: Install dependencies run: npm install - name: Build run: npm run build:firefox + - name: Source package + run: bash script/source-archive.sh - name: Upload to Firefox addon store uses: wdzeng/firefox-addon@v1.2.0-alpha.0 with: addon-guid: "{a8cf72f7-09b7-4cd4-9aaa-7a023bf09916}" xpi-path: market_packages/target.firefox.zip source-file-path: market_packages/target.src.zip - compatibility: firefox, android + compatibility: + '{"firefox": {"min": "${{ env.FF_MIN_VER }}"}, "android": + {"min": "${{ env.FF_MIN_VER}}"}}' jwt-issuer: ${{ secrets.FIREFOX_JWD_ISSUER }} jwt-secret: ${{ secrets.FIREFOX_JWD_SECRET }} diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 1cf191d92..7abb62d23 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -4,11 +4,11 @@ jobs: test: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 + - uses: actions/checkout@v6 - name: Test using Node.js - uses: actions/setup-node@v1 + uses: actions/setup-node@v6 with: - node-version: "v20.11.0" + node-version: 24 - run: npm install - run: npm run test-c - name: Tests ✅ @@ -31,6 +31,6 @@ jobs: } - name: Upload coverage report if: ${{ !cancelled() }} - uses: codecov/test-results-action@v1 + uses: codecov/codecov-action@v6 with: token: ${{ secrets.CODECOV_TOKEN }} diff --git a/.gitignore b/.gitignore index ee659ba6c..86537e1bd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +tsconfig.tsbuildinfo + .DS_Store node_modules diff --git a/.vscode/settings.json b/.vscode/settings.json index 02e9869d3..50906233d 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,64 +8,53 @@ }, "editor.foldingImportsByDefault": true, "editor.trimAutoWhitespace": true, - "javascript.format.insertSpaceAfterCommaDelimiter": true, - "javascript.preferences.quoteStyle": "single", - "javascript.format.semicolons": "remove", - "javascript.format.insertSpaceBeforeFunctionParenthesis": false, - "typescript.format.insertSpaceAfterCommaDelimiter": true, - "typescript.preferences.quoteStyle": "single", - "typescript.format.semicolons": "remove", - "typescript.format.insertSpaceBeforeFunctionParenthesis": false, + "js/ts.format.insertSpaceAfterCommaDelimiter": true, + "js/ts.preferences.quoteStyle": "single", + "js/ts.format.semicolons": "remove", + "js/ts.format.insertSpaceBeforeFunctionParenthesis": false, "files.eol": "\n", "cSpell.words": [ "Arrayable", "Auths", "Cascader", - "clbbddpinhgdejpoepalbfnkogbobfdb", "COPYFILE", - "countup", "daterange", - "delayable", "domcontentloaded", "dont", "echarts", "emsp", "ensp", - "filemanager", "Hengyang", + "indexeddb", "Kanban", + "knip", "MKCOL", "newtab", - "nohup", - "okey", - "Openeds", + "otpauth", "Popconfirm", "PROPFIND", "Qihu", + "qrcode", "Rsdoctor", "rspack", + "rstest", "rtlcss", "selectchanged", "sheepzh", "subpages", - "Treemap", - "Vnode", + "Totp", "vueuse", - "webcomponents", + "webext", "webstore", "webtime", "wfhg", - "zcvf", - "Zhang", - "zrender" + "Zhang" ], "cSpell.ignorePaths": [ "package-lock.json", "node_modules", - "vscode-extension", ".git/objects", ".vscode", - ".vscode-insiders", // Ignore i18n resources "src/i18n/message/**/*.json", ], diff --git a/CHANGELOG.md b/CHANGELOG.md index f336f770f..2e2cc95c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,183 @@ 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. +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 Firefox to moderate packages, while only 1-2 days for Chrome and Edge. + +## [4.3.5] - 2026-06-05 + +- Fixed some bugs (#788, #790) + +## [4.3.4] - 2026-06-01 + +- Fixed some bugs + +## [4.3.3] - 2026-05-23 + +- Added Norwegian Bokmal, Hungarian, Indonesian to translate +- Added mark line for habit average chart (#778) + +## [4.3.2] - 2026-05-16 + +- Urgently fixed some bugs + +## [4.3.1] - 2026-05-15 + +- Added share button on the popup page +- Enabled tab group tracking by default +- Optimized data migration from other extensions +- Fixed some bugs + +## [4.3.0] - 2026-05-11 + +- Added two-factor authentication (2FA) for time limit verification +- Optimized the behavior of time limit verification + +## [4.2.3] - 2026-05-08 + +- Fixed some bugs +- Added some translations + +## [4.2.2] - 2026-05-01 [For FF Mobile] + +- Fixed behavior on FF Mobile + +## [4.2.1] - 2026-04-30 + +- Fixed some bugs for time limit +- Optimized the style of popup page + +## [4.2.0] - 2026-04-28 + +- refactored basic architecture +- supported custom delay duration +- added time limit on the popup page + +## [4.1.7] - 2026-04-23 + +- Dropped support for Firefox versions below 140 +- Fixed some issues + +## [4.1.6] - 2026-04-09 + +- Optimized some UI + +## [4.1.5] - 2026-03-31 + +- Fixed some issues + +## [4.1.4] - 2026-03-30 + +- Fixed some issue for Gist + + +## [4.1.3] - 2026-03-24 + +- Add data collection permission for Firefox + +## [4.1.2] - 2026-03-20 + +- Supported Italian + +## [4.1.1] - 2026-03-13 + +- Fixed the issue of timeline + +## [4.1.0] - 2026-03-07 + +- Added notification +- Supported time limits for mobile browsers + +## [4.0.1] - 2026-02-27 + +- Fixed an IndexedDB upgrade bug on Edge + +## [4.0.0] - 2026-02-26 + +- Supported IndexedDB to store the tracking data +- Refactor the header of popup page + +## [3.7.15] - 2026-01-21 + +- Fixed virtual sites' data + +## [3.7.14] - 2026-01-16 + +- Supported more languages for the guide page + +## [3.7.13] - 2026-01-13 + +- Added the donation link. Thank you all guys ^^ + +## [3.7.12] - 2026-01-09 + +- The first version of new year! +- Fixed some bugs + +## [3.7.11] - 2025-12-30 + +- Fixed an issue that allowed bypassing time-limited passwords in certain situations +- Fixed an issue where report tables did not refresh after category changes +- Removed scrollbars from pop-up charts for improved user experience + +## [3.7.10] - 2025-12-23 + +- Fixed a bug on Firefox + +## [3.7.9] - 2025-12-23 + +- Optimized UI +- Supported to disable the side panel for Chrome and Edge + +## [3.7.8] - 2025-12-13 [For Chrome] + +- Same as v3.7.7 + +## [3.7.7] - 2025-12-13 + +- Reverted tracking the time in split-screen mode for Chrome, which caused tracking stopping +- Supported donut chart on the popup pages + +## [3.7.6] - 2025-12-10 + +- Supported tracking the time in split-screen mode for Chrome +- Added the mask layer for date picker on the side page +- Fixed bugs that caused errors when importing data from Web Activity Time Tracker + +## [3.7.5] - 2025-11-28 + +- Supported tracking files for Firefox in background script +- All charts use system fonts +- Optimized the interaction for modifying restriction rules +- Fixed some bugs + +## [3.7.4] - 2025-11-15 + +- Improved the time display on popup page +- Supported exporting and importing data for Android + +## [3.7.3] - 2025-11-11 + +- Supported Polish +- Supported Turkish +- Considered audible tabs as active, and not to pause tracking. Thanks to [mrfragger](https://github.com/mrfragger) +- Fixed a bug when backup via WebDAV +- Reduced some lint warnings from web-ext + +## [3.7.2] - 2025-11-03 + +- Supported to collapse the menu +- Performance on Firefox has been optimized to address a performance issue caused by a leak of structured clone holders resulting from frequent calls to runtime.sendMessage + +## [3.7.1] - 2025-10-28 [For Chrome] + +- Optimized SEO of CWS + +## [3.7.0] - 2025-10-26 + +- Optimized adaptation on mobile devices +- Migrated options of popup page +- Optimized the interaction of limit rules +- Fixed some bugs ## [3.6.8] - 2025-10-21 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8e503a369..d4a9b6945 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,12 +1,12 @@ # Contributing Guide -## 1. Prerequisites +## Prerequisites The technology stack used is: - [rspack](https://rspack.dev) + [TypeScript](https://github.com/microsoft/TypeScript) - [Vue3 (Composition API + JSX)]() -- [sass](https://github.com/sass/sass) +- [emotion](https://github.com/emotion-js/emotion) - [Element Plus](https://element-plus.gitee.io/) - [Echarts](https://github.com/apache/echarts) @@ -14,130 +14,274 @@ And [Chrome Extension Development Documentation](https://developer.chrome.com/do Some free open source tools are also integrated: -- Testing tool [jest](https://jestjs.io/docs/getting-started) +- Testing tool [Rstest](https://rstest.rs) - End-to-end integration testing [puppeteer](https://developer.chrome.com/docs/extensions/how-to/test/puppeteer) - I18N tool [Crowdin](https://crowdin.com/project/timer-chrome-edge-firefox) -## 2. Steps +## Development Setup -1. Fork your repository -2. Install dependencies and initialize +### 1. Fork and Setup + +1. Fork this repository to your GitHub account +2. Clone your forked repository locally + +### 2. Install Dependencies ```shell npm install npm run prepare ``` -3. Create your own branch -4. Code & run +### 3. Create Development Branch + +Create a new branch for your changes -First execute the command +### 4. Development Commands + +#### Desktop Development ```shell +# Chrome/Edge development npm run dev -# or if you want to run in Firefox + +# Firefox development npm run dev:firefox + +# Safari development +npm run dev:safari ``` -Two folders will be output in the project root directory, `dist_dev` and `dist_dev_firefox` +This will create output directories: -Then import different targets according to the test browser: +- `dist_dev` - Chrome/Edge extension +- `dist_dev_firefox` - Firefox extension +- `dist_dev_safari` - Safari extension -- Import `dist_dev` into Chrome and Edge -- Import the `manifest.json` file in `dist_dev_firefox` for Firefox +#### Mobile Development (Android) -5. Run unit tests +> See: [Developing extensions for Firefox for Android](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/) + +For Firefox on Android development, use the helper script: ```shell -npm run test +./script/android-firefox.sh ``` -6. Run end-to-end tests +This script will: + +- Check prerequisites (web-ext, adb) +- Detect connected Android devices +- Build the extension automatically +- Install and run on Firefox for Android -First, you need to compile twice: integration compilation and production compilation +#### Production Builds ```shell -npm run dev:e2e +# Build all platforms npm run build + +# Build specific platform +npm run build:firefox +npm run build:safari +``` + +### 5. Debugging + +#### Chrome/Edge + +1. Open `chrome://extensions/` or `edge://extensions/` +2. Enable "Developer mode" +3. Click "Load unpacked" and select the `dist_dev` folder + +#### Firefox + +1. Open `about:debugging` +2. Click "This Firefox" +3. Click "Load Temporary Add-on" +4. Select the `manifest.json` file from `dist_dev_firefox` folder + +#### Firefox for Android + +Use the provided script which handles the entire process automatically. + +## Testing + +### Unit Tests + +```shell +npm run test ``` -Then execute the test +### Coverage Report + +```shell +npm run test-c +``` + +This will generate coverage reports in the `coverage/` directory. + +### End-to-End Tests + +> **Note**: This step is optional! All PRs will automatically run this step. + +#### Setup E2E Testing + +Use the provided setup script to initialize the e2e testing environment: + +```shell +# Initialize e2e environment (install dependencies and build outputs) +bash script/setup-e2e.sh --init --build + +# Start test servers +bash script/setup-e2e.sh --start-servers +``` + +The setup script will: + +- Install/upgrade global dependencies (`http-server`, `pm2`) +- Download browser for Puppeteer (if needed) +- Build e2e test output (`dist_e2e/`) +- Start test servers on ports 12345 and 12346 + +#### Run E2E Tests ```shell npm run test-e2e ``` -If you need to start puppeteer in headless mode, you can set the following environment variables +#### Headless Mode + +For headless Puppeteer testing: ```bash export USE_HEADLESS_PUPPETEER=true +npm run test-e2e ``` -7. Submit a PR - -Please PR to the main branch of this repository. - -## 3. Application architecture design - -> todo - -## 4. Directory Structure - -```plain -project -│ -└───doc # Documents -│ -└───public # Assets -| -└───src -| | manifest.ts # manifest.json for Chrome and Edge -| | manifest-firefox.ts # manifest.json for Firefox -| | -| └───api # API -| | -| └───pages # UI -| | | -| | └───app # Background page -| | | -| | └───popup # Popup page -| | | | -| | | └───skeleton.ts # Skeleton of the popup page -| | | | -| | | └───index.ts # Popup page entrance -| | | -| | └───side # Side page -| | | -| | └───[Other dirs] # Shared code -| | -| └───background # Backend service, responsible for coordinating data interaction, Service Worker -| | -| └───content-script # Script injected into user pages -| | -| └───service # Service Layer -| | -| └───database # Data Access Layer -| | -| └───i18n # Translations -| | -| └───util # Utils -| | -| └───common # Shared -| -└───test # Unit tests -| └───__mock__ -| | -| └───storage.ts # mock chrome.storage -| -└───test-e2e # End-to-end tests -| -└───types # Declarations -| -└───rspack # rspack config - -``` - -## 5. Code format +#### Stop Test Servers + +After testing, stop the servers: + +```shell +pm2 stop all && pm2 delete all +``` + +#### Setup Script Options + +The `setup-e2e.sh` script supports multiple options: + +```shell +# Show help +bash script/setup-e2e.sh --help + +# Initialize only (install dependencies) +bash script/setup-e2e.sh --init + +# Build e2e output only +bash script/setup-e2e.sh --build + +# Initialize and build +bash script/setup-e2e.sh --init --build + +# Run all steps (init + build + build production) +bash script/setup-e2e.sh --all +``` + +## Code Quality + +### Code Formatting + +- Use single quotes whenever possible +- Keep code concise while being grammatically correct +- No semicolons at the end of lines +- Use LF (`\n`) line endings + +For Windows users: + +```shell +git config core.autocrlf false +``` + +### Pre-commit Hooks + +The project uses Husky for pre-commit hooks. These will run automatically when you commit: + +## Submitting Changes + +### 1. Commit Your Changes + +```shell +git add . +git commit -m "feat: add new feature description" +# or +git commit -m "fix: fix bug description" +``` + +Use conventional commit messages: + +- `feat:` for new features +- `fix:` for bug fixes +- `docs:` for documentation changes +- `style:` for formatting changes +- `refactor:` for code refactoring +- `test:` for adding tests +- `chore:` for maintenance tasks +- `i18n:` for internationalization + +### 2. Push and Create PR + +Create a Pull Request to the `main` branch of this repository. + +### 3. PR Requirements + +- [ ] All tests pass +- [ ] Documentation updated if needed + +## Project Structure + +``` +time-tracker-4-browser/ +├── src/ # Source code +│ ├── manifest.ts # Chrome/Edge manifest +│ ├── manifest-firefox.ts # Firefox manifest +│ ├── api/ # API layer +│ ├── background/ # Service Worker +│ ├── content-script/ # Content scripts +│ ├── pages/ # UI pages +│ │ ├── app/ # Main app (background page) +│ │ ├── popup/ # Extension popup +│ │ │ ├── skeleton.ts # Popup skeleton +│ │ │ └── index.ts # Popup entry +│ │ └── side/ # Side panel +│ ├── service/ # Business logic +│ ├── database/ # Data access layer +│ ├── i18n/ # Internationalization +│ ├── util/ # Utilities +│ └── common/ # Shared code +├── test/ # Unit tests +│ └── __mock__/ # Test mocks +├── test-e2e/ # End-to-end tests +├── types/ # TypeScript declarations +├── rspack/ # Build configuration +├── script/ # Build and utility scripts +│ ├── android-firefox.sh # Android development helper +│ └── setup-e2e.sh # E2E test environment setup +├── public/ # Static assets +├── doc/ # Documentation +├── dist_dev/ # Chrome/Edge dev build +├── dist_dev_firefox/ # Firefox dev build +└── dist_dev_safari/ # Safari dev build +``` + +### Key Files + +- **`src/manifest.ts`** - Chrome/Edge extension manifest (Manifest V3) +- **`src/manifest-firefox.ts`** - Firefox extension manifest (Manifest V2) +- **`src/background/`** - Service Worker and background scripts +- **`src/content-script/`** - Scripts injected into web pages +- **`src/pages/`** - Extension UI (popup, side panel, options) + +## Code format Please use the code formatting tools that come with VSCode. Please **disable Prettier Eslint** and other formatting tools @@ -150,35 +294,33 @@ Please use the code formatting tools that come with VSCode. Please **disable git config core.autocrlf false ``` -## 6. How to use i18n +## How to use i18n Except for certain professional terms, the text of the user interface can be in English. For the rest, please use i18n to inject text. See the code directory `src/i18n` ### How to add entries 1. Add new fields in the definition file `xxx.ts` -2. Then add the corresponding text of this field in English (en) and Simplified Chinese (zh_CN) in the corresponding resource file `xxx-resource.json` -3. Call `t(msg=>msg...)` in the code to get the text content +2. Then add the corresponding text of this field in English (en) in the corresponding resource file `xxx-resource.json` +3. Call `t(msg => msg...)` in the code to get the text content, which can make full use of TypeScript to inspect translated texts. ### How to integrate with Crowdin -Crowdin is a collaborative translation platform that allows native speakers to help translate multilingual content. The project's integration with Crowdin is divided into two steps +Crowdin is a collaborative translation platform that allows native speakers to help translate multilingual content. The project's integration with Crowdin is divided into two steps. Collaborators usually need't to perform these steps. 1. Upload English text and other language text in code ``` # Upload original English text ts-node ./script/crowdin/sync-source.ts -# Upload texts in other languages ​​in local code (excluding Simplified Chinese) +# Upload texts in other languages ​​in local code ts-node ./script/crowdin/sync-translation.ts ``` -Because the above two scripts rely on the Crowdin access secret in the environment variable, I integrated them into Github's [Action](https://github.com/sheepzh/timer/actions/workflows/crowdin-sync.yml) +Because the above two scripts rely on the Crowdin access secret in the environment variable, I integrated them into Github's [Action](https://github.com/sheepzh/time-tracker-4-browser/actions/workflows/crowdin-sync.yml) 2. Export translations from Crowdin ``` ts-node ./script/crowdin/export-translation.ts ``` - -You can also directly execute [Action](https://github.com/sheepzh/timer/actions/workflows/crowdin-export.yml). diff --git a/README-zh.md b/README-zh.md index 498162e6b..9b49e936d 100644 --- a/README-zh.md +++ b/README-zh.md @@ -1,8 +1,15 @@ # 网费很贵 -[![codecov](https://codecov.io/gh/sheepzh/timer/branch/main/graph/badge.svg?token=S98QSBSKCR&style=flat-square)](https://codecov.io/gh/sheepzh/timer) +[![codecov](https://codecov.io/gh/sheepzh/time-tracker-4-browser/branch/main/graph/badge.svg?token=S98QSBSKCR&style=flat-square)](https://codecov.io/gh/sheepzh/time-tracker-4-browser) [![](https://img.shields.io/badge/license-Anti%20996-blue)](https://github.com/996icu/996.ICU) -[![](https://img.shields.io/github/v/release/sheepzh/timer)](https://github.com/sheepzh/timer/releases) +[![](https://img.shields.io/github/v/release/sheepzh/time-tracker-4-browser)](https://github.com/sheepzh/time-tracker-4-browser/releases) +[![Discord](https://img.shields.io/badge/discord-join-5865F2?logo=discord&logoColor=white)](https://discord.gg/yXCngD8pKS) + +

+ Chrome Web Store + Microsoft Store + Firefox 附加组件 +

\[ 简体中文 | [English](./README.md) \] @@ -48,13 +55,25 @@ -## 贡献指南 +## 如何反馈 -如果你想参与到该项目的开源建设，可以考虑以下几种方式 +如果你在使用过程中遇到了问题，或有任何想法和建议，欢迎通过以下方式告诉我们： #### 提交 Issue -如果您有一些好的想法，或者 bug 反馈，可以新建一条 [issue](https://github.com/sheepzh/timer/issues) 。作者会在第一时间进行回复。 +在 [GitHub Issues](https://github.com/sheepzh/time-tracker-4-browser/issues) 中描述你遇到的问题或功能建议，我们会尽快回复。 + +#### 加入 Discord + +加入我们的 [Discord 社区](https://discord.gg/yXCngD8pKS)，与开发者和其他用户直接交流。 + +#### 创建 Discussion + +在 [GitHub Discussions](https://github.com/sheepzh/time-tracker-4-browser/discussions) 中发起话题，适合分享使用经验或进行开放性讨论。 + +## 贡献指南 + +如果你想参与到该项目的开源建设，可以考虑以下几种方式 #### 参与开发 diff --git a/README.md b/README.md index da81bed88..7e740cdbc 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,15 @@ # Time Tracker for Browser -[![codecov](https://codecov.io/gh/sheepzh/timer/branch/main/graph/badge.svg?token=S98QSBSKCR&style=flat-square)](https://codecov.io/gh/sheepzh/timer) +[![codecov](https://codecov.io/gh/sheepzh/time-tracker-4-browser/branch/main/graph/badge.svg?token=S98QSBSKCR&style=flat-square)](https://codecov.io/gh/sheepzh/time-tracker-4-browser) [![](https://img.shields.io/badge/license-Anti%20996-blue)](https://github.com/996icu/996.ICU) -[![](https://img.shields.io/github/v/release/sheepzh/timer)](https://github.com/sheepzh/timer/releases) [![Crowdin](https://badges.crowdin.net/timer-chrome-edge-firefox/localized.svg)](https://crowdin.com/project/timer-chrome-edge-firefox) +[![Discord](https://img.shields.io/badge/discord-join-5865F2?logo=discord&logoColor=white)](https://discord.gg/yXCngD8pKS) + +

+ Available in the Chrome Web Store + Get it from Microsoft + Get the add-on +

\[ English | [简体中文](./README-zh.md) \] @@ -48,15 +54,27 @@ Time Tracker is a browser extension to track the time you spent on all websites.

Page Blocking

-## Contribution +## Feedback -There are some things you can do to contribute to this software. +If you encounter any issues or have suggestions during use, feel free to reach out through the following channels: + +#### 1. Submit an Issue + +Describe your problem or feature request in [GitHub Issues](https://github.com/sheepzh/time-tracker-4-browser/issues), and we'll get back to you as soon as possible. + +#### 2. Join Discord -#### 1. Submit issues +Join our [Discord community](https://discord.gg/yXCngD8pKS) to chat directly with the developer and other users. -You can [submit one issue](https://github.com/sheepzh/timer/issues) to us if you have some suggestions, feature requests, or feedback of bugs. And we will reply it as soon as possible. +#### 3. Create a Discussion -#### 2. Participate in development +Start a topic in [GitHub Discussions](https://github.com/sheepzh/time-tracker-4-browser/discussions) — great for sharing experiences or open-ended conversations. + +## Contribution + +There are some things you can do to contribute to this software. + +#### 1. Participate in development If you know how to develop browser extensions and are familiar with the project's technology stack (TypeScript + Vue3 + Element Plus + Echarts), you can also contribute code @@ -64,7 +82,7 @@ See the [Development Guide](./CONTRIBUTING.md) #### 3. Perfect translation -In addition to Simplified Chinese, the other localized languages of this software all rely on machine translation. You can also submit translation suggestions on [Crowdin](https://crowdin.com/project/timer-chrome-edge-firefox). +Most of the software's localization relies on machine translation. You can also submit translation suggestions on [Crowdin](https://crowdin.com/project/timer-chrome-edge-firefox). #### 4. Rate 5 stars @@ -75,3 +93,5 @@ It's simple and much helpful! ## Thanks Timer (relaunch) - Timer is one browser extension to stat site visits and time. | Product Hunt + + diff --git a/doc/for-fire-fox.md b/doc/for-fire-fox.md deleted file mode 100644 index 9f1ce08f4..000000000 --- a/doc/for-fire-fox.md +++ /dev/null @@ -1,14 +0,0 @@ -## How to build for Firefox - -```shell -npm install -npm run build:firefox -``` - -The output directory is `dist_prod_firefox` and you can find a zip file named `target.firefox.zip` in the `market_packages` directory - -## Another - -Also you could visit the sourcecode on GitHub - -[sheepzh/timer](https://github.com/sheepzh/timer) diff --git a/doc/for-firefox.md b/doc/for-firefox.md new file mode 100644 index 000000000..6a5a680b6 --- /dev/null +++ b/doc/for-firefox.md @@ -0,0 +1,24 @@ +## Building for Firefox + +### Prerequisites + ++ Node.js v22 + +### Build Steps + +```shell +npm install +npm run build:firefox +``` + +### Output Files + ++ Build directory: `dist_prod_firefox` + ++ Marketplace package: `market_packages/target.firefox.zip` + +## Source Code + +Visit our GitHub repository for the latest source code: + +[sheepzh/time-tracker-4-browser](https://github.com/sheepzh/time-tracker-4-browser) diff --git a/doc/safari-install.md b/doc/safari-install.md index a3c8c9b79..f08b32824 100644 --- a/doc/safari-install.md +++ b/doc/safari-install.md @@ -6,8 +6,8 @@ So please install it **manually**, GG Safari. ## 0. Download this repository ```shell -git clone https://github.com/sheepzh/timer.git -cd timer +git clone https://github.com/sheepzh/time-tracker-4-browser.git +cd time-tracker-4-browser ``` ## 1. Install tools @@ -30,14 +30,12 @@ npm install npm run build:safari ``` -Then there will be one folder called **Timer**. - -Also, you can download the archived file from [the release page](https://github.com/sheepzh/timer/releases), and unzip it to gain this folder. +Then there will be one folder called **dist_prod_safari**. 2. Convert js bundles to Xcode project ```shell -[YOUR_PATH]/Xcode.app/Contents/Developer/usr/bin/safari-web-extension-converter ./Timer +[YOUR_PATH]/Xcode.app/Contents/Developer/usr/bin/safari-web-extension-converter ./dist_prod_safari ``` 3. Run Xcode project and one extension app will installed on your macOS diff --git a/doc/similar-comparison.md b/doc/similar-comparison.md deleted file mode 100644 index c0b7df02a..000000000 --- a/doc/similar-comparison.md +++ /dev/null @@ -1,25 +0,0 @@ - -|Features|Webtime Tracker|Web Activity Time Tracker|Time Tracker|TimeYourWeb Time Tracker| -|----|----|----|----|----| -|Chrome|[👤 60k+
⭐ 4.79/5](https://chrome.google.com/webstore/detail/webtime-tracker/ppaojnbmmaigjmlpjaldnkgnklhicppk)|[👤 20k+
⭐ 4.71/5](https://chrome.google.com/webstore/detail/web-activity-time-tracker/hhfnghjdeddcfegfekjeihfmbjenlomm)|[👤 2k+
⭐ 4.97/5](https://chrome.google.com/webstore/detail/time-tracker/dkdhhcbjijekmneelocdllcldcpmekmm)|[👤 13k+
⭐ 4.38/5](https://chrome.google.com/webstore/detail/timeyourweb-time-tracker/kfmlkgchpffnaphmlmjnimonlldbcpnh) -|Edge|❌|[👤 4k+
⭐ 4.50/5](https://chrome.google.com/webstore/detail/web-activity-time-tracker/hhfnghjdeddcfegfekjeihfmbjenlomm)|[👤 3k+
⭐ 5.00/5](https://microsoftedge.microsoft.com/addons/detail/timer-running-browsin/fepjgblalcnepokjblgbgmapmlkgfahc)|[👤 400+
⭐ Not rated](https://microsoftedge.microsoft.com/addons/detail/insight-track-and-optim/kkcmfbejfopnopfcmcjgfkpalecbleio)|[👤 1k+
⭐ 5.00/5](https://microsoftedge.microsoft.com/addons/detail/timeyourweb-time-tracker/jodkkcjbahdphacgjhacggclncbaffoe) -|Firefox|[👤 90+
⭐ Not rated](https://addons.mozilla.org/en-US/firefox/addon/webtime-tracker-2/)|❌|[👤 100+
⭐ 5.00/5](https://addons.mozilla.org/en-US/firefox/addon/besttimetracker/)|❌ -|Track by domain|✅|✅|✅|✅| -|Track any URL|❌|❌|✅|❌ -|Track local files|❌|✅|❌|✅| -|Whitelist|❌|✅|✅|✅ -|Data chart screenshot|✅|❌|✅|❌ -|Daily browsing restrictions|❌|✅|✅|❌ -|Daily notifications|❌|✅|❌|❌|❌ -|Pause switch|❌|❌|❌|✅ -|Access calendar|❌|✅|✅|❌ -|Site analysis|❌|❌|✅|❌ -|Active moments per day|❌|❌|✅|✅ -|Beginner's guide|✅|❌|✅|❌ -|Dark mode|❌|❌|✅|❌ -|Export data|✅|✅|✅|❌| -|Sync data across browsers|❌|❌|✅|❌ -|Free|✅|✅|✅|✅| -|Open Source|❌|[GitHub](https://github.com/Stigmatoz/web-activity-time-tracker)|[GitHub](https://github.com/sheepzh/timer)|❌ -|Languages|English|Deutsch, English, русский|English, português (Portugal), 中文 (简体), 中文 (繁體), 日本語|English -|Memory usage with 5 tabs open on Chrome, MacOS
|21+M|19+M|21+M|20+M diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 000000000..df92792ee --- /dev/null +++ b/examples/README.md @@ -0,0 +1,26 @@ +# Examples Package + +The `examples` directory is an independent npm package for local demo and e2e helper servers. + +## Setup + +```bash +cd examples +npm install +``` + +## Available scripts + +- `npm run start:gist` - start Gist mock server +- `npm run start:notification` - start notification demo server ([notification/README.md](notification/README.md)) + +## Environment variables + +### Gist mock server + +- `PORT` (default: `12347`) +- `GIST_TOKEN` (optional auth token; supports `token` or `Bearer` authorization header) + +### Notification demo server + +- `AUTH` (optional signature secret) diff --git a/examples/gist/README.md b/examples/gist/README.md new file mode 100644 index 000000000..412014f3e --- /dev/null +++ b/examples/gist/README.md @@ -0,0 +1,45 @@ +# Gist Mock Server + +This mock server provides an in-memory Gist API for end-to-end testing. +It follows the GitHub Gist REST contract for the endpoints needed by this project. + +## Supported APIs + +- `GET /gists?per_page=100&page=1` +- `GET /gists/:id` +- `POST /gists` (create) +- `PATCH /gists/:id` (official update API) +- `POST /gists/:id` (compat mode for current project call path) +- `DELETE /gists/:id` +- `GET /raw/:id/:filename` + +Response shape is primarily aligned with GitHub Gist REST API, while keeping compatibility with current project call paths (for example `POST /gists/:id`). + +## Run + +```bash +cd examples +npm install +npm run start:gist +``` + +Optional environment variables: + +- `PORT` (default: `12347`) +- `GIST_TOKEN` (if set, requests must contain `Authorization: token ` or `Authorization: Bearer `) + +## Test with curl + +```bash +curl -X POST "http://localhost:12347/gists" \ + -H "Authorization: token demo" \ + -H "Content-Type: application/json" \ + -d '{ + "public": false, + "description": "Used for timer to save meta info. Don'\''t change this description :)", + "files": { + "README.md": {"filename": "README.md", "content": "hello"}, + "clients.json": {"filename": "clients.json", "content": "[]"} + } + }' +``` diff --git a/examples/gist/mock-server.ts b/examples/gist/mock-server.ts new file mode 100644 index 000000000..1e0888633 --- /dev/null +++ b/examples/gist/mock-server.ts @@ -0,0 +1,297 @@ +import { randomUUID } from "crypto" +import { createServer, type IncomingMessage, type ServerResponse } from "http" + +type GistFormFile = { + filename: string + content: string +} + +type GistFile = { + filename: string + type: string + language: string + raw_url: string + size: number + truncated: boolean + content?: string +} + +type GistForm = Partial<{ + public: boolean + description: string + files: { [filename: string]: GistFormFile | null } +}> + +type Gist = { + url: string + forks_url: string + commits_url: string + id: string + node_id: string + git_pull_url: string + git_push_url: string + html_url: string + public: boolean + description: string + files: { [filename: string]: GistFile | null } + comments: number + comments_url: string + owner: null + user: null + truncated: boolean + history: unknown[] + forks: unknown[] + created_at: string + updated_at: string +} + +const PORT = Number(process.env.PORT ?? 12347) +// The same as e2e tests +const REQUIRED_TOKEN = 'github_gist_mock_token' + +const gists = new Map() +const gistOrder: string[] = [] + +function nowIso(): string { + return new Date().toISOString() +} + +function inferFileType(filename: string): string { + if (filename.endsWith(".json")) return "application/json" + if (filename.endsWith(".md")) return "text/markdown" + return "text/plain" +} + +function inferLanguage(filename: string): string { + if (filename.endsWith(".json")) return "JSON" + if (filename.endsWith(".md")) return "Markdown" + return "Text" +} + +function buildGistFile(origin: string, gistId: string, filename: string, content: string): GistFile { + const encodedFilename = encodeURIComponent(filename) + return { + filename, + type: inferFileType(filename), + language: inferLanguage(filename), + raw_url: `${origin}/raw/${gistId}/${encodedFilename}`, + size: Buffer.byteLength(content, "utf-8"), + truncated: false, + content, + } +} + +function buildCreatedGist(origin: string, form: GistForm): Gist { + const id = randomUUID().replaceAll("-", "") + const ts = nowIso() + const files: Record = {} + for (const [filename, file] of Object.entries(form.files || {})) { + if (!file) continue + files[filename] = buildGistFile(origin, id, filename, file.content) + } + const gistUrl = `${origin}/gists/${id}` + return { + url: gistUrl, + forks_url: `${gistUrl}/forks`, + commits_url: `${gistUrl}/commits`, + id, + node_id: `MOCK_${id}`, + git_pull_url: `${origin}/${id}.git`, + git_push_url: `${origin}/${id}.git`, + html_url: `${origin}/mock/gist/${id}`, + public: !!form.public, + description: form.description ?? "", + files, + comments: 0, + comments_url: `${gistUrl}/comments`, + owner: null, + user: null, + truncated: false, + history: [], + forks: [], + created_at: ts, + updated_at: ts, + } +} + +function updateExistingGist(origin: string, gist: Gist, form: GistForm): Gist { + const next: Gist = { + ...gist, + description: form.description ?? gist.description, + public: typeof form.public === "boolean" ? form.public : gist.public, + files: { ...gist.files }, + updated_at: nowIso(), + } + for (const [filename, file] of Object.entries(form.files || {})) { + if (file === null) { + delete next.files[filename] + continue + } + const oldFilename = filename + const newFilename = file.filename || oldFilename + if (newFilename !== oldFilename) { + delete next.files[oldFilename] + } + next.files[newFilename] = buildGistFile(origin, gist.id, newFilename, file.content) + } + return next +} + + +class Handler { + private readonly req: IncomingMessage + private readonly res: ServerResponse + private readonly origin: string + private readonly url: URL + + constructor(req: IncomingMessage, res: ServerResponse) { + this.req = req + this.res = res + this.origin = `http://${req.headers.host ?? `localhost:${PORT}`}` + this.url = new URL(req.url ?? "/", this.origin) + } + + handle() { + try { + const { method, url, headers } = this.req + console.log(`${method} ${url} ${headers.authorization}`) + + if (!this.isAuthValid()) return this.unauthorized() + + if (method === "HEAD") return this.sendNoContent() + const { pathname } = this.url + if (method === "GET" && pathname === "/gists") return this.listGists() + if (method === "POST" && pathname === "/gists") return this.createGist() + + const gistMatch = pathname.match(/^\/gists\/([^/]+)$/) + if (gistMatch?.[1]) { + const gistId = gistMatch[1] + if (method === "GET") return this.getGist(gistId) + if (method === "POST") return this.updateGist(gistId) + if (method === "PATCH") return this.updateGist(gistId) + if (method === "DELETE") return this.deleteGist(gistId) + } + + const rawMatch = pathname.match(/^\/raw\/([^/]+)\/(.+)$/) + if (method === "GET" && rawMatch?.[1] && rawMatch?.[2]) { + const gistId = rawMatch[1] + const filename = decodeURIComponent(rawMatch[2]) + return this.getRawFile(gistId, filename) + } + + return this.notFound() + } catch (e) { + console.error("Mock gist server error:", e) + this.sendJson(400, { message: "Bad Request" }) + } + } + + private isAuthValid(): boolean { + const { method, headers: { authorization } } = this.req + const needAuth = method === "GET" || method === "POST" || method === "PATCH" || method === "DELETE" + if (!needAuth) return true + return !REQUIRED_TOKEN || `token ${REQUIRED_TOKEN}` === authorization + } + + private async readBody(): Promise { + const body = await new Promise((resolve, reject) => { + let data = "" + this.req.on("data", (chunk: Buffer) => { data += chunk.toString() }) + this.req.on("end", () => resolve(data)) + this.req.on("error", reject) + }) + return JSON.parse(body) as T + } + + private listGists() { + const perPageRaw = Number(this.url.searchParams.get("per_page") || "30") + const pageRaw = Number(this.url.searchParams.get("page") || "1") + const perPage = Math.min(100, Math.max(1, Number.isNaN(perPageRaw) ? 30 : perPageRaw)) + const page = Math.max(1, Number.isNaN(pageRaw) ? 1 : pageRaw) + const since = this.url.searchParams.get("since") + const all = gistOrder.map(id => gists.get(id)).filter(Boolean) as Gist[] + const filtered = since + ? all.filter(gist => gist.updated_at > since) + : all + const start = (page - 1) * perPage + const end = start + Math.max(0, perPage) + this.sendJson(200, filtered.slice(start, end)) + } + + private async createGist() { + const form = await this.readBody() + if (!form.files || Object.keys(form.files).length === 0) { + return this.validationFailed("Validation failed: files is required") + } + const gist = buildCreatedGist(this.origin, form) + gists.set(gist.id, gist) + gistOrder.unshift(gist.id) + this.sendJson(201, gist) + } + + private getGist(gistId: string) { + const gist = gists.get(gistId) + if (!gist) return this.notFound() + this.sendJson(200, gist) + } + + private async updateGist(gistId: string) { + const gist = gists.get(gistId) + if (!gist) return this.notFound() + const form = await this.readBody() + if (!form.description && !form.files) { + return this.validationFailed("Validation failed: description or files is required") + } + const updated = updateExistingGist(this.origin, gist, form) + gists.set(gistId, updated) + this.sendJson(200, updated) + } + + private async deleteGist(gistId: string) { + if (!gists.has(gistId)) return this.notFound() + gists.delete(gistId) + const idx = gistOrder.findIndex(id => id === gistId) + if (idx >= 0) gistOrder.splice(idx, 1) + this.sendNoContent() + } + + private getRawFile(gistId: string, filename: string) { + const gist = gists.get(gistId) + const file = gist?.files[filename] + if (!file) return this.notFound() + this.res.writeHead(200, { "Content-Type": file.type || "text/plain" }) + this.res.end(file.content || "") + } + + private sendJson(statusCode: number, payload: unknown) { + this.res.writeHead(statusCode, { "Content-Type": "application/json" }) + this.res.end(JSON.stringify(payload)) + } + + private unauthorized() { + this.sendJson(401, { message: "Bad credentials" }) + } + + private sendNoContent() { + this.res.writeHead(204).end() + } + + private validationFailed(message: string) { + this.sendJson(422, { message }) + } + + private notFound() { + this.sendJson(404, { message: "Not Found" }) + } +} + +function main() { + const server = createServer((req, res) => new Handler(req, res).handle()) + + server.listen(PORT, () => { + console.log(`Gist mock server listening on http://localhost:${PORT}`) + console.log("Set GIST_TOKEN to enable token validation") + }) +} + +main() diff --git a/examples/host/index.html b/examples/host/index.html new file mode 100644 index 000000000..5812731a0 --- /dev/null +++ b/examples/host/index.html @@ -0,0 +1,8 @@ + + + + +
Time Tracker test page
+ + + \ No newline at end of file diff --git a/examples/notification/README.md b/examples/notification/README.md new file mode 100644 index 000000000..3c13280ed --- /dev/null +++ b/examples/notification/README.md @@ -0,0 +1,157 @@ +# HTTP Notification Callback + +The extension can push usage data to your server via an HTTP callback. This page describes: + +1. [Protocol contract](#protocol-contract) — what your HTTP endpoint must satisfy. +2. [Request body (JSON)](#request-body) — every field the extension sends. +3. [Signature verification](#signature-verification) — how to verify `Tt4b-Sign`. +4. [Full example](#full-example) — a complete request you can use for testing. +5. [Local demo server](#local-demo-server) — run a sample receiver locally. + +--- + +## Protocol contract + +Your endpoint **must** satisfy every requirement below. The extension will only ever call the URL the user saved in settings. + +| # | Requirement | +|---|-------------| +| 1 | Accept **`POST`** requests. The extension never uses any other HTTP method for a real callback. | +| 2 | The URL scheme must be **`http://`** or **`https://`**. The extension will not use other URL schemes. | +| 3 | The request carries **`Content-Type: application/json`** with a **UTF-8** JSON body whose structure is defined in [Request body](#request-body). | +| 4 | If the user configured an **auth token**, the request includes a **`Tt4b-Sign`** header (see [Signature verification](#signature-verification)). If no token is configured the header is **omitted** — your server must not require it in that case. | +| 5 | Return a **2xx** status (e.g. `200`) to signal success. The extension only treats the delivery as successful for **2xx** responses. The **response body is not used**. | +| 6 | Return a meaningful **4xx / 5xx** status to signal failure. The user may see the **HTTP status text** of your response, so use a descriptive reason phrase (e.g. `401 Unauthorized`, `400 Bad Request`). | + +**Out of scope:** what you do with the data (store, forward, log, etc.) is entirely up to you — as long as you return **2xx** when you have successfully accepted the payload. + +--- + +## Request body + +The top-level JSON object contains four keys: + +| Field | Type | Description | +|-------|------|-------------| +| `meta` | `object` | Client metadata — see [`meta`](#meta). | +| `cycle` | `string` | `"daily"` or `"weekly"` — the reporting period the user chose. | +| `summary` | `object` | Aggregated totals for the period — see [`summary`](#summary). | +| `row` | `array` | Per-site, per-day breakdown — see [`row`](#row-items). | + +### `meta` + +| Field | Type | Example | Description | +|-------|------|---------|-------------| +| `locale` | `string` | `"en"` | The app's UI locale at the time the payload was built. | +| `version` | `string` | `"1.0.0"` | Extension version string. | +| `ts` | `number` | `1710000000000` | When the payload was built: milliseconds since the Unix epoch. | + +### `summary` + +| Field | Type | Example | Description | +|-------|------|---------|-------------| +| `focus` | `number` | `3600` | Total **focus time in milliseconds** across all sites in the period. Focus time is the accumulated duration a tab was in the foreground and the user was actively interacting. | +| `visit` | `number` | `42` | Total page-visit count across all sites in the period. | +| `siteCount` | `number` | `3` | Number of distinct hosts present in `row`. | +| `dateStart` | `string` | `"2025-01-15"` | First date of the period (`YYYY-MM-DD`). | +| `dateEnd` | `string` | `"2025-01-15"` | Last date of the period (`YYYY-MM-DD`). For a daily cycle `dateStart === dateEnd`. | + +### `row` items + +Each element in the `row` array represents **one host on one day**: + +| Field | Type | Required | Example | Description | +|-------|------|----------|---------|-------------| +| `host` | `string` | yes | `"example.com"` | The site's hostname (no scheme, no path). | +| `date` | `string` | yes | `"2025-01-15"` | The calendar date (`YYYY-MM-DD`). | +| `focus` | `number` | yes | `1200` | Focus time **in milliseconds** for this host on this date. | +| `time` | `number` | yes | `10` | **Visit count** for this host on that calendar day (how many page visits were recorded; **not** a length of time). | +| `run` | `number` | no | `5000` | **Run time** in milliseconds for this host on this date (only when run-time tracking is enabled for the site; not the same as focus time). | + +> **Consistency check:** `summary.focus` equals the sum of all `row[].focus` values, and `summary.visit` equals the sum of all `row[].time` values. + +--- + +## Signature verification + +| Auth token configured? | `Tt4b-Sign` header | +|-------------------------|--------------------| +| No (empty) | **Not sent.** Do not require or check it. | +| Yes | `Tt4b-Sign: <64 lowercase hex characters>` | + +**Algorithm:** HMAC-SHA256. + +- **Key** — the auth-token string (UTF-8). +- **Data** — an **empty string** (`""`). + +> ⚠️ The HMAC is computed over an **empty** input, **not** over the request body. This is by design — the signature proves the caller knows the shared token, not that the body is untampered. If you need body-integrity verification, hash the body separately after validating the token. + +```js +import { createHmac } from 'node:crypto'; + +function verifySign(header, token) { + const expected = createHmac('sha256', token).update('').digest('hex'); + return expected === header; +} +``` + +--- + +## Full example + +**Request:** + +``` +POST /callback HTTP/1.1 +Content-Type: application/json +Tt4b-Sign: <64 hex chars — only if token is set> +``` + +```json +{ + "meta": { + "locale": "en", + "version": "1.0.0", + "ts": 1710000000000 + }, + "cycle": "daily", + "summary": { + "focus": 3600, + "visit": 42, + "siteCount": 3, + "dateStart": "2025-01-15", + "dateEnd": "2025-01-15" + }, + "row": [ + { "host": "example.com", "date": "2025-01-15", "focus": 1200, "time": 10 }, + { "host": "github.com", "date": "2025-01-15", "focus": 1800, "time": 25 }, + { "host": "docs.test.io", "date": "2025-01-15", "focus": 600, "time": 7 } + ] +} +``` + +**Expected response:** `200 OK` (body is ignored). + +> The three rows sum to `focus=3600` and `time=42`, matching `summary.focus` and `summary.visit`. + +--- + +## Local demo server + +From the `examples/` package ([setup](../README.md)): + +```bash +# Optional: set AUTH to the same value as the extension's auth token +export AUTH="my-secret-token" +npm run start:notification +``` + +This starts `demo-server.ts` on **port 3000**. + +| Method | Demo behavior | +|--------|---------------| +| `POST` | Parses JSON, optionally verifies `Tt4b-Sign`, responds `200` / `401` / `400`. | +| `HEAD` | `200` (this demo only; the extension’s callback does not use `HEAD`.) | +| Any other | `405 Method Not Allowed`. **The real callback always uses `POST`.** | + +> The demo only checks `meta` for the signature; it does **not** validate the full body shape. A production service should follow the [protocol contract](#protocol-contract) and field definitions above. \ No newline at end of file diff --git a/examples/notification/demo-server.ts b/examples/notification/demo-server.ts new file mode 100644 index 000000000..b1af9e66c --- /dev/null +++ b/examples/notification/demo-server.ts @@ -0,0 +1,56 @@ +import hash from "hash.js" +import { createServer } from "http" + +const AUTH: string | undefined = process.env.AUTH + +function genSign(meta: any, auth: string): string { + return hash.hmac(hash.sha256 as any, auth).update(meta).digest('hex') +} + +function verifySign(meta: any, receivedSign: string | string[] | undefined): boolean { + if (!AUTH) return true + if (!receivedSign) return false + return genSign(meta, AUTH) === receivedSign +} + +function main() { + const server = createServer(async (req, res) => { + const method = req.method + if (method === 'HEAD') { + res.writeHead(200).end() + return + } + + if (method === 'POST') { + try { + const body = await new Promise((resolve, reject) => { + let data = '' + req.on('data', (chunk: Buffer) => { data += chunk.toString() }) + req.on('end', () => resolve(data)) + req.on('error', reject) + }) + + const { meta } = JSON.parse(body) + const sign = req.headers['tt4b-sign'] + if (!verifySign(meta, sign)) { + res.writeHead(401).end('Unauthorized') + return + } + + res.writeHead(200, { 'Content-Type': 'application/json' }) + res.end("Thanks!!") + } catch (e) { + console.error("Failed to parse request", e) + res.writeHead(400).end('Bad Request') + } + return + } + + res.writeHead(405).end('Method Not Allowed') + }) + + const port = 3000 + server.listen(port, () => console.log(`Notification server listening on port ${port}`)) +} + +main() diff --git a/examples/package.json b/examples/package.json new file mode 100644 index 000000000..fdd09e3c0 --- /dev/null +++ b/examples/package.json @@ -0,0 +1,18 @@ +{ + "name": "@tt4b/examples", + "version": "1.0.0", + "private": true, + "description": "Standalone examples package for local/e2e servers", + "scripts": { + "start:gist": "ts-node gist/mock-server.ts", + "start:notification": "ts-node notification/demo-server.ts" + }, + "dependencies": { + "hash.js": "^1.1.7" + }, + "devDependencies": { + "@types/node": "^25.5.0", + "ts-node": "^10.9.2", + "typescript": "6.0.2" + } +} \ No newline at end of file diff --git a/jest.config.ts b/jest.config.ts deleted file mode 100644 index 4b4b1b320..000000000 --- a/jest.config.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { type Config } from "@jest/types" -import { compilerOptions } from './tsconfig.json' - -const { paths } = compilerOptions - -const aliasPattern = /^(@.*)\/\*$/ -const sourcePattern = /^(.*)\/\*$/ - -const moduleNameMapper: { [key: string]: string } = {} - -Object.entries(paths).forEach(([alias, sourceArr]) => { - const aliasMatch = alias.match(aliasPattern) - if (!aliasMatch) { - return - } - if (sourceArr.length !== 1) { - return - } - const sourceMath = sourceArr[0]?.match(sourcePattern) - if (!sourceMath) { - return - } - const prefix = aliasMatch[1] - const pattern = `^${prefix}/(.*)$` - const source = sourceMath[1] - const sourcePath = `/${source}/$1` - moduleNameMapper[pattern] = sourcePath -}) - -console.log("The moduleNameMapper parsed from tsconfig.json: ") -console.log(moduleNameMapper) - -const config: Config.InitialOptions = { - moduleNameMapper, - roots: [ - "/test", - "/test-e2e", - ], - testRegex: '(.+)\\.test\\.(jsx?|tsx?)$', - transform: { - "^.+\\.tsx?$": "@swc/jest" - }, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], -} - -export default config \ No newline at end of file diff --git a/knip.ts b/knip.ts new file mode 100644 index 000000000..fc9fdf434 --- /dev/null +++ b/knip.ts @@ -0,0 +1,34 @@ +import type { KnipConfig } from "knip" +const config: KnipConfig = { + entry: [ + "src/background/index.ts", + "src/pages/app/index.ts", + "src/pages/popup/{index,skeleton}.ts", + "src/pages/side/index.ts", + "src/content-script/index.ts", + "src/content-script/limit/modal/index.ts", + "script/user-chart/{add,render}.ts", + "examples/gist/mock-server.ts", + "examples/notification/demo-server.ts", + ], + ignoreDependencies: [ + "@rstest/coverage-istanbul", + "tsconfig-paths", + ], + rspack: { + config: ["rspack/rspack.{dev,prod,e2e,analyze}*.ts"], + }, + rstest: { + config: [ + "test/rstest.config.mts", + "test-e2e/rstest.config.mts", + ] + }, + commitlint: { + config: [ + ".commitlintrc.ts", + ] + } +} + +export default config \ No newline at end of file diff --git a/package.json b/package.json index 2db08e94b..1a86d99ca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "timer", - "version": "3.6.8", + "name": "tt4b", + "version": "4.3.5", "description": "Time tracker for browser", "homepage": "https://www.wfhg.cc", "scripts": { @@ -10,13 +10,12 @@ "dev:safari": "rspack --config=rspack/rspack.dev.safari.ts --watch", "dev:e2e": "rspack --config=rspack/rspack.e2e.ts", "analyze": "rspack --config=rspack/rspack.analyze.ts", - "android-firefox": "web-ext run -t firefox-android --firefox-apk org.mozilla.fenix -s dist_dev_firefox --adb-device ", "build": "rspack --config=rspack/rspack.prod.ts", "build:firefox": "rspack --config=rspack/rspack.prod.firefox.ts", "build:safari": "rspack --config=rspack/rspack.prod.safari.ts", - "test": "jest --env=jsdom test/", - "test-c": "jest --coverage --reporters=jest-junit --env=jsdom test/", - "test-e2e": "jest test-e2e/ --runInBand", + "test": "rstest --config test/rstest.config.mts", + "test-c": "rstest --config test/rstest.config.mts --coverage --reporter=junit", + "test-e2e": "rstest --config test-e2e/rstest.config.mts", "prepare": "husky" }, "author": { @@ -25,56 +24,54 @@ "url": "https://www.github.com/sheepzh" }, "repository": { - "url": "https://github.com/sheepzh/timer" + "url": "https://github.com/sheepzh/time-tracker-4-browser" }, "license": "MIT", "devDependencies": { - "@crowdin/crowdin-api-client": "^1.48.3", - "@rsdoctor/rspack-plugin": "^1.3.3", - "@rspack/cli": "^1.5.8", - "@rspack/core": "^1.5.8", - "@swc/core": "^1.13.5", - "@swc/jest": "^0.2.39", - "@types/chrome": "0.1.24", + "@commitlint/types": "^21.0.1", + "@crowdin/crowdin-api-client": "^1.55.4", + "@emotion/babel-plugin": "^11.13.5", + "@rsdoctor/rspack-plugin": "^1.5.13", + "@rspack/cli": "^2.0.8", + "@rspack/core": "^2.0.8", + "@rstest/core": "^0.10.3", + "@rstest/coverage-istanbul": "^0.10.3", + "@types/chrome": "0.1.43", "@types/decompress": "^4.2.7", - "@types/jest": "^30.0.0", - "@types/node": "^24.7.2", - "@types/punycode": "^2.1.4", + "@types/firefox-webext-browser": "^143.0.0", + "@types/node": "^25.9.3", "@vue/babel-plugin-jsx": "^2.0.1", - "babel-loader": "^10.0.0", - "commitlint": "^20.1.0", - "css-loader": "^7.1.2", + "babel-loader": "^10.1.1", + "commitlint": "^21.0.2", + "css-loader": "^7.1.4", "decompress": "^4.2.1", + "fake-indexeddb": "^6.2.5", + "fork-ts-checker-webpack-plugin": "^9.1.0", "husky": "^9.1.7", - "jest": "^30.2.0", - "jest-environment-jsdom": "^30.2.0", - "jest-junit": "^16.0.0", + "jsdom": "^29.1.1", "jszip": "^3.10.1", - "postcss": "^8.5.6", - "postcss-loader": "^8.2.0", - "postcss-rtlcss": "^5.7.1", - "puppeteer": "^24.25.0", - "sass": "^1.93.2", - "sass-loader": "^16.0.5", - "ts-loader": "^9.5.4", + "knip": "^6.16.1", + "postcss": "^8.5.15", + "postcss-loader": "^8.2.1", + "postcss-rtlcss": "^6.0.0", + "puppeteer": "^25.1.0", "ts-node": "^10.9.2", "tsconfig-paths": "^4.2.0", - "typescript": "5.9.3" - }, - "optionalDependencies": { - "web-ext": "^9.0.0" + "typescript": "6.0.3", + "unplugin-element-plus": "^0.11.2" }, "dependencies": { "@element-plus/icons-vue": "^2.3.2", - "countup.js": "^2.9.0", - "echarts": "^6.0.0", - "element-plus": "2.11.4", - "js-base64": "^3.7.8", - "punycode": "^2.3.1", - "vue": "^3.5.22", - "vue-router": "^4.6.2" + "@emotion/css": "^11.13.5", + "echarts": "^6.1.0", + "element-plus": "2.14.1", + "hash.js": "^1.1.7", + "qrcode-generator": "^2.0.4", + "typescript-guard": "0.2.6", + "vue": "^3.5.38", + "vue-router": "^5.1.0" }, "engines": { - "node": ">=20" + "node": ">=22" } } diff --git a/public/images/icon-128.png b/public/images/icon-128.png new file mode 100644 index 000000000..7e9537415 Binary files /dev/null and b/public/images/icon-128.png differ diff --git a/public/images/icon-16.png b/public/images/icon-16.png new file mode 100644 index 000000000..b4c5e7a53 Binary files /dev/null and b/public/images/icon-16.png differ diff --git a/public/images/icon-48.png b/public/images/icon-48.png new file mode 100644 index 000000000..0b89d9ed3 Binary files /dev/null and b/public/images/icon-48.png differ diff --git a/rspack/plugins/file-manager.ts b/rspack/plugins/file-manager.ts index 01f442f02..224d99228 100644 --- a/rspack/plugins/file-manager.ts +++ b/rspack/plugins/file-manager.ts @@ -1,4 +1,4 @@ -import type { Compiler } from '@rspack/core' +import type { Compiler, RspackPluginInstance } from '@rspack/core' import fs from 'fs' import JSZip from 'jszip' import path from 'path' @@ -23,7 +23,8 @@ interface FileManagerOptions { context?: string } -export class FileManagerPlugin { +export class FileManagerPlugin implements RspackPluginInstance { + private static readonly NAME = 'FileManagerPlugin' private options: FileManagerOptions private outputPath: string @@ -33,11 +34,11 @@ export class FileManagerPlugin { } apply(compiler: Compiler) { - compiler.hooks.afterEnvironment.tap('FileManagerPlugin', () => { + compiler.hooks.afterEnvironment.tap(FileManagerPlugin.NAME, () => { this.outputPath = compiler.options.output.path || 'dist' }) - compiler.hooks.done.tapPromise('FileManagerPlugin', async () => { + compiler.hooks.done.tapPromise(FileManagerPlugin.NAME, async () => { if (this.options.events.onEnd) { for (const op of this.options.events.onEnd) { await this.processOperation(op) diff --git a/rspack/plugins/generate-json.ts b/rspack/plugins/generate-json.ts index 4682f3cac..d635096a9 100644 --- a/rspack/plugins/generate-json.ts +++ b/rspack/plugins/generate-json.ts @@ -1,38 +1,27 @@ -import { Compilation, Compiler, sources } from '@rspack/core' +import { Compilation, type Compiler, type RspackPluginInstance, sources } from '@rspack/core' -type GenerateJsonPluginOptions = { - data: Record - outputPath: string -} +export class GenerateJsonPlugin implements RspackPluginInstance { + private static readonly NAME = 'GenerateJsonPlugin' -export class GenerateJsonPlugin { - private options: GenerateJsonPluginOptions - - constructor(outputPath: string, data: Record) { + constructor(private outputPath: string, private data: unknown) { if (!data || typeof data !== 'object') { throw new Error('Invalid data option') } - if (!outputPath?.endsWith('.json')) { + if (!outputPath.endsWith('.json')) { throw new Error('outputPath must be .json file') } - - this.options = { outputPath, data } } apply(compiler: Compiler) { - compiler.hooks.thisCompilation.tap('GenerateJsonPlugin', (compilation) => { + compiler.hooks.thisCompilation.tap(GenerateJsonPlugin.NAME, compilation => { compilation.hooks.processAssets.tap({ - name: 'GenerateJsonPlugin', + name: GenerateJsonPlugin.NAME, stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, }, () => { try { - const json = JSON.stringify(this.options.data) - - compilation.emitAsset(this.options.outputPath, { - source: () => json, - size: () => json.length - } as sources.Source) - + const json = JSON.stringify(this.data) + const raw = new sources.RawSource(json) + compilation.emitAsset(this.outputPath, raw) } catch (e) { compilation.errors.push(new Error(`[SimpleWriteJson] ${(e as Error)?.message}`)) } diff --git a/rspack/plugins/import-checker.ts b/rspack/plugins/import-checker.ts new file mode 100644 index 000000000..bd094d3df --- /dev/null +++ b/rspack/plugins/import-checker.ts @@ -0,0 +1,97 @@ +import type { Compiler, Module, ModuleGraph, RspackPluginInstance } from '@rspack/core' +import { NormalModule } from '@rspack/core' + +/** + * Can't import content-script & pages for background + * Can't import background for content-script & pages + */ +class ImportCheckerPlugin implements RspackPluginInstance { + static readonly NAME = 'ImportCheckerPlugin' + + apply(compiler: Compiler) { + compiler.hooks.compilation.tap(ImportCheckerPlugin.NAME, compilation => { + const moduleGraph = compilation.moduleGraph + compilation.hooks.finishModules.tap( + ImportCheckerPlugin.NAME, + modules => { + for (const mod of modules) { + processModule(mod, moduleGraph) + } + }, + ) + }) + } +} + +function processModule(mod: Module, moduleGraph: ModuleGraph) { + const resource = moduleFilesystemPath(mod) + if (!resource) return + + const incoming = moduleGraph.getIncomingConnections(mod) + if (!incoming?.length) return + + for (const conn of incoming) { + const originMod = conn.originModule + if (!originMod) continue + const issuer = moduleFilesystemPath(originMod) + if (!issuer) continue + const err = verify(issuer, resource) + if (err) throw err + } +} + +function verify(issuer: string, resource: string): Error | undefined { + const issuerPath = normalizePath(issuer) + const resourcePath = normalizePath(resource) + + const issuerInBg = isBgPath(issuerPath) + const issuerInOthers = isCsOrPagePath(issuerPath) + + const resourceInBg = isBgPath(resourcePath) + const resourceInOthers = isCsOrPagePath(resourcePath) + + if (issuerInBg && resourceInOthers) { + return new Error( + `[${ImportCheckerPlugin.NAME}] background must not import content-script or pages.\n` + + ` From: ${issuer}\n` + + ` To: ${resource}`, + ) + } + + if (issuerInOthers && resourceInBg) { + return new Error( + `[${ImportCheckerPlugin.NAME}] content-script and pages must not import background.\n` + + ` From: ${issuer}\n` + + ` To: ${resource}`, + ) + } +} + +function moduleFilesystemPath(mod: Module): string | undefined { + if (mod instanceof NormalModule) { + const { resource } = mod + if (resource) return resource + } + return mod.nameForCondition() +} + +function normalizePath(p: string): string { + return p.replace(/\\/g, '/') +} + +export function isBgPath(path: string): boolean { + return isUnder(normalizePath(path), 'background') +} + +function isCsOrPagePath(path: string): boolean { + return isUnder(path, 'content-script') || isUnder(path, 'pages') +} + +function isUnder(path: string, segment: string): boolean { + const marker = `/src/${segment}/` + if (path.includes(marker)) return true + const suffix = `/src/${segment}` + return path.endsWith(suffix) +} + +export default ImportCheckerPlugin diff --git a/rspack/rspack.common.ts b/rspack/rspack.common.ts index a941fc410..6f2bde349 100644 --- a/rspack/rspack.common.ts +++ b/rspack/rspack.common.ts @@ -1,21 +1,22 @@ import { CopyRspackPlugin, CssExtractRspackPlugin, DefinePlugin, HtmlRspackPlugin, - type Chunk, type Configuration, - type RspackPluginInstance, - type RuleSetRule + type Chunk, type Configuration, type Module, type RspackPluginInstance, type RuleSetRule } from "@rspack/core" +import { default as VueBabelPluginJsx } from "@vue/babel-plugin-jsx" import path, { join } from "path" import postcssRTLCSS from 'postcss-rtlcss' +import ElementPlus from 'unplugin-element-plus/rspack' import i18nChrome from "../src/i18n/chrome" +import { compilerOptions } from "../tsconfig.json" import { GenerateJsonPlugin } from "./plugins/generate-json" +import ImportCheckerPlugin, { isBgPath } from "./plugins/import-checker" -export const MANIFEST_JSON_NAME = "manifest.json" +const MANIFEST_JSON_NAME = "manifest.json" const generateJsonPlugins: RspackPluginInstance[] = [] const localeJsonFiles = Object.entries(i18nChrome) .map(([locale, message]) => new GenerateJsonPlugin(`_locales/${locale}/messages.json`, message)) - .map(plugin => plugin as unknown as RspackPluginInstance) generateJsonPlugins.push(...localeJsonFiles) type EntryConfig = { @@ -25,7 +26,7 @@ type EntryConfig = { const BACKGROUND = 'background' const CONTENT_SCRIPT = 'content_scripts' -const CONTENT_SCRIPT_SKELETON = 'content_scripts_skeleton' +const CONTENT_SCRIPT_LIMIT = 'content_scripts_limit' const POPUP = 'popup' const entryConfigs: EntryConfig[] = [{ @@ -35,8 +36,8 @@ const entryConfigs: EntryConfig[] = [{ name: CONTENT_SCRIPT, path: './src/content-script', }, { - name: CONTENT_SCRIPT_SKELETON, - path: './src/content-script/skeleton', + name: CONTENT_SCRIPT_LIMIT, + path: './src/content-script/limit/modal', }, { name: POPUP, path: './src/pages/popup', @@ -61,9 +62,11 @@ const POSTCSS_LOADER_CONF: RuleSetRule['use'] = { } const chunkFilter = ({ name }: Chunk) => { - return !name || ![BACKGROUND, CONTENT_SCRIPT, CONTENT_SCRIPT_SKELETON].includes(name) + return !name || ![BACKGROUND, CONTENT_SCRIPT].includes(name) } +const isBackgroundModule = (module: Module) => isBgPath(module.nameForCondition?.() ?? '') + const staticOptions: Configuration = { entry() { const entry: Record = {} @@ -83,16 +86,30 @@ const staticOptions: Configuration = { iterableIsArray: true, }, plugins: [ - "@vue/babel-plugin-jsx", + VueBabelPluginJsx, + "@emotion/babel-plugin", ], }, - }, 'ts-loader'], + }, { + loader: 'builtin:swc-loader', + options: { + jsc: { + parser: { + syntax: 'typescript', + tsx: true, + }, + transform: { + react: { + runtime: 'preserve', + }, + }, + target: compilerOptions.target, + }, + }, + }], }, { test: /\.css$/, use: [CssExtractRspackPlugin.loader, 'css-loader', POSTCSS_LOADER_CONF], - }, { - test: /\.s[ac]ss$/, - use: [CssExtractRspackPlugin.loader, 'css-loader', POSTCSS_LOADER_CONF, 'sass-loader'] }, { test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/, type: 'asset/resource' @@ -100,20 +117,81 @@ const staticOptions: Configuration = { ] }, resolve: { - extensions: ['.ts', '.tsx', '.js', '.css', '.scss', '.sass'], + extensions: ['.ts', '.tsx', '.js', '.css'], tsConfig: join(__dirname, '..', 'tsconfig.json'), + conditionNames: ['import', 'module', 'browser', 'default'], + alias: { + 'element-plus/es/components/loading-service/style/css': 'element-plus/es/components/loading/style/css', + 'element-plus/es/components/loading-directive/style/css': 'element-plus/es/components/loading/style/css', + 'element-plus/es/components/auto-resizer/style/css': 'element-plus/es/components/table-v2/style/css', + }, }, optimization: { splitChunks: { chunks: chunkFilter, + maxInitialRequests: 30, + maxAsyncRequests: 30, cacheGroups: { + echarts: { + test: /[\\/]node_modules[\\/]echarts[\\/]/, + name: 'vendor/echarts', + filename: 'vendor/echarts.js', + priority: 40, + reuseExistingChunk: true, + enforce: true, + }, elementPlus: { - name: 'element-plus', test: /[\\/]node_modules[\\/]element-plus[\\/]/, + name: 'vendor/element-plus', + filename: 'vendor/element-plus.js', + priority: 39, + reuseExistingChunk: true, + enforce: true, + }, + elementIcons: { + test: /[\\/]node_modules[\\/]@element-plus[\\/]icons-vue[\\/]/, + name: 'vendor/el-icons', + filename: 'vendor/el-icons.js', + priority: 38, + reuseExistingChunk: true, + enforce: true, + }, + vue: { + test: /[\\/]node_modules[\\/](vue|@vue|vue-router|@vueuse)[\\/]/, + name: 'vendor/vue', + filename: 'vendor/vue.js', + priority: 37, + reuseExistingChunk: true, + enforce: true, + }, + dayjs: { + test: /[\\/node_modules][\\/]dayjs[\\/]/, + priority: 37, + reuseExistingChunk: true, + enforce: true, + }, + memoizeOne: { + test: /[\\/node_modules][\\/]memoize\\-one[\\/]/, + priority: 37, + reuseExistingChunk: true, + enforce: true, + }, + /** + * Exclude src/background from the default shared chunk group so those files are + * never pulled into vendor/* (merging into entry name: 'background' panics in Rspack). + */ + default: { + minChunks: 2, + priority: -20, + reuseExistingChunk: true, + test: module => !isBackgroundModule(module), }, defaultVendors: { - filename: 'vendor/[name].js' - } + test: /[\\/]node_modules[\\/]/, + filename: 'vendor/[name].js', + priority: -10, + reuseExistingChunk: true, + }, } }, }, @@ -121,14 +199,16 @@ const staticOptions: Configuration = { type Option = { outputPath: string - manifest: chrome.runtime.ManifestV3 | chrome.runtime.ManifestFirefox + manifest: chrome.runtime.ManifestV3 | browser._manifest.WebExtensionManifest mode: Configuration["mode"] } const generateOption = ({ outputPath, manifest, mode }: Option) => { const plugins = [ ...generateJsonPlugins, + ElementPlus({}), new GenerateJsonPlugin(MANIFEST_JSON_NAME, manifest), + new ImportCheckerPlugin(), // copy static resources new CopyRspackPlugin({ patterns: [ @@ -138,7 +218,7 @@ const generateOption = ({ outputPath, manifest, mode }: Option) => { } ] }), - new CssExtractRspackPlugin(), + new CssExtractRspackPlugin({ ignoreOrder: true }), new HtmlRspackPlugin({ filename: path.join('static', 'app.html'), title: 'Loading...', @@ -150,6 +230,17 @@ const generateOption = ({ outputPath, manifest, mode }: Option) => { }, chunks: ['app'], }), + new HtmlRspackPlugin({ + filename: path.join('static', 'limit.html'), + title: 'Loading...', + chunks: [CONTENT_SCRIPT_LIMIT], + meta: { + viewport: { + name: "viewport", + content: 'width=device-width', + }, + } + }), new HtmlRspackPlugin({ filename: path.join('static', 'popup.html'), chunks: ['popup'], @@ -174,6 +265,7 @@ const generateOption = ({ outputPath, manifest, mode }: Option) => { const config: Configuration = { ...staticOptions, output: { + ...staticOptions.output, path: outputPath, filename: '[name].js', }, diff --git a/rspack/rspack.dev.firefox.ts b/rspack/rspack.dev.firefox.ts index 75f713ded..adb49d4e2 100644 --- a/rspack/rspack.dev.firefox.ts +++ b/rspack/rspack.dev.firefox.ts @@ -3,10 +3,14 @@ import manifest from "../src/manifest-firefox" import generateOption from "./rspack.common" manifest.name = "IS DEV" -// Fix the crx id for development mode -manifest.key = "clbbddpinhgdejpoepalbfnkogbobfdb" // The manifest.json is different from Chrome's with add-on ID -manifest.browser_specific_settings = { gecko: { id: 'timer@zhy' } } +manifest.browser_specific_settings = { + ...manifest.browser_specific_settings, + gecko: { + ...manifest.browser_specific_settings?.gecko, + id: 'tt4b@zhy', + } +} const options = generateOption({ outputPath: path.join(__dirname, '..', 'dist_dev_firefox'), diff --git a/rspack/rspack.dev.ts b/rspack/rspack.dev.ts index 18ce606d4..5cf59f91e 100644 --- a/rspack/rspack.dev.ts +++ b/rspack/rspack.dev.ts @@ -1,3 +1,4 @@ +import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin" import path from "path" import manifest from "../src/manifest" import generateOption from "./rspack.common" @@ -10,4 +11,27 @@ const options = generateOption({ mode: "development", }) +const tsCheckerPlugin = new ForkTsCheckerWebpackPlugin({ + typescript: { + configOverwrite: { + compilerOptions: { + skipLibCheck: false, + }, + }, + diagnosticOptions: { + syntactic: true, + semantic: true, + declaration: true, + global: true, + }, + }, + issue: { + exclude: [ + { file: '**/node_modules/**' }, + ], + }, +}) + +options.plugins?.push(tsCheckerPlugin) + export default options diff --git a/rspack/rspack.e2e.ts b/rspack/rspack.e2e.ts index 633fbfa1d..632cf4795 100644 --- a/rspack/rspack.e2e.ts +++ b/rspack/rspack.e2e.ts @@ -4,6 +4,10 @@ import { E2E_OUTPUT_PATH } from "./constant" import generateOption from "./rspack.common" manifest.name = E2E_NAME +// Grant all permissions as required for e2e testing +const permissions = manifest.permissions ??= [] +permissions.push(...(manifest.optional_permissions ?? [])) +manifest.optional_permissions = [] const options = generateOption({ outputPath: E2E_OUTPUT_PATH, diff --git a/rspack/rspack.prod.firefox.ts b/rspack/rspack.prod.firefox.ts index 36bd6144c..b76b4c28f 100644 --- a/rspack/rspack.prod.firefox.ts +++ b/rspack/rspack.prod.firefox.ts @@ -2,6 +2,7 @@ import path from "path" import manifestFirefox from "../src/manifest-firefox" import { FileManagerPlugin } from "./plugins/file-manager" import optionGenerator from "./rspack.common" +import { enhancePluginWith } from './util' const { name, version } = require(path.join(__dirname, '..', 'package.json')) @@ -10,19 +11,10 @@ const marketPkgPath = path.resolve(__dirname, '..', 'market_packages') const normalZipFilePath = path.resolve(marketPkgPath, `${name}-${version}.firefox.zip`) const targetZipFilePath = path.resolve(marketPkgPath, 'target.firefox.zip') -const normalSourceCodePath = path.resolve(__dirname, '..', 'market_packages', `${name}-${version}-src.zip`) -const targetSourceCodePath = path.resolve(__dirname, '..', 'market_packages', 'target.src.zip') -const readmeForFirefox = path.join(__dirname, '..', 'doc', 'for-fire-fox.md') -// Temporary directory for source code to archive on Firefox -const sourceTempDir = path.resolve(__dirname, '..', 'source_temp') -const srcDir = ['public', 'src', "test", "types", 'package.json', 'tsconfig.json', 'rspack', "jest.config.ts", "script", ".gitignore"] -const copyMapper = srcDir.map(p => { return { source: path.resolve(__dirname, '..', p), destination: path.resolve(sourceTempDir, p) } }) -const filemanagerPlugin = new FileManagerPlugin({ +const fileManagerPlugin = new FileManagerPlugin({ events: { - // Archive at the end onEnd: [ - // Define plugin to archive zip for different markets { delete: [normalZipFilePath], archive: [{ @@ -33,26 +25,12 @@ const filemanagerPlugin = new FileManagerPlugin({ destination: targetZipFilePath, }] }, - // Archive source code for FireFox - { - copy: [ - { source: readmeForFirefox, destination: path.join(sourceTempDir, 'README.md') }, - ...copyMapper - ], - archive: [ - { source: sourceTempDir, destination: normalSourceCodePath }, - { source: sourceTempDir, destination: targetSourceCodePath }, - ], - delete: [sourceTempDir], - }, ] } }) const option = optionGenerator({ outputPath, manifest: manifestFirefox, mode: "production" }) -const { plugins = [] } = option -plugins.push(filemanagerPlugin) -option.plugins = plugins +enhancePluginWith(option, fileManagerPlugin) option.devtool = false -export default option \ No newline at end of file +export default option diff --git a/rspack/rspack.prod.safari.ts b/rspack/rspack.prod.safari.ts index 5a9dd8a36..e4f53201e 100644 --- a/rspack/rspack.prod.safari.ts +++ b/rspack/rspack.prod.safari.ts @@ -10,7 +10,7 @@ const normalZipFilePath = path.resolve(__dirname, '..', 'market_packages', `${na const options = generateOption({ outputPath, manifest, mode: "production" }) -const filemanagerPlugin = new FileManagerPlugin({ +const fileManagerPlugin = new FileManagerPlugin({ events: { // Archive at the end onEnd: [ @@ -25,7 +25,7 @@ const filemanagerPlugin = new FileManagerPlugin({ }) const { plugins = [] } = options -plugins.push(filemanagerPlugin) +plugins.push(fileManagerPlugin) options.plugins = plugins export default options \ No newline at end of file diff --git a/rspack/rspack.prod.ts b/rspack/rspack.prod.ts index 47df7f112..6ef6db0c1 100644 --- a/rspack/rspack.prod.ts +++ b/rspack/rspack.prod.ts @@ -12,7 +12,7 @@ const marketPkgPath = path.resolve(__dirname, '..', 'market_packages') const normalZipFilePath = path.resolve(marketPkgPath, `${name}-${version}.mv3.zip`) const targetZipFilePath = path.resolve(marketPkgPath, `target.zip`) -const filemanagerPlugin = new FileManagerPlugin({ +const fileManagerPlugin = new FileManagerPlugin({ events: { // Archive at the end onEnd: [ @@ -34,7 +34,7 @@ const filemanagerPlugin = new FileManagerPlugin({ const option = optionGenerator({ outputPath, manifest, mode: "production" }) -enhancePluginWith(option, filemanagerPlugin) +enhancePluginWith(option, fileManagerPlugin) option.devtool = false export default option \ No newline at end of file diff --git a/rspack/util.ts b/rspack/util.ts index 65114cee9..f05e1b3fa 100644 --- a/rspack/util.ts +++ b/rspack/util.ts @@ -1,6 +1,6 @@ -import { type RspackOptions, type RspackPluginInstance } from '@rspack/core' +import type { Plugin, RspackOptions } from '@rspack/core' -export function enhancePluginWith(option: RspackOptions, ...toPush: RspackPluginInstance[]) { +export function enhancePluginWith(option: RspackOptions, ...toPush: Plugin[]) { const { plugins = [] } = option plugins.push(...toPush) option.plugins = plugins diff --git a/script/android-firefox.sh b/script/android-firefox.sh new file mode 100755 index 000000000..d5446ed69 --- /dev/null +++ b/script/android-firefox.sh @@ -0,0 +1,246 @@ +#!/bin/bash + +# Exit immediately on error +set -e + +exec 3>&1 +exec 4>&2 + +# Global variable to store background process PID +NPM_PID="" + +# Cleanup: kill npm watching process +cleanup() { + if [ -n "$NPM_PID" ] && kill -0 "$NPM_PID" 2>/dev/null; then + log_info "Stopping background build process (PID: $NPM_PID)..." + kill "$NPM_PID" 2>/dev/null + wait "$NPM_PID" 2>/dev/null + fi +} + +# Set trap to cleanup on exit +trap cleanup EXIT + +# Source logging functions +SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)" +LOG_FD=4 +source "${SCRIPT_DIR}/lib/log.sh" + +# Check if command exists +check_command() { + if ! command -v "$1" &> /dev/null; then + log_error "Command $1 not found, please install it first" + return 1 + fi + return 0 +} + +# Check web-ext version +check_web_ext_version() { + log_info "Checking web-ext version..." + if check_command web-ext; then + local version + version=$(web-ext --version 2>/dev/null || echo "0.0.0") + log_info "Current web-ext version: $version" + + local major_version + major_version=$(echo "$version" | cut -d. -f1) + if [ "$major_version" -lt 4 ]; then + log_warning "web-ext version might be too old, recommend upgrading to 4.1.0 or later" + log_info "Run: npm install -g web-ext@latest" + fi + else + log_error "web-ext is not installed" + log_info "Please run: npm install -g web-ext@latest" + exit 1 + fi +} + +# Check adb installation +check_adb_installation() { + log_info "Checking adb installation..." + if check_command adb; then + log_success "adb is installed" + else + log_error "adb not found, please install Android Platform Tools" + log_info "You can install via Android Studio SDK Manager or run:" + log_info "sdkmanager 'platform-tools'" + exit 1 + fi +} + +# Select device from connected Android devices +select_device() { + log_info "Scanning for connected Android devices..." + + adb start-server > /dev/null 2>&1 + + local device_array=() + local devices_output + devices_output=$(adb devices 2>/dev/null) + + while IFS= read -r device; do + if [[ -n "$device" && "$device" != "List of devices attached" ]]; then + device_array+=("$device") + fi + done < <(adb devices 2>/dev/null | awk 'NR>1 && /device$/ {print $1}') + + local device_count=${#device_array[@]} + + if [ "$device_count" -eq 0 ]; then + log_error "No Android device or emulator found" + log_info "Please ensure:" + log_info " 1. Device is connected via USB" + log_info " 2. USB debugging is enabled" + log_info " 3. Firefox for Android Nightly is installed" + log_info " 4. 'Remote debugging via USB' is enabled in Firefox" + exit 1 + fi + + if [ "$device_count" -eq 1 ]; then + local device_id="${device_array[0]}" + log_success "Selected device: $device_id" + echo "$device_id" + return 0 + fi + + log_info "Multiple devices found:" + echo >&3 + + for i in "${!device_array[@]}"; do + echo " $((i+1)). ${device_array[$i]}" >&3 + done + + echo >&3 + read -p "Select device (1-${#device_array[@]}): " device_choice <&3 + + if [[ "$device_choice" =~ ^[0-9]+$ ]] && [ "$device_choice" -ge 1 ] && [ "$device_choice" -le "${#device_array[@]}" ]; then + local selected_device="${device_array[$((device_choice-1))]}" + log_success "Selected device: $selected_device" + echo "$selected_device" + else + log_error "Invalid selection" + exit 1 + fi +} + +# Check Firefox Nightly installation on specific device +check_firefox_nightly() { + local device_id="$1" + + log_info "Checking Firefox Nightly installation on device $device_id..." + + local firefox_package="org.mozilla.fenix" + + if adb -s "$device_id" shell pm list packages | grep -q "$firefox_package"; then + log_success "Firefox Nightly is installed on device $device_id" + else + log_warning "Firefox Nightly not detected on device $device_id" + log_info "Package name should be: $firefox_package" + fi +} + +# Build and run extension on specific device +build_and_run_extension() { + local device_id="$1" + local extension_dir="dist_dev_firefox" + # Clear existing extension directory + if [ -d "$extension_dir" ]; then + log_info "Clearing existing extension directory..." + rm -rf "$extension_dir" + fi + # Start npm run dev:firefox in background + log_info "Starting npm run dev:firefox in background..." + npm run dev:firefox > /dev/null 2>&1 & + NPM_PID=$! + # Wait for manifest.json to be created + local max_wait=60 + local wait_count=0 + log_info "Waiting for building finished..." + while [ ! -f "$extension_dir/manifest.json" ] && [ $wait_count -lt $max_wait ]; do + sleep 1 + wait_count=$((wait_count + 1)) + if [ $((wait_count % 5)) -eq 0 ]; then + log_info "Still waiting for building finished... ($wait_count/$max_wait)" + fi + done + + if [ ! -f "$extension_dir/manifest.json" ]; then + log_error "Building not finished yet after ${max_wait}s" + cleanup + exit 1 + fi + + log_success "Extension built successfully, manifest.json found" + log_info "Background build process PID: $NPM_PID" + + log_info "Starting extension development server..." + log_info "Command: web-ext run -t firefox-android --firefox-apk org.mozilla.fenix -s $extension_dir --adb-device $device_id --verbose" + + if web-ext run \ + -t firefox-android \ + --firefox-apk org.mozilla.fenix \ + -s "$extension_dir" \ + --adb-device "$device_id" \ + --verbose; then + log_success "Extension development server started successfully" + else + log_error "Failed to start extension development server" + exit 1 + fi +} + +main() { + echo -e "${BLUE}=== Android Extension Development One-Click Setup Script ===${NC}" >&3 + echo >&3 + + # Check prerequisites + check_web_ext_version + check_adb_installation + + local selected_device + selected_device=$(select_device) + check_firefox_nightly "$selected_device" + + log_success "All prerequisite checks passed!" + log_success "Target device: $selected_device" + + log_info "Do you want to build and run the extension now? (y/n): " + read -n 1 -r <&3 + echo >&3 + if [[ $REPLY =~ ^[Yy]$ ]]; then + build_and_run_extension "$selected_device" + else + log_warning "Gave up to launch the extension" + log_info "You can run the extension manually later:" + log_info "web-ext run -t firefox-android --firefox-apk org.mozilla.fenix -s dist_dev_firefox --adb-device $selected_device" + fi +} + +# Show usage instructions +show_usage() { + echo "Usage: $0" >&3 + echo >&3 + echo "Description:" >&3 + echo " One-click script to build and run Android extension development" >&3 + echo " Extension directory: dist_dev_firefox" >&3 + echo >&3 + echo "Prerequisites:" >&3 + echo " - web-ext 4.1.0 or later" >&3 + echo " - Android Platform Tools (adb)" >&3 + echo " - Connected Android device with Firefox Nightly" >&3 + echo >&3 + echo "The script will:" >&3 + echo " 1. Detect all connected Android devices" >&3 + echo " 2. Let you select target device (if multiple)" >&3 + echo " 3. Build extension if needed (npm run dev:firefox)" >&3 + echo " 4. Run extension on selected device" >&3 +} + +# Handle help parameter +if [ "$1" = "-h" ] || [ "$1" = "--help" ]; then + show_usage + exit 0 +fi + +main \ No newline at end of file diff --git a/script/crowdin/client.ts b/script/crowdin/client.ts index 2b9361f56..80fc7474f 100644 --- a/script/crowdin/client.ts +++ b/script/crowdin/client.ts @@ -19,14 +19,12 @@ const MAIN_BRANCH_NAME = 'main' */ class PaginationIterator { private offset = 0 - private limit = 25 + private limit = 500 private isEnd = false private buf: T[] = [] private cursor = 0 - private query: (pagination: Pagination) => Promise> - constructor(query: (pagination: Pagination) => Promise>) { - this.query = query + constructor(private query: (pagination: Pagination) => Promise>) { } reset(): void { @@ -79,8 +77,8 @@ class PaginationIterator { private async processBuf() { const pagination: Pagination = { offset: this.offset, limit: this.limit } const list = await this.query(pagination) - const data = list?.data - if (!data?.length) { + const data = list.data + if (!data.length) { this.isEnd = true } else { this.buf = data.map(obj => obj.data) @@ -98,7 +96,7 @@ export type NameKey = { branchId: number } -export type TranslationKey = { +type TranslationKey = { stringId: number lang: CrowdinLanguage } @@ -169,17 +167,6 @@ export class CrowdinClient { return response.data } - async restoreFile(storage: UploadStorageModel.Storage, existFile: SourceFilesModel.File): Promise { - const response = await this.crowdin.sourceFilesApi.updateOrRestoreFile(PROJECT_ID, existFile.id, { storageId: storage.id }) - return response.data - } - - getFileByName(param: NameKey): Promise { - return new PaginationIterator( - p => this.crowdin.sourceFilesApi.listProjectFiles(PROJECT_ID, { ...p, branchId: param.branchId }) - ).findFirst(t => t.name === param.name) - } - getDirByName(param: NameKey): Promise { return new PaginationIterator( p => this.crowdin.sourceFilesApi.listProjectDirectories(PROJECT_ID, { ...p, branchId: param.branchId }) @@ -200,6 +187,12 @@ export class CrowdinClient { ).findAll() } + async downloadSourceFile(fileId: number): Promise> { + const res = await this.crowdin.sourceFilesApi.downloadFile(PROJECT_ID, fileId) + const response = await fetch(res.data.url) + return await response.json() as Record + } + listStringsByFile(fileId: number): Promise { return new PaginationIterator( p => this.crowdin.sourceStringsApi.listProjectStrings(PROJECT_ID, { ...p, fileId: fileId }) @@ -229,15 +222,14 @@ export class CrowdinClient { console.log("Content length: " + Object.keys(content).length) for (const [path, value] of Object.entries(content)) { const string = existStringsKeyMap[path] + if (!string) continue const patch: PatchRequest[] = [] - string?.text !== value && patch.push({ + string.text !== value && patch.push({ op: 'replace', path: '/text', value: value }) - if (!patch.length) { - continue - } + if (!patch.length) continue console.log('Try to edit string: ' + string.identifier) await this.crowdin.sourceStringsApi.editString(PROJECT_ID, string.id, patch) } @@ -280,13 +272,25 @@ export class CrowdinClient { targetLanguageIds: [...ALL_CROWDIN_LANGUAGES], skipUntranslatedStrings: true, }) - const buildId = buildRes?.data?.id + const buildId = buildRes.data.id + const maxRetries = 120 + let retryCount = 0 while (true) { - // Wait finished - const res = await this.crowdin.translationsApi.downloadTranslations(PROJECT_ID, buildId) - const url = res?.data?.url - if (url) return url + if (retryCount >= maxRetries) { + throw new Error(`Build timed out after ${maxRetries} retries: buildId=${buildId}`) + } + const statusRes = await this.crowdin.translationsApi.checkBuildStatus(PROJECT_ID, buildId) + const { status, progress } = statusRes.data + console.log(`Build status: ${status}, progress: ${progress}%`) + if (status === 'finished') break + if (status === 'canceled' || status === 'failed') { + throw new Error(`Build ${status}: buildId=${buildId}`) + } + retryCount++ + await new Promise(resolve => setTimeout(resolve, 1000)) } + const res = await this.crowdin.translationsApi.downloadTranslations(PROJECT_ID, buildId) + return res.data.url } } @@ -296,7 +300,7 @@ export class CrowdinClient { * @returns client */ export function getClientFromEnv(): CrowdinClient { - const envVar = process.env?.TIMER_CROWDIN_AUTH + const envVar = process.env.TIMER_CROWDIN_AUTH if (!envVar) { console.error("Failed to get the variable named [TIMER_CROWDIN_AUTH]") process.exit(1) diff --git a/script/crowdin/common.ts b/script/crowdin/common.ts index d02a4399a..090f1baa4 100644 --- a/script/crowdin/common.ts +++ b/script/crowdin/common.ts @@ -18,7 +18,12 @@ export type ItemSet = { [path: string]: string } -export const ALL_CROWDIN_LANGUAGES = ['zh-TW', 'ja', 'pt-PT', 'uk', 'es-ES', 'de', 'fr', 'ru', 'ar'] as const +export const ALL_CROWDIN_LANGUAGES = [ + 'zh-CN', 'zh-TW', 'ja', + 'pt-PT', 'uk', 'es-ES', 'de', 'fr', 'ru', 'pl', + 'ar', 'tr', + 'it', +] as const /** * The language code of crowdin @@ -27,34 +32,28 @@ export const ALL_CROWDIN_LANGUAGES = ['zh-TW', 'ja', 'pt-PT', 'uk', 'es-ES', 'de */ export type CrowdinLanguage = typeof ALL_CROWDIN_LANGUAGES[number] -export const SOURCE_LOCALE: timer.SourceLocale = 'en' - -// Not include en and zh_CN -export const ALL_TRANS_LOCALES: timer.OptionalLocale[] = [ - 'ja', - 'zh_TW', - 'pt_PT', - 'uk', - 'es', - 'de', - 'fr', - 'ru', - 'ar', -] - -const CROWDIN_I18N_MAP: Record = { - ja: 'ja', - 'zh-TW': 'zh_TW', - 'pt-PT': 'pt_PT', - uk: 'uk', - 'es-ES': 'es', - de: 'de', - fr: 'fr', - ru: 'ru', - ar: 'ar', +export const SOURCE_LOCALE: tt4b.RequiredLocale = 'en' + +const OPTIONAL_PLACEHOLDER: Record = { + ja: 0, + uk: 0, + de: 0, + fr: 0, + ru: 0, + pl: 0, + ar: 0, + tr: 0, + zh_CN: 0, + zh_TW: 0, + pt_PT: 0, + es: 0, + it: 0, } -const I18N_CROWDIN_MAP: Record = { +export const ALL_TRANS_LOCALES = Object.keys(OPTIONAL_PLACEHOLDER) as tt4b.OptionalLocale[] + +const I18N_CROWDIN_MAP: Record = { + zh_CN: 'zh-CN', ja: 'ja', zh_TW: 'zh-TW', pt_PT: 'pt-PT', @@ -64,11 +63,12 @@ const I18N_CROWDIN_MAP: Record = { fr: 'fr', ru: 'ru', ar: 'ar', + tr: 'tr', + pl: 'pl', + it: 'it', } -export const crowdinLangOf = (locale: timer.OptionalLocale): CrowdinLanguage => I18N_CROWDIN_MAP[locale] - -export const localeOf = (crowdinLang: CrowdinLanguage) => CROWDIN_I18N_MAP[crowdinLang] +export const crowdinLangOf = (locale: tt4b.OptionalLocale): CrowdinLanguage => I18N_CROWDIN_MAP[locale] const IGNORED_FILE: Partial<{ [dir in Dir]: string[] }> = { common: [ @@ -83,7 +83,7 @@ export function isIgnored(dir: Dir, fileName: string) { return !!IGNORED_FILE[dir]?.includes(fileName) } -export const MSG_BASE = path.join(__dirname, '..', '..', 'src', 'i18n', 'message') +const MSG_BASE = path.join(__dirname, '..', '..', 'src', 'i18n', 'message') export const RSC_FILE_SUFFIX = "-resource.json" /** @@ -92,7 +92,7 @@ export const RSC_FILE_SUFFIX = "-resource.json" * @param dir the directory of messages * @returns */ -export async function readAllMessages(dir: Dir): Promise>> { +export async function readAllMessages(dir: Dir): Promise>>> { const dirPath = path.join(MSG_BASE, dir) const files = fs.readdirSync(dirPath) @@ -101,7 +101,7 @@ export async function readAllMessages(dir: Dir): Promise + const message = (await import(`@i18n/message/${dir}/${file}`))?.default as Messages> const name = file.replace(RSC_FILE_SUFFIX, '') message && (result[name] = message) return @@ -110,22 +110,22 @@ export async function readAllMessages(dir: Dir): Promise> + messages: Partial> ): Promise { const dirPath = path.join(MSG_BASE, dir) const filePath = path.join(dirPath, filename) - const existMessages = (await import(`@i18n/message/${dir}/${filename}`))?.default as Messages + const existMessages = (await import(`@i18n/message/${dir}/${filename}`))?.default as Messages> if (!existMessages) { - console.error(`Failed to find local code: dir=${dir}, filename=${filename}`) + logError(`Failed to find local code: dir=${dir}, filename=${filename}`) return } const sourceItemSet = transMsg(existMessages[SOURCE_LOCALE]) @@ -141,32 +141,36 @@ export async function mergeMessage( // Deleted key if (!sourceText) return if (!checkPlaceholder(text, sourceText)) { - console.error(`Invalid placeholder: dir=${dir}, filename=${filename}, path=${path}, source=${sourceText}, translated=${text}`) + logError(`Invalid placeholder: locale=${locale}, dir=${dir}, filename=${filename}, path=${path}, source=${sourceText}, translated=${text}`) return } const pathSeg = path.split('.') fillItem(pathSeg, 0, newMessage, text) }) - Object.entries(newMessage).length && (existMessages[locale as timer.Locale] = newMessage) + Object.entries(newMessage).length && (existMessages[locale as tt4b.Locale] = newMessage) }) const newFileContent = JSON.stringify(existMessages, null, 4) fs.writeFileSync(filePath, newFileContent, { encoding: 'utf-8' }) } +function logError(msg: string) { + console.error(`\x1b[31m[CROWDIN-ERROR]\x1b[0m ${msg}`) +} + function checkPlaceholder(translated: string, source: string) { const allSourcePlaceholders = - Array.from(source.matchAll(/\{(.*?)\}/g)) + Array.from(source.matchAll(/\{(.*?)}/g)) .map(matched => matched[1]) .sort() const allTranslatedPlaceholders = - Array.from(translated.matchAll(/\{(.*?)\}/g)) + Array.from(translated.matchAll(/\{(.*?)}/g)) .map(matched => matched[1]) .sort() if (allSourcePlaceholders.length != allTranslatedPlaceholders.length) { return false } - for (let i = 0; i++; i < allSourcePlaceholders.length) { + for (let i = 0; i < allSourcePlaceholders.length; i++) { if (allSourcePlaceholders[i] !== allTranslatedPlaceholders[i]) { return false } @@ -176,6 +180,7 @@ function checkPlaceholder(translated: string, source: string) { function fillItem(fields: string[], index: number, obj: Record, text: string) { const field = fields[index] + if (!field) return if (index === fields.length - 1) { obj[field] = text return @@ -213,8 +218,7 @@ export function transMsg(message: any, prefix?: string): ItemSet { export async function checkMainBranch(client: CrowdinClient): Promise { const branch = await client.getMainBranch() - if (!branch) { - exitWith("Main branch is null") - } - return branch! + return branch ?? exitWith("Main branch is null") } + + diff --git a/script/crowdin/download.ts b/script/crowdin/download.ts new file mode 100644 index 000000000..4059af6ca --- /dev/null +++ b/script/crowdin/download.ts @@ -0,0 +1,49 @@ +import decompress from "decompress" +import { existsSync, readFileSync } from "fs" +import { rm, writeFile } from "fs/promises" +import { join } from "path" +import { type Dir, type ItemSet, transMsg } from "./common" + +const TEMP_FILE_NAME = join(process.cwd(), ".crowdin-temp.zip") +const TEMP_DIR = join(process.cwd(), ".crowdin-temp") + +export async function downloadProjectZip(url: string): Promise { + const res = await fetch(url) + const blob = await res.blob() + const buffer = Buffer.from(await blob.arrayBuffer()) + await writeFile(TEMP_FILE_NAME, buffer) + console.log("Downloaded project zip file") + if (existsSync(TEMP_DIR)) { + await rm(TEMP_DIR, { recursive: true, force: true }) + } + await decompress(TEMP_FILE_NAME, TEMP_DIR) + console.log("Decompressed zip file") + return TEMP_DIR +} + +export async function clearTempFile() { + await rm(TEMP_FILE_NAME, { force: true }) + await rm(TEMP_DIR, { recursive: true, force: true }) +} + +/** + * Read a single file from the unzipped Crowdin project translation. + * + * @param tmpDir temp directory containing unzipped translations + * @param langDir language subdirectory (e.g. 'zh-CN' or 'en') + * @param dir message directory + * @param crowdinFileName file name with .json extension + */ +export function readCrowdinZipFile(tmpDir: string, langDir: string, dir: Dir, crowdinFileName: string): ItemSet { + const filePath = join(tmpDir, langDir, dir, crowdinFileName) + if (!existsSync(filePath)) { + return {} + } + try { + const json = readFileSync(filePath).toString() + return transMsg(JSON.parse(json)) + } catch (error) { + console.warn(`Failed to parse crowdin zip file: ${filePath}`, error) + return {} + } +} diff --git a/script/crowdin/export-translation.ts b/script/crowdin/export-translation.ts index eca038ee3..bd12e5e59 100644 --- a/script/crowdin/export-translation.ts +++ b/script/crowdin/export-translation.ts @@ -1,26 +1,17 @@ -import decompress from "decompress" -import { existsSync, readdirSync, readFileSync, rm, writeFile } from "fs" +import { readdirSync, readFileSync } from "fs" import { join } from "path" import { getClientFromEnv } from "./client" import { - ALL_DIRS, ALL_TRANS_LOCALES, - checkMainBranch, - crowdinLangOf, - type Dir, - type ItemSet, - mergeMessage, - RSC_FILE_SUFFIX, + ALL_DIRS, ALL_TRANS_LOCALES, checkMainBranch, crowdinLangOf, type Dir, type ItemSet, mergeMessage, RSC_FILE_SUFFIX, transMsg } from "./common" +import { clearTempFile, downloadProjectZip } from "./download" -const TEMP_FILE_NAME = join(process.cwd(), ".crowdin-temp.zip") -const TEMP_DIR = join(process.cwd(), ".crowdin-temp") - -async function processDir(dir: Dir): Promise { - const fileSets: Record>> = {} +async function processDir(tmpDir: string, dir: Dir): Promise { + const fileSets: Record>> = {} for (const locale of ALL_TRANS_LOCALES) { const crowdinLang = crowdinLangOf(locale) - const dirPath = join(TEMP_DIR, crowdinLang, dir) + const dirPath = join(tmpDir, crowdinLang, dir) const files = readdirSync(dirPath) for (const fileName of files) { const json = readFileSync(join(dirPath, fileName)).toString() @@ -34,44 +25,18 @@ async function processDir(dir: Dir): Promise { } } -async function downloadProjectZip(url: string): Promise { - const res = await fetch(url) - const blob = await res.blob() - const buffer = Buffer.from(await blob.arrayBuffer()) - await new Promise(resolve => writeFile(TEMP_FILE_NAME, buffer, resolve)) -} - -async function compressProjectZip(): Promise { - if (existsSync(TEMP_DIR)) { - await new Promise(resolve => rm(TEMP_DIR, { recursive: true }, resolve)) - } - await decompress(TEMP_FILE_NAME, TEMP_DIR) -} - -async function clearTempFile() { - await new Promise(resolve => rm(TEMP_FILE_NAME, resolve)) - await new Promise(resolve => rm(TEMP_DIR, { recursive: true }, resolve)) -} - async function main() { const client = getClientFromEnv() const branch = await checkMainBranch(client) const zipUrl = await client.buildProjectTranslation(branch.id) console.log("Built project translations") console.log(zipUrl) - await downloadProjectZip(zipUrl) - console.log("Downloaded project zip file") - try { - await compressProjectZip() - console.log("Compressed zip file") - for (const dir of ALL_DIRS) { - await processDir(dir) - console.log("Processed dir: " + dir) - } - } finally { - clearTempFile() - console.log("Cleaned temp files") + const tmpDir = await downloadProjectZip(zipUrl) + + for (const dir of ALL_DIRS) { + await processDir(tmpDir, dir) + console.log("Processed dir: " + dir) } } -main() \ No newline at end of file +main().finally(clearTempFile) \ No newline at end of file diff --git a/script/crowdin/sync-source.ts b/script/crowdin/sync-source.ts index a5f3f62ce..8fd494c30 100644 --- a/script/crowdin/sync-source.ts +++ b/script/crowdin/sync-source.ts @@ -1,15 +1,20 @@ -import { type SourceFilesModel, type SourceStringsModel } from "@crowdin/crowdin-api-client" +import type { SourceFilesModel, SourceStringsModel } from "@crowdin/crowdin-api-client" import { toMap } from "@util/array" import { type CrowdinClient, getClientFromEnv, type NameKey } from "./client" -import { - ALL_DIRS, - Dir, - isIgnored, - ItemSet, - readAllMessages, - SOURCE_LOCALE, - transMsg -} from "./common" +import { ALL_DIRS, type Dir, isIgnored, type ItemSet, readAllMessages, SOURCE_LOCALE, transMsg } from "./common" + +/** + * Check if local source content is the same as Crowdin source content + */ +function isSourceUnchanged(localContent: ItemSet, crowdinContent: ItemSet): boolean { + const localKeys = Object.keys(localContent).filter(k => !!localContent[k]) + const crowdinKeys = Object.keys(crowdinContent) + if (localKeys.length !== crowdinKeys.length) return false + for (const key of localKeys) { + if (localContent[key] !== crowdinContent[key]) return false + } + return true +} async function initBranch(client: CrowdinClient): Promise { const branch = await client.getOrCreateMainBranch() @@ -85,6 +90,14 @@ async function processByDir(client: CrowdinClient, dir: Dir, branch: SourceFiles const storage = await client.createStorage(crowdinFilename, fileContent) existFile = await client.createFile(directory.id, storage, crowdinFilename) console.log(`Created new file: dir=${dir}, fileName=${crowdinFilename}, id=${existFile.id}`) + } else { + // Download source file from Crowdin and compare + const crowdinJson = await client.downloadSourceFile(existFile.id) + const crowdinContent = transMsg(crowdinJson) + if (isSourceUnchanged(fileContent, crowdinContent)) { + console.log(`No source diff for ${dir}/${crowdinFilename}, skipped`) + continue + } } // Process by strings await processStrings(client, existFile, fileContent) diff --git a/script/crowdin/sync-translation.ts b/script/crowdin/sync-translation.ts index 184cd3026..1510bc9b3 100644 --- a/script/crowdin/sync-translation.ts +++ b/script/crowdin/sync-translation.ts @@ -1,62 +1,118 @@ - -import { type SourceFilesModel } from "@crowdin/crowdin-api-client" +import type { SourceFilesModel, SourceStringsModel } from "@crowdin/crowdin-api-client" import { toMap } from "@util/array" import { exitWith } from "../util/process" import { type CrowdinClient, getClientFromEnv } from "./client" import { - ALL_DIRS, ALL_TRANS_LOCALES, - type CrowdinLanguage, type Dir, type ItemSet, - checkMainBranch, crowdinLangOf, isIgnored, readAllMessages, transMsg, + ALL_DIRS, ALL_TRANS_LOCALES, checkMainBranch, crowdinLangOf, type CrowdinLanguage, type Dir, isIgnored, + readAllMessages, transMsg, } from "./common" +import { clearTempFile, downloadProjectZip, readCrowdinZipFile } from "./download" const CROWDIN_USER_ID_OF_OWNER = 15266594 -async function processDirMessage(client: CrowdinClient, file: SourceFilesModel.File, message: ItemSet, lang: CrowdinLanguage): Promise { - console.log(`Start to process dir message: fileName=${file.name}, lang=${lang}`) - const strings = await client.listStringsByFile(file.id) - const stringMap = toMap(strings, s => s.identifier) - for (const [identifier, text] of Object.entries(message)) { - const string = stringMap[identifier] - if (!string) { - console.log(`Can't found string of identifier: ${identifier}, file: ${file.path}`) +/** + * Sync translation for a single string. + * Keeps the same behavior as the original processDirMessage: + * 1. Delete all owner's translations that differ from current text + * 2. Create new translation if no matching one exists + */ +async function syncStringTranslation( + client: CrowdinClient, + stringId: number, + text: string, + lang: CrowdinLanguage, +): Promise { + const existList = await client.listTranslationByStringAndLang({ stringId, lang }) + // Delete old translations by owner that differ from current + const oldByOwner = existList.filter(t => t.user.id === CROWDIN_USER_ID_OF_OWNER && t.text !== text) + for (const toDelete of oldByOwner) { + await client.deleteTranslation(toDelete.id) + console.log(`Deleted translation by owner: stringId=${stringId}, lang=${lang}, text=${toDelete.text}`) + } + if (!existList.some(t => t.text === text)) { + await client.createTranslation({ stringId, lang }, text) + console.log(`Created trans: stringId=${stringId}, lang=${lang}, text=${text}`) + } +} +/** + * Process translations for a single file across all locales + */ +async function processFile(client: CrowdinClient, options: { + dir: Dir + fileName: string + message: Messages> + crowdinFile: SourceFilesModel.File + tmpDir: string +}): Promise { + const { dir, fileName, message, crowdinFile, tmpDir } = options + const crowdinFileName = fileName + '.json' + let stringMap: Record = {} + let stringMapLoaded = false + + for (const locale of ALL_TRANS_LOCALES) { + const translated = message[locale] + if (!translated || !Object.keys(translated).length) { continue } - if (text === string.text) { - // The same as original text - console.log(`Translation same as origin text of ${string.identifier} in ${file.path}`) + + const crowdinLang = crowdinLangOf(locale) + const strings = transMsg(translated) + const crowdinStrings = readCrowdinZipFile(tmpDir, crowdinLang, dir, crowdinFileName) + + // Compare locally first — find strings that actually differ + const diffKeys = Object.entries(strings).filter(([identifier, text]) => { + if (!text) return false + return crowdinStrings[identifier] !== text + }) + + if (!diffKeys.length) { + console.log(`No diff for ${dir}/${fileName} [${crowdinLang}], skipped`) continue } - const existList = await client.listTranslationByStringAndLang({ stringId: string.id, lang }) - // Deleted old translations different from current - const oldByOwner = existList?.filter(t => t?.user?.id === CROWDIN_USER_ID_OF_OWNER && t.text !== text) - for (const toDelete of oldByOwner || []) { - await client.deleteTranslation(toDelete.id) - console.log(`Deleted translation by owner: stringId=${string.id}, lang=${lang}, text=${toDelete.text}`) + + console.log(`Found ${diffKeys.length} diff(s) for ${dir}/${fileName} [${crowdinLang}]`) + + if (!stringMapLoaded) { + const existStrings = await client.listStringsByFile(crowdinFile.id) + stringMap = toMap(existStrings, s => s.identifier) + stringMapLoaded = true } - if (!existList?.find(t => t.text === text)) { - // Create new translation - await client.createTranslation({ stringId: string.id, lang }, text) - console.log(`Created trans: stringId=${string.id}, lang=${lang}, text=${text}`) + + for (const [identifier, text] of diffKeys) { + const string = stringMap[identifier] + if (!string) { + console.log(`Can't find string of identifier: ${identifier}, file: ${crowdinFile.path}`) + continue + } + if (text === string.text) { + console.log(`Translation same as origin text of ${string.identifier} in ${crowdinFile.path}`) + continue + } + await syncStringTranslation(client, string.id, text, crowdinLang) } } } -async function processDir(client: CrowdinClient, dir: Dir, branch: SourceFilesModel.Branch): Promise { +/** + * Compare local translations with Crowdin zip, only sync differences + */ +async function processDir( + client: CrowdinClient, + dir: Dir, + branch: SourceFilesModel.Branch, + tmpDir: string, +): Promise { const messages = await readAllMessages(dir) - const directory = await client.getDirByName({ - name: dir, - branchId: branch.id, - }) + const directory = await client.getDirByName({ name: dir, branchId: branch.id }) if (!directory) { exitWith("Directory not found: " + dir) } - const files = await client.listFilesByDirectory(directory!.id) + const files = await client.listFilesByDirectory(directory.id) console.log(`find ${files.length} files of ${dir}`) const fileMap = toMap(files, f => f.name) for (const [fileName, message] of Object.entries(messages)) { - console.log(`Start to sync translations of ${dir}/${fileName}`) if (isIgnored(dir, fileName)) { - console.log("Ignored file: " + fileName) + console.log(`Ignored file: ${dir}/${fileName}`) continue } const crowdinFileName = fileName + '.json' @@ -65,16 +121,7 @@ async function processDir(client: CrowdinClient, dir: Dir, branch: SourceFilesMo console.log(`Failed to find file: dir=${dir}, filename=${fileName}`) continue } - - for (const locale of ALL_TRANS_LOCALES) { - const translated = message[locale] - if (!translated || !Object.keys(translated).length) { - continue - } - const strings = transMsg(message[locale]) - const crowdinLang = crowdinLangOf(locale) - await processDirMessage(client, crowdinFile, strings, crowdinLang) - } + await processFile(client, { dir, fileName, message, crowdinFile, tmpDir }) } } @@ -82,9 +129,14 @@ async function main() { const client = getClientFromEnv() const branch = await checkMainBranch(client) + // Download all translations as zip for local comparison + const zipUrl = await client.buildProjectTranslation(branch.id) + const tmpDir = await downloadProjectZip(zipUrl) + console.log("Downloaded project zip to: " + tmpDir) + for (const dir of ALL_DIRS) { - await processDir(client, dir, branch) + await processDir(client, dir, branch, tmpDir) } } -main() \ No newline at end of file +main().finally(clearTempFile) \ No newline at end of file diff --git a/script/lib/log.sh b/script/lib/log.sh new file mode 100755 index 000000000..c5861f732 --- /dev/null +++ b/script/lib/log.sh @@ -0,0 +1,31 @@ +#!/bin/bash + +# Color definitions +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[1;33m' +BLUE='\033[0;34m' +CYAN='\033[0;36m' +# No Color +NC='\033[0m' + +log_info() { + echo -e "${BLUE}[ INFO]${NC} $1" >&${LOG_FD:-1} +} + +log_success() { + echo -e "${GREEN}[ SUCC]${NC} $1" >&${LOG_FD:-1} +} + +log_warning() { + echo -e "${YELLOW}[ WARN]${NC} $1" >&${LOG_FD:-1} +} + +log_error() { + echo -e "${RED}[ERROR]${NC} $1" >&${LOG_FD:-1} +} + +log_step() { + echo -e "${CYAN}[ STEP]${NC} $1" >&${LOG_FD:-1} +} + diff --git a/script/psl.ts b/script/psl.ts index aea4ced6d..9e9a96e32 100644 --- a/script/psl.ts +++ b/script/psl.ts @@ -2,13 +2,12 @@ * Build psl tree */ import { fetchGet } from '@api/http' -import { type PslTree } from '@util/psl' +import { type PslTree } from '@bg/psl' import { writeFileSync } from 'fs' import path from 'path' -import punycode from "punycode" const LIST_URL = "https://publicsuffix.org/list/effective_tld_names.dat" -const JSON_PATH = path.join(__dirname, "..", "src", "util", "psl", "rules.json") +const JSON_PATH = path.join(__dirname, "..", "src", "background", "psl", "rules.json") const downloadList = async (): Promise => { const response = await fetchGet(LIST_URL) @@ -18,7 +17,7 @@ const downloadList = async (): Promise => { const parse = (tree: PslTree, parts: string[], index: number) => { if (index < 0) return const part = parts[index] - const ascii = punycode.toASCII(part) + const ascii = new URL(`http://${part}`).hostname let node = tree[ascii] if (index === 0) { if (!node) tree[ascii] = 1 @@ -58,6 +57,4 @@ async function main() { writeFileSync(JSON_PATH, JSON.stringify(tree, null, 4), { encoding: "utf-8" }) } - - main() \ No newline at end of file diff --git a/script/setup-e2e.sh b/script/setup-e2e.sh new file mode 100755 index 000000000..519972bca --- /dev/null +++ b/script/setup-e2e.sh @@ -0,0 +1,419 @@ +#!/bin/bash + +# Exit immediately on error +set -e + +PROJECT_ROOT="$(cd "$(dirname "$0")/.." && pwd)" + +# Source logging functions +SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)" +source "${SCRIPT_DIR}/lib/log.sh" + +# Detect OS +detect_os() { + case "$(uname -s)" in + Linux*) + echo "linux" + ;; + Darwin*) + echo "macos" + ;; + MINGW*|MSYS*|CYGWIN*) + echo "windows" + ;; + *) + echo "unknown" + ;; + esac +} + +# Check if command exists +check_command() { + if ! command -v "$1" &> /dev/null; then + return 1 + fi + return 0 +} + +# Check Node.js version +check_node_version() { + if ! check_command node; then + log_error "Node.js is not installed" + log_info "Please install Node.js >= 22 from https://nodejs.org/" + exit 1 + fi + + local node_version + node_version=$(node -v | sed 's/v//') + local major_version + major_version=$(echo "$node_version" | cut -d. -f1) + + log_info "Current Node.js version: $node_version" + + if [ "$major_version" -lt 22 ]; then + log_error "Node.js version must be >= 22" + log_info "Current version: $node_version" + log_info "Please upgrade Node.js from https://nodejs.org/" + exit 1 + fi + + log_success "Node.js version check passed" +} + +# Check npm +check_npm() { + if ! check_command npm; then + log_error "npm is not installed" + log_info "npm should come with Node.js, please reinstall Node.js" + exit 1 + fi + + local npm_version + npm_version=$(npm -v) + log_info "Current npm version: $npm_version" + log_success "npm is available" +} + +# Install global npm package (only if not installed) +install_global_package() { + local package_name=$1 + if command -v "$package_name" &> /dev/null; then + log_info "$package_name is already installed" + return 0 + fi + + log_info "$package_name is not installed, installing..." + if npm install -g "${package_name}@latest" &> /dev/null; then + log_success "$package_name installed successfully" + else + log_error "Failed to install $package_name" + exit 1 + fi +} + +# Upgrade global npm package +upgrade_global_package() { + local package_name=$1 + if ! command -v "$package_name" &> /dev/null; then + log_warning "$package_name is not installed, skipping upgrade" + return 0 + fi + + log_info "$package_name is already installed, upgrading..." + if npm install -g "${package_name}@latest" &> /dev/null; then + log_success "$package_name upgraded successfully" + else + log_error "Failed to upgrade $package_name" + exit 1 + fi +} + +# Install e2e dependencies +install_e2e_dependencies() { + log_step "Installing e2e test dependencies..." + + if [ ! -d "$PROJECT_ROOT/node_modules/puppeteer" ]; then + log_error "puppeteer is not installed. Please run 'npm install' first." + exit 1 + fi + + local browser_path + browser_path=$(node -e "try { const p = require('puppeteer'); console.log(p.executablePath()); } catch(e) { process.exit(1); }" 2>/dev/null) + if [ -n "$browser_path" ] && [ -f "$browser_path" ]; then + log_info "Browser is already downloaded" + elif [ -f "$PROJECT_ROOT/node_modules/puppeteer/install.mjs" ]; then + log_info "Downloading browser for puppeteer..." + if node "$PROJECT_ROOT/node_modules/puppeteer/install.mjs" &> /dev/null; then + log_success "Browser downloaded successfully" + else + log_error "Failed to download browser for puppeteer. Retry manually: npx puppeteer browsers install" + exit 1 + fi + else + log_warning "puppeteer install script not found, browser may already be downloaded" + fi + + install_global_package "http-server" + install_global_package "pm2" + + log_success "E2E dependencies installed successfully" +} + +install_mock_server_dependencies() { + if [ -f "$PROJECT_ROOT/examples/package.json" ]; then + log_step "Installing dependencies for mock server..." + if npm install --prefix "$PROJECT_ROOT/examples" &> /dev/null; then + log_success "Mock server dependencies installed successfully" + else + log_error "Failed to install mock server dependencies" + exit 1 + fi + else + log_warning "examples/package.json not found, skipping mock server dependencies installation" + fi +} + +# Upgrade e2e dependencies +upgrade_e2e_dependencies() { + log_step "Upgrading e2e test dependencies..." + + upgrade_global_package "http-server" + upgrade_global_package "pm2" + + log_success "E2E dependencies upgraded successfully" +} + +# Build npm script output +build_npm_script() { + local script_name=$1 + local output_dir=$2 + local is_required=${3:-true} + + log_step "Building $script_name output..." + + cd "$PROJECT_ROOT" || exit 1 + + log_info "Running: npm run $script_name" + local build_output + local build_exit_code + set +e + build_output=$(npm run "$script_name" 2>&1) + build_exit_code=$? + set -e + + if [ $build_exit_code -eq 0 ]; then + if [ -d "$PROJECT_ROOT/$output_dir" ]; then + log_success "$script_name output built successfully in $output_dir/" + else + if [ "$is_required" = true ]; then + log_error "$script_name output directory $output_dir/ not found after build" + exit 1 + else + log_warning "$script_name output directory $output_dir/ not found after build" + fi + fi + else + log_error "Failed to build $script_name output" + echo "$build_output" >&2 + exit 1 + fi +} + +# Build e2e output +build_e2e_output() { + build_npm_script "dev:e2e" "dist_e2e" true +} + +is_port_open() { + local port=$1 + lsof -nP -iTCP:"$port" -sTCP:LISTEN > /dev/null 2>&1 +} + +wait_port_open() { + local port=$1 + local timeout_seconds=${2:-5} + local start_seconds=$SECONDS + while true; do + if is_port_open "$port"; then + return 0 + fi + if [ $((SECONDS - start_seconds)) -ge "$timeout_seconds" ]; then + return 1 + fi + done +} + +remove_pm2_app_if_exists() { + local app_name=$1 + if pm2 describe "$app_name" > /dev/null 2>&1; then + log_info "Removing existing pm2 app: $app_name" + pm2 delete "$app_name" > /dev/null 2>&1 || true + fi +} + +# Start test servers +start_test_servers() { + log_step "Starting test servers..." + + if ! command -v pm2 &> /dev/null || ! command -v http-server &> /dev/null; then + log_error "pm2 or http-server is not installed. Please run setup first." + exit 1 + fi + + cd "$PROJECT_ROOT" || exit 1 + + log_info "Checking and starting e2e-server-1..." + remove_pm2_app_if_exists "e2e-server-1" + if is_port_open 12345; then + log_warning "Port 12345 is already in use before starting e2e-server-1" + fi + pm2 start http-server --name "e2e-server-1" -- ./examples/host -p 12345 + if ! wait_port_open 12345 5; then + log_error "e2e-server-1 failed to start on port 12345" + log_info "Check logs with: pm2 logs e2e-server-1 --lines 50" + exit 1 + fi + + if [ ! -f "$PROJECT_ROOT/examples/package.json" ]; then + log_error "examples package is missing. Please check examples/package.json" + exit 1 + fi + if [ ! -d "$PROJECT_ROOT/examples/node_modules" ]; then + log_error "examples dependencies are not installed. Please run: cd examples && npm install" + exit 1 + fi + + log_info "Checking and starting e2e-server-2..." + remove_pm2_app_if_exists "e2e-server-2" + if is_port_open 12346; then + log_warning "Port 12346 is already in use before starting e2e-server-2" + fi + pm2 start http-server --name "e2e-server-2" -- ./examples/host -p 12346 + if ! wait_port_open 12346 5; then + log_error "e2e-server-2 failed to start on port 12346" + log_info "Check logs with: pm2 logs e2e-server-2 --lines 50" + exit 1 + fi + + log_info "Checking and starting gist-mock-server..." + remove_pm2_app_if_exists "gist-mock-server" + if is_port_open 12347; then + log_warning "Port 12347 is already in use before starting gist-mock-server" + fi + PORT=12347 pm2 start npm --name "gist-mock-server" --cwd "$PROJECT_ROOT/examples" -- run start:gist + if ! wait_port_open 12347 8; then + log_error "gist-mock-server failed to start on port 12347" + log_info "Check logs with: pm2 logs gist-mock-server --lines 50" + exit 1 + fi + + log_success "Test servers started" + log_info "Server 1: http://127.0.0.1:12345" + log_info "Server 2: http://127.0.0.1:12346" + log_info "Gist mock: http://127.0.0.1:12347" + log_info "To stop servers, run: pm2 delete e2e-server-1 e2e-server-2 gist-mock-server" + log_info "To view server logs, run: pm2 logs" +} + +# Show usage +show_usage() { + echo "Usage: $0 [OPTIONS]" + echo "" + echo "E2E Test Environment Setup Script" + echo "" + echo "This script initializes the e2e testing environment and can build e2e outputs." + echo "It installs/upgrades required dependencies and compiles the code for e2e testing." + echo "" + echo "Options:" + echo " --init, -i Initialize e2e environment (install dependencies if not installed)" + echo " --upgrade, -u Upgrade e2e dependencies (http-server, pm2)" + echo " --build, -b Build e2e output (runs 'npm run dev:e2e')" + echo " --start-servers, -s Start test servers (12345/12346) and gist mock server (12347)" + echo " --all, -a Run all steps (init + build + build-prod)" + echo " --help, -h Show this help message" + echo "" + echo "Examples:" + echo " $0 --init # Install e2e dependencies (if not installed)" + echo " $0 --upgrade # Upgrade e2e dependencies" + echo " $0 --build # Build e2e output only" + echo " $0 --init --build # Initialize and build" + echo " $0 --all # Initialize, build e2e and production outputs" + echo " $0 --build --start-servers # Build and start test servers" +} + +# Main function +main() { + local do_init=false + local do_upgrade=false + local do_build=false + local do_start_servers=false + + # Parse arguments + while [[ $# -gt 0 ]]; do + case $1 in + --init|-i) + do_init=true + shift + ;; + --upgrade|-u) + do_upgrade=true + shift + ;; + --build|-b) + do_build=true + shift + ;; + --start-servers|-s) + do_start_servers=true + shift + ;; + --all|-a) + do_init=true + do_build=true + do_start_servers=true + shift + ;; + --help|-h) + show_usage + exit 0 + ;; + *) + log_error "Unknown option: $1" + show_usage + exit 1 + ;; + esac + done + + if [ "$do_init" = false ] && [ "$do_upgrade" = false ] && [ "$do_build" = false ] && [ "$do_start_servers" = false ]; then + show_usage + exit 0 + fi + + if [ ! -f "package.json" ]; then + log_error "Please run this script from the project root." + exit 1 + fi + + echo -e "${CYAN}=== E2E Test Environment Setup ===${NC}" + echo "" + + # Detect OS and show info + local os_type + os_type=$(detect_os) + log_info "Detected OS: $os_type" + + if [ "$os_type" = "windows" ]; then + log_warning "Running on Windows. Make sure you're using Git Bash or WSL." + fi + + # Check prerequisites + check_node_version + check_npm + + # Run requested operations + if [ "$do_init" = true ]; then + install_e2e_dependencies + install_mock_server_dependencies + fi + + if [ "$do_upgrade" = true ]; then + upgrade_e2e_dependencies + fi + + if [ "$do_build" = true ]; then + build_e2e_output + fi + + if [ "$do_start_servers" = true ]; then + start_test_servers + fi + + log_success "All operations completed successfully!" + log_info "Run e2e tests:" + log_info " 1. npm run test-e2e" + log_info " 2. USE_HEADLESS_PUPPETEER=true npm run test-e2e" +} + +# Run main function +main "$@" \ No newline at end of file diff --git a/script/source-archive.sh b/script/source-archive.sh new file mode 100755 index 000000000..fd7bd06d9 --- /dev/null +++ b/script/source-archive.sh @@ -0,0 +1,13 @@ +#!/usr/bin/env bash + +set -euo pipefail +ROOT="$(cd "$(dirname "$0")/.." && pwd)" +cd "$ROOT" +mkdir -p market_packages +git archive --format=zip -o market_packages/target.src.zip HEAD +zip -u -q market_packages/target.src.zip package-lock.json +zip -d -q market_packages/target.src.zip README.md 2>/dev/null || true +TMP=$(mktemp -d) +cp doc/for-firefox.md "$TMP/README.md" +( cd "$TMP" && zip -u -j -q "$ROOT/market_packages/target.src.zip" README.md ) +rm -rf "$TMP" diff --git a/script/user-chart/add.ts b/script/user-chart/add.ts index 5021576f5..b7c632fc8 100644 --- a/script/user-chart/add.ts +++ b/script/user-chart/add.ts @@ -5,48 +5,74 @@ import { type Gist, type GistForm, updateGist as updateGistApi -} from "@src/api/gist" +} from "@api/gist" +import { CHROME_ID } from "@util/constant/meta" import fs from "fs" import { exitWith } from "../util/process" -import { descriptionOf, filenameOf, getExistGist, validateTokenFromEnv } from "./common" +import { type Browser, descriptionOf, filenameOf, getExistGist, type UserCount, validateTokenFromEnv } from "./common" -type AddArgv = { +type AutoMode = { + mode: 'auto' + dirPath: string +} + +type ManualMode = { + mode: 'manual' browser: Browser fileName: string } +type AddArgv = AutoMode | ManualMode + +const BROWSER_MAP: Record = { + c: 'chrome', + e: 'edge', + f: 'firefox', +} + function parseArgv(): AddArgv { const argv = process.argv.slice(2) - const browserArgv = argv[0] - const fileName = argv[1] - if (!browserArgv || !fileName) { - exitWith("add.ts [c/e/f] [file_name]") - } - const browserArgvMap: Record = { - c: 'chrome', - e: 'edge', - f: 'firefox', - } - const browser: Browser = browserArgvMap[browserArgv] - if (!browser) { - exitWith("add.ts [c/e/f] [file_name]") - } - return { - browser, - fileName + const [a0, a1] = argv + + if (!a0) return exitWith("add.ts [c/e/f] [file_name] OR add.ts auto [dir_path]") + + if (a0 === 'auto') { + return a1 ? { mode: 'auto', dirPath: a1 } : exitWith("add.ts auto [dir_path]") } + + if (!a1) return exitWith("add.ts [c/e/f] [file_name] OR add.ts auto [dir_path]") + + const browser = BROWSER_MAP[a0] + if (!browser) return exitWith("add.ts [c/e/f] [file_name]") + + return { mode: 'manual', browser, fileName: a1 } +} + +function detectBrowser(fileName: string): Browser | null { + if (fileName.includes(CHROME_ID)) return 'chrome' + if (fileName.includes('usage-day-')) return 'firefox' + if (fileName.includes('edgeaddon_analytics')) return 'edge' + return null +} + +function sortDataByKey(data: UserCount): UserCount { + const sorted: UserCount = {} + Object.entries(data) + .sort((a, b) => a[0].localeCompare(b[0])) + .forEach(([key, val]) => sorted[key] = val) + return sorted } async function createGist(token: string, browser: Browser, data: UserCount) { const description = descriptionOf(browser) const filename = filenameOf(browser) - - // 1. sort by key - const sorted: UserCount = {} - Object.keys(data).sort().forEach(key => sorted[key] = data[key]) - // 2. create - const files: Record = {} - files[filename] = { filename: filename, content: JSON.stringify(sorted, null, 2) } + const sorted = sortDataByKey(data) + const files: Record = { + [filename]: { + filename, + content: JSON.stringify(sorted, null, 2) + } + } const gistForm: GistForm = { public: true, description, @@ -60,25 +86,26 @@ async function updateGist(token: string, browser: Browser, data: UserCount, gist const filename = filenameOf(browser) // 1. merge const file = gist.files[filename] - const existData = (await getJsonFileContent(file!)) || {} + if (!file) { + exitWith(`Missing file in gist: ${filename}`) + } + const existData = (await getJsonFileContent(file)) || {} Object.entries(data).forEach(([key, val]) => existData[key] = val) // 2. sort by key const sorted: UserCount = {} - Object.keys(existData).sort().forEach(key => sorted[key] = existData[key]) + Object.entries(existData) + .sort(([key1], [key2]) => key1.localeCompare(key2)) + .forEach(([key, value]) => sorted[key] = value) const files: Record = {} files[filename] = { filename: filename, content: JSON.stringify(sorted, null, 2) } - const gistForm: GistForm = { - public: true, - description, - files - } - updateGistApi(token, gist.id, gistForm) + const gistForm: GistForm = { public: true, description, files } + await updateGistApi(token, gist.id, gistForm) } function parseChrome(content: string): UserCount { const lines = content.split('\n') const result: Record = {} - if (!(lines?.length > 2)) { + if (!(lines.length > 2)) { return result } lines.slice(2).forEach(line => { @@ -86,10 +113,12 @@ function parseChrome(content: string): UserCount { if (!dateStr || !numberStr) { return } - // Replace '/' to '-', then rjust month and date - const date = dateStr.split('/').map(str => rjust(str, 2, '0')).join('-') + // Chrome CSV format: YYYY/M/D + const [, y, m, d] = /^(\d{4})\/(\d{1,2})\/(\d{1,2})$/.exec(dateStr.trim()) ?? [] + if (!y || !m || !d) return + const date = `${y}-${m.padStart(2, '0')}-${d.padStart(2, '0')}` const number = parseInt(numberStr) - date && number && (result[date] = number) + number && (result[date] = number) }) return result } @@ -97,7 +126,7 @@ function parseChrome(content: string): UserCount { function parseEdge(content: string): UserCount { const lines = content.split('\n') const result: Record = {} - if (!(lines?.length > 1)) { + if (!(lines.length > 1)) { return result } lines.slice(1).forEach(line => { @@ -118,7 +147,7 @@ function parseEdge(content: string): UserCount { function parseFirefox(content: string): UserCount { const lines = content.split('\n') const result: Record = {} - if (!(lines?.length > 4)) { + if (!(lines.length > 4)) { return result } lines.slice(4).forEach(line => { @@ -142,22 +171,86 @@ function rjust(str: string, num: number, padding: string): string { return Array.from(new Array(num - str.length).keys()).map(_ => padding).join('') + str } +const PARSERS: Record UserCount> = { + chrome: parseChrome, + edge: parseEdge, + firefox: parseFirefox, +} + +async function processFile(browser: Browser, filePath: string): Promise { + const content = fs.readFileSync(filePath, { encoding: 'utf-8' }) + return PARSERS[browser](content) +} + +function groupFilesByBrowser(files: string[]): Record { + const grouped: Record = { chrome: [], edge: [], firefox: [] } + for (const file of files) { + const browser = detectBrowser(file) + if (browser) { + grouped[browser].push(file) + } else { + console.warn(`Unknown file format, skipping: ${file}`) + } + } + return grouped +} + +function mergeData(target: UserCount, source: UserCount): void { + Object.entries(source).forEach(([key, val]) => { + target[key] = target[key] ? Math.max(target[key], val) : val + }) +} + +async function processDirectory(token: string, dirPath: string) { + const files = fs.readdirSync(dirPath).filter(f => f.endsWith('.csv')) + if (files.length === 0) exitWith(`No CSV files found in ${dirPath}`) + + const filesByBrowser = groupFilesByBrowser(files) + + for (const [browser, browserFiles] of Object.entries(filesByBrowser)) { + if (browserFiles.length === 0) continue + + const typedBrowser = browser as Browser + console.log(`Processing ${browser.toUpperCase()}: ${browserFiles.length} file(s)`) + + let mergedData: UserCount = {} + for (const file of browserFiles) { + const filePath = `${dirPath}/${file}` + console.log(`Processing: ${file}`) + const data = await processFile(typedBrowser, filePath) + mergeData(mergedData, data) + } + + if (Object.keys(mergedData).length === 0) { + console.log(`No valid data found for ${browser}`) + continue + } + + console.log(`Merged ${Object.keys(mergedData).length} date entries for ${browser}`) + + const gist = await getExistGist(token, typedBrowser) + if (!gist) { + console.log(`Creating new gist for ${browser}...`) + await createGist(token, typedBrowser, mergedData) + } else { + console.log(`Updating existing gist for ${browser}...`) + await updateGist(token, typedBrowser, mergedData, gist) + } + console.log(`${browser.toUpperCase()} completed successfully!`) + } +} + async function main() { const token = validateTokenFromEnv() - const argv: AddArgv = parseArgv() - const browser = argv.browser - const fileName = argv.fileName - const content = fs.readFileSync(fileName, { encoding: 'utf-8' }) - let newData: UserCount = {} - if (browser === 'chrome') { - newData = parseChrome(content) - } else if (browser === 'edge') { - newData = parseEdge(content) - } else if (browser === 'firefox') { - newData = parseFirefox(content) - } else { - exitWith("Un-supported browser: " + browser) + const argv = parseArgv() + + if (argv.mode === 'auto') { + return await processDirectory(token, argv.dirPath) } + + const { browser, fileName } = argv + + const newData = await processFile(browser, fileName) const gist = await getExistGist(token, browser) if (!gist) { await createGist(token, browser, newData) diff --git a/script/user-chart/common.ts b/script/user-chart/common.ts index 6b69633d4..a3a30cfc5 100644 --- a/script/user-chart/common.ts +++ b/script/user-chart/common.ts @@ -1,5 +1,12 @@ import { findTarget, type Gist } from "@api/gist" -import { exitWith } from "../util/process" +import { exitWith } from '../util/process' + +export type Browser = + | 'chrome' + | 'firefox' + | 'edge' + +export type UserCount = Record /** * Validate the token from environment variables diff --git a/script/user-chart/render.ts b/script/user-chart/render.ts index da1b3d14c..e5a3fb8ce 100644 --- a/script/user-chart/render.ts +++ b/script/user-chart/render.ts @@ -1,39 +1,40 @@ import { - createGist, - type FileForm, - findTarget, - getJsonFileContent, - type GistForm, - updateGist + createGist, findTarget, getJsonFileContent, updateGist, + type FileForm, type GistForm, } from "@api/gist" -import { type EChartsType, init } from "echarts" +import { + init, + type ComposeOption, + type GridComponentOption, type LineSeriesOption, type TitleComponentOption +} from "echarts" import { writeFileSync } from "fs" -import { exit } from "process" -import { filenameOf, getExistGist, validateTokenFromEnv } from "./common" - -const ALL_BROWSERS: Browser[] = ['firefox', 'edge', 'chrome'] +import { exit } from 'process' +import { filenameOf, getExistGist, validateTokenFromEnv, type Browser, type UserCount } from "./common" -const POINT_COUNT = 200 +type EcOption = ComposeOption< + | LineSeriesOption + | TitleComponentOption + | GridComponentOption +> +const ALL_BROWSERS: Browser[] = ['edge', 'chrome', 'firefox'] -type OriginData = { - [browser in Browser]: UserCount -} +type OriginData = Record type ChartData = { xAxis: string[] - yAxises: { - [browser in Browser]: number[] - } + yAxises: Record } +const VALID_DATE_RE = /^\d{4}-\d{2}-\d{2}$/ + function preProcess(originData: OriginData): ChartData { // 1. sort dates const dateSet = new Set() Object.values(originData).forEach(ud => Object.keys(ud).forEach(date => dateSet.add(date))) - let allDates = Array.from(dateSet).sort() + let allDates = Array.from(dateSet).filter(d => VALID_DATE_RE.test(d)).sort() // 2. smooth the count - const ctx: { [browser in Browser]: SmoothContext } = { + const ctx: Record = { chrome: new SmoothContext(), firefox: new SmoothContext(), edge: new SmoothContext(), @@ -42,7 +43,7 @@ function preProcess(originData: OriginData): ChartData { allDates.forEach( date => ALL_BROWSERS.forEach(b => ctx[b].process(originData[b][date])) ) - const result: ChartData = { + return { xAxis: allDates, yAxises: { chrome: ctx.chrome.end(), @@ -50,12 +51,6 @@ function preProcess(originData: OriginData): ChartData { edge: ctx.edge.end(), } } - - // 3. zoom - const reduction = Math.floor(Object.keys(allDates).length / POINT_COUNT) - result.xAxis = zoom(result.xAxis, reduction) - ALL_BROWSERS.forEach(b => result.yAxises[b] = zoom(result.yAxises[b], reduction)) - return result } class SmoothContext { @@ -76,7 +71,7 @@ class SmoothContext { if (newVal) { this.smooth(newVal) } else { - this.increaseStep() + this.step += 1 } } @@ -85,49 +80,33 @@ class SmoothContext { return } const unitVal = (currentValue - this.lastVal) / (this.step + 1) - Object.keys(Array.from(new Array(this.step))) - .map(key => parseInt(key)) - .map(i => Math.floor(unitVal * (i + 1) + this.lastVal)) - .forEach(smoothedVal => this.data.push(smoothedVal)) + + const smoothedValues = Array.from({ length: this.step }, (_, i) => Math.floor(unitVal * (i + 1) + this.lastVal)) + this.data.push(...smoothedValues) this.data.push(currentValue) // Reset this.lastVal = currentValue this.step = 0 } - increaseStep(): void { - this.step += 1 - } - end(): number[] { - Object.keys(Array.from(new Array(this.step))) - .forEach(() => this.data.push(this.lastVal)) + Array.from({ length: this.step }).forEach(() => this.data.push(this.lastVal)) return this.data } } -function zoom(data: T[], reduction: number): T[] { - let i = 0 - const newData: T[] = [] - while (i < data.length) { - newData.push(data[i]) - i += reduction - } - return newData -} - function render2Svg(chartData: ChartData): string { const { xAxis, yAxises } = chartData - const chart: EChartsType = init(null, null, { + const chart = init(null, null, { renderer: 'svg', ssr: true, width: 960, height: 640 }) const totalUserCount = Object.values(yAxises) - .map(v => v[v.length - 1] || 0) + .map(v => v[v.length - 1] ?? 0) .reduce((a, b) => a + b) - chart.setOption({ + const option: EcOption = { title: { text: 'Total Active User Count', subtext: `${xAxis[0]} to ${xAxis[xAxis.length - 1]} | currently ${totalUserCount} ` @@ -139,23 +118,30 @@ function render2Svg(chartData: ChartData): string { bottom: '8%', containLabel: true }, - xAxis: [{ - type: 'category', - boundaryGap: false, - data: xAxis - }], - yAxis: [ - { type: 'value' } - ], + xAxis: { type: 'time' }, + yAxis: { + type: 'value', + minInterval: 100, + axisLabel: { + formatter(value) { + const text = value.toString() + const textLen = text.length + return textLen < 4 ? text : text.substring(0, textLen - 3) + 'K' + }, + }, + }, series: ALL_BROWSERS.map(b => ({ name: b, type: 'line', stack: 'Total', // Fill the area areaStyle: {}, - data: yAxises[b] + lineStyle: { width: 0 }, + showSymbol: false, + data: yAxises[b].map((val, idx) => [xAxis[idx], val]), })) - }) + } + chart.setOption(option) return chart.renderToSVGString() } @@ -163,10 +149,15 @@ const USER_COUNT_GIST_DESC = "User count of timer, auto-generated" const USER_COUNT_SVG_FILE_NAME = "user_count.svg" async function getOriginData(token: string): Promise { - const [firefox, edge, chrome]: UserCount[] = await Promise.all( - ALL_BROWSERS.map(b => getDataFromGist(token, b)) - ) - return { chrome, firefox, edge } + const result: OriginData = { + chrome: {}, + firefox: {}, + edge: {}, + } + for (const b of ALL_BROWSERS) { + result[b] = await getDataFromGist(token, b) + } + return result } /** diff --git a/script/user-chart/user-chart.d.ts b/script/user-chart/user-chart.d.ts deleted file mode 100644 index 56d0300c8..000000000 --- a/script/user-chart/user-chart.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -type Browser = - | 'chrome' - | 'firefox' - | 'edge' - -type UserCount = Record \ No newline at end of file diff --git a/script/util/process.ts b/script/util/process.ts index ce80dc4ce..d017db756 100644 --- a/script/util/process.ts +++ b/script/util/process.ts @@ -2,7 +2,7 @@ /** * @throws Will invoke ```process.exit()``` */ -export function exitWith(msg: string) { +export function exitWith(msg: string): never { console.error(msg) process.exit() } \ No newline at end of file diff --git a/script/zip.sh b/script/zip.sh deleted file mode 100755 index 2491e975c..000000000 --- a/script/zip.sh +++ /dev/null @@ -1,17 +0,0 @@ -#!/bin/bash - -FOLDER=$( - cd "$(dirname "$0")/.." - pwd -) -TARGET_PATH="${FOLDER}/aaa" - -COPYFILE_DISABLE=1 tar -zcvf ${TARGET_PATH} \ - --exclude=dist*/ \ - --exclude=.git/ \ - --exclude=package-lock.json \ - --exclude=node_modules \ - --exclude=firefox_dev*/ \ - --exclude=market_packages \ - --exclude=aaa \ - ./ diff --git a/src/api/chrome/action.ts b/src/api/chrome/action.ts index 17aa26a54..bb52a3c7c 100644 --- a/src/api/chrome/action.ts +++ b/src/api/chrome/action.ts @@ -3,8 +3,10 @@ import { handleError } from "./common" const action = IS_MV3 ? chrome.action : chrome.browserAction -export function setBadgeText(text: string, tabId: number | undefined): Promise { - return new Promise(resolve => action?.setBadgeText({ text, tabId }, () => { +export function setBadgeText(text: string, tabId?: number): Promise { + const details: { text: string; tabId?: number } = + tabId === undefined ? { text } : { text, tabId } + return new Promise(resolve => action?.setBadgeText(details, () => { handleError('setBadgeText') resolve() })) diff --git a/src/api/chrome/alarm.ts b/src/api/chrome/alarm.ts index 0b4c2c807..bb136462c 100644 --- a/src/api/chrome/alarm.ts +++ b/src/api/chrome/alarm.ts @@ -1,3 +1,4 @@ +import { IS_MV3 } from '@util/constant/environment' import { handleError } from "./common" type AlarmHandler = (alarm: ChromeAlarm) => PromiseLike | void @@ -6,13 +7,33 @@ export function onAlarm(handler: AlarmHandler) { chrome.alarms.onAlarm.addListener(handler) } -export function clearAlarm(name: string): Promise { - return new Promise(resolve => chrome.alarms.clear(name, () => { - handleError('clearAlarm') +export async function clearAlarm(name: string): Promise { + if (IS_MV3) { + return chrome.alarms.clear(name) + } else { + return new Promise(resolve => chrome.alarms.clear(name, removed => { + handleError('clearAlarm') + resolve(removed) + })) + } +} + +export function createAlarm(name: string, when: number): Promise { + if (IS_MV3) { + return chrome.alarms.create(name, { when }) + } + return new Promise(resolve => chrome.alarms.create(name, { when }, () => { + handleError('createAlarm') resolve() })) } -export function createAlarm(name: string, when: number): void { - chrome.alarms.create(name, { when }) +export async function getAlarm(name: string): Promise { + if (IS_MV3) { + return chrome.alarms.get(name) + } + return new Promise(resolve => chrome.alarms.get(name, alarm => { + handleError('getAlarm') + resolve(alarm) + })) } \ No newline at end of file diff --git a/src/api/chrome/notifications.ts b/src/api/chrome/notifications.ts new file mode 100644 index 000000000..0612bc096 --- /dev/null +++ b/src/api/chrome/notifications.ts @@ -0,0 +1,26 @@ +import { IS_MV3 } from "@util/constant/environment" +import { handleError } from "./common" +import { getIconUrl } from './runtime' + +type Topic = 'time' +type ChromeOptions = chrome.notifications.NotificationCreateOptions +type Options = Omit + +export async function createNotification(topic: Topic, options: Options): Promise { + const param = { ...options, iconUrl: getIconUrl() } + if (IS_MV3) { + return await chrome.notifications.create(topic, param) + } else { + return new Promise((resolve, reject) => { + chrome.notifications.create(topic, param, (id: string) => { + const error = handleError('createNotification') + if (error) { + reject(new Error(error)) + } else { + resolve(id) + } + }) + }) + } +} + diff --git a/src/api/chrome/permission.ts b/src/api/chrome/permission.ts index c98423958..1817d1413 100644 --- a/src/api/chrome/permission.ts +++ b/src/api/chrome/permission.ts @@ -1,7 +1,7 @@ import { IS_MV3 } from "@util/constant/environment" import { handleError } from "./common" -export async function hasPerm(perm: chrome.runtime.ManifestPermissions): Promise { +export async function hasPerm(perm: chrome.runtime.ManifestPermission): Promise { if (IS_MV3) { try { return await chrome.permissions.contains({ permissions: [perm] }) @@ -18,7 +18,7 @@ export async function hasPerm(perm: chrome.runtime.ManifestPermissions): Promise } } -export async function requestPerm(perm: chrome.runtime.ManifestPermissions): Promise { +export async function requestPerm(perm: chrome.runtime.ManifestPermission): Promise { if (IS_MV3) { try { return await chrome.permissions.request({ permissions: [perm] }) diff --git a/src/api/chrome/runtime.ts b/src/api/chrome/runtime.ts index f4d8c66e8..8f70371f6 100644 --- a/src/api/chrome/runtime.ts +++ b/src/api/chrome/runtime.ts @@ -1,4 +1,3 @@ -import { handleError } from "./common" export function getRuntimeId(): string { return chrome.runtime.id @@ -8,34 +7,23 @@ export function getRuntimeName(): string { return chrome.runtime.getManifest().name } -export function sendMsg2Runtime(code: timer.mq.ReqCode, data?: T): Promise { - // Fix proxy data failed to serialized in Firefox - if (data !== undefined) { - data = JSON.parse(JSON.stringify(data)) - } - const request: timer.mq.Request = { code, data } - return new Promise((resolve, reject) => { - try { - chrome.runtime.sendMessage(request, (response: timer.mq.Response) => { - handleError('sendMsg2Runtime') - const resCode = response?.code - resCode === 'fail' && reject(new Error(response?.msg || 'Unknown error')) - resCode === 'success' && resolve(response.data) - }) - } catch (e) { - reject('Failed to send message: ' + (e as Error)?.message || 'Unknown error') - } - }) +export function getIconUrl(): string { + return getUrl('static/images/icon.png') } -export function onRuntimeMessage(handler: ChromeMessageHandler): void { +export function onRuntimeMessage(handler: ChromeMessageHandler): void { // Be careful!!! // Can't use await/async in callback parameter - chrome.runtime.onMessage.addListener((message: timer.mq.Request, sender: chrome.runtime.MessageSender, sendResponse: timer.mq.Callback) => { - handler(message, sender).then((response: timer.mq.Response) => { - if (response.code === 'ignore') return - sendResponse(response) - }) + chrome.runtime.onMessage.addListener((message: tt4b.mq.Request, sender: chrome.runtime.MessageSender, sendResponse: tt4b.mq.Callback) => { + void handler(message, sender) + .then((response: tt4b.mq.Response) => { + sendResponse(response) + }) + .catch((err: unknown) => { + const msg = err instanceof Error ? err.message : String(err) + console.error('onRuntimeMessage handler error', err) + sendResponse({ code: 'fail', msg }) + }) // 'return true' will force chrome to wait for the response processed in the above promise. // @see https://github.com/mozilla/webextension-polyfill/issues/130 return true diff --git a/src/api/chrome/sidePanel.ts b/src/api/chrome/sidePanel.ts new file mode 100644 index 000000000..74cf7961f --- /dev/null +++ b/src/api/chrome/sidePanel.ts @@ -0,0 +1,33 @@ +import { IS_ANDROID, IS_MV3 } from '@util/constant/environment' +import { handleError } from './common' + +// NOT SUPPORTED in Firefox +// Keep noticing at chrome.sidebarAction for Firefox +export const SIDE_PANEL_STATE_SUPPORTED_CONTROL = !!chrome.sidePanel?.setOptions + +export async function isSidePanelEnabled(): Promise { + if (IS_ANDROID || !SIDE_PANEL_STATE_SUPPORTED_CONTROL) return false + + if (IS_MV3) { + const result = await chrome.sidePanel.getOptions({}) + return result.enabled ?? true + } else { + return new Promise(resolve => chrome.sidePanel.getOptions({}, options => { + handleError('isSidePanelEnabled') + resolve(options.enabled ?? true) + })) + } +} + +export async function setSidePanelEnabled(enabled: boolean): Promise { + if (IS_ANDROID || !SIDE_PANEL_STATE_SUPPORTED_CONTROL) return + + if (IS_MV3) { + await chrome.sidePanel.setOptions({ enabled }) + } else { + return new Promise(resolve => chrome.sidePanel.setOptions({ enabled }, () => { + handleError('setSidePanelEnabled') + resolve() + })) + } +} \ No newline at end of file diff --git a/src/api/chrome/tab.ts b/src/api/chrome/tab.ts index 41bc1e1a6..acf91692c 100644 --- a/src/api/chrome/tab.ts +++ b/src/api/chrome/tab.ts @@ -5,35 +5,20 @@ * https://opensource.org/licenses/MIT */ +import { IS_MV3 } from '@util/constant/environment' import { handleError } from "./common" -export function getTab(id: number): Promise { +export function getTab(id: number): Promise { + if (id < 0) { + return Promise.resolve(undefined) + } return new Promise(resolve => chrome.tabs.get(id, tab => { handleError("getTab") resolve(tab) })) } -export function resetTabUrl(tabId: number, url: string): Promise { - return new Promise(resolve => chrome.tabs.update(tabId, { - url: url, - highlighted: true, - }, () => resolve())) -} - -export async function getRightOf(target: ChromeTab): Promise { - if (!target) return - const { windowId, index } = target - return new Promise(resolve => chrome.tabs.query({ windowId }, tabs => { - const rightTab = tabs - ?.sort?.((a, b) => (a?.index ?? -1) - (b?.index ?? -1)) - ?.filter?.(t => t.index > index) - ?.[0] - resolve(rightTab) - })) -} - -export function getCurrentTab(): Promise { +function getCurrentTab(): Promise { return new Promise(resolve => chrome.tabs.getCurrent(tab => { handleError("getCurrentTab") resolve(tab) @@ -71,37 +56,71 @@ export async function createTabAfterCurrent(url: string, currentTab?: ChromeTab) } export function listTabs(query?: chrome.tabs.QueryInfo): Promise { - query = query || {} + query ??= {} + if (IS_MV3) return chrome.tabs.query(query) return new Promise(resolve => chrome.tabs.query(query, tabs => { handleError("listTabs") resolve(tabs || []) })) } -export function sendMsg2Tab(tabId: number, code: timer.mq.ReqCode, data?: T): Promise { - const request: timer.mq.Request = { code, data } +export function sendMsg2Tab(tabId: number, code: C, data?: tt4b.tab.ReqData): Promise | undefined> { + const request: tt4b.tab.Request = { code, data: data as tt4b.tab.ReqData } return new Promise((resolve, reject) => { - chrome.tabs.sendMessage, timer.mq.Response>(tabId, request, response => { + const timeout = setTimeout(() => reject('sendMsg2Tab timeout'), 2000) + chrome.tabs.sendMessage, tt4b.tab.Response>(tabId, request, response => { const sendError = handleError('sendMsg2Tab') - const resCode = response?.code - resCode === 'success' && resolve(response.data) - reject(new Error(response?.msg ?? sendError ?? 'Unknown error')) + clearTimeout(timeout) + if (response?.code === 'success') { + resolve(response.data as tt4b.tab.ResData | undefined) + return + } + if (response?.code === 'fail') { + reject(new Error(response.msg ?? sendError ?? 'Unknown error')) + return + } + reject(new Error(sendError ?? 'Unknown error')) }) }) } -type TabHandler = (tabId: number, ev: Event, tab?: ChromeTab) => void +export async function trySendMsg2Tab( + tabId: number, + code: C, + data?: tt4b.tab.ReqData +): Promise | undefined> { + try { + return await sendMsg2Tab(tabId, code, data) + } catch (e) { + console.warn(`Errored to send message to tab: tabId=${tabId}, code=${code}, data=${JSON.stringify(data)}`, e) + return Promise.resolve(undefined) + } +} + +type TabHandler = (tabId: number, ev: Event, tab: ChromeTab) => void -export function onTabActivated(handler: TabHandler): void { - chrome.tabs.onActivated.addListener((activeInfo: chrome.tabs.OnActivatedInfo) => { +export function onTabActivated(handler: (tabId: number, info: ChromeTabActiveInfo) => void): void { + chrome.tabs.onActivated.addListener(activeInfo => { handleError("tabActivated") - handler(activeInfo?.tabId, activeInfo) + handler(activeInfo.tabId, activeInfo) }) } -export function onTabUpdated(handler: TabHandler): void { - chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: ChromeTabChangeInfo, tab: ChromeTab) => { +export function onTabUpdated(handler: TabHandler): void { + chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: ChromeTabUpdatedInfo, tab: ChromeTab) => { handleError("tabUpdated") handler(tabId, changeInfo, tab) }) } + +export function updateTab(tabId: number, updateProperties: chrome.tabs.UpdateProperties): Promise { + if (IS_MV3) { + return chrome.tabs.update(tabId, updateProperties) + } + return new Promise((resolve) => { + chrome.tabs.update(tabId, updateProperties, (tab) => { + handleError("updateTab") + resolve(tab) + }) + }) +} \ No newline at end of file diff --git a/src/api/chrome/tabGroups.ts b/src/api/chrome/tabGroups.ts index 42f490c87..2a748e6ad 100644 --- a/src/api/chrome/tabGroups.ts +++ b/src/api/chrome/tabGroups.ts @@ -67,18 +67,3 @@ export function isValidGroup(groupId?: number): groupId is number { return false } } - -export const cvtGroupColor = (color?: `${chrome.tabGroups.Color}`): string => { - switch (color) { - case 'grey': return '#5F6369' - case 'blue': return '#1974E8' - case 'yellow': return '#F9AB03' - case 'red': return '#DA3025' - case 'green': return '#198139' - case 'pink': return '#D01984' - case 'purple': return '#A143F5' - case 'cyan': return '#027B84' - case 'orange': return '#FA913E' - default: return '#000' - } -} diff --git a/src/api/chrome/window.ts b/src/api/chrome/window.ts index 94b9f5f1c..3b669d6b9 100644 --- a/src/api/chrome/window.ts +++ b/src/api/chrome/window.ts @@ -1,58 +1,37 @@ -import { IS_ANDROID } from "@util/constant/environment" +import { IS_ANDROID, IS_MV3 } from "@util/constant/environment" import { handleError } from "./common" -export function listAllWindows(): Promise { - if (IS_ANDROID) { - // windows API not supported on Firefox for Android - return Promise.resolve([]) - } - return new Promise(resolve => chrome.windows.getAll(windows => { - handleError("listAllWindows") - resolve(windows || []) - })) -} - -export function isNoneWindowId(windowId: number) { - if (IS_ANDROID) { - return false - } - return !windowId || windowId === chrome.windows.WINDOW_ID_NONE -} - -export async function getFocusedNormalWindow(): Promise { - if (IS_ANDROID) { - return +export async function getLastFocusedId(): Promise { + if (IS_ANDROID) return Promise.resolve(undefined) + if (IS_MV3) { + const window = await chrome.windows.getLastFocused({ windowTypes: ['normal'] }) + return window.id } return new Promise(resolve => chrome.windows.getLastFocused( - // Only find normal window { windowTypes: ['normal'] }, - window => { - const { focused, id } = window - handleError('getFocusedNormalWindow') - if (!focused || !id || isNoneWindowId(id)) { - resolve(undefined) - } else { - resolve(window) - } - } + ({ id }) => { + handleError('getLastFocusedId') + resolve(id) + }, )) } -export async function getWindow(id: number): Promise { - if (IS_ANDROID) { - return - } - return new Promise(resolve => chrome.windows.get(id, win => resolve(win))) +export function getWindow(id: number): Promise { + if (IS_ANDROID) return Promise.resolve(undefined) + return new Promise(resolve => chrome.windows.get(id, window => { + handleError('getWindow') + resolve(window) + })) } -type _Handler = (windowId: number) => void +export function isNoneWindowId(windowId: number | undefined) { + return windowId === undefined || windowId === chrome.windows.WINDOW_ID_NONE +} -export function onNormalWindowFocusChanged(handler: _Handler) { - if (IS_ANDROID) { - return - } +export function onWindowFocusChanged(handler: ArgCallback) { + if (IS_ANDROID) return chrome.windows.onFocusChanged.addListener(windowId => { handleError('onWindowFocusChanged') handler(windowId) }) -} \ No newline at end of file +} diff --git a/src/api/crowdin.ts b/src/api/crowdin.ts index c25f34261..dab5b6b93 100644 --- a/src/api/crowdin.ts +++ b/src/api/crowdin.ts @@ -5,8 +5,16 @@ * https://opensource.org/licenses/MIT */ -import { CROWDIN_PROJECT_ID } from "@util/constant/url" -import { fetchGet } from './http' +import { createArrayGuard, createObjectGuard, isInt, isString, TypeGuard } from 'typescript-guard' +import { CROWDIN_PROJECT_ID } from "../util/constant/url" + +type ListResponse = { + data: { data: T }[] +} + +const createListRespGuard = (itemGuard: TypeGuard) => createObjectGuard>({ + data: createArrayGuard(createObjectGuard({ data: itemGuard })) +}) /** * Used to obtain translation status @@ -21,37 +29,55 @@ export type TranslationStatusInfo = { translationProgress: number } -export type MemberInfo = { +const isStatusResp = createListRespGuard( + createObjectGuard({ + languageId: isString, + translationProgress: isInt, + }) +) + +type MemberInfo = { username: string joinedAt: string avatarUrl: string } +const isMembersResp = createListRespGuard( + createObjectGuard({ + username: isString, + joinedAt: isString, + avatarUrl: isString, + }) +) + export async function getTranslationStatus(): Promise { const limit = 500 - const auth = `Bearer ${PUBLIC_TOKEN}` const url = `https://api.crowdin.com/api/v2/projects/${CROWDIN_PROJECT_ID}/languages/progress?limit=${limit}` - const response = await fetchGet(url, { headers: { "Authorization": auth } }) - const data: { data: { data: TranslationStatusInfo }[] } = await response.json() - return data.data.map(i => i.data) + return await getList(url, isStatusResp) } export async function getMembers(): Promise { const result: MemberInfo[] = [] - const auth = `Bearer ${PUBLIC_TOKEN}` - - const limit = 10 + const limit = 500 let offset = 0 while (true) { const url = `https://api.crowdin.com/api/v2/projects/${CROWDIN_PROJECT_ID}/members?limit=${limit}&offset=${offset}` - const response = await fetchGet(url, { headers: { "Authorization": auth } }) - const data: { data: { data: MemberInfo }[] } = await response.json() - const newItems = data?.data?.map(i => i.data) ?? [] + const newItems = await getList(url, isMembersResp) result.push(...newItems) - if (newItems.length < limit) break offset += limit } return result -} \ No newline at end of file +} + +async function getList(url: string, respGuard: TypeGuard>): Promise { + const resp = await fetch(url, { + method: 'GET', + headers: { "Authorization": `Bearer ${PUBLIC_TOKEN}` }, + }) + const json = await resp.json() + if (respGuard(json)) return json.data.map(i => i.data) + console.warn('Unexpected response from Crowdin API', json) + return [] +} diff --git a/src/api/gist.ts b/src/api/gist.ts index 86edd8bea..463773d28 100644 --- a/src/api/gist.ts +++ b/src/api/gist.ts @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import FIFOCache from "@util/fifo-cache" +import FIFOCache from "../util/fifo-cache" import { fetchGet, fetchGetWithTry, fetchPost } from "./http" type BaseFile = { @@ -16,7 +16,7 @@ export type FileForm = BaseFile & { content: string } -export type File = BaseFile & { +type File = BaseFile & { type: string language: string raw_url: string @@ -161,5 +161,8 @@ export async function testToken(token: string): Promise { } }) const { status, statusText } = response || {} - return status === 200 ? undefined : statusText || ("ERROR " + status) + if (status === 200) return undefined + if (status === 401) return '[401] Invalid token or no permission to access gist' + if (status === 403) return '[403] Access forbidden, possibly due to rate limit exceeded' + return statusText || `ERROR ${status}` } diff --git a/src/api/http.ts b/src/api/http.ts index 6675ef081..0e3f902df 100644 --- a/src/api/http.ts +++ b/src/api/http.ts @@ -1,10 +1,5 @@ type Option = Omit -export type FetchResult = { - data?: T - statusCode: number -} - export async function fetchGetWithTry(url: string, maxTry: number, option?: Option): Promise { let count = 0 do { diff --git a/src/api/obsidian.ts b/src/api/obsidian.ts index 51207be58..d9a9752b1 100644 --- a/src/api/obsidian.ts +++ b/src/api/obsidian.ts @@ -12,7 +12,7 @@ export const DEFAULT_VAULT = "vault" export const INVALID_AUTH_CODE = 40101 export const NOT_FOUND_CODE = 40400 -export type ObsidianResult = { +type ObsidianResult = { message?: string errorCode?: number } & T diff --git a/src/api/sw/backup.ts b/src/api/sw/backup.ts new file mode 100644 index 000000000..1a9bdd177 --- /dev/null +++ b/src/api/sw/backup.ts @@ -0,0 +1,15 @@ +import { sendMsg2Runtime } from "./common" + +export const syncData = () => sendMsg2Runtime('backup.sync', undefined, 120_000) + +export const checkAuth = () => sendMsg2Runtime('backup.checkAuth') + +export const clearBackup = (cid: string) => sendMsg2Runtime('backup.clear', cid, 60_000) + +export const queryBackup = (param: tt4b.backup.RemoteQuery) => sendMsg2Runtime('backup.query', param, 120_000) + +export const previewBackup = (param: tt4b.backup.RemoteQuery) => sendMsg2Runtime('backup.preview', param, 120_000) + +export const getLastBackUp = (type: tt4b.backup.Type) => sendMsg2Runtime('backup.lastTs', type) + +export const allBackupClients = () => sendMsg2Runtime('backup.clients') diff --git a/src/api/sw/cate.ts b/src/api/sw/cate.ts new file mode 100644 index 000000000..e3f2b5ca2 --- /dev/null +++ b/src/api/sw/cate.ts @@ -0,0 +1,3 @@ +import { sendMsg2Runtime } from "./common" + +export const listAllCategories = () => sendMsg2Runtime('cate.all') diff --git a/src/api/sw/common.ts b/src/api/sw/common.ts new file mode 100644 index 000000000..d674e93ea --- /dev/null +++ b/src/api/sw/common.ts @@ -0,0 +1,63 @@ +import { handleError } from '../chrome/common' + +/** + * Fix proxy data failed to serialized in Firefox + */ +function cloneData(data: T | undefined): T | undefined { + if (data === undefined) return undefined + try { + return JSON.parse(JSON.stringify(data)) + } catch (cloneError) { + console.warn("Failed clone data", cloneError) + return data + } +} + +type RuntimeMsgArgs = [tt4b.mq.ReqData] extends [undefined] + ? [data?: tt4b.mq.ReqData, timeout_ms?: number] + : [data: tt4b.mq.ReqData, timeout_ms?: number] + +export function sendMsg2Runtime( + code: C, + ...args: RuntimeMsgArgs +): Promise> { + const [data, timeout_ms] = args + const request: tt4b.mq.Request = { code, data: cloneData(data) as tt4b.mq.ReqData } + return new Promise((resolve, reject) => { + const timeout = setTimeout(() => { + // timeout: no response from runtime + reject('sendMsg2Runtime timeout') + }, timeout_ms ?? 10_000) + try { + chrome.runtime.sendMessage(request, (response: tt4b.mq.Response) => { + clearTimeout(timeout) + handleError('sendMsg2Runtime') + const resCode = response?.code + if (resCode === 'fail') { + console.warn("Error occurred when querying service-worker", code, data, response?.msg) + return reject(new Error(response?.msg || 'Unknown error')) + } + resCode === 'success' && resolve(response.data as tt4b.mq.ResData) + }) + } catch (e) { + clearTimeout(timeout) + const msg = e instanceof Error ? e.message : 'Unknown error' + reject(`Failed to send message: ${msg}`) + } + }) +} + +/** + * Wrap for hooks, after the extension reloaded or upgraded, the context of current content script will be invalid + * And sending messages to the runtime will be failed + */ +export async function trySendMsg2Runtime( + code: C, + ...args: RuntimeMsgArgs +): Promise | undefined> { + try { + return await sendMsg2Runtime(code, ...args) + } catch { + return undefined + } +} diff --git a/src/api/sw/immigration.ts b/src/api/sw/immigration.ts new file mode 100644 index 000000000..05c10e155 --- /dev/null +++ b/src/api/sw/immigration.ts @@ -0,0 +1,5 @@ +import { sendMsg2Runtime } from "./common" + +export function importOther(query: tt4b.imported.ProcessQuery) { + return sendMsg2Runtime('immigration.importOther', query, 60_000) +} diff --git a/src/api/sw/limit.ts b/src/api/sw/limit.ts new file mode 100644 index 000000000..052e32d84 --- /dev/null +++ b/src/api/sw/limit.ts @@ -0,0 +1,11 @@ +import { sendMsg2Runtime } from "./common" + +export const listLimits = (query?: tt4b.limit.Query) => sendMsg2Runtime('limit.list', query) + +export const getLimitSummary = () => sendMsg2Runtime('limit.summary') + +export const deleteLimits = (ids: number[]) => sendMsg2Runtime('limit.delete', ids) + +export const updateLimits = (rules: tt4b.limit.Rule[]) => sendMsg2Runtime('limit.update', rules) + +export const addLimit = (rule: Omit) => sendMsg2Runtime('limit.add', rule) diff --git a/src/api/sw/merge.ts b/src/api/sw/merge.ts new file mode 100644 index 000000000..6e3f06516 --- /dev/null +++ b/src/api/sw/merge.ts @@ -0,0 +1,7 @@ +import { sendMsg2Runtime } from "./common" + +export const listAllMergeRules = () => sendMsg2Runtime('merge.all') + +export const deleteMergeRule = (origin: string) => sendMsg2Runtime('merge.delete', origin) + +export const addMergeRule = (rule: tt4b.merge.Rule) => sendMsg2Runtime('merge.add', rule) \ No newline at end of file diff --git a/src/api/sw/option.ts b/src/api/sw/option.ts new file mode 100644 index 000000000..d8735a45c --- /dev/null +++ b/src/api/sw/option.ts @@ -0,0 +1,14 @@ +import { sendMsg2Runtime } from "@api/sw/common" + +export const getOption = () => sendMsg2Runtime('option.get') + +export const setOption = (option: Partial) => sendMsg2Runtime('option.set', option) + +export const getWeekStartTime = async (now?: number | Date): Promise => { + let nowTs = typeof now === 'number' ? now : now?.getTime() + nowTs = nowTs ?? Date.now() + const startTs = await sendMsg2Runtime('option.weekStartTime', nowTs) + return new Date(startTs) +} + +export const getWeekStartDay = () => sendMsg2Runtime('option.weekStartDay') diff --git a/src/api/sw/period.ts b/src/api/sw/period.ts new file mode 100644 index 000000000..18b55c9d0 --- /dev/null +++ b/src/api/sw/period.ts @@ -0,0 +1,3 @@ +import { sendMsg2Runtime } from './common' + +export const listPeriods = (param: tt4b.period.Query) => sendMsg2Runtime('period.list', param) \ No newline at end of file diff --git a/src/api/sw/site.ts b/src/api/sw/site.ts new file mode 100644 index 000000000..0109e51ae --- /dev/null +++ b/src/api/sw/site.ts @@ -0,0 +1,31 @@ +import { sendMsg2Runtime } from "./common" + +export const listSites = (param?: tt4b.site.Query) => sendMsg2Runtime('site.list', param) + +export function getSitePage(param?: tt4b.site.Query, page?: tt4b.common.PageQuery) { + return sendMsg2Runtime('site.page', { ...param, ...page }) +} + +export const deleteSites = (...keys: tt4b.site.SiteKey[]) => sendMsg2Runtime('site.delete', keys) + +export function changeSitesCate(cateId: number | undefined, ...keys: tt4b.site.SiteKey[]) { + return sendMsg2Runtime('site.changeCate', { keys, cateId }) +} + +export const deleteSiteIcon = (key: tt4b.site.SiteKey) => sendMsg2Runtime('site.deleteIcon', key) + +export async function changeSiteAlias(key: tt4b.site.SiteKey, alias: string | undefined): Promise { + const trimmed = alias?.trim() || undefined + await sendMsg2Runtime('site.changeAlias', { key, alias: trimmed }) + return trimmed +} + +export const fillInitialAlias = (keys: tt4b.site.SiteKey[]) => sendMsg2Runtime('site.fillAlias', keys) + +export const getInitialAlias = (host: string) => sendMsg2Runtime('site.initialAlias', host) + +export function changeSiteRun(key: tt4b.site.SiteKey, enabled: boolean) { + return sendMsg2Runtime('site.changeRun', { key, enabled }) +} + +export const searchSite = (query?: string) => sendMsg2Runtime('site.search', query) diff --git a/src/api/sw/stat.ts b/src/api/sw/stat.ts new file mode 100644 index 000000000..534b02f35 --- /dev/null +++ b/src/api/sw/stat.ts @@ -0,0 +1,31 @@ +import { sendMsg2Runtime } from "./common" + +export const listSiteStats = (param?: tt4b.stat.SiteQuery) => sendMsg2Runtime('stat.sites', param) + +export const getSiteStatPage = (param?: tt4b.stat.SitePageQuery) => sendMsg2Runtime('stat.sitePage', param) + +export function deleteSiteStatByHost(host: string, date?: [string?, string?] | string) { + return sendMsg2Runtime('stat.deleteSite', { host, date }) +} + +export function deleteSiteStatByGroup(groupId: number, date?: [string?, string?] | string) { + return sendMsg2Runtime('stat.deleteSite', { groupId, date }) +} + +export const listCateStats = (param?: tt4b.stat.CateQuery) => sendMsg2Runtime('stat.cates', param) + +export const getCateStatPage = (param?: tt4b.stat.CatePageQuery) => sendMsg2Runtime('stat.catePage', param) + +export const listGroupStats = (param?: tt4b.stat.GroupQuery) => sendMsg2Runtime('stat.groups', param) + +export const getGroupStatPage = (param?: tt4b.stat.GroupPageQuery) => sendMsg2Runtime('stat.groupPage', param) + +export const batchDeleteStats = (targets: tt4b.stat.Row[]) => sendMsg2Runtime('stat.batchDelete', targets) + +export function countGroupStatsByIds(groupIds: number[], date: string | [string?, string?]) { + return sendMsg2Runtime('stat.countGroup', { groupIds, date }) +} + +export function countSiteStatsByHosts(hosts: string[], date: string | [string?, string?]) { + return sendMsg2Runtime('stat.countSite', { host: hosts, date }) +} diff --git a/src/api/sw/whitelist.ts b/src/api/sw/whitelist.ts new file mode 100644 index 000000000..3218b7198 --- /dev/null +++ b/src/api/sw/whitelist.ts @@ -0,0 +1,9 @@ +import { sendMsg2Runtime } from "./common" + +export const listWhitelist = () => sendMsg2Runtime('whitelist.all') + +export const addWhitelist = (white: string) => sendMsg2Runtime('whitelist.add', white) + +export const deleteWhitelist = (white: string) => sendMsg2Runtime('whitelist.delete', white) + +export const saveWhitelist = (whitelist: string[]) => sendMsg2Runtime('whitelist.save', whitelist) \ No newline at end of file diff --git a/src/api/version.ts b/src/api/version.ts deleted file mode 100644 index 5fe826ffc..000000000 --- a/src/api/version.ts +++ /dev/null @@ -1,63 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { BROWSER_NAME } from "@util/constant/environment" -import { fetchGet } from "./http" - -/** - * @since 0.1.8 - */ -type FirefoxDetail = { - current_version: { - // Like 0.1.5 - version: string - } - // Like '2021-06-11T08:45:32Z' - last_updated: string -} - -/** - * @since 0.1.8 - */ -type EdgeDetail = { - // Version like 0.1.5, without 'v' prefix - version: string - // Like '1619432502.5944779' - lastUpdateDate: string -} - -async function getFirefoxVersion(): Promise { - const response = await fetchGet('https://addons.mozilla.org/api/v3/addons/addon/2690100') - const detail: FirefoxDetail = await response.json() - return detail?.current_version?.version -} - -async function getEdgeVersion(): Promise { - const response = await fetchGet('https://microsoftedge.microsoft.com/addons/getproductdetailsbycrxid/fepjgblalcnepokjblgbgmapmlkgfahc') - const detail: EdgeDetail = await response.json() - return detail?.version -} - -async function getChromeVersion(): Promise { - // Get info from shields.io - const response = await fetchGet('https://img.shields.io/chrome-web-store/v/dkdhhcbjijekmneelocdllcldcpmekmm?label=Google%20Chrome') - const data = await response.text() - const pattern = /:\sv(\d+\.\d+\.\d+)/ - const matchResult = pattern.exec(data) - return matchResult?.length === 2 ? matchResult?.[1] : undefined -} - -export function getLatestVersion(): Promise { - if (BROWSER_NAME === 'firefox') { - return getFirefoxVersion() - } else if (BROWSER_NAME === 'chrome') { - return getChromeVersion() - } else if (BROWSER_NAME === 'edge') { - return getEdgeVersion() - } - return Promise.resolve(undefined) -} diff --git a/src/api/web-dav.ts b/src/api/web-dav.ts index 39a4eb240..5d22367fa 100644 --- a/src/api/web-dav.ts +++ b/src/api/web-dav.ts @@ -3,7 +3,7 @@ * * Testing with server implemented by https://github.com/svtslv/webdav-cli */ -import { encode } from 'js-base64' +import { encodeBase64 } from '../util/encode' import { fetchDelete, fetchGet } from './http' // Only support password for now @@ -22,7 +22,7 @@ const authHeaders = (auth: WebDAVAuth): Headers => { const type = auth?.type const headers = new Headers() if (type === 'password') { - headers.set('Authorization', `Basic ${encode(`${auth?.username}:${auth?.password}`)}`) + headers.set('Authorization', `Basic ${encodeBase64(`${auth?.username}:${auth?.password}`)}`) } return headers } @@ -34,7 +34,7 @@ export async function judgeDirExist(context: WebDAVContext, dirPath: string): Pr const method = 'PROPFIND' headers.append('Accept', 'text/plain,application/xml') headers.append('Depth', '1') - const response = await fetch(url, { method, headers }) + const response = await fetch(url, { method, headers, credentials: 'omit' }) const status = response?.status if (status == 207) { return true @@ -49,19 +49,30 @@ export async function judgeDirExist(context: WebDAVContext, dirPath: string): Pr } } -export async function makeDir(context: WebDAVContext, dirPath: string) { +export async function makeDirs(context: WebDAVContext, dirPath: string) { + const normalizedPath = dirPath.startsWith('/') ? dirPath.slice(1) : dirPath + const pathSegments = normalizedPath.split('/').filter(segment => segment.length > 0) + const { auth, endpoint } = context || {} - const url = `${endpoint}/${dirPath}` - const headers = authHeaders(auth) - const response = await fetch(url, { method: 'MKCOL', headers }) - handleWriteResponse(response) + + for (let i = 0; i < pathSegments.length; i++) { + const currentPath = pathSegments.slice(0, i + 1).join('/') + + const exists = await judgeDirExist(context, currentPath) + if (!exists) { + const url = `${endpoint}/${currentPath}` + const headers = authHeaders(auth) + const response = await fetch(url, { method: 'MKCOL', headers, credentials: 'omit' }) + handleWriteResponse(response) + } + } } export async function deleteDir(context: WebDAVContext, dirPath: string) { const { auth, endpoint } = context || {} const url = `${endpoint}/${dirPath}` const headers = authHeaders(auth) - const response = await fetchDelete(url, { headers }) + const response = await fetchDelete(url, { headers, credentials: 'omit' }) const status = response.status if (status === 403) { throw new Error("Unauthorized to delete directory") @@ -76,7 +87,7 @@ export async function writeFile(context: WebDAVContext, filePath: string, conten const headers = authHeaders(auth) headers.set("Content-Type", "application/octet-stream") const url = `${endpoint}/${filePath}` - const response = await fetch(url, { headers, method: 'put', body: content }) + const response = await fetch(url, { headers, method: 'put', body: content, credentials: 'omit' }) handleWriteResponse(response) } @@ -95,7 +106,7 @@ export async function readFile(context: WebDAVContext, filePath: string): Promis const headers = authHeaders(auth) const url = `${endpoint}/${filePath}` try { - const response = await fetchGet(url, { headers }) + const response = await fetchGet(url, { headers, credentials: 'omit' }) const status = response?.status if (status === 200) { return response.text() diff --git a/src/background/browser-action-manager.ts b/src/background/action.ts similarity index 80% rename from src/background/browser-action-manager.ts rename to src/background/action.ts index 12af14126..b183480dc 100644 --- a/src/background/browser-action-manager.ts +++ b/src/background/action.ts @@ -1,21 +1,21 @@ -/** +/** * Copyright (c) 2021-present Hengyang Zhang * * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ +import { APP_OPTION_ROUTE, APP_RECORD_ROUTE } from "@/shared/route" import { onIconClick } from "@api/chrome/action" import { createContextMenu } from "@api/chrome/context-menu" import { getRuntimeId } from "@api/chrome/runtime" import { createTab } from "@api/chrome/tab" import { locale } from "@i18n" import { t2Chrome } from "@i18n/chrome/t" -import { IS_ANDROID, IS_FIREFOX, IS_MV3, IS_SAFARI } from "@util/constant/environment" +import { IS_ANDROID, IS_MV3, IS_SAFARI } from "@util/constant/environment" import { CHANGE_LOG_PAGE, GITHUB_ISSUE_ADD, SOURCE_CODE_PAGE, TU_CAO_PAGE, getAppPageUrl, getGuidePageUrl, } from "@util/constant/url" -import { OPTION_ROUTE, REPORT_ROUTE } from "../pages/app/router/constants" const APP_PAGE_URL = getAppPageUrl() @@ -36,13 +36,6 @@ function titleOf(prefixEmoji: string, title: string) { } } -const sidebarProps: ChromeContextMenuCreateProps = { - id: getRuntimeId() + '_timer_menu_item_sidebar', - title: titleOf('🖱️', t2Chrome(msg => msg.base.sidebar)), - onclick: () => browser.sidebarAction.open(), - ...baseProps, -} - const allFunctionProps: ChromeContextMenuCreateProps = { id: getRuntimeId() + '_timer_menu_item_app_link', title: titleOf('🏷️', t2Chrome(msg => msg.base.allFunction)), @@ -53,7 +46,7 @@ const allFunctionProps: ChromeContextMenuCreateProps = { const optionPageProps: ChromeContextMenuCreateProps = { id: getRuntimeId() + '_timer_menu_item_option_link', title: titleOf('🥰', t2Chrome(msg => msg.base.option)), - onclick: () => createTab(APP_PAGE_URL + '#' + OPTION_ROUTE), + onclick: () => createTab(getAppPageUrl(APP_OPTION_ROUTE)), ...baseProps } @@ -85,9 +78,7 @@ const changeLogProps: ChromeContextMenuCreateProps = { ...baseProps } -function initBrowserAction() { - // Create sidebar item for Firefox - createContextMenu(IS_FIREFOX ? sidebarProps : allFunctionProps) +export function initBrowserAction() { createContextMenu(allFunctionProps) createContextMenu(optionPageProps) createContextMenu(repoPageProps) @@ -97,8 +88,15 @@ function initBrowserAction() { if (IS_ANDROID) { // Forbidden popup page - onIconClick(() => createTab({ url: getAppPageUrl(REPORT_ROUTE) })) + onIconClick(() => createTab({ url: getAppPageUrl(APP_RECORD_ROUTE) })) } } -export default initBrowserAction +export function initSidePanel() { + if (!IS_MV3) return + const sidePanel = chrome.sidePanel + // sidePanel not supported for Firefox + // Avoid `chrome.sidePanel.setOptions` to skip web-ext lint + if (!sidePanel?.setOptions) return + sidePanel.setOptions({ path: "/static/side.html" }) +} diff --git a/src/background/active-tab-listener.ts b/src/background/active-tab-listener.ts deleted file mode 100644 index 6d5fd3ce0..000000000 --- a/src/background/active-tab-listener.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { getTab, onTabActivated } from "@api/chrome/tab" -import { extractHostname, type HostInfo } from "@util/pattern" - -type _Param = { - url: string - tabId: number - host?: string -} - -type _Handler = (params: _Param) => void - -export default class ActiveTabListener { - listener: _Handler[] = [] - - private async processWithTabInfo({ url, id }: ChromeTab) { - if (!url || !id) return - const hostInfo: HostInfo = extractHostname(url) - const host: string = hostInfo.host - const param: _Param = { url, tabId: id, host } - this.listener.forEach(func => func(param)) - } - - register(handler: _Handler): ActiveTabListener { - this.listener.push(handler) - return this - } - - listen() { - onTabActivated(async tabId => { - const tab = await getTab(tabId) - tab && this.processWithTabInfo(tab) - }) - } -} - diff --git a/src/background/alarm-manager.ts b/src/background/alarm-manager.ts index 62cb2d74c..7dd45cf8c 100644 --- a/src/background/alarm-manager.ts +++ b/src/background/alarm-manager.ts @@ -1,10 +1,10 @@ -import { clearAlarm, createAlarm, onAlarm } from "@api/chrome/alarm" +import { clearAlarm, createAlarm, getAlarm, onAlarm } from "@api/chrome/alarm" import { getRuntimeId } from "@api/chrome/runtime" type _AlarmConfig = { handler: _Handler, interval?: number, - when?: () => number, + when?: () => number | null, } type _Handler = (alarm: ChromeAlarm) => void @@ -15,7 +15,7 @@ const ALARM_PREFIX_LENGTH = ALARM_PREFIX.length const getInnerName = (outerName: string) => ALARM_PREFIX + outerName const getOuterName = (innerName: string) => innerName.substring(ALARM_PREFIX_LENGTH) -const calcNextTs = (config: _AlarmConfig): number => { +const calcNextTs = (config: _AlarmConfig): number | null => { const { interval, when } = config if (interval) return Date.now() + interval if (when) return when() @@ -42,29 +42,28 @@ class AlarmManager { return } const innerName = getOuterName(name) - const config: _AlarmConfig = this.alarms[innerName] - if (!config) { - // Not registered, or removed - return - } + const config = this.alarms[innerName] + if (!config) return // Handle alarm event try { - config.handler?.(alarm) + config.handler(alarm) } catch (e) { console.info("Failed to handle alarm event", e) } finally { - const nextTs = calcNextTs(config) // Clear this one await clearAlarm(name) - createAlarm(name, nextTs) + const nextTs = calcNextTs(config) + nextTs && await createAlarm(name, nextTs) } }) } /** * Set a alarm to do sth with interval + * + * @param interval mills */ - setInterval(outerName: string, interval: number, handler: _Handler): void { + async setInterval(outerName: string, interval: number, handler: _Handler): Promise { if (!interval || !handler) { return } @@ -77,13 +76,13 @@ class AlarmManager { // Initialize config this.alarms[outerName] = config // Create new one alarm - createAlarm(getInnerName(outerName), Date.now() + interval) + await createAlarm(getInnerName(outerName), Date.now() + interval) } /** * Set a alarm to do sth if the time arrives */ - setWhen(outerName: string, when: () => number, handler: _Handler): void { + async setWhen(outerName: string, when: () => number | null, handler: _Handler): Promise { if (!when || !handler) { return } @@ -96,15 +95,28 @@ class AlarmManager { // Initialize config this.alarms[outerName] = config // Create new one alarm - createAlarm(getInnerName(outerName), when()) + const next = calcNextTs(config) + next && await createAlarm(getInnerName(outerName), next) } /** * Remove a interval */ - remove(outerName: string) { + async remove(outerName: string): Promise { delete this.alarms[outerName] - clearAlarm(getInnerName(outerName)) + await clearAlarm(getInnerName(outerName)) + } + + /** + * Judge if exist + */ + async getAlarm(outerName: string): Promise { + const innerName = getInnerName(outerName) + const existed = await getAlarm(innerName) + if (!existed && this.alarms[outerName]) { + delete this.alarms[outerName] + } + return existed } } diff --git a/src/background/backup-scheduler.ts b/src/background/backup-scheduler.ts deleted file mode 100644 index 7dc55a9ed..000000000 --- a/src/background/backup-scheduler.ts +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import processor from "@service/backup/processor" -import optionHolder from "@service/components/option-holder" -import { MILL_PER_MINUTE } from "@util/time" -import alarmManager from "./alarm-manager" - -const ALARM_NAME = 'auto-backup-data' - -class BackupScheduler { - needBackup = false - /** - * Interval of milliseconds - */ - interval: number = 0 - - init() { - optionHolder.get().then(opt => this.handleOption(opt)) - optionHolder.addChangeListener(opt => this.handleOption(opt)) - } - - private handleOption(option: timer.option.BackupOption) { - const { autoBackUp, backupType, autoBackUpInterval = 0 } = option || {} - this.needBackup = backupType !== "none" && !!backupType && !!autoBackUp - this.interval = autoBackUpInterval * MILL_PER_MINUTE - if (this.needSchedule()) { - alarmManager.setInterval(ALARM_NAME, this.interval, () => this.doBackup()) - } else { - alarmManager.remove(ALARM_NAME) - } - } - - private needSchedule(): boolean { - return !!this.needBackup && !!this.interval - } - - private async doBackup(): Promise { - const result = await processor.syncData() - if (!result.success) { - console.warn(`Failed to backup ts=${Date.now()}, msg=${result.errorMsg}`) - } - } -} - -export default BackupScheduler \ No newline at end of file diff --git a/src/background/badge-manager.ts b/src/background/badge-manager.ts index b1da2cb06..f39ccab17 100644 --- a/src/background/badge-manager.ts +++ b/src/background/badge-manager.ts @@ -6,17 +6,17 @@ */ import { setBadgeBgColor, setBadgeText } from "@api/chrome/action" -import { listTabs } from "@api/chrome/tab" -import { getFocusedNormalWindow } from "@api/chrome/window" -import statDatabase from "@db/stat-database" -import optionHolder from "@service/components/option-holder" -import whitelistHolder from "@service/whitelist/holder" +import { listTabs, onTabUpdated } from "@api/chrome/tab" +import { getLastFocusedId, isNoneWindowId, onWindowFocusChanged } from "@api/chrome/window" import { IS_ANDROID } from "@util/constant/environment" import { extractHostname, isBrowserUrl } from "@util/pattern" import { MILL_PER_HOUR, MILL_PER_MINUTE, MILL_PER_SECOND } from "@util/time" -import MessageDispatcher from "./message-dispatcher" +import statDatabase from "./database/stat-database" +import type MessageDispatcher from './message-dispatcher' +import optionHolder from "./service/components/option-holder" +import whitelistHolder from "./service/whitelist/holder" -export type BadgeLocation = { +type BadgeLocation = { /** * The tab id of badge text show display with */ @@ -25,7 +25,6 @@ export type BadgeLocation = { * The url of tab */ url: string - focus?: number } function mill2Str(milliseconds: number) { @@ -36,23 +35,16 @@ function mill2Str(milliseconds: number) { // no more than 1 hour return `${Math.round(milliseconds / MILL_PER_MINUTE)}m` } else { - return `${(milliseconds / MILL_PER_HOUR).toFixed(1)}h` + const hours = milliseconds / MILL_PER_HOUR + return hours < 10 ? `${hours.toFixed(1)}h` : `${Math.round(hours)}h` } } -function setBadgeTextOfMills(milliseconds: number | undefined, tabId: number | undefined) { - const text = milliseconds === undefined ? '' : mill2Str(milliseconds) - setBadgeText(text, tabId) -} - -async function findActiveTab(): Promise { - const window = await getFocusedNormalWindow() - if (!window) { - return undefined - } - const tabs = await listTabs({ active: true, windowId: window.id }) - // Fix #131 - // Edge will return two active tabs, including the new tab with url 'edge://newtab/', GG +async function findActiveTab(windowId?: number): Promise { + windowId ??= await getLastFocusedId() + if (isNoneWindowId(windowId)) return undefined + const tabs = await listTabs({ windowId, active: true }) + // Fix #131 — Edge can return two active tabs (e.g. edge://newtab/). for (const { id: tabId, url } of tabs) { if (!tabId || !url || isBrowserUrl(url)) continue return { tabId, url } @@ -63,106 +55,89 @@ async function findActiveTab(): Promise { async function clearAllBadge(): Promise { const tabs = await listTabs() if (!tabs?.length) return - for (const tab of tabs) { - await setBadgeText('', tab?.id) - } -} - -type BadgeState = 'HIDDEN' | 'NOT_SUPPORTED' | 'PAUSED' | 'TIME' | 'WHITELIST' - -interface BadgeManager { - init(dispatcher: MessageDispatcher): void - updateFocus(location?: BadgeLocation): void + for (const { id } of tabs) id != null && await setBadgeText('', id) } -class DefaultBadgeManager { - pausedTabId: number | undefined - current: BadgeLocation | undefined - visible: boolean | undefined - state: BadgeState | undefined +class BadgeManager { + #pausedTabId: number | undefined + #current: BadgeLocation | undefined + #visible = false + #countLocalFiles = false async init(messageDispatcher: MessageDispatcher) { + if (IS_ANDROID) return // do nothing on Android, since badge text is not supported + const option = await optionHolder.get() - this.processOption(option) + await this.processOption(option) optionHolder.addChangeListener(opt => this.processOption(opt)) whitelistHolder.addPostHandler(() => this.render()) - messageDispatcher - .register('cs.idleChange', (isIdle, sender) => { - const tabId = sender?.tab?.id - isIdle ? this.pause(tabId) : this.resume(tabId) - }) - this.updateFocus() + messageDispatcher.register('cs.idleChanged', (isIdle, sender) => { + const tabId = sender?.tab?.id + void (isIdle ? this.pause(tabId) : this.resume(tabId)) + }) + onWindowFocusChanged(async windowId => { + this.#current = await findActiveTab(windowId) + await this.render() + }) + onTabUpdated(async (tabId, { url }, { active }) => { + if (!active || !url) return + this.#current = { tabId, url } + await this.render() + }) + await this.updateFocus() } - /** - * Hide the badge text - */ private async pause(tabId?: number) { - this.pausedTabId = tabId - this.render() + if (typeof tabId !== 'number') return + this.#pausedTabId = tabId + await this.render() } - /** - * Show the badge text - */ - private resume(tabId?: number) { - if (!this.pausedTabId || this.pausedTabId !== tabId) return - this.pausedTabId = undefined - this.render() + private async resume(tabId?: number) { + if (typeof this.#pausedTabId !== 'number') return + if (typeof tabId !== 'number' || this.#pausedTabId !== tabId) return + this.#pausedTabId = undefined + await this.render() } async updateFocus(target?: BadgeLocation) { - this.current = target || await findActiveTab() + this.#current = target ?? await findActiveTab() await this.render() } - private processOption(option: timer.option.AppearanceOption) { - const { displayBadgeText, badgeBgColor } = option || {} - const before = this.visible - this.visible = !!displayBadgeText - !this.visible && before && clearAllBadge() - setBadgeBgColor(badgeBgColor) - } + private async processOption(option: tt4b.option.DefaultOption) { + const { displayBadgeText, badgeBgColor, countLocalFiles } = option - private async render(): Promise { - this.state = await this.processState() - } + const changed = this.#visible !== displayBadgeText || this.#countLocalFiles !== countLocalFiles + this.#countLocalFiles = countLocalFiles + this.#visible = displayBadgeText - private async processState(): Promise { - const { url, tabId, focus } = this.current || {} - if (!this.visible || !url) { - this.state !== 'HIDDEN' && setBadgeText('', tabId) - return 'HIDDEN' - } - if (isBrowserUrl(url)) { - this.state !== 'NOT_SUPPORTED' && setBadgeText('∅', tabId) - return 'NOT_SUPPORTED' + if (!this.#visible) { + await clearAllBadge() + } else { + await setBadgeBgColor(badgeBgColor) + if (changed) await this.render() } - const host = extractHostname(url)?.host - if (whitelistHolder.contains(host, url)) { - this.state !== 'WHITELIST' && setBadgeText('W', tabId) - return 'WHITELIST' - } - if (this.pausedTabId === tabId) { - this.state !== 'PAUSED' && setBadgeText('P', tabId) - return 'PAUSED' - } - const milliseconds = focus || (host ? (await statDatabase.get(host, new Date())).focus : undefined) - setBadgeTextOfMills(milliseconds, tabId) - return 'TIME' } -} -class SilentBadgeManager implements BadgeManager { - init(_dispatcher: MessageDispatcher): void { - // do nothing + private async render(): Promise { + const badgeText = await this.resolveBadgeText() + await setBadgeText(badgeText, this.#current?.tabId) } - updateFocus(_location?: BadgeLocation): void { - // do nothing + + private async resolveBadgeText(): Promise { + if (!this.#current || !this.#visible) return '' + const { url, tabId } = this.#current + if (isBrowserUrl(url)) return '∅' + const { host, protocol } = extractHostname(url) + if (protocol === 'file' && !this.#countLocalFiles) return '∅' + if (whitelistHolder.contains(host, url)) return 'W' + if (this.#pausedTabId === tabId) return 'P' + const { focus } = await statDatabase.get(host, new Date()) + return mill2Str(focus) } } -// Don't display badge on Android -const badgeManager: BadgeManager = IS_ANDROID ? new SilentBadgeManager() : new DefaultBadgeManager() +const badgeManager = new BadgeManager() export default badgeManager diff --git a/src/background/content-script-handler.ts b/src/background/content-script-handler.ts index d31277ac3..3ad13fe4c 100644 --- a/src/background/content-script-handler.ts +++ b/src/background/content-script-handler.ts @@ -5,46 +5,60 @@ * https://opensource.org/licenses/MIT */ -import { executeScript } from "@api/chrome/script" -import { createTab } from "@api/chrome/tab" -import { ANALYSIS_ROUTE, LIMIT_ROUTE } from "@app/router/constants" -import optionHolder from "@service/components/option-holder" -import limitService from "@service/limit-service" -import siteService from "@service/site-service" -import { saveTimelineEvent } from '@service/timeline-service' -import whitelistHolder from "@service/whitelist/holder" -import { getAppPageUrl } from "@util/constant/url" -import { extractFileHost, extractHostname } from "@util/pattern" +import { IS_ANDROID, IS_CHROME, IS_SAFARI } from "@util/constant/environment" +import { extractHostname, isBrowserUrl, isHomepage } from "@util/pattern" +import { extractSiteName } from "@util/site" import badgeManager from "./badge-manager" -import { collectIconAndAlias } from "./icon-and-alias-collector" import MessageDispatcher from "./message-dispatcher" +import { saveAlias, saveIconUrl } from "./service/site-service" +import { incVisitCount } from './track-server/normal' -const handleOpenAnalysisPage = (sender: ChromeMessageSender) => { - const { tab, url } = sender || {} - if (!url) return - const host = extractFileHost(url) || extractHostname(url)?.host - const newTabUrl = getAppPageUrl(ANALYSIS_ROUTE, { host }) +function isUrl(title: string) { + return title.startsWith('https://') || title.startsWith('http://') || title.startsWith('ftp://') +} - const tabIndex = tab?.index - const newTabIndex = tabIndex ? tabIndex + 1 : undefined - createTab({ url: newTabUrl, index: newTabIndex }) +async function collectAlias(key: tt4b.site.SiteKey, tabTitle: string) { + if (!tabTitle) return + if (isUrl(tabTitle)) return + const siteName = extractSiteName(tabTitle, key.host) + siteName && await saveAlias(key, siteName, true) } -const handleOpenLimitPage = (sender: ChromeMessageSender) => { - const { tab, url } = sender || {} - if (!url) return - const newTabUrl = getAppPageUrl(LIMIT_ROUTE, { url }) - const tabIndex = tab?.index - const newTabIndex = tabIndex ? tabIndex + 1 : undefined - createTab({ url: newTabUrl, index: newTabIndex }) +/** + * Process the tab + */ +async function processTabInfo(tab: ChromeTab): Promise { + let { favIconUrl, url, title } = tab + if (!url || !title) return + if (isBrowserUrl(url)) return + const hostInfo = extractHostname(url) + const host = hostInfo.host + if (!host) return + // localhost hosts with Chrome use cache, so keep the favIcon url undefined + IS_CHROME && /^localhost(:.+)?/.test(host) && (favIconUrl = undefined) + const siteKey: tt4b.site.SiteKey = { host, type: 'normal' } + favIconUrl && await saveIconUrl(siteKey, favIconUrl) + !IS_ANDROID + && !isBrowserUrl(url) + && isHomepage(url) + && await collectAlias(siteKey, title) +} + +/** + * Collect the favicon of host + */ +const collectIconAndAlias = async (tab: ChromeTab) => { + if (IS_SAFARI || IS_ANDROID) return + processTabInfo(tab) } const handleInjected = async (sender: ChromeMessageSender) => { - const tabId = sender?.tab?.id - if (!tabId) return - collectIconAndAlias(tabId) - badgeManager.updateFocus() - executeScript(tabId, ['content_scripts.js']) + const { tab, url } = sender + if (!tab) return + await incVisitCount(tab) + await collectIconAndAlias(tab) + const tabId = tab.id + await badgeManager.updateFocus(tabId && url ? { tabId, url } : undefined) } /** @@ -54,25 +68,7 @@ const handleInjected = async (sender: ChromeMessageSender) => { */ export default function init(dispatcher: MessageDispatcher) { dispatcher - // Judge is in whitelist - .register<{ host?: string, url?: string }, boolean>('cs.isInWhitelist', ({ host, url } = {}) => !!host && !!url && whitelistHolder.contains(host, url)) - // Need to print the information of today - .register('cs.printTodayInfo', async () => { - const option = await optionHolder.get() - return !!option.printInConsole - }) - .register('cs.getLimitedRules', url => limitService.getLimited(url)) - .register('cs.getRelatedRules', url => limitService.getRelated(url)) - .register('cs.openAnalysis', (_, sender) => handleOpenAnalysisPage(sender)) - .register('cs.openLimit', (_, sender) => handleOpenLimitPage(sender)) - .register('cs.onInjected', async (_, sender) => handleInjected(sender)) + .register('cs.injected', (_, sender) => handleInjected(sender)) // Get sites which need to count run time - .register('cs.getRunSites', async url => { - const { host } = extractHostname(url) || {} - if (!host) return null - const site: timer.site.SiteKey = { host, type: 'normal' } - const exist = await siteService.get(site) - return exist?.run ? site : null - }) - .register('cs.timelineEv', ev => saveTimelineEvent(ev)) + .register('cs.getAudible', async (_, sender) => !!sender.tab?.audible) } \ No newline at end of file diff --git a/src/background/data-cleaner.ts b/src/background/data-cleaner.ts index 32d6dbf01..18e4f49e7 100644 --- a/src/background/data-cleaner.ts +++ b/src/background/data-cleaner.ts @@ -1,22 +1,21 @@ -import periodService, { type PeriodQueryParam } from "@service/period-service" import { keyOf } from "@util/period" import { getBirthday, getStartOfDay, MILL_PER_DAY } from "@util/time" import alarmManager from "./alarm-manager" +import { batchDeletePeriods } from "./service/period-service" const PERIOD_ALARM_NAME = 'period-cleaner-alarm' const START_DAY = keyOf(getBirthday()) const KEEP_RANGE_DAYS = 366 const cleanPeriodData = async () => { - const endDate = new Date().getTime() - MILL_PER_DAY * KEEP_RANGE_DAYS - const param: PeriodQueryParam = { periodRange: [START_DAY, keyOf(endDate)] } - await periodService.batchDeleteBetween(param) + const endDate = Date.now() - MILL_PER_DAY * KEEP_RANGE_DAYS + await batchDeletePeriods(START_DAY, keyOf(endDate)) } export default function initDataCleaner() { alarmManager.setWhen( PERIOD_ALARM_NAME, - () => getStartOfDay(new Date()).getTime() + MILL_PER_DAY, + () => getStartOfDay(new Date()) + MILL_PER_DAY, cleanPeriodData, ) } \ No newline at end of file diff --git a/src/background/database/backup-database.ts b/src/background/database/backup-database.ts new file mode 100644 index 000000000..c0129cd5e --- /dev/null +++ b/src/background/database/backup-database.ts @@ -0,0 +1,31 @@ +/** + * Copyright (c) 2022 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import BaseDatabase from "./common/base-database" +import { REMAIN_WORD_PREFIX } from "./common/constant" + +const PREFIX = REMAIN_WORD_PREFIX + "backup" +const CACHE_KEY = PREFIX + "_cache" + +function cacheKeyOf(type: tt4b.backup.Type) { + return CACHE_KEY + "_" + type +} + +class BackupDatabase extends BaseDatabase { + + async getCache(type: tt4b.backup.Type): Promise { + return (await this.storage.getOne(cacheKeyOf(type))) || {} + } + + async updateCache(type: tt4b.backup.Type, newVal: unknown): Promise { + return this.storage.put(cacheKeyOf(type), newVal as Object) + } +} + +const backupDatabase = new BackupDatabase() + +export default backupDatabase \ No newline at end of file diff --git a/src/database/site-cate-database.ts b/src/background/database/cate-database.ts similarity index 60% rename from src/database/site-cate-database.ts rename to src/background/database/cate-database.ts index feb063b00..da866003d 100644 --- a/src/database/site-cate-database.ts +++ b/src/background/database/cate-database.ts @@ -19,26 +19,13 @@ type Item = { type Items = Record -function migrate(exist: Items, toMigrate: any) { - let idBase = Object.keys(exist).map(parseInt).sort().reverse()?.[0] ?? 0 + 1 - const existLabels = new Set(Object.values(exist).map(e => e.n)) - - Object.values(toMigrate).forEach(value => { - const { n } = (value as Item) || {} - if (!n || existLabels.has(n)) return - - const id = idBase - idBase++ - exist[id] = { n } - }) -} - /** - * Site tag + * Category * * @since 3.0.0 */ -class SiteCateDatabase extends BaseDatabase { +class CateDatabase extends BaseDatabase { + private async getItems(): Promise { return await this.storage.getOne(KEY) || {} } @@ -47,17 +34,17 @@ class SiteCateDatabase extends BaseDatabase { await this.storage.put(KEY, items || {}) } - async listAll(): Promise { + async listAll(): Promise { const items = await this.getItems() return Object.entries(items).map(([id, { n = '' } = {}]) => { return { id: parseInt(id), name: n, - } satisfies timer.site.Cate + } satisfies tt4b.site.Cate }) } - async add(name: string): Promise { + async add(name: string): Promise { const items = await this.getItems() const existId = Object.entries(items).find(([_, v]) => v.n === name)?.[0] if (existId) { @@ -65,8 +52,9 @@ class SiteCateDatabase extends BaseDatabase { return { id: parseInt(existId), name } } - const id = (Object.keys(items || {}).map(k => parseInt(k)).sort().reverse()?.[0] ?? 0) + 1 - items[id] = { n: name || items[id]?.n } + const ids = Object.keys(items).map(Number).filter(Number.isFinite) + const id = (ids.length ? Math.max(...ids) : 0) + 1 + items[id] = {n: name} await this.saveItems(items) return { name, id } @@ -86,15 +74,6 @@ class SiteCateDatabase extends BaseDatabase { await this.saveItems(items) } - async importData(data: any): Promise { - let toImport = data[KEY] as Items - // Not import - if (typeof toImport !== 'object') return - const exists: Items = await this.getItems() - migrate(exists, toImport) - this.setByKey(KEY, exists) - } - async delete(id: number): Promise { const items = await this.getItems() @@ -104,6 +83,6 @@ class SiteCateDatabase extends BaseDatabase { } } -const siteCateDatabase = new SiteCateDatabase() +const cateDatabase = new CateDatabase() -export default siteCateDatabase \ No newline at end of file +export default cateDatabase \ No newline at end of file diff --git a/src/database/common/base-database.ts b/src/background/database/common/base-database.ts similarity index 80% rename from src/database/common/base-database.ts rename to src/background/database/common/base-database.ts index 0137adc43..2c00a4e19 100644 --- a/src/database/common/base-database.ts +++ b/src/background/database/common/base-database.ts @@ -24,12 +24,4 @@ export default abstract class BaseDatabase { protected setByKey(key: string, val: any): Promise { return this.storage.put(key, val) } - - /** - * Import data - * - * @since 0.2.5 - * @param data backup data - */ - abstract importData(data: any): Promise } \ No newline at end of file diff --git a/src/database/common/constant.ts b/src/background/database/common/constant.ts similarity index 100% rename from src/database/common/constant.ts rename to src/background/database/common/constant.ts diff --git a/src/background/database/common/indexed-storage.ts b/src/background/database/common/indexed-storage.ts new file mode 100644 index 000000000..fdc2148c6 --- /dev/null +++ b/src/background/database/common/indexed-storage.ts @@ -0,0 +1,324 @@ +const ALL_TABLES = ['stat', 'timeline'] as const + +export type Table = typeof ALL_TABLES[number] + +export type Key> = keyof T & string + +type IndexConfig> = { + key: Key | Key[] + unique?: boolean +} + +export type Index> = Key | Key[] | IndexConfig + +function normalizeIndex>(index: Index): IndexConfig { + return typeof index === 'string' || Array.isArray(index) ? { key: index } : index +} + +function formatIdxName>(key: IndexConfig['key']): string { + const keyStr = Array.isArray(key) ? [...key].sort().join('_') : key + return `idx_${keyStr}` +} + +export function req2Promise(req: IDBRequest): Promise { + return new Promise((resolve, reject) => { + req.onsuccess = () => resolve(req.result) + req.onerror = (ev) => { + console.error("Failed to request indexed-db", ev, req.error) + reject(req.error) + } + }) +} + +export async function iterateCursor( + req: IDBRequest +): Promise +export async function iterateCursor( + req: IDBRequest, + processor: (cursor: IDBCursorWithValue) => void | Promise +): Promise + +export async function iterateCursor( + req: IDBRequest, + processor?: (cursor: IDBCursorWithValue) => void | Promise +): Promise { + const collectResults = !processor + const results: T[] = [] + + return new Promise((resolve, reject) => { + req.onsuccess = async () => { + const cursor = req.result + if (!cursor) return resolve(collectResults ? results : undefined) + + try { + collectResults && results.push(cursor.value as T) + await processor?.(cursor) + cursor.continue() + } catch (error) { + reject(error) + } + } + + req.onerror = () => reject(req.error) + }) +} + +type TransactionError = 'Connection' | 'StoreNotFound' | 'DataError' | 'Unknown' + +const detectTransactionError = (err: unknown): TransactionError => { + if (!(err instanceof DOMException)) { + console.warn("Non-DOMException error during transaction", err) + return 'Unknown' + } + const { name } = err + switch (name) { + case 'InvalidStateError': + case 'AbortError': return 'Connection' + case 'NotFoundError': return 'StoreNotFound' + case 'DataError': return 'DataError' + default: + console.warn(`Unknown dom exception: name=${name}`) + return 'Unknown' + } +} + +export function closedRangeKey(lower: IDBValidKey | undefined, upper: IDBValidKey | undefined): IDBKeyRange | undefined { + if (lower !== undefined && upper !== undefined) { + if (lower > upper) { + [lower, upper] = [upper, lower] + } + return IDBKeyRange.bound(lower, upper, false, false) + } else if (lower !== undefined) { + return IDBKeyRange.lowerBound(lower, false) + } else if (upper !== undefined) { + return IDBKeyRange.upperBound(upper, false) + } else { + return undefined + } +} + +export type IndexResult = { + cursorReq: IDBRequest + coverage?: FilterCoverage +} + +export abstract class BaseIDBStorage> { + #DB_NAME = `tt4b_${chrome.runtime.id}` as const + #db: IDBDatabase | undefined + static #initPromises = new Map>() + + abstract indexes: Index[] + abstract key: Key | Key[] + abstract table: Table + + protected async initDb(): Promise { + if (this.#db) return this.#db + + let initPromise = BaseIDBStorage.#initPromises.get(this.table) + if (!initPromise) { + initPromise = this.#doInitDb() + BaseIDBStorage.#initPromises.set(this.table, initPromise) + } + + try { + this.#db = await initPromise + this.#setupDbCloseHandler(this.#db) + return this.#db + } catch (error) { + BaseIDBStorage.#initPromises.delete(this.table) + throw error + } + } + + #setupDbCloseHandler(db: IDBDatabase): void { + db.onversionchange = () => db.close() + + db.onclose = () => { + if (this.#db !== db) return + + this.#db = undefined + BaseIDBStorage.#initPromises.delete(this.table) + } + } + + async #doInitDb(): Promise { + const factory = typeof window !== 'undefined' ? window.indexedDB : globalThis.indexedDB + + return new Promise((resolve, reject) => { + const checkRequest = factory.open(this.#DB_NAME) + checkRequest.onsuccess = () => resolve(checkRequest.result) + checkRequest.onerror = () => reject(checkRequest.error || new Error("Failed to open database")) + }) + } + + // Only used for testing, be careful when using in production + async clear(): Promise { + await this.withStore(store => store.clear(), 'readwrite') + } + + async upgrade(): Promise { + const factory = typeof window !== 'undefined' ? window.indexedDB : globalThis.indexedDB + + const checkDb = await new Promise((resolve, reject) => { + const checkRequest = factory.open(this.#DB_NAME) + checkRequest.onsuccess = () => resolve(checkRequest.result) + checkRequest.onerror = () => reject(checkRequest.error || new Error("Failed to open database")) + checkRequest.onblocked = () => { + console.warn(`Database check blocked for "${this.table}" (DB: ${this.#DB_NAME}), waiting for other connections to close`) + } + }) + + const storeExisted = checkDb.objectStoreNames.contains(this.table) + const needUpgrade = !storeExisted || this.#needUpgradeIndexes(checkDb) + + if (!needUpgrade) { + checkDb.close() + return + } + + const currentVersion = checkDb.version + checkDb.close() + + return new Promise((resolve, reject) => { + const upgradeRequest = factory.open(this.#DB_NAME, currentVersion + 1) + + upgradeRequest.onupgradeneeded = () => { + try { + const upgradeDb = upgradeRequest.result + const transaction = upgradeRequest.transaction + if (!transaction) { + reject(new Error("Failed to get transaction of upgrading request")) + return + } + + transaction.onerror = () => { + reject(transaction.error || new Error("Transaction failed")) + } + + transaction.onabort = () => { + reject(new Error("Upgrade transaction was aborted")) + } + + let store = upgradeDb.objectStoreNames.contains(this.table) + ? transaction.objectStore(this.table) + : upgradeDb.createObjectStore(this.table, { keyPath: this.key as string | string[] }) + this.#createIndexes(store) + } catch (error) { + console.error("Failed to upgrade database in onupgradeneeded", error) + upgradeRequest.transaction?.abort() + reject(error instanceof Error ? error : new Error(String(error))) + } + } + + upgradeRequest.onsuccess = () => { + console.log(`IndexedDB upgraded for table "${this.table}"`) + upgradeRequest.result.close() + resolve() + } + + upgradeRequest.onerror = (event) => { + console.error("Failed to upgrade database", event, upgradeRequest.error) + reject(upgradeRequest.error || new Error("Failed to upgrade database")) + } + + upgradeRequest.onblocked = () => { + const blockingTables = Array.from(BaseIDBStorage.#initPromises.keys()) + .filter(table => table !== this.table) + console.warn( + `Database upgrade blocked for table "${this.table}" (DB: ${this.#DB_NAME}), ` + + `waiting for other connections to close. ` + + `Other tables with active connections: ${blockingTables.length > 0 ? blockingTables.join(', ') : 'none'}` + ) + } + }) + } + + #needUpgradeIndexes(db: IDBDatabase): boolean { + try { + const transaction = db.transaction(this.table, 'readonly') + const store = transaction.objectStore(this.table) + const indexNames = store.indexNames + + for (const index of this.indexes) { + const { key } = normalizeIndex(index) + const idxName = formatIdxName(key) + if (!indexNames.contains(idxName)) { + return true + } + } + return false + } catch (e) { + console.error("Failed to check indexes", e) + return true + } + } + + #createIndexes(store: IDBObjectStore) { + const existingIndexes = store.indexNames + + for (const index of this.indexes) { + const { key, unique } = normalizeIndex(index) + const idxName = formatIdxName(key) + if (!existingIndexes.contains(idxName)) { + store.createIndex(idxName, key, { unique }) + } + } + } + + protected async withStore(operation: (store: IDBObjectStore) => Awaitable, mode?: IDBTransactionMode): Promise { + let db = await this.initDb() + + for (let retryCount = 0; retryCount < 2; retryCount++) { + let trans: IDBTransaction | undefined + try { + trans = db.transaction(this.table, mode ?? 'readwrite') + const store = trans.objectStore(this.table) + const result = await operation(store) + const transaction = trans + await new Promise((resolve, reject) => { + transaction.oncomplete = () => resolve() + transaction.onerror = () => reject(transaction.error) + transaction.onabort = () => reject(new Error('Transaction aborted')) + }) + return result + } catch (e) { + const errorType = detectTransactionError(e) + + if (errorType === 'Unknown') { + console.error("Failed to process with transaction", e) + if (trans && !trans.error && trans.mode !== 'readonly') { + try { + trans.abort() + } catch (ignored) { } + } + throw e + } + + if (errorType === 'StoreNotFound') { + this.#db?.close() + await this.upgrade() + } + + this.#db = undefined + BaseIDBStorage.#initPromises.delete(this.table) + db = await this.initDb() + } + } + throw new Error("Max retries exceeded") + } + + protected assertIndex(store: IDBObjectStore, key: Key | Key[]): IDBIndex { + const idxName = formatIdxName(key) + try { + return store.index(idxName) + } catch (err) { + console.error(`Failed to query index: table=${this.table}`, err) + throw err + } + } + + protected assertIndexCursor(store: IDBObjectStore, key: Key | Key[], range: IDBKeyRange): IDBRequest { + const index = this.assertIndex(store, key) + return index.openCursor(range) + } +} diff --git a/src/background/database/common/migratable.ts b/src/background/database/common/migratable.ts new file mode 100644 index 000000000..323b9be49 --- /dev/null +++ b/src/background/database/common/migratable.ts @@ -0,0 +1,29 @@ +import { isRecord } from '@util/guard' +import { createObjectGuard, isInt, isString, TypeGuard } from 'typescript-guard' +import type { BrowserMigratableNamespace } from '../types' + +export const isExportData = createObjectGuard>({ + __meta__: createObjectGuard({ + version: isString, + ts: isInt, + }), +}) + +export const isLegacyVersion = (data: unknown): data is tt4b.backup.ExportData => { + if (!isExportData(data)) return false + + const version = data.__meta__.version + const match = version.match(/^(\d+)\.(\d+)\.(\d+)/) + const majorStr = match?.[1] + if (!majorStr) return true + const major = parseInt(majorStr) + + return major < 4 +} + +export const extractNamespace = (data: unknown, namespace: BrowserMigratableNamespace, guard: TypeGuard): T | undefined => { + if (!isRecord(data)) return undefined + if (!(namespace in data)) return undefined + const nsData = data[namespace] + return guard(nsData) ? nsData : undefined +} \ No newline at end of file diff --git a/src/background/database/common/storage-holder.ts b/src/background/database/common/storage-holder.ts new file mode 100644 index 000000000..fdc2194c1 --- /dev/null +++ b/src/background/database/common/storage-holder.ts @@ -0,0 +1,22 @@ +import optionHolder from '@service/components/option-holder' + +export class StorageHolder { + current: Database + delegates: Record + + constructor(delegates: Record) { + this.delegates = delegates + this.current = delegates.classic + optionHolder.get().then(val => this.handleOption(val)) + optionHolder.addChangeListener(val => this.handleOption(val)) + } + + private handleOption(option: tt4b.option.TrackingOption) { + const delegate = this.delegates[option.storage] + delegate && (this.current = delegate) + } + + get(type: tt4b.option.StorageType): Database | null { + return this.delegates[type] ?? null + } +} \ No newline at end of file diff --git a/src/database/common/storage-promise.ts b/src/background/database/common/storage-promise.ts similarity index 96% rename from src/database/common/storage-promise.ts rename to src/background/database/common/storage-promise.ts index 91c8d9c5a..14c47dc97 100644 --- a/src/database/common/storage-promise.ts +++ b/src/background/database/common/storage-promise.ts @@ -44,7 +44,7 @@ export default class StoragePromise { /** * @since 0.5.0 */ - put(key: string, val: Object): Promise { + put(key: string, val: unknown): Promise { return this.set({ [key]: val }) } diff --git a/src/database/limit-database.ts b/src/background/database/limit-database.ts similarity index 57% rename from src/database/limit-database.ts rename to src/background/database/limit-database.ts index f8327bd3e..9ca91d0ce 100644 --- a/src/database/limit-database.ts +++ b/src/background/database/limit-database.ts @@ -5,9 +5,13 @@ * https://opensource.org/licenses/MIT */ +import { isRecord, isVector2 } from '@util/guard' import { formatTimeYMD, MILL_PER_DAY } from "@util/time" +import { createArrayGuard, createGuard, createObjectGuard, createOptionalGuard, isInt, isOptionalBoolean, isOptionalInt, isString } from 'typescript-guard' import BaseDatabase from "./common/base-database" import { REMAIN_WORD_PREFIX } from "./common/constant" +import { extractNamespace, isExportData, isLegacyVersion } from './common/migratable' +import type { BrowserMigratable } from './types' const KEY = REMAIN_WORD_PREFIX + 'LIMIT' @@ -19,10 +23,30 @@ type DateRecords = { } } -type LimitRecord = timer.limit.Rule & { +export type LimitRecord = tt4b.limit.Rule & { records: DateRecords } +type PartialRule = MakeRequired, 'name' | 'cond'> + +const isValidRow = createObjectGuard({ + id: isOptionalInt, + name: isString, + cond: createArrayGuard(isString), + time: isOptionalInt, + count: isOptionalInt, + weekly: isOptionalInt, + weeklyCount: isOptionalInt, + visitTime: isOptionalInt, + enabled: isOptionalBoolean, + locked: isOptionalBoolean, + weekdays: createOptionalGuard(createArrayGuard(createGuard(val => isInt(val) && val >= 0 && val <= 6))), + allowDelay: isOptionalBoolean, + periods: createOptionalGuard(createArrayGuard(isVector2)), +}) + +const isValidImportRows = createArrayGuard(isValidRow) + type ItemValue = { /** * ID @@ -121,8 +145,10 @@ const cvtItem2Rec = (item: ItemValue): LimitRecord => { type Items = Record -function migrate(exist: Items, toMigrate: any) { - const idBase = Object.keys(exist).map(parseInt).sort().reverse()?.[0] ?? 0 + 1 +function migrate(exist: Items, toMigrate: unknown) { + if (!isRecord(toMigrate)) return + const ids = Object.keys(exist).map(Number).filter(Number.isFinite) + const idBase = (ids.length ? Math.max(...ids) : 0) + 1 Object.values(toMigrate).forEach((value, idx) => { const id = idBase + idx const itemValue: ItemValue = value as ItemValue @@ -134,12 +160,24 @@ function migrate(exist: Items, toMigrate: any) { }) } +function cvtRule2Item(rule: tt4b.limit.Rule): ItemValue { + const { id, name, cond, time, count, weekly, weeklyCount, visitTime, periods, enabled, locked, allowDelay, weekdays } = rule + return { + i: id, n: name, c: cond, t: time, ct: count, wt: weekly, wct: weeklyCount, + v: visitTime, p: periods, + e: !!enabled, l: !!locked, ad: !!allowDelay, + wd: weekdays, + } +} + /** * Time limit * * @since 0.2.2 */ -class LimitDatabase extends BaseDatabase { +class LimitDatabase extends BaseDatabase implements BrowserMigratable<'__limit__'> { + namespace: '__limit__' = '__limit__' + private async getItems(): Promise { let items = await this.storage.getOne(KEY) || {} return items @@ -163,41 +201,35 @@ class LimitDatabase extends BaseDatabase { return Object.values(items).map(cvtItem2Rec) } - async save(data: MakeOptional, rewrite?: boolean): Promise { + async batchUpdate(rules: tt4b.limit.Rule[]): Promise { + if (!rules.length) return const items = await this.getItems() - let { - id, name, weekdays, - enabled, locked, allowDelay, - cond, - time, count, - weekly, weeklyCount, - visitTime, periods, - } = data - if (!id) { - const lastId = Object.values(items) - .map(e => e.i) - .filter(i => !!i) - .sort((a, b) => b - a)?.[0] ?? 0 - id = lastId + 1 - } - const existItem = items[id] - if (existItem && !rewrite) return id - items[id] = { - // Can be overridden by existing - ...(existItem || {}), - i: id, n: name, c: cond, wd: weekdays, - e: !!enabled, l: locked, ad: !!allowDelay, - t: time, ct: count, - wt: weekly, wct: weeklyCount, - v: visitTime, p: periods, - } + rules.forEach(rule => { + const id = rule.id + const exist = items[id] + if (!exist) return + items[id] = { ...exist, ...cvtRule2Item(rule) } + }) + await this.update(items) + } + + async add(data: Omit): Promise { + const items = await this.getItems() + + const lastId = Object.values(items) + .map(e => e.i) + .filter(i => !!i) + .sort((a, b) => b - a)?.[0] ?? 0 + const id = lastId + 1 + + items[id] = cvtRule2Item({ id, ...data }) await this.update(items) return id } - async remove(id: number): Promise { + async batchRemove(ids: number[]): Promise { const items = await this.getItems() - delete items[id] + ids.forEach(id => delete items[id]) await this.update(items) } @@ -226,7 +258,7 @@ class LimitDatabase extends BaseDatabase { await this.update(items) } - async updateDelayCount(date: string, toUpdate: timer.limit.Item[]): Promise { + async updateDelayCount(date: string, toUpdate: tt4b.limit.Item[]): Promise { const items = await this.getItems() toUpdate?.forEach(({ id, delayCount }) => { const entry = items[id] @@ -238,35 +270,46 @@ class LimitDatabase extends BaseDatabase { await this.update(items) } - async updateDelay(id: number, allowDelay: boolean) { - const items = await this.getItems() - if (!items[id]) return - items[id].ad = allowDelay - await this.update(items) - } - - async updateEnabled(id: number, enabled: boolean) { - const items = await this.getItems() - if (!items[id]) return - items[id].e = !!enabled - await this.update(items) - } + async importData(data: unknown): Promise { + if (!isExportData(data)) return + if (isLegacyVersion(data)) { + return this.importLegacyData(data) + } - async updateLocked(id: number, locked: boolean) { - const items = await this.getItems() - if (!items[id]) return - items[id].l = !!locked - await this.update(items) + const rows = extractNamespace(data, this.namespace, isValidImportRows) ?? [] + for (const row of rows) { + const toImport: Omit = { + name: row.name, + cond: row.cond, + time: row.time, + count: row.count, + weekly: row.weekly, + weeklyCount: row.weeklyCount, + visitTime: row.visitTime, + periods: row.periods, + enabled: row.enabled ?? true, + locked: row.locked ?? false, + allowDelay: row.allowDelay ?? false, + weekdays: row.weekdays ?? [], + } + await this.add(toImport) + } } - async importData(data: any): Promise { - let toImport = data[KEY] as Items - // Not import - if (typeof toImport !== 'object') return - const exists: Items = await this.getItems() + /** + * @deprecated Only for legacy data, will be removed in future version + */ + private async importLegacyData(data: unknown): Promise { + if (!isRecord(data)) return + let toImport = data[KEY] + const exists = await this.getItems() migrate(exists, toImport) this.setByKey(KEY, exists) } + + exportData(): Promise { + return this.all() + } } const limitDatabase = new LimitDatabase() diff --git a/src/database/memory-detector.ts b/src/background/database/memory-detector.ts similarity index 66% rename from src/database/memory-detector.ts rename to src/background/database/memory-detector.ts index 5579bef5e..e4fc35799 100644 --- a/src/database/memory-detector.ts +++ b/src/background/database/memory-detector.ts @@ -7,20 +7,6 @@ import StoragePromise from "./common/storage-promise" -/** - * User memory of this extension - */ -export type MemoryInfo = { - /** - * Used bytes - */ - used: number - /** - * Total bytes - */ - total: number -} - /** * 'QUOTA_BYTES' Not supported in Firefox */ @@ -31,7 +17,7 @@ const total: number = chrome.storage.local.QUOTA_BYTES || 0 * * @since 0.0.9 */ -export async function getUsedStorage(): Promise { +export async function getUsedStorage(): Promise { const used = await new StoragePromise(chrome.storage.local).getUsedMemory() return { used, total } } \ No newline at end of file diff --git a/src/background/database/merge-rule-database.ts b/src/background/database/merge-rule-database.ts new file mode 100644 index 000000000..7fe275851 --- /dev/null +++ b/src/background/database/merge-rule-database.ts @@ -0,0 +1,97 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { isRecord } from '@util/guard' +import { createArrayGuard, createObjectGuard, createRecordGuard, createUnionGuard, isInt, isString } from 'typescript-guard' +import BaseDatabase from "./common/base-database" +import { REMAIN_WORD_PREFIX } from "./common/constant" +import { extractNamespace, isLegacyVersion } from './common/migratable' +import type { BrowserMigratable } from './types' + +const DB_KEY = REMAIN_WORD_PREFIX + 'MERGE_RULES' + +type MergeRuleSet = { [key: string]: string | number } + +const isMergeValue = createUnionGuard(isString, isInt) + +const isMergeRuleSet = createRecordGuard(isMergeValue) + +const isMergeRule = createObjectGuard({ + origin: isString, + merged: isMergeValue, +}) + +/** + * Rules to merge host + * + * @since 0.1.2 + */ +class MergeRuleDatabase extends BaseDatabase implements BrowserMigratable<'__merge__'> { + namespace: '__merge__' = '__merge__' + + async refresh(): Promise { + const result = await this.storage.getOne(DB_KEY) + return result || {} + } + + private update(data: MergeRuleSet): Promise { + return this.setByKey(DB_KEY, data) + } + + async selectAll(): Promise { + const set = await this.refresh() + return Object.entries(set) + .map(([origin, merged]) => ({ origin, merged } satisfies tt4b.merge.Rule)) + } + + async remove(origin: string): Promise { + const set = await this.refresh() + delete set[origin] + await this.update(set) + } + + /** + * Add to the db + */ + async add(...toAdd: tt4b.merge.Rule[]): Promise { + const set = await this.refresh() + // Not rewrite + toAdd.forEach(({ origin, merged }) => set[origin] = set[origin] ?? merged) + await this.update(set) + } + + async importData(data: unknown): Promise { + if (isLegacyVersion(data)) { + return this.importLegacyData(data) + } + const rules = extractNamespace(data, this.namespace, createArrayGuard(isMergeRule)) ?? [] + await this.add(...rules) + } + + /** + * @deprecated Only for legacy version + */ + private async importLegacyData(data: unknown): Promise { + if (!isRecord(data)) return + const toMigrate = data[DB_KEY] + if (!isMergeRuleSet(toMigrate)) return + const exist = await this.refresh() + Object.entries(toMigrate satisfies MergeRuleSet) + // Not rewrite + .filter(([key]) => !exist[key]) + .forEach(([key, value]) => exist[key] = value) + await this.update(exist) + } + + exportData(): Promise { + return this.selectAll() + } +} + +const mergeRuleDatabase = new MergeRuleDatabase() + +export default mergeRuleDatabase \ No newline at end of file diff --git a/src/background/database/meta-database.ts b/src/background/database/meta-database.ts new file mode 100644 index 000000000..1b4910566 --- /dev/null +++ b/src/background/database/meta-database.ts @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2022 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import BaseDatabase from "./common/base-database" +import { META_KEY } from "./common/constant" + +/** + * @since 0.6.0 + */ +class MetaDatabase extends BaseDatabase { + async getMeta(): Promise { + const meta = await this.storage.getOne(META_KEY) + return meta || {} + } + + async update(existMeta: tt4b.ExtensionMeta): Promise { + await this.storage.put(META_KEY, existMeta) + } +} + +const metaDatabase = new MetaDatabase() + +export default metaDatabase \ No newline at end of file diff --git a/src/background/database/option-database.ts b/src/background/database/option-database.ts new file mode 100644 index 000000000..ec93264c9 --- /dev/null +++ b/src/background/database/option-database.ts @@ -0,0 +1,34 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { defaultOption } from "@util/constant/option" +import { mergeObject } from '@util/lang' +import BaseDatabase from "./common/base-database" +import { REMAIN_WORD_PREFIX } from "./common/constant" + +const DB_KEY = REMAIN_WORD_PREFIX + 'OPTION' + +/** + * Database of options + * + * @since 0.3.0 + */ +class OptionDatabase extends BaseDatabase { + + async getOption(): Promise { + const option = await this.storage.getOne(DB_KEY) + return mergeObject(defaultOption(), option) + } + + async setOption(option: tt4b.option.AllOption): Promise { + option && await this.setByKey(DB_KEY, option) + } +} + +const optionDatabase = new OptionDatabase() + +export default optionDatabase \ No newline at end of file diff --git a/src/database/period-database.ts b/src/background/database/period-database.ts similarity index 58% rename from src/database/period-database.ts rename to src/background/database/period-database.ts index 1ff81dd94..e99fca321 100644 --- a/src/database/period-database.ts +++ b/src/background/database/period-database.ts @@ -5,22 +5,20 @@ * https://opensource.org/licenses/MIT */ -import { getDateString, keyOf, MAX_PERIOD_ORDER, MILL_PER_PERIOD } from "@util/period" +import { getDateString, keyOf } from "@util/period" import BaseDatabase from "./common/base-database" import { REMAIN_WORD_PREFIX } from "./common/constant" -type DailyResult = { - /** - * order => milliseconds of focus - */ - [minuteOrder: number]: number -} +/** + * order => milliseconds of focus + */ +type DailyResult = Record const KEY_PREFIX = REMAIN_WORD_PREFIX + 'PERIOD' const KEY_PREFIX_LENGTH = KEY_PREFIX.length const generateKey = (date: string) => KEY_PREFIX + date -function merge(exists: { [dateKey: string]: DailyResult }, toMerge: timer.period.Result[]) { +function merge(exists: { [dateKey: string]: DailyResult }, toMerge: tt4b.period.Result[]) { toMerge.forEach(period => { const { order, milliseconds } = period const key = generateKey(getDateString(period)) @@ -31,8 +29,8 @@ function merge(exists: { [dateKey: string]: DailyResult }, toMerge: timer.period }) } -function db2PeriodInfos(data: { [dateKey: string]: DailyResult }): timer.period.Result[] { - const result: timer.period.Result[] = [] +function db2PeriodInfos(data: { [dateKey: string]: DailyResult }): tt4b.period.Result[] { + const result: tt4b.period.Result[] = [] Object.entries(data).forEach((([dateKey, val]) => { const dateStr = dateKey.substring(KEY_PREFIX_LENGTH) const date = new Date( @@ -40,18 +38,18 @@ function db2PeriodInfos(data: { [dateKey: string]: DailyResult }): timer.period. Number.parseInt(dateStr.substring(4, 6)) - 1, Number.parseInt(dateStr.substring(6, 8)) ) - Object - .entries(val) - .forEach(([order, milliseconds]) => result.push({ - ...keyOf(date, Number.parseInt(order)), - milliseconds - })) + Object.entries(val).forEach(([order, milliseconds]) => result.push({ + ...keyOf(date, Number.parseInt(order)), + milliseconds, + })) })) return result } - /** * @since v0.2.1 + * @deprecated + * Starting with v4, all timeline data will be stored in IndexedDB, and periodic results will be queried using the timeline database. + * Therefore, this will be removed one year after the release of version 4 (around 2027-04-01) */ class PeriodDatabase extends BaseDatabase { @@ -61,7 +59,7 @@ class PeriodDatabase extends BaseDatabase { return result || {} } - async accumulate(items: timer.period.Result[]): Promise { + async accumulate(items: tt4b.period.Result[]): Promise { const dates = Array.from(new Set(items.map(getDateString))) const exists = await this.getBatch0(dates) merge(exists, items) @@ -80,7 +78,7 @@ class PeriodDatabase extends BaseDatabase { return this.storage.get(keys) } - async getBatch(dates: string[]): Promise { + async getBatch(dates: string[]): Promise { const data = await this.getBatch0(dates) return db2PeriodInfos(data) } @@ -89,7 +87,7 @@ class PeriodDatabase extends BaseDatabase { * @since 1.0.0 * @returns all period items */ - async getAll(): Promise { + async getAll(): Promise { const allItems = await this.storage.get() const periodItems: { [dateKey: string]: DailyResult } = {} Object.entries(allItems) @@ -103,35 +101,6 @@ class PeriodDatabase extends BaseDatabase { await this.storage.remove(keys) } - async importData(data: any): Promise { - if (typeof data !== "object") return - const items = await this.storage.get() - const keyReg = new RegExp(`^${KEY_PREFIX}20\\d{2}[01]\\d[0-3]\\d$`) - const toSave: Record = {} - Object.entries(data) - .filter(([key]) => keyReg.test(key)) - .forEach(([key, value]) => toSave[key] = migrate(items[key], value as _Value)) - this.storage.set(toSave) - } -} - -type _Value = { [key: string]: number } - -function migrate(exist: _Value | undefined, toMigrate: _Value) { - const result: _Value = exist || {} - Object.entries(toMigrate) - .filter(([key]) => /^\d{1,2}$/.test(key)) - .forEach(([key, value]) => { - const index = Number.parseInt(key) - if (index < 0 || index > MAX_PERIOD_ORDER) return - let mills: number = (result[key] || 0) + (typeof value === "number" ? value : parseInt(value || "0")) - if (isNaN(mills) || mills <= 0) return - if (mills > MILL_PER_PERIOD) { - mills = MILL_PER_PERIOD - } - result[key] = mills - }) - return result } const periodDatabase = new PeriodDatabase() diff --git a/src/background/database/site-database.ts b/src/background/database/site-database.ts new file mode 100644 index 000000000..0bdaf4d1a --- /dev/null +++ b/src/background/database/site-database.ts @@ -0,0 +1,141 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { toMap } from '@util/array' +import { CATE_NOT_SET_ID } from "@util/site" +import BaseDatabase from "./common/base-database" +import { REMAIN_WORD_PREFIX } from "./common/constant" + +type _Entry = { + /** + * Alias + */ + a?: string + /** + * Icon url + */ + i?: string + /** + * Category ID + */ + c?: number + /** + * Count run time + */ + r?: boolean +} + +const DB_KEY_PREFIX = REMAIN_WORD_PREFIX + 'SITE_' +const HOST_KEY_PREFIX = DB_KEY_PREFIX + 'h' +const VIRTUAL_KEY_PREFIX = DB_KEY_PREFIX + 'v' +const MERGED_FLAG = 'm' + +function cvt2Key({ host, type }: tt4b.site.SiteKey): string { + switch (type) { + case 'virtual': return VIRTUAL_KEY_PREFIX + host + case 'merged': return HOST_KEY_PREFIX + MERGED_FLAG + host + case 'normal': return HOST_KEY_PREFIX + '_' + host + } +} + +function cvt2SiteKey(key: string): tt4b.site.SiteKey { + if (key.startsWith(VIRTUAL_KEY_PREFIX)) { + return { + host: key.substring(VIRTUAL_KEY_PREFIX.length), + type: 'virtual', + } + } else if (key.startsWith(HOST_KEY_PREFIX)) { + return { + host: key.substring(HOST_KEY_PREFIX.length + 1), + type: key.charAt(HOST_KEY_PREFIX.length) === MERGED_FLAG ? 'merged' : 'normal', + } + } else { + // Can't go there + return { host: key, type: 'normal' } + } +} + +function cvt2Entry({ alias, iconUrl, cate, run }: tt4b.site.SiteInfo): _Entry { + const entry: _Entry = { i: iconUrl } + alias && (entry.a = alias) + cate && (entry.c = cate) + run && (entry.r = true) + entry.i = iconUrl + return entry +} + +function cvt2SiteInfo(key: tt4b.site.SiteKey, entry: _Entry | undefined): tt4b.site.SiteInfo { + const { a, i, c, r } = entry ?? {} + const siteInfo: tt4b.site.SiteInfo = { ...key } + siteInfo.alias = a + siteInfo.cate = c ?? CATE_NOT_SET_ID + siteInfo.iconUrl = i + siteInfo.run = !!r + return siteInfo +} + +function buildFilter(condition?: tt4b.site.Query): (site: tt4b.site.SiteInfo) => boolean { + const { fuzzyQuery, cateIds, types } = condition || {} + let cateFilter = typeof cateIds === 'number' ? [cateIds] : (cateIds?.length ? cateIds : undefined) + let typeFilter = typeof types === 'string' ? [types] : (types?.length ? types : undefined) + return site => { + const { host: siteHost, alias: siteAlias, cate, type } = site || {} + if (fuzzyQuery && !(siteHost?.includes(fuzzyQuery) || siteAlias?.includes(fuzzyQuery))) return false + if (cateFilter && (!cateFilter.includes(cate ?? CATE_NOT_SET_ID) || type !== 'normal')) return false + if (typeFilter && !typeFilter.includes(type)) return false + return true + } +} + +class SiteDatabase extends BaseDatabase { + async select(condition?: tt4b.site.Query): Promise { + const filter = buildFilter(condition) + const data = await this.storage.get() + return Object.entries(data) + .filter(([key]) => key.startsWith(DB_KEY_PREFIX)) + .map(([key, value]) => cvt2SiteInfo(cvt2SiteKey(key), value as _Entry)) + .filter(filter) + } + + /** + * Get by key + * + * @returns site info, or undefined + */ + async get(key: tt4b.site.SiteKey): Promise { + const entry = await this.storage.getOne<_Entry>(cvt2Key(key)) + return entry && cvt2SiteInfo(key, entry) + } + + async getBatch(keys: tt4b.site.SiteKey[]): Promise { + const result = await this.storage.get(keys.map(cvt2Key)) + return Object.entries(result) + .map(([key, value]) => cvt2SiteInfo(cvt2SiteKey(key), value as _Entry)) + } + + async save(...sites: tt4b.site.SiteInfo[]): Promise { + if (!sites.length) return + const toSet = toMap(sites, cvt2Key, cvt2Entry) + await this.storage.set(toSet) + } + + async remove(siteKeys: tt4b.site.SiteKey[]): Promise { + if (!siteKeys.length) return + const keys = siteKeys.map(cvt2Key) + await this.storage.remove(keys) + } + + async exist(siteKey: tt4b.site.SiteKey): Promise { + const key = cvt2Key(siteKey) + const entry = await this.storage.getOne<_Entry>(key) + return !!entry + } +} + +const siteDatabase = new SiteDatabase() + +export default siteDatabase \ No newline at end of file diff --git a/src/background/database/stat-database/classic.ts b/src/background/database/stat-database/classic.ts new file mode 100644 index 000000000..9898869b9 --- /dev/null +++ b/src/background/database/stat-database/classic.ts @@ -0,0 +1,273 @@ +import { log } from '@/common/logger' +import { escapeRegExp } from '@util/pattern' +import { isNotZeroResult } from '@util/stat' +import { createObjectGuard, isOptionalInt } from 'typescript-guard' +import BaseDatabase from '../common/base-database' +import { REMAIN_WORD_PREFIX } from '../common/constant' +import { cvtGroupId2Host, formatDateStr, GROUP_PREFIX, increase, zeroResult } from './common' +import { filterDate, filterHost, filterNumberRange, processCondition, type ProcessedCondition } from './condition' +import type { StatCondition, StatDatabase } from './types' + +/** + * Generate the key in local storage by host and date + * + * @param host host + * @param date date + */ +const generateKey = (host: string, date: Date | string) => formatDateStr(date) + host +const generateHostReg = (host: string): RegExp => RegExp(`^\\d{8}${escapeRegExp(host)}$`) + +const generateGroupKey = (groupId: number, date: Date | string) => formatDateStr(date) + cvtGroupId2Host(groupId) +const generateGroupReg = (groupId: number): RegExp => RegExp(`^\\d{8}${escapeRegExp(cvtGroupId2Host(groupId))}$`) + +const isPartialResult = createObjectGuard>({ + focus: isOptionalInt, + time: isOptionalInt, + run: isOptionalInt, +}) + +function filterRow(row: tt4b.core.Row, condition: ProcessedCondition): boolean { + const { host, date, focus, time } = row + const { timeStart, timeEnd, focusStart, focusEnd, keys, virtual } = condition + + return filterHost(host, keys, virtual) + && filterDate(date, condition) + && filterNumberRange(time, [timeStart, timeEnd]) + && filterNumberRange(focus, [focusStart, focusEnd]) +} + +/** + * Default implementation by `chrome.storage.local` + */ +export class ClassicStatDatabase extends BaseDatabase implements StatDatabase { + + async refresh(): Promise<{ [key: string]: unknown }> { + const result = await this.storage.get() + const items: Record = {} + Object.entries(result) + .filter(([key]) => !key.startsWith(REMAIN_WORD_PREFIX)) + .forEach(([key, value]) => items[key] = value) + return items + } + + /** + * @param host host + * @since 0.1.3 + */ + accumulate(host: string, date: Date | string, item: tt4b.core.Result): Promise { + const key = generateKey(host, date) + return this.accumulateInner(key, item) + } + + /** + * @param host host + * @since 0.1.3 + */ + accumulateGroup(groupId: number, date: Date | string, item: tt4b.core.Result): Promise { + const key = generateGroupKey(groupId, date) + return this.accumulateInner(key, item) + } + + private async accumulateInner(key: string, item: tt4b.core.Result): Promise { + const exist = await this.storage.getOne(key) + const value = increase(item, exist) + await this.setByKey(key, value) + return value + } + + /** + * Batch accumulate + * + * @param data data: {host=>waste_per_day} + * @param date date + * @since 0.1.8 + */ + async batchAccumulate(data: Record, date: Date | string): Promise> { + const hosts = Object.keys(data) + if (!hosts.length) return {} + const dateStr = formatDateStr(date) + const keys: { [host: string]: string } = {} + hosts.forEach(host => keys[host] = generateKey(host, dateStr)) + + const items = await this.storage.get(Object.values(keys)) + + const toUpdate: Record = {} + const afterUpdated: Record = {} + Object.entries(keys).forEach(([host, key]) => { + const item = data[host] + if (!item) return + const exist = increase(item, items[key] as tt4b.core.Result | undefined) + toUpdate[key] = afterUpdated[host] = exist + }) + await this.storage.set(toUpdate) + return afterUpdated + } + + /** + * Filter by query parameters + */ + private async filter(condition?: StatCondition, onlyGroup?: boolean): Promise { + const cond = processCondition(condition ?? {}) + const items = await this.refresh() + const result: tt4b.core.Row[] = [] + Object.entries(items).forEach(([key, value]) => { + const date = key.substring(0, 8) + let host = key.substring(8) + if (onlyGroup) { + if (host.startsWith(GROUP_PREFIX)) { + host = host.substring(GROUP_PREFIX.length) + } else { + return + } + } else if (host.startsWith(GROUP_PREFIX)) { + return + } + const { focus, time, run } = value as tt4b.core.Result + const row: tt4b.core.Row = { host, date, focus, time } + run !== undefined && (row.run = run) + filterRow(row, cond) && result.push(row) + }) + return result + } + + /** + * Select + * + * @param condition condition + */ + async select(condition?: StatCondition): Promise { + log("select:{condition}", condition) + return this.filter(condition) + } + + async selectGroup(condition?: StatCondition): Promise { + return this.filter(condition, true) + } + + /** + * Get by host and date + * + * @since 0.0.5 + */ + async get(host: string, date: Date | string): Promise { + const key = generateKey(host, date) + const exist = await this.storage.getOne(key) + const result = exist ?? zeroResult() + return { host, date: formatDateStr(date), ...result } + } + + async batchSelect(keys: tt4b.core.RowKey[]): Promise { + if (!keys.length) return [] + const storageKeys = keys.map(({ host, date }) => generateKey(host, date)) + const items = await this.storage.get>(storageKeys) + return keys.map(({ host, date }, i) => { + const sk = storageKeys[i] + const exist = sk ? items[sk] : undefined + const result = exist ?? zeroResult() + return { host, date, ...result } + }) + } + + /** + * Delete by key + * + * @param rows site rows, the host and date mustn't be null + * @since 0.0.9 + */ + async delete(...rows: tt4b.core.RowKey[]): Promise { + const keys: string[] = rows.map(({ host, date }) => generateKey(host, date)) + return this.storage.remove(keys) + } + + async deleteGroup(...rows: [groupId: number, date: string][]): Promise { + const keys: string[] = rows.map(([groupId, date]) => generateGroupKey(groupId, date)) + return this.storage.remove(keys) + } + + /** + * Force update data + * + * @since 1.4.3 + */ + forceUpdate(...rows: tt4b.core.Row[]): Promise { + const toSet = Object.fromEntries(rows.map(({ host, date, time, focus, run }) => { + const key = generateKey(host, date) + const result: tt4b.core.Result = { time, focus } + run && (result.run = run) + return [key, result] + })) + + return this.storage.set(toSet) + } + + forceUpdateGroup(...rows: tt4b.core.Row[]): Promise { + const toSet = Object.fromEntries(rows.map(({ host, date, time, focus, run }) => { + const key = generateGroupKey(Number(host), date) + const result: tt4b.core.Result = { time, focus } + run && (result.run = run) + return [key, result] + })) + + return this.storage.set(toSet) + } + + /** + * @param host host + * @param range [start date (inclusive), end date (inclusive)] + * @returns [dates] + * @since 0.0.7 + */ + async deleteByHost(host: string, range?: string | [string?, string?]): Promise { + const [start, end] = Array.isArray(range) ? range : [range, range] + if (start && start === end) { + // Delete one day + const key = generateKey(host, start) + await this.storage.remove(key) + return + } + + const dateFilter = (date: string) => (start ? start <= date : true) && (end ? date <= end : true) + const items = await this.refresh() + + // Key format: 20201112www.google.com + const keyReg = generateHostReg(host) + const keys: string[] = Object.keys(items) + .filter(key => keyReg.test(key) && dateFilter(key.substring(0, 8))) + + await this.storage.remove(keys) + } + + async deleteByGroup(groupId: number, range?: string | [string, string]): Promise { + const [start, end] = Array.isArray(range) ? range : [range, range] + const startStr = start && formatDateStr(start) + const endStr = end && formatDateStr(end) + const dateFilter = (date: string) => (startStr ? startStr <= date : true) && (endStr ? date <= endStr : true) + const items = await this.refresh() + + const keyReg = generateGroupReg(groupId) + const keys: string[] = Object.keys(items).filter(key => keyReg.test(key) && dateFilter(key.substring(0, 8))) + + await this.storage.remove(keys) + } +} + +/** + * Legacy data extract + * + * @deprecated since 4.0.0, legacy data is not supported for export, this method will be removed in future versions + */ +export function parseImportData(data: unknown): tt4b.core.Row[] { + if (typeof data !== "object" || data === null) return [] + const rows: tt4b.core.Row[] = [] + Object.entries(data) + .filter(([key]) => /^20\d{2}[01]\d[0-3]\d.*/.test(key) && !key.substring(8).startsWith(GROUP_PREFIX)) + .forEach(([key, value]) => { + if (typeof value !== "object") return + if (!isPartialResult(value)) return + const date = key.substring(0, 8) + const host = key.substring(8) + const row: tt4b.core.Row = { host, date, focus: value.focus ?? 0, time: value.time ?? 0 } + isNotZeroResult(row) && rows.push(row) + }) + return rows +} \ No newline at end of file diff --git a/src/background/database/stat-database/common.ts b/src/background/database/stat-database/common.ts new file mode 100644 index 000000000..deea68a82 --- /dev/null +++ b/src/background/database/stat-database/common.ts @@ -0,0 +1,24 @@ +import { formatTimeYMD } from '@util/time' + +export const GROUP_PREFIX = "_g_" + +export const cvtGroupId2Host = (groupId: number): string => `${GROUP_PREFIX}${groupId}` + +export const formatDateStr = (date: string | Date): string => { + if (typeof date === 'string') return date + return formatTimeYMD(date) +} + +export const zeroResult = (): tt4b.core.Result => ({ focus: 0, time: 0 }) + +export const zeroRow = (host: string, date: string): tt4b.core.Row => ({ host, date, focus: 0, time: 0 }) + +export const increase = (a: tt4b.core.Result, b: tt4b.core.Result | undefined) => { + const res: tt4b.core.Result = { + focus: a.focus + (b?.focus ?? 0), + time: a.time + (b?.time ?? 0), + } + const run = (a.run ?? 0) + (b?.run ?? 0) + run && (res.run = run) + return res +} diff --git a/src/background/database/stat-database/condition.ts b/src/background/database/stat-database/condition.ts new file mode 100644 index 000000000..19e70f918 --- /dev/null +++ b/src/background/database/stat-database/condition.ts @@ -0,0 +1,69 @@ +import { judgeVirtualFast } from "@util/pattern" +import type { StatCondition } from './types' + +export type ProcessedCondition = StatCondition & { + useExactDate?: boolean + exactDateStr?: string + startDateStr?: string + endDateStr?: string + timeStart?: number + timeEnd?: number + focusStart?: number + focusEnd?: number +} + +export function filterHost(host: string, keys: ProcessedCondition['keys'], virtual?: boolean): boolean { + if (!virtual && judgeVirtualFast(host)) return false + if (keys === undefined) return true + return typeof keys === 'string' ? host === keys : keys.includes(host) +} + +export function filterDate( + date: string, + { useExactDate, exactDateStr, startDateStr, endDateStr }: ProcessedCondition +): boolean { + if (useExactDate) { + if (exactDateStr !== date) return false + } else { + if (startDateStr && startDateStr > date) return false + if (endDateStr && endDateStr < date) return false + } + return true +} + +export function filterNumberRange(val: number, [start, end]: [start?: number, end?: number]): boolean { + if (start !== null && start !== undefined && start > val) return false + if (end !== null && end !== undefined && end < val) return false + return true +} + +export function processCondition(condition?: StatCondition): ProcessedCondition { + const result: ProcessedCondition = { ...condition } + + const paramDate = condition?.date + if (paramDate) { + if (typeof paramDate === 'string') { + result.useExactDate = true + result.exactDateStr = paramDate + } else { + const [startDate, endDate] = paramDate + result.useExactDate = false + result.startDateStr = startDate + result.endDateStr = endDate + } + } + + const paramTime = condition?.timeRange + if (paramTime) { + paramTime.length >= 2 && (result.timeEnd = paramTime[1]) + paramTime.length >= 1 && (result.timeStart = paramTime[0]) + } + + const paramFocus = condition?.focusRange + if (paramFocus) { + paramFocus.length >= 2 && (result.focusEnd = paramFocus[1]) + paramFocus.length >= 1 && (result.focusStart = paramFocus[0]) + } + + return result +} diff --git a/src/background/database/stat-database/idb.ts b/src/background/database/stat-database/idb.ts new file mode 100644 index 000000000..882a68b9b --- /dev/null +++ b/src/background/database/stat-database/idb.ts @@ -0,0 +1,335 @@ +import { BaseIDBStorage, closedRangeKey, IndexResult, iterateCursor, type Key, req2Promise, type Table } from '../common/indexed-storage' +import { cvtGroupId2Host, formatDateStr, increase, zeroRow } from './common' +import { filterDate, filterHost, filterNumberRange, processCondition, type ProcessedCondition } from './condition' +import type { StatCondition, StatDatabase } from './types' + +type StoredRow = tt4b.core.Row & { + // If present, this is a group row + groupId?: number +} + +const INDEXES: (Key | Key[])[] = [ + 'date', 'host', 'groupId', + 'focus', 'time', + ['date', 'host'], +] as const + +const isGroup = (row: StoredRow): boolean => row.groupId !== undefined + +type IndexCoverage = { + date?: boolean + host?: boolean + time?: boolean + focus?: boolean +} + +function buildFilter(cond: ProcessedCondition, coverage: IndexCoverage): (row: StoredRow) => boolean { + return (row: StoredRow) => { + if (!coverage.time && !filterNumberRange(row.time, [cond.timeStart, cond.timeEnd])) { + return false + } + + if (!coverage.focus && !filterNumberRange(row.focus, [cond.focusStart, cond.focusEnd])) { + return false + } + + if (!coverage.date && !filterDate(row.date, cond)) { + return false + } + + // Only check virtual if host keys are not fully covered by index + const keys = coverage.host ? undefined : cond.keys + if (!filterHost(row.host, keys, cond.virtual)) { + return false + } + + return true + } +} + +type StatIndex = typeof INDEXES[number] + +export class IDBStatDatabase extends BaseIDBStorage implements StatDatabase { + table: Table = 'stat' + key: StatIndex = ['date', 'host'] + indexes: StatIndex[] = INDEXES + + get(host: string, date: Date | string): Promise { + return this.withStore(async store => { + const index = super.assertIndex(store, ['date', 'host']) + const dateStr = formatDateStr(date) + const req = index.get([dateStr, host]) + return await req2Promise(req) ?? zeroRow(host, dateStr) + }, 'readonly') + } + + batchSelect(keys: tt4b.core.RowKey[]): Promise { + if (!keys.length) return Promise.resolve([]) + return this.withStore(async store => { + const index = super.assertIndex(store, ['date', 'host']) + const out: tt4b.core.Row[] = [] + for (const { host, date } of keys) { + const req = index.get([date, host]) + const row = await req2Promise(req) ?? zeroRow(host, date) + out.push(row) + } + return out + }, 'readonly') + } + + private judgeIndex(store: IDBObjectStore, cond: ProcessedCondition, expectGroup: boolean): IndexResult { + const keys = typeof cond.keys === 'string' ? [cond.keys] : cond.keys + const { + useExactDate, exactDateStr, + timeStart, timeEnd, + focusStart, focusEnd, + startDateStr, endDateStr, + } = cond + + if (expectGroup) { + const groupId = keys?.length === 1 ? parseInt(keys[0] ?? 'NaN') : NaN + return isNaN(groupId) ? { + cursorReq: this.assertIndexCursor(store, 'groupId', IDBKeyRange.lowerBound(0)), + } : { + cursorReq: this.assertIndexCursor(store, 'groupId', IDBKeyRange.only(groupId)), + coverage: { host: true } + } + } + + if (useExactDate && exactDateStr) { + return keys?.length === 1 ? { + cursorReq: this.assertIndexCursor(store, ['date', 'host'], IDBKeyRange.only([exactDateStr, keys[0]])), + coverage: { date: true, host: true } + } : { + cursorReq: this.assertIndexCursor(store, 'date', IDBKeyRange.only(exactDateStr)), + coverage: { date: true } + } + } + const dateRange = closedRangeKey(startDateStr, endDateStr) + if (dateRange) { + return { + cursorReq: this.assertIndexCursor(store, 'date', dateRange), + coverage: { date: true } + } + } + + const timeRange = closedRangeKey(timeStart, timeEnd) + if (timeRange) { + return { + cursorReq: super.assertIndexCursor(store, 'time', timeRange), + coverage: { time: true } + } + } + + const focusRange = closedRangeKey(focusStart, focusEnd) + if (focusRange) { + return { + cursorReq: super.assertIndexCursor(store, 'focus', focusRange), + coverage: { focus: true } + } + } + + return { + cursorReq: store.openCursor(), + coverage: {} + } + } + + private async selectInternal(store: IDBObjectStore, cond: ProcessedCondition, expectGroup: boolean): Promise { + const allRows: tt4b.core.Row[] = [] + const { cursorReq, coverage = {} } = this.judgeIndex(store, cond, expectGroup) + const filter = buildFilter(cond, coverage) + + const rows = await iterateCursor(cursorReq) + for (const row of rows) { + if (expectGroup !== isGroup(row)) continue + if (!filter(row)) continue + + if (expectGroup) { + allRows.push({ + host: row.groupId?.toString() ?? '', + date: row.date, + time: row.time, + focus: row.focus, + run: row.run, + }) + } else { + allRows.push(row) + } + } + + return allRows + } + + select(condition?: StatCondition): Promise { + return this.withStore(async store => { + const cond = processCondition(condition) + return this.selectInternal(store, cond, false) + }, 'readonly') + } + + accumulate(host: string, date: Date | string, item: tt4b.core.Result): Promise { + return this.withStore(async store => { + const index = super.assertIndex(store, ['date', 'host']) + const dateStr = formatDateStr(date) + const req = index.get([dateStr, host]) + const existing = await req2Promise(req) + const newVal = increase(item, existing) + const newData: StoredRow = { host, date: dateStr, ...newVal } + await req2Promise(store.put(newData)) + return newData + }, 'readwrite') + } + + batchAccumulate(data: Record, date: Date | string): Promise> { + return this.withStore(async store => { + const dateStr = formatDateStr(date) + const cursorReq = super.assertIndexCursor(store, 'date', IDBKeyRange.only(dateStr)) + const toUpdate: Record = {} + + await iterateCursor(cursorReq, cursor => { + const stored = cursor.value as StoredRow | undefined + if (!stored || isGroup(stored)) return + toUpdate[stored.host] = stored + }) + + for (const [host, result] of Object.entries(data)) { + const existing = toUpdate[host] + const newValue: tt4b.core.Row = { host, date: dateStr, ...increase(result, existing) } + toUpdate[host] = newValue + store.put(newValue) + } + return toUpdate + }, 'readwrite') + } + + delete(...rows: tt4b.core.RowKey[]): Promise { + return this.withStore(async store => { + const index = super.assertIndex(store, ['date', 'host']) + for (const { host, date } of rows) { + const dateStr = formatDateStr(date) + const req = index.getKey([dateStr, host]) + const key = await req2Promise(req) + if (key) { + await req2Promise(store.delete(key)) + } + } + }, 'readwrite') + } + + deleteByHost(host: string, range?: string | [string?, string?]): Promise { + const [start, end] = Array.isArray(range) ? range : [range, range] + return this.withStore(async store => { + if (start && start === end) { + // Delete one day + const index = super.assertIndex(store, ['date', 'host']) + const req = index.getKey([start, host]) + const key = await req2Promise(req) + if (key) { + await req2Promise(store.delete(key)) + } + return + } + + // Delete by range + const index = super.assertIndex(store, 'host') + const cursorReq = index.openCursor(IDBKeyRange.only(host)) + const deletedDates = new Set() + + await iterateCursor(cursorReq, cursor => { + const r = cursor.value as StoredRow | undefined + if (!r || isGroup(r)) return + + const dateStr = r.date + const inRange = (!start || start <= dateStr) && (!end || dateStr <= end) + if (inRange) { + cursor.delete() + deletedDates.add(dateStr) + } + }) + }, 'readwrite') + } + + deleteByGroup(groupId: number, range?: string | [string, string]): Promise { + return this.withStore(async store => { + const [start, end] = Array.isArray(range) ? range : [range, range] + const host = cvtGroupId2Host(groupId) + if (start && start === end) { + // Delete one day + const index = super.assertIndex(store, ['date', 'host']) + const req = index.getKey([start, host]) + const key = await req2Promise(req) + if (key) { + await req2Promise(store.delete(key)) + } + return + } + + // Delete by range + const index = super.assertIndex(store, 'host') + const cursorReq = index.openCursor(IDBKeyRange.only(host)) + + await iterateCursor(cursorReq, cursor => { + const r = cursor.value as StoredRow | undefined + if (!r) return + const dateStr = r.date + const inRange = (!start || start <= dateStr) && (!end || dateStr <= end) + inRange && cursor.delete() + }) + }, 'readwrite') + } + + accumulateGroup(groupId: number, date: Date | string, item: tt4b.core.Result): Promise { + return this.withStore(async store => { + const index = super.assertIndex(store, ['date', 'host']) + const dateStr = formatDateStr(date) + const host = cvtGroupId2Host(groupId) + const req = index.get([dateStr, host]) + const existing = await req2Promise(req) + const newVal = increase(item, existing) + const newData: StoredRow = { host, date: dateStr, groupId, ...newVal } + await req2Promise(store.put(newData)) + return newData + }, 'readwrite') + } + + selectGroup(condition?: StatCondition): Promise { + return this.withStore(async store => { + const cond = processCondition(condition) + return this.selectInternal(store, cond, true) + }, 'readonly') + } + + deleteGroup(...rows: [groupId: number, date: string][]): Promise { + return this.withStore(async store => { + const index = super.assertIndex(store, ['date', 'host']) + for (const [groupId, date] of rows) { + const host = cvtGroupId2Host(groupId) + const dateStr = formatDateStr(date) + const req = index.getKey([dateStr, host]) + const key = await req2Promise(req) + if (key) { + await req2Promise(store.delete(key)) + } + } + }, 'readwrite') + } + + forceUpdate(...rows: tt4b.core.Row[]): Promise { + return this.withStore(store => rows.forEach(row => store.put(row)), 'readwrite') + } + + forceUpdateGroup(...rows: tt4b.core.Row[]): Promise { + return this.withStore(store => { + for (const row of rows) { + const { host, date, time, focus, run } = row + const groupId = parseInt(host) + if (isNaN(groupId)) { + throw new Error(`Invalid group host: ${host}`) + } + const newData: StoredRow = { host, date, time, focus, run, groupId } + store.put(newData) + } + }, 'readwrite') + } +} \ No newline at end of file diff --git a/src/background/database/stat-database/index.ts b/src/background/database/stat-database/index.ts new file mode 100644 index 000000000..98a67b0f9 --- /dev/null +++ b/src/background/database/stat-database/index.ts @@ -0,0 +1,151 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { isNotZeroResult } from '@util/stat' +import { createArrayGuard, createObjectGuard, isOptionalInt, isString } from 'typescript-guard' +import { extractNamespace, isExportData, isLegacyVersion } from '../common/migratable' +import { StorageHolder } from '../common/storage-holder' +import type { BrowserMigratable, StorageMigratable } from '../types' +import { ClassicStatDatabase, parseImportData } from './classic' +import { IDBStatDatabase } from './idb' +import type { StatCondition, StatDatabase } from './types' + +type StateDatabaseComposite = + & StatDatabase + & StorageMigratable<[tabs: tt4b.core.Row[], groups: tt4b.core.Row[]]> + & BrowserMigratable<'__stat__'> + +// Only `date` and `host` are required for import, other fields are optional, and will be set to default if not provided +type ValidImportRow = MakeRequired, 'date' | 'host'> + +const isValidImportRow = createObjectGuard({ + focus: isOptionalInt, + time: isOptionalInt, + run: isOptionalInt, + date: isString, + host: isString, +}) + +const isValidImportRows = createArrayGuard(isValidImportRow) + +class StatDatabaseWrapper implements StateDatabaseComposite { + namespace: '__stat__' = '__stat__' + private holder = new StorageHolder({ + classic: new ClassicStatDatabase(), + indexed_db: new IDBStatDatabase(), + }) + + get #current() { + return this.holder.current + } + + get(host: string, date: Date): Promise { + return this.#current.get(host, date) + } + + batchSelect(keys: tt4b.core.RowKey[]): Promise { + return this.#current.batchSelect(keys) + } + + select(condition?: StatCondition): Promise { + return this.#current.select(condition) + } + + accumulate(host: string, date: Date | string, item: tt4b.core.Result): Promise { + return this.#current.accumulate(host, date, item) + } + + batchAccumulate(data: Record, date: Date | string): Promise> { + return this.#current.batchAccumulate(data, date) + } + + accumulateGroup(groupId: number, date: Date | string, item: tt4b.core.Result): Promise { + return this.#current.accumulateGroup(groupId, date, item) + } + + delete(...rows: tt4b.core.RowKey[]): Promise { + return this.#current.delete(...rows) + } + + deleteByHost(host: string, range?: string | [string, string]): Promise { + return this.#current.deleteByHost(host, range) + } + + deleteByGroup(groupId: number, range?: string | [string, string]): Promise { + return this.#current.deleteByGroup(groupId, range) + } + + selectGroup(condition?: StatCondition): Promise { + return this.#current.selectGroup(condition) + } + + deleteGroup(...rows: [groupId: number, date: string][]): Promise { + return this.#current.deleteGroup(...rows) + } + + forceUpdate(...rows: tt4b.core.Row[]): Promise { + return this.#current.forceUpdate(...rows) + } + + forceUpdateGroup(...rows: tt4b.core.Row[]): Promise { + return this.#current.forceUpdateGroup(...rows) + } + + async migrateStorage(type: tt4b.option.StorageType): Promise<[tt4b.core.Row[], tt4b.core.Row[]]> { + const target = this.holder.get(type) + if (!target) return [[], []] + const tabs = await this.select({ virtual: true }) + await target.forceUpdate(...tabs) + const groups = await this.selectGroup() + await target.forceUpdateGroup(...groups) + return [tabs, groups] + } + + async afterStorageMigrated([tabs, groups]: [tt4b.core.Row[], tt4b.core.Row[]]): Promise { + await this.#current.delete(...tabs) + const groupKeys = groups.map(({ host, date }) => [parseInt(host), date] satisfies [number, string]) + await this.#current.deleteGroup(...groupKeys) + } + + async importData(data: unknown): Promise { + const rows = this.parseImportRows(data) + await this.#current.forceUpdate(...rows) + } + + async exportData(): Promise { + return this.#current.select({ virtual: true }) + } + + private parseImportRows(data: unknown): tt4b.core.Row[] { + if (!isExportData(data)) return [] + if (isLegacyVersion(data)) { + return parseImportData(data) ?? [] + } + + if (!(this.namespace in data)) return [] + + const nsData = extractNamespace(data, this.namespace, isValidImportRows) ?? [] + const rows: tt4b.core.Row[] = [] + for (const item of nsData) { + const row: tt4b.core.Row = { + host: item.host, + date: item.date, + time: item.time ?? 0, + focus: item.focus ?? 0, + run: item.run ?? 0, + } + isNotZeroResult(row) && rows.push(row) + } + return rows + } +} + +const statDatabase: StateDatabaseComposite = new StatDatabaseWrapper() + +export default statDatabase + +export * from "./types" diff --git a/src/background/database/stat-database/types.ts b/src/background/database/stat-database/types.ts new file mode 100644 index 000000000..a032c138f --- /dev/null +++ b/src/background/database/stat-database/types.ts @@ -0,0 +1,73 @@ + +export type StatCondition = { + /** + * Date + * {y}{m}{d} + */ + date?: string | [string?, string?] + /** + * Focus range, milliseconds + * + * @since 0.0.9 + */ + focusRange?: Vector<2> + /** + * Time range + * + * @since 0.0.9 + */ + timeRange?: [number, number?] + /** + * Whether to include virtual sites + * + * @since 1.6.1 + */ + virtual?: boolean + /** + * Host or groupId, full match + */ + keys?: string[] | string +} + +export interface StatDatabase { + get(host: string, date: Date): Promise + batchSelect(keys: tt4b.core.RowKey[]): Promise + select(condition?: StatCondition): Promise + /** + * Accumulate data + */ + accumulate(host: string, date: Date | string, item: tt4b.core.Result): Promise + batchAccumulate(data: Record, date: Date | string): Promise> + delete(...rows: tt4b.core.RowKey[]): Promise + /** + * Delete by host + * + * @param host host + * @param range date range, inclusive start and end, if null, delete all + * @return dates to deleted + */ + deleteByHost(host: string, range?: string | [string?, string?]): Promise + /** + * Delete group data + * + * @param groupId the id of group + * @param range date range, inclusive start and end, if null, delete all + */ + deleteByGroup(groupId: number, range?: string | [string?, string?]): Promise + /******* GROUP *******/ + /** + * Accumulate data for tab group + */ + accumulateGroup(groupId: number, date: Date | string, item: tt4b.core.Result): Promise + selectGroup(condition?: StatCondition): Promise + deleteGroup(...rows: [groupId: number, date: string][]): Promise + /** + * Force update data with overwriting + */ + forceUpdate(...rows: tt4b.core.Row[]): Promise + + /** + * Force update group data with overwriting + */ + forceUpdateGroup(...rows: tt4b.core.Row[]): Promise +} \ No newline at end of file diff --git a/src/background/database/timeline-database.ts b/src/background/database/timeline-database.ts new file mode 100644 index 000000000..23536ef47 --- /dev/null +++ b/src/background/database/timeline-database.ts @@ -0,0 +1,141 @@ +import { MILL_PER_DAY, MILL_PER_SECOND } from '@util/time' +import { + BaseIDBStorage, iterateCursor, req2Promise, + type Index, type IndexResult, type Key, type Table, +} from './common/indexed-storage' + +type TimelineCondition = { + host?: string + /** + * Start time in milliseconds, inclusive + */ + start?: number +} + +const TIME_LIFE_CYCLE = MILL_PER_DAY * 366 + +// If two tick with the same host is near 1 sec, then merge them to one +const MERGE_THRESHOLD = MILL_PER_SECOND + +const canMerge = (exist: tt4b.timeline.Tick, tick: tt4b.timeline.Tick) => { + const { start: existStart, host: existHost } = exist + const { start, host } = tick + return existHost === host && start >= existStart && start <= existStart + MERGE_THRESHOLD +} + +const isConflict = (item: tt4b.timeline.Tick, tick: tt4b.timeline.Tick) => { + const { start: itemStart, duration: itemDuration } = item + const { start } = tick + return itemStart <= start && start < itemStart + itemDuration +} + +type IndexCoverage = { + host?: boolean + start?: boolean +} + +class CleanThrottle { + private lastTime = 0 + private readonly interval: number = MILL_PER_DAY + + tryClean(doClean: () => void): void { + const now = Date.now() + if (now - this.lastTime >= this.interval) { + this.lastTime = now + doClean() + } + } +} + +class TimelineDatabase extends BaseIDBStorage { + indexes: Index[] = [ + 'host', 'start', + ] + key: Key | Key[] = ['host', 'start'] + table: Table = 'timeline' + private cleanThrottle = new CleanThrottle() + + batchSave(ticks: tt4b.timeline.Tick[]): Promise { + return this.withStore(async store => { + const index = this.assertIndex(store, 'host') + const hosts = Array.from(new Set(ticks.map(tick => tick.host))) + + // Fetch existing records for all hosts + const existByHost = new Map() + await Promise.all(hosts.map(async host => { + const req = index.getAll(IDBKeyRange.only(host)) + const exist = await req2Promise(req) + exist && existByHost.set(host, exist) + })) + + const toSave: tt4b.timeline.Tick[] = [] + const toDelete: tt4b.timeline.Tick[] = [] + ticks.forEach(tick => { + const existForHost = existByHost.get(tick.host) ?? [] + + // Check if there's any conflict + const anyConflict = existForHost.some(exist => isConflict(exist, tick)) + if (anyConflict) return + + // Find a record that can be merged + const mergeTarget = existForHost.find(exist => canMerge(exist, tick)) + if (mergeTarget) { + toDelete.push(mergeTarget) + const { host, start, duration } = tick + const newStart = Math.min(mergeTarget.start, start) + const newEnd = Math.max(mergeTarget.start + mergeTarget.duration, start + duration) + const newDuration = newEnd - newStart + toSave.push({ host, start: newStart, duration: newDuration }) + } else { + // No conflict and no merge, save the new tick + toSave.push(tick) + } + }) + toDelete.forEach(tick => store.delete([tick.host, tick.start])) + toSave.forEach(tick => store.put(tick)) + }, 'readwrite') + } + + async select(cond?: TimelineCondition): Promise { + const rows = await this.withStore(async store => { + const { cursorReq, coverage = {} } = this.#judgeIndex(store, cond) + const rows = await iterateCursor(cursorReq) + const { start: cs, host: ch } = cond ?? {} + return rows.filter(tick => { + const { host, start } = tick + if (cs && !coverage.start && start < cs) return false + if (ch && !coverage.host && host !== ch) return false + return true + }) + }, 'readonly') + + // Cleanup outdated ticks periodically + this.cleanThrottle.tryClean(() => this.withStore(store => { + const index = this.assertIndex(store, 'start') + const req = index.openCursor(IDBKeyRange.upperBound(Date.now() - TIME_LIFE_CYCLE, true)) + iterateCursor(req, cursor => { cursor.delete() }) + }, 'readwrite').catch(e => console.error('Failed to cleanup outdated ticks', e))) + return rows + } + + #judgeIndex(store: IDBObjectStore, cond?: TimelineCondition): IndexResult { + const { host, start } = cond ?? {} + if (host) { + return { + cursorReq: this.assertIndexCursor(store, 'host', IDBKeyRange.only(host)), + coverage: { host: true }, + } + } else if (start !== undefined && start > 0) { + return { + cursorReq: this.assertIndexCursor(store, 'start', IDBKeyRange.lowerBound(start, false)), + coverage: { start: true }, + } + } else { + return { cursorReq: store.openCursor() } + } + } +} + +const timelineDatabase = new TimelineDatabase() + +export default timelineDatabase \ No newline at end of file diff --git a/src/background/database/types.d.ts b/src/background/database/types.d.ts new file mode 100644 index 000000000..5abf2b8c6 --- /dev/null +++ b/src/background/database/types.d.ts @@ -0,0 +1,35 @@ +/** + * Migrate data among storages (chrome.storage.local / IndexedDB) + * + * @since 4.0.0 + */ +export interface StorageMigratable { + /** + * Migrate data to target storage + * + * NOTE: MUST NOT change the inner storage type + * + * @param type the type of target storage + */ + migrateStorage(type: tt4b.option.StorageType): Promise + /** + * Handler after migration finished. Clean the old data here + * + * @param allData + */ + afterStorageMigrated(allData: AllData): Promise +} + +export type BrowserMigratableNamespace = keyof Omit + +/** + * Migrate data among browsers (export / import) + */ +export interface BrowserMigratable { + /** + * The name space for migration + */ + namespace: N + exportData(): Promise[N]> + importData(data: unknown): Promise +} \ No newline at end of file diff --git a/src/database/whitelist-database.ts b/src/background/database/whitelist-database.ts similarity index 54% rename from src/database/whitelist-database.ts rename to src/background/database/whitelist-database.ts index 47aff8c4a..afc61f656 100644 --- a/src/database/whitelist-database.ts +++ b/src/background/database/whitelist-database.ts @@ -5,10 +5,14 @@ * https://opensource.org/licenses/MIT */ +import { isStringArray } from 'typescript-guard' import BaseDatabase from "./common/base-database" import { WHITELIST_KEY } from "./common/constant" +import { extractNamespace, isExportData, isLegacyVersion } from './common/migratable' +import type { BrowserMigratable } from './types' -class WhitelistDatabase extends BaseDatabase { +class WhitelistDatabase extends BaseDatabase implements BrowserMigratable<'__whitelist__'> { + namespace: '__whitelist__' = '__whitelist__' private async update(toUpdate: string[]): Promise { await this.setByKey(WHITELIST_KEY, toUpdate || []) @@ -19,6 +23,10 @@ class WhitelistDatabase extends BaseDatabase { return exist || [] } + async saveAll(toSave: string[]): Promise { + await this.update(toSave) + } + async add(white: string): Promise { const exist = await this.selectAll() if (exist.includes(white)) return @@ -36,28 +44,28 @@ class WhitelistDatabase extends BaseDatabase { return exist?.includes(white) } + async importData(data: unknown): Promise { + if (!isExportData(data)) return + const toImport = isLegacyVersion(data) + ? this.parseLegacyData(data) + : extractNamespace(data, this.namespace, isStringArray) + + const exist = await this.selectAll() + toImport?.forEach(white => !exist.includes(white) && exist.push(white)) + + await this.update(exist) + } + /** - * Add listener to listen changes - * - * @since 0.1.9 + * @deprecated Only for legacy data, will be removed in future version */ - addChangeListener(listener: (whitelist: string[]) => void) { - const storageListener = ( - changes: { [key: string]: chrome.storage.StorageChange }, - _areaName: chrome.storage.AreaName, - ) => { - const changeInfo = changes[WHITELIST_KEY] - changeInfo && listener(changeInfo.newValue || []) - } - chrome.storage.onChanged.addListener(storageListener) + private parseLegacyData(data: tt4b.backup.ExportData): string[] { + const toMigrate = (data as any)[WHITELIST_KEY] + return isStringArray(toMigrate) ? toMigrate : [] } - async importData(data: any): Promise { - const toMigrate = data[WHITELIST_KEY] - if (!Array.isArray(toMigrate)) return - const exist = await this.selectAll() - toMigrate.forEach(white => !exist.includes(white) && exist.push(white)) - await this.update(exist) + exportData(): Promise { + return this.selectAll() } } diff --git a/src/background/i18n.ts b/src/background/i18n.ts new file mode 100644 index 000000000..3d972d8d4 --- /dev/null +++ b/src/background/i18n.ts @@ -0,0 +1,9 @@ +import { t as _t, type I18nKey as _I18nKey } from "@i18n" +import messages, { type BgMessage } from "@i18n/message/bg" + +export type I18nKey = _I18nKey + +export function t(key: I18nKey, param?: any) { + const props = { key, param } + return _t(messages, props) +} \ No newline at end of file diff --git a/src/background/icon-and-alias-collector.ts b/src/background/icon-and-alias-collector.ts deleted file mode 100644 index c3a65cc69..000000000 --- a/src/background/icon-and-alias-collector.ts +++ /dev/null @@ -1,51 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { getTab } from "@api/chrome/tab" -import siteService from "@service/site-service" -import { IS_ANDROID, IS_CHROME, IS_SAFARI } from "@util/constant/environment" -import { extractHostname, isBrowserUrl, isHomepage } from "@util/pattern" -import { extractSiteName } from "@util/site" - -function isUrl(title: string) { - return title.startsWith('https://') || title.startsWith('http://') || title.startsWith('ftp://') -} - -async function collectAlias(key: timer.site.SiteKey, tabTitle: string) { - if (!tabTitle) return - if (isUrl(tabTitle)) return - const siteName = extractSiteName(tabTitle, key.host) - siteName && await siteService.saveAlias(key, siteName, true) -} - -/** - * Process the tab - */ -async function processTabInfo(tab: ChromeTab): Promise { - let { favIconUrl, url, title } = tab - if (!url || !title) return - if (isBrowserUrl(url)) return - const hostInfo = extractHostname(url) - const host = hostInfo.host - if (!host) return - // localhost hosts with Chrome use cache, so keep the favIcon url undefined - IS_CHROME && /^localhost(:.+)?/.test(host) && (favIconUrl = undefined) - const siteKey: timer.site.SiteKey = { host, type: 'normal' } - favIconUrl && await siteService.saveIconUrl(siteKey, favIconUrl) - !isBrowserUrl(url) - && isHomepage(url) - && await collectAlias(siteKey, title) -} - -/** - * Collect the favicon of host - */ -export const collectIconAndAlias = async (tabId: number) => { - if (IS_SAFARI || IS_ANDROID) return - const tab = await getTab(tabId) - tab && processTabInfo(tab) -} \ No newline at end of file diff --git a/src/background/index.ts b/src/background/index.ts index bcf2d4337..8aa6060e7 100644 --- a/src/background/index.ts +++ b/src/background/index.ts @@ -5,32 +5,25 @@ * https://opensource.org/licenses/MIT */ -import { listTabs } from "@api/chrome/tab" -import { isNoneWindowId, onNormalWindowFocusChanged } from "@api/chrome/window" -import optionHolder from "@service/components/option-holder" -import { isBrowserUrl } from "@util/pattern" -import { openLog } from "../common/logger" -import ActiveTabListener from "./active-tab-listener" -import BackupScheduler from "./backup-scheduler" -import badgeTextManager from "./badge-manager" -import initBrowserAction from "./browser-action-manager" +import { trySendMsg2Tab } from "@api/chrome/tab" +import { initBrowserAction, initSidePanel } from './action' +import badgeManager from "./badge-manager" import initCsHandler from "./content-script-handler" import initDataCleaner from "./data-cleaner" -import handleInstall from "./install-handler" +import { initAfterInstalled } from './install-handler' import initLimitProcessor from "./limit-processor" import MessageDispatcher from "./message-dispatcher" -import VersionMigrator from "./migrator" -import initSidePanel from "./side-panel" +import { initScheduler } from './scheduler' +import TabListener from './tab-listener' import initTrackServer from "./track-server" import initWhitelistMenuManager from "./whitelist-menu-manager" -// Open the log of console -openLog() +initAfterInstalled() -// Init side panel +// Initialize side panel initSidePanel() -// Init browser action +// Initialize context menu and icon action initBrowserAction() // Init data cleaner @@ -47,38 +40,20 @@ initCsHandler(messageDispatcher) // Start server initTrackServer(messageDispatcher) -// Process version -new VersionMigrator().init() - -// Backup scheduler -new BackupScheduler().init() +// scheduler +initScheduler() // Manage the context menus initWhitelistMenuManager() // Badge manager -badgeTextManager.init(messageDispatcher) - -// Listen to tab active changed -new ActiveTabListener() - .register(({ url, tabId }) => badgeTextManager.updateFocus({ url, tabId })) - .listen() +badgeManager.init(messageDispatcher) -handleInstall() +// Listen to tab changed +new TabListener() + .onActivated(({ url, tabId }) => badgeManager.updateFocus({ url, tabId })) + .onUpdated((tabId, { audible }) => audible !== undefined && trySendMsg2Tab(tabId, 'syncAudible', audible)) + .start() // Start message dispatcher messageDispatcher.start() - -// Listen window focus changed -onNormalWindowFocusChanged(async windowId => { - if (isNoneWindowId(windowId)) return - const tabs = await listTabs({ windowId, active: true }) - tabs.forEach(tab => { - const { url, id: tabId } = tab - if (!url || isBrowserUrl(url) || !tabId) return - badgeTextManager.updateFocus({ url, tabId }) - }) -}) - -// listen permission change event -optionHolder.listenPermChange() \ No newline at end of file diff --git a/src/background/install-handler/index.ts b/src/background/install-handler/index.ts index de3c44b55..68bdc7433 100644 --- a/src/background/install-handler/index.ts +++ b/src/background/install-handler/index.ts @@ -1,33 +1,42 @@ -import { onInstalled } from "@api/chrome/runtime" +import { locale } from '@/i18n' +import { onInstalled, setUninstallURL } from "@api/chrome/runtime" import { executeScript } from "@api/chrome/script" import { createTabAfterCurrent, listTabs } from "@api/chrome/tab" -import metaService from "@service/meta-service" +import { updateInstallTime } from "@service/meta-service" import { IS_E2E, IS_FROM_STORE } from "@util/constant/environment" -import { getGuidePageUrl } from "@util/constant/url" +import { getGuidePageUrl, UNINSTALL_QUESTIONNAIRE } from "@util/constant/url" import { isBrowserUrl } from "@util/pattern" -import UninstallListener from './uninstall-listener' +import versionManager from './version' async function onFirstInstall() { - metaService.updateInstallTime(new Date()) + updateInstallTime(Date.now()) !IS_E2E && createTabAfterCurrent(getGuidePageUrl()) } async function reloadContentScript() { const files = chrome.runtime.getManifest().content_scripts?.[0]?.js - if (!files?.length) { - return - } + if (!files?.length) return const tabs = await listTabs() tabs.filter(({ url }) => url && !isBrowserUrl(url)) .forEach(({ id: tabId }) => tabId && executeScript(tabId, files)) } -export default function handleInstall() { +function initQuestionnaire() { + try { + setUninstallURL(UNINSTALL_QUESTIONNAIRE[locale] ?? UNINSTALL_QUESTIONNAIRE['en']) + } catch (e) { + console.error("Failed to set uninstall URL", e) + } +} + +export function initAfterInstalled() { onInstalled(async reason => { reason === "install" && await onFirstInstall() // Questionnaire for uninstall - new UninstallListener().listen() + initQuestionnaire() // Reload content-script IS_FROM_STORE && await reloadContentScript() + // Initialize with version + versionManager.handle(reason) }) } \ No newline at end of file diff --git a/src/background/install-handler/uninstall-listener.ts b/src/background/install-handler/uninstall-listener.ts deleted file mode 100644 index 34b9eb16d..000000000 --- a/src/background/install-handler/uninstall-listener.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { setUninstallURL } from "@api/chrome/runtime" -import { locale } from "@i18n" -import { UNINSTALL_QUESTIONNAIRE } from "@util/constant/url" - -async function listen() { - try { - const uninstallUrl = UNINSTALL_QUESTIONNAIRE[locale] || UNINSTALL_QUESTIONNAIRE['en'] - uninstallUrl && setUninstallURL(uninstallUrl) - } catch (e) { - console.error(e) - } -} - -/** - * @since 0.9.6 - */ -export default class UninstallListener { - listen = listen -} diff --git a/src/background/migrator/cate-initializer.ts b/src/background/install-handler/version/cate-initializer.ts similarity index 70% rename from src/background/migrator/cate-initializer.ts rename to src/background/install-handler/version/cate-initializer.ts index d42cb61f4..d7f25be2f 100644 --- a/src/background/migrator/cate-initializer.ts +++ b/src/background/install-handler/version/cate-initializer.ts @@ -1,6 +1,6 @@ -import cateService from "@service/cate-service" -import siteService from "@service/site-service" -import { Migrator } from "./common" +import cateDatabase from '@db/cate-database' +import { batchChangeCate } from '@service/site-service' +import type { Migrator } from "./types" type InitialCate = { name: string @@ -31,10 +31,10 @@ const DEMO_ITEMS: InitialCate[] = [ async function initItem(item: InitialCate) { const { name, hosts } = item - const cate = await cateService.add(name) + const cate = await cateDatabase.add(name) const cateId = cate.id - const siteKeys = hosts.map(host => ({ host, type: 'normal' } satisfies timer.site.SiteKey)) - await siteService.batchSaveCate(cateId, siteKeys) + const siteKeys = hosts.map(host => ({ host, type: 'normal' } satisfies tt4b.site.SiteKey)) + await batchChangeCate(cateId, siteKeys) } export default class CateInitializer implements Migrator { @@ -44,7 +44,6 @@ export default class CateInitializer implements Migrator { } } - onUpdate(version: string): void { - version === '3.0.1' && this.onInstall() + onUpdate(_version: string): void { } } \ No newline at end of file diff --git a/src/background/migrator/host-merge-initializer.ts b/src/background/install-handler/version/host-merge-initializer.ts similarity index 94% rename from src/background/migrator/host-merge-initializer.ts rename to src/background/install-handler/version/host-merge-initializer.ts index 31d5af773..37b54d403 100644 --- a/src/background/migrator/host-merge-initializer.ts +++ b/src/background/install-handler/version/host-merge-initializer.ts @@ -6,7 +6,7 @@ */ import mergeRuleDatabase from "@db/merge-rule-database" -import { type Migrator } from "./common" +import type { Migrator } from "./types" /** * v0.1.2 diff --git a/src/background/migrator/index.ts b/src/background/install-handler/version/index.ts similarity index 74% rename from src/background/migrator/index.ts rename to src/background/install-handler/version/index.ts index 3884040fd..daf126b15 100644 --- a/src/background/migrator/index.ts +++ b/src/background/install-handler/version/index.ts @@ -5,12 +5,11 @@ * https://opensource.org/licenses/MIT */ -import { getVersion, onInstalled } from "@api/chrome/runtime" +import { getVersion } from "@api/chrome/runtime" import CateInitializer from "./cate-initializer" -import { type Migrator } from "./common" import HostMergeInitializer from "./host-merge-initializer" -import LimitRuleMigrator from "./limit-rule-migrator" import LocalFileInitializer from "./local-file-initializer" +import type { Migrator } from "./types" import WhitelistInitializer from "./whitelist-initializer" /** @@ -27,11 +26,10 @@ class VersionManager { new LocalFileInitializer(), new WhitelistInitializer(), new CateInitializer(), - new LimitRuleMigrator(), ) } - private onChromeInstalled(reason: ChromeOnInstalledReason) { + handle(reason: ChromeOnInstalledReason) { const version: string = getVersion() if (reason === 'update') { // Update, process the latest version, which equals to current version @@ -41,10 +39,8 @@ class VersionManager { this.processorChain.forEach(processor => processor.onInstall()) } } - - init() { - onInstalled(reason => this.onChromeInstalled(reason)) - } } -export default VersionManager \ No newline at end of file +const versionManager = new VersionManager() + +export default versionManager \ No newline at end of file diff --git a/src/background/migrator/local-file-initializer.ts b/src/background/install-handler/version/local-file-initializer.ts similarity index 85% rename from src/background/migrator/local-file-initializer.ts rename to src/background/install-handler/version/local-file-initializer.ts index 0ee28e495..4a19e57fa 100644 --- a/src/background/migrator/local-file-initializer.ts +++ b/src/background/install-handler/version/local-file-initializer.ts @@ -7,9 +7,9 @@ import mergeRuleDatabase from "@db/merge-rule-database" import { t2Chrome } from "@i18n/chrome/t" -import siteService from "@service/site-service" +import { saveAlias } from '@service/site-service' import { JSON_HOST, LOCAL_HOST_PATTERN, MERGED_HOST, PDF_HOST, PIC_HOST, TXT_HOST } from "@util/constant/remain-host" -import { type Migrator } from "./common" +import { type Migrator } from "./types" /** * Process the host of local files @@ -27,19 +27,19 @@ export default class LocalFileInitializer implements Migrator { merged: MERGED_HOST, }).then(() => console.log('Local file merge rules initialized')) // Add site name - siteService.saveAlias( + saveAlias( { host: PDF_HOST, type: 'normal' }, t2Chrome(msg => msg.initial.localFile.pdf), ) - siteService.saveAlias( + saveAlias( { host: JSON_HOST, type: 'normal' }, t2Chrome(msg => msg.initial.localFile.json), ) - siteService.saveAlias( + saveAlias( { host: PIC_HOST, type: 'normal' }, t2Chrome(msg => msg.initial.localFile.pic), ) - siteService.saveAlias( + saveAlias( { host: TXT_HOST, type: 'normal' }, t2Chrome(msg => msg.initial.localFile.txt), ) diff --git a/src/background/migrator/common.ts b/src/background/install-handler/version/types.ts similarity index 100% rename from src/background/migrator/common.ts rename to src/background/install-handler/version/types.ts diff --git a/src/background/install-handler/version/whitelist-initializer.ts b/src/background/install-handler/version/whitelist-initializer.ts new file mode 100644 index 000000000..ccce09ae4 --- /dev/null +++ b/src/background/install-handler/version/whitelist-initializer.ts @@ -0,0 +1,11 @@ +import whitelistHolder from '@service/whitelist/holder' +import type { Migrator } from "./types" + +export default class WhitelistInitializer implements Migrator { + onInstall(): void { + whitelistHolder.add('localhost:*/**') + } + + onUpdate(_version: string): void { + } +} \ No newline at end of file diff --git a/src/background/limit-processor.ts b/src/background/limit-processor.ts index 3723b35a8..bb8c72b55 100644 --- a/src/background/limit-processor.ts +++ b/src/background/limit-processor.ts @@ -5,71 +5,36 @@ * https://opensource.org/licenses/MIT */ -import { createTabAfterCurrent, getRightOf, listTabs, resetTabUrl, sendMsg2Tab } from "@api/chrome/tab" -import { LIMIT_ROUTE } from "@app/router/constants" -import limitService from "@service/limit-service" -import { getAppPageUrl } from "@util/constant/url" +import { listTabs, sendMsg2Tab } from "@api/chrome/tab" +import { getSite } from '@service/site-service' import { matches } from "@util/limit" -import { isBrowserUrl } from "@util/pattern" -import { getStartOfDay, MILL_PER_DAY, MILL_PER_SECOND } from "@util/time" +import { extractHostname } from '@util/pattern' +import { getStartOfDay, MILL_PER_DAY } from "@util/time" import alarmManager from "./alarm-manager" import MessageDispatcher from "./message-dispatcher" +import { + createLimitRule, delayLimit, noticeLimitChanged, removeLimitRules, selectLimit, updateLimitRules, +} from "./service/limit-service" -function processLimitWaking(rules: timer.limit.Item[], tab: ChromeTab): void { - const { url, id: tabId } = tab - if (!url || !tabId) return - const anyMatch = rules.map(rule => matches(rule?.cond, url)).reduce((a, b) => a || b, false) - if (!anyMatch) { - return - } - sendMsg2Tab(tabId, 'limitWaking', rules) - .then(() => console.log(`Waked tab[id=${tab.id}]`)) - .catch(err => console.error(`Failed to wake with limit rule: rules=${JSON.stringify(rules)}, msg=${err.msg}`)) -} - -async function processOpenPage(limitedUrl: string, sender: ChromeMessageSender) { - const originTab = sender?.tab - if (!originTab) return - const realUrl = getAppPageUrl(LIMIT_ROUTE, { url: encodeURI(limitedUrl) }) - const baseUrl = getAppPageUrl(LIMIT_ROUTE) - const rightTab = await getRightOf(originTab) - const { id: rightId, url: rightUrl } = rightTab || {} - if (rightId && rightUrl && isBrowserUrl(rightUrl) && rightUrl.includes(baseUrl)) { - // Reset url - await resetTabUrl(rightId, realUrl) - } else { - await createTabAfterCurrent(realUrl, sender?.tab) - } -} function initDailyBroadcast() { // Broadcast rules at the start of each day alarmManager.setWhen( 'limit-daily-broadcast', - () => { - const startOfThisDay = getStartOfDay(new Date()) - return startOfThisDay.getTime() + MILL_PER_DAY - }, - () => limitService.broadcastRules(), + () => getStartOfDay(new Date()) + MILL_PER_DAY, + noticeLimitChanged, ) } -const processMoreMinutes = async (url: string) => { - const rules = await limitService.moreMinutes(url) - - const tabs = await listTabs({ status: 'complete' }) - tabs.forEach(tab => processLimitWaking(rules, tab)) -} - -const processAskHitVisit = async (item: timer.limit.Item) => { +const processAskHitVisit = async (item: tt4b.limit.Item) => { let tabs = await listTabs() - const { visitTime = 0, cond } = item || {} + const { cond } = item for (const { id, url } of tabs) { try { if (!url || !matches(cond, url) || !id) continue - const tabFocus = await sendMsg2Tab(id, "askVisitTime") - if (tabFocus && tabFocus > visitTime * MILL_PER_SECOND) return true + const visitHit = await sendMsg2Tab(id, "askVisitHit", item.id) + if (visitHit) return true } catch { // Ignored } @@ -77,12 +42,27 @@ const processAskHitVisit = async (item: timer.limit.Item) => { return false } +async function querySummary(): Promise { + const tabs = await listTabs({ currentWindow: true, active: true }) + const url = tabs[0]?.url + if (!url) return undefined + + const { host } = extractHostname(url) + const site = await getSite({ host, type: 'normal' }) + const items = await selectLimit({ url, effective: true }) + + return { url, site, items } +} + export default function init(dispatcher: MessageDispatcher) { initDailyBroadcast() + dispatcher - .register('openLimitPage', processOpenPage) - // More minutes - .register('cs.moreMinutes', processMoreMinutes) - // Judge any tag hit the time limit per visit - .register("askHitVisit", processAskHitVisit) + .register('limit.list', selectLimit) + .register('limit.delete', removeLimitRules) + .register('limit.update', updateLimitRules) + .register('limit.add', createLimitRule) + .register('limit.hitVisit', processAskHitVisit) + .register('limit.delay', delayLimit) + .register('limit.summary', querySummary) } \ No newline at end of file diff --git a/src/background/message-dispatcher.ts b/src/background/message-dispatcher.ts index 7ee147690..5e15c1d4c 100644 --- a/src/background/message-dispatcher.ts +++ b/src/background/message-dispatcher.ts @@ -5,35 +5,154 @@ * https://opensource.org/licenses/MIT */ +import { log } from '@/common/logger' import { onRuntimeMessage } from "@api/chrome/runtime" +import cateDatabase from './database/cate-database' +import { getUsedStorage } from './database/memory-detector' +import mergeRuleDatabase from "./database/merge-rule-database" +import siteDatabase from './database/site-database' +import statDatabase from './database/stat-database' +import { check2faCode, prepare2fa } from "./service/2fa-service" +import backupProcessor from "./service/backup/processor" +import { exportData, importData, migrateStorage } from "./service/components/immigration" +import { importOther, previewBackup } from "./service/components/import-processor" +import optionHolder from "./service/components/option-holder" +import { getWeekStartDay, getWeekStartTime } from "./service/components/week-helper" +import { getTodayResult } from './service/item-service' +import { getInstallTime, getLastBackUp } from "./service/meta-service" +import notificationProcessor from './service/notification/processor' +import { selectPeriods } from "./service/period-service" +import { + addSite, batchChangeCate, fillInitialAlias, getInitialAlias, getSite, removeIconUrl, removeSites, saveAlias, + saveSiteRunState, searchSites, selectSitePage, +} from "./service/site-service" +import { + batchDelete, countGroup, countSite, selectCate, selectCatePage, selectGroup, selectGroupPage, selectSite, + selectSitePage as selectStateSitePage, +} from "./service/stat-service" +import timelineThrottler from './service/throttler/timeline-throttler' +import { listTimeline } from "./service/timeline-service" +import whitelistHolder from './service/whitelist/holder' + +function processParam(param: unknown): unknown { + if (param === null || param === undefined) { + return undefined + } + const startTs = Date.now() + // Convert null to undefined, because null can't be serialized in chrome.runtime.sendMessage + const json = JSON.stringify(param) + const result = JSON.parse(json, (_key, val) => val ?? undefined) + log(`Processed param in ${Date.now() - startTs}ms`) + return result +} class MessageDispatcher { - private handlers: Partial<{ - [code in timer.mq.ReqCode]: timer.mq.Handler - }> = {} + private handlers: Partial>> = {} - register(code: timer.mq.ReqCode, handler: timer.mq.Handler): MessageDispatcher { + constructor() { + this.initServiceHandlers() + } + + register(code: C, handler: tt4b.mq.Handler): MessageDispatcher { if (this.handlers[code]) { - throw new Error("Duplicate handler") + throw new Error(`Duplicate handler: code=${code}`) } - this.handlers[code] = handler + this.handlers[code] = handler as unknown as tt4b.mq.Handler return this } - private async handle(message: timer.mq.Request, sender: ChromeMessageSender): Promise> { + private initServiceHandlers() { + this + // Statistics + .register('stat.sites', selectSite) + .register('stat.sitePage', selectStateSitePage) + .register('stat.countSite', countSite) + .register('stat.deleteSite', param => 'host' in param + ? statDatabase.deleteByHost(param.host, param.date) + : statDatabase.deleteByGroup(param.groupId, param.date)) + .register('stat.cates', selectCate) + .register('stat.catePage', selectCatePage) + .register('stat.groups', selectGroup) + .register('stat.groupPage', selectGroupPage) + .register('stat.countGroup', countGroup) + .register('stat.batchDelete', batchDelete) + .register('stat.today', getTodayResult) + .register('item.batch', keys => statDatabase.batchSelect(keys)) + // Site management + .register('site.list', param => siteDatabase.select(param)) + .register('site.page', selectSitePage) + .register('site.add', addSite) + .register('site.delete', removeSites) + .register('site.changeCate', ({ cateId, keys }) => batchChangeCate(cateId, keys)) + .register('site.deleteIcon', removeIconUrl) + .register('site.changeAlias', ({ key, alias }) => saveAlias(key, alias)) + .register('site.fillAlias', fillInitialAlias) + .register('site.initialAlias', getInitialAlias) + .register('site.changeRun', ({ key, enabled }) => saveSiteRunState(key, enabled)) + .register('site.runEnabled', host => getSite({ host, type: 'normal' }).then(s => !!s.run)) + .register('site.search', searchSites) + // Options + .register('option.get', () => optionHolder.get()) + .register('option.set', val => optionHolder.set(val)) + .register('option.changeStorage', migrateStorage) + .register('option.testNotification', () => notificationProcessor.doSend()) + .register('option.weekStartDay', getWeekStartDay) + .register('option.weekStartTime', getWeekStartTime) + // Category + .register('cate.all', () => cateDatabase.listAll()) + .register('cate.add', name => cateDatabase.add(name)) + .register('cate.change', ({ id, name }) => cateDatabase.update(id, name)) + .register('cate.delete', id => cateDatabase.delete(id)) + // Meta information + .register('meta.installTs', getInstallTime) + .register('meta.usedStorage', getUsedStorage) + .register('meta.prepare2fa', prepare2fa) + .register('meta.check2fa', check2faCode) + // Whitelist & Merge Rule + .register('whitelist.contain', ({ host, url }) => whitelistHolder.contains(host, url)) + .register('whitelist.all', () => whitelistHolder.all()) + .register('whitelist.add', white => whitelistHolder.add(white)) + .register('whitelist.delete', white => whitelistHolder.remove(white)) + .register('whitelist.save', list => whitelistHolder.saveAll(list)) + // Merge rule + .register('merge.all', () => mergeRuleDatabase.selectAll()) + .register('merge.delete', origin => mergeRuleDatabase.remove(origin)) + .register('merge.add', rule => mergeRuleDatabase.add(rule)) + // Backup + .register('backup.sync', () => backupProcessor.syncData()) + .register('backup.checkAuth', () => backupProcessor.checkAuth().then(res => res.errorMsg)) + .register('backup.clear', cid => backupProcessor.clear(cid)) + .register('backup.query', param => backupProcessor.query(param)) + .register('backup.lastTs', getLastBackUp) + .register('backup.clients', () => backupProcessor.listClients()) + .register('backup.preview', previewBackup) + // Period & Timeline + .register('period.list', selectPeriods) + .register('timeline.list', listTimeline) + .register('timeline.tick', ev => timelineThrottler.saveEvent(ev)) + // Data immigration + .register('immigration.import', importData) + .register('immigration.export', exportData) + .register('immigration.importOther', importOther) + } + + private async handle(message: tt4b.mq.Request, sender: ChromeMessageSender): Promise> { const code = message?.code if (!code) { return { code: 'ignore' } } + log(`Received message: ${code} with data: `, message?.data) const handler = this.handlers[code] if (!handler) { + console.warn(`Handler not registered for code: ${code}`) return { code: 'ignore' } } try { - const result = await handler(message.data, sender) - return { code: 'success', data: result } + const data = processParam(message.data) + const result = await handler(data, sender) + return { code: 'success', data: result } as tt4b.mq.Response } catch (error) { - const msg = (error as Error)?.message ?? error?.toString?.() + const msg = error instanceof Error ? error.message : (error?.toString?.() ?? 'Unknown error') return { code: 'fail', msg } } } diff --git a/src/background/migrator/limit-rule-migrator.ts b/src/background/migrator/limit-rule-migrator.ts deleted file mode 100644 index 2dac2a865..000000000 --- a/src/background/migrator/limit-rule-migrator.ts +++ /dev/null @@ -1,35 +0,0 @@ -import limitService from "@service/limit-service" -import { cleanCond } from "@util/limit" -import type { Migrator } from "./common" - -export default class LimitRuleMigrator implements Migrator { - onInstall(): void { - } - - async onUpdate(_version: string): Promise { - const rules = await limitService.select() - if (!rules?.length) return - const needUpdate: timer.limit.Rule[] = [] - const needRemoved: timer.limit.Rule[] = [] - rules.forEach(async rule => { - const { cond } = rule - let changed = false - const newCond: string[] = [] - cond?.forEach(url => { - const clean = cleanCond(url) - changed = changed || clean !== url - clean && newCond.push(clean) - }) - if (!changed) return - if (rule.cond.length) { - rule.cond = newCond - needUpdate.push(rule) - } else { - needRemoved.push(rule) - } - - }) - needRemoved.length && await limitService.remove(...needRemoved) - needUpdate.length && await limitService.update(...needUpdate) - } -} \ No newline at end of file diff --git a/src/background/migrator/whitelist-initializer.ts b/src/background/migrator/whitelist-initializer.ts deleted file mode 100644 index 5b6da1b43..000000000 --- a/src/background/migrator/whitelist-initializer.ts +++ /dev/null @@ -1,12 +0,0 @@ -import whitelistService from "@service/whitelist/service" -import { type Migrator } from "./common" - -export default class WhitelistInitializer implements Migrator { - onInstall(): void { - whitelistService.add('localhost:*/**') - } - - onUpdate(version: string): void { - version === '2.5.7' && this.onInstall() - } -} \ No newline at end of file diff --git a/src/util/psl/index.ts b/src/background/psl/index.ts similarity index 82% rename from src/util/psl/index.ts rename to src/background/psl/index.ts index 18e2f56ed..e2b941cc7 100644 --- a/src/util/psl/index.ts +++ b/src/background/psl/index.ts @@ -1,7 +1,6 @@ -import { toASCII } from "punycode" import rules from "./rules.json" -export type PslNode = { +type PslNode = { // Children c?: PslTree // Is leaf @@ -14,7 +13,15 @@ const TREE: PslTree = rules type Chain = string | [string, boolean] -export const getSuffix = (origin: string): string | null => { +function toASCII(domain: string): string { + try { + return new URL(`http://${domain}`).hostname + } catch { + return domain + } +} + +export const getPslSuffix = (origin: string): string => { if (!origin) return origin const ascii = toASCII(origin) const parts = ascii.split(".") @@ -26,7 +33,7 @@ export const getSuffix = (origin: string): string | null => { return parts.splice(parts.length - partLen, partLen).join('.') } -export const get = (origin: string): string | null => { +export const getPsl = (origin: string): string | null => { if (!origin) return origin const ascii = toASCII(origin) const parts = ascii.split(".") @@ -40,6 +47,7 @@ export const get = (origin: string): string | null => { const get0 = (tree: PslTree, parts: string[], index: number, chains: Chain[]) => { const part = parts[index] + if (!part) return let pslNode = tree[part] if (!pslNode && !tree[`!${part}`]) { pslNode = tree['*'] diff --git a/src/util/psl/rules.json b/src/background/psl/rules.json similarity index 93% rename from src/util/psl/rules.json rename to src/background/psl/rules.json index 1b4489a5f..a98b3336c 100644 --- a/src/util/psl/rules.json +++ b/src/background/psl/rules.json @@ -172,6 +172,7 @@ "c": { "com": 1, "framer": 1, + "kiloapps": 1, "net": 1, "off": 1, "org": 1, @@ -244,12 +245,12 @@ "c": { "adaptable": 1, "aiven": 1, + "base44": 1, "beget": { "c": { "*": 1 } }, - "bookonline": 1, "botdash": 1, "brave": { "c": { @@ -261,9 +262,12 @@ }, "l": 1 }, + "claude": 1, "clerk": 1, "clerkstage": 1, + "cloudflare": 1, "convex": 1, + "corespeed": 1, "csb": { "c": { "preview": 1 @@ -292,12 +296,19 @@ }, "expo": { "c": { - "staging": 1 + "on": 1, + "staging": { + "c": { + "on": 1 + }, + "l": 1 + } }, "l": 1 }, "flutterflow": 1, "framer": 1, + "gadget": 1, "github": 1, "hackclub": 1, "hasura": 1, @@ -310,9 +321,11 @@ "loginline": 1, "lovable": 1, "luyani": 1, + "magicpatterns": 1, "medusajs": 1, "messerli": 1, - "netfy": 1, + "miren": 1, + "mocha": 1, "netlify": 1, "ngrok": 1, "ngrok-free": 1, @@ -325,6 +338,8 @@ "nyat": 1, "on-fleek": 1, "ondigitalocean": 1, + "onhercules": 1, + "pplx": 1, "railway": { "c": { "up": 1 @@ -346,6 +361,7 @@ } } }, + "shiptoday": 1, "snowflake": { "c": { "*": 1, @@ -356,7 +372,8 @@ } } }, - "storipress": 1, + "spawnbase": 1, + "sprites": 1, "streamlit": 1, "telebit": 1, "typedream": 1, @@ -367,7 +384,7 @@ }, "vercel": 1, "wal": 1, - "wdh": 1, + "wasmer": 1, "web": 1, "windsurf": 1, "wnext": 1, @@ -380,7 +397,86 @@ }, "l": 1 }, - "apple": 1, + "apple": { + "c": { + "int": { + "c": { + "cloud": { + "c": { + "*": 1, + "r": { + "c": { + "*": 1, + "ap-north-1": { + "c": { + "*": 1 + } + }, + "ap-south-1": { + "c": { + "*": 1 + } + }, + "ap-south-2": { + "c": { + "*": 1 + } + }, + "eu-central-1": { + "c": { + "*": 1 + } + }, + "eu-north-1": { + "c": { + "*": 1 + } + }, + "us-central-1": { + "c": { + "*": 1 + } + }, + "us-central-2": { + "c": { + "*": 1 + } + }, + "us-east-1": { + "c": { + "*": 1 + } + }, + "us-east-2": { + "c": { + "*": 1 + } + }, + "us-west-1": { + "c": { + "*": 1 + } + }, + "us-west-2": { + "c": { + "*": 1 + } + }, + "us-west-3": { + "c": { + "*": 1 + } + } + } + } + } + } + }, + "l": 1 + } + }, + "l": 1 + }, "aq": 1, "aquarelle": 1, "ar": { @@ -439,7 +535,7 @@ "associates": 1, "at": { "c": { - "4": 1, + "0.0.0.4": 1, "123webseite": 1, "12hp": 1, "2ix": 1, @@ -543,8 +639,7 @@ "hrsn": { "c": { "vps": 1 - }, - "l": 1 + } }, "id": 1, "net": 1, @@ -585,6 +680,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -595,6 +691,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -605,6 +702,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -615,6 +713,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -625,6 +724,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -635,6 +735,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -655,6 +756,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -665,6 +767,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -675,6 +778,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -698,6 +802,11 @@ "transfer-webapp": 1 } }, + "ap-southeast-7": { + "c": { + "transfer-webapp": 1 + } + }, "ca-central-1": { "c": { "airflow": { @@ -705,6 +814,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -725,6 +835,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -745,6 +856,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -755,6 +867,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -775,6 +888,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -785,6 +899,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -795,6 +910,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -825,6 +941,12 @@ "*": 1 } }, + "lambda-url": 1, + "transfer-webapp": 1 + } + }, + "mx-central-1": { + "c": { "transfer-webapp": 1 } }, @@ -835,6 +957,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -845,6 +968,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -855,6 +979,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -877,6 +1002,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } }, @@ -887,6 +1013,7 @@ "*": 1 } }, + "lambda-url": 1, "transfer-webapp": 1 } } @@ -1199,8 +1326,22 @@ "bcn": 1, "bd": { "c": { - "*": 1 - } + "ac": 1, + "ai": 1, + "co": 1, + "com": 1, + "edu": 1, + "gov": 1, + "id": 1, + "info": 1, + "it": 1, + "mil": 1, + "net": 1, + "org": 1, + "sch": 1, + "tv": 1 + }, + "l": 1 }, "be": { "c": { @@ -1217,6 +1358,7 @@ "ezproxy": 1 } }, + "my": 1, "myspreadshop": 1, "transurl": { "c": { @@ -1242,16 +1384,16 @@ }, "bg": { "c": { - "0": 1, - "1": 1, - "2": 1, - "3": 1, - "4": 1, - "5": 1, - "6": 1, - "7": 1, - "8": 1, - "9": 1, + "0.0.0.0": 1, + "0.0.0.1": 1, + "0.0.0.2": 1, + "0.0.0.3": 1, + "0.0.0.4": 1, + "0.0.0.5": 1, + "0.0.0.6": 1, + "0.0.0.7": 1, + "0.0.0.8": 1, + "0.0.0.9": 1, "a": 1, "b": 1, "barsy": 1, @@ -1698,6 +1840,7 @@ }, "build": { "c": { + "shiptoday": 1, "v0": 1, "windsurf": 1 }, @@ -1822,7 +1965,12 @@ }, "l": 1 }, - "case": 1, + "case": { + "c": { + "sav": 1 + }, + "l": 1 + }, "cash": 1, "casino": 1, "cat": 1, @@ -1833,13 +1981,17 @@ "cbre": 1, "cc": { "c": { + "ccwu": 1, "cleverapps": 1, "cloud-ip": 1, "cloudns": 1, "csx": 1, + "ec": 1, + "eu": 1, "fantasyleague": 1, "ftpaccess": 1, "game-server": 1, + "gu": 1, "myphotos": 1, "scrapping": 1, "spawn": { @@ -1847,12 +1999,16 @@ "instances": 1 } }, - "twmail": 1 + "sryze": 1, + "twmail": 1, + "uk": 1, + "us": 1 }, "l": 1 }, "cd": { "c": { + "cc": 1, "gov": 1 }, "l": 1 @@ -1945,6 +2101,7 @@ "net": 1, "or": 1, "org": 1, + "us": 1, "xn--aroport-bya": 1 }, "l": 1 @@ -1980,19 +2137,33 @@ "clothing": 1, "cloud": { "c": { + "antagonist": 1, "axarnet": { "c": { "es-1": 1 } }, - "convex": 1, + "begetcdn": { + "c": { + "*": 1 + } + }, + "convex": { + "c": { + "eu-west-1": 1, + "us-east-1": 1 + }, + "l": 1 + }, "diadem": 1, "elementor": 1, + "emergent": 1, "encoway": { "c": { "eu": 1 } }, + "hstgr": 1, "jelastic": { "c": { "vip": 1 @@ -2015,6 +2186,27 @@ }, "jote": 1, "jotelulu": 1, + "k2": { + "c": { + "elastic": 1, + "ru-msk": { + "c": { + "lb": 1, + "s3": 1, + "website": 1 + } + }, + "ru-spb": { + "c": { + "lb": 1, + "s3": 1, + "website": 1 + } + }, + "s3": 1, + "website": 1 + } + }, "keliweb": { "c": { "cs": 1 @@ -2232,6 +2424,11 @@ "emrnotebooks-prod": 1, "emrstudio-prod": 1, "execute-api": 1, + "rds": { + "c": { + "*": 1 + } + }, "s3": 1, "s3-accesspoint": 1, "s3-deprecated": 1, @@ -2251,6 +2448,11 @@ "emrnotebooks-prod": 1, "emrstudio-prod": 1, "execute-api": 1, + "rds": { + "c": { + "*": 1 + } + }, "s3": 1, "s3-accesspoint": 1, "s3-object-lambda": 1, @@ -2340,6 +2542,7 @@ "jl": 1, "js": 1, "jx": 1, + "khsj": 1, "ln": 1, "mil": 1, "mo": 1, @@ -2402,6 +2605,20 @@ "*": 1 } }, + "rdpa": { + "c": { + "clusters": { + "c": { + "*": 1 + } + }, + "srvrless": { + "c": { + "*": 1 + } + } + } + }, "repl": { "c": { "id": 1 @@ -2415,6 +2632,7 @@ }, "l": 1 }, + "umso": 1, "xmit": { "c": { "*": 1 @@ -2445,6 +2663,7 @@ } }, "180r": 1, + "1cooldns": 1, "1kapp": 1, "3utilities": 1, "4u": 1, @@ -2559,6 +2778,11 @@ "*": 1 } }, + "ap-southeast-7": { + "c": { + "*": 1 + } + }, "ca-central-1": { "c": { "*": 1 @@ -3307,6 +3531,180 @@ "s3-website": 1 } }, + "rds": { + "c": { + "af-south-1": { + "c": { + "*": 1 + } + }, + "ap-east-1": { + "c": { + "*": 1 + } + }, + "ap-east-2": { + "c": { + "*": 1 + } + }, + "ap-northeast-1": { + "c": { + "*": 1 + } + }, + "ap-northeast-2": { + "c": { + "*": 1 + } + }, + "ap-northeast-3": { + "c": { + "*": 1 + } + }, + "ap-south-1": { + "c": { + "*": 1 + } + }, + "ap-south-2": { + "c": { + "*": 1 + } + }, + "ap-southeast-1": { + "c": { + "*": 1 + } + }, + "ap-southeast-2": { + "c": { + "*": 1 + } + }, + "ap-southeast-3": { + "c": { + "*": 1 + } + }, + "ap-southeast-4": { + "c": { + "*": 1 + } + }, + "ap-southeast-5": { + "c": { + "*": 1 + } + }, + "ap-southeast-6": { + "c": { + "*": 1 + } + }, + "ap-southeast-7": { + "c": { + "*": 1 + } + }, + "ca-central-1": { + "c": { + "*": 1 + } + }, + "ca-west-1": { + "c": { + "*": 1 + } + }, + "eu-central-1": { + "c": { + "*": 1 + } + }, + "eu-central-2": { + "c": { + "*": 1 + } + }, + "eu-west-1": { + "c": { + "*": 1 + } + }, + "eu-west-2": { + "c": { + "*": 1 + } + }, + "eu-west-3": { + "c": { + "*": 1 + } + }, + "il-central-1": { + "c": { + "*": 1 + } + }, + "me-central-1": { + "c": { + "*": 1 + } + }, + "me-south-1": { + "c": { + "*": 1 + } + }, + "mx-central-1": { + "c": { + "*": 1 + } + }, + "sa-east-1": { + "c": { + "*": 1 + } + }, + "us-east-1": { + "c": { + "*": 1 + } + }, + "us-east-2": { + "c": { + "*": 1 + } + }, + "us-gov-east-1": { + "c": { + "*": 1 + } + }, + "us-gov-west-1": { + "c": { + "*": 1 + } + }, + "us-northeast-1": { + "c": { + "*": 1 + } + }, + "us-west-1": { + "c": { + "*": 1 + } + }, + "us-west-2": { + "c": { + "*": 1 + } + } + } + }, "s3": 1, "s3-1": 1, "s3-ap-east-1": 1, @@ -3460,7 +3858,8 @@ "s3": 1, "s3-accesspoint": 1, "s3-accesspoint-fips": 1, - "s3-fips": 1 + "s3-fips": 1, + "s3-website": 1 } }, "emrappui-prod": 1, @@ -3482,7 +3881,8 @@ "s3": 1, "s3-accesspoint": 1, "s3-accesspoint-fips": 1, - "s3-fips": 1 + "s3-fips": 1, + "s3-website": 1 } }, "emrappui-prod": 1, @@ -3763,7 +4163,27 @@ }, "l": 1 }, + "atlassian-3p": { + "c": { + "*": 1 + } + }, + "atlassian-3p-us-gov-mod": { + "c": { + "*": 1 + } + }, + "atlassian-isolated-3p": { + "c": { + "*": 1 + } + }, "atmeta": 1, + "auiusercontent": { + "c": { + "*": 1 + } + }, "authgear-staging": 1, "authgearapps": 1, "awsapprunner": { @@ -3776,6 +4196,7 @@ "balena-devices": 1, "barsycenter": 1, "barsyonline": 1, + "base44-sandbox": 1, "blogdns": 1, "blogspot": 1, "blogsyte": 1, @@ -3783,8 +4204,11 @@ "bplaced": 1, "br": 1, "builtwithdark": 1, + "bumbleshrimp": 1, "cafjs": 1, "canva-apps": 1, + "canva-hosted-embed": 1, + "canvacode": 1, "cdn77-storage": 1, "cechire": 1, "cf-ipfs": 1, @@ -3855,8 +4279,10 @@ "dattoweb": 1, "ddnsfree": 1, "ddnsgeek": 1, + "ddnsguru": 1, "ddnsking": 1, "de": 1, + "deployagent": 1, "deus-canvas": 1, "dev-myqnapcloud": 1, "devinapps": { @@ -3883,6 +4309,7 @@ "dopaas": 1, "drayddns": 1, "dreamhosters": 1, + "drive-platform": 1, "dsmynas": 1, "durumis": 1, "dyn-o-saur": 1, @@ -3902,6 +4329,8 @@ "dyndns-wiki": 1, "dyndns-work": 1, "dynns": 1, + "dynuddns": 1, + "dynuhosting": 1, "elasticbeanstalk": { "c": { "af-south-1": 1, @@ -3913,14 +4342,18 @@ "ap-southeast-1": 1, "ap-southeast-2": 1, "ap-southeast-3": 1, + "ap-southeast-5": 1, + "ap-southeast-7": 1, "ca-central-1": 1, "eu-central-1": 1, "eu-north-1": 1, "eu-south-1": 1, + "eu-south-2": 1, "eu-west-1": 1, "eu-west-2": 1, "eu-west-3": 1, "il-central-1": 1, + "me-central-1": 1, "me-south-1": 1, "sa-east-1": 1, "us-east-1": 1, @@ -3932,12 +4365,18 @@ }, "l": 1 }, + "emergentagent": { + "c": { + "preview": 1 + } + }, "encoreapi": 1, "est-a-la-maison": 1, "est-a-la-masion": 1, "est-le-patron": 1, "est-mon-blogueur": 1, "eu": 1, + "eu1-plenit": 1, "evennode": { "c": { "eu-1": 1, @@ -4030,6 +4469,8 @@ "hatenablog": 1, "hatenadiary": 1, "health-carereform": 1, + "hercules-app": 1, + "hercules-dev": 1, "herokuapp": 1, "hk": 1, "hobby-site": 1, @@ -4123,20 +4564,10 @@ "demo": 1 } }, - "jote-dr-lt1": 1, - "jote-rd-lt1": 1, - "joyent": { - "c": { - "cns": { - "c": { - "*": 1 - } - } - } - }, "jpn": 1, "kasserver": 1, "kozow": 1, + "la1-plenit": 1, "ladesk": 1, "likes-pie": 1, "likescandy": 1, @@ -4171,13 +4602,18 @@ "*": 1 } }, + "magicpatternsapp": 1, "massivegrid": { "c": { "paas": 1 } }, - "mazeplay": 1, "messwithdns": 1, + "metaaiusercontent": { + "c": { + "*": 1 + } + }, "meteorapp": { "c": { "eu": 1 @@ -4186,6 +4622,7 @@ }, "mex": 1, "miniserver": 1, + "mochausercontent": 1, "modelscape": 1, "mwcloudnonprod": 1, "myactivedirectory": 1, @@ -4264,13 +4701,13 @@ "outsystemscloud": 1, "ownprovider": 1, "pagespeedmobilizer": 1, - "pagexl": 1, "paywhirl": { "c": { "*": 1 } }, "pgfog": 1, + "pivohosting": 1, "pixolino": 1, "playstation-cloud": 1, "pleskns": 1, @@ -4321,7 +4758,6 @@ } }, "reservd": 1, - "reserve-online": 1, "rhcloud": 1, "rice-labs": 1, "routingthecloud": 1, @@ -4337,7 +4773,7 @@ "c": { "test": { "c": { - "001": { + "0.0.0.1": { "c": { "*": 1 } @@ -4378,7 +4814,6 @@ "simple-url": 1, "simplesite": 1, "sinaapp": 1, - "skygearapp": 1, "smushcdn": 1, "space-to-rent": 1, "stackhero-network": 1, @@ -4422,7 +4857,9 @@ "unusualperson": 1, "upsunapp": 1, "us": 1, + "us1-plenit": 1, "vipsinaapp": 1, + "vivenushop": 1, "vultrobjects": { "c": { "*": 1 @@ -4445,6 +4882,7 @@ "pages": 1 } }, + "wiredbladehosting": 1, "withgoogle": 1, "withyoutube": 1, "wixsite": 1, @@ -4469,6 +4907,7 @@ }, "l": 1 }, + "xtooldevice": 1, "yolasite": 1, "za": 1 }, @@ -4483,7 +4922,12 @@ }, "l": 1 }, - "company": 1, + "company": { + "c": { + "mybox": 1 + }, + "l": 1 + }, "compare": 1, "computer": 1, "comsec": 1, @@ -4657,6 +5101,11 @@ "4lima": 1, "barsy": 1, "bplaced": 1, + "bwcloud-os-instance": { + "c": { + "*": 1 + } + }, "co": 1, "com": 1, "community-pro": 1, @@ -4665,7 +5114,6 @@ "dyn": 1 } }, - "dd-dns": 1, "ddnss": { "c": { "dyn": 1, @@ -4676,14 +5124,10 @@ "diskussionsbereich": 1, "dnshome": 1, "dnsupdater": 1, - "dray-dns": 1, - "draydns": 1, "dyn-berlin": 1, "dyn-ip24": 1, - "dyn-vpn": 1, "dynamisches-dns": 1, "dyndns1": 1, - "dynvpn": 1, "firewall-gateway": 1, "frusky": { "c": { @@ -4726,12 +5170,9 @@ "lima-city": 1, "logoip": 1, "mein-iserv": 1, - "mein-vigor": 1, "my": 1, "my-gateway": 1, "my-router": 1, - "my-vigor": 1, - "my-wan": 1, "myhome-server": 1, "myspreadshop": 1, "rub": 1, @@ -4756,9 +5197,6 @@ }, "square7": 1, "svn-repos": 1, - "syno-ds": 1, - "synology-diskstation": 1, - "synology-ds": 1, "taifun-dns": 1, "test-iserv": 1, "traeumtgerade": 1, @@ -4796,16 +5234,91 @@ }, "dev": { "c": { - "12chars": 1, "barsy": 1, + "bearblog": 1, "botdash": 1, + "brave": { + "c": { + "s": { + "c": { + "*": 1 + } + } + }, + "l": 1 + }, "crm": { "c": { + "aa": { + "c": { + "*": 1 + } + }, + "ab": { + "c": { + "*": 1 + } + }, + "ac": { + "c": { + "*": 1 + } + }, + "ad": { + "c": { + "*": 1 + } + }, + "ae": { + "c": { + "*": 1 + } + }, + "af": { + "c": { + "*": 1 + } + }, + "ci": { + "c": { + "*": 1 + } + }, "d": { "c": { "*": 1 } }, + "pa": { + "c": { + "*": 1 + } + }, + "pb": { + "c": { + "*": 1 + } + }, + "pc": { + "c": { + "*": 1 + } + }, + "pd": { + "c": { + "*": 1 + } + }, + "pe": { + "c": { + "*": 1 + } + }, + "pf": { + "c": { + "*": 1 + } + }, "w": { "c": { "*": 1 @@ -4864,6 +5377,7 @@ } }, "githubpreview": 1, + "grebedoc": 1, "hrsn": 1, "inbrowser": { "c": { @@ -4906,12 +5420,14 @@ "l": 1 }, "mediatech": 1, + "mocha-sandbox": 1, "modx": 1, "myaddr": 1, "ngrok": 1, "ngrok-free": 1, "pages": 1, "panel": 1, + "payload": 1, "platter-app": 1, "r2": 1, "replit": { @@ -4956,7 +5472,18 @@ "*": 1 } }, + "storage": { + "c": { + "t3": 1 + } + }, + "storageapi": { + "c": { + "t3": 1 + } + }, "vercel": 1, + "vivenushop": 1, "webhare": { "c": { "*": 1 @@ -4970,17 +5497,7 @@ "dhl": 1, "diamonds": 1, "diet": 1, - "digital": { - "c": { - "cloudapps": { - "c": { - "london": 1 - }, - "l": 1 - } - }, - "l": 1 - }, + "digital": 1, "direct": { "c": { "libp2p": 1 @@ -4991,7 +5508,13 @@ "discount": 1, "discover": 1, "dish": 1, - "diy": 1, + "diy": { + "c": { + "discourse": 1, + "imagine": 1 + }, + "l": 1 + }, "dj": 1, "dk": { "c": { @@ -5041,7 +5564,6 @@ "drive": 1, "dtv": 1, "dubai": 1, - "dunlop": 1, "dupont": 1, "durban": 1, "dvag": 1, @@ -5175,11 +5697,7 @@ }, "email": { "c": { - "crisp": { - "c": { - "on": 1 - } - }, + "intouch": 1, "tawk": { "c": { "p": 1 @@ -5245,9 +5763,27 @@ }, "eu": { "c": { + "amazonwebservices": { + "c": { + "on": { + "c": { + "eusc-de-east-1": { + "c": { + "cognito-idp": { + "c": { + "auth": 1 + } + } + } + } + } + } + } + }, "barsy": 1, "cloudns": 1, - "diskstation": 1, + "deuxfleurs": 1, + "directwp": 1, "dogado": { "c": { "jelastic": 1 @@ -5258,6 +5794,7 @@ "*": 1 } }, + "prvw": 1, "spdns": 1, "transurl": { "c": { @@ -5356,7 +5893,9 @@ "ac": 1, "biz": 1, "com": 1, + "edu": 1, "gov": 1, + "id": 1, "info": 1, "mil": 1, "name": 1, @@ -5415,7 +5954,6 @@ "chirurgiens-dentistes-en-france": 1, "com": 1, "dedibox": 1, - "en-root": 1, "experts-comptables": 1, "fbx-os": 1, "fbxos": 1, @@ -5425,6 +5963,7 @@ "gouv": 1, "greta": 1, "huissier-justice": 1, + "kdns": 1, "medecin": 1, "myspreadshop": 1, "nom": 1, @@ -5446,7 +5985,15 @@ "frontier": 1, "ftr": 1, "fujitsu": 1, - "fun": 1, + "fun": { + "c": { + "ms": 1, + "vicp": 1, + "yicp": 1, + "zicp": 1 + }, + "l": 1 + }, "fund": 1, "furniture": 1, "futbol": 1, @@ -5517,6 +6064,16 @@ }, "l": 1 }, + "ply": { + "c": { + "at": { + "c": { + "*": 1 + } + }, + "d6": 1 + } + }, "stackit": 1 }, "l": 1 @@ -5588,7 +6145,6 @@ "gold": 1, "goldpoint": 1, "golf": 1, - "goo": 1, "goodyear": 1, "goog": { "c": { @@ -5768,8 +6324,10 @@ "bolt": 1, "cloudaccess": 1, "easypanel": 1, + "emergent": 1, "fastvps": 1, "freesite": 1, + "gadget": 1, "half": 1, "iserv": 1, "jele": 1, @@ -5833,7 +6391,7 @@ }, "hu": { "c": { - "2000": 1, + "0.0.7.208": 1, "agrar": 1, "bolt": 1, "casino": 1, @@ -5877,6 +6435,7 @@ "id": { "c": { "ac": 1, + "ai": 1, "biz": 1, "co": 1, "desa": 1, @@ -5890,6 +6449,7 @@ "ponpes": 1, "sch": 1, "web": 1, + "xn--9tfky": 1, "zone": 1 }, "l": 1 @@ -5953,6 +6513,7 @@ "ac": 1, "ai": 1, "am": 1, + "bank": 1, "barsy": 1, "bihar": 1, "biz": 1, @@ -5968,11 +6529,13 @@ "dr": 1, "edu": 1, "er": 1, + "fin": 1, "firm": 1, "gen": 1, "gov": 1, "gujarat": 1, "ind": 1, + "indevs": 1, "info": 1, "int": 1, "internet": 1, @@ -6044,7 +6607,7 @@ "investments": 1, "io": { "c": { - "2038": 1, + "0.0.7.246": 1, "apigee": 1, "azurecontainer": { "c": { @@ -6102,6 +6665,7 @@ "darklang": 1, "dedyn": 1, "definima": 1, + "drive-platform": 1, "editorx": 1, "edu": 1, "edugit": 1, @@ -6111,6 +6675,7 @@ "id": 1 } }, + "gitbook": 1, "github": 1, "gitlab": 1, "gov": 1, @@ -6139,6 +6704,8 @@ "l": 1 }, "jele": 1, + "keenetic": 1, + "kiloapps": 1, "lair": { "c": { "apps": 1 @@ -6229,7 +6796,6 @@ "client": 1 } }, - "shw": 1, "stolos": { "c": { "*": 1 @@ -6310,7 +6876,6 @@ "it": { "c": { "123homepage": 1, - "12chars": 1, "16-b": 1, "32-b": 1, "64-b": 1, @@ -9001,6 +9566,7 @@ "kfh": 1, "kg": { "c": { + "ae": 1, "com": 1, "edu": 1, "gov": 1, @@ -9014,8 +9580,13 @@ }, "kh": { "c": { - "*": 1 - } + "com": 1, + "edu": 1, + "gov": 1, + "net": 1, + "org": 1 + }, + "l": 1 }, "ki": { "c": { @@ -9093,6 +9664,7 @@ "co": 1, "daegu": 1, "daejeon": 1, + "eliv-api": 1, "eliv-cdn": 1, "eliv-dns": 1, "es": 1, @@ -9237,6 +9809,7 @@ "lincoln": 1, "link": { "c": { + "canva": 1, "cyon": 1, "dweb": { "c": { @@ -9248,6 +9821,8 @@ "*": 1 } }, + "joinmc": 1, + "keenetic": 1, "myfritz": 1, "mypep": 1, "nftstorage": { @@ -9445,12 +10020,18 @@ "filegear": 1, "filegear-sg": 1, "gov": 1, + "hooc": { + "c": { + "seprox": 1 + } + }, "hopto": 1, "i234": 1, "its": 1, "loginto": 1, "lohmus": 1, "mcdir": 1, + "mybox": 1, "myds": 1, "net": 1, "nohost": 1, @@ -9735,7 +10316,9 @@ "c": { "forgot": 1 } - } + }, + "ispmanager": 1, + "keenetic": 1 }, "l": 1 }, @@ -9785,13 +10368,13 @@ "azurefd": 1, "azurestaticapps": { "c": { - "1": 1, - "2": 1, - "3": 1, - "4": 1, - "5": 1, - "6": 1, - "7": 1, + "0.0.0.1": 1, + "0.0.0.2": 1, + "0.0.0.3": 1, + "0.0.0.4": 1, + "0.0.0.5": 1, + "0.0.0.6": 1, + "0.0.0.7": 1, "centralus": 1, "eastasia": 1, "eastus2": 1, @@ -9868,9 +10451,15 @@ "dattolocal": 1, "ddns": 1, "ddns-ip": 1, + "de5": 1, "debian": 1, "definima": 1, - "deno": 1, + "deno": { + "c": { + "sandbox": 1 + }, + "l": 1 + }, "dns-cloud": 1, "dns-dynamic": 1, "dnsalias": 1, @@ -9882,9 +10471,9 @@ "dynalias": 1, "dynathome": 1, "dynu": 1, + "dynuddns": 1, "dynv6": 1, "eating-organic": 1, - "edgeapp": 1, "edgekey": 1, "edgekey-staging": 1, "edgesuite": 1, @@ -10002,12 +10591,13 @@ "myradweb": 1, "mysecuritycamera": 1, "myspreadshop": 1, + "mysynology": 1, "nhlfan": 1, "no-ip": 1, "now-dns": 1, "office-on-the": 1, - "onavstack": 1, "oninferno": 1, + "opik": 1, "ovh": { "c": { "hosting": { @@ -10056,6 +10646,7 @@ "server-on": 1, "shopselect": 1, "siteleaf": 1, + "spryt": 1, "square7": 1, "squares": 1, "srcf": { @@ -10086,9 +10677,24 @@ }, "l": 1 }, + "tunnelmole": 1, "twmail": 1, "uk": 1, "uni5": 1, + "usgovcloudapi": { + "c": { + "core": { + "c": { + "blob": 1, + "file": 1, + "web": 1 + } + }, + "servicebus": 1 + } + }, + "usgovcloudapp": 1, + "usgovtrafficmanager": 1, "vpndns": 1, "vps-host": { "c": { @@ -10108,7 +10714,9 @@ "c": { "core": { "c": { - "blob": 1 + "blob": 1, + "file": 1, + "web": 1 } }, "servicebus": 1 @@ -10136,6 +10744,7 @@ "*": 1 } }, + "appwrite": 1, "arvo": 1, "azimuth": 1, "co": 1, @@ -10324,7 +10933,6 @@ "bievat": 1, "bindal": 1, "birkenes": 1, - "bjarkoy": 1, "bjerkreim": 1, "bjugn": 1, "bodo": 1, @@ -10619,7 +11227,6 @@ "mosjoen": 1, "moskenes": 1, "moss": 1, - "mosvik": 1, "mr": { "c": { "gs": 1 @@ -10966,7 +11573,6 @@ "xn--bhccavuotna-k7a": 1, "xn--bidr-5nac": 1, "xn--bievt-0qa": 1, - "xn--bjarky-fya": 1, "xn--bjddar-pta": 1, "xn--blt-elab": 1, "xn--bmlo-gra": 1, @@ -11221,21 +11827,18 @@ "*": 1 } }, - "service": 1 - }, - "l": 1 - }, - "ong": { - "c": { - "obl": 1 + "service": 1, + "website": 1 }, "l": 1 }, + "ong": 1, "onion": 1, "onl": 1, "online": { "c": { "barsy": 1, + "book": 1, "eero": 1, "eero-stage": 1, "leapcell": 1, @@ -11283,7 +11886,6 @@ "collegefan": 1, "couchpotatofries": 1, "ddnss": 1, - "diskstation": 1, "dnsalias": 1, "dnsdojo": 1, "doesntexist": 1, @@ -11386,6 +11988,7 @@ "freeddns": 1, "freedesktop": 1, "from-me": 1, + "fspages": 1, "game-host": 1, "gotdns": 1, "hatenadiary": 1, @@ -11442,6 +12045,7 @@ "read-books": 1, "readmyblog": 1, "routingthecloud": 1, + "roxa": 1, "selfip": 1, "sellsyourhome": 1, "servebbs": 1, @@ -11507,13 +12111,15 @@ "c": { "aem": 1, "codeberg": 1, + "deuxfleurs": 1, "heyflow": 1, "hlx": 1, + "mybox": 1, "pdns": 1, "plesk": 1, "prvcy": 1, "rocky": 1, - "translated": 1 + "statichost": 1 }, "l": 1 }, @@ -11583,7 +12189,7 @@ "pictet": 1, "pictures": { "c": { - "1337": 1 + "0.0.5.57": 1 }, "l": 1 }, @@ -11882,7 +12488,22 @@ "play": 1, "playstation": 1, "plumbing": 1, - "plus": 1, + "plus": { + "c": { + "playit": { + "c": { + "at": { + "c": { + "*": 1 + } + }, + "with": 1 + }, + "l": 1 + } + }, + "l": 1 + }, "pm": { "c": { "name": 1, @@ -11929,7 +12550,6 @@ "prime": 1, "pro": { "c": { - "12chars": 1, "aaa": 1, "aca": 1, "acct": 1, @@ -11940,6 +12560,7 @@ "cpa": 1, "eng": 1, "jur": 1, + "keenetic": 1, "law": 1, "med": 1, "ngrok": 1, @@ -12157,7 +12778,6 @@ "int": 1, "kalmykia": 1, "kustanai": 1, - "lk3": 1, "marine": 1, "mcdir": { "c": { @@ -12248,6 +12868,7 @@ "*": 1 } }, + "needle": 1, "onporter": 1, "ravendb": 1, "repl": 1, @@ -12338,12 +12959,15 @@ "science": 1, "scot": { "c": { + "co": 1, "gov": { "c": { "service": 1 }, "l": 1 - } + }, + "me": 1, + "org": 1 }, "l": 1 }, @@ -12478,7 +13102,12 @@ }, "shopping": 1, "shouji": 1, - "show": 1, + "show": { + "c": { + "ms": 1 + }, + "l": 1 + }, "si": { "c": { "f5": 1, @@ -12505,11 +13134,19 @@ "*": 1 } }, - "convex": 1, + "co": 1, + "convex": { + "c": { + "eu-west-1": 1, + "us-east-1": 1 + }, + "l": 1 + }, "cpanel": 1, "cyon": 1, "fastvps": 1, "figma": 1, + "figma-gov": 1, "heyflow": 1, "jele": 1, "jouwweb": 1, @@ -12519,12 +13156,14 @@ "novecore": 1, "omniwe": 1, "opensocial": 1, + "piebox": 1, "platformsh": { "c": { "*": 1 } }, "preview": 1, + "sol": 1, "sourcecraft": 1, "square": 1, "srht": 1, @@ -12539,7 +13178,12 @@ "l": 1 }, "sj": 1, - "sk": 1, + "sk": { + "c": { + "org": 1 + }, + "l": 1 + }, "ski": 1, "skin": 1, "sky": 1, @@ -12565,7 +13209,6 @@ "edu": 1, "gouv": 1, "org": 1, - "perso": 1, "univ": 1 }, "l": 1 @@ -12597,6 +13240,7 @@ "space": { "c": { "app-ionos": 1, + "deployagent": 1, "heiyu": 1, "hf": { "c": { @@ -12631,6 +13275,11 @@ }, "st": { "c": { + "cn": { + "c": { + "*": 1 + } + }, "co": 1, "com": 1, "consulado": 1, @@ -12771,7 +13420,8 @@ "sydney": 1, "systems": { "c": { - "knightpoint": 1 + "knightpoint": 1, + "miren": 1 }, "l": 1 }, @@ -12915,12 +13565,13 @@ }, "to": { "c": { - "611": 1, + "0.0.2.99": 1, "com": 1, "edu": 1, "gov": 1, "mil": 1, "net": 1, + "nett": 1, "org": 1, "oya": 1, "quickconnect": { @@ -13319,6 +13970,8 @@ }, "l": 1 }, + "azure-api": 1, + "azurewebsites": 1, "ca": { "c": { "cc": 1, @@ -13544,13 +14197,7 @@ }, "l": 1 }, - "nd": { - "c": { - "cc": 1, - "lib": 1 - }, - "l": 1 - }, + "nd": 1, "ne": { "c": { "cc": 1, @@ -13634,7 +14281,6 @@ }, "l": 1 }, - "platterp": 1, "pointto": 1, "pr": { "c": { @@ -13725,9 +14371,34 @@ }, "wa": { "c": { + "aberdeen": 1, + "bainbridge-isl": 1, + "bellevue": 1, + "bremerton": 1, "cc": 1, + "centralia": 1, + "chehalis": 1, + "forks": 1, + "gig-harbor": 1, + "hoquiam": 1, "k12": 1, - "lib": 1 + "keyport": 1, + "kingston": 1, + "lib": 1, + "olympia": 1, + "port-angeles": 1, + "port-ludlow": 1, + "port-orchard": 1, + "port-townsend": 1, + "poulsbo": 1, + "redmond": 1, + "renton": 1, + "sea": 1, + "seattle": 1, + "sequim": 1, + "shelton": 1, + "silverdale": 1, + "yarrow-point": 1 }, "l": 1 }, @@ -13761,6 +14432,7 @@ "com": 1, "edu": 1, "gub": 1, + "gv": 1, "mil": 1, "net": 1, "org": 1 @@ -13815,6 +14487,7 @@ "firm": 1, "gob": 1, "gov": 1, + "ia": 1, "info": 1, "int": 1, "mil": 1, @@ -13906,6 +14579,7 @@ "haugiang": 1, "health": 1, "hoabinh": 1, + "hue": 1, "hungyen": 1, "id": 1, "info": 1, @@ -14008,9 +14682,13 @@ "wine": 1, "winners": 1, "wme": 1, - "wolterskluwer": 1, "woodside": 1, - "work": 1, + "work": { + "c": { + "imagine-proxy": 1 + }, + "l": 1 + }, "works": 1, "world": 1, "wow": 1, @@ -14254,6 +14932,9 @@ "xyz": { "c": { "botdash": 1, + "caffeine": 1, + "exe": 1, + "opentunnel": 1, "telebit": { "c": { "*": 1 @@ -14334,11 +15015,17 @@ "zone": { "c": { "lima": 1, + "prg1-zerops": 1, "stackit": 1, "triton": { "c": { "*": 1 } + }, + "zerops": { + "c": { + "*": 1 + } } }, "l": 1 diff --git a/src/background/scheduler.ts b/src/background/scheduler.ts new file mode 100644 index 000000000..8504ad578 --- /dev/null +++ b/src/background/scheduler.ts @@ -0,0 +1,91 @@ +import { MILL_PER_MINUTE } from "@util/time" +import alarmManager from "./alarm-manager" +import backupProcessor from "./service/backup/processor" +import optionHolder from './service/components/option-holder' +import notificationProcessor from "./service/notification/processor" + +const BACKUP_ALARM_NAME = 'auto-backup-data' +const NOTIFICATION_ALARM_NAME = 'notification-data' + +const needResetBackup = (newVal: tt4b.option.AllOption, oldVal: tt4b.option.AllOption): boolean => + newVal.autoBackUp !== oldVal.autoBackUp || newVal.autoBackUpInterval !== oldVal.autoBackUpInterval + +const needResetNotification = (newVal: tt4b.option.AllOption, oldVal: tt4b.option.AllOption): boolean => + newVal.notificationCycle !== oldVal.notificationCycle || newVal.notificationOffset !== oldVal.notificationOffset + +export async function initScheduler(): Promise { + optionHolder.addChangeListener((newVal, oldVal) => { + if (needResetBackup(newVal, oldVal)) resetBackup() + if (needResetNotification(newVal, oldVal)) resetNotification() + }) + + const existBackup = await alarmManager.getAlarm(BACKUP_ALARM_NAME) + !existBackup && await resetBackup() + + const existNotification = await alarmManager.getAlarm(NOTIFICATION_ALARM_NAME) + !existNotification && await resetNotification() +} + +async function resetBackup(): Promise { + // MUST read latest option from database + const option = await optionHolder.get() + + await alarmManager.remove(BACKUP_ALARM_NAME) + + const { autoBackUp, backupType, autoBackUpInterval = 0 } = option + if (backupType === 'none' || !autoBackUp || !autoBackUpInterval) { + return + } + + const interval = autoBackUpInterval * MILL_PER_MINUTE + await alarmManager.setInterval(BACKUP_ALARM_NAME, interval, async () => { + const errorMsg = await backupProcessor.syncData() + if (errorMsg) console.warn(`Failed to backup ts=${Date.now()}, msg=${errorMsg}`) + }) +} + +type OffsetHandler = (offsetMin: number) => number +const OFFSET_HANDLERS: Record, OffsetHandler> = { + daily: offset => { + const next = new Date() + next.setHours(0, offset, 0, 0) + const now = new Date() + while (next.getTime() < now.getTime()) { + next.setDate(next.getDate() + 1) + } + return next.getTime() + }, + weekly: offset => { + const next = new Date() + const weekday = next.getDay() + // Convert JS Sunday-based weekday (Sun=0) to Monday-based (Mon=0) + const mondayBasedWeekday = (weekday + 6) % 7 + next.setDate(next.getDate() - mondayBasedWeekday) + next.setHours(0, offset, 0, 0) + const now = new Date() + while (next.getTime() < now.getTime()) { + next.setDate(next.getDate() + 7) + } + return next.getTime() + } +} + +async function resetNotification(): Promise { + await alarmManager.remove(NOTIFICATION_ALARM_NAME) + + const option = await optionHolder.get() + const { notificationCycle: cycle, notificationOffset: offset } = option + + if (cycle === 'none') return + + await alarmManager.setWhen( + NOTIFICATION_ALARM_NAME, + () => OFFSET_HANDLERS[cycle](offset), + async () => { + const errMsg = await notificationProcessor.doSend() + if (errMsg) { + console.warn(`Failed to send notification ts=${Date.now()}, msg=${errMsg}`) + } + } + ) +} \ No newline at end of file diff --git a/src/background/service/2fa-service.ts b/src/background/service/2fa-service.ts new file mode 100644 index 000000000..1bd9ad889 --- /dev/null +++ b/src/background/service/2fa-service.ts @@ -0,0 +1,146 @@ +/** + * 2FA service implementation + * https://datatracker.ietf.org/doc/html/rfc6238 + * + * Copyright (c) 2026 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { getRuntimeName } from '@api/chrome/runtime' +import db from '@db/meta-database' +import { decodeBase32, decodeBase64, encodeBase32, encodeBase64 } from '@util/encode' +import { getCid } from './meta-service' + +/** + * Generate TOTP material and save to the storage + * + * @return otpauth URI + */ +export async function prepare2fa(): Promise { + const secret = generateSecret() + const issuer = getRuntimeName() + const accountName = await getCid() + const uri = buildTotpUri({ issuer, accountName, secret }) + await saveTwoFa(secret) + return uri +} + +function generateSecret(): string { + const randomBytes = new Uint8Array(20) + crypto.getRandomValues(randomBytes) + return encodeBase32(randomBytes).toLowerCase() +} + +function buildTotpUri(params: { issuer: string; accountName: string; secret: string }): string { + const { issuer, accountName, secret } = params + const label = `${issuer}:${accountName}` + const sec = secret.toUpperCase().replace(/\s/g, '') + return `otpauth://totp/${encodeURIComponent(label)}?secret=${sec}&issuer=${encodeURIComponent(issuer)}&algorithm=SHA1&digits=6&period=30` +} + +async function saveTwoFa(secret: string): Promise { + const cid = await getCid() + const meta = await db.getMeta() + meta.twoFa = await encrypt(secret, cid) + await db.update(meta) +} + +async function encrypt(plaintext: string, cid: string): Promise { + const encoder = new TextEncoder() + const dataBuffer = encoder.encode(plaintext) + + const salt = crypto.getRandomValues(new Uint8Array(16)) + const iv = crypto.getRandomValues(new Uint8Array(12)) + + const keyMaterial = await crypto.subtle.importKey( + 'raw', + encoder.encode(cid), + { name: 'PBKDF2' }, + false, + ['deriveKey'] + ) + + const key = await crypto.subtle.deriveKey( + { name: 'PBKDF2', salt: salt, iterations: 100000, hash: 'SHA-256' }, + keyMaterial, + { name: 'AES-GCM', length: 256 }, + false, + ['encrypt', 'decrypt'] + ) + + const cipherText = await crypto.subtle.encrypt( + { name: 'AES-GCM', iv: iv }, + key, + dataBuffer + ) + + return { + salt: encodeBase64(salt), + iv: encodeBase64(iv), + secret: encodeBase64(new Uint8Array(cipherText)), + } +} + +export async function check2faCode(code: string): Promise { + const { twoFa } = await db.getMeta() + if (!twoFa) return false + + const cid = await getCid() + const secret = await decryptSecret(twoFa, cid) + return verifyTotp(secret, code) +} + +async function decryptSecret(twoFa: tt4b.TwoFactorAuth, cid: string): Promise { + const encoder = new TextEncoder() + const keyMaterial = await crypto.subtle.importKey( + 'raw', encoder.encode(cid), { name: 'PBKDF2' }, false, ['deriveKey'] + ) + const key = await crypto.subtle.deriveKey( + { name: 'PBKDF2', salt: decodeBase64(twoFa.salt), iterations: 100000, hash: 'SHA-256' }, + keyMaterial, + { name: 'AES-GCM', length: 256 }, + false, + ['decrypt'] + ) + const plain = await crypto.subtle.decrypt( + { name: 'AES-GCM', iv: decodeBase64(twoFa.iv) }, + key, + decodeBase64(twoFa.secret), + ) + return new TextDecoder().decode(plain) +} + +async function verifyTotp(secretBase32: string, code: string): Promise { + const normalized = code.replace(/\s/g, '') + if (!/^\d{6}$/.test(normalized)) return false + const step = Math.floor(Date.now() / 1000 / 30) + for (const delta of [0, -1, 1]) { + const candidate = await genTotp(secretBase32, step + delta) + if (candidate === normalized) return true + } + return false +} + +async function genTotp(secretBase32: string, step: number): Promise { + const key = decodeBase32(secretBase32) + const msg = new Uint8Array(8) + let t = step + for (let i = 7; i >= 0; i--) { + msg[i] = t & 0xff + t >>>= 8 + } + + const hmacKey = await crypto.subtle.importKey( + 'raw', key.slice(), { name: 'HMAC', hash: 'SHA-1' }, false, ['sign'] + ) + const sigBuffer = await crypto.subtle.sign('HMAC', hmacKey, msg) + const sig = new Uint8Array(sigBuffer) + const offset = sig[sig.length - 1]! & 0x0f + const otp = ((sig[offset]! & 0x7f) << 24 + | sig[offset + 1]! << 16 + | sig[offset + 2]! << 8 + | sig[offset + 3]!) % 1_000_000 + return otp.toString().padStart(6, '0') +} diff --git a/src/service/backup/common.ts b/src/background/service/backup/common.ts similarity index 100% rename from src/service/backup/common.ts rename to src/background/service/backup/common.ts diff --git a/src/service/backup/gist/compressor.ts b/src/background/service/backup/gist/compressor.ts similarity index 87% rename from src/service/backup/gist/compressor.ts rename to src/background/service/backup/gist/compressor.ts index f9e6a045d..f70702255 100644 --- a/src/service/backup/gist/compressor.ts +++ b/src/background/service/backup/gist/compressor.ts @@ -21,14 +21,14 @@ export type GistData = { /** * Row stored in the gist */ -export type GistRow = { +type GistRow = { [host: string]: [ number, // Visit count number, // Browsing time ] } -function calcGroupKey(row: timer.core.Row): string | undefined { +function calcGroupKey(row: tt4b.core.Row): string | undefined { const date = row.date if (!date) { return undefined @@ -41,7 +41,7 @@ function calcGroupKey(row: timer.core.Row): string | undefined { * * @param rows row array */ -function compress(rows: timer.core.Row[]): GistData { +function compress(rows: tt4b.core.Row[]): GistData { const result: GistData = groupBy( rows, row => row.date.substring(6), @@ -59,7 +59,7 @@ function compress(rows: timer.core.Row[]): GistData { * * @returns [bucket, data][] */ -export function divide2Buckets(rows: timer.core.Row[]): [string, GistData][] { +export function divide2Buckets(rows: tt4b.core.Row[]): [string, GistData][] { const grouped: { [yearAndPart: string]: GistData } = groupBy(rows.filter(r => !!r), calcGroupKey, compress) return Object.entries(grouped) } @@ -88,13 +88,13 @@ export function calcAllBuckets(startDate: string | undefined, endDate: string | * @param gistData gistData * @returns rows */ -export function gistData2Rows(yearMonth: string, gistData: GistData): timer.core.Row[] { - const result: timer.core.Row[] = [] +export function gistData2Rows(yearMonth: string, gistData: GistData): tt4b.core.Row[] { + const result: tt4b.core.Row[] = [] Object.entries(gistData).forEach(([dateOfMonth, gistRow]) => { const date = yearMonth + dateOfMonth Object.entries(gistRow).forEach(([host, val]) => { const [time, focus] = val - const row: timer.core.Row = { + const row: tt4b.core.Row = { date, host, time, diff --git a/src/service/backup/gist/coordinator.ts b/src/background/service/backup/gist/coordinator.ts similarity index 83% rename from src/service/backup/gist/coordinator.ts rename to src/background/service/backup/gist/coordinator.ts index 80226a3a9..05aa0fefd 100644 --- a/src/service/backup/gist/coordinator.ts +++ b/src/background/service/backup/gist/coordinator.ts @@ -11,7 +11,7 @@ import { } from "@api/gist" import { SOURCE_CODE_PAGE } from "@util/constant/url" import MonthIterator from "@util/month-iterator" -import { formatTimeYMD } from "@util/time" +import { getBirthday, parseTime } from "@util/time" import { calcAllBuckets, divide2Buckets, gistData2Rows, type GistData } from "./compressor" const TIMER_META_GIST_DESC = "Used for timer to save meta info. Don't change this description :)" @@ -48,7 +48,7 @@ function bucket2filename(bucket: string, cid: string) { return `${bucket}_${cid}.json` } -function filterDate(row: timer.core.Row, start: string, end: string) { +function filterDate(row: tt4b.core.Row, start: string, end: string) { const { date } = row if (!date) return false if (start && date < start) return false @@ -56,7 +56,7 @@ function filterDate(row: timer.core.Row, start: string, end: string) { return true } -function checkTokenExist(context: timer.backup.CoordinatorContext): string { +function checkTokenExist(context: tt4b.backup.CoordinatorContext): string { const token = context.auth?.token if (!token) { throw new Error("Token must not be empty. This can't happen, please contact to the developer") @@ -64,10 +64,10 @@ function checkTokenExist(context: timer.backup.CoordinatorContext): strin return token } -export default class GistCoordinator implements timer.backup.Coordinator { +export default class GistCoordinator implements tt4b.backup.Coordinator { async updateClients( - context: timer.backup.CoordinatorContext, - clients: timer.backup.Client[], + context: tt4b.backup.CoordinatorContext, + clients: tt4b.backup.Client[], ): Promise { const gist = await this.getMetaGist(context) if (!gist) { @@ -82,7 +82,7 @@ export default class GistCoordinator implements timer.backup.Coordinator await updateGist(checkTokenExist(context), gist.id, { description: gist.description, public: false, files }) } - async listAllClients(context: timer.backup.CoordinatorContext): Promise { + async listAllClients(context: tt4b.backup.CoordinatorContext): Promise { const gist = await this.getMetaGist(context) if (!gist) { return [] @@ -91,11 +91,11 @@ export default class GistCoordinator implements timer.backup.Coordinator return file ? await getJsonFileContent(file) ?? [] : [] } - async download(context: timer.backup.CoordinatorContext, startTime: Date, endTime: Date, targetCid?: string): Promise { - const allYearMonth = new MonthIterator(startTime, endTime || new Date()).toArray() - const result: timer.core.Row[] = [] - const start = formatTimeYMD(startTime) - const end = formatTimeYMD(endTime) + async download(context: tt4b.backup.CoordinatorContext, start: string, end: string, targetCid?: string): Promise { + const startTime = parseTime(start) ?? getBirthday() + const endTime = parseTime(end) ?? new Date() + const allYearMonth = new MonthIterator(startTime, endTime).toArray() + const result: tt4b.core.Row[] = [] await Promise.all(allYearMonth.map(async yearMonth => { const filename = bucket2filename(yearMonth, targetCid || context.cid) const gist: Gist = await this.getStatGist(context) @@ -110,7 +110,7 @@ export default class GistCoordinator implements timer.backup.Coordinator return result } - async upload(context: timer.backup.CoordinatorContext, rows: timer.core.Row[]): Promise { + async upload(context: tt4b.backup.CoordinatorContext, rows: tt4b.core.Row[]): Promise { const cid = context.cid const buckets = divide2Buckets(rows) const gist = await this.getStatGist(context) @@ -126,7 +126,7 @@ export default class GistCoordinator implements timer.backup.Coordinator files: files2Update, description: TIMER_DATA_GIST_DESC } - updateGist(checkTokenExist(context), gist.id, gist2update) + await updateGist(checkTokenExist(context), gist.id, gist2update) } private isTargetMetaGist(gist: Gist): boolean { @@ -137,7 +137,7 @@ export default class GistCoordinator implements timer.backup.Coordinator return gist.description === TIMER_DATA_GIST_DESC } - private async getMetaGist(context: timer.backup.CoordinatorContext): Promise { + private async getMetaGist(context: tt4b.backup.CoordinatorContext): Promise { const gistId = context.cache.metaGistId const token = checkTokenExist(context) // 1. Find by id @@ -165,7 +165,7 @@ export default class GistCoordinator implements timer.backup.Coordinator return created } - private async getStatGist(context: timer.backup.CoordinatorContext): Promise { + private async getStatGist(context: tt4b.backup.CoordinatorContext): Promise { const gistId = context.cache.statGistId const token = checkTokenExist(context) // 1. Find by id @@ -192,13 +192,13 @@ export default class GistCoordinator implements timer.backup.Coordinator return created } - async testAuth(auth: timer.backup.Auth): Promise { + async testAuth(auth: tt4b.backup.Auth): Promise { const { token } = auth if (!token) return 'Token is empty' return testToken(token) } - async clear(context: timer.backup.CoordinatorContext, client: timer.backup.Client): Promise { + async clear(context: tt4b.backup.CoordinatorContext, client: tt4b.backup.Client): Promise { // 1. Find the names of file to delete const { minDate, maxDate, id: cid } = client || {} const allBuckets = calcAllBuckets(minDate, maxDate) diff --git a/src/service/backup/markdown.ts b/src/background/service/backup/markdown.ts similarity index 90% rename from src/service/backup/markdown.ts rename to src/background/service/backup/markdown.ts index 2f3c9a961..0165f50eb 100644 --- a/src/service/backup/markdown.ts +++ b/src/background/service/backup/markdown.ts @@ -10,7 +10,7 @@ import { formatPeriodCommon } from "@util/time" export const CLIENT_FILE_NAME = "clients_no_modify.md" -const CLIENT_FIELDS: MarkdownTableField[] = [ +const CLIENT_FIELDS: MarkdownTableField[] = [ { name: "Client Id", formatter: r => r.id, @@ -42,7 +42,7 @@ function genJsonLine(data: any): string { return `` } -export function convertClients2Markdown(clients: timer.backup.Client[]): string { +export function convertClients2Markdown(clients: tt4b.backup.Client[]): string { return genMarkdownTable(clients, CLIENT_FIELDS) } @@ -82,7 +82,7 @@ function genMarkdownTable(list: T[], fields: MarkdownTableField[]): string return lines.join('\n') } -const ROW_FIELDS: MarkdownTableField[] = [ +const ROW_FIELDS: MarkdownTableField[] = [ { name: "Date", formatter: r => r.date, @@ -98,7 +98,7 @@ const ROW_FIELDS: MarkdownTableField[] = [ }, ] -export function divideByDate(rows: timer.core.Row[]): { [date: string]: string } { +export function divideByDate(rows: tt4b.core.Row[]): { [date: string]: string } { return groupBy(rows, row => row.date, list => genMarkdownTable(list, ROW_FIELDS)) } diff --git a/src/service/backup/obsidian/coordinator.ts b/src/background/service/backup/obsidian/coordinator.ts similarity index 76% rename from src/service/backup/obsidian/coordinator.ts rename to src/background/service/backup/obsidian/coordinator.ts index 3a96a8eeb..56263f75f 100644 --- a/src/service/backup/obsidian/coordinator.ts +++ b/src/background/service/backup/obsidian/coordinator.ts @@ -9,10 +9,11 @@ import { updateFile } from "@api/obsidian" import DateIterator from "@util/date-iterator" +import { getBirthday, parseTime } from '@util/time' import { processDir } from "../common" import { CLIENT_FILE_NAME, convertClients2Markdown, divideByDate, parseData } from "../markdown" -function prepareContext(context: timer.backup.CoordinatorContext) { +function prepareContext(context: tt4b.backup.CoordinatorContext) { const { auth, ext, cid } = context const { token } = auth || {} if (!token) { @@ -24,16 +25,16 @@ function prepareContext(context: timer.backup.CoordinatorContext) { return { ctx, dirPath, cid } } -export default class ObsidianCoordinator implements timer.backup.Coordinator { +export default class ObsidianCoordinator implements tt4b.backup.Coordinator { - async updateClients(context: timer.backup.CoordinatorContext, clients: timer.backup.Client[]): Promise { + async updateClients(context: tt4b.backup.CoordinatorContext, clients: tt4b.backup.Client[]): Promise { const { ctx, dirPath } = prepareContext(context) const clientFilePath = `${dirPath}${CLIENT_FILE_NAME}` const content = convertClients2Markdown(clients) await updateFile(ctx, clientFilePath, content) } - async listAllClients(context: timer.backup.CoordinatorContext): Promise { + async listAllClients(context: tt4b.backup.CoordinatorContext): Promise { const { ctx, dirPath } = prepareContext(context) const clientFilePath = `${dirPath}${CLIENT_FILE_NAME}` try { @@ -45,21 +46,23 @@ export default class ObsidianCoordinator implements timer.backup.Coordinator, dateStart: Date, dateEnd: Date, targetCid?: string): Promise { + async download(context: tt4b.backup.CoordinatorContext, start: string, end: string, targetCid?: string): Promise { const { ctx, dirPath, cid } = prepareContext(context) - const dateIterator = new DateIterator(dateStart, dateEnd) - const result: timer.core.Row[] = [] + const startTime = parseTime(start) ?? getBirthday() + const endTime = parseTime(end) ?? new Date() + const dateIterator = new DateIterator(startTime, endTime) + const result: tt4b.core.Row[] = [] await Promise.all(dateIterator.toArray().map(async date => { const filePath = `${dirPath}${targetCid || cid}/${date}.md` const fileContent = await getFileContent(ctx, filePath) - const rows = parseData(fileContent) + const rows = parseData(fileContent) rows?.forEach?.(row => result.push(row)) })) return result } - async upload(context: timer.backup.CoordinatorContext, rows: timer.core.Row[]): Promise { + async upload(context: tt4b.backup.CoordinatorContext, rows: tt4b.core.Row[]): Promise { const { ctx, dirPath, cid } = prepareContext(context) const dateAndContents = divideByDate(rows) @@ -71,7 +74,7 @@ export default class ObsidianCoordinator implements timer.backup.Coordinator { + async testAuth(authInfo: tt4b.backup.Auth, ext: tt4b.backup.TypeExt): Promise { let { endpoint, dirPath, bucket } = ext || {} let { token: auth } = authInfo || {} dirPath = processDir(dirPath) @@ -102,7 +105,7 @@ export default class ObsidianCoordinator implements timer.backup.Coordinator, client: timer.backup.Client): Promise { + async clear(context: tt4b.backup.CoordinatorContext, client: tt4b.backup.Client): Promise { const cid = client.id const { ctx, dirPath } = prepareContext(context) const clientDirPath = `${dirPath}${cid}/` diff --git a/src/background/service/backup/processor.ts b/src/background/service/backup/processor.ts new file mode 100644 index 000000000..23fae06d0 --- /dev/null +++ b/src/background/service/backup/processor.ts @@ -0,0 +1,195 @@ +/** + * Copyright (c) 2022 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import syncDb from "@db/backup-database" +import statDb from "@db/stat-database" +import optionHolder from "../components/option-holder" +import { getCid, updateBackUpTime } from "../meta-service" +import GistCoordinator from "./gist/coordinator" +import ObsidianCoordinator from "./obsidian/coordinator" +import WebDAVCoordinator from "./web-dav/coordinator" + +type AuthCheckResult = { + option: tt4b.option.BackupOption + auth: tt4b.backup.Auth + ext: tt4b.backup.TypeExt + type: tt4b.backup.Type + coordinator: tt4b.backup.Coordinator + errorMsg?: string +} + +class CoordinatorContextWrapper implements tt4b.backup.CoordinatorContext { + auth: tt4b.backup.Auth + ext?: tt4b.backup.TypeExt + cache: Cache = {} as unknown as Cache + type: tt4b.backup.Type + cid: string + + constructor(cid: string, auth: tt4b.backup.Auth, ext: tt4b.backup.TypeExt, type: tt4b.backup.Type) { + this.cid = cid + this.auth = auth + this.ext = ext + this.type = type + } + + async init(): Promise> { + this.cache = await syncDb.getCache(this.type) as Cache + return this + } + + handleCacheChanged(): Promise { + return syncDb.updateCache(this.type, this.cache) + } +} + +async function syncFull( + context: tt4b.backup.CoordinatorContext, + coordinator: tt4b.backup.Coordinator, + client: tt4b.backup.Client +): Promise { + // 1. select rows + const rows = await statDb.select() + const allDates = rows.map(r => r.date).sort((a, b) => a == b ? 0 : a > b ? 1 : -1) + client.maxDate = allDates[allDates.length - 1] + client.minDate = allDates[0] + // 2. upload + await coordinator.upload(context, rows) +} + +function filterClient(c: tt4b.backup.Client, excludeLocal: boolean, localClientId: string, start?: string, end?: string) { + // Exclude local client + if (excludeLocal && c.id === localClientId) return false + // Judge range + if (start && c.maxDate && c.maxDate < start) return false + if (end && c.minDate && c.minDate > end) return false + return true +} + +function prepareAuth(option: tt4b.option.BackupOption): tt4b.backup.Auth { + const type = option?.backupType || 'none' + const token = option?.backupAuths?.[type] + const login = option.backupLogin?.[type] + return { token, login } +} + +class Processor { + coordinators: { + [type in tt4b.backup.Type]: tt4b.backup.Coordinator + } + + constructor() { + this.coordinators = { + none: null as unknown as tt4b.backup.Coordinator, + gist: new GistCoordinator(), + obsidian_local_rest_api: new ObsidianCoordinator(), + web_dav: new WebDAVCoordinator(), + } + } + + async syncData(): Promise { + const { option, auth, ext, type, coordinator, errorMsg } = await this.checkAuth() + if (errorMsg) return errorMsg + + const cid = await getCid() + const context: tt4b.backup.CoordinatorContext = await new CoordinatorContextWrapper(cid, auth, ext, type).init() + const client: tt4b.backup.Client = { + id: cid, + name: option.clientName, + minDate: undefined, + maxDate: undefined + } + try { + await syncFull(context, coordinator, client) + const clients = (await coordinator.listAllClients(context)).filter(a => a.id !== cid) + clients.push(client) + await coordinator.updateClients(context, clients) + // Update time + await updateBackUpTime(type, Date.now()) + } catch (e) { + console.error("Error to sync data", e) + return e instanceof Error ? e.message : String(e ?? 'Unknown Error') + } + } + + async listClients(): Promise<(tt4b.backup.Client & { current: boolean })[]> { + const { auth, ext, type, coordinator, errorMsg } = await this.checkAuth() + if (errorMsg) throw new Error(errorMsg) + const cid = await getCid() + const context = await new CoordinatorContextWrapper(cid, auth, ext, type).init() + const clients = await coordinator.listAllClients(context) + return clients.map(c => ({ ...c, current: c.id === cid })) + } + + async checkAuth(): Promise { + const option = await optionHolder.get() + const { backupType: type, backupExts } = option + const ext = backupExts?.[type] ?? {} + const auth = prepareAuth(option) + + const coordinator: tt4b.backup.Coordinator = type && this.coordinators[type] + if (!coordinator) { + // no coordinator, do nothing + return { option, auth, ext, type, coordinator, errorMsg: "Invalid type" } + } + let errorMsg + try { + errorMsg = await coordinator.testAuth(auth, ext) + } catch (e) { + errorMsg = (e as Error)?.message || 'Unknown error' + } + return { option, auth, ext, type, coordinator, errorMsg } + } + + async query(param: tt4b.backup.RemoteQuery): Promise { + const { type, coordinator, auth, ext, errorMsg } = await this.checkAuth() + if (errorMsg || !coordinator) { + return [] + } + + const { start, end, specCid, excludeLocal } = param + let localCid = await getCid() + // 1. init context + const context: tt4b.backup.CoordinatorContext = await new CoordinatorContextWrapper(localCid, auth, ext, type).init() + // 2. query all clients, and filter them + const allClients = (await coordinator.listAllClients(context)) + .filter(c => filterClient(c, !!excludeLocal, localCid, start, end)) + .filter(c => !specCid || c.id === specCid) + // 3. iterate clients + const result: tt4b.backup.Row[] = [] + await Promise.all( + allClients.map(async client => { + const { id, name } = client + const rows = await coordinator.download(context, start, end, id) + rows.forEach(row => result.push({ + ...row, + cid: id, + cname: name, + })) + }) + ) + console.log(`Queried ${result.length} remote items`) + return result + } + + async clear(cid: string): Promise { + const { auth, ext, type, coordinator, errorMsg } = await this.checkAuth() + if (errorMsg) return errorMsg + let localCid = await getCid() + const context: tt4b.backup.CoordinatorContext = await new CoordinatorContextWrapper(localCid, auth, ext, type).init() + // 1. Find the client + const allClients = await coordinator.listAllClients(context) + const client = allClients?.filter(c => c?.id === cid)?.[0] + if (!client) return + // 2. clear + await coordinator.clear(context, client) + // 3. remove client + const newClients = allClients.filter(c => c?.id !== cid) + await coordinator.updateClients(context, newClients) + } +} + +export default new Processor() \ No newline at end of file diff --git a/src/service/backup/web-dav/coordinator.ts b/src/background/service/backup/web-dav/coordinator.ts similarity index 74% rename from src/service/backup/web-dav/coordinator.ts rename to src/background/service/backup/web-dav/coordinator.ts index a8a040aa6..07c116c04 100644 --- a/src/service/backup/web-dav/coordinator.ts +++ b/src/background/service/backup/web-dav/coordinator.ts @@ -1,12 +1,13 @@ import { - deleteDir, judgeDirExist, makeDir, readFile, writeFile, + deleteDir, judgeDirExist, makeDirs, readFile, writeFile, type WebDAVAuth, type WebDAVContext, } from "@api/web-dav" import DateIterator from "@util/date-iterator" +import { getBirthday, parseTime } from '@util/time' import { processDir } from "../common" import { CLIENT_FILE_NAME, convertClients2Markdown, divideByDate, parseData } from "../markdown" -function getEndpoint(ext: timer.backup.TypeExt | undefined): string | undefined { +function getEndpoint(ext: tt4b.backup.TypeExt | undefined): string | undefined { let { endpoint } = ext || {} if (endpoint?.endsWith('/')) { endpoint = endpoint.substring(0, endpoint.length - 1) @@ -14,7 +15,7 @@ function getEndpoint(ext: timer.backup.TypeExt | undefined): string | undefined return endpoint } -function prepareContext(context: timer.backup.CoordinatorContext): WebDAVContext { +function prepareContext(context: tt4b.backup.CoordinatorContext): WebDAVContext { const { auth, ext } = context const endpoint = getEndpoint(ext) if (!endpoint) { @@ -28,8 +29,8 @@ function prepareContext(context: timer.backup.CoordinatorContext): WebDAV return { auth: webDavAuth, endpoint } } -export default class WebDAVCoordinator implements timer.backup.Coordinator { - async updateClients(context: timer.backup.CoordinatorContext, clients: timer.backup.Client[]): Promise { +export default class WebDAVCoordinator implements tt4b.backup.Coordinator { + async updateClients(context: tt4b.backup.CoordinatorContext, clients: tt4b.backup.Client[]): Promise { const dirPath = processDir(context?.ext?.dirPath) const clientFilePath = `${dirPath}${CLIENT_FILE_NAME}` const content = convertClients2Markdown(clients) @@ -37,7 +38,7 @@ export default class WebDAVCoordinator implements timer.backup.Coordinator): Promise { + async listAllClients(context: tt4b.backup.CoordinatorContext): Promise { const dirPath = processDir(context?.ext?.dirPath) const clientFilePath = `${dirPath}${CLIENT_FILE_NAME}` const davContext = prepareContext(context) @@ -50,23 +51,25 @@ export default class WebDAVCoordinator implements timer.backup.Coordinator, dateStart: Date, dateEnd: Date, targetCid?: string): Promise { + async download(context: tt4b.backup.CoordinatorContext, start: string, end: string, targetCid?: string): Promise { const dirPath = processDir(context?.ext?.dirPath) const davContext = prepareContext(context) targetCid = targetCid || context?.cid + const dateStart = parseTime(start) ?? getBirthday() + const dateEnd = parseTime(end) ?? new Date() const dateIterator = new DateIterator(dateStart, dateEnd) - const result: timer.core.Row[] = [] + const result: tt4b.core.Row[] = [] await Promise.all(dateIterator.toArray().map(async date => { const filePath = `${dirPath}${targetCid}/${date}.md` const fileContent = await readFile(davContext, filePath) - const rows = parseData(fileContent) + const rows = parseData(fileContent) rows?.forEach?.(row => result.push(row)) })) return result } - async upload(context: timer.backup.CoordinatorContext, rows: timer.core.Row[]): Promise { + async upload(context: tt4b.backup.CoordinatorContext, rows: tt4b.core.Row[]): Promise { const dateAndContents = divideByDate(rows) const dirPath = processDir(context?.ext?.dirPath) const cid = context?.cid @@ -84,14 +87,11 @@ export default class WebDAVCoordinator implements timer.backup.Coordinator { + async testAuth(auth: tt4b.backup.Auth, ext: tt4b.backup.TypeExt): Promise { const endpoint = getEndpoint(ext) if (!endpoint) { return "The endpoint is blank" @@ -111,16 +111,17 @@ export default class WebDAVCoordinator implements timer.backup.Coordinator, client: timer.backup.Client): Promise { + async clear(context: tt4b.backup.CoordinatorContext, client: tt4b.backup.Client): Promise { const cid = client.id const dirPath = processDir(context.ext?.dirPath) const davContext = prepareContext(context) diff --git a/src/service/components/host-merge-ruler.ts b/src/background/service/components/host-merge-ruler.ts similarity index 82% rename from src/service/components/host-merge-ruler.ts rename to src/background/service/components/host-merge-ruler.ts index 046d06495..96d2e94f2 100644 --- a/src/service/components/host-merge-ruler.ts +++ b/src/background/service/components/host-merge-ruler.ts @@ -5,8 +5,9 @@ * https://opensource.org/licenses/MIT */ +import { getPsl } from '@bg/psl' +import FIFOCache from '@util/fifo-cache' import { isIpAndPort, judgeVirtualFast } from "@util/pattern" -import { get } from "@util/psl" /** * @param origin origin host @@ -42,7 +43,7 @@ const processRegStr = (regStr: string) => regStr .split('**').join('.+') .split('*').join('[^\\.]+') -function convert(dbItem: timer.merge.Rule): RegRuleItem | [string, string | number] { +function convert(dbItem: tt4b.merge.Rule): RegRuleItem | [string, string | number] { const { origin, merged } = dbItem if (origin.includes('*')) { const regStr = processRegStr(origin) @@ -58,9 +59,9 @@ export default class CustomizedHostMergeRuler { private regulars: RegRuleItem[] = [] - private cache: Record = {} + private cache: FIFOCache = new FIFOCache(500) - constructor(rules: timer.merge.Rule[]) { + constructor(rules: tt4b.merge.Rule[]) { rules.map(item => convert(item)) .forEach(rule => Array.isArray(rule) ? (this.noRegMergeRules[rule[0]] = rule[1] || rule[0]) @@ -68,9 +69,10 @@ export default class CustomizedHostMergeRuler { } merge(origin: string): string { - let result = this.cache[origin] + let result = this.cache.get(origin) if (result) return result - result = this.cache[origin] = this.mergeInner(origin) + result = this.mergeInner(origin) + this.cache.set(origin, result) return result } @@ -79,12 +81,10 @@ export default class CustomizedHostMergeRuler { * @returns merged host */ private mergeInner(origin: string): string { - let host = origin + let host: string | undefined = origin if (judgeVirtualFast(origin)) { host = origin.split('/')?.[0] - if (!host) { - return origin - } + if (!host) return origin } // First check the static rules let merged = this.noRegMergeRules[host] @@ -94,9 +94,7 @@ export default class CustomizedHostMergeRuler { matchResult && (merged = matchResult.result) if (merged === undefined) { // No rule matched - return isIpAndPort(host) - ? host - : get(host) || this.merge0(2, host) + return isIpAndPort(host) ? host : (getPsl(host) ?? this.merge0(2, host)) } else { return this.merge0(merged, host) } diff --git a/src/background/service/components/immigration.ts b/src/background/service/components/immigration.ts new file mode 100644 index 000000000..b1cf58c17 --- /dev/null +++ b/src/background/service/components/immigration.ts @@ -0,0 +1,54 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import packageInfo from "@/package" +import limitDatabase from "@db/limit-database" +import mergeRuleDatabase from "@db/merge-rule-database" +import statDatabase from "@db/stat-database" +import type { BrowserMigratable, StorageMigratable } from '@db/types' +import whitelistDatabase from "@db/whitelist-database" + +const BROWSER_MIGRATABLES: BrowserMigratable[] = [ + statDatabase, + limitDatabase, + mergeRuleDatabase, + whitelistDatabase, +] + +const STORAGE_MIGRATABLES: StorageMigratable[] = [ + statDatabase, +] + +export async function exportData(): Promise { + const data: tt4b.backup.ExportData = { + __meta__: { version: packageInfo.version, ts: Date.now() }, + } + for (const migratable of BROWSER_MIGRATABLES) { + const namespace = migratable.namespace + const dataAny = data as any + dataAny[namespace] = await migratable.exportData() + } + return data +} + +export async function importData(data: unknown): Promise { + for (const db of BROWSER_MIGRATABLES) await db.importData(data) +} + +export async function migrateStorage(type: tt4b.option.StorageType): Promise { + const dataList: unknown[] = [] + // 1. migrate all the databases firstly + for (const migratable of STORAGE_MIGRATABLES) { + const data = await migratable.migrateStorage(type) + dataList.push(data) + } + // 2. after migration + for (const migratable of STORAGE_MIGRATABLES) { + const [data] = dataList.splice(0, 1) + await migratable.afterStorageMigrated(data) + } +} diff --git a/src/background/service/components/import-processor.ts b/src/background/service/components/import-processor.ts new file mode 100644 index 000000000..52551a1da --- /dev/null +++ b/src/background/service/components/import-processor.ts @@ -0,0 +1,50 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import statDatabase from "@db/stat-database" +import { mergeWith } from '@util/stat' +import backupProcessor from "../backup/processor" + +export async function importOther(query: tt4b.imported.ProcessQuery): Promise { + const { data, resolution } = query + if (resolution === 'overwrite') { + return processOverwrite(data) + } + return processAcc(data) +} + +async function processOverwrite(data: tt4b.imported.Data): Promise { + const { rows, focus, time } = data + const exist = await statDatabase.batchSelect(rows) + await mergeWith(rows, exist, async (row, exist) => { + focus && exist?.focus && (row.focus = exist.focus) + time && exist?.time && (row.time = exist.time) + await statDatabase.forceUpdate(row) + }) +} + +async function processAcc(data: tt4b.imported.Data): Promise { + const { rows } = data + await Promise.all(rows.map(async row => { + const { host, date, focus = 0, time = 0 } = row + await statDatabase.accumulate(host, date, { focus, time }) + })) +} + + +export async function previewBackup(param: tt4b.backup.RemoteQuery): Promise { + const remoteRows = await backupProcessor.query(param) + const rows: tt4b.imported.Row[] = remoteRows.map(rr => ({ + date: rr.date, + host: rr.host, + focus: rr.focus, + time: rr.time, + })) + const exists = await statDatabase.batchSelect(rows) + await mergeWith(rows, exists, (r, exist) => { r.exist = exist }) + return rows +} \ No newline at end of file diff --git a/src/background/service/components/option-holder.ts b/src/background/service/components/option-holder.ts new file mode 100644 index 000000000..5a9a8d966 --- /dev/null +++ b/src/background/service/components/option-holder.ts @@ -0,0 +1,40 @@ +import { onPermRemoved } from "@api/chrome/permission" +import db from "@db/option-database" +import { defaultOption } from '@util/constant/option' + +type ChangeListener = (newVal: tt4b.option.DefaultOption, oldVal: tt4b.option.DefaultOption) => void + +class OptionHolder { + private value: tt4b.option.DefaultOption | undefined + private listeners: ChangeListener[] = [] + + constructor() { + onPermRemoved(perm => { + perm.permissions?.includes('tabGroups') && this.set({ countTabGroup: false }) + }) + } + + private async reset(): Promise { + const latest = Object.assign(defaultOption(), await db.getOption()) + this.value = latest + return latest + } + + async get(): Promise { + return this.value ?? await this.reset() + } + + addChangeListener(listener: ChangeListener) { + listener && this.listeners.push(listener) + } + + async set(option: Partial): Promise { + const exist = await this.get() + const toSet = Object.assign(defaultOption(), exist, option) + await db.setOption(toSet) + this.value = toSet + this.listeners.forEach(listener => listener(toSet, exist)) + } +} + +export default new OptionHolder() \ No newline at end of file diff --git a/src/service/components/page-info.ts b/src/background/service/components/page-info.ts similarity index 93% rename from src/service/components/page-info.ts rename to src/background/service/components/page-info.ts index a36fb7621..ccaf0e3f7 100644 --- a/src/service/components/page-info.ts +++ b/src/background/service/components/page-info.ts @@ -11,7 +11,7 @@ const DEFAULT_PAGE_SIZE = 10 /** * Slice the origin list to page */ -export function slicePageResult(originList: T[], pageQuery?: timer.common.PageQuery): timer.common.PageResult { +export function slicePageResult(originList: T[], pageQuery?: tt4b.common.PageQuery): tt4b.common.PageResult { let { num: pageNum = DEFAULT_PAGE_NUM, size: pageSize = DEFAULT_PAGE_SIZE } = pageQuery || {} pageNum < 1 && (pageNum = DEFAULT_PAGE_NUM) pageSize < 1 && (pageSize = DEFAULT_PAGE_SIZE) diff --git a/src/service/components/period-calculator.ts b/src/background/service/components/period-calculator.ts similarity index 50% rename from src/service/components/period-calculator.ts rename to src/background/service/components/period-calculator.ts index 29883c414..5bed6ccd4 100644 --- a/src/service/components/period-calculator.ts +++ b/src/background/service/components/period-calculator.ts @@ -6,14 +6,14 @@ */ import { sum } from "@util/array" -import { after, compare, indexOf, keyOf, lastKeyOfLastDate, rowOf, startOfKey } from "@util/period" +import { after, compare, indexOf, keyOf, rowOf, startOfKey } from "@util/period" /** * @param timestamp current ts * @param milliseconds milliseconds * @returns results, can't be empty if milliseconds is positive */ -export function calculate(timestamp: number, milliseconds: number): timer.period.Result[] { +export function calculate(timestamp: number, milliseconds: number): tt4b.period.Result[] { if (milliseconds <= 0) return [] const key = keyOf(timestamp) @@ -21,7 +21,7 @@ export function calculate(timestamp: number, milliseconds: number): timer.period const currentResult = { ...key, milliseconds: 0 } const extraMill = timestamp - start - const result: timer.period.Result[] = [] + const result: tt4b.period.Result[] = [] if (extraMill < milliseconds) { // milliseconds including before period // 1st. add before ones @@ -37,49 +37,26 @@ export function calculate(timestamp: number, milliseconds: number): timer.period return result } -/** - * Found the max divisible period - * - * @param period key - * @param periodWindowSize divisor - */ -export function getMaxDivisiblePeriod(period: timer.period.Key, periodWindowSize: number): timer.period.Key { - const maxOrder = period.order - let order = -1 - while (order <= maxOrder) order += periodWindowSize - order -= periodWindowSize - if (order === -1) return lastKeyOfLastDate(period) - period.order = order - return period -} +export function merge(periods: tt4b.period.Result[], size: number): tt4b.period.Row[] { + periods = periods.sort(compare) + const first = periods[0] + const last = periods[periods.length - 1] + if (!first || !last) return [] -export type MergeConfig = { - periodSize: number - /** - * Inclusive - */ - start: timer.period.Key - /** - * Inclusive - */ - end: timer.period.Key -} - -export function merge(periods: timer.period.Result[], config: MergeConfig): timer.period.Row[] { - if (!periods?.length) return [] - const result: timer.period.Row[] = [] - let { start, end, periodSize } = config const map: Map = new Map() periods.forEach(p => map.set(indexOf(p), p.milliseconds)) + let mills: number[] = [] - for (; compare(start, end) <= 0; start = after(start, 1)) { + let start: tt4b.period.Key = first + const rows: tt4b.period.Row[] = [] + for (; compare(start, last) <= 0; start = after(start, 1)) { mills.push(map.get(indexOf(start)) ?? 0) - const isEndOfWindow = (start.order % periodSize) === periodSize - 1 + const isEndOfWindow = (start.order % size) === size - 1 if (isEndOfWindow) { - const isFullWindow = mills.length === periodSize - isFullWindow && result.push(rowOf(start, periodSize, sum(mills))) + const isFullWindow = mills.length === size + isFullWindow && rows.push(rowOf(start, size, sum(mills))) mills = [] } } - return result + return rows } \ No newline at end of file diff --git a/src/background/service/components/virtual-site-holder.ts b/src/background/service/components/virtual-site-holder.ts new file mode 100644 index 000000000..def14a533 --- /dev/null +++ b/src/background/service/components/virtual-site-holder.ts @@ -0,0 +1,39 @@ +import db from "@db/site-database" +import { compileAntPattern } from '@util/pattern' + +/** + * The singleton implementation of virtual sites holder + * + * @since 1.6.0 + */ +class VirtualSiteHolder { + hostRegMap: Record = {} + + constructor() { + db.select().then(keys => keys.forEach(key => this.buildWith(key))) + } + + buildWith({ host, type }: tt4b.site.SiteKey) { + if (type !== 'virtual') return + this.hostRegMap[host] = compileAntPattern(host) + } + + onDeleted({ host, type }: tt4b.site.SiteKey) { + if (type !== 'virtual') return + delete this.hostRegMap[host] + } + + /** + * Find the virtual sites which matches the target url + * + * @param url + * @returns virtual sites + */ + findMatched(url: string): string[] { + return Object.entries(this.hostRegMap) + .filter(([_, reg]) => reg.test(url)) + .map(([k]) => k) + } +} + +export default new VirtualSiteHolder() \ No newline at end of file diff --git a/src/background/service/components/week-helper.ts b/src/background/service/components/week-helper.ts new file mode 100644 index 000000000..aba6627e8 --- /dev/null +++ b/src/background/service/components/week-helper.ts @@ -0,0 +1,76 @@ +import { locale } from "@i18n" +import { getStartOfDay, getWeekDay, MILL_PER_DAY } from "@util/time" +import optionHolder from './option-holder' + +function getDefaultWeekStart(localeOpt: tt4b.option.LocaleOption): number { + const parts = navigator.language.split(/[-_]/) + const region = parts[parts.length - 1]?.toLowerCase() ?? '' + switch (locale) { + // Only Venezuela uses Sunday as the first day of week + case 'es': return 've' === region ? 6 : 0 + // Lebanon, Morocco and Tunisia use Monday as the first day of week + case 'ar': return ['la', 'ma', 'tn'].includes(region) ? 0 : 6 + // Other countries or fallbacked to English use Monday as the first day of week + case 'en': + if (['us', 'ca', 'in', 'za', 'jm', 'ph'].includes(region)) { + // US, Canaca, India, South Africa, Jamaica, Philippines use Sunday as the first day of week + return 6 + } else if (['gb', 'au', 'nz'].includes(region)) { + // UK, Australia and New Zealand use Monday as the first day of week + return 0 + } else if (localeOpt === 'en') { + // If locale option is set to English by user, use Sunday as the first day of week + return 6 + } else { + // FALLBACK + return 0 + } + case 'ja': + case 'pt_PT': + // Taiwan, Hong Kong and Macau use Sunday as the first day of week + case 'zh_TW': return 6 + case 'zh_CN': + case 'uk': + case 'de': + case 'fr': + case 'ru': + case 'tr': + case 'pl': + case 'it': return 0 + } +} + +/** + * Week start + * + * @returns 0-6 + */ +export async function getWeekStartDay(): Promise { + const { weekStart, locale: localeOpt } = await optionHolder.get() + return weekStart === 'default' ? getDefaultWeekStart(localeOpt) : weekStart - 1 +} + +/** + * Get the start time and end time of this week + * + * @param now the specific time to calculate + * @returns start time with milliseconds + * + * @since 0.6.0 + */ +export async function getWeekStartTime(now: number): Promise { + const weekStart = await getWeekStartDay() + // Returns 0 - 6 means Monday to Sunday + const weekDayNow = getWeekDay(new Date(now)) + let startDay: number + if (weekDayNow === weekStart) { + startDay = now + } else if (weekDayNow < weekStart) { + const millDelta = (weekDayNow + 7 - weekStart) * MILL_PER_DAY + startDay = now - millDelta + } else { + const millDelta = (weekDayNow - weekStart) * MILL_PER_DAY + startDay = now - millDelta + } + return getStartOfDay(startDay) +} \ No newline at end of file diff --git a/src/service/item-service.ts b/src/background/service/item-service.ts similarity index 58% rename from src/service/item-service.ts rename to src/background/service/item-service.ts index 80ba7bf7f..9650025ba 100644 --- a/src/service/item-service.ts +++ b/src/background/service/item-service.ts @@ -1,5 +1,5 @@ import { isValidGroup } from "@api/chrome/tabGroups" -import db, { type StatCondition } from "@db/stat-database" +import db from "@db/stat-database" import { resultOf } from "@util/stat" import optionHolder from "./components/option-holder" import virtualSiteHolder from "./components/virtual-site-holder" @@ -10,53 +10,42 @@ export type ItemIncContext = { groupId?: number } -async function addFocusTime(context: ItemIncContext, focusTime: number): Promise { +export async function addFocusTime(context: ItemIncContext, focusTime: number): Promise { const { host, url, groupId } = context - const resultSet: Record = { [host]: resultOf(focusTime, 0) } + const resultSet: Record = { [host]: resultOf(focusTime, 0) } const virtualHosts = virtualSiteHolder.findMatched(url) virtualHosts.forEach(virtualHost => resultSet[virtualHost] = resultOf(focusTime, 0)) const now = new Date() - await db.accumulateBatch(resultSet, now) + await db.batchAccumulate(resultSet, now) const { countTabGroup } = await optionHolder.get() countTabGroup && isValidGroup(groupId) && db.accumulateGroup(groupId, now, resultOf(focusTime, 0)) } -async function addRunTime(host: string, dateTime: Record) { +export async function addRunTime(host: string, dateTime: Record) { for (const [date, run] of Object.entries(dateTime)) { await db.accumulate(host, date, { focus: 0, time: 0, run }) } } -async function increaseVisit(context: ItemIncContext) { +export async function increaseVisit(context: ItemIncContext) { const { host, url, groupId } = context const resultSet = { [host]: resultOf(0, 1) } virtualSiteHolder.findMatched(url).forEach(virtualHost => resultSet[virtualHost] = resultOf(0, 1)) const now = new Date() - await db.accumulateBatch(resultSet, now) + await db.batchAccumulate(resultSet, now) const { countTabGroup } = await optionHolder.get() countTabGroup && isValidGroup(groupId) && await db.accumulateGroup(groupId, now, resultOf(0, 1)) } -const getResult = (host: string, date: Date | string) => db.get(host, date) - -const selectItems = (cond: StatCondition) => db.select(cond) - -async function batchDeleteGroupById(groupId: number): Promise { - await db.batchDeleteGroup(groupId) -} - -export default { - addFocusTime, - addRunTime, - increaseVisit, - getResult, - selectItems, - batchDeleteGroupById, +export async function getTodayResult(host: string) { + const option = await optionHolder.get() + if (!option.printInConsole) return undefined + return await db.get(host, new Date()) } \ No newline at end of file diff --git a/src/background/service/limit-service.ts b/src/background/service/limit-service.ts new file mode 100644 index 000000000..3dcc6dadc --- /dev/null +++ b/src/background/service/limit-service.ts @@ -0,0 +1,201 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { listTabs, sendMsg2Tab } from "@api/chrome/tab" +import db, { type LimitRecord } from "@db/limit-database" +import { sum } from "@util/array" +import { hasLimited, isEffective, matches, meetTimeLimit } from "@util/limit" +import { formatTimeYMD, getWeekDay, MILL_PER_MINUTE, MILL_PER_SECOND } from "@util/time" +import optionHolder from "./components/option-holder" +import { getWeekStartTime } from './components/week-helper' +import whitelistHolder from "./whitelist/holder" + +export async function selectLimit(param?: tt4b.limit.Query): Promise { + const { enabled, url, id, limited, effective } = param ?? {} + const now = new Date() + const today = formatTimeYMD(now) + const startTime = await getWeekStartTime(now.getTime()) + const startDate = formatTimeYMD(startTime) + const weekday = getWeekDay(now) + + let list = await db.all() + + if (enabled) list = list.filter(item => item.enabled) + if (id) list = list.filter(item => item.id === id) + if (url) list = list.filter(item => matches(item.cond, url)) + + let items = list.map(rec => cvtRecord2Item(rec, today, startDate)) + + if (limited) { + const { limitDelayDuration } = await optionHolder.get() + items = items.filter(item => hasLimited(item, limitDelayDuration)) + } + if (effective || enabled) items = items.filter(item => item.enabled) + if (effective) items = items.filter(item => isEffective(item.weekdays, weekday)) + + return items +} + +function cvtRecord2Item({ records, ...others }: LimitRecord, today: string, weekStartDate: string) { + const todayRec = records[today] + const thisWeekRec = Object.entries(records) + .filter(([k]) => k >= weekStartDate && k <= today) + .map(([, v]) => v) + const weeklyWaste = sum(thisWeekRec.map(r => r.mill ?? 0)) + const weeklyDelayCount = sum(thisWeekRec.map(r => r.delay ?? 0)) + const weeklyVisit = sum(thisWeekRec.map(r => r.visit ?? 0)) + return { + ...others, + waste: todayRec?.mill ?? 0, + visit: todayRec?.visit ?? 0, + delayCount: todayRec?.delay ?? 0, + weeklyWaste, + weeklyDelayCount, + weeklyVisit, + } +} + +/** + * Fired if the item is removed or disabled + * + * @param item + */ +export async function noticeLimitChanged(): Promise { + const tabs = await listTabs() + tabs.forEach(({ id, url }) => { + if (!id || !url) return + sendMsg2Tab(id, 'limitChanged').catch(err => console.info(err?.message)) + }) +} + +export async function removeLimitRules(ids: number[]): Promise { + if (!ids.length) return + await db.batchRemove(ids) + await noticeLimitChanged() +} + +type IncreaseResult = { + limited: tt4b.limit.Item[] + reminder?: tt4b.limit.ReminderInfo +} + +/** + * Add time + * + * @param url url + * @param focusTime time, milliseconds + * @returns the rules is limit cause of this operation + */ +export async function addLimitFocusTime(host: string, url: string, focusTime: number): Promise { + if (whitelistHolder.contains(host, url)) return { limited: [] } + + const allEffective = await selectLimit({ url, effective: true }) + + const toUpdate: { [cond: string]: number } = {} + const limited: tt4b.limit.Item[] = [] + const needReminder: tt4b.limit.Item[] = [] + + const { limitReminder, limitReminderDuration = 0, limitDelayDuration } = await optionHolder.get() + const durationMill = limitReminder ? limitReminderDuration * MILL_PER_MINUTE : 0 + allEffective.forEach(item => { + const [met, reminder] = addFocusForEach(item, focusTime, durationMill, limitDelayDuration) + met && limited.push(item) + reminder && needReminder.push(item) + toUpdate[item.id] = item.waste + }) + const result: IncreaseResult = { limited } + if (needReminder?.length) { + result.reminder = { + items: needReminder, + duration: limitReminderDuration, + } + } + await db.updateWaste(formatTimeYMD(new Date()), toUpdate) + return result +} + +type TimeLimitState = 'NORMAL' | 'REMINDER' | 'LIMITED' + +type LimitTimeStateResult = { + daily: TimeLimitState + weekly: TimeLimitState +} + +export function calcTimeState(item: tt4b.limit.Item, reminderMills: number, delayDuration: number): LimitTimeStateResult { + const res: LimitTimeStateResult = { daily: 'NORMAL', weekly: 'NORMAL' } + const { + time, waste, delayCount, + weekly, weeklyWaste, weeklyDelayCount, + allowDelay, + } = item || {} + const dailyMs = (time ?? 0) * MILL_PER_SECOND + const weeklyMs = (weekly ?? 0) * MILL_PER_SECOND + const delayDaily = { count: delayCount ?? 0, duration: delayDuration, allow: !!allowDelay } + const delayWeekly = { count: weeklyDelayCount ?? 0, duration: delayDuration, allow: !!allowDelay } + if (meetTimeLimit({ wasted: waste, maxLimit: dailyMs }, delayDaily)) res.daily = 'LIMITED' + else if (reminderMills && meetTimeLimit({ wasted: waste + reminderMills, maxLimit: dailyMs }, delayDaily)) res.daily = 'REMINDER' + if (meetTimeLimit({ wasted: weeklyWaste, maxLimit: weeklyMs }, delayWeekly)) res.weekly = 'LIMITED' + else if (reminderMills && meetTimeLimit({ wasted: weeklyWaste + reminderMills, maxLimit: weeklyMs }, delayWeekly)) res.weekly = 'REMINDER' + return res +} + +function addFocusForEach(item: tt4b.limit.Item, focusTime: number, durationMill: number, delayDuration: number): [met: boolean, reminder: boolean] { + const before = calcTimeState(item, durationMill, delayDuration) + item.waste += focusTime + // Fast increase + item.weeklyWaste += focusTime + const after = calcTimeState(item, durationMill, delayDuration) + const met = (before.daily !== 'LIMITED' && after.daily === 'LIMITED') || (before.weekly !== 'LIMITED' && after.weekly === 'LIMITED') + const reminder = (before.daily === 'NORMAL' && after.daily === 'REMINDER') || (before.weekly === 'NORMAL' && after.weekly === 'REMINDER') + return [met, reminder] +} + +/** + * Increase visit count + * @returns the rules is limited + */ +export async function incLimitVisit(host: string, url: string): Promise { + if (whitelistHolder.contains(host, url)) return [] + + const allEnabled = await selectLimit({ enabled: true, url }) + const { limitDelayDuration: delayDuration } = await optionHolder.get() + const result: tt4b.limit.Item[] = [] + await db.increaseVisit(formatTimeYMD(new Date()), allEnabled.map(item => item.id)) + allEnabled.forEach(item => { + // Fast increase + item.visit++ + item.weeklyVisit++ + + hasLimited(item, delayDuration) && result.push(item) + }) + return result +} + +export async function delayLimit(url: string): Promise { + const limitedItems = await selectLimit({ url, enabled: true, limited: true }) + limitedItems + .filter(item => item.allowDelay) + .forEach(rule => { + rule.delayCount++ + rule.weeklyDelayCount++ + }) + + const date = formatTimeYMD(new Date()) + await db.updateDelayCount(date, limitedItems) + await noticeLimitChanged() +} + +export async function updateLimitRules(rules: tt4b.limit.Rule[]): Promise { + await db.batchUpdate(rules) + await noticeLimitChanged() +} + +export async function createLimitRule(rule: Omit): Promise { + const id = await db.add(rule) + await noticeLimitChanged() + return id +} diff --git a/src/background/service/meta-service.ts b/src/background/service/meta-service.ts new file mode 100644 index 000000000..5572abfce --- /dev/null +++ b/src/background/service/meta-service.ts @@ -0,0 +1,82 @@ +/** + * Copyright (c) 2022 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import db from "@db/meta-database" +import { IS_ANDROID, IS_FIREFOX } from '@util/constant/environment' +import { createArrayGuard, createObjectGuard, isString } from 'typescript-guard' + +export async function getInstallTime(): Promise { + const meta = await db.getMeta() + return meta.installTime ?? Date.now() +} + +export async function updateInstallTime(ts: number) { + const meta = await db.getMeta() + if (meta.installTime) { + // Must not rewrite + return + } + meta.installTime = ts + await db.update(meta) +} + +/** + * @since 1.2.0 + */ +export async function getCid(): Promise { + const meta = await db.getMeta() + const exist = meta.cid + if (exist) return exist + const initial = `${getBrand()}-${Date.now()}` + meta.cid = initial + await db.update(meta) + return initial +} + +// Only exists in chromium browsers +type NavigatorUAData = { + brands: { brand: string }[] + platform: string +} + +const hasUaData = createObjectGuard<{ userAgentData: NavigatorUAData }>({ + userAgentData: createObjectGuard({ + brands: createArrayGuard(createObjectGuard({ brand: isString })), + platform: isString, + }), +}) + +function getBrand() { + if (hasUaData(navigator)) { + const { userAgentData: { brands }, platform } = navigator + const brand = brands.map(e => e.brand) + .filter(brand => brand && brand !== "Chromium" && !brand.includes("Not"))[0]?.replace(' ', '-') + if (brand) return `${platform.toLowerCase()}-${brand.toLowerCase()}` + } + if (IS_FIREFOX) return IS_ANDROID ? 'firefox-android' : 'firefox' + return 'unknown' +} + +/** + * @since 1.4.7 + */ +export async function updateBackUpTime(type: tt4b.backup.Type, time: number) { + const meta = await db.getMeta() + if (!meta.backup) { + meta.backup = {} + } + meta.backup[type] = { ts: time } + await db.update(meta) +} + +/** + * @since 1.4.7 + */ +export async function getLastBackUp(type: tt4b.backup.Type): Promise { + const meta = await db.getMeta() + return meta.backup?.[type]?.ts +} \ No newline at end of file diff --git a/src/background/service/notification/browser/notifier.ts b/src/background/service/notification/browser/notifier.ts new file mode 100644 index 000000000..be31a71b0 --- /dev/null +++ b/src/background/service/notification/browser/notifier.ts @@ -0,0 +1,48 @@ +import { createNotification } from "@api/chrome/notifications" +import { hasPerm, requestPerm } from "@api/chrome/permission" +import { t } from '@bg/i18n' +import { formatPeriodCommon } from '@util/time' +import type { NotificationData, NotificationRequest, Notifier } from '../types' + +/** + * Send notification with `chrome.notifications` API + */ +export default class BrowserNotifier implements Notifier { + /** + * Test if the permission granted, if not granted, then try to grant + */ + private async assertPerm(): Promise { + const hasPermission = await hasPerm('notifications') + if (hasPermission) { + return undefined + } + + const granted = await requestPerm('notifications') + if (!granted) { + return "Notification permission is required but was denied" + } + + return undefined + } + + /** + * Send notification with summary + * + * @param option + * @param data + */ + async send(_: NotificationRequest, data: NotificationData): Promise { + const errMsg = await this.assertPerm() + if (errMsg) return errMsg + + const { cycle, summary: { focus, visit, siteCount } } = data + + const appName = t(msg => msg.meta.name) + const calendar = t(msg => msg.calendar.range[cycle === 'daily' ? 'yesterday' : 'lastWeek']) + const title = `${appName} - ${calendar}` + const focusStr = formatPeriodCommon(focus, true) + const message = t(msg => msg.notification.dailySummary, { focus: focusStr, visit, siteCount }) + + await createNotification('time', { type: 'basic', title, message }) + } +} diff --git a/src/background/service/notification/callback/notifier.ts b/src/background/service/notification/callback/notifier.ts new file mode 100644 index 000000000..c7242d0ee --- /dev/null +++ b/src/background/service/notification/callback/notifier.ts @@ -0,0 +1,61 @@ +import { IS_FIREFOX } from '@util/constant/environment' +import hash from 'hash.js' +import type { NotificationData, NotificationMeta, NotificationRequest, Notifier } from '../types' + +function buildHeaders(meta: NotificationMeta, token: string | undefined): Record { + const headers: Record = { + 'Content-Type': 'application/json', + } + if (token) { + const sign = genSign(meta, token) + headers['Tt4b-Sign'] = sign + } + return headers +} + +function genSign(meta: NotificationMeta, auth: string): string { + return hash.hmac(hash.sha256 as any, auth).update(meta).digest('hex') +} + +export default class CallbackNotifier implements Notifier { + private async assertPerm(): Promise { + // Not need to check data permission if not FF + if (!IS_FIREFOX) return undefined + + const perm = await browser?.permissions?.getAll?.() + const granted = perm?.data_collection?.includes?.('technicalAndInteraction') + if (!granted) { + // Unable to request permissions in FF's Service Worker + // So fast fail + return "Required permission is not granted" + } + } + + async send(req: NotificationRequest, data: NotificationData): Promise { + const errMsg = await this.assertPerm() + if (errMsg) return errMsg + + const { endpoint, authToken } = req + + if (!endpoint) return "Endpoint is required for HTTP callback" + + try { + const url = new URL(endpoint) + if (!['http:', 'https:'].includes(url.protocol)) { + return "Endpoint must use HTTP or HTTPS protocol" + } + } catch (e) { + return "Invalid endpoint URL" + } + + const { meta } = data + const headers = buildHeaders(meta, authToken) + + const response = await fetch(endpoint, { + method: 'POST', headers, + body: JSON.stringify(data), + }) + + return response.ok ? undefined : `Server error: ${response.statusText}` + } +} diff --git a/src/background/service/notification/processor.ts b/src/background/service/notification/processor.ts new file mode 100644 index 000000000..95db875b4 --- /dev/null +++ b/src/background/service/notification/processor.ts @@ -0,0 +1,89 @@ +import { getVersion } from "@api/chrome/runtime" +import db from "@db/stat-database" +import { cvtOption2Locale } from "@i18n" +import { cvtDateRange2Str, formatTimeYMD, MILL_PER_DAY, MILL_PER_WEEK } from "@util/time" +import optionHolder from "../components/option-holder" +import BrowserNotifier from "./browser/notifier" +import CallbackNotifier from "./callback/notifier" +import type { NotificationData, NotificationRequest, Notifier } from "./types" + +const DATE_RANGE_CALCULATORS: Record Date | [Date, Date]> = { + daily: now => new Date(now - MILL_PER_DAY), + weekly: now => [new Date(now - MILL_PER_WEEK), new Date(now - MILL_PER_DAY)], +} + +class Processor { + private notifiers: { + [method in tt4b.notification.Method]: Notifier + } + + constructor() { + this.notifiers = { + browser: new BrowserNotifier(), + callback: new CallbackNotifier(), + } + } + + async doSend(): Promise { + const option = await optionHolder.get() + const { + notificationCycle: cycle, notificationMethod: method, + notificationEndpoint: endpoint, notificationAuthToken: authToken, + } = option + if (cycle === 'none') return undefined + + const notifier = this.notifiers[method] + const req: NotificationRequest = { cycle, method, endpoint, authToken } + const data = await this.buildData(req) + + try { + return await notifier.send(req, data) + } catch (e) { + console.error("Error to send notification", e) + return e instanceof Error ? e.message : String(e) + } + } + + private async buildData(req: NotificationRequest): Promise { + const now = Date.now() + const date = DATE_RANGE_CALCULATORS[req.cycle](now) + + // Query rows + const rows = await db.select({ date: cvtDateRange2Str(date) }) + + // Calculate summary + let totalFocus = 0 + let totalVisit = 0 + const uniqueHosts = new Set() + + rows.forEach(row => { + totalFocus += row.focus + totalVisit += row.time + uniqueHosts.add(row.host) + }) + + const option = await optionHolder.get() + const locale = cvtOption2Locale(option.locale) + + const [dateStart, dateEnd] = Array.isArray(date) ? date : [date, date] + + return { + cycle: req.cycle, + meta: { + locale, + version: getVersion(), + ts: Date.now(), + }, + summary: { + focus: totalFocus, + visit: totalVisit, + siteCount: uniqueHosts.size, + dateStart: formatTimeYMD(dateStart), + dateEnd: formatTimeYMD(dateEnd), + }, + row: rows, + } + } +} + +export default new Processor() diff --git a/src/background/service/notification/types.ts b/src/background/service/notification/types.ts new file mode 100644 index 000000000..780367131 --- /dev/null +++ b/src/background/service/notification/types.ts @@ -0,0 +1,40 @@ +type Summary = { + focus: number + visit: number + siteCount: number + dateStart: string + dateEnd: string +} + +export type NotificationMeta = { + locale: tt4b.Locale + version: string + ts: number +} + +export type NotificationRequest = { + cycle: Exclude + method: tt4b.notification.Method + endpoint?: tt4b.option.NotificationOption['notificationEndpoint'] + authToken?: tt4b.option.NotificationOption['notificationAuthToken'] +} + +/** + * Notification data to be sent + */ +export type NotificationData = { + meta: NotificationMeta + cycle: Exclude + summary: Summary + row: tt4b.core.Row[] +} + +/** + * Notifier interface for different notification methods + */ +export interface Notifier { + /** + * Send notification + */ + send(req: NotificationRequest, data: NotificationData): Promise +} \ No newline at end of file diff --git a/src/background/service/period-service.ts b/src/background/service/period-service.ts new file mode 100644 index 000000000..84797989b --- /dev/null +++ b/src/background/service/period-service.ts @@ -0,0 +1,38 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import db from "@db/period-database" +import { after, compare, getDateString } from "@util/period" +import { merge } from "./components/period-calculator" + +function dateStrBetween(startDate: tt4b.period.Key, endDate: tt4b.period.Key): string[] { + const result: string[] = [] + while (compare(startDate, endDate) <= 0) { + result.push(getDateString(startDate)) + startDate = after(startDate, 1) + } + return result +} + +export async function selectPeriods(param: tt4b.period.Query): Promise { + let { range, size = 1 } = param + if (!Number.isInteger(size) || size <= 1) size = 1 + + if (range === undefined) { + const results = await db.getAll() + return merge(results, size) + } + const [start, end] = range + const allDates = dateStrBetween(start, end) + const results = await db.getBatch(allDates) + return merge(results, size) +} + +export async function batchDeletePeriods(start: tt4b.period.Key, end: tt4b.period.Key): Promise { + const allDates = dateStrBetween(start, end) + await db.batchDelete(allDates) +} diff --git a/src/background/service/site-service.ts b/src/background/service/site-service.ts new file mode 100644 index 000000000..e5fb102a1 --- /dev/null +++ b/src/background/service/site-service.ts @@ -0,0 +1,206 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { listTabs, sendMsg2Tab } from "@api/chrome/tab" +import siteDatabase from "@db/site-database" +import { ALL_HOSTS as ALL_FILE_HOSTS, MERGED_HOST as MERGED_FILE_HOST } from '@util/constant/remain-host' +import { extractHostname, isValidVirtualHost, judgeVirtualFast } from "@util/pattern" +import { SiteMap, supportCategory } from "@util/site" +import { toUnicode as punyCode2Unicode } from "punycode" +import mergeRuleDatabase from '../database/merge-rule-database' +import statDatabase from '../database/stat-database' +import { getPslSuffix } from '../psl' +import CustomizedHostMergeRuler from './components/host-merge-ruler' +import { slicePageResult } from "./components/page-info" +import virtualSiteHolder from './components/virtual-site-holder' + +export async function saveAlias(key: tt4b.site.SiteKey, alias: string | undefined, noRewrite?: boolean) { + const exist = await siteDatabase.get(key) + if (exist && noRewrite) return + await siteDatabase.save({ ...exist, ...key, alias }) +} + +export async function removeIconUrl(key: tt4b.site.SiteKey) { + const exist = await siteDatabase.get(key) + if (!exist) return + delete exist.iconUrl + await siteDatabase.save(exist) +} + +export async function saveIconUrl(key: tt4b.site.SiteKey, iconUrl: string) { + const exist = await siteDatabase.get(key) + await siteDatabase.save({ ...exist, ...key, iconUrl }) +} + +export async function saveSiteRunState(key: tt4b.site.SiteKey, enabled: boolean) { + const exist = await siteDatabase.get(key) + if (!exist) return + exist.run = enabled + await siteDatabase.save(exist) + // send msg to tabs + const tabs = await listTabs() + for (const { id } of tabs) { + try { + id && await sendMsg2Tab(id, 'siteRunChange') + } catch { } + } +} + +export async function addSite(siteInfo: tt4b.site.SiteInfo): Promise { + if (await siteDatabase.exist(siteInfo)) { + return 'Site already exists' + } + if (!supportCategory(siteInfo)) siteInfo.cate = undefined + await siteDatabase.save(siteInfo) + virtualSiteHolder.buildWith(siteInfo) +} + +export async function removeSites(keys: tt4b.site.SiteKey[]): Promise { + await siteDatabase.remove(keys) + keys.forEach(key => virtualSiteHolder.onDeleted(key)) +} + +export async function selectSitePage(param?: tt4b.site.PageQuery): Promise> { + const origin = await siteDatabase.select(param) + return slicePageResult(origin, param) +} + +export async function batchChangeCate(cateId: number | undefined, keys: tt4b.site.SiteKey[]): Promise { + keys = keys?.filter(supportCategory) + if (!keys?.length) return + + const sites = await siteDatabase.getBatch(keys) + const siteMap = SiteMap.identify(sites) + const toSave = keys.map(k => ({ ...siteMap.get(k), ...k, cate: cateId })) + await siteDatabase.save(...toSave) +} + +/** + * @since 0.9.0 + */ +export async function getSite(siteKey: tt4b.site.SiteKey): Promise { + const info = await siteDatabase.get(siteKey) + return info ?? siteKey +} + +function moveToFront(arr: T[], idx: number): T[] { + const item = arr[idx] + if (item === undefined) return arr + return [item, ...arr.slice(0, idx), ...arr.slice(idx + 1)] +} + +export async function searchSites(query: string | undefined): Promise { + query = cleanSearchQuery(query) + const filter = query ? (host: string) => host.includes(query) : () => true + const [normal, merged] = await listHosts(filter) + + const keys: tt4b.site.SiteKey[] = [] + normal.forEach(host => keys.push({ host, type: 'normal' })) + merged.forEach(host => keys.push({ host, type: 'merged' })) + + ALL_FILE_HOSTS.forEach(fileHost => filter(fileHost) && keys.push({ host: fileHost, type: 'normal' })) + filter(MERGED_FILE_HOST) && keys.push({ host: MERGED_FILE_HOST, type: 'merged' }) + + const fromDb = await siteDatabase.getBatch(keys) + const siteMap = SiteMap.identify(fromDb) + const rows = keys.map(k => ({ ...siteMap.get(k), ...k })) + const ranked = [...rows.filter(r => !r.alias), ...rows.filter(r => r.alias)] + + const hitIdx = ranked.findIndex(r => r.host === query) + if (hitIdx >= 0) return moveToFront(ranked, hitIdx) + if (!query) return ranked + + if (judgeVirtualFast(query) && isValidVirtualHost(query)) { + return [{ host: query, type: 'virtual' }, ...ranked] + } + + const { host } = extractHostname(query) + const hostIdx = ranked.findIndex(r => r.host === host) + if (hostIdx >= 0) return moveToFront(ranked, hostIdx) + + return [{ host, type: 'normal' }, ...ranked] +} + +function cleanSearchQuery(query: string | undefined): string | undefined { + query = query?.trim?.() + if (!query) return undefined + try { + // Remove protocol and search params, only keep host and path for search + const u = new URL(query) + query = u.host + u.pathname + } catch { } + if (query.endsWith('/')) query += '**' + return query +} + +/** + * Query hosts from stat databases + * + * @param query the part of host + * @since 0.0.8 + */ +async function listHosts(filter: (host: string) => boolean): Promise<[normal: string[], merged: string[]]> { + const rows = await statDatabase.select({ virtual: false }) + const hosts = new Set(rows.map(row => row.host)) + + const mergeRuleItems = await mergeRuleDatabase.selectAll() + const mergeRuler = new CustomizedHostMergeRuler(mergeRuleItems) + + const normal = new Set() + const merged = new Set() + + hosts.forEach(host => { + filter(host) && normal.add(host) + const mergedHost = mergeRuler.merge(host) + filter(mergedHost) && merged.add(mergedHost) + }) + + return [Array.from(normal), Array.from(merged)] +} + +export async function fillInitialAlias(keys: tt4b.site.SiteKey[]) { + const sites = await siteDatabase.getBatch(keys) + const toSave = new SiteMap() + sites.forEach(site => { + if (site.alias) return + const alias = getInitialAlias(site.host) + alias && toSave.put(site, alias) + }) + await batchSaveAlias(toSave) +} + +export function getInitialAlias(host: string): string | undefined { + let parts = host.split('.') + if (parts.length < 2) return + + const suffix = getPslSuffix(host) + const prefix = host.replace(`.${suffix}`, '').replace(/^www\./, '') + parts = prefix.split('.') + return parts.reverse().map(cvt2Alias).join(' ') +} + +function cvt2Alias(part: string): string { + try { + part = punyCode2Unicode(part) + } catch { + } + return part.charAt(0).toUpperCase() + part.slice(1) +} + +async function batchSaveAlias(siteMap: SiteMap): Promise { + if (!siteMap.count()) return + const allSites = await siteDatabase.getBatch(siteMap.keys()) + const existMap = SiteMap.identify(allSites) + + const toSave: tt4b.site.SiteInfo[] = [] + siteMap.forEach((k, alias) => { + const exist = existMap.get(k) + if (exist?.alias) return + toSave.push({ ...exist ?? k, alias }) + }) + await siteDatabase.save(...toSave) +} \ No newline at end of file diff --git a/src/service/stat-service/common.ts b/src/background/service/stat-service/common.ts similarity index 74% rename from src/service/stat-service/common.ts rename to src/background/service/stat-service/common.ts index 6720dafaf..8b3125a8c 100644 --- a/src/service/stat-service/common.ts +++ b/src/background/service/stat-service/common.ts @@ -1,6 +1,6 @@ import { judgeVirtualFast } from "@util/pattern" -export function cvt2SiteRow(rowBase: timer.core.Row): timer.stat.SiteRow { +export function cvt2SiteRow(rowBase: tt4b.core.Row): tt4b.stat.SiteRow { const { host, ...otherFields } = rowBase return { siteKey: { host, type: judgeVirtualFast(host) ? 'virtual' : 'normal' }, diff --git a/src/background/service/stat-service/index.ts b/src/background/service/stat-service/index.ts new file mode 100644 index 000000000..ce3101f40 --- /dev/null +++ b/src/background/service/stat-service/index.ts @@ -0,0 +1,198 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { listAllGroups } from "@api/chrome/tabGroups" +import cateDatabase from "@db/cate-database" +import siteDatabase from "@db/site-database" +import statDatabase, { type StatCondition } from "@db/stat-database" +import { toMap } from "@util/array" +import { CATE_NOT_SET_ID, distinctSites, SiteMap } from "@util/site" +import { isGroup, isSite } from "@util/stat" +import { slicePageResult } from "../components/page-info" +import { cvt2SiteRow } from "./common" +import { mergeCate } from "./merge/cate" +import { mergeDate } from "./merge/date" +import { mergeHost } from "./merge/host" +import { processRemote } from "./remote" + +function extractAllSiteKeys(rows: tt4b.stat.SiteRow[], container: tt4b.site.SiteKey[]) { + rows.forEach(row => { + const { mergedRows } = row + container.push(row.siteKey) + mergedRows?.length && extractAllSiteKeys(mergedRows, container) + }) +} + +function fillRowWithSiteInfo(row: tt4b.stat.SiteRow, siteMap: SiteMap): void { + if (!isSite(row)) return + const { siteKey, mergedRows } = row + + mergedRows?.map(m => fillRowWithSiteInfo(m, siteMap)) + const siteInfo = siteMap.get(siteKey) + if (siteInfo) { + const { cate, iconUrl, alias } = siteInfo + row.cateId = cate + row.alias = alias + row.iconUrl = iconUrl + } +} + +function compareSortVal(a: string | number, b: string | number, direction?: tt4b.common.SortDirection): number { + if (a === b) return 0 + const val = a > b ? 1 : -1 + return direction === 'DESC' ? -val : val +} + +function filterByCateId(itemCateId: number | undefined, cateIds: number[] | undefined): boolean { + if (!cateIds?.length) return true + return cateIds.includes(itemCateId ?? CATE_NOT_SET_ID) +} + +export async function countSite(param?: tt4b.stat.SiteQuery): Promise { + const rows = await statDatabase.select(param) + return rows.length +} + +export async function selectSite(param?: tt4b.stat.SiteQuery): Promise { + const { + mergeHost: needMerge, mergeDate: needMergeDate, + date, query, host, cateIds, + timeRange, focusRange, + virtual, ignoreSite, inclusiveRemote, + sortKey, sortDirection, + } = param ?? {} + + const condition: StatCondition = { + date, timeRange, focusRange, virtual, + keys: host && !needMerge ? host : undefined, + } + let origin = await statDatabase.select(condition) + let siteRows = origin.map(cvt2SiteRow) + inclusiveRemote && (siteRows = await processRemote(siteRows, param)) + + // Merge with rules + needMerge && (siteRows = await mergeHost(siteRows)) + // Fill site info + if (!ignoreSite || query) await fillSite(siteRows) + // Filter + siteRows = siteRows + .filter(({ siteKey: { host: siteHost } }) => !host || host === siteHost) + .filter(({ siteKey: { host: siteHost }, alias }) => !query || siteHost.includes(query) || !!alias?.includes(query)) + .filter(({ cateId }) => filterByCateId(cateId, cateIds)) + // Merge by date + needMergeDate && (siteRows = mergeDate(siteRows)) + // Sort + if (sortKey) { + const sortVal = (a: tt4b.stat.SiteRow) => sortKey === 'host' ? a.siteKey.host : a[sortKey] ?? 0 + siteRows.sort((a, b) => compareSortVal(sortVal(a), sortVal(b), sortDirection)) + } + return siteRows +} + +export async function selectSitePage(param?: tt4b.stat.SitePageQuery): Promise> { + const rows = await selectSite(param) + return slicePageResult(rows, param) +} + +export async function selectCate(param?: tt4b.stat.CateQuery): Promise { + const { + mergeDate: needMergeDate, + date, query, cateIds, + inclusiveRemote, + sortKey, sortDirection, + } = param ?? {} + + let origin = await statDatabase.select({ date }) + + let siteRows = origin.map(cvt2SiteRow) + inclusiveRemote && (siteRows = await processRemote(siteRows, param)) + + // Fill site info + await fillSite(siteRows) + // Merge sites by date first + if (needMergeDate) siteRows = mergeDate(siteRows) + + const categories = await cateDatabase.listAll() + let cateRows = mergeCate(siteRows, categories) + // Filter + cateRows = cateRows + .filter(({ cateKey }) => !cateIds?.length || cateIds.includes(cateKey)) + .filter(({ cateName }) => !query || cateName?.includes(query)) + // Merge cates by date again + if (needMergeDate) cateRows = mergeDate(cateRows) + + // Sort + if (sortKey) { + cateRows.sort((a, b) => compareSortVal(a[sortKey] ?? 0, b[sortKey] ?? 0, sortDirection)) + } + return cateRows +} + +export async function selectCatePage(query?: tt4b.stat.CatePageQuery): Promise> { + const rows = await selectCate(query) + return slicePageResult(rows, query) +} + +async function fillSite(rows: tt4b.stat.SiteRow[]): Promise { + let keys: tt4b.site.SiteKey[] = [] + extractAllSiteKeys(rows, keys) + keys = distinctSites(keys) + + const sites = await siteDatabase.getBatch(keys) + const siteMap = SiteMap.identify(sites) + + rows.forEach(item => fillRowWithSiteInfo(item, siteMap)) + return true +} + +export async function selectGroup(param?: tt4b.stat.GroupQuery): Promise { + const { + date, query, mergeDate: needMergeDate, + focusRange, timeRange, + sortKey, sortDirection, + } = param ?? {} + const list = await statDatabase.selectGroup({ date, focusRange, timeRange }) + const groups = await listAllGroups() + const groupMap = toMap(groups, g => g.id) + let rows: tt4b.stat.GroupRow[] = list.map(({ date, time, focus, run, host }) => { + const groupKey = parseInt(host) + const { title, color } = groupMap[groupKey] ?? {} + return ({ date, groupKey, title, color, run, focus, time }) + }) + rows = rows.filter(({ title }) => !query || title?.includes(query)) + needMergeDate && (rows = mergeDate(rows)) + if (sortKey) { + rows.sort((a, b) => compareSortVal(a[sortKey] ?? 0, b[sortKey] ?? 0, sortDirection)) + } + return rows +} + +export async function selectGroupPage(param?: tt4b.stat.GroupPageQuery) { + const rows = await selectGroup(param) + return slicePageResult(rows, param) +} + +export async function countGroup(param?: tt4b.stat.GroupQuery): Promise { + const { groupIds, date } = param ?? {} + const keys = groupIds?.map(gid => `${gid}`) + const rows = await statDatabase.selectGroup({ keys, date }) + return rows.length +} + +export async function batchDelete(targets: tt4b.stat.StatKey[]) { + if (!targets?.length) return + const siteKeys: tt4b.core.RowKey[] = [] + const groupKeys: [groupId: number, date: string][] = [] + targets.forEach(row => { + const { date } = row + if (!date) return + isSite(row) && siteKeys.push({ host: row.siteKey.host, date }) + isGroup(row) && groupKeys.push([row.groupKey, date]) + }) + await statDatabase.delete(...siteKeys) + await statDatabase.deleteGroup(...groupKeys) +} \ No newline at end of file diff --git a/src/service/stat-service/merge/cate.ts b/src/background/service/stat-service/merge/cate.ts similarity index 76% rename from src/service/stat-service/merge/cate.ts rename to src/background/service/stat-service/merge/cate.ts index a6dfbd727..c57dcff3f 100644 --- a/src/service/stat-service/merge/cate.ts +++ b/src/background/service/stat-service/merge/cate.ts @@ -2,9 +2,9 @@ import { toMap } from "@util/array" import { CATE_NOT_SET_ID } from "@util/site" import { mergeResult } from "./common" -export function mergeCate(origin: timer.stat.SiteRow[], cates: timer.site.Cate[]): timer.stat.CateRow[] { +export function mergeCate(origin: tt4b.stat.SiteRow[], cates: tt4b.site.Cate[]): tt4b.stat.CateRow[] { const cateNameMap = toMap(cates, c => c.id, c => c.name) - const rowMap: Record> = {} + const rowMap: Record> = {} origin.forEach(ele => { if (ele.siteKey.type !== 'normal') return let { date = '', cateId = CATE_NOT_SET_ID } = ele @@ -17,7 +17,7 @@ export function mergeCate(origin: timer.stat.SiteRow[], cates: timer.site.Cate[] time: 0, mergedRows: [], composition: { focus: [], time: [], run: [] }, - } satisfies timer.stat.CateRow + } satisfies tt4b.stat.CateRow } mergeResult(exist, ele) exist.mergedRows.push(ele) diff --git a/src/service/stat-service/merge/common.ts b/src/background/service/stat-service/merge/common.ts similarity index 82% rename from src/service/stat-service/merge/common.ts rename to src/background/service/stat-service/merge/common.ts index 7339f48a1..67ab41994 100644 --- a/src/service/stat-service/merge/common.ts +++ b/src/background/service/stat-service/merge/common.ts @@ -7,9 +7,9 @@ import { isGroup } from "@util/stat" -type _RemoteCompositionMap = Record<'_' | string, timer.stat.RemoteCompositionVal> +type _RemoteCompositionMap = Record<'_' | string, tt4b.stat.RemoteCompositionVal> -function mergeComposition(c1: timer.stat.RemoteComposition | undefined, c2: timer.stat.RemoteComposition | undefined): timer.stat.RemoteComposition { +function mergeComposition(c1: tt4b.stat.RemoteComposition | undefined, c2: tt4b.stat.RemoteComposition | undefined): tt4b.stat.RemoteComposition { const focusMap: _RemoteCompositionMap = {} const timeMap: _RemoteCompositionMap = {} const runMap: _RemoteCompositionMap = {} @@ -28,7 +28,7 @@ function mergeComposition(c1: timer.stat.RemoteComposition | undefined, c2: time return result } -function accCompositionValue(map: _RemoteCompositionMap, value: timer.stat.RemoteCompositionVal) { +function accCompositionValue(map: _RemoteCompositionMap, value: tt4b.stat.RemoteCompositionVal) { if (typeof value === 'number') { const cid = '_' const existVal = map[cid] @@ -48,7 +48,7 @@ function accCompositionValue(map: _RemoteCompositionMap, value: timer.stat.Remot } } -export function mergeResult(target: timer.stat.Row, delta: timer.stat.Row) { +export function mergeResult(target: tt4b.stat.Row, delta: tt4b.stat.Row) { const { focus, time } = delta target.focus += focus ?? 0 target.time += time ?? 0 diff --git a/src/background/service/stat-service/merge/date.ts b/src/background/service/stat-service/merge/date.ts new file mode 100644 index 000000000..055a53665 --- /dev/null +++ b/src/background/service/stat-service/merge/date.ts @@ -0,0 +1,33 @@ +import { identifyTargetKey, isCate, isGroup, isNormalSite, isSite } from "@util/stat" +import { mergeResult } from "./common" + +type MergeRow = + | MakeRequired + | MakeRequired + +export function mergeDate(origin: T[]): T[] { + const map: Record = {} + origin.forEach(ele => { + const { date } = ele + const key = identifyTargetKey(ele) + const exist: MergeRow = map[key] ?? (map[key] = { + ...ele, + focus: 0, + time: 0, + mergedRows: [], + mergedDates: [], + composition: { focus: [], time: [], run: [] }, + }) + mergeResult(exist, ele) + isSite(ele) && isSite(exist) && exist.mergedRows.push(...(ele.mergedRows ?? [])) + isCate(ele) && isCate(exist) && exist.mergedRows.push(...(ele.mergedRows ?? [])) + isGroup(ele) && isGroup(exist) && exist.mergedRows.push(...(ele.mergedRows ?? [])) + date && exist.mergedDates.push(date) + if (isNormalSite(ele) && !isGroup(exist)) { + const { mergedRows, ...toMerge } = ele + exist.mergedRows.push(toMerge) + } + }) + const newRows = Object.values(map) + return newRows as T[] +} \ No newline at end of file diff --git a/src/service/stat-service/merge/host.ts b/src/background/service/stat-service/merge/host.ts similarity index 76% rename from src/service/stat-service/merge/host.ts rename to src/background/service/stat-service/merge/host.ts index 14ad481ed..3a2c6f4d2 100644 --- a/src/service/stat-service/merge/host.ts +++ b/src/background/service/stat-service/merge/host.ts @@ -3,11 +3,11 @@ import CustomizedHostMergeRuler from "@service/components/host-merge-ruler" import { isNormalSite } from "@util/stat" import { mergeResult } from "./common" -export async function mergeHost(origin: timer.stat.SiteRow[]): Promise { - const map: Record> = {} +export async function mergeHost(origin: tt4b.stat.SiteRow[]): Promise { + const map: Record> = {} // Generate ruler - const mergeRuleItems: timer.merge.Rule[] = await mergeRuleDatabase.selectAll() + const mergeRuleItems: tt4b.merge.Rule[] = await mergeRuleDatabase.selectAll() const mergeRuler = new CustomizedHostMergeRuler(mergeRuleItems) origin.forEach(ele => { @@ -25,7 +25,7 @@ export async function mergeHost(origin: timer.stat.SiteRow[]): Promise { - if (!await canReadRemote()) { - return origin - } +export async function processRemote(origin: tt4b.stat.SiteRow[], param?: StatCondition): Promise { // Map to merge - const originMap: Record> = {} + const originMap: Record> = {} origin.forEach(row => originMap[identifyStatKey(row)] = { ...row, composition: { @@ -29,35 +26,24 @@ export async function processRemote(origin: timer.stat.SiteRow[], param?: StatCo const { keys, date } = param ?? {} const keyArr = typeof keys === 'string' ? [keys] : keys const predicate = keyArr?.length - ? ({ host }: timer.core.Row) => keyArr.includes(host) + ? ({ host }: tt4b.core.Row) => keyArr.includes(host) : () => true // 1. query remote - let start: Date | undefined = undefined, end: Date | undefined = undefined - if (date instanceof Array) { + let start: string | undefined, end: string | undefined + if (Array.isArray(date)) { [start, end] = date } else { start = date } - start = start ?? getBirthday() - end = end ?? new Date() + start = start ?? BIRTHDAY + end = end ?? formatTimeYMD(Date.now()) const remote = await processor.query({ excludeLocal: true, start, end }) remote.filter(predicate).forEach(row => processRemoteRow(originMap, row)) return Object.values(originMap) } -/** - * Enabled to read remote backup data - * - * @since 1.2.0 - * @returns T/F - */ -export async function canReadRemote(): Promise { - const { errorMsg } = await processor.checkAuth() - return !errorMsg -} - -function processRemoteRow(rowMap: Record>, remoteBase: timer.core.Row) { +function processRemoteRow(rowMap: Record>, remoteBase: tt4b.core.Row) { const row = cvt2SiteRow(remoteBase) const key = identifyStatKey(row) let exist = rowMap[key] @@ -71,7 +57,7 @@ function processRemoteRow(rowMap: Record) + } satisfies MakeRequired) const { focus = 0, time = 0, run = 0, cid = '', cname } = row diff --git a/src/background/service/throttler/firefox-throttler.ts b/src/background/service/throttler/firefox-throttler.ts new file mode 100644 index 000000000..a2a4b93ab --- /dev/null +++ b/src/background/service/throttler/firefox-throttler.ts @@ -0,0 +1,35 @@ +import { IS_FIREFOX } from '@util/constant/environment' +import { MILL_PER_SECOND } from '@util/time' + +const DEFAULT_INTERVAL = 30 + +export abstract class FirefoxThrottler { + private data: T[] = [] + + constructor(intervalSec?: number) { + if (!IS_FIREFOX) { + return + } + + // it's safety to use setInterval with 60sec interval + // bcz the sw will be unloaded if no events in 10 minutes + intervalSec = Math.min(intervalSec ?? DEFAULT_INTERVAL, 60) + + setInterval(() => { + const toSave = [...this.data] + this.data = [] + if (!toSave.length) return + this.doStore(toSave) + }, intervalSec * MILL_PER_SECOND) + } + + private throttle(data: T[]): void { + this.data.push(...data) + } + + protected abstract doStore(data: T[]): void + + protected save(data: T[]): void { + IS_FIREFOX ? this.throttle(data) : this.doStore(data) + } +} \ No newline at end of file diff --git a/src/background/service/throttler/period-throttler.ts b/src/background/service/throttler/period-throttler.ts new file mode 100644 index 000000000..aeedd63c7 --- /dev/null +++ b/src/background/service/throttler/period-throttler.ts @@ -0,0 +1,18 @@ +import periodDatabase from '@db/period-database' +import { calculate } from '../components/period-calculator' +import { FirefoxThrottler } from './firefox-throttler' + +class PeriodThrottler extends FirefoxThrottler { + public add(timestamp: number, milliseconds: number): void { + const results = calculate(timestamp, milliseconds) + this.save(results) + } + + protected doStore(data: tt4b.period.Result[]): void { + periodDatabase.accumulate(data) + } +} + +const periodThrottler = new PeriodThrottler() + +export default periodThrottler \ No newline at end of file diff --git a/src/service/timeline-service.ts b/src/background/service/throttler/timeline-throttler.ts similarity index 55% rename from src/service/timeline-service.ts rename to src/background/service/throttler/timeline-throttler.ts index 0da113777..c92d98f3e 100644 --- a/src/service/timeline-service.ts +++ b/src/background/service/throttler/timeline-throttler.ts @@ -1,5 +1,22 @@ import timelineDatabase from '@db/timeline-database' import { extractHostname } from '@util/pattern' +import { FirefoxThrottler } from './firefox-throttler' + +class TimelineThrottler extends FirefoxThrottler { + public saveEvent(ev: tt4b.timeline.Event) { + const { start, end, url } = ev + const { host } = extractHostname(url) + if (!host) return + + const durations = split2Durations(start, end) + const ticks: tt4b.timeline.Tick[] = durations.map(([start, duration]) => ({ start, duration, host })) + this.save(ticks) + } + + protected doStore(data: tt4b.timeline.Tick[]): void { + timelineDatabase.batchSave(data) + } +} const split2Durations = (start: number, end: number): [start: number, duration: number][] => { const result: [start: number, duration: number][] = [] @@ -25,12 +42,6 @@ const split2Durations = (start: number, end: number): [start: number, duration: return result } -export async function saveTimelineEvent(ev: timer.timeline.Event): Promise { - const { start, end, url } = ev - const { host } = extractHostname(url) - if (!host) return +const timelineThrottler = new TimelineThrottler() - const durations = split2Durations(start, end) - const ticks: timer.timeline.Tick[] = durations.map(([start, duration]) => ({ start, duration, host })) - await timelineDatabase.batchSave(ticks) -} +export default timelineThrottler \ No newline at end of file diff --git a/src/background/service/timeline-service.ts b/src/background/service/timeline-service.ts new file mode 100644 index 000000000..50b941cc5 --- /dev/null +++ b/src/background/service/timeline-service.ts @@ -0,0 +1,76 @@ +/** + * Copyright (c) 2022-present Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import cateDb from "@db/cate-database" +import mergeDb from '@db/merge-rule-database' +import siteDb from "@db/site-database" +import db from "@db/timeline-database" +import { toMap } from '@util/array' +import { CATE_NOT_SET_ID } from '@util/site' +import CustomizedHostMergeRuler from './components/host-merge-ruler' + +export async function listTimeline(query: tt4b.timeline.Query): Promise { + const ticks = await db.select(query) + const { merge } = query + if (merge === 'domain') { + return mergeByDomain(ticks) + } else if (merge === 'cate') { + return mergeByCate(ticks) + } else { + return fillSiteName(ticks) + } +} + +async function mergeByDomain(ticks: tt4b.timeline.Tick[]): Promise { + const mergeRules = await mergeDb.selectAll() + const merger = new CustomizedHostMergeRuler(mergeRules) + const allHosts = Array.from(new Set(ticks.map(t => t.host))) + const mergedMap = toMap(allHosts, h => h, h => merger.merge(h)) + + const allSiteKeys = Array.from(new Set(Object.values(mergedMap))) + .map((mergedHost) => ({ type: 'merged', host: mergedHost } satisfies tt4b.site.SiteKey)) + const allSites = await siteDb.getBatch(allSiteKeys) + const nameMap = toMap(allSites, s => s.host, s => s.alias) + + return ticks.map(({ start, duration, host }) => { + const seriesKey = mergedMap[host] ?? host + return { + start, duration, + seriesKey, seriesName: nameMap[seriesKey], + } + }) +} + +async function mergeByCate(ticks: tt4b.timeline.Tick[]): Promise { + const cates = await cateDb.listAll() + const cateNameMap = toMap(cates, c => c.id, c => c.name) + const allSiteKeys = Array.from(new Set(ticks.map(t => t.host))) + .map(host => ({ type: 'normal', host } satisfies tt4b.site.SiteKey)) + const allSites = await siteDb.getBatch(allSiteKeys) + const siteCateMap = toMap(allSites, s => s.host, s => s.cate) + + return ticks.map(({ start, duration, host }) => { + const cateId = siteCateMap[host] ?? CATE_NOT_SET_ID + return { + start, duration, + seriesKey: `${cateId}`, + seriesName: cateNameMap[cateId], + } + }) +} + +async function fillSiteName(ticks: tt4b.timeline.Tick[]): Promise { + const allSiteKeys = Array.from(new Set(ticks.map(t => t.host))) + .map(host => ({ type: 'normal', host } satisfies tt4b.site.SiteKey)) + const allSites = await siteDb.getBatch(allSiteKeys) + const nameMap = toMap(allSites, s => s.host, s => s.alias) + + return ticks.map(({ start, duration, host }) => ({ + start, duration, + seriesKey: host, seriesName: nameMap[host], + })) +} diff --git a/src/background/service/whitelist/holder.ts b/src/background/service/whitelist/holder.ts new file mode 100644 index 000000000..3280de659 --- /dev/null +++ b/src/background/service/whitelist/holder.ts @@ -0,0 +1,61 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import db from "@db/whitelist-database" +import WhitelistProcessor from './processor' + +/** + * The singleton implementation of whitelist holder + */ +class WhitelistHolder { + private processor = new WhitelistProcessor() + private postHandlers: ArgCallback[] = [] + + constructor() { + this.rebuild() + } + + private async rebuild(whitelist?: string[]) { + whitelist ??= await db.selectAll() + this.processor.setWhitelist(whitelist) + this.postHandlers.forEach(handler => handler(whitelist)) + } + + addPostHandler(handler: ArgCallback) { + this.postHandlers.push(handler) + } + + async add(white: string): Promise { + await db.add(white) + await this.rebuild() + } + + all(): Promise { + return db.selectAll() + } + + async saveAll(toSave: string[]): Promise { + await db.saveAll(toSave) + await this.rebuild(toSave) + } + + async remove(white: string): Promise { + await db.remove(white) + await this.rebuild() + } + + contains(host: string, url: string): boolean { + return this.processor.contains(host, url) + } + + containsHost(host: string): boolean { + return this.processor.containsHost(host) + } +} + +const whitelistHolder = new WhitelistHolder() +export default whitelistHolder \ No newline at end of file diff --git a/src/service/whitelist/processor.ts b/src/background/service/whitelist/processor.ts similarity index 92% rename from src/service/whitelist/processor.ts rename to src/background/service/whitelist/processor.ts index 27b95b280..fbad9fc93 100644 --- a/src/service/whitelist/processor.ts +++ b/src/background/service/whitelist/processor.ts @@ -30,4 +30,8 @@ export default class WhitelistProcessor { if (this.exclude.some(r => r.test(url))) return false return this.host.includes(host) || this.virtual.some(r => r.test(url)) } + + containsHost(host: string): boolean { + return this.host.includes(host) + } } diff --git a/src/background/side-panel.ts b/src/background/side-panel.ts deleted file mode 100644 index 9d46396cb..000000000 --- a/src/background/side-panel.ts +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Copyright (c) 2024-present Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { IS_MV3 } from "@util/constant/environment" - -export default function initSidePanel() { - if (!IS_MV3) return - chrome.sidePanel?.setOptions?.({ path: "/static/side.html" }) -} \ No newline at end of file diff --git a/src/background/tab-listener.ts b/src/background/tab-listener.ts new file mode 100644 index 000000000..0ed493437 --- /dev/null +++ b/src/background/tab-listener.ts @@ -0,0 +1,49 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { getTab, onTabActivated, onTabUpdated } from "@api/chrome/tab" + +type TabProfile = { + url: string + tabId: number +} + +type UpdatedHandler = (tabId: number, info: ChromeTabUpdatedInfo, tab: ChromeTab) => void + +export default class TabListener { + activatedHandlers: ArgCallback<{ url: string, tabId: number }>[] = [] + updatedHandlers: UpdatedHandler[] = [] + + private async processActivated(tab: ChromeTab) { + const { url, id: tabId } = tab + if (!url || !tabId) return + const tabProf: TabProfile = { url, tabId } + this.activatedHandlers.forEach(func => func(tabProf)) + } + + onActivated(handler: ArgCallback): TabListener { + this.activatedHandlers.push(handler) + return this + } + + onUpdated(handler: UpdatedHandler): TabListener { + this.updatedHandlers.push(handler) + return this + } + + start() { + onTabActivated(async tabId => { + const tab = await getTab(tabId) + tab && this.processActivated(tab) + }) + + onTabUpdated(async (tabId, changeInfo, tab) => { + this.updatedHandlers.forEach(func => func(tabId, changeInfo, tab)) + }) + } +} + diff --git a/src/background/track-server.ts b/src/background/track-server.ts deleted file mode 100644 index 679804c8f..000000000 --- a/src/background/track-server.ts +++ /dev/null @@ -1,143 +0,0 @@ -import { getTab, listTabs, sendMsg2Tab } from "@api/chrome/tab" -import { getWindow } from "@api/chrome/window" -import optionHolder from "@service/components/option-holder" -import itemService, { type ItemIncContext } from "@service/item-service" -import limitService from "@service/limit-service" -import periodService from "@service/period-service" -import whitelistHolder from "@service/whitelist/holder" -import { IS_ANDROID } from "@util/constant/environment" -import { extractHostname } from "@util/pattern" -import { formatTimeYMD, getStartOfDay, MILL_PER_DAY } from "@util/time" -import badgeManager from "./badge-manager" -import MessageDispatcher from "./message-dispatcher" - -async function handleTime(context: ItemIncContext, timeRange: [number, number], tabId: number | undefined): Promise { - const { host, url } = context - const [start, end] = timeRange - const focusTime = end - start - // 1. Save async - await itemService.addFocusTime(context, focusTime) - // 2. Process limit - const { limited, reminder } = await limitService.addFocusTime(host, url, focusTime) - // If time limited after this operation, send messages - limited?.length && sendLimitedMessage(limited) - // If need to reminder, send messages - reminder?.items?.length && tabId && sendMsg2Tab(tabId, 'limitReminder', reminder) - // 3. Add period time - await periodService.add(start, focusTime) - return focusTime -} - -async function handleTrackTimeEvent(event: timer.core.Event, sender: ChromeMessageSender): Promise { - const { url, start, end, ignoreTabCheck } = event - const { id: tabId, windowId, groupId } = sender?.tab || {} - if (!ignoreTabCheck) { - if (await windowNotFocused(windowId)) return - if (await tabNotActive(tabId)) return - } - const { protocol, host } = extractHostname(url) || {} - const option = await optionHolder.get() - - if (protocol === "file" && !option?.countLocalFiles) return - if (whitelistHolder.contains(host, url)) return - - await handleTime({ host, url, groupId }, [start, end], tabId) - if (tabId) { - const winTabs = await listTabs({ active: true, windowId }) - const firstActiveTab = winTabs?.[0] - // Cause there is no way to determine whether this tab is selected in screen-split mode - // So only show badge for first tab for screen-split mode - // @see #246 - firstActiveTab?.id === tabId && badgeManager.updateFocus({ tabId, url }) - } -} - -async function windowNotFocused(winId: number | undefined): Promise { - if (IS_ANDROID) return false - if (!winId) return true - const window = await getWindow(winId) - return !window?.focused -} - -async function tabNotActive(tabId: number | undefined): Promise { - if (!tabId) return true - const tab = await getTab(tabId) - return !tab?.active -} - -async function sendLimitedMessage(items: timer.limit.Item[]) { - const tabs = await listTabs() - if (!tabs?.length) return - for (const tab of tabs) { - try { - const { id } = tab - id && await sendMsg2Tab(id, 'limitTimeMeet', items) - } catch { - /* Ignored */ - } - } -} - -async function handleVisit(context: ItemIncContext) { - await itemService.increaseVisit(context) - const { host, url } = context - const metLimits = await limitService.incVisit(host, url) - // If time limited after this operation, send messages - metLimits?.length && sendLimitedMessage(metLimits) -} - -async function handleIncVisitEvent(param: { host: string, url: string }, sender: ChromeMessageSender): Promise { - const { host, url } = param || {} - const { groupId } = sender?.tab ?? {} - const { protocol } = extractHostname(url) || {} - const option = await optionHolder.get() - if (protocol === "file" && !option.countLocalFiles) return - await handleVisit({ host, url, groupId }) -} - -function splitRunTime(start: number, end: number): Record { - const res: Record = {} - while (start < end) { - const startOfNextDay = getStartOfDay(start).getTime() + MILL_PER_DAY - const newStart = Math.min(end, startOfNextDay) - const runTime = newStart - start - runTime && (res[formatTimeYMD(start)] = runTime) - start = newStart - } - return res -} - -const RUN_TIME_END_CACHE: { [host: string]: number } = {} - -async function handleTrackRunTimeEvent(event: timer.core.Event): Promise { - const { start, end, url, host } = event || {} - if (!host || !start || !end) return - if (whitelistHolder.contains(host, url)) return - const realStart = Math.max(RUN_TIME_END_CACHE[host] ?? 0, start) - const byDate = splitRunTime(realStart, end) - if (!Object.keys(byDate).length) return - await itemService.addRunTime(host, byDate) - RUN_TIME_END_CACHE[host] = Math.max(end, realStart) -} - -function handleTabGroupRemove(group: chrome.tabGroups.TabGroup) { - itemService.batchDeleteGroupById(group.id) -} - -function handleTabGroupEnabled() { - try { - chrome.tabGroups.onRemoved.removeListener(handleTabGroupRemove) - chrome.tabGroups.onRemoved.addListener(handleTabGroupRemove) - } catch (e) { - console.warn('failed to handle event: enableTabGroup', e) - } -} - -export default function initTrackServer(messageDispatcher: MessageDispatcher) { - messageDispatcher - .register('cs.trackTime', handleTrackTimeEvent) - .register('cs.trackRunTime', handleTrackRunTimeEvent) - .register<{ host: string, url: string }, void>('cs.incVisitCount', handleIncVisitEvent) - .register('cs.getTodayInfo', host => itemService.getResult(host, new Date())) - .register('enableTabGroup', handleTabGroupEnabled) -} diff --git a/src/background/track-server/file-tracker.ts b/src/background/track-server/file-tracker.ts new file mode 100644 index 000000000..5f352f817 --- /dev/null +++ b/src/background/track-server/file-tracker.ts @@ -0,0 +1,92 @@ +import { getTab, onTabActivated, onTabUpdated } from '@api/chrome/tab' +import { onWindowFocusChanged } from '@api/chrome/window' +import optionHolder from '@service/components/option-holder' +import { extractFileHost } from '@util/pattern' +import { handleTrackTimeEvent } from './normal' + +type Context = { + host: string + tab: ChromeTab + // Start timestamp of this tick + start: number +} + +async function convertContext(tabOrId: number | ChromeTab): Promise { + const tab = typeof tabOrId === 'number' ? await getTab(tabOrId) : tabOrId + if (!tab) return null + const { active, url } = tab + if (!active || !url) return null + const fileHost = extractFileHost(url) + if (!fileHost) return null + return { + host: fileHost, tab, + start: Date.now(), + } +} + +/** + * Local file tracker for firefox + */ +class FileTracker { + #enabled = false + #current: Context | null = null + // Context saved when window loses focus, restored when focus returns + #suspended: Context | null = null + #windowFocused = true + + async init() { + optionHolder.get() + .then(v => this.#enabled = v.countLocalFiles) + .catch(e => console.info("Failed to get countLocalFiles:", e)) + optionHolder.addChangeListener(v => this.#enabled = v.countLocalFiles) + + onTabActivated(async tabId => { + this.#tick() + this.#current = await convertContext(tabId) + this.#suspended = null + }) + + onTabUpdated(async (_tabId, changeInfo, tab) => { + if (!changeInfo.url || !tab.active) return + const newContext = await convertContext(tab) + if (this.#current?.host !== newContext?.host) { + // File host changed or navigated away from file URL + this.#tick() + this.#current = newContext + this.#suspended = null + } + }) + + onWindowFocusChanged(async windowId => { + if (windowId === chrome.windows.WINDOW_ID_NONE) { + this.#tick() + this.#suspended = this.#current + this.#current = null + this.#windowFocused = false + } else if (!this.#windowFocused) { + this.#windowFocused = true + if (this.#suspended) { + // Re-validate: tab may have been closed or navigated away during blur + const suspendedTabId = this.#suspended.tab.id + this.#suspended = null + this.#current = suspendedTabId ? await convertContext(suspendedTabId) : null + } + } + }) + + // NOTE: if migrate to MV3, this line won't work expectedly + setInterval(() => this.#tick(), 1000) + } + + #tick() { + if (!this.#current) return + const { host, tab, start } = this.#current + const end = Date.now() + if (this.#enabled) { + void handleTrackTimeEvent({ host, start, end, ignoreTabCheck: true }, tab) + } + this.#current.start = end + } +} + +export default FileTracker \ No newline at end of file diff --git a/src/background/track-server/group.ts b/src/background/track-server/group.ts new file mode 100644 index 000000000..f72a14e7c --- /dev/null +++ b/src/background/track-server/group.ts @@ -0,0 +1,22 @@ +import db from "@db/stat-database" +import optionHolder from '../service/components/option-holder' + +const handleRemove = (group: chrome.tabGroups.TabGroup) => db.deleteByGroup(group.id) + +function handleTabGroupsEnabled(option: tt4b.option.TrackingOption) { + // Do nothing if not enabled + if (!option.countTabGroup) return + try { + chrome.tabGroups.onRemoved.removeListener(handleRemove) + chrome.tabGroups.onRemoved.addListener(handleRemove) + } catch (e) { + console.info('failed to handle event: enableTabGroup', e) + } +} + +export async function initTabGroup() { + const option = await optionHolder.get() + handleTabGroupsEnabled(option) + + optionHolder.addChangeListener(newVal => handleTabGroupsEnabled(newVal)) +} \ No newline at end of file diff --git a/src/background/track-server/index.ts b/src/background/track-server/index.ts new file mode 100644 index 000000000..2301afbc0 --- /dev/null +++ b/src/background/track-server/index.ts @@ -0,0 +1,24 @@ +import { IS_ANDROID, IS_FIREFOX } from '@util/constant/environment' +import { isFileUrl } from '@util/pattern' +import type MessageDispatcher from "../message-dispatcher" +import FileTracker from './file-tracker' +import { initTabGroup } from './group' +import { handleTrackTimeEvent } from './normal' +import { handleTrackRunTimeEvent } from './runtime' + +export default function initTrackServer(messageDispatcher: MessageDispatcher) { + messageDispatcher + .register('track.time', async (ev, { tab }) => { + const url = tab?.url + // Not to process event from FF file tab + if (IS_FIREFOX && url && isFileUrl(url)) return + await handleTrackTimeEvent(ev, tab) + }) + .register('track.runTime', (ev, { url }) => handleTrackRunTimeEvent(ev, url)) + + initTabGroup() + + // Track file time in background script for FF + // Not accurate, since can't detect if the tabs are active or not + IS_FIREFOX && !IS_ANDROID && new FileTracker().init() +} diff --git a/src/background/track-server/normal.ts b/src/background/track-server/normal.ts new file mode 100644 index 000000000..0ace38c9c --- /dev/null +++ b/src/background/track-server/normal.ts @@ -0,0 +1,98 @@ +import { listTabs, sendMsg2Tab } from "@api/chrome/tab" +import { getWindow } from '@api/chrome/window' +import optionHolder from "@service/components/option-holder" +import { + addFocusTime as addItemFocusTime, increaseVisit as increaseItemVisit, type ItemIncContext, +} from "@service/item-service" +import { addLimitFocusTime, incLimitVisit } from '@service/limit-service' +import periodThrottler from '@service/throttler/period-throttler' +import whitelistHolder from "@service/whitelist/holder" +import { IS_ANDROID } from "@util/constant/environment" +import { extractHostname } from "@util/pattern" +import badgeManager from "../badge-manager" + +async function handleTime(context: ItemIncContext, timeRange: [number, number], tabId: number | undefined): Promise { + const { host, url } = context + const [start, end] = timeRange + const focusTime = end - start + // 1. Save async + await addItemFocusTime(context, focusTime) + // 2. Process limit + const { limited, reminder } = await addLimitFocusTime(host, url, focusTime) + // If time limited after this operation, send messages + limited.length && void sendLimitedMessage(limited) + // If need to reminder, send messages + reminder?.items?.length && tabId && void sendMsg2Tab(tabId, 'limitReminder', reminder) + // 3. Add period time + periodThrottler.add(start, focusTime) + return focusTime +} + +export async function handleTrackTimeEvent(event: tt4b.core.Event, tab: ChromeTab | undefined): Promise { + if (!tab) return + const { id: tabId, windowId, groupId, url, active } = tab + if (!url) return + + const { start, end, ignoreTabCheck } = event + if (!ignoreTabCheck) { + if (await windowNotFocused(windowId)) return + if (!active) return + } + const { protocol, host } = extractHostname(url) + + const { countLocalFiles } = await optionHolder.get() + if (protocol === "file" && !countLocalFiles) return + + if (whitelistHolder.contains(host, url)) return + + await handleTime({ host, url, groupId }, [start, end], tabId) + if (tabId) { + if (!ignoreTabCheck) { + // Cause there is no way to determine whether this tab is selected in screen-split mode + // So only show badge for first tab for screen-split mode + // @see #246 + const winTabs = await listTabs({ active: true, windowId }) + const firstActiveTab = winTabs[0] + if (firstActiveTab?.id !== tabId) return + } + void badgeManager.updateFocus({ tabId, url }) + } +} + +async function windowNotFocused(winId: number | undefined): Promise { + if (IS_ANDROID) return false + if (!winId) return true + const window = await getWindow(winId) + return !window?.focused +} + +async function sendLimitedMessage(items: tt4b.limit.Item[]) { + const tabs = await listTabs() + if (!tabs.length) return + for (const tab of tabs) { + try { + const { id } = tab + id && await sendMsg2Tab(id, 'limitTimeMeet', items) + } catch { + /* Ignored */ + } + } +} + +async function handleVisit(context: ItemIncContext) { + await increaseItemVisit(context) + const { host, url } = context + const metLimits = await incLimitVisit(host, url) + // If time limited after this operation, send messages + metLimits.length && await sendLimitedMessage(metLimits) +} + +export async function incVisitCount(tab: ChromeTab | undefined): Promise { + const { groupId, url } = tab ?? {} + if (!url) return + const { protocol, host } = extractHostname(url) + const option = await optionHolder.get() + if (protocol === "file" && !option.countLocalFiles) return + await handleVisit({ host, url, groupId }) +} + diff --git a/src/background/track-server/runtime.ts b/src/background/track-server/runtime.ts new file mode 100644 index 000000000..506e203bc --- /dev/null +++ b/src/background/track-server/runtime.ts @@ -0,0 +1,29 @@ +import whitelistHolder from "@service/whitelist/holder" +import FIFOCache from '@util/fifo-cache' +import { formatTimeYMD, getStartOfDay, MILL_PER_DAY } from "@util/time" +import { addRunTime } from '../service/item-service' + +function splitRunTime(start: number, end: number): Record { + const res: Record = {} + while (start < end) { + const startOfNextDay = getStartOfDay(start) + MILL_PER_DAY + const newStart = Math.min(end, startOfNextDay) + const runTime = newStart - start + runTime && (res[formatTimeYMD(start)] = runTime) + start = newStart + } + return res +} + +const RUN_TIME_END_CACHE = new FIFOCache(500) + +export async function handleTrackRunTimeEvent(event: tt4b.core.Event, url: string | undefined): Promise { + const { start, end, host } = event + if (!host || !start || !end || !url) return + if (whitelistHolder.contains(host, url)) return + const realStart = Math.max(RUN_TIME_END_CACHE.get(host) ?? 0, start) + const byDate = splitRunTime(realStart, end) + if (!Object.keys(byDate).length) return + await addRunTime(host, byDate) + RUN_TIME_END_CACHE.set(host, Math.max(end, realStart)) +} \ No newline at end of file diff --git a/src/background/whitelist-menu-manager.ts b/src/background/whitelist-menu-manager.ts index 11c59d9e3..a9b058d03 100644 --- a/src/background/whitelist-menu-manager.ts +++ b/src/background/whitelist-menu-manager.ts @@ -8,20 +8,15 @@ import { createContextMenu, updateContextMenu } from "@api/chrome/context-menu" import { getRuntimeId } from "@api/chrome/runtime" import { getTab, onTabActivated, onTabUpdated } from "@api/chrome/tab" -import db from "@db/whitelist-database" import { t2Chrome } from "@i18n/chrome/t" -import { type ContextMenusMessage } from "@i18n/message/common/context-menus" -import optionHolder from "@service/components/option-holder" import { IS_ANDROID } from "@util/constant/environment" import { extractHostname, isBrowserUrl } from "@util/pattern" +import optionHolder from "./service/components/option-holder" +import whitelistHolder from './service/whitelist/holder' const menuId = '_timer_menu_item_' + getRuntimeId() let currentActiveId: number -let whitelist: string[] = [] - -const removeOrAdd = (removeOrAddFlag: boolean, white: string) => removeOrAddFlag ? db.remove(white) : db.add(white) - const menuInitialOptions: ChromeContextMenuCreateProps = { contexts: ['page', 'frame', 'selection', 'link', 'editable', 'image', 'video', 'audio'], id: menuId, @@ -31,39 +26,29 @@ const menuInitialOptions: ChromeContextMenuCreateProps = { } async function updateContextMenuInner(param: ChromeTab | number | undefined): Promise { - if (typeof param === 'number') { - // If number, get the tabInfo first - const tab: ChromeTab = await getTab(currentActiveId) - tab && await updateContextMenuInner(tab) + const tab = typeof param === 'number' ? await getTab(currentActiveId) : param + const { url } = tab ?? {} + + const targetHost = url && !isBrowserUrl(url) ? extractHostname(url).host : undefined + const visible = (await optionHolder.get())?.displayWhitelistMenu + const changeProp: ChromeContextMenuUpdateProps = {} + if (targetHost && visible) { + const exist = whitelistHolder.containsHost(targetHost) + changeProp.visible = visible + changeProp.title = t2Chrome(root => root.contextMenus[exist ? 'removeFromWhitelist' : 'add2Whitelist']) + .replace('{host}', targetHost) + changeProp.onclick = () => exist ? whitelistHolder.remove(targetHost) : whitelistHolder.add(targetHost) } else { - const { url } = param || {} - const targetHost = url && !isBrowserUrl(url) ? extractHostname(url).host : '' - const changeProp: ChromeContextMenuUpdateProps = {} - if (!targetHost) { - // If not a valid host, hide this menu - changeProp.visible = false - } else { - // Else change the title - const visible = (await optionHolder.get())?.displayWhitelistMenu - const existsInWhitelist = whitelist.includes(targetHost) - changeProp.visible = true && visible - const titleMsgField: keyof ContextMenusMessage = existsInWhitelist ? 'removeFromWhitelist' : 'add2Whitelist' - changeProp.title = t2Chrome(root => root.contextMenus[titleMsgField]).replace('{host}', targetHost) - changeProp.onclick = () => removeOrAdd(existsInWhitelist, targetHost) - } - await updateContextMenu(menuId, changeProp) + // If not a valid host, hide this menu + changeProp.visible = false } + await updateContextMenu(menuId, changeProp) } -const handleListChange = (newWhitelist: string[]) => { - whitelist = newWhitelist - updateContextMenuInner(currentActiveId) -} - -const handleTabUpdated = (tabId: number, changeInfo: ChromeTabChangeInfo, tab?: ChromeTab) => { +const handleTabUpdated = (tabId: number, updatedInfo: ChromeTabUpdatedInfo, tab?: ChromeTab) => { // Current active tab updated tabId === currentActiveId - && changeInfo.status === 'loading' + && updatedInfo.status === 'loading' && updateContextMenuInner(tab) } @@ -77,7 +62,7 @@ async function initWhitelistMenuManager() { createContextMenu(menuInitialOptions) onTabUpdated(handleTabUpdated) onTabActivated((_tabId, activeInfo) => handleTabActivated(activeInfo)) - db.addChangeListener(handleListChange) + whitelistHolder.addPostHandler(() => updateContextMenuInner(currentActiveId)) } export default initWhitelistMenuManager \ No newline at end of file diff --git a/src/common/logger.ts b/src/common/logger.ts index 7f4189b14..105cdb512 100644 --- a/src/common/logger.ts +++ b/src/common/logger.ts @@ -17,14 +17,6 @@ function initOpenLog() { } catch (ignored) { } } -function updateLocalStorage(openState: boolean) { - try { - openState - ? localStorage.setItem(STORAGE_KEY, STORAGE_VAL) - : localStorage.removeItem(STORAGE_KEY) - } catch (ignored) { } -} - initOpenLog() /** @@ -34,19 +26,3 @@ initOpenLog() export function log(...args: any) { OPEN_LOG && console.log(...args) } - -/** - * @since 0.0.4 - */ -export function openLog(): string { - updateLocalStorage(OPEN_LOG = true) - return 'Opened the log manually.' -} - -/** - * @since 0.0.8 - */ -export function closeLog(): string { - updateLocalStorage(OPEN_LOG = false) - return 'Closed the log manually.' -} \ No newline at end of file diff --git a/src/common/timer.ts b/src/common/timer.ts deleted file mode 100644 index be79c5f0d..000000000 --- a/src/common/timer.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { getUsedStorage } from "@db/memory-detector" -import { closeLog, openLog } from "./logger" - -/** - * Show the memory info - * - * @since 0.0.9 - */ -export function showMemory() { - getUsedStorage().then(({ used, total }) => { - console.log(`\t${used} / ${total} = ${Math.round(used * 100.0 / total * 100) / 100}%`) - }) - return 'Memory used:' -} - -export type Timer = { - openLog: () => string - closeLog: () => string - showMemory: () => void -} - -/** - * @since 0.0.8 - */ -const timer = { - openLog, - closeLog, - showMemory -} as Timer - -declare global { - interface Window { - timer: Timer - } -} - -/** - * Manually open and close the log - * - * @since 0.0.8 - */ -window.timer = timer diff --git a/src/content-script/dispatcher.ts b/src/content-script/dispatcher.ts new file mode 100644 index 000000000..bb19f920d --- /dev/null +++ b/src/content-script/dispatcher.ts @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2022-present Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import type { AudibleChangeHandler } from './types' + +type Handler = (data: tt4b.tab.ReqData) => tt4b.tab.ResData + +class Dispatcher { + private handlers: Partial>> = {} + private audibleChangeHandlers: AudibleChangeHandler[] = [] + + constructor() { + // Be careful!!! + // Can't use await/async in callback parameter + chrome.runtime.onMessage.addListener((message: tt4b.tab.Request, _, sendResponse: tt4b.tab.Callback) => { + this.handle(message) + .then(sendResponse) + .catch((err: unknown) => { + const msg = err instanceof Error ? err.message : String(err) + console.error('onTabMessage handler error', err) + sendResponse({ code: 'fail', msg }) + }) + // 'return true' will force chrome to wait for the response processed in the above promise. + // @see https://github.com/mozilla/webextension-polyfill/issues/130 + return true + }) + + this.register('syncAudible', audible => void this.audibleChangeHandlers.forEach(h => h.onAudibleChange(audible))) + } + + register(code: Code, handler: Handler): Dispatcher { + this.handlers[code] = handler + return this + } + + registerAudibleChange(handler: AudibleChangeHandler): Dispatcher { + this.audibleChangeHandlers.push(handler) + return this + } + + private async handle(message: tt4b.tab.Request): Promise> { + const code = message?.code + if (!code) { + return { code: 'ignore' } + } + const handler = this.handlers[code] + if (!handler) return { code: 'ignore' } + try { + const res = handler(message.data as tt4b.tab.ReqData) + return { code: "success", data: res as tt4b.tab.ResData } + } catch (error) { + const msg = error instanceof Error ? error.message : (error?.toString?.() ?? 'Unknown error') + return { code: 'fail', msg } + } + } +} + +export default Dispatcher diff --git a/src/content-script/index.ts b/src/content-script/index.ts index 11e3da50d..c99134ca8 100644 --- a/src/content-script/index.ts +++ b/src/content-script/index.ts @@ -5,8 +5,9 @@ * https://opensource.org/licenses/MIT */ -import { sendMsg2Runtime } from "@api/chrome/runtime" +import { trySendMsg2Runtime } from '@api/sw/common' import { initLocale } from "@i18n" +import Dispatcher from './dispatcher' import processLimit from "./limit" import printInfo from "./printer" import processTimeline from './timeline' @@ -21,8 +22,7 @@ const FLAG_ID = '__TIMER_INJECTION_FLAG__' + chrome.runtime.id function getOrSetFlag(): boolean { const pre = document?.getElementById(FLAG_ID) if (!pre) { - const flag = document.createElement('a') - flag.href = '#' + const flag = document.createElement('span') flag.style && (flag.style.visibility = 'hidden') flag && (flag.id = FLAG_ID) @@ -39,45 +39,34 @@ function getOrSetFlag(): boolean { return !!pre } -/** - * Wrap for hooks, after the extension reloaded or upgraded, the context of current content script will be invalid - * And sending messages to the runtime will be failed - */ -async function trySendMsg2Runtime(code: timer.mq.ReqCode, data?: Req): Promise { - try { - return await sendMsg2Runtime(code, data) - } catch { - // ignored - } -} - async function main() { - // Execute in every injections + const dispatcher = new Dispatcher() + + // Execute in every injection const normalTracker = new NormalTracker({ - onReport: data => trySendMsg2Runtime('cs.trackTime', data), - onResume: reason => reason === 'idle' && trySendMsg2Runtime('cs.idleChange', false), - onPause: reason => reason === 'idle' && trySendMsg2Runtime('cs.idleChange', true), + onReport: data => trySendMsg2Runtime('track.time', data), + onResume: reason => reason === 'idle' && trySendMsg2Runtime('cs.idleChanged', false), + onPause: reason => reason === 'idle' && trySendMsg2Runtime('cs.idleChanged', true), }) normalTracker.init() - const runTimeTracker = new RunTimeTracker(url) - runTimeTracker.init() + dispatcher.registerAudibleChange(normalTracker) + new RunTimeTracker(url).init(dispatcher) // Execute only one time for each dom if (getOrSetFlag()) return if (!host) return - const isWhitelist = await sendMsg2Runtime('cs.isInWhitelist', { host, url }) + const isWhitelist = await trySendMsg2Runtime('whitelist.contain', { host, url }) if (isWhitelist) return - await initLocale() - const needPrintInfo = await sendMsg2Runtime('cs.printTodayInfo') - !!needPrintInfo && printInfo(host) - await processLimit(url) + void initLocale() + void printInfo(host) + await processLimit(url, dispatcher) processTimeline() // Increase visit count at the end - await sendMsg2Runtime('cs.incVisitCount', { host, url }) + await trySendMsg2Runtime('cs.injected') } -main() \ No newline at end of file +void main() diff --git a/src/content-script/limit/common.ts b/src/content-script/limit/common.ts index 37fe3abae..8f9cc2ecf 100644 --- a/src/content-script/limit/common.ts +++ b/src/content-script/limit/common.ts @@ -1,10 +1,4 @@ -export type LimitReason = - & RequiredPick - & PartialPick - & { - type: timer.limit.ReasonType - getVisitTime?: () => number - } +import type { LimitReason } from './types' export function isSameReason(a: LimitReason, b: LimitReason): boolean { if (a?.id !== b?.id || a?.type !== b?.type) return false @@ -15,23 +9,6 @@ export function isSameReason(a: LimitReason, b: LimitReason): boolean { return true } -export interface MaskModal { - addReason(...reasons: LimitReason[]): void - removeReason(...reasons: LimitReason[]): void - removeReasonsByType(...types: timer.limit.ReasonType[]): void - addDelayHandler(handler: () => void): void -} - -export type ModalContext = { - url: string - modal: MaskModal -} - -export interface Processor { - handleMsg(code: timer.mq.ReqCode, data: unknown): timer.mq.Response | Promise - init(): void | Promise -} - export async function exitFullscreen(): Promise { if (!document?.fullscreenElement) return if (!document?.exitFullscreen) return diff --git a/src/content-script/limit/element.ts b/src/content-script/limit/element.ts deleted file mode 100644 index f7bb6ea11..000000000 --- a/src/content-script/limit/element.ts +++ /dev/null @@ -1,7 +0,0 @@ -export const TAG_NAME = 'extension-time-tracker-overlay' - -export class RootElement extends HTMLElement { - constructor() { - super() - } -} diff --git a/src/content-script/limit/index.ts b/src/content-script/limit/index.ts index 8180df1b1..f3e28fd97 100644 --- a/src/content-script/limit/index.ts +++ b/src/content-script/limit/index.ts @@ -1,42 +1,35 @@ -import { onRuntimeMessage } from "@api/chrome/runtime" -import { allMatch } from "@util/array" -import { type MaskModal, type ModalContext, type Processor } from "./common" -import ModalInstance from "./modal" -import MessageAdaptor from "./processor/message-adaptor" +import { getOption } from '@api/sw/option' +import Dispatcher from '../dispatcher' +import ModalInstance from "./modal/instance" +import MessageAdaptor from './processor/message-adaptor' import PeriodProcessor from "./processor/period-processor" import VisitProcessor from "./processor/visit-processor" -import Reminder from "./reminder" +import Reminder from './reminder' +import type { ModalContext, Processor } from './types' -export default async function processLimit(url: string) { - const modal: MaskModal = new ModalInstance(url) +export default async function processLimit(url: string, dispatcher: Dispatcher) { + const { limitDelayDuration: delayDuration } = await getOption() + const modal = new ModalInstance(url) const context: ModalContext = { modal, url } + const messageAdaptor = new MessageAdaptor(context, delayDuration) + const visitProcessor = new VisitProcessor(context, delayDuration) + const processors: Processor[] = [ - new MessageAdaptor(context), + messageAdaptor, + visitProcessor, new PeriodProcessor(context), - new VisitProcessor(context), - new Reminder(), ] - await Promise.all(processors.map(p => p.init())) - onRuntimeMessage(async msg => { - const results = await Promise.all(processors.map(async p => { - const { code, data } = msg || {} - return await p.handleMsg(code, data) - })) + const reminder = new Reminder() - const allIgnore = allMatch(results, r => r.code === "ignore") - if (allIgnore) return { code: "ignore" } + dispatcher + .register('limitChanged', () => void processors.forEach(p => p.onLimitChanged())) + .register('limitTimeMeet', items => void messageAdaptor.onLimitTimeMeet(items)) + .register('limitReminder', data => void reminder.show(data)) + .register('askVisitHit', ruleId => modal.reasons.some(r => r.type === 'VISIT' && ruleId === r.id)) + .registerAudibleChange(visitProcessor.tracker) - const anyFail = allMatch(results, r => r.code === "fail") - if (anyFail) return { code: "fail" } - // Merge data of all the handlers - const items = results - .filter(r => r.code === "success") - .map(r => r.data) - .filter(r => r !== undefined && r !== null) - const data = items.length <= 1 ? items[0] : items - return { code: "success", data } - }) + return visitProcessor.tracker } diff --git a/src/content-script/limit/modal/Main.tsx b/src/content-script/limit/modal/Main.tsx index f43e6ee74..ba9653a9a 100644 --- a/src/content-script/limit/modal/Main.tsx +++ b/src/content-script/limit/modal/Main.tsx @@ -1,9 +1,11 @@ +import "@pages/element-ui/dark-theme.css" import { defineComponent } from "vue" import Alert from "./components/Alert" import Footer from "./components/Footer" import Reason from "./components/Reason" -import { provideRule } from "./context" -import "./style/index.sass" +import { provideRule } from './context' +import "./style/element-base.css" +import "./style/modal.css" const _default = defineComponent(() => { provideRule() diff --git a/src/content-script/limit/modal/bridge.ts b/src/content-script/limit/modal/bridge.ts new file mode 100644 index 000000000..3934c666e --- /dev/null +++ b/src/content-script/limit/modal/bridge.ts @@ -0,0 +1,91 @@ +import type { BridgeCode, BridgeHandler, BridgeRequest, BridgeResponse } from './types' + +type RpcBase = { + code: C + requestId: string +} + +type RpcRequest = RpcBase & { + kind: 'request' + data: BridgeRequest +} + +type RpcResponse = RpcBase & { + kind: 'response' + data: BridgeResponse +} + +const isRpcRequest = (payload: unknown): payload is RpcRequest => { + if (typeof payload !== 'object' || payload === null) return false + // Just judge the kind + return 'kind' in payload && payload.kind === 'request' +} + +const isRpcResponse = (payload: unknown): payload is RpcResponse => { + if (typeof payload !== 'object' || payload === null) return false + // Just judge the kind + return 'kind' in payload && payload.kind === 'response' +} + +export class ModalBridge { + private readonly pendingCache = new Map>>() + private readonly handlers = new Map>() + private readonly onMessageBound: (ev: MessageEvent) => void + + constructor(private origin: string, private peer: () => Window | undefined) { + this.onMessageBound = this.onMessage.bind(this) + window.addEventListener('message', this.onMessageBound) + } + + dispose(): void { + window.removeEventListener('message', this.onMessageBound) + this.pendingCache.clear() + this.handlers.clear() + } + + register(code: C, handler: BridgeHandler): ModalBridge { + this.handlers.set(code, handler as unknown as BridgeHandler) + return this + } + + request(code: C, req: BridgeRequest): Promise> { + const requestId = `${code}-${Date.now()}-${Math.random().toString(12).slice(2)}` + if (!this.peer()) return Promise.reject("Peer window is not available") + return new Promise>((resolve, reject) => { + const t = window.setTimeout(() => { + this.pendingCache.delete(requestId) + reject("Timeout") + }, 1_000) + this.pendingCache.set(requestId, msg => { + if (msg.kind !== 'response' || msg.code !== code) return + clearTimeout(t) + this.pendingCache.delete(requestId) + resolve(msg.data) + }) + this.send({ kind: 'request', code, requestId, data: req }) + }) + } + + private send(payload: RpcRequest | RpcResponse): void { + try { + this.peer()?.postMessage(payload, this.origin) + } catch { + // ignored + } + } + + private async onMessage(ev: MessageEvent) { + if (this.peer() !== ev.source) return + const { data: payload } = ev + if (isRpcRequest(payload)) { + const { code, data: reqData, requestId } = payload + const handler = this.handlers.get(code) + if (!handler) return + const data = await handler(reqData) + this.send({ kind: 'response', requestId, code, data }) + } else if (isRpcResponse(payload)) { + const pending = this.pendingCache.get(payload.requestId) + pending?.(payload) + } + } +} diff --git a/src/content-script/limit/modal/components/Alert.tsx b/src/content-script/limit/modal/components/Alert.tsx index 048e76b97..247398a05 100644 --- a/src/content-script/limit/modal/components/Alert.tsx +++ b/src/content-script/limit/modal/components/Alert.tsx @@ -1,25 +1,35 @@ -import { getUrl } from "@api/chrome/runtime" +import { getIconUrl } from "@api/chrome/runtime" +import { getOption } from "@api/sw/option" import { t } from "@cs/locale" -import { useRequest } from "@hooks/useRequest" -import optionHolder from "@service/components/option-holder" +import { useRequest, useXsState } from "@hooks" +import Box from '@pages/components/Box' +import Flex from '@pages/components/Flex' +import Img from '@pages/components/Img' import { defineComponent } from "vue" -const ICON_URL = getUrl('static/images/icon.png') - const _default = defineComponent(() => { const defaultPrompt = t(msg => msg.modal.defaultPrompt) const { data: prompt } = useRequest(async () => { - const option = await optionHolder.get() - return option?.limitPrompt || defaultPrompt + const option = await getOption() + return option?.limitPrompt ?? defaultPrompt }, { defaultValue: defaultPrompt }) + + const isXs = useXsState() + return () => ( -
-

- - {t(msg => msg.meta.name)?.toUpperCase()} -

-

{prompt.value}

-
+ + + + {t(msg => msg.meta.name)?.toUpperCase()} + + + {prompt.value} + + ) }) diff --git a/src/content-script/limit/modal/components/Footer.tsx b/src/content-script/limit/modal/components/Footer.tsx index bb741df15..a1c212e16 100644 --- a/src/content-script/limit/modal/components/Footer.tsx +++ b/src/content-script/limit/modal/components/Footer.tsx @@ -1,80 +1,79 @@ -import { sendMsg2Runtime } from "@api/chrome/runtime" -import Trend from "@app/Layout/icons/Trend" -import { judgeVerificationRequired, processVerification } from "@app/util/limit" -import { TAG_NAME } from "@cs/limit/element" +import { APP_ANALYSIS_ROUTE, APP_LIMIT_ROUTE, type AppAnalysisQuery, type AppLimitQuery } from '@/shared/route' +import { trySendMsg2Runtime } from '@api/sw/common' +import { processVerification } from '@app/util/limit' import { t } from "@cs/locale" import { Plus, Timer } from "@element-plus/icons-vue" -import optionHolder from "@service/components/option-holder" +import Flex from '@pages/components/Flex' +import { Trend } from "@pages/icons" +import { getAppPageUrl } from '@util/constant/url' import { meetTimeLimit } from '@util/limit' +import { MILL_PER_SECOND } from '@util/time' import { ElButton } from "element-plus" import { computed, defineComponent } from "vue" -import { useDelayHandler, useReason, useRule } from "../context" - -async function handleMore5Minutes(rule: timer.limit.Item | null, callback: () => void) { - let promise: Promise | undefined = undefined - const ele = document.querySelector(TAG_NAME)?.shadowRoot?.querySelector('body') - if (rule && await judgeVerificationRequired(rule)) { - const option = await optionHolder.get() - promise = processVerification(option, { appendTo: ele ?? undefined }) - promise ? promise.then(callback).catch(() => { }) : callback() - } else { - callback() - } -} +import { useApp, useRule } from '../context' const _default = defineComponent(() => { - const reason = useReason() + const { reason, visitTime: currVisitTime, bridge, url, delayDuration } = useApp() + + const analysisUrl = getAppPageUrl(APP_ANALYSIS_ROUTE, { url } satisfies AppAnalysisQuery) + const ruleUrl = getAppPageUrl(APP_LIMIT_ROUTE, { url: encodeURI(url) } satisfies AppLimitQuery) + const rule = useRule() const showDelay = computed(() => { - const { type, allowDelay, delayCount = 0 } = reason.value || {} + const reasonVal = reason.value + if (!reasonVal) return false + const { type, allowDelay, delayCount = 0 } = reasonVal if (!allowDelay) return false - const { time, weekly, visitTime, waste, weeklyWaste } = rule.value || {} - let realLimit = 0, realWaste = 0 + const { time, weekly, visitTime, waste, weeklyWaste } = rule.value ?? {} + let maxLimitMs = 0, wasted = 0 if (type === 'DAILY') { - realLimit = time ?? 0 - realWaste = waste ?? 0 + maxLimitMs = (time ?? 0) * MILL_PER_SECOND + wasted = waste ?? 0 } else if (type === 'WEEKLY') { - realLimit = weekly ?? 0 - realWaste = weeklyWaste ?? 0 + maxLimitMs = (weekly ?? 0) * MILL_PER_SECOND + wasted = weeklyWaste ?? 0 } else if (type === 'VISIT') { - realLimit = visitTime ?? 0 - realWaste = reason.value?.getVisitTime?.() ?? 0 + maxLimitMs = (visitTime ?? 0) * MILL_PER_SECOND + wasted = currVisitTime.value } else { return false } - return meetTimeLimit(realLimit, realWaste, allowDelay, delayCount) + return meetTimeLimit( + { wasted, maxLimit: maxLimitMs }, + { count: delayCount, duration: delayDuration.value, allow: !!allowDelay }, + ) }) - const delayHandler = useDelayHandler() + const handleDelay = async () => { + const option = await trySendMsg2Runtime('option.get') + try { + if (option) await processVerification(option) + await bridge.request('delay', undefined) + } catch { + } + } return () => ( -
- sendMsg2Runtime('cs.openAnalysis')} - > - {t(msg => msg.menu.siteAnalysis)} - + + + + {t(msg => msg.menu.siteAnalysis)} + + handleMore5Minutes(rule.value, delayHandler)} - > - {t(msg => msg.modal.more5Minutes)} - - sendMsg2Runtime('cs.openLimit')} + round icon={Plus} onClick={handleDelay} > - {t(msg => msg.modal.ruleDetail)} + {t(msg => msg.modal.delay, { n: delayDuration.value })} -
+ + + {t(msg => msg.modal.ruleDetail)} + + + ) }) diff --git a/src/content-script/limit/modal/components/Reason.tsx b/src/content-script/limit/modal/components/Reason.tsx index 7db01b007..4fc4a95dc 100644 --- a/src/content-script/limit/modal/components/Reason.tsx +++ b/src/content-script/limit/modal/components/Reason.tsx @@ -1,13 +1,22 @@ import { t } from "@cs/locale" -import { useRequest } from "@hooks/useRequest" +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" import { matchCond, meetLimit, meetTimeLimit, period2Str } from "@util/limit" import { formatPeriodCommon, MILL_PER_SECOND } from "@util/time" import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus' -import { computed, defineComponent } from "vue" -import { useGlobalParam, useReason, useRule } from "../context" +import { computed, defineComponent, type StyleValue } from "vue" +import { useApp, useRule } from '../context' -const renderBaseItems = (rule: timer.limit.Rule | null, url: string) => <> +const useDescriptions = () => { + const isXs = useXsState() + const style = computed(() => ({ + width: isXs.value ? '90vw' : '400px', + } satisfies StyleValue)) + const size = computed(() => isXs.value ? 'small' : undefined) + return { style, size } +} + +const renderBaseItems = (rule: tt4b.limit.Rule | undefined, url: string) => <> msg.limit.item.name)} labelAlign="right"> {rule?.name ?? '-'} @@ -16,85 +25,82 @@ const renderBaseItems = (rule: timer.limit.Rule | null, url: string) => <> -const TimeDescriptions = defineComponent({ - props: { - // Seconds - time: Number, - // Milliseconds - waste: Number, - count: Number, - visit: Number, - ruleLabel: String, - dataLabel: String, - }, - setup(props) { - const rule = useRule() - const reason = useReason() - const { url } = useGlobalParam() +type DescriptionProps = { + time?: number + waste?: number + count?: number + visit?: number + ruleLabel?: string + dataLabel?: string +} - const timeLimited = computed(() => meetTimeLimit(props.time ?? 0, props.waste ?? 0, !!reason.value?.allowDelay, reason.value?.delayCount ?? 0)) - const visitLimited = computed(() => meetLimit(props.count ?? 0, props.visit ?? 0)) +const TimeDescriptions = defineComponent(props => { + const { reason, url, delayDuration } = useApp() + const rule = useRule() + const { style, size } = useDescriptions() - return () => ( - - {renderBaseItems(rule.value, url)} - - - {formatPeriodCommon((props.time ?? 0) * MILL_PER_SECOND)} - {`${props.count ?? 0} ${t(msg => msg.limit.item.visits)}`} - - - - - - {formatPeriodCommon(props.waste ?? 0)} - - - {`${props.visit ?? 0} ${t(msg => msg.limit.item.visits)}`} - - - - msg.limit.item.delayCount)} - labelAlign="right" - > - {reason.value?.delayCount ?? 0} - - - ) - }, -}) + const timeLimited = computed(() => meetTimeLimit( + { wasted: props.waste ?? 0, maxLimit: (props.time ?? 0) * MILL_PER_SECOND }, + { + count: reason.value?.delayCount ?? 0, + duration: delayDuration.value, + allow: !!reason.value?.allowDelay, + }, + )) + const visitLimited = computed(() => meetLimit(props.count ?? 0, props.visit ?? 0)) + + return () => ( + + {renderBaseItems(rule.value, url)} + + + {formatPeriodCommon((props.time ?? 0) * MILL_PER_SECOND)} + {t(msg => msg.shared.limit.visits, { n: props.count })} + + + + + + {formatPeriodCommon(props.waste ?? 0)} + + + {t(msg => msg.shared.limit.visits, { n: props.visit ?? 0 })} + + + + msg.limit.item.delayCount)} + labelAlign="right" + > + {reason.value?.delayCount ?? 0} + + + ) +}, { props: ['time', 'waste', 'count', 'visit', 'ruleLabel', 'dataLabel'] }) const _default = defineComponent(() => { - const reason = useReason() - const rule = useRule() - const { url } = useGlobalParam() + const { reason, visitTime, url } = useApp() const type = computed(() => reason.value?.type) + const rule = useRule() - const { data: browsingTime, refresh: refreshBrowsingTime } = useRequest(() => { - const { getVisitTime, type } = reason.value || {} - if (type !== 'VISIT') return - return getVisitTime?.() || 0 - }) - - setInterval(refreshBrowsingTime, 1000) + const { style, size } = useDescriptions() return () => ( -
+ msg.limit.item.daily)} + ruleLabel={t(msg => msg.shared.limit.daily)} dataLabel={t(msg => msg.calendar.range.today)} /> { count={rule.value?.weeklyCount} waste={rule.value?.weeklyWaste} visit={rule.value?.weeklyVisit} - ruleLabel={t(msg => msg.limit.item.weekly)} + ruleLabel={t(msg => msg.shared.limit.weekly)} dataLabel={t(msg => msg.calendar.range.thisWeek)} /> - + {renderBaseItems(rule.value, url)} msg.limit.item.visitTime)} labelAlign="right"> {formatPeriodCommon((rule.value?.visitTime ?? 0) * MILL_PER_SECOND) || '-'} msg.modal.browsingTime)} labelAlign="right"> - {browsingTime.value ? formatPeriodCommon(browsingTime.value) : '-'} + {visitTime.value ? formatPeriodCommon(visitTime.value) : '-'} { {reason.value?.delayCount ?? 0} - + {renderBaseItems(rule.value, url)} - msg.limit.item.period)} labelAlign="right"> - { - rule.value?.periods?.length - ?
- {rule.value?.periods.map(p => {period2Str(p)})} -
- : '-' + msg.shared.limit.period)} labelAlign="right"> + {rule.value?.periods?.length + ?
+ {rule.value.periods.map(p => {period2Str(p)})} +
+ : '-' } -
+ ) }) diff --git a/src/content-script/limit/modal/context.ts b/src/content-script/limit/modal/context.ts index 1da91a102..bf2fc47fa 100644 --- a/src/content-script/limit/modal/context.ts +++ b/src/content-script/limit/modal/context.ts @@ -1,53 +1,65 @@ -import { useRequest } from '@hooks/useRequest' -import { useWindowFocus } from '@hooks/useWindowFocus' -import limitService from "@service/limit-service" -import { type App, inject, provide, type Ref, shallowRef, watch } from "vue" -import { type LimitReason } from "../common" - -const REASON_KEY = "display_reason" -const RULE_KEY = "display_rule" -const GLOBAL_KEY = "delay_global" -const DELAY_HANDLER_KEY = 'delay_handler' - -type GlobalParam = { +import { listLimits } from "@api/sw/limit" +import { getOption } from '@api/sw/option' +import { useDocumentVisibility, useRequest } from '@hooks' +import { type App, inject, provide, ref, type Ref, type ShallowRef, watch } from "vue" +import { ModalBridge } from './bridge' +import type { LimitReasonData } from './types' + +const GLOBAL_KEY = "global" +const RULE_KEY = 'rule' + +type AppContext = { + reason: ShallowRef + visitTime: ShallowRef + bridge: ModalBridge url: string + delayDuration: Ref } -export const provideGlobalParam = (app: App, gp: GlobalParam) => { - app.provide(GLOBAL_KEY, gp) -} +export const provideApp = (app: App, bridge: ModalBridge, url: string) => { + const reason = ref() + const visitTime = ref(0) + const delayDuration = ref(5) + getOption().then(({ limitDelayDuration }) => delayDuration.value = limitDelayDuration).catch(() => { }) + + bridge.register('reason', data => { reason.value = data }) + + const updateVisitTime = async () => { + bridge.request('visitTime', undefined) + .then(val => visitTime.value = val) + .catch(() => visitTime.value = 0) + } -export const useGlobalParam = () => inject(GLOBAL_KEY) as GlobalParam + watch(reason, updateVisitTime, { immediate: true }) + const intervalId = window.setInterval(updateVisitTime, 1000) -export const provideReason = (app: App): Ref => { - const reason = shallowRef() - app.provide(REASON_KEY, reason) - return reason + const _unmount = app.unmount.bind(app) + app.unmount = () => { + bridge.dispose() + clearInterval(intervalId) + _unmount() + } + + app.provide(GLOBAL_KEY, { reason, visitTime, bridge, url, delayDuration }) } -export const useReason = () => inject(REASON_KEY) as Ref +export const useApp = () => inject(GLOBAL_KEY) as AppContext export const provideRule = () => { - const reason = useReason() - const windowFocus = useWindowFocus() + const { reason } = useApp() + const visibility = useDocumentVisibility() const { data: rule, refresh } = useRequest(async () => { - if (!windowFocus.value) return null + if (visibility.value !== 'visible') return undefined const reasonId = reason.value?.id - if (!reasonId) return null - const rules = await limitService.select({ id: reasonId, filterDisabled: false }) - return rules?.[0] + if (!reasonId) return undefined + const rules = await listLimits({ id: reasonId }) + return rules[0] ?? undefined }) - watch([reason, windowFocus], refresh) + watch([reason, visibility], refresh) provide(RULE_KEY, rule) } -export const useRule = () => inject(RULE_KEY) as Ref - -export const provideDelayHandler = (app: App, handlers: () => void) => { - app?.provide(DELAY_HANDLER_KEY, handlers) -} - -export const useDelayHandler = () => inject(DELAY_HANDLER_KEY) as () => void \ No newline at end of file +export const useRule = () => inject>(RULE_KEY) as ShallowRef \ No newline at end of file diff --git a/src/content-script/limit/modal/element.ts b/src/content-script/limit/modal/element.ts new file mode 100644 index 000000000..58f573f53 --- /dev/null +++ b/src/content-script/limit/modal/element.ts @@ -0,0 +1,18 @@ +export const TAG_NAME = 'extension-time-tracker-overlay' + +export class RootElement extends HTMLElement { + constructor() { + super() + } +} + +export function createRootElement(): RootElement { + const element = document.createElement(TAG_NAME) as RootElement + element.style.display = 'block' + element.style.position = 'fixed' + element.style.inset = '0' + element.style.width = '100vw' + element.style.height = '100vh' + element.style.zIndex = String(Number.MAX_SAFE_INTEGER) + return element +} diff --git a/src/content-script/limit/modal/index.ts b/src/content-script/limit/modal/index.ts index a6534c3f9..663762f67 100644 --- a/src/content-script/limit/modal/index.ts +++ b/src/content-script/limit/modal/index.ts @@ -1,208 +1,32 @@ -import { getRuntimeId, getUrl, sendMsg2Runtime } from '@api/chrome/runtime' -import optionService from '@service/option-service' -import { init as initTheme, toggle } from '@util/dark-mode' -import { createApp, Ref, type App } from 'vue' -import { exitFullscreen, isSameReason, type LimitReason, type MaskModal } from '../common' -import { TAG_NAME, type RootElement } from '../element' +import { initDarkTheme } from '@pages/util/dark-mode' +import 'element-plus/es/components/input/style/css' +import 'element-plus/es/components/message/style/css' +import { createApp } from 'vue' import Main from './Main' -import { provideDelayHandler, provideGlobalParam, provideReason } from './context' +import { ModalBridge } from './bridge' +import { provideApp } from './context' -function pauseAllVideo(): void { - const elements = document?.getElementsByTagName('video') - if (!elements) return - Array.from(elements).forEach(video => { - try { - video?.pause?.() - } catch { } - }) -} - -function pauseAllAudio(): void { - const elements = document?.getElementsByTagName('audio') - if (!elements) return - Array.from(elements).forEach(audio => { - try { - audio?.pause?.() - } catch { } - }) -} - -const TYPE_SORT: { [reason in timer.limit.ReasonType]: number } = { - PERIOD: 0, - VISIT: 1, - DAILY: 2, - WEEKLY: 3, -} - -const createHeader = () => { - const header = document.createElement('header') - // Style script - const style = document.createElement('link') - style.type = 'text/css' - style.rel = 'stylesheet' - style.href = getUrl('content_scripts.css') - header.append(style) - return header -} - -class ScreenLocker { - private styleId = `time-tracker-style-${getRuntimeId()}` - private lockedCls = `time-tracker-locked-${getRuntimeId()}` - - lock() { - this.insertStyle() - document?.documentElement?.classList?.add?.(this.lockedCls) - } - - unlock() { - document?.documentElement?.classList?.remove(this.lockedCls) - } - - private insertStyle() { - if (!document) return - if (document.getElementById(this.styleId)) return - const style = document.createElement('style') - style.id = this.styleId - const css = ` - .${this.lockedCls} { - overflow: hidden !important; - } - ` - style.appendChild(document.createTextNode(css)) - document.head?.appendChild(style) +function parsePageUrl(): string { + const raw = new URLSearchParams(window.location.search).get('url') + if (!raw) return '' + try { + return decodeURIComponent(raw) + } catch { + return raw } } -class ModalInstance implements MaskModal { - url: string - rootElement: RootElement | undefined - body: HTMLBodyElement | undefined - delayHandlers: (() => void)[] = [ - () => sendMsg2Runtime('cs.moreMinutes', this.url), - ] - reasons: LimitReason[] = [] - reason: Ref | undefined - app: App | undefined - screenLocker = new ScreenLocker() - - constructor(url: string) { - (window as any)['__modal__'] = this - this.url = url - } - - addReason(...reasons2Add: LimitReason[]): void { - reasons2Add = reasons2Add.filter(r => { - const anyExist = this.reasons?.some(reason => isSameReason(r, reason)) - return !anyExist - }) - if (!reasons2Add?.length) return - this.reasons.push(...reasons2Add) - // Sort - this.reasons.sort((a, b) => TYPE_SORT[a.type] - TYPE_SORT[b.type]) - this.refresh() - } - - removeReason(...reasons2Remove: LimitReason[]): void { - if (!reasons2Remove?.length) return - this.reasons = this.reasons?.filter(reason => { - const anyRemove = reasons2Remove.some(r => isSameReason(reason, r)) - return !anyRemove - }) - this.refresh() - } - - removeReasonsByType(...types: timer.limit.ReasonType[]): void { - if (!types?.length) return - this.reasons = this.reasons?.filter(r => !types?.includes(r.type)) - this.refresh() - } - - addDelayHandler(handler: () => void): void { - if (!handler) return - if (this.delayHandlers?.includes(handler)) return - this.delayHandlers?.push(handler) - } - - private refresh() { - setTimeout(() => { - // update vue ref in another micro task - const reason = this.reasons?.[0] - reason ? this.show(reason) : this.hide() - }) - } - - private async init() { - // 1. Create mask element - const root = await this.prepareRoot() - const html = document.createElement('html') - root?.append(html) - - // header - const header = createHeader() - html.append(header) +function main() { + initDarkTheme() - // body - this.body = document.createElement('body') - html.append(this.body) + const bridge = new ModalBridge('*', () => window.parent) + const app = createApp(Main) + provideApp(app, bridge, parsePageUrl()) - // 2. Init dark mode - initTheme(html) - optionService.isDarkMode().then(val => toggle(val, html)) - - // 3. Init vue app instance - this.initApp() - } - - private initApp() { - this.app = createApp(Main) - this.reason = provideReason(this.app) - provideGlobalParam(this.app, { url: this.url }) - provideDelayHandler(this.app, () => this.delayHandlers?.forEach(h => h?.())) - this.body && this.app.mount(this.body) - } - - private async prepareRoot(): Promise { - const inner = (): ShadowRoot | null => { - const exist = this.rootElement || document.querySelector(TAG_NAME) as RootElement - if (exist) { - this.rootElement = exist - return exist.shadowRoot - } - this.rootElement = document.createElement(TAG_NAME) as RootElement - document.body.appendChild(this.rootElement) - return this.rootElement.attachShadow({ mode: 'open' }) - } - if (document.body) { - return inner() - } else { - return new Promise(resolve => { - window.addEventListener('load', () => resolve(inner())) - }) - } - } - - private async show(reason: LimitReason) { - if (!this.rootElement) { - await this.init() - } - await exitFullscreen() - // Scroll to top - scrollTo(0, 0) - pauseAllVideo() - pauseAllAudio() - - this.rootElement && (this.rootElement.style.visibility = 'visible') - this.reason && (this.reason.value = reason) - this.screenLocker.lock() - this.body && (this.body.style.display = 'block') - } - - private hide() { - this.rootElement && (this.rootElement.style.visibility = 'hidden') - this.screenLocker.unlock() - this.body && (this.body.style.display = 'none') - this.reason && (this.reason.value = undefined) - } + const el = document.createElement('div') + document.body.append(el) + el.id = 'app' + app.mount(el) } -export default ModalInstance +main() diff --git a/src/content-script/limit/modal/instance.ts b/src/content-script/limit/modal/instance.ts new file mode 100644 index 000000000..c97aef856 --- /dev/null +++ b/src/content-script/limit/modal/instance.ts @@ -0,0 +1,191 @@ +import { getRuntimeId, getUrl } from '@api/chrome/runtime' +import { trySendMsg2Runtime } from '@api/sw/common' +import { exitFullscreen, isSameReason } from '../common' +import type { LimitReason, MaskModal } from '../types' +import { ModalBridge } from './bridge' +import { createRootElement, TAG_NAME, type RootElement } from './element' +import type { LimitReasonData } from './types' + +const MODAL_URL = getUrl('static/limit.html') +const MSG_ORIGIN = new URL(MODAL_URL).origin + +function pauseAllVideo(): void { + const elements = document?.getElementsByTagName('video') + if (!elements) return + Array.from(elements).forEach(video => { + try { + video?.pause?.() + } catch { } + }) +} + +function pauseAllAudio(): void { + const elements = document?.getElementsByTagName('audio') + if (!elements) return + Array.from(elements).forEach(audio => { + try { + audio?.pause?.() + } catch { } + }) +} + +const TYPE_SORT: { [reason in tt4b.limit.ReasonType]: number } = { + PERIOD: 0, + VISIT: 1, + DAILY: 2, + WEEKLY: 3, +} + +class ScreenLocker { + private styleId = `time-tracker-style-${getRuntimeId()}` + private lockedCls = `time-tracker-locked-${getRuntimeId()}` + + lock() { + this.insertStyle() + document?.documentElement?.classList?.add?.(this.lockedCls) + } + + unlock() { + document?.documentElement?.classList?.remove(this.lockedCls) + } + + private insertStyle() { + if (!document) return + if (document.getElementById(this.styleId)) return + const style = document.createElement('style') + style.id = this.styleId + const css = ` + .${this.lockedCls} { + overflow: hidden !important; + } + ` + style.appendChild(document.createTextNode(css)) + document.head?.appendChild(style) + } +} + +class ModalInstance implements MaskModal { + url: string + rootElement: RootElement | undefined + iframe: HTMLIFrameElement | undefined + delayHandlers: NoArgCallback[] = [ + () => trySendMsg2Runtime('limit.delay', this.url), + ] + reasons: LimitReason[] = [] + reason: LimitReason | undefined + screenLocker = new ScreenLocker() + private bridge: ModalBridge + + constructor(url: string) { + (window as any)['__modal__'] = this + this.url = url + this.bridge = new ModalBridge(MSG_ORIGIN, () => this.iframe?.contentWindow ?? undefined) + .register('visitTime', () => this.reason?.getVisitTime?.() ?? 0) + .register('delay', () => this.delayHandlers.forEach(handler => handler())) + } + + addReason(...reasons2Add: LimitReason[]): void { + reasons2Add = reasons2Add.filter(r => !this.reasons.some(reason => isSameReason(r, reason))) + if (!reasons2Add.length) return + this.reasons.push(...reasons2Add) + // Sort + this.reasons.sort((a, b) => TYPE_SORT[a.type] - TYPE_SORT[b.type]) + this.refresh() + } + + removeReason(...reasons2Remove: LimitReason[]): void { + if (!reasons2Remove?.length) return + this.reasons = this.reasons?.filter(reason => { + const anyRemove = reasons2Remove.some(r => isSameReason(reason, r)) + return !anyRemove + }) + this.refresh() + } + + removeReasonsByType(...types: tt4b.limit.ReasonType[]): void { + if (!types.length) return + this.reasons = this.reasons.filter(r => !types.includes(r.type)) + this.refresh() + } + + addDelayHandler(handler: NoArgCallback): void { + if (this.delayHandlers.includes(handler)) return + this.delayHandlers.push(handler) + } + + private refresh() { + // Change reason in new microtask + setTimeout(() => { + const reason = this.reasons[0] + reason ? this.show(reason) : this.hide() + }) + } + + private async init(): Promise { + const root = await this.prepareRoot() + if (!root) return + const iframe = document.createElement('iframe') + iframe.src = `${MODAL_URL}?url=${encodeURIComponent(this.url)}` + iframe.style.width = '100vw' + iframe.style.height = '100vh' + iframe.style.border = 'none' + root.append(iframe) + + this.iframe = iframe + + return new Promise(resolve => iframe.onload = () => resolve(undefined)) + } + + private async prepareRoot(): Promise { + const inner = (): ShadowRoot | null => { + const exist = this.rootElement ?? document.querySelector(TAG_NAME) as RootElement + if (exist) { + this.rootElement = exist + return exist.shadowRoot + } + this.rootElement = createRootElement() + document.body.appendChild(this.rootElement) + return this.rootElement.attachShadow({ mode: 'open' }) + } + if (document.body) return inner() + + return new Promise(resolve => { + window.addEventListener('load', () => resolve(inner())) + }) + } + + private async show(reason: LimitReason) { + if (!this.rootElement) { + await this.init() + } + await exitFullscreen() + pauseAllVideo() + pauseAllAudio() + + this.rootElement && (this.rootElement.style.visibility = 'visible') + this.setReason(reason) + this.screenLocker.lock() + this.iframe && (this.iframe.style.visibility = 'visible') + } + + private hide() { + this.rootElement && (this.rootElement.style.visibility = 'hidden') + this.screenLocker.unlock() + this.iframe && (this.iframe.style.visibility = 'hidden') + this.setReason(undefined) + } + + private setReason(reason: LimitReason | undefined) { + if (!this.iframe?.contentWindow) return + this.reason = reason + this.bridge.request('reason', extractReason(reason)).catch(() => { }) + } +} + +const extractReason = (reason: LimitReason | undefined): LimitReasonData | undefined => { + if (!reason) return undefined + const { getVisitTime: _, ...rest } = reason + return rest +} + +export default ModalInstance diff --git a/src/content-script/limit/modal/style/index.sass b/src/content-script/limit/modal/style/index.sass deleted file mode 100644 index c33f4ab8e..000000000 --- a/src/content-script/limit/modal/style/index.sass +++ /dev/null @@ -1,59 +0,0 @@ -@use "sass:meta" -@import url("./element-base.css") -@include meta.load-css("../../../../pages/element-ui/dark-theme") -@import url("element-plus/theme-chalk/el-descriptions.css") -@import url("element-plus/theme-chalk/el-descriptions-item.css") -@import url("element-plus/theme-chalk/el-button.css") -@import url("element-plus/theme-chalk/el-button-group.css") -@import url("element-plus/theme-chalk/el-message.css") -@import url("element-plus/theme-chalk/el-message-box.css") -@import url("element-plus/theme-chalk/el-input.css") -@import url("element-plus/theme-chalk/el-tag.css") - -#app - width: 100% - height: 100% - text-align: center - display: flex - justify-content: space-around - flex-direction: column - align-items: center - color: var(--el-text-color-primary) - .alert-container - margin-bottom: 80px - .name-line - margin-block-end: 0.67em - img - width: 1.4em - height: 1.4em - margin-inline-end: .4em - img,span - vertical-align: middle - line-height: 2em - h1 - font-size: 2.7em - max-width: 50vw - margin: auto - margin-block-start: 0.67em - margin-block-end: 0.67em - .reason-container - margin-bottom: 30px - .el-descriptions - margin: auto - width: 400px - .footer-container - margin-bottom: 60px -body - height: 100vh - width: 100vw - padding: 0 - margin: 0 - position: absolute - top: 0 - left: 0 - z-index: 999999 - min-height: 600px - background-color: var(--el-fill-color-blank) -html[data-theme=dark] - body - background-color: var(--el-fill-color-dark) diff --git a/src/content-script/limit/modal/style/modal.css b/src/content-script/limit/modal/style/modal.css new file mode 100644 index 000000000..bc3da790d --- /dev/null +++ b/src/content-script/limit/modal/style/modal.css @@ -0,0 +1,31 @@ +#app { + width: 100vw; + height: 100vh; + display: flex; + justify-content: space-around; + flex-direction: column; + align-items: center; + color: var(--el-text-color-primary); +} + +body { + height: 100vh; + width: 100vw; + padding: 0; + margin: 0; + position: fixed; + top: 0; + left: 0; + z-index: 999999; + min-height: 600px; + background-color: var(--el-fill-color-blank); +} + +html[data-theme=dark] body { + background-color: var(--el-fill-color-dark); +} + +/* Fix message-box buttons */ +.el-message-box__btns { + gap: 12px; +} \ No newline at end of file diff --git a/src/content-script/limit/modal/types.ts b/src/content-script/limit/modal/types.ts new file mode 100644 index 000000000..05b2a85de --- /dev/null +++ b/src/content-script/limit/modal/types.ts @@ -0,0 +1,17 @@ +import type { LimitReason } from '../types' + +export type LimitReasonData = Omit + +type MakeRegistry = { + [K in Code]: { req: Req; res: Res } +} + +type BridgeRegistry = + & MakeRegistry<'reason', LimitReasonData | undefined, void> + & MakeRegistry<'visitTime', void, number> + & MakeRegistry<'delay', void, void> + +export type BridgeCode = keyof BridgeRegistry +export type BridgeRequest = BridgeRegistry[C]['req'] +export type BridgeResponse = BridgeRegistry[C]['res'] +export type BridgeHandler = (req: BridgeRequest) => Awaitable> \ No newline at end of file diff --git a/src/content-script/limit/processor/message-adaptor.ts b/src/content-script/limit/processor/message-adaptor.ts index 0cea7bf7c..e64d33484 100644 --- a/src/content-script/limit/processor/message-adaptor.ts +++ b/src/content-script/limit/processor/message-adaptor.ts @@ -1,66 +1,42 @@ -import { sendMsg2Runtime } from "@api/chrome/runtime" +import { trySendMsg2Runtime } from '@api/sw/common' import { hasDailyLimited, hasWeeklyLimited, matches } from "@util/limit" -import { type LimitReason, type ModalContext, type Processor } from "../common" +import type { LimitReason, ModalContext, Processor } from '../types' -const cvtItem2AddReason = (item: timer.limit.Item): LimitReason[] => { +const cvtItem2AddReason = (item: tt4b.limit.Item, delayDuration: number): LimitReason[] => { const { cond, allowDelay, id, delayCount, weeklyDelayCount } = item const reasons2Add: LimitReason[] = [] - hasDailyLimited(item) && reasons2Add.push({ type: "DAILY", cond, allowDelay, id, delayCount }) - hasWeeklyLimited(item) && reasons2Add.push({ type: 'WEEKLY', cond, allowDelay, id, delayCount: weeklyDelayCount }) + hasDailyLimited(item, delayDuration) && reasons2Add.push({ type: "DAILY", cond, allowDelay, id, delayCount }) + hasWeeklyLimited(item, delayDuration) && reasons2Add.push({ type: 'WEEKLY', cond, allowDelay, id, delayCount: weeklyDelayCount }) return reasons2Add } -const cvtItem2RemoveReason = (item: timer.limit.Item): LimitReason[] => { - const { cond, allowDelay, id, delayCount, weeklyDelayCount } = item - const reasons2Remove: LimitReason[] = [] - !hasDailyLimited(item) && reasons2Remove.push({ type: 'DAILY', cond, allowDelay, id, delayCount }) - !hasWeeklyLimited(item) && reasons2Remove.push({ type: 'WEEKLY', cond, allowDelay, id, delayCount: weeklyDelayCount }) - return reasons2Remove -} - class MessageAdaptor implements Processor { - private context: ModalContext + constructor(private readonly context: ModalContext, private readonly delayDuration: number) { } - constructor(context: ModalContext) { - this.context = context + onLimitChanged(): void { + this.initRules() } - handleMsg(code: timer.mq.ReqCode, data: unknown): timer.mq.Response | Promise { - let items = data as timer.limit.Item[] - if (code === "limitTimeMeet") { - if (!items?.length) { - return { code: "fail" } - } - items.filter(item => matches(item?.cond, this.context.url)) - .flatMap(cvtItem2AddReason) - .forEach(reason => reason && this.context.modal.addReason(reason)) - return { code: "success" } - } else if (code === "limitChanged") { - this.context.modal.removeReasonsByType("DAILY", "WEEKLY") - items?.flatMap(cvtItem2AddReason) - ?.forEach(reason => reason && this.context.modal.addReason(reason)) - return { code: "success" } - } else if (code === "limitWaking") { - const reasons2Remove = items?.flatMap(cvtItem2RemoveReason) - reasons2Remove?.length && this.context.modal.removeReason(...reasons2Remove) - return { code: "success" } - } - return { code: "ignore" } + onLimitTimeMeet(items: tt4b.limit.Item[]): void { + if (!items.length) return + items.filter(({ cond }) => matches(cond, this.context.url)) + .flatMap(item => cvtItem2AddReason(item, this.delayDuration)) + .forEach(reason => this.context.modal.addReason(reason)) } async init(): Promise { - this.initRules?.() - this.context.modal?.addDelayHandler(() => this.initRules()) + this.initRules() + this.context.modal.addDelayHandler(() => this.initRules()) } async initRules(): Promise { - this.context.modal?.removeReasonsByType?.('DAILY', 'WEEKLY') - const limitedRules = await sendMsg2Runtime('cs.getLimitedRules', this.context.url) + this.context.modal.removeReasonsByType('DAILY', 'WEEKLY') + const limitedRules = await trySendMsg2Runtime('limit.list', { limited: true, effective: true, url: this.context.url }) + if (!limitedRules?.length) return - limitedRules - ?.flatMap?.(cvtItem2AddReason) - ?.forEach(reason => this.context.modal.addReason(reason)) + const reasons = limitedRules.flatMap(item => cvtItem2AddReason(item, this.delayDuration)) + this.context.modal.addReason(...reasons) } } -export default MessageAdaptor \ No newline at end of file +export default MessageAdaptor diff --git a/src/content-script/limit/processor/period-processor.ts b/src/content-script/limit/processor/period-processor.ts index e22c7f29c..fe0a84bab 100644 --- a/src/content-script/limit/processor/period-processor.ts +++ b/src/content-script/limit/processor/period-processor.ts @@ -1,16 +1,17 @@ -import { sendMsg2Runtime } from "@api/chrome/runtime" +import { trySendMsg2Runtime } from '@api/sw/common' import { date2Idx } from "@util/limit" import { MILL_PER_SECOND } from "@util/time" -import { type LimitReason, type ModalContext, type Processor } from "../common" +import type { LimitReason, ModalContext, Processor } from '../types' -function processRule(rule: timer.limit.Rule, nowSeconds: number, context: ModalContext): NodeJS.Timeout[] { +function processRule(rule: tt4b.limit.Rule, nowSeconds: number, context: ModalContext): ReturnType[] { const { cond, periods, id } = rule - return periods?.flatMap?.(p => { + if (!periods?.length) return [] + return periods.flatMap(p => { const [s, e] = p const startSeconds = s * 60 const endSeconds = (e + 1) * 60 const reason: LimitReason = { id, cond, type: "PERIOD" } - const timers: NodeJS.Timeout[] = [] + const timers: ReturnType[] = [] if (nowSeconds < startSeconds) { timers.push(setTimeout(() => context.modal.addReason(reason), (startSeconds - nowSeconds) * MILL_PER_SECOND)) timers.push(setTimeout(() => context.modal.removeReason(reason), (endSeconds - nowSeconds) * MILL_PER_SECOND)) @@ -19,36 +20,26 @@ function processRule(rule: timer.limit.Rule, nowSeconds: number, context: ModalC timers.push(setTimeout(() => context.modal.removeReason(reason), (endSeconds - nowSeconds) * MILL_PER_SECOND)) } return timers - }) ?? [] + }) } class PeriodProcessor implements Processor { - private context: ModalContext - private timers: NodeJS.Timeout[] = [] + private timers: ReturnType[] = [] - constructor(context: ModalContext) { - this.context = context - } + constructor(private readonly context: ModalContext) { } - async handleMsg(code: timer.mq.ReqCode, data: timer.limit.Item[]): Promise { - if (code === "limitChanged") { - this.timers?.forEach(clearTimeout) - await this.init0(data) - return { code: "success" } - } - return { code: "ignore" } + async onLimitChanged(): Promise { + await this.init() } - init(): Promise { - return this.init0() - } - - private async init0(rules?: timer.limit.Item[]) { - rules = rules || await sendMsg2Runtime("cs.getRelatedRules", this.context.url) + async init(): Promise { // Clear first + this.timers.forEach(clearTimeout) this.context.modal.removeReasonsByType("PERIOD") + + const rules = await trySendMsg2Runtime('limit.list', { effective: true, url: this.context.url }) ?? [] const nowSeconds = date2Idx(new Date()) - this.timers = rules?.flatMap?.(r => processRule(r, nowSeconds, this.context)) || [] + this.timers = rules.flatMap(r => processRule(r, nowSeconds, this.context)) } } diff --git a/src/content-script/limit/processor/visit-processor.ts b/src/content-script/limit/processor/visit-processor.ts index 9514eb442..80637ccd4 100644 --- a/src/content-script/limit/processor/visit-processor.ts +++ b/src/content-script/limit/processor/visit-processor.ts @@ -1,41 +1,35 @@ -import { sendMsg2Runtime } from "@api/chrome/runtime" +import { trySendMsg2Runtime } from '@api/sw/common' import NormalTracker from "@cs/tracker/normal" -import { DELAY_MILL } from "@util/limit" -import { MILL_PER_SECOND } from "@util/time" -import { type ModalContext, type Processor } from "../common" +import { MILL_PER_MINUTE, MILL_PER_SECOND } from "@util/time" +import type { ModalContext, Processor } from '../types' class VisitProcessor implements Processor { - - private context: ModalContext private focusTime: number = 0 - private rules: timer.limit.Rule[] = [] - private tracker: NormalTracker | undefined + private rules: tt4b.limit.Rule[] = [] + tracker: NormalTracker private delayCount: number = 0 - constructor(context: ModalContext) { - this.context = context + constructor(private readonly context: ModalContext, private readonly delayDuration: number) { + this.tracker = new NormalTracker({ + onReport: data => this.handleTracker(data), + }) } - async handleMsg(code: timer.mq.ReqCode): Promise { - if (code === "limitChanged") { - this.initRules() - return { code: "success" } - } else if (code === "askVisitTime") { - return { code: "success", data: this.focusTime } - } - return { code: "ignore" } + onLimitChanged(): void { + this.initRules() } - hasLimited(rule: timer.limit.Rule): boolean { - const { visitTime } = rule || {} + private hasLimited(rule: tt4b.limit.Rule): boolean { + const { visitTime } = rule if (!visitTime) return false - return visitTime * MILL_PER_SECOND + this.delayCount * DELAY_MILL < this.focusTime + const afterDelayed = visitTime * MILL_PER_SECOND + this.delayCount * this.delayDuration * MILL_PER_MINUTE + return afterDelayed < this.focusTime } - async handleTracker(data: timer.core.Event) { - const diff = (data?.end ?? 0) - (data?.start ?? 0) + private async handleTracker({ start, end }: tt4b.core.Event) { + const diff = end - start this.focusTime += diff - this.rules?.forEach?.(rule => { + this.rules.forEach(rule => { if (!this.hasLimited(rule)) return const { id, cond, allowDelay } = rule this.context.modal.addReason({ @@ -49,22 +43,19 @@ class VisitProcessor implements Processor { }) } - async initRules() { - this.rules = await sendMsg2Runtime("cs.getRelatedRules", this.context.url) ?? [] + private async initRules() { + this.rules = await trySendMsg2Runtime("limit.list", { effective: true, url: this.context.url }) ?? [] this.context.modal.removeReasonsByType("VISIT") } async init(): Promise { - this.tracker = new NormalTracker({ - onReport: data => this.handleTracker(data), - }) this.tracker.init() this.initRules() - this.context.modal.addDelayHandler(() => this.processMore5Minutes()) + this.context.modal.addDelayHandler(() => this.processDelay()) } - private processMore5Minutes() { - this.delayCount = (this.delayCount ?? 0) + 1 + private processDelay() { + this.delayCount++ this.context.modal.removeReasonsByType("VISIT") } } diff --git a/src/content-script/limit/reminder/component.ts b/src/content-script/limit/reminder/component.ts index 06378f176..f7e36c367 100644 --- a/src/content-script/limit/reminder/component.ts +++ b/src/content-script/limit/reminder/component.ts @@ -1,4 +1,4 @@ -import { getUrl } from "@api/chrome/runtime" +import { getIconUrl } from "@api/chrome/runtime" import { t } from "@cs/locale" const containerStyle = (dark: boolean): Partial => ({ @@ -63,7 +63,7 @@ function createIcon(): HTMLImageElement { const icon = document.createElement('img') icon.width = 32 icon.height = 32 - icon.src = getUrl('static/images/icon.png') + icon.src = getIconUrl() return icon } @@ -91,7 +91,7 @@ function createCloseBtn(dark: boolean, onClose: () => void): HTMLElement { return btn } -function createGroup(dark: boolean, data: timer.limit.ReminderInfo, onClose: () => void): HTMLDivElement { +function createGroup(dark: boolean, data: tt4b.limit.ReminderInfo, onClose: () => void): HTMLDivElement { const group = document.createElement('div') mountStyle(group, GROUP_STYLE) @@ -115,7 +115,7 @@ function createGroup(dark: boolean, data: timer.limit.ReminderInfo, onClose: () return group } -export function createComponent(dark: boolean, data: timer.limit.ReminderInfo, onClose: () => void) { +export function createComponent(dark: boolean, data: tt4b.limit.ReminderInfo, onClose: () => void) { const el = document.createElement('div') mountStyle(el, containerStyle(dark)) diff --git a/src/content-script/limit/reminder/index.ts b/src/content-script/limit/reminder/index.ts index 44f1663ca..f5ac439e5 100644 --- a/src/content-script/limit/reminder/index.ts +++ b/src/content-script/limit/reminder/index.ts @@ -1,22 +1,15 @@ -import optionService from "@service/option-service" +import { getOption } from '@api/sw/option' +import { processDarkMode } from '@pages/util/dark-mode' import { MILL_PER_MINUTE } from "@util/time" -import { exitFullscreen, type Processor } from "../common" +import { exitFullscreen } from "../common" import { createComponent } from "./component" -class Reminder implements Processor { +class Reminder { private id = 0 private el: HTMLElement | undefined private darkMode: boolean = false - handleMsg(code: timer.mq.ReqCode, data: unknown): timer.mq.Response | Promise { - if (code !== 'limitReminder') { - return { code: 'ignore' } - } - this.show(data as timer.limit.ReminderInfo) - return { code: 'success' } - } - - private async show(data: timer.limit.ReminderInfo) { + public async show(data: tt4b.limit.ReminderInfo) { if (!document?.body || this.el) return await exitFullscreen() @@ -38,7 +31,8 @@ class Reminder implements Processor { } async init(): Promise { - this.darkMode = await optionService.isDarkMode() + const option = await getOption() + this.darkMode = processDarkMode(option) } } diff --git a/src/content-script/limit/types.ts b/src/content-script/limit/types.ts new file mode 100644 index 000000000..cddfcb183 --- /dev/null +++ b/src/content-script/limit/types.ts @@ -0,0 +1,27 @@ + +export type LimitReason = + & RequiredPick + & PartialPick + & { + type: tt4b.limit.ReasonType + getVisitTime?: () => number + } + +export interface MaskModal { + readonly reasons: LimitReason[] + + addReason(...reasons: LimitReason[]): void + removeReason(...reasons: LimitReason[]): void + removeReasonsByType(...types: tt4b.limit.ReasonType[]): void + addDelayHandler(handler: NoArgCallback): void +} + +export type ModalContext = { + url: string + modal: MaskModal +} + +export interface Processor { + init(): Awaitable + onLimitChanged(): void +} \ No newline at end of file diff --git a/src/content-script/printer.ts b/src/content-script/printer.ts index 11f619d9c..53b023d07 100644 --- a/src/content-script/printer.ts +++ b/src/content-script/printer.ts @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { sendMsg2Runtime } from "@api/chrome/runtime" +import { trySendMsg2Runtime } from '@api/sw/common' import { formatPeriodCommon } from "@util/time" import { t } from "./locale" @@ -13,8 +13,9 @@ import { t } from "./locale" * Print info of today */ export default async function printInfo(host: string) { - const waste = await sendMsg2Runtime('cs.getTodayInfo', host) - const { time, focus } = waste || {} + const data = await trySendMsg2Runtime('stat.today', host) + if (!data) return + const { time, focus } = data const param = { time: `${time ?? '-'}`, diff --git a/src/content-script/skeleton.ts b/src/content-script/skeleton.ts deleted file mode 100644 index ed5d80338..000000000 --- a/src/content-script/skeleton.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { sendMsg2Runtime } from "@api/chrome/runtime" - -function awaitDocumentReady() { - if (document.readyState === 'complete') { - return Promise.resolve() - } else { - return new Promise(resolve => { - document.addEventListener('DOMContentLoaded', resolve, { once: true }) - }) - } -} - -const main = async () => { - await awaitDocumentReady() - sendMsg2Runtime('cs.onInjected') -} - -main() diff --git a/src/content-script/timeline.ts b/src/content-script/timeline.ts index 47eddc29d..136117391 100644 --- a/src/content-script/timeline.ts +++ b/src/content-script/timeline.ts @@ -1,4 +1,4 @@ -import { sendMsg2Runtime } from '@api/chrome/runtime' +import { trySendMsg2Runtime } from '@api/sw/common' class TimelineCollector { private startTime: number | null = null @@ -7,22 +7,23 @@ class TimelineCollector { * Bind page visibility and focus events */ init(): void { - document.addEventListener('visibilitychange', () => { - if (document.hidden) { - this.collect() - } else { + const onStateChange = () => { + if (!document.hidden && document.hasFocus()) { this.startTracking() + } else { + this.collect() } - }) + } - window.addEventListener('focus', () => this.startTracking()) - window.addEventListener('blur', () => this.collect()) + document.addEventListener('visibilitychange', onStateChange) + window.addEventListener('focus', onStateChange) + window.addEventListener('blur', onStateChange) window.addEventListener('beforeunload', () => this.collect()) if (document.readyState === 'complete') { - this.startTracking() + onStateChange() } else { - window.addEventListener('load', () => this.startTracking()) + window.addEventListener('load', onStateChange) } } @@ -30,6 +31,8 @@ class TimelineCollector { * Start tracking current page */ public startTracking(): void { + if (document.hidden || !document.hasFocus()) return + if (this.startTime !== null) return this.startTime = Date.now() } @@ -39,18 +42,14 @@ class TimelineCollector { private collect(): void { if (!this.startTime) return const url = document?.location?.href + if (!url) return - url && sendMsg2Runtime('cs.timelineEv', { - start: this.startTime, - end: Date.now(), - url, - } satisfies timer.timeline.Event) + trySendMsg2Runtime('timeline.tick', { start: this.startTime, end: Date.now(), url }) this.startTime = null } } - export default function processTimeline() { const collector = new TimelineCollector() collector.init() diff --git a/src/content-script/tracker/normal/idle-detector.ts b/src/content-script/tracker/normal/idle-detector.ts index 26dec2210..127804c9a 100644 --- a/src/content-script/tracker/normal/idle-detector.ts +++ b/src/content-script/tracker/normal/idle-detector.ts @@ -1,7 +1,10 @@ -import optionHolder from "@service/components/option-holder" +import { trySendMsg2Runtime } from '@api/sw/common' +import { getOption } from '@api/sw/option' export default class IdleDetector { fullScreen: boolean = false + // default to true, try not to affect tracking + audible: boolean = true autoPauseTracking: boolean = false // By milliseconds @@ -9,15 +12,11 @@ export default class IdleDetector { lastActiveTime: number = Date.now() userActive: boolean = true - pauseTimeout: NodeJS.Timeout | undefined + pauseTimeout: ReturnType | undefined - onIdle: () => void - onActive: () => void - - constructor({ onIdle, onActive }: { onIdle: () => void, onActive: () => void }) { + constructor(private readonly onIdle: NoArgCallback, private readonly onActive: NoArgCallback) { this.onIdle = onIdle this.onActive = onActive - this.init() } needTimeout(): boolean { @@ -25,19 +24,16 @@ export default class IdleDetector { } isIdle() { - return this.lastActiveTime + this.autoPauseInterval <= Date.now() && !this.fullScreen + if (this.fullScreen || this.audible) return false + return this.lastActiveTime + this.autoPauseInterval <= Date.now() } - private async init() { - const option = await optionHolder.get() - - this.processOption(option) - this.resetTimeout() - - optionHolder.addChangeListener(opt => { - this.processOption(opt) - this.resetTimeout() - }) + async init() { + this.reset() + document.addEventListener('visibilitychange', () => document.visibilityState === 'visible' && this.reset()) + const pollInterval = setInterval(() => this.reset(), 60_000) + const stopPoll = () => clearInterval(pollInterval) + window.addEventListener('beforeunload', stopPoll) const handleActive = () => { this.lastActiveTime = Date.now() @@ -45,30 +41,34 @@ export default class IdleDetector { if (!this.needTimeout()) return if (!this.pauseTimeout) { - // Paused, so activate - this.onActive?.() + this.onActive() this.resetTimeout() } } window.addEventListener('mousedown', handleActive) window.addEventListener('mousemove', handleActive) - window.addEventListener('keypress', handleActive) + window.addEventListener('keydown', handleActive) window.addEventListener('scroll', handleActive) window.addEventListener('wheel', handleActive) document?.addEventListener('fullscreenchange', () => { this.fullScreen = !!document?.fullscreenElement handleActive() }) + + trySendMsg2Runtime('cs.getAudible').then(val => this.audible = !!val) } - private processOption(option: timer.option.StatisticsOption) { - this.autoPauseTracking = !!option?.autoPauseTracking - this.autoPauseInterval = option?.autoPauseInterval * 1000 + private reset() { + getOption().then(({ autoPauseTracking, autoPauseInterval }) => { + this.autoPauseTracking = autoPauseTracking + this.autoPauseInterval = autoPauseInterval * 1000 + + this.resetTimeout() + }).catch(() => { }) } private resetTimeout() { - if (!!this.pauseTimeout) { clearTimeout(this.pauseTimeout) this.pauseTimeout = undefined @@ -92,8 +92,7 @@ export default class IdleDetector { if (!this.needTimeout()) return if (this.isIdle()) { - // Idle interval meets - this.onIdle?.() + this.onIdle() } else { this.resetTimeout() } diff --git a/src/content-script/tracker/normal/index.ts b/src/content-script/tracker/normal/index.ts index 9adb167ab..bf529f4ee 100644 --- a/src/content-script/tracker/normal/index.ts +++ b/src/content-script/tracker/normal/index.ts @@ -1,3 +1,4 @@ +import type { AudibleChangeHandler } from '@cs/types' import IdleDetector from "./idle-detector" const INTERVAL = 1000 @@ -7,20 +8,18 @@ type StateChangeReason = 'visible' | 'idle' | 'initial' class TrackContext { docVisible: boolean = false idleDetector: IdleDetector - onPause: (reason: StateChangeReason) => void - onResume: (reason: StateChangeReason) => void - - constructor({ onPause, onResume }: { onPause: (reason: StateChangeReason) => void, onResume: (reason: StateChangeReason) => void }) { - this.onPause = onPause - this.onResume = onResume + constructor( + private readonly onPause: ArgCallback, + private readonly onResume: ArgCallback, + ) { this.detectDocVisible() document?.addEventListener('visibilitychange', () => this.detectDocVisible()) - this.idleDetector = new IdleDetector({ - onIdle: () => this.onPause?.('idle'), - onActive: () => this.docVisible && this.onResume?.('idle') - }) + this.idleDetector = new IdleDetector( + () => this.onPause('idle'), + () => this.docVisible && this.onResume('idle'), + ) } private detectDocVisible() { @@ -38,8 +37,8 @@ class TrackContext { } } -export type NormalTrackerOption = { - onReport: (ev: timer.core.Event) => Promise +type NormalTrackerOption = { + onReport: (ev: tt4b.core.Event) => Promise onResume?: (reason: StateChangeReason) => void onPause?: (reason: StateChangeReason) => void } @@ -47,25 +46,24 @@ export type NormalTrackerOption = { /** * Normal tracker */ -export default class NormalTracker { - context: TrackContext | undefined +export default class NormalTracker implements AudibleChangeHandler { + context: TrackContext start: number = Date.now() - option: NormalTrackerOption - constructor(option: NormalTrackerOption) { - this.option = option + constructor(private readonly option: NormalTrackerOption) { + this.context = new TrackContext( + reason => this.pause(reason), + reason => this.resume(reason), + ) } init() { // Resume if idle before reloading this.resume('idle') + this.context.idleDetector.init() - this.context = new TrackContext({ - onPause: reason => this.pause(reason), - onResume: reason => this.resume(reason), - }) setInterval(() => { - if (!this.context?.isActive()) return + if (!this.context.isActive()) return this.collect() }, INTERVAL) @@ -81,10 +79,9 @@ export default class NormalTracker { return } - const data: timer.core.Event = { + const data: tt4b.core.Event = { start: lastTime, end: now, - url: location?.href, ignoreTabCheck: !!ignoreTabCheck } try { @@ -103,4 +100,8 @@ export default class NormalTracker { this.start = Date.now() } + + onAudibleChange(audible: boolean) { + this.context.idleDetector.audible = audible + } } diff --git a/src/content-script/tracker/run-time.ts b/src/content-script/tracker/run-time.ts index 9b1a0a487..fbbe42ec0 100644 --- a/src/content-script/tracker/run-time.ts +++ b/src/content-script/tracker/run-time.ts @@ -1,52 +1,45 @@ -import { onRuntimeMessage, sendMsg2Runtime } from "@api/chrome/runtime" +import { trySendMsg2Runtime } from '@api/sw/common' +import { extractHostname } from '@util/pattern' +import Dispatcher from '../dispatcher' class RunTimeTracker { private start: number = Date.now() - private url: string // Real host, including builtin hosts private host: string | undefined - constructor(url: string) { - this.url = url - this.start = Date.now() + constructor(private readonly url: string) { } - init(): void { + init(dispatcher: Dispatcher): void { this.fetchSite() - - onRuntimeMessage(async req => { - if (req.code === 'siteRunChange') { - this.fetchSite() - return { code: 'success' } - } - return { code: 'ignore' } - }) - + dispatcher.register('siteRunChange', () => void this.fetchSite()) setInterval(() => this.collect(), 1000) } - private fetchSite() { - sendMsg2Runtime('cs.getRunSites', this.url) - .then((site: timer.site.SiteKey) => this.host = site?.host) - // Extension reloaded, so terminate - .catch(() => this.host = undefined) + private async fetchSite() { + const { host } = extractHostname(this.url) + if (!host) return + const enabled = await trySendMsg2Runtime('site.runEnabled', host) + this.host = enabled ? host : undefined } - private collect() { + private async collect() { const now = Date.now() const lastTime = this.start - const event: timer.core.Event = { - start: lastTime, - end: now, - url: this.url, - ignoreTabCheck: false, - host: this.host, + try { + if (this.host) { + const event: tt4b.core.Event = { + start: lastTime, + end: now, + ignoreTabCheck: false, + host: this.host, + } + await trySendMsg2Runtime('track.runTime', event) + } + this.start = now + } catch { } - - sendMsg2Runtime('cs.trackRunTime', event) - .then(() => this.start = now) - .catch(() => { }) } } diff --git a/src/content-script/types.ts b/src/content-script/types.ts new file mode 100644 index 000000000..f7423260c --- /dev/null +++ b/src/content-script/types.ts @@ -0,0 +1,3 @@ +export interface AudibleChangeHandler { + onAudibleChange(audible: boolean): void +} \ No newline at end of file diff --git a/src/database/backup-database.ts b/src/database/backup-database.ts deleted file mode 100644 index 082cdca46..000000000 --- a/src/database/backup-database.ts +++ /dev/null @@ -1,47 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import BaseDatabase from "./common/base-database" -import { REMAIN_WORD_PREFIX } from "./common/constant" - -const PREFIX = REMAIN_WORD_PREFIX + "backup" -const SNAPSHOT_KEY = PREFIX + "_snap" -const CACHE_KEY = PREFIX + "_cache" - -function cacheKeyOf(type: timer.backup.Type) { - return CACHE_KEY + "_" + type -} - -class BackupDatabase extends BaseDatabase { - - async getSnapshot(type: timer.backup.Type): Promise { - const cache = await this.storage.getOne(SNAPSHOT_KEY) - return cache?.[type] - } - - async updateSnapshot(type: timer.backup.Type, snapshot: timer.backup.Snapshot): Promise { - const cache = await this.storage.getOne(SNAPSHOT_KEY) || {} - cache[type] = snapshot - await this.storage.put(SNAPSHOT_KEY, cache) - } - - async getCache(type: timer.backup.Type): Promise { - return (await this.storage.getOne(cacheKeyOf(type))) || {} - } - - async updateCache(type: timer.backup.Type, newVal: unknown): Promise { - return this.storage.put(cacheKeyOf(type), newVal as Object) - } - - async importData(_data: any): Promise { - // Do nothing - } -} - -const backupDatabase = new BackupDatabase() - -export default backupDatabase \ No newline at end of file diff --git a/src/database/merge-rule-database.ts b/src/database/merge-rule-database.ts deleted file mode 100644 index 82fd23307..000000000 --- a/src/database/merge-rule-database.ts +++ /dev/null @@ -1,69 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import BaseDatabase from "./common/base-database" -import { REMAIN_WORD_PREFIX } from "./common/constant" - -const DB_KEY = REMAIN_WORD_PREFIX + 'MERGE_RULES' - -type MergeRuleSet = { [key: string]: string | number } - -/** - * Rules to merge host - * - * @since 0.1.2 - */ -class MergeRuleDatabase extends BaseDatabase { - - async refresh(): Promise { - const result = await this.storage.getOne(DB_KEY) - return result || {} - } - - private update(data: MergeRuleSet): Promise { - return this.setByKey(DB_KEY, data) - } - - async selectAll(): Promise { - const set = await this.refresh() - return Object.entries(set) - .map(([origin, merged]) => ({ origin, merged } satisfies timer.merge.Rule)) - } - - async remove(origin: string): Promise { - const set = await this.refresh() - delete set[origin] - await this.update(set) - } - - /** - * Add to the db - */ - async add(...toAdd: timer.merge.Rule[]): Promise { - const set = await this.refresh() - // Not rewrite - toAdd.forEach(({ origin, merged }) => set[origin] = set[origin] ?? merged) - await this.update(set) - } - - async importData(data: any): Promise { - const toMigrate = data?.[DB_KEY] - if (!toMigrate) return - const exist = await this.refresh() - const valueTypes = ['string', 'number'] - Object.entries(toMigrate as MergeRuleSet) - .filter(([_key, value]) => valueTypes.includes(typeof value)) - // Not rewrite - .filter(([key]) => !exist[key]) - .forEach(([key, value]) => exist[key] = value) - this.update(exist) - } -} - -const mergeRuleDatabase = new MergeRuleDatabase() - -export default mergeRuleDatabase \ No newline at end of file diff --git a/src/database/meta-database.ts b/src/database/meta-database.ts deleted file mode 100644 index 9475bdc50..000000000 --- a/src/database/meta-database.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import BaseDatabase from "./common/base-database" -import { META_KEY } from "./common/constant" - -/** - * @since 0.6.0 - */ -class MetaDatabase extends BaseDatabase { - async getMeta(): Promise { - const meta = await this.storage.getOne(META_KEY) - return meta || {} - } - - async importData(data: any): Promise { - const meta: timer.ExtensionMeta = data[META_KEY] as timer.ExtensionMeta - if (!meta) return - - const existMeta = await this.getMeta() - const { popupCounter = {}, appCounter = {} } = existMeta - popupCounter._total = (popupCounter._total ?? 0) + (popupCounter._total ?? 0) - if (meta.appCounter) { - Object.entries(meta.appCounter).forEach(([routePath, count]) => { - appCounter[routePath] = (appCounter[routePath] ?? 0) + count - }) - } - await this.update({ ...existMeta, popupCounter, appCounter }) - } - - async update(existMeta: timer.ExtensionMeta): Promise { - await this.storage.put(META_KEY, existMeta) - } -} - -const metaDatabase = new MetaDatabase() - -export default metaDatabase \ No newline at end of file diff --git a/src/database/option-database.ts b/src/database/option-database.ts deleted file mode 100644 index 72ceac680..000000000 --- a/src/database/option-database.ts +++ /dev/null @@ -1,55 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { defaultOption } from "@util/constant/option" -import BaseDatabase from "./common/base-database" -import { REMAIN_WORD_PREFIX } from "./common/constant" - -const DB_KEY = REMAIN_WORD_PREFIX + 'OPTION' - -/** - * Database of options - * - * @since 0.3.0 - */ -class OptionDatabase extends BaseDatabase { - async importData(data: any): Promise { - const newVal = data[DB_KEY] - const exist = await this.getOption() - if (exist) { - Object.entries(exist).forEach(([key, value]) => (exist as any)[key] = value) - } - await this.setOption(newVal) - } - - async getOption(): Promise { - const option = await this.storage.getOne(DB_KEY) - return option || defaultOption() - } - - async setOption(option: timer.option.AllOption): Promise { - option && await this.setByKey(DB_KEY, option) - } - - /** - * @since 0.3.2 - */ - addOptionChangeListener(listener: (newVal: timer.option.AllOption) => void) { - const storageListener = ( - changes: { [key: string]: chrome.storage.StorageChange }, - _areaName: chrome.storage.AreaName, - ) => { - const optionInfo = changes[DB_KEY] - optionInfo && listener(optionInfo.newValue || {} as timer.option.AllOption) - } - chrome.storage.onChanged.addListener(storageListener) - } -} - -const optionDatabase = new OptionDatabase() - -export default optionDatabase \ No newline at end of file diff --git a/src/database/site-database.ts b/src/database/site-database.ts deleted file mode 100644 index 19419cdf9..000000000 --- a/src/database/site-database.ts +++ /dev/null @@ -1,228 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { CATE_NOT_SET_ID } from "@util/site" -import BaseDatabase from "./common/base-database" -import { REMAIN_WORD_PREFIX } from "./common/constant" - -export type SiteCondition = { - /** - * Fuzzy query of host or alias - */ - fuzzyQuery?: string - /** - * @since 3.0.0 - */ - cateIds?: number | number[] - types?: timer.site.Type | timer.site.Type[] -} - -type _Entry = { - /** - * Alias - */ - a?: string - /** - * Icon url - */ - i?: string - /** - * Category ID - */ - c?: number - /** - * Count run time - */ - r?: boolean -} - -const DB_KEY_PREFIX = REMAIN_WORD_PREFIX + 'SITE_' -const HOST_KEY_PREFIX = DB_KEY_PREFIX + 'h' -const VIRTUAL_KEY_PREFIX = DB_KEY_PREFIX + 'v' -const MERGED_FLAG = 'm' - -function cvt2Key({ host, type }: timer.site.SiteKey): string { - if (type === 'virtual') { - return VIRTUAL_KEY_PREFIX + host - } else if (type === 'merged') { - return HOST_KEY_PREFIX + MERGED_FLAG + host - } else { - return HOST_KEY_PREFIX + '_' + host - } -} - -function cvt2SiteKey(key: string): timer.site.SiteKey { - if (key.startsWith(VIRTUAL_KEY_PREFIX)) { - return { - host: key.substring(VIRTUAL_KEY_PREFIX.length), - type: 'virtual', - } - } else if (key.startsWith(HOST_KEY_PREFIX)) { - return { - host: key.substring(HOST_KEY_PREFIX.length + 1), - type: key.charAt(HOST_KEY_PREFIX.length) === MERGED_FLAG ? 'merged' : 'normal', - } - } else { - // Can't go there - return { host: key, type: 'normal' } - } -} - -function cvt2Entry({ alias, iconUrl, cate, run }: timer.site.SiteInfo): _Entry { - const entry: _Entry = { i: iconUrl } - alias && (entry.a = alias) - cate && (entry.c = cate) - run && (entry.r = true) - entry.i = iconUrl - return entry -} - -function cvt2SiteInfo(key: timer.site.SiteKey, entry: _Entry | undefined): timer.site.SiteInfo { - const { a, i, c, r } = entry || {} - const siteInfo: timer.site.SiteInfo = { ...key } - siteInfo.alias = a - siteInfo.cate = c ?? CATE_NOT_SET_ID - siteInfo.iconUrl = i - siteInfo.run = !!r - return siteInfo -} - -//////////////////////////////////////////////////////////////////////////// -///////////////////////// ///////////////////////// -///////////////////////// PUBLIC METHODS START ///////////////////////// -///////////////////////// ///////////////////////// -//////////////////////////////////////////////////////////////////////////// - -/** - * Select by condition - * - * @returns list not be undefined, maybe empty - */ -async function select(this: SiteDatabase, condition?: SiteCondition): Promise { - const filter = buildFilter(condition) - const data = await this.storage.get() - return Object.entries(data) - .filter(([key]) => key.startsWith(DB_KEY_PREFIX)) - .map(([key, value]) => cvt2SiteInfo(cvt2SiteKey(key), value as _Entry)) - .filter(filter) -} - -function buildFilter(condition?: SiteCondition): (site: timer.site.SiteInfo) => boolean { - const { fuzzyQuery, cateIds, types } = condition || {} - let cateFilter = typeof cateIds === 'number' ? [cateIds] : (cateIds?.length ? cateIds : undefined) - let typeFilter = typeof types === 'string' ? [types] : (types?.length ? types : undefined) - return site => { - const { host: siteHost, alias: siteAlias, cate, type } = site || {} - if (fuzzyQuery && !(siteHost?.includes(fuzzyQuery) || siteAlias?.includes(fuzzyQuery))) return false - if (cateFilter && (!cateFilter.includes(cate ?? CATE_NOT_SET_ID) || type !== 'normal')) return false - if (typeFilter && !matchType(typeFilter, site)) return false - return true - } -} - -function matchType(types: timer.site.Type[], site: timer.site.SiteInfo): boolean { - const { type } = site || {} - if (type === 'virtual') { - return types.includes('virtual') - } else if (type === 'merged') { - return types.includes('merged') - } else { - return types.includes('normal') - } -} - -/** - * Get by key - * - * @returns site info, or undefined - */ -async function get(this: SiteDatabase, key: timer.site.SiteKey): Promise { - const entry = await this.storage.getOne<_Entry>(cvt2Key(key)) - return entry ? cvt2SiteInfo(key, entry) : null -} - -async function getBatch(this: SiteDatabase, keys: timer.site.SiteKey[]): Promise { - const result = await this.storage.get(keys.map(cvt2Key)) - return Object.entries(result) - .map(([key, value]) => cvt2SiteInfo(cvt2SiteKey(key), value as _Entry)) -} - -/** - * Save site info - */ -async function save(this: SiteDatabase, ...sites: timer.site.SiteInfo[]): Promise { - if (!sites?.length) return - const toSet: Record = {} - sites?.forEach(s => toSet[cvt2Key(s)] = cvt2Entry(s)) - await this.storage.set(toSet) -} - -async function remove(this: SiteDatabase, ...siteKeys: timer.site.SiteKey[]): Promise { - const keys = siteKeys?.map(s => cvt2Key(s)) - if (!keys?.length) return - await this.storage.remove(keys) -} - -async function exist(this: SiteDatabase, siteKey: timer.site.SiteKey): Promise { - const key = cvt2Key(siteKey) - const entry = await this.storage.getOne<_Entry>(key) - return !!entry -} - -async function existBatch(this: SiteDatabase, siteKeys: timer.site.SiteKey[]): Promise { - const keys = siteKeys.map(cvt2Key) - const items = await this.storage.get(keys) - return Object.entries(items).map(([key]) => cvt2SiteKey(key)) -} - -async function importData(this: SiteDatabase, _data: any) { - throw new Error("Method not implemented.") -} - -//////////////////////////////////////////////////////////////////////////// -///////////////////////// ///////////////////////// -///////////////////////// PUBLIC METHODS END ///////////////////////// -///////////////////////// ///////////////////////// -//////////////////////////////////////////////////////////////////////////// - -class SiteDatabase extends BaseDatabase { - select = select - get = get - getBatch = getBatch - save = save - remove = remove - exist = exist - existBatch = existBatch - importData = importData - - /** - * Add listener to listen changes - * - * @since 1.6.0 - */ - addChangeListener(listener: (oldAndNew: [timer.site.SiteInfo, timer.site.SiteInfo][]) => void) { - const storageListener = ( - changes: { [key: string]: chrome.storage.StorageChange }, - _areaName: chrome.storage.AreaName, - ) => { - const changedSites: [timer.site.SiteInfo, timer.site.SiteInfo][] = Object.entries(changes) - .filter(([k]) => k.startsWith(DB_KEY_PREFIX)) - .map(([k, v]) => { - const siteKey = cvt2SiteKey(k) - const oldVal = cvt2SiteInfo(siteKey, v?.oldValue as _Entry) - const newVal = cvt2SiteInfo(siteKey, v?.newValue as _Entry) - return [oldVal, newVal] - }) - changedSites.length && listener?.(changedSites) - } - chrome.storage.onChanged.addListener(storageListener) - } -} - -const siteDatabase = new SiteDatabase() - -export default siteDatabase \ No newline at end of file diff --git a/src/database/stat-database/constants.ts b/src/database/stat-database/constants.ts deleted file mode 100644 index d1ca9f5e4..000000000 --- a/src/database/stat-database/constants.ts +++ /dev/null @@ -1 +0,0 @@ -export const GROUP_PREFIX = "_g_" \ No newline at end of file diff --git a/src/database/stat-database/filter.ts b/src/database/stat-database/filter.ts deleted file mode 100644 index d91c894dc..000000000 --- a/src/database/stat-database/filter.ts +++ /dev/null @@ -1,134 +0,0 @@ -import { judgeVirtualFast } from "@util/pattern" -import { formatTimeYMD } from "@util/time" -import { type StatCondition, type StatDatabase } from "." -import { GROUP_PREFIX } from "./constants" - -type _StatCondition = StatCondition & { - // Use exact date condition - useExactDate?: boolean - // date str - exactDateStr?: string - startDateStr?: string - endDateStr?: string - // time range - timeStart?: number - timeEnd?: number - focusStart?: number - focusEnd?: number -} - -type _FilterResult = { - host: string - date: string - value: timer.core.Result -} - -function filterHost(host: string, condition: _StatCondition): boolean { - const { keys, virtual } = condition - const keyArr = typeof keys === 'string' ? [keys] : keys - // 1. virtual - if (!virtual && judgeVirtualFast(host)) return false - // 2. host - if (keyArr?.length && !keyArr.includes(host)) return false - return true -} - -function filterDate( - date: string, - { useExactDate, exactDateStr, startDateStr, endDateStr }: _StatCondition -): boolean { - if (useExactDate) { - if (exactDateStr !== date) return false - } else { - if (startDateStr && startDateStr > date) return false - if (endDateStr && endDateStr < date) return false - } - return true -} - -function filterNumberRange(val: number, [start, end]: [start?: number, end?: number]): boolean { - if (start !== null && start !== undefined && start > val) return false - if (end !== null && end !== undefined && end < val) return false - return true -} - -/** - * Filter by query parameters - * - * @param date date of item - * @param host host of item - * @param val val of item - * @param condition query parameters - * @return true if valid, or false - */ -function filterByCond(result: _FilterResult, condition: _StatCondition): boolean { - const { host, date, value } = result - const { focus, time } = value - const { timeStart, timeEnd, focusStart, focusEnd } = condition - - return filterHost(host, condition) - && filterDate(date, condition) - && filterNumberRange(time, [timeStart, timeEnd]) - && filterNumberRange(focus, [focusStart, focusEnd]) -} - - -function processDateCondition(cond: _StatCondition, paramDate?: Date | [Date, Date?]) { - if (!paramDate) return - - if (paramDate instanceof Date) { - cond.useExactDate = true - cond.exactDateStr = formatTimeYMD(paramDate as Date) - } else { - let startDate: Date | undefined = undefined - let endDate: Date | undefined = undefined - const dateArr = paramDate as [Date, Date] - dateArr && dateArr.length >= 2 && (endDate = dateArr[1]) - dateArr && dateArr.length >= 1 && (startDate = dateArr[0]) - cond.useExactDate = false - startDate && (cond.startDateStr = formatTimeYMD(startDate)) - endDate && (cond.endDateStr = formatTimeYMD(endDate)) - } -} - -function processParamTimeCondition(cond: _StatCondition, paramTime?: [number, number?]) { - if (!paramTime) return - paramTime.length >= 2 && (cond.timeEnd = paramTime[1]) - paramTime.length >= 1 && (cond.timeStart = paramTime[0]) -} - -function processParamFocusCondition(cond: _StatCondition, paramFocus?: Vector<2>) { - if (!paramFocus) return - paramFocus.length >= 2 && (cond.focusEnd = paramFocus[1]) - paramFocus.length >= 1 && (cond.focusStart = paramFocus[0]) -} - -function processCondition(condition: StatCondition): _StatCondition { - const result: _StatCondition = { ...condition } - processDateCondition(result, condition.date) - processParamTimeCondition(result, condition.timeRange) - processParamFocusCondition(result, condition.focusRange) - return result -} - -/** - * Filter by query parameters - */ -export async function filter(this: StatDatabase, condition?: StatCondition, onlyGroup?: boolean): Promise<_FilterResult[]> { - const cond = processCondition(condition ?? {}) - const items = await this.refresh() - const result: _FilterResult[] = [] - Object.entries(items).forEach(([key, value]) => { - const date = key.substring(0, 8) - let host = key.substring(8) - if (onlyGroup) { - if (host.startsWith(GROUP_PREFIX)) { - host = host.substring(GROUP_PREFIX.length) - result.push({ date, host, value: value as timer.core.Result }) - } - } else if (!host.startsWith(GROUP_PREFIX)) { - result.push({ date, host, value: value as timer.core.Result }) - } - }) - return result.filter(item => filterByCond(item, cond)) -} diff --git a/src/database/stat-database/index.ts b/src/database/stat-database/index.ts deleted file mode 100644 index de05a1d8a..000000000 --- a/src/database/stat-database/index.ts +++ /dev/null @@ -1,316 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { escapeRegExp } from "@util/pattern" -import { isNotZeroResult } from "@util/stat" -import { formatTimeYMD } from "@util/time" -import { log } from "../../common/logger" -import BaseDatabase from "../common/base-database" -import { REMAIN_WORD_PREFIX } from "../common/constant" -import { GROUP_PREFIX } from "./constants" -import { filter } from "./filter" - -export type StatCondition = { - /** - * Date - * {y}{m}{d} - */ - date?: Date | [Date, Date?] - /** - * Focus range, milliseconds - * - * @since 0.0.9 - */ - focusRange?: Vector<2> - /** - * Time range - * - * @since 0.0.9 - */ - timeRange?: [number, number?] - /** - * Whether to include virtual sites - * - * @since 1.6.1 - */ - virtual?: boolean - /** - * Host or groupId, full match - */ - keys?: string[] | string -} - -function increase(a: timer.core.Result, b: timer.core.Result) { - const res: timer.core.Result = { - focus: (a?.focus ?? 0) + (b?.focus ?? 0), - time: (a?.time ?? 0) + (b?.time ?? 0), - } - const run = (a?.run ?? 0) + (b?.run ?? 0) - run && (res.run = run) - return res -} - -function createZeroResult(): timer.core.Result { - return { focus: 0, time: 0 } -} - -function mergeMigration(exist: timer.core.Result | undefined, another: any) { - exist = exist || createZeroResult() - return increase(exist, { focus: another.focus ?? 0, time: another.time ?? 0, run: another.run ?? 0 }) -} - -/** - * Generate the key in local storage by host and date - * - * @param host host - * @param date date - */ -function generateKey(host: string, date: Date | string) { - const str = typeof date === 'object' ? formatTimeYMD(date as Date) : date - return str + host -} - -const generateHostReg = (host: string): RegExp => RegExp(`^\\d{8}${escapeRegExp(host)}$`) - -function generateGroupKey(groupId: number, date: Date | string) { - const str = typeof date === 'object' ? formatTimeYMD(date as Date) : date - return str + GROUP_PREFIX + groupId -} - -const generateGroupReg = (groupId: number): RegExp => RegExp(`^\\d{8}${escapeRegExp(`${GROUP_PREFIX}${groupId}`)}$`) - -function migrate(exists: { [key: string]: timer.core.Result }, data: any): Record { - const result: Record = {} - Object.entries(data) - .filter(([key]) => /^20\d{2}[01]\d[0-3]\d.*/.test(key) && !key.substring(8).startsWith(GROUP_PREFIX)) - .forEach(([key, value]) => { - if (typeof value !== "object") return - const exist = exists[key] - const merged = mergeMigration(exist, value) - merged && isNotZeroResult(merged) && (result[key] = mergeMigration(exist, value)) - }) - return result -} - -export class StatDatabase extends BaseDatabase { - - async refresh(): Promise<{ [key: string]: unknown }> { - const result = await this.storage.get() - const items: Record = {} - Object.entries(result) - .filter(([key]) => !key.startsWith(REMAIN_WORD_PREFIX)) - .forEach(([key, value]) => items[key] = value) - return items - } - - /** - * @param host host - * @since 0.1.3 - */ - accumulate(host: string, date: Date | string, item: timer.core.Result): Promise { - const key = generateKey(host, date) - return this.accumulateInner(key, item) - } - - /** - * @param host host - * @since 0.1.3 - */ - accumulateGroup(groupId: number, date: Date | string, item: timer.core.Result): Promise { - const key = generateGroupKey(groupId, date) - return this.accumulateInner(key, item) - } - - private async accumulateInner(key: string, item: timer.core.Result): Promise { - let exist = await this.storage.getOne(key) - exist = increase(exist || createZeroResult(), item) - await this.setByKey(key, exist) - return exist - } - - /** - * Batch accumulate - * - * @param data data: {host=>waste_per_day} - * @param date date - * @since 0.1.8 - */ - async accumulateBatch(data: Record, date: Date | string): Promise> { - const hosts = Object.keys(data) - if (!hosts.length) return {} - const dateStr = typeof date === 'string' ? date : formatTimeYMD(date) - const keys: { [host: string]: string } = {} - hosts.forEach(host => keys[host] = generateKey(host, dateStr)) - - const items = await this.storage.get(Object.values(keys)) - - const toUpdate: Record = {} - const afterUpdated: Record = {} - Object.entries(keys).forEach(([host, key]) => { - const item = data[host] - const exist: timer.core.Result = increase(items[key] as timer.core.Result || createZeroResult(), item) - toUpdate[key] = afterUpdated[host] = exist - }) - await this.storage.set(toUpdate) - return afterUpdated - } - - filter = filter - - /** - * Select - * - * @param condition condition - */ - async select(condition?: StatCondition): Promise { - log("select:{condition}", condition) - const filterResults = await this.filter(condition) - return filterResults.map(({ date, host, value }) => { - const { focus, time, run } = value - return { date, host, focus, time, run } - }) - } - - async selectGroup(condition?: StatCondition): Promise { - const filterResults = await this.filter(condition, true) - return filterResults.map(({ date, host, value }) => { - const { focus, time, run } = value - return { date, host, focus, time, run } - }) - } - - /** - * Get by host and date - * - * @since 0.0.5 - */ - async get(host: string, date: Date | string): Promise { - const key = generateKey(host, date) - const exist = await this.storage.getOne(key) - return exist || createZeroResult() - } - - /** - * Delete the record - * - * @param host host - * @param date date - * @since 0.0.5 - */ - async deleteByUrlAndDate(host: string, date: Date | string): Promise { - const key = generateKey(host, date) - return this.storage.remove(key) - } - - async deleteByGroupAndDate(groupId: number, date: Date | string): Promise { - const key = generateGroupKey(groupId, date) - return this.storage.remove(key) - } - - /** - * Delete by key - * - * @param rows site rows, the host and date mustn't be null - * @since 0.0.9 - */ - async delete(rows: timer.core.RowKey[]): Promise { - const keys: string[] = rows.map(({ host, date }) => generateKey(host, date)) - return this.storage.remove(keys) - } - - async deleteGroup(rows: [groupId: number, date: string][]): Promise { - const keys: string[] = rows.map(([groupId, date]) => generateGroupKey(groupId, date)) - return this.storage.remove(keys) - } - - async batchDeleteGroup(groupId: number): Promise { - const keyReg = generateGroupReg(groupId) - const items = await this.refresh() - const keys: string[] = Object.keys(items).filter(key => keyReg.test(key)) - await this.storage.remove(keys) - } - - /** - * Force update data - * - * @since 1.4.3 - */ - forceUpdate({ host, date, time, focus, run }: timer.core.Row): Promise { - const key = generateKey(host, date) - const result: timer.core.Result = { time, focus } - run && (result.run = run) - return this.storage.put(key, result) - } - - /** - * @param host host - * @param start start date, inclusive - * @param end end date, inclusive - * @since 0.0.7 - */ - async deleteByUrlBetween(host: string, start?: Date, end?: Date): Promise { - const startStr = start ? formatTimeYMD(start) : undefined - const endStr = end ? formatTimeYMD(end) : undefined - const dateFilter = (date: string) => (startStr ? startStr <= date : true) && (endStr ? date <= endStr : true) - const items = await this.refresh() - - // Key format: 20201112www.google.com - const keyReg = generateHostReg(host) - const keys: string[] = Object.keys(items) - .filter(key => keyReg.test(key) && dateFilter(key.substring(0, 8))) - - await this.storage.remove(keys) - return keys.map(k => k.substring(0, 8)) - } - - async deleteByGroupBetween(groupId: number, start?: Date, end?: Date): Promise { - const startStr = start ? formatTimeYMD(start) : undefined - const endStr = end ? formatTimeYMD(end) : undefined - const dateFilter = (date: string) => (startStr ? startStr <= date : true) && (endStr ? date <= endStr : true) - const items = await this.refresh() - - const keyReg = generateGroupReg(groupId) - const keys: string[] = Object.keys(items).filter(key => keyReg.test(key) && dateFilter(key.substring(0, 8))) - - await this.storage.remove(keys) - } - - /** - * Delete the record - * - * @param host host - * @since 0.0.5 - */ - async deleteByUrl(host: string): Promise { - const items = await this.refresh() - - // Key format: 20201112www.google.com - const keyReg = generateHostReg(host) - const keys: string[] = Object.keys(items).filter(key => keyReg.test(key)) - await this.storage.remove(keys) - - return keys.map(k => k.substring(0, 8)) - } - - async deleteByGroup(groupId: number): Promise { - const items = await this.refresh() - const keyReg = generateGroupReg(groupId) - const keys: string[] = Object.keys(items).filter(key => keyReg.test(key)) - await this.storage.remove(keys) - } - - async importData(data: any): Promise { - if (typeof data !== "object") return - const items = await this.storage.get() - const toSave = migrate(items, data) - this.storage.set(toSave) - } -} - -const statDatabase = new StatDatabase() - -export default statDatabase diff --git a/src/database/timeline-database.ts b/src/database/timeline-database.ts deleted file mode 100644 index 98f270f2d..000000000 --- a/src/database/timeline-database.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { formatTimeYMD, MILL_PER_DAY } from '@util/time' -import BaseDatabase from './common/base-database' -import { REMAIN_WORD_PREFIX } from './common/constant' - -const DB_KEY = REMAIN_WORD_PREFIX + 'TL' - -type Item = { - // start - s: number - // duration - d: number -} - -type TimelineData = { - [date: string]: { - [host: string]: Item[] - } -} - -// If two tick with the same host is near 1 sec, then merge them to one -const MERGE_THRESHOLD = 1000 - -const canMerge = (item: Item, tick: timer.timeline.Tick) => { - const { s: is, d: id } = item - const { start } = tick - return start >= is + id - && start <= id + MERGE_THRESHOLD -} - -const isConflict = (item: Item, tick: timer.timeline.Tick) => { - const { s: is, d: id } = item - const { start } = tick - return is <= start && start < is + id -} - -const merge = (data: TimelineData, tick: timer.timeline.Tick) => { - const { start, duration, host } = tick - const date = formatTimeYMD(start) - const hostData = data[date] ?? {} - const items = hostData[host] ?? [] - items.sort((a, b) => (a?.s ?? 0) - (b?.s ?? 0)) - for (const item of items) { - if (isConflict(item, tick)) { - return - } - if (canMerge(item, tick)) { - item.d = start + duration - item.s - return - } - } - // normal tick - items.push({ s: start, d: duration }) - hostData[host] = items - data[date] = hostData -} - -export const TIMELINE_LIFE_CYCLE = 3 - -const removeOutdated = (data: TimelineData, currTime: number) => { - const minDate = formatTimeYMD(currTime - MILL_PER_DAY * (TIMELINE_LIFE_CYCLE - 1)) - const keys = Object.keys(data).filter(k => k < minDate) - keys.forEach(key => delete data[key]) -} - -class TimelineDatabase extends BaseDatabase { - private async getData(): Promise { - const data = await this.storage.getOne(DB_KEY) - return data ?? {} - } - - private setData(data: TimelineData): Promise { - return this.setByKey(DB_KEY, data) - } - - async batchSave(ticks: timer.timeline.Tick[]) { - const data = await this.getData() - ticks.forEach(tick => { - merge(data, tick) - removeOutdated(data, tick.start) - }) - await this.setData(data) - } - - async getAll(): Promise { - const data = await this.getData() - const result: timer.timeline.Tick[] = [] - Object.values(data).forEach(hostData => { - Object.entries(hostData).forEach(([host, items]) => { - items.forEach(({ s: start, d: duration }) => result.push({ host, start, duration })) - }) - }) - return result - } - - async importData(_: any): Promise { - // do nothing - } -} -const timelineDatabase = new TimelineDatabase() - -export default timelineDatabase \ No newline at end of file diff --git a/src/i18n/chrome/index.ts b/src/i18n/chrome/index.ts index b74238065..26c9980d9 100644 --- a/src/i18n/chrome/index.ts +++ b/src/i18n/chrome/index.ts @@ -25,6 +25,9 @@ const _default: { [locale in FakedLocale]: any } = { fr: compile(messages.fr), ru: compile(messages.ru), ar: compile(messages.ar), + tr: compile(messages.tr), + pl: compile(messages.pl), + it: compile(messages.it), } export default _default \ No newline at end of file diff --git a/src/i18n/chrome/message.ts b/src/i18n/chrome/message.ts index e891d2df4..5c2904f74 100644 --- a/src/i18n/chrome/message.ts +++ b/src/i18n/chrome/message.ts @@ -36,12 +36,13 @@ const placeholder: ChromeMessage = { marketName: '', }, base: { - sidebar: '', allFunction: '', guidePage: '', changeLog: '', option: '', sourceCode: '', + limit: '', + helpUs: '', }, contextMenus: { add2Whitelist: '', diff --git a/src/i18n/chrome/t.ts b/src/i18n/chrome/t.ts index 01cd2963c..8790c872c 100644 --- a/src/i18n/chrome/t.ts +++ b/src/i18n/chrome/t.ts @@ -9,7 +9,7 @@ import { getMessage } from "@api/chrome/i18n" import { t } from ".." import messages, { router, type ChromeMessage } from "./message" -export const keyPathOf = (key: (root: ChromeMessage) => string) => key(router) +const keyPathOf = (key: (root: ChromeMessage) => string) => key(router) export const t2Chrome = (key: (root: ChromeMessage) => string) => { if (getMessage) { diff --git a/src/i18n/element.ts b/src/i18n/element.ts index 71c03d822..036c778d2 100644 --- a/src/i18n/element.ts +++ b/src/i18n/element.ts @@ -1,10 +1,8 @@ -import ElementPlus from 'element-plus' import { type Language } from "element-plus/es/locale" -import { type App } from "vue" import { locale, t } from "." import calendarMessages from "./message/common/calendar" -const LOCALES: { [locale in timer.Locale]: () => Promise<{ default: Language }> } = { +const LOCALES: Record Promise<{ default: Language }>> = { zh_CN: () => import('element-plus/es/locale/lang/zh-cn'), zh_TW: () => import('element-plus/es/locale/lang/zh-tw'), en: () => import('element-plus/es/locale/lang/en'), @@ -16,12 +14,13 @@ const LOCALES: { [locale in timer.Locale]: () => Promise<{ default: Language }> fr: () => import('element-plus/es/locale/lang/fr'), ru: () => import('element-plus/es/locale/lang/ru'), ar: () => import('element-plus/es/locale/lang/ar'), + tr: () => import('element-plus/es/locale/lang/tr'), + pl: () => import('element-plus/es/locale/lang/pl'), + it: () => import('element-plus/es/locale/lang/it'), } -export const initElementLocale = async (app: App) => { - const module = await LOCALES[locale]?.() - const EL_LOCALE = module?.default - app.use(ElementPlus, { locale: EL_LOCALE }) +export async function initElementLocale(): Promise { + return (await LOCALES[locale]()).default } export const dateFormat = () => t(calendarMessages, { key: msg => msg.dateFormat, param: { y: 'YYYY', m: 'MM', d: 'DD' } }) diff --git a/src/i18n/i18n.d.ts b/src/i18n/i18n.d.ts index cd2e6cbd6..f16415931 100644 --- a/src/i18n/i18n.d.ts +++ b/src/i18n/i18n.d.ts @@ -1,9 +1,9 @@ type RequiredMessages = { - [locale in timer.RequiredLocale]: M + [locale in tt4b.RequiredLocale]: M } type OptionalMessages = { - [locale in timer.OptionalLocale]?: EmbeddedPartial + [locale in tt4b.OptionalLocale]?: EmbeddedPartial } type Messages = RequiredMessages & OptionalMessages diff --git a/src/i18n/index.ts b/src/i18n/index.ts index 6790e8a97..02b60b0a3 100644 --- a/src/i18n/index.ts +++ b/src/i18n/index.ts @@ -5,26 +5,26 @@ * https://opensource.org/licenses/MIT */ -import { getUILanguage } from "@api/chrome/i18n" -import optionHolder from "@service/components/option-holder" -import { setDir, setLocale } from "@util/document" +import { getUILanguage } from "../api/chrome/i18n" +import { getOption } from '../api/sw/option' +import { setDir, setLocale } from "../util/document" import { ALL_LOCALES as _ALL_LOCALES } from "./message/merge" /** * Not to import this one if not necessary */ -export type FakedLocale = timer.Locale +export type FakedLocale = tt4b.Locale + /** * @since 0.2.2 */ -export const FEEDBACK_LOCALE: timer.Locale = "en" - -export const ALL_LOCALES: timer.Locale[] = _ALL_LOCALES +const FEEDBACK_LOCALE: tt4b.Locale = "en" -export const defaultLocale: timer.Locale = "zh_CN" +export const ALL_LOCALES: tt4b.Locale[] = _ALL_LOCALES // Standardize the locale code according to the Chrome locale code -const chrome2I18n: { [key: string]: timer.Locale } = { +const chrome2I18n: { [key: string]: tt4b.Locale } = { + 'zh': 'zh_CN', 'zh-CN': "zh_CN", 'zh-TW': "zh_TW", 'en': 'en', @@ -38,18 +38,20 @@ const chrome2I18n: { [key: string]: timer.Locale } = { 'fr': 'fr', 'fr-CA': 'fr', 'fr-CH': 'fr', + 'ar': 'ar', + 'ru': 'ru', + 'tr': 'tr', + 'pl': 'pl', } -const translationChrome2I18n: { [key: string]: timer.TranslatingLocale } = { +const translationChrome2I18n: { [key: string]: tt4b.TranslatingLocale } = { ko: 'ko', - pl: 'pl', it: 'it', sv: 'sv', fi: 'fi', da: 'da', hr: 'hr', id: 'id', - tr: 'tr', cs: 'cs', ro: 'ro', nl: 'nl', @@ -62,21 +64,22 @@ const translationChrome2I18n: { [key: string]: timer.TranslatingLocale } = { * Codes returned by getUILanguage() are defined by Chrome browser * @see https://github.com/unicode-cldr/cldr-localenames-modern/blob/master/main/en/languages.json * But supported locale codes in Chrome extension - * @see https://developer.chrome.com/docs/extensions/reference/api/i18n#locales + * @see https://developer.chrome.com/docs/extensions/reference/i18n#locales * * They are different, so translate */ -export function chromeLocale2ExtensionLocale(chromeLocale: string): timer.Locale { - if (!chromeLocale) { - return defaultLocale - } - return chrome2I18n[chromeLocale] || FEEDBACK_LOCALE +function chromeLocale2ExtensionLocale(chromeLocale: string): tt4b.Locale { + if (!chromeLocale) return FEEDBACK_LOCALE + const code2 = chromeLocale.substring(0, 2) + return chrome2I18n[chromeLocale] ?? chrome2I18n[code2] ?? FEEDBACK_LOCALE } +const browserUiLocale: tt4b.Locale = chromeLocale2ExtensionLocale(getUILanguage()) + /** * @since 0.9.0 */ -export let localeSameAsBrowser: timer.Locale = chromeLocale2ExtensionLocale(getUILanguage()) +export const localeSameAsBrowser: tt4b.Locale = browserUiLocale /** * @since 1.5.0 @@ -92,16 +95,16 @@ export function isTranslatingLocale(): boolean { /** * Real locale with locale option */ -export let locale: timer.Locale = localeSameAsBrowser +export let locale: tt4b.Locale = browserUiLocale -function cvtOption2Locale(option: timer.option.LocaleOption): timer.Locale { +export function cvtOption2Locale(option: tt4b.option.LocaleOption): tt4b.Locale { if (!option || option === 'default') { return chromeLocale2ExtensionLocale(getUILanguage()) } return option } -export function handleLocaleOption(option: timer.option.LocaleOption) { +export function handleLocaleOption(option: tt4b.option.LocaleOption) { locale = cvtOption2Locale(option) setLocale(locale) @@ -113,14 +116,14 @@ export function handleLocaleOption(option: timer.option.LocaleOption) { * @since 0.8.0 */ export async function initLocale() { - const option = await optionHolder.get() - handleLocaleOption(option?.locale) + const option = await getOption() + handleLocaleOption(option.locale) } function tryGetOriginalI18nVal( messages: Messages, keyPath: I18nKey, - specLocale?: timer.Locale + specLocale?: tt4b.Locale ) { try { return keyPath(messages[specLocale || locale] as MessageType) @@ -129,10 +132,10 @@ function tryGetOriginalI18nVal( } } -export function getI18nVal( +function getI18nVal( messages: Messages, keyPath: I18nKey, - specLocale?: timer.Locale + specLocale?: tt4b.Locale ): string { const result = tryGetOriginalI18nVal(messages, keyPath, specLocale) || keyPath(messages[FEEDBACK_LOCALE] as MessageType) @@ -140,7 +143,7 @@ export function getI18nVal( return typeof result === 'string' ? result : JSON.stringify(result) } -export type TranslateProps = { +type TranslateProps = { key: I18nKey, param?: { [key: string]: string | number } } @@ -155,7 +158,7 @@ function fillWithParam(result: string, param: { [key: string]: string | number } return result } -export function t(messages: Messages, props: TranslateProps, specLocale?: timer.Locale): string { +export function t(messages: Messages, props: TranslateProps, specLocale?: tt4b.Locale): string { const { key, param } = props const result: string = getI18nVal(messages, key, specLocale) return param ? fillWithParam(result, param) : result @@ -170,7 +173,6 @@ const findParamAndReplace = (resultArr: I18nResultItem[], [key, val const temp: I18nResultItem[] = [] resultArr.forEach((item) => { if (typeof item === 'string' && item.includes(paramPlacement)) { - // 将 string 替换成具体的 VNode let splits: I18nResultItem[] = (item as string).split(paramPlacement) splits = splits.reduce[]>((left, right) => left.length ? left.concat(value, right) : left.concat(right), []) temp.push(...splits) @@ -181,7 +183,7 @@ const findParamAndReplace = (resultArr: I18nResultItem[], [key, val return temp } -export type NodeTranslateProps = { +type NodeTranslateProps = { key: I18nKey, param: { [key: string]: I18nResultItem } } @@ -200,13 +202,7 @@ export const tN = (messages: Messages, props: No return resultArr } -export const getNumberSeparator = () => { - try { - const jsLocale = locale?.substring(0, 2) - const str = (1000).toLocaleString(jsLocale) - if (str.length === 4) return '' - return str.substring(1, 2) - } catch { - return '' - } +export const tNum = (val: number) => { + const jsLocale = locale?.substring(0, 2) + return val.toLocaleString(jsLocale) } diff --git a/src/i18n/message/app/about-resource.json b/src/i18n/message/app/about-resource.json index a26e85e1b..5de54704c 100644 --- a/src/i18n/message/app/about-resource.json +++ b/src/i18n/message/app/about-resource.json @@ -69,19 +69,19 @@ }, "de": { "label": { - "name": "Namen", - "version": "Aktuelle Version", + "name": "Titel", + "version": "Version", "website": "Offizielle Website", "installation": "Installation", - "thanks": "Dank", + "thanks": "Danksagungen", "privacy": "Datenschutz", "license": "Lizenz", - "support": "Kundendienst" + "support": "Support" }, "text": { - "greet": "Gefällt Ihnen die Erweiterung?", - "rate": "Mit 5 Sternen bewerten!", - "feedback": "Feedback willkommen!" + "greet": "Gefällt dir diese Erweiterung?", + "rate": "Bewerte uns mit 5 Sternen, um uns zu unterstützen!", + "feedback": "Sag uns deine Meinung!" } }, "ja": { @@ -130,9 +130,9 @@ "support": "Soutien" }, "text": { - "greet": "Vous aimez cette extension?", - "rate": "Notez-la 5 étoiles pour nous soutenir!", - "feedback": "Vos retours et suggestions sont les bienvenus!" + "greet": "Vous aimez cette extension ?", + "rate": "Notez-la 5 étoiles pour nous soutenir !", + "feedback": "Vos retours et suggestions sont les bienvenus !" } }, "es": { @@ -185,5 +185,56 @@ "rate": "قيِّمها بـ 5 نجوم لتساعد الآخرين على معرفتها~~", "feedback": "أيضًا، نرحب بتقديم ملاحظاتك وطلبات المميزات الجديدة !!" } + }, + "tr": { + "label": { + "name": "Proje Adı", + "version": "Versiyon", + "website": "Web Sitesi", + "installation": "Kurulabilecek Platformlar", + "thanks": "Kullanılan Teknolojiler", + "privacy": "Gizlilik Politikası", + "license": "Lisans", + "support": "Destek" + }, + "text": { + "greet": "Bu uzantıyı beğendiniz mi?", + "rate": "Bizi desteklemek için 5 yıldız verin!", + "feedback": "Fikirleriniz bizi daha iyi yapıyor!" + } + }, + "pl": { + "label": { + "name": "Nazwa", + "version": "Obecna wersja", + "website": "Oficjalna strona", + "installation": "Strona instalacji", + "thanks": "Podziękowania", + "privacy": "Polityka prywatności", + "license": "Licencja Open-source", + "support": "Wsparcie techniczne" + }, + "text": { + "greet": "Lubisz to rozszerzenie?", + "rate": "Oceń 5 gwiazdek, aby pomóc innym dowiedzieć się o tym~~", + "feedback": "Zapraszamy do przesłania opinii i próśb o funkcje !!" + } + }, + "it": { + "label": { + "name": "Nome", + "version": "Versione", + "website": "Sito Web", + "installation": "Installa", + "thanks": "Riconoscimenti", + "privacy": "Informativa Privacy", + "license": "Licenza", + "support": "Supporto" + }, + "text": { + "greet": "Ti piace questa estensione?", + "rate": "Valuta 5 stelle per supportarci!", + "feedback": "Le tue idee ci rendono migliori!" + } } } \ No newline at end of file diff --git a/src/i18n/message/app/analysis-resource.json b/src/i18n/message/app/analysis-resource.json index 71a2606da..3b5841056 100644 --- a/src/i18n/message/app/analysis-resource.json +++ b/src/i18n/message/app/analysis-resource.json @@ -217,6 +217,10 @@ } }, "de": { + "target": { + "site": "Webseite", + "cate": "Kategorie" + }, "common": { "focusTotal": "Gesamte Browsingzeit", "visitTotal": "Gesamtbesuche", @@ -275,6 +279,10 @@ } }, "ru": { + "target": { + "site": "Сайт", + "cate": "Категория" + }, "common": { "focusTotal": "Общее время просмотра", "visitTotal": "Всего посещений", @@ -331,5 +339,98 @@ "focusTitle": "اتجاهات وقت التصفح", "visitTitle": "زيارة الاتجاهات" } + }, + "tr": { + "target": { + "site": "Web Sitesi", + "cate": "Kategori" + }, + "common": { + "focusTotal": "Toplam gezinme süresi", + "visitTotal": "Toplam Ziyaretler", + "merged": "Birleştirilmiş", + "virtual": "Sanal", + "hostPlaceholder": "Site veya kategoriyi seçin", + "emptyDesc": "Seçilen öğe yok" + }, + "summary": { + "title": "Özet", + "day": "Toplam aktif gün", + "firstDay": "İlk ziyaret {value}", + "calendarTitle": "Son Haftalarda Gerçekleştirilen Aktiviteler" + }, + "trend": { + "title": "Eğilimler", + "activeDay": "Aktif Günler", + "totalDay": "Periyot günleri", + "maxFocus": "Günlük maksimum gezinme süresi", + "averageFocus": "Günlük ortalama gezinme süresi", + "maxVisit": "Günlük maksimum ziyaret sayısı", + "averageVisit": "Günlük ortalama ziyaret sayısı", + "focusTitle": "Gezinme Zamanı Eğilimleri", + "visitTitle": "Ziyaret Eğilimleri" + } + }, + "pl": { + "target": { + "site": "Strona", + "cate": "Kategoria" + }, + "common": { + "focusTotal": "Całkowity czas przeglądania", + "visitTotal": "Łącznie wizyt", + "merged": "Złączone", + "virtual": "Wirtualne", + "hostPlaceholder": "Wyszukaj stronę do analizy", + "emptyDesc": "Nie wybrano strony" + }, + "summary": { + "title": "Podsumowanie", + "day": "Całkowita liczba dni aktywnych", + "firstDay": "Pierwsza wizyta {value}", + "calendarTitle": "Aktywność w ostatnich tygodniach" + }, + "trend": { + "title": "Trendy", + "activeDay": "Aktywnych dni", + "totalDay": "Okres dni", + "maxFocus": "Maksymalny dzienny czas przeglądania", + "averageFocus": "Średni dzienny czas przeglądania", + "maxVisit": "Maksymalna dzienna ilość wizyt", + "averageVisit": "Średnia dzienna ilość wizyt", + "focusTitle": "Trendy czasu przeglądania", + "visitTitle": "Trendy wizyt" + } + }, + "it": { + "target": { + "site": "Sito web", + "cate": "Categoria" + }, + "common": { + "focusTotal": "Tempo totale di navigazione", + "visitTotal": "Visite totali", + "merged": "Uniti", + "virtual": "Virtuale", + "hostPlaceholder": "Cerca un sito da analizzare", + "emptyDesc": "Nessun sito selezionato" + }, + "summary": { + "title": "Riepilogo", + "day": "Giorni attivi in totale", + "firstDay": "Prima visita {value}", + "calendarTitle": "Attività nelle ultime settimane" + }, + "trend": { + "title": "Tendenze", + "activeDay": "Giorni attivi", + "totalDay": "Periodo: Giorni", + "maxFocus": "Tempo di navigazione massimo giornaliero", + "averageFocus": "Tempo medio di navigazione giornaliero", + "maxVisit": "Visite massime giornaliere", + "averageVisit": "Visite medie giornaliere", + "focusTitle": "Tendenze di Navigazione nel periodo", + "visitTitle": "Tendenze Di Visite" + } } } \ No newline at end of file diff --git a/src/i18n/message/app/dashboard-resource.json b/src/i18n/message/app/dashboard-resource.json index 23c25849f..37206c034 100644 --- a/src/i18n/message/app/dashboard-resource.json +++ b/src/i18n/message/app/dashboard-resource.json @@ -76,38 +76,48 @@ }, "ja": { "heatMap": { - "title0": "過去1年間に {hour} 時間以上オンラインで過ごした", - "title1": "過去 1 年間にオンラインで費やした時間は 1 時間未満" + "title0": "去年は {hour} 時間以上閲覧した", + "title1": "過去1年間の閲覧時間は1時間未満です" }, "topK": { "title": "過去 {day} 日間に最も拜訪された TOP {k}" }, "indicator": { - "installedDays": "使用 {number} 日", + "installedDays": "{number}日間使用しました", "visitCount": "{site} つのサイトへの合計 {visit} 回の拜訪", "browsingTime": "{minute} 分以上ウェブを閲覧する", "mostUse": "{start}:00 から {end}:00 までのお気に入りのインターネットアクセス" }, "monthOnMonth": { "title": "閲覧時間の月間推移" + }, + "timeline": { + "focusScore": "フォーカス度" } }, "pt_PT": { "heatMap": { - "title0": "Navegou {hour}h no último ano", - "title1": "Navegou <1h no último ano" + "title0": "Navegou por {hour} no último ano", + "title1": "Navegou menos que 1 hora no último ano" }, "topK": { - "title": "TOP {k} mais visitados em {day} dias" + "title": "TOP {k} mais visitados nos últimos {day} dias" }, "indicator": { "installedDays": "Instalado há {number} dias", - "visitCount": "{visit} visitas a {site} sites", - "browsingTime": "Navegou {minute} min", - "mostUse": "Prefere navegar entre {start}h-{end}h" + "visitCount": "Visitou sites {site} {visit} vezes", + "browsingTime": "Navegou mais de {minute} minutos", + "mostUse": "Prefere navegar entre {start} h às {end} h" }, "monthOnMonth": { "title": "Tendência mensal de tempo de navegação" + }, + "timeline": { + "title": "Linha do tempo dos últimos {n} dias", + "busyScore": "Ocupado", + "busyScoreDesc": "Relacionado ao tempo de navegação total e o número de sites visitados por hora. Veja código-fonte para a fórmula", + "focusScore": "Focado", + "focusScoreDesc": "Relacionado a contagem do tempo contínuo total navegado no mesmo site. Veja o código-fonte para a fórmula do cálculo" } }, "uk": { @@ -126,6 +136,13 @@ }, "monthOnMonth": { "title": "Порівняння часу перегляду останніх місяців" + }, + "timeline": { + "title": "Хронологія останніх {n} днів", + "busyScore": "Зайнятість", + "busyScoreDesc": "Загальний час перегляду і кількість вебсайтів за годину. Формулу обчислення можна переглянути в програмному коді.", + "focusScore": "Зосередженість", + "focusScoreDesc": "Загальний час безперервного перегляду одного вебсайту. Формулу обчислення можна переглянути в програмному коді." } }, "es": { @@ -144,6 +161,13 @@ }, "monthOnMonth": { "title": "Tendencia mes a mes del tiempo de navegación" + }, + "timeline": { + "title": "Línea de tiempo de los últimos {n} días", + "busyScore": "Ocupación", + "busyScoreDesc": "Relacionado con el tiempo total de navegación y el número de sitios web por hora. Vea el código fuente para la fórmula usada", + "focusScore": "Enfoque", + "focusScoreDesc": "Relacionado con el tiempo total de navegación continua en la misma página web. Vea el código fuente para la fórmula de cálculo" } }, "de": { @@ -162,11 +186,18 @@ }, "monthOnMonth": { "title": "Monatlicher Trend der Browsing-Zeit" + }, + "timeline": { + "title": "Zeitleiste der letzten {n} Tage", + "busyScore": "Geschäftigkeit", + "busyScoreDesc": "Verwandt mit der gesamten Browsingzeit und der Anzahl der Webseiten pro Stunde. Siehe Quellcode für Berechnungsformel", + "focusScore": "Fokussierung", + "focusScoreDesc": "Verwandt mit der anhaltenden Browsingzeit auf derselben Webseite. Siehe Quellcode für Berechnungsformel" } }, "fr": { "heatMap": { - "title0": "Plus de {hour} heures parcourues au cours de l'année dernière", + "title0": "Visité pendant plus de {hour} heures durant l'année dernière", "title1": "Parcouru moins d'une heure l'année dernière" }, "topK": { @@ -174,12 +205,19 @@ }, "indicator": { "installedDays": "Installé depuis {number} jours", - "visitCount": "Visité {site} sites Web {visit} fois", - "browsingTime": "Parcouru pendant {minute} minutes", - "mostUse": "Navigation favorite entre {start} et {end}" + "visitCount": "{site} sites visités {visit} fois", + "browsingTime": "Visité pendant {minute} minutes", + "mostUse": "Navigation la plus fréquente entre {start} et {end} heure" }, "monthOnMonth": { "title": "Tendance mensuelle du temps de navigation" + }, + "timeline": { + "title": "Chronologie des derniers {n} jours", + "busyScore": "Niveau d'occupation", + "busyScoreDesc": "En rapport avec le temps total de navigation et le nombre de sites visités par heure. Voir le code source pour la formule du calcul", + "focusScore": "Niveau de concentration", + "focusScoreDesc": "Lié à la durée totale de la navigation continue sur le même site. Voir le code source pour la formule du calcul" } }, "ru": { @@ -198,6 +236,13 @@ }, "monthOnMonth": { "title": "Время просмотра за последние 30 дней" + }, + "timeline": { + "title": "Лента времени последних {n} дней", + "busyScore": "Занятость", + "busyScoreDesc": "Относится к общему времени просмотра и количеству веб-сайтов в час. Смотрите исходный код для формулы расчета", + "focusScore": "Сфокусированность", + "focusScoreDesc": "Относится к общему времени непрерывного просмотра того же веб-сайта. Смотрите исходный код для формулы расчета" } }, "ar": { @@ -217,5 +262,80 @@ "monthOnMonth": { "title": "اتجاه وقت التصفح من شهر إلى شهر" } + }, + "tr": { + "heatMap": { + "title0": "Geçen yıldan {hour} saat daha fazla gezindiniz", + "title1": "Geçen yıl 1 saatten daha az gezindiniz" + }, + "topK": { + "title": "Son {day} günde en çok ziyaret ettiğin {k} site" + }, + "indicator": { + "installedDays": "{number} gündür kurulu", + "visitCount": "{site} web sitelerini {visit} kez ziyaret ettin", + "browsingTime": "{minute} dakikadan fazla göz attın", + "mostUse": "{start} ile {end} arası favori gezinti saatlerin" + }, + "monthOnMonth": { + "title": "Aylık gezinme süresi eğilimin" + }, + "timeline": { + "title": "Son {n} günün zaman çizelgesi", + "busyScore": "Yoğunluk", + "busyScoreDesc": "Toplam gezinme süresi ve saat başına ziyaret edilen web sitesi sayısı ile ilgilidir. Hesaplama formülü için kaynak koduna bakın", + "focusScore": "Odaklanma", + "focusScoreDesc": "Aynı web sitesinde sürekli gezinme toplam süresi ile ilgilidir. Hesaplama formülü için kaynak koduna bakın" + } + }, + "pl": { + "heatMap": { + "title0": "Przeglądano przez {hour} godzin w zeszłym roku", + "title1": "Przeglądano mniej niż 1 godzinę w ubiegłym roku" + }, + "topK": { + "title": "TOP {k} najczęściej odwiedzanych stron w ostatnich {day} dniach" + }, + "indicator": { + "installedDays": "Zainstalowane przez {number} dni", + "visitCount": "Odwiedzono {site} różnych stron, łącznie {visit} razy", + "browsingTime": "Przeglądano przez {minute} minut(y)", + "mostUse": "Najchętniej przeglądano w godzinach od {start} do {end}" + }, + "monthOnMonth": { + "title": "Miesięczny trend czasu przeglądania" + }, + "timeline": { + "title": "Oś czasu ostatnich {n} dni", + "busyScore": "Aktywność", + "busyScoreDesc": "Powiązana z całkowitym czasem przeglądania i liczbą stron odwiedzonych na godzinę. Wzór znajduje się w kodzie źródłowym", + "focusScore": "Skupienie", + "focusScoreDesc": "Powiązane z całkowitym czasem ciągłego przebywania na tej samej stronie. Wzór znajduje się w kodzie źródłowym" + } + }, + "it": { + "heatMap": { + "title0": "Navigato per {hour} ore nell'ultimo anno", + "title1": "Navigato meno di 1 ora l'anno scorso" + }, + "topK": { + "title": "TOP {k} più visitati negli ultimi {day} giorni" + }, + "indicator": { + "installedDays": "Installato per {number} giorni", + "visitCount": "Visitato {site} {visit} volte", + "browsingTime": "Navigato per {minute} minuti", + "mostUse": "Navigazione preferita tra le {start} e le {end}" + }, + "monthOnMonth": { + "title": "Tendenza del tempo di navigazione mese per mese" + }, + "timeline": { + "title": "Cronologia degli ultimi {n} giorni", + "busyScore": "Frenesia", + "busyScoreDesc": "Relativo al tempo totale di navigazione e al numero di siti web per ora. Guarda il codice sorgente per la formula di calcolo", + "focusScore": "Focalizzazione", + "focusScoreDesc": "Relativo al tempo totale di navigazione continua dello stesso sito web. Guarda il codice sorgente per la formula di calcolo" + } } } \ No newline at end of file diff --git a/src/i18n/message/app/data-manage-resource.json b/src/i18n/message/app/data-manage-resource.json index f0e04ad62..0ab562c98 100644 --- a/src/i18n/message/app/data-manage-resource.json +++ b/src/i18n/message/app/data-manage-resource.json @@ -3,6 +3,7 @@ "totalMemoryAlert": "浏览器为每个扩展提供 {size}MB 来存储本地数据", "totalMemoryAlert1": "无法确定浏览器允许的最大可用内存", "usedMemoryAlert": "当前已使用 {size}MB", + "idbAlert": "可以将数据移动到 IndexedDB 来减少存储空间占用", "operationAlert": "您可以删除那些无关紧要的数据，来减小内存空间", "filterItems": "数据筛选", "filterFocus": "当日阅览时间在 {start} 秒至 {end} 秒之间。", @@ -26,12 +27,16 @@ "paramError": "参数错误，请检查！", "deleteConfirm": "共筛选出 {count} 条数据，是否全部删除？", "migrationAlert": "使用导入/导出在不同浏览器之间迁移数据", - "importError": "文件格式错误" + "importError": "文件格式错误", + "exportData": "导出数据", + "restoreData": "导入数据", + "restoreFromOther": "导入 {ext} 数据" }, "zh_TW": { "totalMemoryAlert": "瀏覽器為每個擴充功能提供 {size}MB 本地儲存空間", "totalMemoryAlert1": "無法取得瀏覽器允許的最大儲存空間", "usedMemoryAlert": "目前已使用 {size}MB", + "idbAlert": "將追蹤資料移到IndexedDB以釋放儲存空間", "operationAlert": "您可以刪除不重要的資料來釋放儲存空間", "filterItems": "資料篩選", "filterFocus": "當日瀏覽時間：{start}～{end} 秒", @@ -61,6 +66,7 @@ "totalMemoryAlert": "The browser provides {size}MB to store local data for each extension", "totalMemoryAlert1": "Unable to determine the maximum storage available allowed by the browser", "usedMemoryAlert": "{size}MB is currently used", + "idbAlert": "Move tracking data to IndexedDB to reduce storage usage", "operationAlert": "You can delete those unimportant data to reduce storage usage", "filterItems": "Filter data", "filterFocus": "The browsing time of the day is between {start} seconds and {end} seconds", @@ -84,7 +90,10 @@ "paramError": "The parameter is wrong, please check!", "deleteConfirm": "A total of {count} records have been filtered out. Do you want to delete them all?", "migrationAlert": "Migrate data between browsers using import and export", - "importError": "Wrong file extension" + "importError": "Wrong file extension", + "exportData": "Export data", + "restoreData": "Restore data", + "restoreFromOther": "Restore from {ext}" }, "ja": { "totalMemoryAlert": "ブラウザは、データを保存するために各拡張機能に {size}MB のメモリを提供します", @@ -105,7 +114,7 @@ "conflictTip": "インポートされたデータがローカルデータと競合する場合の対処方法", "overwrite": "上書き", "accumulate": "累積する", - "imported": "輸入された", + "imported": "インポート済み", "local": "ローカル", "fileNotSelected": "ファイルが選択されていません", "conflictNotSelected": "競合する解像度が選択されていません" @@ -148,6 +157,7 @@ "totalMemoryAlert": "Браузер надає кожному розширенню {size} МБ для зберігання локальних даних", "totalMemoryAlert1": "Не вдалося визначити максимальну кількість доступної пам'яті браузера", "usedMemoryAlert": "Використано {size} МБ", + "idbAlert": "Перемістити дані відстеження до IndexedDB для зменшення використання сховища", "operationAlert": "Ви можете видалити ці неважливі дані, щоб зменшити використання пам'яті", "filterItems": "Фільтрувати дані", "filterFocus": "Час перегляду для дня – між {start} секунд і {end} секунд", @@ -171,7 +181,10 @@ "paramError": "Хибний параметр. Будь ласка, перевірте!", "deleteConfirm": "Всього відфільтровано {count} записів. Ви хочете видалити їх усі?", "migrationAlert": "Переносьте дані між браузерами за допомогою імпорту й експорту", - "importError": "Неправильне розширення файлу" + "importError": "Неправильне розширення файлу", + "exportData": "Експортувати дані", + "restoreData": "Відновити дані", + "restoreFromOther": "Відновити з {ext}" }, "es": { "totalMemoryAlert": "El navegador proporciona {size}MB para almacenar datos locales para cada extensión", @@ -206,6 +219,7 @@ "totalMemoryAlert": "Der Browser stellt {size}MB zur Verfügung, um lokale Daten für jede Erweiterung zu speichern", "totalMemoryAlert1": "Der vom Browser maximal verfügbare Speicher kann nicht ermittelt werden", "usedMemoryAlert": "Derzeit werden {size}MB verwendet", + "idbAlert": "Bewege Tracking Daten nach IndexedDB um Speichernutzung zu Reduzieren", "operationAlert": "Sie können diese unwichtigen Daten löschen, um den Speicherverbrauch zu reduzieren", "filterItems": "Daten filtern", "filterFocus": "Die Browsing-Zeit am Tag liegt zwischen {start} Sekunden und {end} Sekunden", @@ -216,7 +230,7 @@ "step2": "Daten bestätigen", "dataSource": "Datenquelle", "file": "Datendatei", - "selectFileBtn": "Wählen", + "selectFileBtn": "Auswählen", "conflictType": "Konfliktlösung", "conflictTip": "Was tun, wenn importierte Daten mit lokalen Daten in Konflikt geraten", "overwrite": "Überschreiben", @@ -229,15 +243,19 @@ "paramError": "Parameterfehler, bitte überprüfen!", "deleteConfirm": "Insgesamt wurden {count} Datensätze herausgefiltert. Möchten Sie sie alle löschen?", "migrationAlert": "Migrieren Sie Daten zwischen Browsern mithilfe von Import und Export", - "importError": "Falsche Dateierweiterung" + "importError": "Falsche Dateierweiterung", + "exportData": "Daten exportieren", + "restoreData": "Daten wiederherstellen", + "restoreFromOther": "Wiederherstellen aus {ext}" }, "fr": { "totalMemoryAlert": "Le navigateur fournit {size}Mo pour stocker des données locales pour chaque extension", "totalMemoryAlert1": "Impossible de déterminer la mémoire maximale disponible autorisée par le navigateur", "usedMemoryAlert": "{size}Mo sont actuellement utilisés", + "idbAlert": "Déplacer les données de suivi vers IndexedDB pour réduire l'utilisation du stockage", "operationAlert": "Vous pouvez supprimer ces données sans importance afin de réduire l'utilisation de la mémoire", "filterItems": "Filtrer les données", - "filterFocus": "Le temps de navigation de la journée est compris entre {start} secondes et {end} secondes", + "filterFocus": "Le temps de navigation de la journée est compris entre {start} et {end} secondes", "filterTime": "Le nombre de visites du jour se situe entre {start} et {end}", "filterDate": "Enregistré entre {picker}", "importOther": { @@ -258,12 +276,16 @@ "paramError": "Le paramètre est incorrect, veuillez vérifier!", "deleteConfirm": "Un total de {count} enregistrements a été filtré. Souhaitez-vous tous les supprimer ?", "migrationAlert": "Migrer les données entre les navigateurs à l'aide de l'importation et de l'exportation", - "importError": "Mauvaise extension de fichier" + "importError": "Mauvaise extension de fichier", + "exportData": "Exporter les données", + "restoreData": "Restaurer les données", + "restoreFromOther": "Restaurer depuis {ext}" }, "ru": { "totalMemoryAlert": "Браузер предоставляет {size}MB для хранения локальных данных по каждому расширению", "totalMemoryAlert1": "Невозможно определить максимальный объём памяти, доступный браузером", "usedMemoryAlert": "{size}MB сейчас используется", + "idbAlert": "Переместить данные для отслеживания в IndexedDB для уменьшения использования хранилища", "operationAlert": "Вы можете удалить эти неважные данные для уменьшения использования памяти", "filterItems": "Фильтровать данные", "filterFocus": "Время просмотра дня между {start} секунд и {end} секунд", @@ -317,5 +339,101 @@ "deleteConfirm": "تم تصفية إجمالي {count} من السجلات. هل تريد حذفها جميعًا؟", "migrationAlert": "نقل البيانات بين المتصفحات باستخدام الاستيراد والتصدير", "importError": "ملحق الملف خاطئ" + }, + "tr": { + "totalMemoryAlert": "Tarayıcı, her uzantı için yerel verileri depolamak üzere {size} MB alan sağlar", + "totalMemoryAlert1": "Tarayıcı tarafından izin verilen maksimum depolama alanı belirlenemiyor", + "usedMemoryAlert": "Şu anda {size} MB kullanılıyor", + "idbAlert": "Depolama kullanımını azaltmak için verilerinizi IndexedDB'ye taşı", + "operationAlert": "Depolama alanını azaltmak için önemsiz verileri silebilirsiniz", + "filterItems": "Verileri filtrele", + "filterFocus": "Günün gezinme süresi {start} saniye ile {end} saniye arasındadır", + "filterTime": "Günün ziyaret sayısı {start} ile {end} arasındadır", + "filterDate": "{picker} arasında kaydedildi", + "importOther": { + "step1": "Verileri seçin", + "step2": "Verileri onaylayın", + "dataSource": "Veri kaynağı", + "file": "Veri dosyası", + "selectFileBtn": "Seçin", + "conflictType": "Çakışma çözümü", + "conflictTip": "İçe aktarılan veriler yerel verilerle çakışırsa ne yapmalı", + "overwrite": "Üzerine yaz", + "accumulate": "Biriktir", + "imported": "İçe aktarılan", + "local": "Yerel", + "fileNotSelected": "Dosya seçilmedi", + "conflictNotSelected": "Çakışma çözümü seçilmedi" + }, + "paramError": "Parametre yanlış, lütfen kontrol edin!", + "deleteConfirm": "Toplam {count} kayıt filtrelenmiştir. Hepsini silmek istiyor musunuz?", + "migrationAlert": "İçe aktarma ve dışa aktarma özelliğini kullanarak tarayıcılar arasında verinizi aktarın", + "importError": "Yanlış dosya uzantısı" + }, + "pl": { + "totalMemoryAlert": "Przeglądarka udostępnia {size} MB do przechowywania lokalnych danych dla każdego rozszerzenia", + "totalMemoryAlert1": "Nie można określić maksymalnej ilości pamięci udostępnianej przez przeglądarkę", + "usedMemoryAlert": "{size} MB jest obecnie używanych", + "idbAlert": "Przenieś dane do IndexedDB, aby zmniejszyć zużycie pamięci", + "operationAlert": "Możesz usunąć te nieważne dane, aby zmniejszyć zużycie pamięci", + "filterItems": "Filtruj dane", + "filterFocus": "Czas przeglądania w ciągu dnia wynosi od {start} do {end} sekund", + "filterTime": "Liczba odwiedzin w ciągu dnia wynosi od {start} do {end}", + "filterDate": "Zebrane pomiędzy {picker}", + "importOther": { + "step1": "Wybierz dane", + "step2": "Potwierdź dane", + "dataSource": "Źródło danych", + "file": "Plik danych", + "selectFileBtn": "Wybierz", + "conflictType": "Rozwiązywanie konfliktów", + "conflictTip": "Co zrobić, jeśli importowane dane są sprzeczne z lokalnymi danymi", + "overwrite": "Nadpisz", + "accumulate": "Zgromadź", + "imported": "Zaimportowano", + "local": "Lokalne", + "fileNotSelected": "Nie wybrano pliku", + "conflictNotSelected": "Rozwiązywanie konfliktów nie zostało zaznaczone" + }, + "paramError": "Sprawdź poprawność parametrów!", + "deleteConfirm": "Wyfiltrowano w sumie {count} wpisów. Czy chcesz je usunąć?", + "migrationAlert": "Przenieś dane między przeglądarkami za pomocą importu i eksportu", + "importError": "Błędne rozszerzenie pliku", + "exportData": "Eksportuj dane", + "restoreData": "Przywróć dane", + "restoreFromOther": "Przywróć z {ext}" + }, + "it": { + "totalMemoryAlert": "Il browser fornisce {size}MB per memorizzare i dati locali per ogni estensione", + "totalMemoryAlert1": "Impossibile determinare la memoria massima disponibile consentita dal browser", + "usedMemoryAlert": "{size}MB è attualmente in uso", + "idbAlert": "Sposta i dati di tracciamento su IndexedDB per ridurre l'utilizzo dello storage", + "operationAlert": "È possibile eliminare i dati non importanti per ridurre l'utilizzo della memoria", + "filterItems": "Filtro dati", + "filterFocus": "L'ora di navigazione del giorno è tra {start} secondi e {end} secondi", + "filterTime": "Il numero di visite per il giorno è compreso tra {start} e {end}", + "filterDate": "Registrato tra {picker}", + "importOther": { + "step1": "Seleziona dati", + "step2": "Conferma dei dati", + "dataSource": "Origine dati", + "file": "File di dati", + "selectFileBtn": "Seleziona", + "conflictType": "Risoluzione dei conflitti", + "conflictTip": "Cosa fare se i dati importati sono in conflitto con i dati locali", + "overwrite": "Sovrascrivere", + "accumulate": "Accumulare", + "imported": "Importato", + "local": "Locali", + "fileNotSelected": "File non selezionato", + "conflictNotSelected": "Risoluzione dei conflitti non selezionata" + }, + "paramError": "Il parametro è errato, per favore controlla!", + "deleteConfirm": "Un totale di {count} record sono stati filtrati. Vuoi eliminarli tutti?", + "migrationAlert": "Migrare i dati tra browser utilizzando importazione ed esportazione", + "importError": "Estensione del file sbagliata", + "exportData": "Esporta dati", + "restoreData": "Ripristino dati", + "restoreFromOther": "Ripristina da {ext}" } } \ No newline at end of file diff --git a/src/i18n/message/app/data-manage.ts b/src/i18n/message/app/data-manage.ts index 95fc17a18..c1abbec0c 100644 --- a/src/i18n/message/app/data-manage.ts +++ b/src/i18n/message/app/data-manage.ts @@ -11,6 +11,7 @@ export type DataManageMessage = { totalMemoryAlert: string totalMemoryAlert1: string usedMemoryAlert: string + idbAlert: string operationAlert: string filterItems: string filterFocus: string @@ -33,8 +34,11 @@ export type DataManageMessage = { fileNotSelected: string conflictNotSelected: string } & { - [resolution in timer.imported.ConflictResolution]: string + [resolution in tt4b.imported.ConflictResolution]: string } + exportData: string + restoreData: string + restoreFromOther: string } const _default: Messages = resource diff --git a/src/i18n/message/app/habit-resource.json b/src/i18n/message/app/habit-resource.json index 5bf107794..54b156163 100644 --- a/src/i18n/message/app/habit-resource.json +++ b/src/i18n/message/app/habit-resource.json @@ -270,18 +270,18 @@ "focusAverage": "Tagesdurchschnitt {value}" }, "period": { - "title": "Gewohnheiten jeden Augenblick", - "busiest": "Die geschäftigste Zeit des Tages", - "idle": "Längste Leerlaufzeit", + "title": "Nutzung nach Tageszeit", + "busiest": "Aktivste Tageszeit", + "idle": "Längste Ruhezeit", "chartType": { - "average": "Täglicher Durchschnitt", + "average": "Tagesdurchschnitt", "trend": "Trend", "stack": "Stapel" }, "sizes": { "fifteen": "Pro 15 Minuten", "halfHour": "Pro halbe Stunde", - "hour": "Pro eine Stunde", + "hour": "Pro Stunde", "twoHour": "Pro zwei Stunden" } }, @@ -416,5 +416,119 @@ "siteCount": "عدد المواقع" } } + }, + "tr": { + "common": { + "focusAverage": "Günde ortalama {value}" + }, + "period": { + "title": "Zaman dilimleri alışkanlığı", + "busiest": "Günün en yoğun saati", + "idle": "En uzun bekleme süresi", + "chartType": { + "average": "Günlük ortalama", + "trend": "Eğilim", + "stack": "Yığın" + }, + "sizes": { + "fifteen": "15 dakikada bir", + "halfHour": "Yarım saat başına", + "hour": "Saat başına", + "twoHour": "İki saat başına" + } + }, + "site": { + "title": "Web sitelerinin alışkanlığı", + "histogramTitle": "En çok ziyaret edilen {n} site", + "exclusiveToday": "Bugünün verileri ortalamaya dahil edilmemiştir", + "countTotal": "Toplam ziyaret/site sayısı", + "siteAverage": "Günde ortalama {value} web sitesi ziyaret ettin", + "distribution": { + "title": "Günlük ortalama sıklık dağılımı", + "aveTime": "Günlük ortalama gezinme süresi", + "aveVisit": "Günlük ortalama ziyaret sayısı", + "tooltip": "Toplam {value} site" + }, + "trend": { + "title": "Günlük eğilim", + "siteCount": "Web sitesi sayısı" + } + } + }, + "pl": { + "common": { + "focusAverage": "Średnio {value} dziennie" + }, + "period": { + "title": "Nawyki w określonym przedziale czasowym", + "busiest": "Najbardziej aktywny czas dnia", + "idle": "Najdłuższy czas bezczynności", + "chartType": { + "average": "Średnia dzienna", + "trend": "Trend", + "stack": "Stos" + }, + "sizes": { + "fifteen": "Co 15 minut", + "halfHour": "Co pół godziny", + "hour": "Co godzinę", + "twoHour": "Co dwie godziny" + } + }, + "site": { + "title": "Nawyk stron internetowych", + "histogramTitle": "TOP {n} najczęściej odwiedzanych", + "exclusiveToday": "Dzisiejsze dane nie są uwzględniane w średniej", + "countTotal": "Całkowita liczba wizyt/stron", + "siteAverage": "Średnia liczba odwiedzin na stronach {value} dziennie", + "distribution": { + "title": "Dzienny średni rozkład częstotliwości", + "aveTime": "Średni dzienny czas przeglądania", + "aveVisit": "Średnia dzienna liczba odwiedzin", + "tooltip": "Łącznie {value} stron" + }, + "trend": { + "title": "Dzienne trendy", + "siteCount": "Liczba stron" + } + } + }, + "it": { + "common": { + "focusAverage": "{value} medio giornaliera" + }, + "period": { + "title": "Abitudine per periodi di tempo", + "busiest": "Ora più attiva della giornata", + "idle": "Periodo d'inattività più lungo", + "chartType": { + "average": "Media giornaliera", + "trend": "Tendenza", + "stack": "Stack" + }, + "sizes": { + "fifteen": "Per 15 minuti", + "halfHour": "Per mezz'ora", + "hour": "Per un'ora", + "twoHour": "Per due ore" + } + }, + "site": { + "title": "Abitudine dei siti", + "histogramTitle": "TOP {n} più visitati", + "exclusiveToday": "I dati di oggi non sono inclusi nella media", + "countTotal": "Totale visite/siti", + "siteAverage": "Visite medie a {value} siti web al giorno", + "distribution": { + "title": "Distribuzione di frequenza media giornaliera", + "aveTime": "Tempo medio di navigazione giornaliero", + "aveVisit": "Numero medio di visite giornaliere", + "tooltip": "Totale: {value} siti" + }, + "trend": { + "title": "Tendenze quotidiane", + "siteCount": "Conteggio siti web" + } + } } } \ No newline at end of file diff --git a/src/i18n/message/app/help-us-resource.json b/src/i18n/message/app/help-us-resource.json index 68956ce56..c417ed569 100644 --- a/src/i18n/message/app/help-us-resource.json +++ b/src/i18n/message/app/help-us-resource.json @@ -2,10 +2,9 @@ "zh_CN": { "title": "欢迎一起来改善本地化翻译！", "alert": { - "l1": "由于作者的语言能力，该扩展原生只支持简体中文和英语，其他语言要么缺失，要么就严重依赖机器翻译。", - "l2": "为了能够提供更好的用户体验，我将其他语言的翻译任务托管在了 Crowdin 上。Crowdin 是一个对开源软件免费的翻译管理系统。", - "l3": "如果您觉得这个扩展对您有用，并且您愿意完善它的文本翻译的话，可以点击下方按钮前往 Crowdin 上的项目主页。", - "l4": "当某种语言的翻译进度达到 50% 之后，我将会考虑在扩展中支持它。" + "l1": "为了能够提供更好的用户体验，我将除英语外的翻译任务托管在了 Crowdin 上。", + "l2": "如果您觉得这个扩展对您有用，并且您愿意完善它的文本翻译的话，可以点击下方按钮前往 Crowdin 上的项目主页。", + "l3": "当某种语言的翻译进度达到 50% 之后，我将会考虑在扩展中支持它。" }, "button": "前往 Crowdin", "loading": "正在查询翻译进度...", @@ -14,10 +13,9 @@ "en": { "title": "Feel free to help improve the extension's localization translations!", "alert": { - "l1": "Due to the author's language ability, the extension only supports Simplified Chinese and English natively, and other languages are either missing or rely heavily on machine translation.", - "l2": "In order to provide a better user experience, I host the translation tasks for other languages on Crowdin.Crowdin is a translation management system free for open source software.", - "l3": "If you find this extension useful to you and you are willing to improve its translation,you can click the button below to go to the project home page on Crowdin.", - "l4": "When the translation progress of a language reaches 50%, I will consider supporting it in this extension." + "l1": "In order to provide a better user experience, I host the translation tasks on Crowdin.", + "l2": "If you find this extension useful to you and you are willing to improve its translation, you can click the button below to go to the project home page on Crowdin.", + "l3": "When the translation progress of a language reaches 50%, I will consider supporting it in this extension." }, "button": "Go Crowdin", "loading": "Checking translation progress...", @@ -26,10 +24,9 @@ "zh_TW": { "title": "歡迎協助我們完善擴充功能的本地化翻譯！", "alert": { - "l1": "受限於開發者的語言能力，本擴充功能目前僅完整支援簡體中文和英文介面。", - "l2": "其他語言的翻譯可能尚未完成，或仍依賴機器翻譯結果。", - "l3": "若您認為此擴充功能實用且願意協助改善翻譯品質，歡迎點擊下方按鈕前往 Crowdin 翻譯平台參與貢獻。", - "l4": "當任一語言的翻譯進度達 50% 以上時，我們將會在正式版本中新增支援。" + "l1": "為了提供更好的使用者體驗，我將翻譯任務託管在 Crowdin 上。", + "l2": "如果您覺得此擴充功能對您有幫助，且願意協助改善其翻譯，可以點擊下方按鈕前往 Crowdin 上的專案首頁。", + "l3": "當某種語言的翻譯進度達到 50% 時，我會考慮在本擴充功能中支援該語言。" }, "button": "前往 Crowdin 平台", "loading": "正在載入翻譯進度...", @@ -38,10 +35,9 @@ "uk": { "title": "Допоможіть поліпшити переклад розширення!", "alert": { - "l1": "У зв'язку з мовою автора розширення, підтримуються лише спрощена китайська та англійська мови. Інші мови наразі недоступні або потребують перекладу.", - "l2": "Щоб інші користувачі могли зручно користуватися розширенням своєю мовою, переклад можна зробити на платформі Crowdin.", - "l3": "Якщо вам подобається розширення і ви бажаєте поліпшити його переклад, натисніть кнопку нижче, щоб відкрити сторінку проєкту на Crowdin.", - "l4": "Коли прогрес перекладу сягне 50%, цю мову буде активовано в розширенні." + "l1": "Для забезпечення доступності для ширшого кола користувачів я пропоную можливість перекладу на Crowdin.", + "l2": "Якщо вам корисне це розширення і ви бажаєте покращити його переклад, натисніть кнопку нижче, щоб перейти на домашню сторінку проєкту на Crowdin.", + "l3": "Коли прогрес перекладу мови досягне 50%, я розгляну можливість її активації в цьому розширенні." }, "button": "Перейти на Crowdin", "loading": "Перевірка перекладу...", @@ -50,10 +46,9 @@ "es": { "title": "¡Siéntete libre de ayudar a mejorar las traducciones de la extensión!", "alert": { - "l1": "Debido a la capacidad lingüística del autor, la extensión sólo soporta el chino simplificado y el inglés de manera nativa y otros idiomas no se encuentran o dependen en gran medida de la traducción automática.", - "l2": "Con el fin de ofrecer una mejor experiencia a los usuarios, guardo las tareas de traducción de otros idiomas en Crowdin. Crowdin es un sistema de administración de traducciones gratuito para software de código abierto.", - "l3": "Si esta extensión te resulta útil y estás deseas mejorar su traducción, puedes dar clic en el botón de abajo para ir a la página principal del proyecto en Crowdin.", - "l4": "Cuando el progreso de traducción de un idioma llegue a 50%, consideraré añadirlo a esta extensión." + "l1": "Para ofrecer una mejor experiencia de usuario, alojo las tareas de traducción en Crowdin.", + "l2": "Si consideras útil esta extensión y deseas mejorar su traducción, puedes hacer clic en el botón de abajo para ir a la página del proyecto en Crowdin.", + "l3": "Cuando el progreso de traducción de un idioma alcance el 50%, consideraré incluirlo en esta extensión." }, "button": "Ir a Crowdin", "loading": "Comprobando el progreso de la traducción...", @@ -62,10 +57,9 @@ "de": { "title": "Hilf mit die Übersetzungen der Erweiterung zu verbessern!", "alert": { - "l1": "Aufgrund der Sprachfähigkeiten des Autors unterstützt die Erweiterung nur vereinfachtes Chinesisch und Englisch nativ, während andere Sprachen fehlen oder stark auf maschinelle Übersetzung angewiesen sind.", - "l2": "Um eine bessere Benutzererfahrung zu ermöglichen, habe ich die Übersetzungen für andere Sprachen auf Crowdin ausgelagert. Crowdin ist ein Übersetzungsmanagementsystem, das für Open-Source-Software kostenlos ist.", - "l3": "Wenn du diese Erweiterung nützlich für dich findest, und bereit bist, die Übersetzung zu verbessern, klicke auf die Schaltfläche unten, um zur Projektseite auf Crowdin zu gelangen.", - "l4": "Wenn der Übersetzungsfortschritt einer Sprache 50% erreicht, werde ich die Unterstützung in dieser Erweiterung erwägen." + "l1": "Um ein besseres Benutzererlebnis zu bieten, hoste ich die Übersetzungsaufgaben auf Crowdin.", + "l2": "Wenn Sie diese Erweiterung für nützlich halten und zur Verbesserung der Übersetzung beitragen möchten, können Sie auf die Schaltfläche unten klicken, um zur Projektseite auf Crowdin zu gelangen.", + "l3": "Sobald der Übersetzungsfortschritt einer Sprache 50 % erreicht, werde ich erwägen, sie in dieser Erweiterung zu unterstützen." }, "button": "Zu Crowdin gehen", "loading": "Übersetzungsfortschritt wird überprüft...", @@ -74,10 +68,9 @@ "fr": { "title": "N'hésitez pas à aider à améliorer la traduction de l'extension !", "alert": { - "l1": "En raison des compétences linguistiques de l'auteur, l'extension ne prend en charge que le chinois simplifié et l'anglais en mode natif, les autres langues étant soit absentes, soit fortement tributaires de la traduction automatique.", - "l2": "Afin de fournir une meilleure expérience d'utilisateur, j'héberge les tâches de traduction pour d'autres langues sur Crowdin. rowdin est un système de gestion de la traduction gratuit pour les logiciels open source.", - "l3": "Si vous trouvez cette extension utile pour vous et que vous êtes prêt à améliorer sa traduction, ou peut cliquer sur le bouton ci-dessous pour aller à la page d'accueil du projet sur Crowdin.", - "l4": "Lorsque la progression de la traduction d'une langue atteindra 50 %, j'envisagerai de la soutenir dans cette extension." + "l1": "Afin d’offrir une meilleure expérience utilisateur, j’héberge les tâches de traduction sur Crowdin.", + "l2": "Si vous trouvez cette extension utile et que vous souhaitez améliorer sa traduction, vous pouvez cliquer sur le bouton ci-dessous pour accéder à la page du projet sur Crowdin.", + "l3": "Lorsqu’une langue atteint un taux de traduction de 50 %, j’envisagerai de la prendre en charge dans cette extension." }, "button": "Allez sur Crowdin", "loading": "Vérification de la progression de la traduction...", @@ -86,10 +79,9 @@ "ja": { "title": "拡張機能のローカライズ翻訳を改善するために自由にご協力ください!", "alert": { - "l1": "著者の言語能力のために、拡張機能はネイティブに簡体字中国語と英語のみをサポートしています。 他の言語は欠落しているか機械翻訳に大きく依存しています", - "l2": "より良いユーザー エクスペリエンスを提供するために、他の言語の翻訳タスクを Crowdin でホストしています。Crowdin は、オープン ソース ソフトウェアの無料翻訳管理システムです。", - "l3": "この拡張機能があなたにとって有用であり、翻訳を改善したいと考えている場合。 下のボタンをクリックすると、Crowdinのプロジェクトのホームページに移動できます。", - "l4": "言語の翻訳進捗率が50%に達したら、この拡張機能をサポートすることを検討します。" + "l1": "より良いユーザー体験を提供するため、翻訳タスクをCrowdin上でホストしています。", + "l2": "この拡張機能が役に立ち、翻訳の改善にご協力いただける場合は、下のボタンをクリックしてCrowdin上のプロジェクトページへアクセスできます。", + "l3": "ある言語の翻訳進捗が50％に達した場合、その言語をこの拡張機能でサポートすることを検討します。" }, "button": "Crowdin に移動", "loading": "翻訳の進捗を確認しています...", @@ -98,10 +90,9 @@ "pt_PT": { "title": "Ajude a melhorar as traduções da extensão!", "alert": { - "l1": "Devido às limitações linguísticas do autor, esta extensão só suporta Chinês Simplificado e Inglês nativamente. Outras línguas podem estar incompletas ou conter traduções automáticas.", - "l2": "Para melhorar a experiência de todos, disponibilizei as traduções no Crowdin - um sistema de gestão de traduções gratuito para software open source.", - "l3": "Se esta extensão lhe for útil e quiser ajudar a melhorar as traduções, clique no botão abaixo para aceder à página do projeto no Crowdin.", - "l4": "Quando uma língua atingir 50% de tradução, considerarei adicionar suporte nativo na extensão." + "l1": "De modo a proporcionar uma melhor experiência ao utilizador, alojo as tarefas de tradução na Crowdin.", + "l2": "Se considerar que esta extensão lhe é útil e quiser melhorar a sua tradução, pode clicar no botão abaixo para aceder à página inicial do projeto na Crowdin.", + "l3": "Quando o progresso da tradução de um idioma atingir os 50%, considerarei apoiá-lo nesta extensão." }, "button": "Ir para o Crowdin", "loading": "A verificar progresso das traduções...", @@ -110,10 +101,9 @@ "ru": { "title": "Не стесняйтесь помочь улучшить локализацию расширений!", "alert": { - "l1": "Из-за возможности автора, расширение поддерживает только упрощенный китайский и английский языки, и другие языки либо отсутствуют, либо сильно зависят от машинного перевода.", - "l2": "Чтобы обеспечить лучший пользовательский опыт, я размещаю задачи перевода для других языков на Crowdin. rowdin - это бесплатная система управления переводами для программного обеспечения с открытым исходным кодом.", - "l3": "Если вы считаете это расширение полезным для вас и вы готовы улучшить его перевод, ou можете нажать на кнопку ниже, чтобы перейти на домашнюю страницу проекта на Crowdin.", - "l4": "Когда прогресс перевода языка достигает 50%, я подумаю о его поддержке в этом расширении." + "l1": "Чтобы обеспечить лучший пользовательский опыт, я размещаю задачи по переводу на Crowdin.", + "l2": "Если вам полезно это расширение и вы хотите улучшить его перевод, вы можете нажать кнопку ниже, чтобы перейти на домашнюю страницу проекта на Crowdin.", + "l3": "Когда прогресс перевода языка достигнет 50%, я рассмотрю возможность его поддержки в этом расширении." }, "button": "Перейти в Crowdin", "loading": "Проверка перевода...", @@ -122,13 +112,45 @@ "ar": { "title": "ساهم في تحسين ترجمة هذه الإضافة!", "alert": { - "l1": "نظرًا لقدرات المطور اللغوية، يدعم هذا الامتداد حاليا اللغة الصينية والإنجليزية فقط. اللغات الأخرى إما غير مدعومة أو تعتمد بشكل كبير على الترجمة الآلية.", - "l2": "لتوفير تجربة مستخدم أفضل، نقوم باستضافة مهام الترجمة للغات الأخرى على منصة Crowdin، نظام إدارة ترجمة مجاني للبرمجيات المفتوحة المصدر.", - "l3": "إذا وجدت هذه الإضافة مفيدة لك وترغب في تحسين ترجمتها، يمكنك النقر على الزر أدناه للذهاب إلى صفحة المشروع على Crowdin.", - "l4": "عند وصول تقدم ترجمة لغة معينة إلى 50%، سنقوم بدعمها رسميًا في هذا الامتداد." + "l1": "من أجل تقديم تجربة مستخدم أفضل، أقوم باستضافة مهام الترجمة على Crowdin.", + "l2": "إذا وجدت هذا الامتداد مفيدًا لك وكنت راغبًا في تحسين ترجمته، يمكنك النقر على الزر أدناه للانتقال إلى الصفحة الرئيسية للمشروع على Crowdin.", + "l3": "عندما يصل تقدم ترجمة لغة ما إلى 50%، سأفكر في دعمها في هذا الامتداد." }, "button": "الذهاب إلى Crowdin", "loading": "التحقق من تقدم الترجمة...", "contributors": "قائمة المساهمين" + }, + "tr": { + "title": "Uzantının yerelleştirme çevirilerini iyileştirmeye yardımcı olmaktan çekinmeyin!", + "alert": { + "l1": "Daha iyi bir kullanıcı deneyimi sunmak amacıyla, çeviri görevlerini Crowdin üzerinde barındırıyorum.", + "l2": "Bu eklentiyi sizin için faydalı buluyorsanız ve çevirisini geliştirmek istiyorsanız, Crowdin'deki proje ana sayfasına gitmek için aşağıdaki butona tıklayabilirsiniz.", + "l3": "Bir dilin çeviri ilerlemesi %50'ye ulaştığında, bu eklentide ilgili dili desteklemeyi değerlendireceğim." + }, + "button": "Crowdin'e git", + "loading": "Çevirinin ilerleyişi kontrol ediliyor...", + "contributors": "Katkıda Bulunanlar" + }, + "pl": { + "title": "Możesz pomóc w ulepszaniu tłumaczeń tego rozszerzenia!", + "alert": { + "l1": "W celu zapewnienia lepszego doświadczenia użytkownikom hostuję pliki do przetłumaczenia na platformie Crowdin.", + "l2": "Jeżeli uważasz, że to rozszerzenie jest dla Ciebie przydatne i chciałbyś poprawić jego tłumaczenie, kliknij przycisk poniżej, aby przejść do strony głównej projektu na Crowdin.", + "l3": "Kiedy postęp w tłumaczeniu języka osiągnie 50%, rozważę poparcie go w tym rozszerzeniu." + }, + "button": "Przejdź do Crowdin", + "loading": "Sprawdzanie postępu tłumaczenia...", + "contributors": "Lista współtwórców" + }, + "it": { + "title": "Sentitevi liberi di contribuire a migliorare le traduzioni di localizzazione dell'estensione!", + "alert": { + "l1": "Al fine di fornire una migliore esperienza utente, ospito le attività di traduzione su Crowdin.", + "l2": "Se trovate questa estensione utile per voi e siete disposti a migliorare la sua traduzione, è possibile fare clic sul pulsante qui sotto per andare alla home page del progetto su Crowdin.", + "l3": "Quando il progresso della traduzione di una lingua raggiunge il 50 per cento, considererò di sostenerla in questa estensione." + }, + "button": "Vai A Crowdin", + "loading": "Controllo avanzamento traduzione...", + "contributors": "Lista Contributori" } } \ No newline at end of file diff --git a/src/i18n/message/app/help-us.ts b/src/i18n/message/app/help-us.ts index 0a3ed59a0..4cbf4fc9b 100644 --- a/src/i18n/message/app/help-us.ts +++ b/src/i18n/message/app/help-us.ts @@ -11,7 +11,6 @@ type _AlertLine = | 'l1' | 'l2' | 'l3' - | 'l4' export type HelpUsMessage = { title: string diff --git a/src/i18n/message/app/index.ts b/src/i18n/message/app/index.ts index 77cb8a8a6..da6e63755 100644 --- a/src/i18n/message/app/index.ts +++ b/src/i18n/message/app/index.ts @@ -5,12 +5,12 @@ * https://opensource.org/licenses/MIT */ -import buttonMessages, { type ButtonMessage } from "@i18n/message/common/button" -import calendarMessages, { type CalendarMessage } from "@i18n/message/common/calendar" -import itemMessages, { type ItemMessage } from "@i18n/message/common/item" -import metaMessages, { type MetaMessage } from "@i18n/message/common/meta" -import sharedMessages, { type SharedMessage } from "@i18n/message/common/shared" import baseMessages, { type BaseMessage } from "../common/base" +import buttonMessages, { type ButtonMessage } from "../common/button" +import calendarMessages, { type CalendarMessage } from "../common/calendar" +import itemMessages, { type ItemMessage } from "../common/item" +import metaMessages, { type MetaMessage } from "../common/meta" +import sharedMessages, { type SharedMessage } from '../common/shared' import limitModalMessages, { type ModalMessage } from "../cs/modal" import { merge, type MessageRoot } from "../merge" import aboutMessages, { type AboutMessage } from "./about" @@ -21,22 +21,20 @@ import habitMessages, { type HabitMessage } from "./habit" import helpUsMessages, { type HelpUsMessage } from "./help-us" import limitMessages, { type LimitMessage } from "./limit" import menuMessages, { type MenuMessage } from "./menu" -import mergeRuleMessages, { type MergeRuleMessage } from "./merge-rule" import operationMessages, { type OperationMessage } from './operation' import optionMessages, { type OptionMessage } from "./option" -import reportMessages, { type ReportMessage } from "./report" +import recordMessages, { type RecordMessage } from "./record" +import ruleMessages, { type RuleMessage } from "./rule" import siteManageManages, { type SiteManageMessage } from "./site-manage" import timeFormatMessages, { type TimeFormatMessage } from "./time-format" -import whitelistMessages, { type WhitelistMessage } from "./whitelist" export type AppMessage = { about: AboutMessage dataManage: DataManageMessage item: ItemMessage shared: SharedMessage - report: ReportMessage - whitelist: WhitelistMessage - mergeRule: MergeRuleMessage + record: RecordMessage + rule: RuleMessage option: OptionMessage analysis: AnalysisMessage menu: MenuMessage @@ -59,9 +57,8 @@ const MESSAGE_ROOT: MessageRoot = { dataManage: dataManageMessages, item: itemMessages, shared: sharedMessages, - report: reportMessages, - whitelist: whitelistMessages, - mergeRule: mergeRuleMessages, + record: recordMessages, + rule: ruleMessages, option: optionMessages, analysis: analysisMessages, menu: menuMessages, diff --git a/src/i18n/message/app/limit-resource.json b/src/i18n/message/app/limit-resource.json index 381a39a42..6f630036a 100644 --- a/src/i18n/message/app/limit-resource.json +++ b/src/i18n/message/app/limit-resource.json @@ -1,23 +1,19 @@ { "zh_CN": { - "filterDisabled": "过滤无效规则", + "onlyEffective": "仅生效中", "wildcardTip": "您可以使用通配符来匹配子域名或子页面，使用\"+\"作为前缀来排除子页面！", + "emptyTips": "点击这里创建一条规则！", "item": { "name": "规则名称", "condition": "限制网址", - "daily": "每日上限", - "weekly": "每周上限", "weekStartInfo": "每周的第一天是【{weekStart}】，你可以在统计选项中修改该值", "delayCount": "延时次数", "detail": "规则详情", "visitTime": "单次访问最长时间", - "period": "不可访问的时间段", "enabled": "启用", "locked": "锁定", "effectiveDay": "生效日期", - "delayAllowed": "可延时", - "delayAllowedInfo": "上网时间超过限制时，点击【再看 5 分钟】短暂延时。如果关闭该功能则不能延时。", - "visits": "次访问", + "allowDelay": "可延时", "or": "或者", "notEffective": "未生效" }, @@ -27,17 +23,14 @@ "rule": "设置规则" }, "button": { - "test": "网址测试", - "option": "全局设置" + "test": "网址测试" }, "message": { - "noUrl": "未配置限制网址", + "noUrl": "未添加任何限制网址", "noRule": "未填写任何规则", "deleteConfirm": "是否要删除规则 [{name}]？", "lockConfirm": "锁定后，即使未触发此规则，所有操作也需要验证", - "noPermissionFirefox": "请先在插件管理页[about:addons]开启该插件的粘贴板权限", "inputTestUrl": "请先输入需要测试的网址链接", - "clickTestButton": "输入完成后请点击【{buttonText}】按钮", "noRuleMatched": "该网址未命中任何规则", "rulesMatched": "该网址命中以下规则：", "timeout": "倒计时已结束 XD" @@ -49,30 +42,27 @@ "strictTip": "时限规则已触发，不允许手动解锁！", "incorrectPsw": "密码错误", "incorrectAnswer": "回答错误", + "twoFaInputTip": "规则已被触发或锁定。请从您的身份验证程序中输入6位数字代码以继续。", + "incorrect2fa": "2FA 验证码错误", "pi": "圆周率 π 的小数部分第 {startIndex} 位到第 {endIndex} 位的共 {digitCount} 位数字", "confession": "一寸光阴一寸金，寸金难买寸光阴" }, "reminder": "距离时间限制不到 {min} 分钟！" }, "zh_TW": { - "filterDisabled": "過濾無效規則", "wildcardTip": "你可以使用萬用字元來匹配子網域或子頁面，使用\"+\"作為前置詞來排除子頁面！", + "emptyTips": "點擊此處新增規則！", "item": { "name": "規則名稱", "condition": "限制網址", - "daily": "每日上限", - "weekly": "每週上限", "weekStartInfo": "每週起始日為「{weekStart}」，您可於統計設定中調整", "delayCount": "延遲次數", "detail": "規則詳細內容", "visitTime": "單次造訪時長限制", - "period": "限制時段", "enabled": "是否啟用", "locked": "已鎖定", "effectiveDay": "生效日期", - "delayAllowed": "允許延遲", - "delayAllowedInfo": "當使用時間超過限制時，可點擊【再看5分鐘】暫時延長。若關閉此功能則無法延時。", - "visits": "次造訪", + "allowDelay": "允許延遲", "or": "或", "notEffective": "未生效" }, @@ -90,7 +80,6 @@ "deleteConfirm": "確定要刪除規則「{name}」嗎？", "lockConfirm": "如果鎖定，所有操作都需要驗證，即使規則未觸發也一樣。", "inputTestUrl": "請輸入要測試的網址", - "clickTestButton": "輸入完成後請點擊【{buttonText}】按鈕", "noRuleMatched": "此網址未符合任何規則", "rulesMatched": "此網址符合以下規則：", "timeout": "時間到啦！XDDD" @@ -108,26 +97,23 @@ "reminder": "距離時間限制僅剩 {min} 分鐘！" }, "en": { - "filterDisabled": "Only enabled", + "onlyEffective": "Only Effective", "wildcardTip": "You can use wildcards to match subdomains or subpages, and use \"+\" as a prefix to exclude subpages!", + "emptyTips": "Click here to create one rule!", "item": { "name": "Rule name", "condition": "Restricted URL", - "daily": "Daily limit", - "weekly": "Weekly limit", - "weekStartInfo": "The first day of each week is {weekStart}, you can change this value in the statistics options", + "weekStartInfo": "The first day of each week is {weekStart}, you can change this value in the tracking options", "delayCount": "Delay count", "detail": "Rule detail", "visitTime": "Time limit per visit", - "period": "Blocked periods", "enabled": "Enabled", "locked": "Locked", "effectiveDay": "Effective On", - "delayAllowed": "Delayable", - "delayAllowedInfo": "If it times out, allow a temporary delay of 5 minutes", - "visits": "visits", + "allowDelay": "Allow Delay", "or": "or", - "notEffective": "Not effective" + "notEffective": "Not effective", + "unlimited": "Unlimited" }, "step": { "base": "Basic Information", @@ -138,12 +124,11 @@ "test": "Test URL" }, "message": { - "noUrl": "No restriction URLs configured", + "noUrl": "No URL added", "noRule": "No rules filled in", "deleteConfirm": "Do you want to delete the rule [{name}]?", "lockConfirm": "If locked, all operations will require verification even if the rule is not triggered.", "inputTestUrl": "Please enter the URL link to be tested first", - "clickTestButton": "After inputting, please click the button ({buttonText})", "noRuleMatched": "The URL does not hit any rules", "rulesMatched": "The URL hits the following rules:", "timeout": "Time is up! XD" @@ -155,29 +140,26 @@ "strictTip": "Triggered, no operation is allowed before release!", "incorrectPsw": "Incorrect password", "incorrectAnswer": "Incorrect answer", + "twoFaInputTip": "The rule has been triggered or locked. Enter the 6-digit code from your authenticator app to continue.", + "incorrect2fa": "Incorrect 2FA code", "pi": "{digitCount} digits from {startIndex} to {endIndex} of the decimal part of π", "confession": "Time is fleeting" }, "reminder": "Less than {min} minutes until the time limit!" }, "ja": { - "filterDisabled": "有效", "wildcardTip": "ワイルドカードを使用してサブドメインまたはサブページに一致させることができ、「+」をプレフィックスとしてサブページを除外することができます！", + "emptyTips": "ここをクリックしてルールを一つ作成！", "item": { "name": "規則名", "condition": "制限 URL", - "daily": "1日の限度", - "weekly": "週間の限度", "weekStartInfo": "各週の最初の日は「{weekStart}」, 統計オプションでこの値を変更することができます", "delayCount": "遅延回数", "detail": "規則明細", "visitTime": "訪問ごとの制限", - "period": "許可されない期間", "enabled": "有效", + "locked": "ロック済み", "effectiveDay": "発効日", - "delayAllowed": "さらに5分間閲覧する", - "delayAllowedInfo": "時間が経過した場合は、一時的に5分遅らせることができます", - "visits": "訪問数", "or": "や", "notEffective": "効果がない" }, @@ -194,9 +176,9 @@ "noRule": "ルールが記入されていません", "deleteConfirm": "ルール [{name}] を削除しますか?", "inputTestUrl": "最初にテストする URL リンクを入力してください", - "clickTestButton": "入力後、ボタン({buttonText})をクリックしてください", "noRuleMatched": "URL がどのルールとも一致しません", - "rulesMatched": "URL は次のルールに一致します。" + "rulesMatched": "URL は次のルールに一致します。", + "timeout": "時間切れです！ XD" }, "verification": { "inputTip": "ルールがトリガーされたかロックされました。続行するには、次の質問に対する回答を {second} 秒以内に入力してください: {prompt}", @@ -211,24 +193,19 @@ "reminder": "制限時間まで {min} 分未満！" }, "pt_PT": { - "filterDisabled": "Apenas ativos", "wildcardTip": "Pode usar wildcards para corresponder a subdomínios ou subpáginas, e usar o \"+\" como prefixo para excluir subpáginas!", + "emptyTips": "Clica aqui para criar uma regra!", "item": { "name": "Nome da regra", "condition": "URL restrito", - "daily": "Limite diário", - "weekly": "Limite semanal", "weekStartInfo": "O primeiro dia da semana é {weekStart}. Pode alterar nas opções de estatísticas", "delayCount": "Atrasos permitidos", "detail": "Detalhe da regra", "visitTime": "Tempo limite por visita", - "period": "Períodos bloqueados", "enabled": "Ativo", "locked": "Bloqueado", "effectiveDay": "Dias de aplicação", - "delayAllowed": "Permitir atraso", - "delayAllowedInfo": "Se expirar, permite um atraso temporário de 5 minutos", - "visits": "visitas", + "allowDelay": "Permitir atraso", "or": "ou", "notEffective": "Não aplicável" }, @@ -246,7 +223,6 @@ "deleteConfirm": "Eliminar a regra [{name}]?", "lockConfirm": "Se bloqueado, exigirá verificação mesmo sem ser acionado", "inputTestUrl": "Introduza primeiro o URL a testar", - "clickTestButton": "Clique no botão ({buttonText}) após introduzir", "noRuleMatched": "O URL não corresponde a nenhuma regra", "rulesMatched": "O URL corresponde às seguintes regras:", "timeout": "Tempo esgotado! XD" @@ -264,24 +240,22 @@ "reminder": "Menos de {min} minutos até ao limite!" }, "uk": { - "filterDisabled": "Лише увімкнені", + "onlyEffective": "Лише дійсні", + "wildcardTip": "Можна використовувати символи підставлення для пошуку піддоменів або підсторінок, а \"+\" як префікс для виключення підсторінки!", + "emptyTips": "Натисніть тут, щоб створити одне правило!", "item": { "name": "Назва правила", "condition": "Обмежена URL-адреса", - "daily": "Денний ліміт", - "weekly": "Тижневий ліміт", "weekStartInfo": "Перший день кожного тижня {weekStart}. Ви можете змінити це значення у налаштуваннях статистики", "delayCount": "Лічильник затримок", "detail": "Подробиці правила", "visitTime": "Ліміт на відвідування", - "period": "Недозволені періоди", "enabled": "Увімкнено", + "locked": "Заблоковано", "effectiveDay": "Діє", - "delayAllowed": "Ще 5 хвилин", - "delayAllowedInfo": "Якщо час вичерпано, дозволити тимчасову затримку 5 хвилин", - "visits": "візитів", + "allowDelay": "Дозволити затримку", "or": "або", - "notEffective": "Неефективний" + "notEffective": "Не діє" }, "step": { "base": "Загальна інформація", @@ -294,41 +268,39 @@ "message": { "noUrl": "Не заповнена обмежена URL-адреса", "noRule": "Не заповнено жодного правила", - "deleteConfirm": "Ви дійсно хочете видалити правило {cond}?", + "deleteConfirm": "Ви хочете видалити правило {name}?", + "lockConfirm": "Якщо заблоковано, всі операції потребують перевірки, навіть якщо правило не спрацьовує.", "inputTestUrl": "Спочатку введіть URL-адресу посилання для перевірки", - "clickTestButton": "Після введення натисніть кнопку ({buttonText})", "noRuleMatched": "URL не відповідає жодному правилу", - "rulesMatched": "URL-адреса отримує такі правила:" + "rulesMatched": "URL-адреса отримує такі правила:", + "timeout": "Час вийшов! XD" }, "verification": { + "inputTip": "Правило було ініційовано або заблоковано. Щоб продовжити, введіть відповідь на зазначене запитання протягом {second} секунд: {prompt}", + "inputTip2": "Правило було ініційовано або заблоковано. Щоб продовжити, введіть зазначене протягом {second} секунд: {answer}", "pswInputTip": "Правило обмеження вже було запущено. Щоб продовжити, введіть пароль", "strictTip": "Правило обмеження вже активовано і ручне розблокування не дозволено!", "incorrectPsw": "Неправильний пароль", "incorrectAnswer": "Неправильна відповідь", + "twoFaInputTip": "Правило було ініційовано або заблоковано. Щоб продовжити, введіть код із 6 цифр зі своєї програми автентифікації.", + "incorrect2fa": "Неправильний код 2FA", "pi": "{digitCount} цифр від {startIndex} до {endIndex} десяткової частини числа π", "confession": "Час спливає" }, - "reminder": "Менше ніж {min} хвилин до ліміту часу!" + "reminder": "Менш як {min} хв до ліміту часу!" }, "es": { - "filterDisabled": "Solo habilitados", "wildcardTip": "¡Puedes usar comodines para coincidir con subdominios o subpáginas, y usar el \"+\" como prefijo para excluir subpáginas!", "item": { "name": "Nombre de la regla", "condition": "URL restringida", - "daily": "Límite diario", - "weekly": "Límite semanal", "weekStartInfo": "El primer día de cada semana es {weekStart}, puedes cambiar este valor en las opciones de estadísticas", - "delayCount": "Contagem de atraso", + "delayCount": "Contador de retraso", "detail": "Detalle de la regla", "visitTime": "Límite por visita", - "period": "Periodos no permitidos", "enabled": "Habilitado", "locked": "Bloqueado", "effectiveDay": "En vigor él", - "delayAllowed": "Más de 5 minutos", - "delayAllowedInfo": "Si se pausa, permite un retraso temporal de 5 minutos", - "visits": "visitas", "or": "o", "notEffective": "No efectivo" }, @@ -343,10 +315,9 @@ "message": { "noUrl": "URL restringida sin completar", "noRule": "No hay reglas llenadas", - "deleteConfirm": "¿Deseas eliminar la regla de {cond}?", + "deleteConfirm": "¿Deseas eliminar la regla dé {name}?", "lockConfirm": "Si está bloqueado, todas las operaciones requerirán verificación incluso si no se activa la regla.", "inputTestUrl": "Por favor, introduce primero el enlace URL a ser probado", - "clickTestButton": "Después de ingresarla, haz clic en el botón ({buttonText})", "noRuleMatched": "La URL no sigue ninguna regla", "rulesMatched": "La URL sigue las siguientes reglas:", "timeout": "¡Tiempo se acabó! XD" @@ -364,23 +335,20 @@ "reminder": "¡Menos de {min} minutos hasta el límite de tiempo!" }, "de": { - "filterDisabled": "Nur Aktivierte", + "onlyEffective": "Nur wirksam", + "wildcardTip": "Sie können Platzhalter verwenden, um Subdomains oder Unterseiten zuzuordnen, und \"+\" als Präfix verwenden, um Unterseiten auszuschließen!", + "emptyTips": "Klicke hier, um eine Regel zu erstellen!", "item": { "name": "Regelname", "condition": "Eingeschränkte URL", - "daily": "Tägliches Limit", - "weekly": "Wöchentliches Limit", "weekStartInfo": "Der erste Tag jeder Woche ist {weekStart}, Sie können diesen Wert in den Statistikoptionen ändern", "delayCount": "Anzahl der Verspätungen", "detail": "Regeldetail", "visitTime": "Limit pro Besuch", - "period": "Unzulässiger Zeitraum", "enabled": "Aktiviert", "locked": "Gesperrt", "effectiveDay": "Wirksam auf", - "delayAllowed": "Weitere 5 Minuten", - "delayAllowedInfo": "Wenn es zu einer Zeitüberschreitung kommt, erlauben Sie eine vorübergehende Verzögerung von 5 Minuten", - "visits": "Besuche", + "allowDelay": "Verzögerung zulassen", "or": "oder", "notEffective": "Nicht wirksam" }, @@ -390,7 +358,7 @@ "rule": "Regel konfigurieren" }, "button": { - "test": "Test-URL" + "test": "URL testen" }, "message": { "noUrl": "Nicht ausgefüllte eingeschränkte URL", @@ -398,7 +366,6 @@ "deleteConfirm": "Möchten Sie die Regel [{name}] löschen?", "lockConfirm": "Wenn gesperrt, müssen alle Operationen geprüft werden, auch wenn die Regel nicht ausgelöst wird.", "inputTestUrl": "Bitte geben Sie zunächst den zu testenden URL-Link ein", - "clickTestButton": "Klicken Sie nach der Eingabe bitte auf die Schaltfläche ({buttonText}).", "noRuleMatched": "Die URL entspricht keinen Regeln", "rulesMatched": "Die URL erfüllt die folgenden Regeln:", "timeout": "Zeit ist abgelaufen! XD" @@ -410,30 +377,28 @@ "strictTip": "Die Limit-Regel wurde bereits ausgelöst und eine manuelle Entsperrung ist nicht zulässig!", "incorrectPsw": "Falsches Passwort", "incorrectAnswer": "Falsche Antwort", + "twoFaInputTip": "Die Regel wurde ausgelöst oder gesperrt. Geben Sie den 6-stelligen Code aus Ihrer Authentifizierungs-App ein, um fortzufahren.", + "incorrect2fa": "Falscher 2FA-Code", "pi": "{digitCount} Ziffern von {startIndex} bis {endIndex} des Dezimalteils von π", "confession": "Zeit vergeht" }, "reminder": "Weniger als {min} Minuten bis zum Zeitlimit!" }, "fr": { - "filterDisabled": "Activé uniquement", - "wildcardTip": "Vous pouvez utiliser des wildcards pour correspondre à des sous-domaines ou sous-pages, et utiliser le \"+\" comme préfixe pour exclure des sous-pages !", + "onlyEffective": "Seulement en vigueur", + "wildcardTip": "Vous pouvez utiliser des caractères génériques pour cibler des sous-domaines ou des sous-pages, et le préfixe \"+\" pour en exclure !", + "emptyTips": "Cliquez ici pour créer une règle !", "item": { "name": "Nom de règle", "condition": "URL restreinte", - "daily": "Limite quotidienne", - "weekly": "Limite hebdomadaire", "weekStartInfo": "Le premier jour de chaque semaine est {weekStart}, vous pouvez modifier cette valeur dans les options de statistiques", "delayCount": "Nombre de retards", "detail": "Détail des règles", "visitTime": "Limite par visite", - "period": "Périodes bloquées", "enabled": "Activé", "locked": "Verrouillé", "effectiveDay": "Effectif le", - "delayAllowed": "Plus de 5 minutes", - "delayAllowedInfo": "Si le délai est écoulé, autorisez un délai temporaire de 5 minutes", - "visits": "visites", + "allowDelay": "Retardable", "or": "ou", "notEffective": "Non efficace" }, @@ -448,10 +413,9 @@ "message": { "noUrl": "Aucune URL de restriction configurée", "noRule": "Aucune règle remplie", - "deleteConfirm": "Voulez-vous supprimer la règle [{name}]?", + "deleteConfirm": "Voulez-vous supprimer la règle [{name}] ?", "lockConfirm": "Si verrouillé, toutes les opérations nécessiteront une vérification, même si la règle n'est pas activée.", "inputTestUrl": "Veuillez entrer le lien URL à tester en premier", - "clickTestButton": "Après l'entrée, cliquez sur le bouton ({buttonText})", "noRuleMatched": "L'URL ne correspond à aucune règle", "rulesMatched": "L'URL atteint les règles suivantes :", "timeout": "Temps écoulé ! XD" @@ -463,26 +427,30 @@ "strictTip": "La règle de limite a déjà été déclenchée et le déverrouillage manuel n'est pas autorisé !", "incorrectPsw": "Mot de passe incorrect", "incorrectAnswer": "Réponse incorrecte", + "twoFaInputTip": "La règle a été déclenchée ou verrouillée. Entrez le code à 6 chiffres de votre application d'authentification pour continuer.", + "incorrect2fa": "Code d’authentification à deux facteurs incorrect", "pi": "{digitCount} chiffres de {startIndex} à {endIndex} de la partie décimale de π", "confession": "Le temps, c'est de l'argent" }, "reminder": "Moins de {min} minutes jusqu'à la limite de temps !" }, "ru": { - "filterDisabled": "Только включен", + "onlyEffective": "Только эффективный режим", + "wildcardTip": "Вы можете использовать шаблоны для совпадения с поддоменами или подстраницами, а также использовать «+» в качестве префикса, чтобы исключить подстраницы!", + "emptyTips": "Нажмите здесь, чтобы создать новое правило!", "item": { "name": "Имя правила", "condition": "Ограниченный URL", - "weekly": "Недельный лимит", "weekStartInfo": "Первый день каждой недели {weekStart}, вы можете изменить это значение в настройках статистики", "delayCount": "Отложенный", "detail": "Детали правила", "visitTime": "Лимит за посещение", - "period": "Заблокированное время", "enabled": "Включено", + "locked": "Заблокировано", "effectiveDay": "Эффективный", - "delayAllowed": "Еще 5 минут", - "delayAllowedInfo": "Если время истекло, разрешите временную задержку 5 минут" + "allowDelay": "Разрешить задержку", + "or": "или", + "notEffective": "Не активировано" }, "step": { "base": "Основная информация", @@ -496,10 +464,11 @@ "noUrl": "Ограничение URL-адресов не настроено", "noRule": "Нет заполненных правил", "deleteConfirm": "Вы хотите удалить правило [{name}]?", + "lockConfirm": "Если заблокировано, то все операции потребуют проверки, даже если правило не срабатывает.", "inputTestUrl": "Пожалуйста, введите ссылку для тестирования", - "clickTestButton": "После ввода информации, пожалуйста, нажмите кнопку ({buttonText})", "noRuleMatched": "URL не содержит правил", - "rulesMatched": "URL попадает в следующие правила:" + "rulesMatched": "URL попадает в следующие правила:", + "timeout": "Время вышло! XD" }, "verification": { "inputTip": "Правило было активировано или заблокировано. Чтобы продолжить, введите ответ на следующий вопрос в течение {second} секунд: {prompt}", @@ -508,29 +477,25 @@ "strictTip": "Ограниченное правило уже было вызвано и разблокировка вручную запрещена!", "incorrectPsw": "Неправильный пароль", "incorrectAnswer": "Неправильный ответ", + "twoFaInputTip": "Правило было вызвано или заблокировано. Введите 6-значный код из вашего приложения-аутентификатора, чтобы продолжить.", + "incorrect2fa": "Неверный код двухфакторной авторизации", "pi": "{digitCount} цифр от {startIndex} до {endIndex} десятичной части числа π", "confession": "Время быстротечно" - } + }, + "reminder": "Осталось меньше чем {min} минут до конца лимита времени!" }, "ar": { - "filterDisabled": "تم التمكين فقط", "wildcardTip": "يمكنك استخدام الرموز البديلة لتطابق النطاقات الفرعية أو الصفحات الفرعية، ويمكنك استخدام العلامة \"+\" كبادئة لاستبعاد الصفحات الفرعية！", "item": { "name": "اسم القاعدة", "condition": "عنوان URL مقيد", - "daily": "الحد اليومي", - "weekly": "الحد الأسبوعي", "weekStartInfo": "اليوم الأول من كل أسبوع هو: {weekStart}، يمكنك تغيير هذه القيمة في خيارات الإحصائيات", "delayCount": "عدد التأخير", "detail": "تفاصيل القاعدة", "visitTime": "الحد الزمني لكل زيارة", - "period": "فترات محظورة", "enabled": "مُمَكَّن", "locked": "مقفل", "effectiveDay": "ساري المفعول على", - "delayAllowed": "5 دقائق إضافية", - "delayAllowedInfo": "إذا انتهت المهلة، اسمح بتأخير مؤقت لمدة 5 دقائق", - "visits": "الزيارات", "or": "أو", "notEffective": "غير فعال" }, @@ -548,7 +513,6 @@ "deleteConfirm": "هل تريد حذف القاعدة [{name}]؟", "lockConfirm": "إذا تم القَفل، فإن جميع العمليات ستتطلب التحقق حتى وإن لم يتم تفعيل القاعدة.", "inputTestUrl": "الرجاء إدخال رابط URL ليتم اختباره أولاً", - "clickTestButton": "بعد الإدخال، الرجاء الضغط على الزر ({buttonText})", "noRuleMatched": "عنوان URL لا يصطدم بأي قواعد", "rulesMatched": "يتوافق عنوان URL مع القواعد التالية:", "timeout": "انتهى الوقت! XD" @@ -564,5 +528,152 @@ "confession": "الوقت سريع الزوال" }, "reminder": "أقل من {min} دقيقة على انتهاء الوقت المحدد!" + }, + "tr": { + "wildcardTip": "Alt alan adlarını veya alt sayfaları eşleştirmek için joker karakterler kullanabilir ve alt sayfaları hariç tutmak için “+” ön ekini kullanabilirsiniz!", + "emptyTips": "Bir kural oluşturmak için burayı tıklayın!", + "item": { + "name": "Kural adı", + "condition": "Kısıtlanmış URL", + "weekStartInfo": "Her haftanın ilk günü {weekStart}, bu değeri istatistik seçeneklerinden değiştirebilirsiniz", + "delayCount": "Gecikme sayısı", + "detail": "Kural detayı", + "visitTime": "Ziyaret başına zaman sınırı", + "enabled": "Etkinleştirildi", + "locked": "Kilitli", + "effectiveDay": "Geçerli Olduğu Gün(ler)", + "allowDelay": "Ertelenebilir", + "or": "yada", + "notEffective": "Geçerli değil" + }, + "step": { + "base": "Temel bilgiler", + "url": "Yapılandırma URL'si", + "rule": "Yapılandırma kuralı" + }, + "button": { + "test": "Test URL" + }, + "message": { + "noUrl": "URL eklenemedi", + "noRule": "Hiçbir kural girilmemiş", + "deleteConfirm": "{name} kuralını silmek istiyor musunuz?", + "lockConfirm": "Kilitliyse, kural tetiklenmemiş olsa bile tüm işlemler doğrulama gerektirecektir.", + "inputTestUrl": "Lütfen önce test edilecek URL bağlantısını girin", + "noRuleMatched": "URL hiçbir kurala uymuyor", + "rulesMatched": "URL aşağıdaki kurallara uygundur:", + "timeout": "Zaman doldu!" + }, + "verification": { + "inputTip": "Kural tetiklendi veya kilitlendi. Devam etmek için lütfen {second} saniye içinde sorunun cevabını giriniz: {prompt}", + "inputTip2": "Kural tetiklendi veya kilitlendi. Devam etmek için lütfen {second} saniye içinde olduğu gibi girin: {answer}", + "pswInputTip": "Kural tetiklendi veya kilitlendi. Devam etmek için lütfen şifrenizi girin", + "strictTip": "Tetiklendiğinde, serbest bırakılmadan önce hiçbir işlem yapılmasına izin verilmez!", + "incorrectPsw": "Hatalı şifre", + "incorrectAnswer": "Hatalı cevap", + "pi": "π sayısının ondalık kısmının {startIndex} ile {endIndex} arasındaki {digitCount} basamağı girin", + "confession": "Zaman akıp gidiyor" + }, + "reminder": "Zaman sınırı dolmasına {min} dakikadan az kaldı!" + }, + "pl": { + "onlyEffective": "Tylko efektywne", + "wildcardTip": "Możesz używać symbolu \"*\", aby dopasowywać subdomeny lub podstrony, a także użyć znaku „+” jako prefiksu, aby wykluczyć podstrony!", + "emptyTips": "Kliknij tutaj, aby utworzyć zasadę!", + "item": { + "name": "Nazwa zasady", + "condition": "Limitowany URL", + "weekStartInfo": "Pierwszym dniem każdego tygodnia jest {weekStart}, możesz zmienić tę wartość w opcjach śledzenia", + "delayCount": "Licznik opóźnień", + "detail": "Szczegóły zasady", + "visitTime": "Limit czasu na wizytę", + "enabled": "Aktywne", + "locked": "Zablokowany", + "effectiveDay": "Aktywna w", + "allowDelay": "Możliwe do przedłużenia", + "or": "lub", + "notEffective": "Nieskuteczny" + }, + "step": { + "base": "Podstawowe informacje", + "url": "URL konfiguracji", + "rule": "Reguła konfiguracji" + }, + "button": { + "test": "Przetestuj URL" + }, + "message": { + "noUrl": "Nie dodano URL", + "noRule": "Nie wpisano żadnych reguł", + "deleteConfirm": "Na pewno chcesz usunąć regułę [{name}]?", + "lockConfirm": "Jeśli zablokowane, wszystkie operacje będą wymagały weryfikacji, nawet jeśli reguła nie zostanie uruchomiona.", + "inputTestUrl": "Wpisz URL do przetestowania", + "noRuleMatched": "Podany URL nie aktywuje żadnej reguły", + "rulesMatched": "Podany URL aktywuje następujące reguły:", + "timeout": "Czas minął! XD" + }, + "verification": { + "inputTip": "Reguła została aktywowana lub zablokowana. Aby kontynuować, odpowiedz na podane pytanie w {second} sekund: {prompt}", + "inputTip2": "Reguła została uruchomiona lub zablokowana. Aby kontynuować, wprowadź ją w ciągu {second} sekund: {answer}", + "pswInputTip": "Reguła została uruchomiona lub zablokowana. Aby kontynuować, wprowadź hasło odblokowania", + "strictTip": "Aktywowano, żadna operacja nie jest dozwolona przed zwolnieniem!", + "incorrectPsw": "Nieprawidłowe hasło", + "incorrectAnswer": "Niepoprawna odpowiedź", + "twoFaInputTip": "Reguła została uruchomiona lub zablokowana. Wprowadź 6-cyfrowy kod z aplikacji uwierzytelniającej, aby kontynuować.", + "incorrect2fa": "Nieprawidłowy kod 2FA", + "pi": "{digitCount} cyfr od {startIndex} do {endIndex} części dziesiętnej liczby π", + "confession": "Czas ucieka" + }, + "reminder": "Mniej niż {min} minut do osiągnięcia limitu!" + }, + "it": { + "onlyEffective": "Solo Efficace", + "wildcardTip": "Puoi usare caratteri jolly per abbinare sotto-domini o sotto-pagine, e usare \"+\" come prefisso per escludere le sotto-pagine!", + "emptyTips": "Clicca qui per creare una regola!", + "item": { + "name": "Nome della regola", + "condition": "URL Ristretto", + "weekStartInfo": "Il primo giorno di ogni settimana è {weekStart}, puoi cambiare questo valore nelle opzioni di tracciamento", + "delayCount": "Ritardo conteggio", + "detail": "Dettagli regola", + "visitTime": "Limite di tempo per visita", + "enabled": "Attivata", + "locked": "Bloccato", + "effectiveDay": "Effettivo On", + "allowDelay": "Ritardabile", + "or": "o", + "notEffective": "Non valido" + }, + "step": { + "base": "Informazione Base", + "url": "URL Di Configurazione", + "rule": "Regola di configurazione" + }, + "button": { + "test": "Test URL" + }, + "message": { + "noUrl": "Nessuna URL aggiunta", + "noRule": "Nessuna regola inserita", + "deleteConfirm": "Vorresti eliminare la regola [{name}]?", + "lockConfirm": "Se bloccato, tutte le operazioni richiederanno la verifica anche se la regola non viene attivata.", + "inputTestUrl": "Si prega d'inserire il link URL da testare per primo", + "noRuleMatched": "L'URL non soddisfa alcuna regola", + "rulesMatched": "L'URL soddisfa le seguenti regole:", + "timeout": "Tempo scaduto! XD" + }, + "verification": { + "inputTip": "La regola è stata attivata o bloccata. Per continuare, inserisci la risposta alla seguente domanda entro {second} secondi: {prompt}", + "inputTip2": "La regola è stata attivata o bloccata. Per continuare, inseriscila così com'è entro {second} secondi: {answer}", + "pswInputTip": "La regola è stata attivata o bloccata. Per continuare, inserisci la password", + "strictTip": "Attivato, nessuna operazione è consentita prima del rilascio!", + "incorrectPsw": "Password non e corretta", + "incorrectAnswer": "Risposta sbagliata", + "twoFaInputTip": "La regola è stata attivata o bloccata. Inserisci il codice a 6 cifre dall'app di autenticazione per continuare.", + "incorrect2fa": "Codice 2FA non valido", + "pi": "{digitCount} cifre da {startIndex} a {endIndex} della parte decimale di π", + "confession": "Il tempo è fugace" + }, + "reminder": "Meno di {min} minuti fino al limite!" } } \ No newline at end of file diff --git a/src/i18n/message/app/limit.ts b/src/i18n/message/app/limit.ts index e01ff833c..e2593de18 100644 --- a/src/i18n/message/app/limit.ts +++ b/src/i18n/message/app/limit.ts @@ -8,8 +8,9 @@ import resource from './limit-resource.json' export type LimitMessage = { - filterDisabled: string + onlyEffective: string wildcardTip: string + emptyTips: string step: { base: string url: string @@ -18,21 +19,17 @@ export type LimitMessage = { item: { name: string condition: string - daily: string - weekly: string weekStartInfo: string visitTime: string - period: string enabled: string locked: string effectiveDay: string - delayAllowed: string - delayAllowedInfo: string + allowDelay: string delayCount: string detail: string - visits: string or: string notEffective: string + unlimited: string } button: { test: string @@ -43,7 +40,6 @@ export type LimitMessage = { deleteConfirm: string lockConfirm: string inputTestUrl: string - clickTestButton: string noRuleMatched: string rulesMatched: string timeout: string @@ -55,21 +51,14 @@ export type LimitMessage = { strictTip: string incorrectPsw: string incorrectAnswer: string + twoFaInputTip: string + incorrect2fa: string pi: string confession: string } reminder: string } -export const verificationMessages: Messages = { - en: resource.en?.verification, - zh_CN: resource.zh_CN?.verification, - zh_TW: resource.zh_TW?.verification, - ja: resource.ja?.verification, - pt_PT: resource.pt_PT?.verification, - uk: resource.uk?.verification, -} - const _default: Messages = resource export default _default diff --git a/src/i18n/message/app/menu-resource.json b/src/i18n/message/app/menu-resource.json index a9f496b1d..d6df05a9b 100644 --- a/src/i18n/message/app/menu-resource.json +++ b/src/i18n/message/app/menu-resource.json @@ -2,188 +2,186 @@ "zh_CN": { "dashboard": "仪表盘", "data": "我的数据", - "dataReport": "报表明细", + "record": "报表明细", "siteAnalysis": "站点分析", "dataClear": "数据管理", - "additional": "附加功能", - "siteManage": "网站管理", - "whitelist": "白名单管理", - "mergeRule": "子域名合并", "behavior": "上网行为", "habit": "上网习惯", - "limit": "时间限制", + "additional": "附加功能", + "siteManage": "网站管理", + "rule": "规则管理", "other": "其他", - "helpUs": "帮助翻译", "about": "关于" }, "zh_TW": { "dashboard": "数据总览", "data": "我的資料", - "dataReport": "報表明細", + "record": "報表明細", "siteAnalysis": "網站分析", "dataClear": "儲存狀況", "behavior": "用戶行爲", "habit": "習慣分析", - "limit": "時間限制", "additional": "附加功能", "siteManage": "網站管理", - "whitelist": "白名單", - "mergeRule": "網站合併規則", "other": "其他", - "helpUs": "協助翻譯", "about": "關於" }, "en": { "dashboard": "Dashboard", "data": "My Data", - "dataReport": "Record", + "record": "Record", "siteAnalysis": "Site Analysis", "dataClear": "Storage", "behavior": "User Behavior", "habit": "Habits", - "limit": "Time Limit", "additional": "Additional Features", "siteManage": "Site Management", - "whitelist": "Whitelist", - "mergeRule": "Merge-site Rules", + "rule": "Rules", "other": "Other Features", - "helpUs": "Help Translation", "about": "About" }, "ja": { "dashboard": "ダッシュボード", "data": "私のデータ", - "dataReport": "報告する", + "record": "報告する", "siteAnalysis": "ウェブサイト分析", "dataClear": "記憶状況", "behavior": "ユーザーの行動", "habit": "閲覧の習慣", - "limit": "時間制限", "additional": "その他の機能", "siteManage": "ウェブサイト管理", - "whitelist": "Webホワイトリスト", - "mergeRule": "ドメイン合併", "other": "その他の機能", - "helpUs": "協力する", "about": "について" }, "pt_PT": { "dashboard": "Painel", "data": "Os Meus Dados", - "dataReport": "Registos", + "record": "Registos", "siteAnalysis": "Análise de Sites", "dataClear": "Armazenamento", "behavior": "Comportamento", "habit": "Hábitos", - "limit": "Limite de Tempo", "additional": "Funcionalidades", "siteManage": "Gestão de Sites", - "whitelist": "Lista Branca", - "mergeRule": "Regras de Agrupamento", "other": "Outras Opções", - "helpUs": "Ajudar a Traduzir", "about": "Sobre" }, "uk": { "dashboard": "Огляд", "data": "Мої дані", - "dataReport": "Записи", + "record": "Записи", "siteAnalysis": "Аналіз сайту", "dataClear": "Стан пам'яті", "behavior": "Поведінка", "habit": "Звички", - "limit": "Обмеження часу", "additional": "Додаткові функції", "siteManage": "Керування сайтами", - "whitelist": "Білий список", - "mergeRule": "Правила об'єднання сайтів", "other": "Інші функції", - "helpUs": "Допомогти нам", "about": "Про нас" }, "es": { "dashboard": "Tablero", "data": "Mis datos", - "dataReport": "Registro", + "record": "Registro", "siteAnalysis": "Análisis de sitios", "dataClear": "Estado de la memoria", "behavior": "Comportamiento del usuario", "habit": "Hábitos", - "limit": "Límite de tiempo", "additional": "Funciones adicionales", "siteManage": "Gestión de sitios", - "whitelist": "Lista blanca", - "mergeRule": "Reglas de fusión de sitios", "other": "Otras Funciones", - "helpUs": "Ayúdanos", "about": "Acerca de" }, "de": { - "dashboard": "Armaturenbrett", + "dashboard": "Übersicht", "data": "Meine Daten", - "dataReport": "Aufzeichnen", + "record": "Aufzeichnen", "siteAnalysis": "Analysebericht", "dataClear": "Speicherstatus", "behavior": "Nutzerverhalten", "habit": "Gewohnheit", - "limit": "Zeitlimit", "additional": "Zusatzfunktionen", "siteManage": "Websites", - "whitelist": "Whitelist", - "mergeRule": "Regeln zusammenführen", "other": "Andere Eigenschaften", - "helpUs": "Hilfe bei der Übersetzung", "about": "Über uns" }, "fr": { "dashboard": "Tableau de bord", "data": "Mes données", - "dataReport": "Enregistrement", + "record": "Enregistrement", "siteAnalysis": "Analyse du site", "dataClear": "Situation de la mémoire", "behavior": "Comportement de l'utilisateur", "habit": "Habitudes", - "limit": "Limite de temps", "additional": "Fonctionnalités supplémentaires", "siteManage": "Gestion des sites", - "whitelist": "Whitelist", - "mergeRule": "Fusionner les règles du site", + "rule": "Règles", "other": "Autres fonctionnalités", - "helpUs": "Aider à la traduction", "about": "À propos" }, "ru": { "dashboard": "Панель Данных", "data": "Мои Данные", - "dataReport": "Рекорд", + "record": "Рекорд", "siteAnalysis": "Анализ сайта", "dataClear": "Память о ситуации", "behavior": "Поведение", "habit": "Привычки", - "limit": "Ограничение по времени", "additional": "Дополнительный", "siteManage": "Управление сайтом", - "whitelist": "Белый список", - "mergeRule": "Объединение сайтов", "other": "Другие особенности", - "helpUs": "Помогите перевести", "about": "О нас" }, "ar": { "dashboard": "لوحة التحكم", "data": "بياناتي", - "dataReport": "تسجيل", + "record": "تسجيل", "siteAnalysis": "تحليل الموقع", "dataClear": "حالة الذاكرة", "behavior": "سلوك المستخدم", "habit": "العادات", - "limit": "المهلة", "additional": "ميزات إضافية", "siteManage": "أدوار النظام", - "whitelist": "القائمة البيضاء", - "mergeRule": "دمج قواعد الموقع", "other": "مميزات اخزي", - "helpUs": "ساعدني في التَّرْجَمَةً", "about": "حول" + }, + "tr": { + "dashboard": "Kontrol Paneli", + "data": "Verilerim", + "record": "Kayıtlı Veriler", + "siteAnalysis": "Site Analizi", + "dataClear": "Depolama", + "behavior": "Kullanıcı Davranışları", + "habit": "Alışkanlıklar", + "additional": "Ek Özellikler", + "siteManage": "Site Yönetimi", + "other": "Diğer Özellikler", + "about": "Hakkımızda" + }, + "pl": { + "dashboard": "Panel", + "data": "Moje dane", + "record": "Wpisy", + "siteAnalysis": "Analiza strony", + "dataClear": "Pamięć", + "behavior": "Zachowanie użytkownika", + "habit": "Nawyki", + "additional": "Dodatkowe funkcje", + "siteManage": "Zarządzanie stronami", + "rule": "Reguła", + "other": "Pozostałe funkcje", + "about": "O rozszerzeniu" + }, + "it": { + "dashboard": "Dashboard", + "data": "Miei Dati", + "siteAnalysis": "Analisi Sito", + "dataClear": "Memoria", + "behavior": "Comportamento Dell'Utente", + "habit": "Abitudini", + "additional": "Funzionalità aggiuntive", + "siteManage": "Gestione del sito", + "other": "Altre funzioni", + "about": "Info su" } } \ No newline at end of file diff --git a/src/i18n/message/app/menu.ts b/src/i18n/message/app/menu.ts index 72b61bdb8..3f34f82bf 100644 --- a/src/i18n/message/app/menu.ts +++ b/src/i18n/message/app/menu.ts @@ -10,18 +10,15 @@ import resource from './menu-resource.json' export type MenuMessage = { dashboard: string data: string - dataReport: string + record: string siteAnalysis: string dataClear: string behavior: string habit: string - limit: string additional: string siteManage: string - whitelist: string - mergeRule: string + rule: string other: string - helpUs: string about: string } diff --git a/src/i18n/message/app/merge-rule-resource.json b/src/i18n/message/app/merge-rule-resource.json deleted file mode 100644 index 15a99189f..000000000 --- a/src/i18n/message/app/merge-rule-resource.json +++ /dev/null @@ -1,211 +0,0 @@ -{ - "zh_CN": { - "removeConfirmMsg": "自定义合并规则 {origin} 将被移除", - "originPlaceholder": "原域名", - "mergedPlaceholder": "合并后域名", - "errorOrigin": "原域名格式错误", - "duplicateMsg": "合并规则已存在：{origin}", - "addConfirmMsg": "将为 {origin} 设置自定义合并规则", - "infoAlertTitle": "该页面可以配置子域名的合并规则", - "infoAlert0": "点击新增按钮，会弹出原域名和合并后域名的输入框，填写并保存规则", - "infoAlert1": "原域名可填具体的域名或者正则表达式，比如 www.baidu.com，*.baidu.com，*.google.com.*。以此确定哪些域名在合并时会使用该条规则", - "infoAlert2": "合并后域名可填具体的域名，或者填数字，或者不填", - "infoAlert3": "如果填数字，则表示合并后域名的级数。比如存在规则【 *.*.edu.cn >>> 3 】，那么 www.hust.edu.cn 将被合并至 hust.edu.cn", - "infoAlert4": "如果不填，则表示原域名不会被合并", - "infoAlert5": "如果没有命中任何规则，则默认会合并至 {psl} 的前一级", - "tagResult": { - "blank": "不合并", - "level": "{level} 级域名" - } - }, - "zh_TW": { - "removeConfirmMsg": "自訂合併規則 {origin} 將被刪除", - "originPlaceholder": "原始網域", - "mergedPlaceholder": "合併後網域", - "errorOrigin": "原始網域格式錯誤", - "duplicateMsg": "合併規則已存在：{origin}", - "addConfirmMsg": "將為 {origin} 設定自訂合併規則", - "infoAlertTitle": "此頁面可設定子網域合併規則", - "infoAlert0": "點擊「新增」按鈕後，需填寫原始網域與合併後網域", - "infoAlert1": "原始網域可填寫具體網域或正規表示式，例如：www.baidu.com、*.baidu.com、*.google.com.*", - "infoAlert2": "合併後網域可填寫：具體網域／數字／留空", - "infoAlert3": "若填數字，代表合併後的網域層級數。例如規則【 *.*.edu.cn >>> 3 】會將 www.hust.edu.cn 合併為 hust.edu.cn", - "infoAlert4": "若留空，表示原始網域將保持不變", - "infoAlert5": "若未匹配任何規則，預設會合併至 {psl} 的上一層級", - "tagResult": { - "blank": "保持原網域", - "level": "{level} 層網域" - } - }, - "en": { - "removeConfirmMsg": "{origin} will be removed from customized merge rules.", - "originPlaceholder": "Original site", - "mergedPlaceholder": "Merged", - "errorOrigin": "The format of original site is invalid.", - "duplicateMsg": "The rule already exists: {origin}", - "addConfirmMsg": "Customized merge rules will be set for {origin}", - "infoAlertTitle": "the merge rules when counting sites on this page", - "infoAlert0": "Click the [New One] button, the input boxes of the source site and the merge site will be displayed, fill in and save the rule", - "infoAlert1": "The original site can be filled with a specific site or regular expression, such as www.baidu.com, *.baidu.com, *.google.com.*, to determine which sites will match this rule while merging", - "infoAlert2": "The merged site can be filled with a specific site, a number or blank", - "infoAlert3": "A number means the level of merged site. For example, there is a rule '*.*.edu.cn >>> 3', then 'www.hust.edu.cn' will be merged to 'hust.edu.cn'", - "infoAlert4": "Blank means the original site will not be merged", - "infoAlert5": "If no rule is matched, it will default to the level before {psl}", - "tagResult": { - "blank": "Not Merge", - "level": "Keep Level {level}" - } - }, - "ja": { - "removeConfirmMsg": "カスタム マージ ルール {origin} は削除されます", - "originPlaceholder": "独自ドメイン名", - "mergedPlaceholder": "統計的ドメイン名", - "errorOrigin": "元のドメイン名の形式が間違っています", - "duplicateMsg": "ルールはすでに存在します：{origin}", - "addConfirmMsg": "カスタム マージ ルールが {origin} に設定されます", - "infoAlertTitle": "このページでは、サブドメインのマージ ルールを設定できます", - "infoAlert0": "[追加] ボタンをクリックすると、元のドメイン名と結合されたドメイン名の入力ボックスがポップアップし、ルールを入力して保存します。", - "infoAlert1": "元のドメイン名には、特定のドメイン名または正規表現 (www.baidu.com、*.baidu.com、*.google.com.* など) を入力できます。 マージ時にこのルールを使用するドメインを決定するには", - "infoAlert2": "統合されたドメイン名の後、特定のドメイン名を入力するか、番号を入力するか、空白のままにすることができます", - "infoAlert3": "数字を記入する場合は、ドメイン名のレベルが予約されていることを意味します。 たとえば、ルール [*.*.edu.cn >>> 3 ] がある場合、www.hust.edu.cn は hust.edu.cn にマージされます。", - "infoAlert4": "記入しない場合は、元のドメイン名が統合されないことを意味します", - "infoAlert5": "一致するルールがない場合、デフォルトで {psl} より前のレベルになります", - "tagResult": { - "blank": "不合并", - "level": "{level} 次ドメイン" - } - }, - "pt_PT": { - "removeConfirmMsg": "{origin} será removido das regras de agrupamento personalizadas.", - "originPlaceholder": "Site original", - "mergedPlaceholder": "Agrupado", - "errorOrigin": "Formato do site original inválido.", - "duplicateMsg": "A regra já existe: {origin}", - "addConfirmMsg": "Será criada uma regra de agrupamento para {origin}", - "infoAlertTitle": "Regras de agrupamento para contagem de sites nesta página", - "infoAlert0": "Clique em [Novo] para mostrar os campos do site original e do site agrupado", - "infoAlert1": "O site original pode ser um URL específico ou expressão regular (ex: www.baidu.com, *.baidu.com, *.google.com.*)", - "infoAlert2": "O site agrupado pode ser um URL específico, um número ou ficar em branco", - "infoAlert3": "Um número indica o nível de agrupamento. Ex: com a regra '*.*.edu.cn >>> 3', 'www.hust.edu.cn' será agrupado como 'hust.edu.cn'", - "infoAlert4": "Em branco significa que o site original não será agrupado", - "infoAlert5": "Se nenhuma regra for encontrada, usará o nível anterior a {psl}", - "tagResult": { - "blank": "Não Agrupar", - "level": "Manter Nível {level}" - } - }, - "uk": { - "removeConfirmMsg": "{origin} буде вилучено з налаштованих правил об'єднання.", - "originPlaceholder": "Оригінальний сайт", - "mergedPlaceholder": "Об'єднуваний", - "errorOrigin": "Неприпустимий формат оригінального сайту.", - "duplicateMsg": "Правило вже існує: {origin}", - "addConfirmMsg": "Для {origin} буде встановлено користувацьке правило об'єднання", - "infoAlertTitle": "На цій сторінці ви можете встановити правила об’єднання для статистики використання сайтів", - "infoAlert0": "Натисніть кнопку [Нове], заповніть поля оригінального та об'єднуваного сайту, після чого збережіть правило", - "infoAlert1": "Оригінальний сайт можна ввести як URL-адресу або регулярний вираз, як-от www.wikipedia.org, *.wikipedia.org, *.google.com.*, щоб визначити відповідні сайти для об'єднання", - "infoAlert2": "Об'єднуваний сайт можна ввести як URL-адресу, число, або залишити пустим", - "infoAlert3": "Число означає рівень об'єднуваного сайту. Наприклад, для правила '*.*.edu.cn >>> 3' об'єднуваний сайт 'www.hust.edu.cn' буде об'єднано з 'hust.edu.cn'", - "infoAlert4": "Пусте поле означає, що сайт не буде об'єднано", - "infoAlert5": "Якщо жодне правило не збігається, його буде встановлено до типового рівня {psl}", - "tagResult": { - "blank": "Не об'єднувати", - "level": "Зберегти рівень {level}" - } - }, - "es": { - "removeConfirmMsg": "{origin} será eliminado de las reglas de fusión personalizadas.", - "originPlaceholder": "Sitio original", - "mergedPlaceholder": "Fusionado", - "errorOrigin": "El formato del sitio original no es válido.", - "duplicateMsg": "La regla ya existe: {origin}", - "addConfirmMsg": "Las reglas de fusión personalizadas se establecerán para {origin}", - "infoAlertTitle": "Puedes establecer las reglas de fusión al contar sitios en esta página", - "infoAlert0": "Haz clic en el botón [New One], se mostrarán los recuadros del sitio fuente y el sitio fusionado, llénalos y guarda la regla", - "infoAlert1": "El sitio original puede ser llenado con un sitio específico o una expresión regular, tal como www.baidu.com, *.baidu.com, *.google.com.*, para determinar qué sitios seguirán esta regla al fusionarse", - "infoAlert2": "El sitio fusionado puede ser llenado con un sitio específico, un número o en dejarse en blanco", - "infoAlert3": "Un número significa el nivel del sitio fusionado. Por ejemplo, hay una regla '*.*.edu.cn >>> 3', entonces 'www.hust.edu.cn' se fusionará con 'hust.edu.cn'", - "infoAlert4": "Dejar en blanco significa que el sitio original no se fusionará", - "infoAlert5": "Si no se sigue ninguna regla, se establecerá por defecto al nivel antes de {psl}", - "tagResult": { - "blank": "No fusionar", - "level": "Mantener en nivel {level}" - } - }, - "de": { - "removeConfirmMsg": "{origin} wird aus den benutzerdefinierten Zusammenführen Regeln entfernt.", - "originPlaceholder": "Ursprüngliche Website", - "mergedPlaceholder": "Zusammengeführt", - "errorOrigin": "Das Format der Original-Website ist ungültig.", - "duplicateMsg": "Die Regel existiert bereits: {origin}", - "addConfirmMsg": "Für {origin} werden benutzerdefinierte Zusammenführungsregeln festgelegt", - "infoAlertTitle": "Auf dieser Seite können Sie Zusammenführen Regeln für die Zählung von Websites festlegen", - "infoAlert0": "Klicken Sie auf die Schaltfläche [Erstellen]. Die Eingabefelder der ursprünglichen Website und der zusammengeführten Website werden angezeigt. Füllen Sie die Regel aus und speichern Sie sie", - "infoAlert1": "Die ursprüngliche Website kann mit einer bestimmten Website oder einem regulären Ausdruck wie www.baidu.com, *.baidu.com, *.google.com.* gefüllt werden, um zu bestimmen, welche Websites beim Zusammenführen dieser Regel entsprechen", - "infoAlert2": "Die zusammengeführte Website kann mit einer bestimmten Site, einer Zahl oder einem Leerzeichen gefüllt werden", - "infoAlert3": "Eine Zahl gibt die Ebene der zusammengeführten Website an. Gibt es beispielsweise eine Regel „*.*.edu.cn >>> 3“, dann wird „www.hust.edu.cn“ als „hust.edu.cn“ zusammengeführt", - "infoAlert4": "Leer bedeutet, dass die ursprüngliche Website nicht zusammengeführt wird", - "infoAlert5": "Wenn keine Regel zutrifft, wird standardmäßig die Ebene vor {psl} verwendet", - "tagResult": { - "blank": "Nicht zusammenführen", - "level": "Level behalten {level}" - } - }, - "fr": { - "removeConfirmMsg": "{origin} sera supprimé des règles de fusion personnalisées.", - "originPlaceholder": "Site original", - "mergedPlaceholder": "Fusionné", - "errorOrigin": "Le format du site original est invalide.", - "duplicateMsg": "La règle existe déjà : {origin}", - "addConfirmMsg": "Les règles de fusion personnalisées seront définies pour {origin}", - "infoAlertTitle": "Vous pouvez définir les règles de fusion lorsque vous comptez des sites sur cette page", - "infoAlert0": "Cliquez sur le bouton [Nouveau], les boîtes de saisie du site source et le site de fusion sera affiché, remplissez et enregistrez la règle", - "infoAlert1": "Le site d'origine peut être rempli avec un site spécifique ou une expression régulière, telle que www.baidu.com, *.baidu.com, *.google.com.*, pour déterminer quels sites correspondront à cette règle lors de la fusion.", - "infoAlert2": "Le site fusionné peut être rempli avec un site spécifique, un numéro ou vide", - "infoAlert3": "Un nombre signifie le niveau du site fusionné. Par exemple, il existe une règle '*.*.edu.cn >>> 3', alors 'www.hust.edu.cn' sera fusionné avec 'hust.edu.cn'", - "infoAlert4": "Vide signifie que le site d'origine ne sera pas fusionné", - "infoAlert5": "Si aucune règle ne correspond, le niveau par défaut sera celui d'avant {psl}.", - "tagResult": { - "blank": "Non Fusionner", - "level": "Garder le niveau {level}" - } - }, - "ru": { - "removeConfirmMsg": "{origin} будет удален из настроенных правил слияния.", - "originPlaceholder": "Оригинальный сайт", - "mergedPlaceholder": "Соединено", - "errorOrigin": "Недопустимый формат оригинального сайта.", - "duplicateMsg": "Это правило уже существует: {origin}", - "addConfirmMsg": "Для {origin} будут установлены индивидуальные правила слияния", - "infoAlertTitle": "правила слияния при подсчете сайтов на этой странице", - "infoAlert0": "Нажмите кнопку [Новый], будут показаны поля ввода сайта источника и будут отображаться слияния, заполнять и сохранять правило", - "infoAlert1": "Исходный сайт может быть заполнен определенным сайтом или регулярным выражением, например www.baidu.com, *.baidu.com, *.google.com.*, чтобы определить, какие сайты будут соответствовать этому правилу при слиянии", - "infoAlert2": "Объединенный сайт может быть заполнен определенным сайтом, номером или пустым местом", - "infoAlert3": "Число означает уровень слияния сайта. Например, правило '*.*.edu.cn >>> 3', то 'www.hust.edu.cn' будет объединено с 'hust.edu.cn'", - "infoAlert4": "Пустое значение означает, что оригинальный сайт не будет объединён", - "infoAlert5": "Если правило не совпадает, оно будет по умолчанию на уровне до {psl}", - "tagResult": { - "blank": "Не объединять", - "level": "Сохранять уровень {level}" - } - }, - "ar": { - "removeConfirmMsg": "سيتم إزالة {origin} من قواعد الدمج المخصصة.", - "originPlaceholder": "الموقع الأصلي", - "mergedPlaceholder": "تم الدمج", - "errorOrigin": "تنسيق الموقع الأصلي غير صالح.", - "duplicateMsg": "القاعدة موجودة فعلًا: {origin}", - "addConfirmMsg": "سيتم تعيين قواعد الدمج المخصصة لـ {origin}", - "infoAlertTitle": "قواعد الدمج عند حساب المواقع الموجودة على هذه الصفحة", - "infoAlert0": "انقر فوق الزر [جديد]، سيتم عرض مربعات الإدخال الخاصة بموقع المصدر وموقع الدمج، املأ القاعدة واحفظها", - "infoAlert1": "يمكن ملء الموقع الأصلي بموقع معين أو تعبير عادي، مثل www.baidu.com، و*.baidu.com، و*.google.com.*، لتحديد المواقع التي ستطابق هذه القاعدة أثناء الدمج", - "infoAlert2": "يمكن ملء الموقع المدمج بموقع محدد أو رَقَم أو مساحة فارغة", - "infoAlert3": "يشير الرقم إلى مستوى الموقع المدمج. على سبيل المثال، هناك قاعدة '*.*.edu.cn >>> 3'، ثم سيتم دمج 'www.hust.edu.cn' في 'hust.edu.cn'", - "infoAlert4": "الفراغ يعني أن الموقع الأصلي لن يتم دمجه", - "infoAlert5": "إذا لم يتم مطابقة أي قاعدة، فسيتم تعيينها افتراضيًا على المستوى قبل {psl}", - "tagResult": { - "blank": "لا دمج", - "level": "الحفاظ على المستوى {level}" - } - } -} \ No newline at end of file diff --git a/src/i18n/message/app/merge-rule.ts b/src/i18n/message/app/merge-rule.ts deleted file mode 100644 index 173ba961a..000000000 --- a/src/i18n/message/app/merge-rule.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Copyright (c) 2021-present Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import resource from './merge-rule-resource.json' - -export type MergeRuleMessage = { - removeConfirmMsg: string - originPlaceholder: string - mergedPlaceholder: string - errorOrigin: string - duplicateMsg: string - addConfirmMsg: string - infoAlertTitle: string - infoAlert0: string - infoAlert1: string - infoAlert2: string - infoAlert3: string - infoAlert4: string - infoAlert5: string - tagResult: { - blank: string - level: string - } -} - -const mergeRuleMessages: Messages = resource - -export default mergeRuleMessages \ No newline at end of file diff --git a/src/i18n/message/app/operation-resource.json b/src/i18n/message/app/operation-resource.json index 5937ba133..ff1eed3c6 100644 --- a/src/i18n/message/app/operation-resource.json +++ b/src/i18n/message/app/operation-resource.json @@ -42,5 +42,17 @@ "ar": { "confirmTitle": "تأكيد", "successMsg": "بنجاح!" + }, + "tr": { + "confirmTitle": "Doğrulama", + "successMsg": "Başarılı oldu!" + }, + "pl": { + "confirmTitle": "Potwierdzenie", + "successMsg": "Pomyślnie!" + }, + "it": { + "confirmTitle": "Conferma", + "successMsg": "Con successo!" } } \ No newline at end of file diff --git a/src/i18n/message/app/option-resource.json b/src/i18n/message/app/option-resource.json index 948e2f754..5ee7cdd9d 100644 --- a/src/i18n/message/app/option-resource.json +++ b/src/i18n/message/app/option-resource.json @@ -2,12 +2,10 @@ "zh_CN": { "yes": "是", "no": "否", + "on": "始终开启", + "off": "始终关闭", "followBrowser": "跟随浏览器", - "popup": { - "title": "弹窗页", - "max": "只显示前 {input} 条数据，剩下的条目合并显示", - "displaySiteName": "{input} 显示时是否使用网站名称来代替域名" - }, + "permGrantConfirm": "该功能需要授予相关权限", "appearance": { "title": "外观", "displayWhitelist": "{input} 是否在 {contextMenu} 里，显示 {whitelist} 相关功能", @@ -29,30 +27,27 @@ }, "darkMode": { "label": "夜间模式 {input}", - "options": { - "on": "始终开启", - "off": "始终关闭", - "timed": "定时开启" - } + "timed": "定时开启" }, - "animationDuration": "图表初始动画的时长 {input}" + "animationDuration": "图表初始动画的时长 {input}", + "sidePanel": "{input} 是否启用侧边栏视图" }, - "statistics": { + "tracking": { "title": "统计", "autoPauseTrack": "{input} 如果 {maxTime} 内未检测到任何活动 {info}，则暂停统计", - "noActivityInfo": "鼠标和键盘处于非活动状态，并且未处于全屏模式", + "noActivityInfo": "鼠标和键盘处于非活动状态，并且未处于全屏模式，也没有声音播放", "countLocalFiles": "{input} 是否统计使用浏览器 {localFileTime} {info}", - "countTabGroup": "{input} 是否统计标签组的时间 {info}", - "tabGroupInfo": "删除标签组后，数据也会被删除", - "tabGroupsPermGrant": "该功能需要授予相关权限", "localFileTime": "阅读本地文件的时间", "localFilesInfo": "支持 PDF、图片、txt 以及 json 等格式", + "countTabGroup": "{input} 是否统计标签组的时间 {info}", + "tabGroupInfo": "删除标签组后，数据也会被删除", "fileAccessDisabled": "目前不允许访问文件网址，请先在管理界面开启", - "fileAccessFirefox": "很抱歉，该功能在 Firefox 中不支持", "weekStart": "每周的第一天 {input}", - "weekStartAsNormal": "按照惯例" + "weekStartAsNormal": "按照惯例", + "storage": "将数据存储在 {input} 中", + "storageConfirm": "是否要将存储类型更改为 {type}？" }, - "dailyLimit": { + "limit": { "prompt": "受限时显示的提示文本 {input}", "reminder": "{input} 在到期前 {minInput} 分钟发送提醒", "level": { @@ -71,24 +66,26 @@ "strictTitle": "危险操作", "strictContent": "当您选择这个选项之后，如果某个站点触发了每日限制，除了等到第二天自动解锁以外，不允许您手动解锁。如果规则设置不当，很有可能会阻碍您的日常工作！", "pswFormLabel": "解锁密码", - "pswFormAgain": "再次输入" - } + "pswFormAgain": "再次输入", + "2fa": "必须使用 2FA 解锁", + "twoFaTitle": "启用 2FA 验证", + "twoFaScanHint": "使用身份验证器应用扫描二维码或将设置链接导入支持TOTP的密码管理器。", + "twoFaCopyLink": "复制链接", + "twoFaVerifyLabel": "请输入您的身份程序里的 6 位编码以验证正确导入" + }, + "delayDuration": "每次延迟 {input} 分钟" }, "backup": { "title": "数据备份", "type": "远端类型 {input}", "client": "客户端标识 {input}", "meta": { - "none": { - "label": "不开启备份" - }, "gist": { "authInfo": "需要创建一个至少包含 gist 权限的 token" }, "obsidian_local_rest_api": { "endpointInfo": "因为无法为浏览器插件配置跨域，所以只能使用 HTTP 协议" - }, - "web_dav": {} + } }, "label": { "endpoint": "服务地址 {info} {input}", @@ -96,11 +93,9 @@ "account": "账号 {input}", "password": "密码 {input}" }, - "lastTimeTip": "上次备份时间: {lastTime}", "operation": "备份数据", "download": { "btn": "下载数据", - "step2": "确认数据", "willDownload": "待下载数据", "confirmTip": "将下载来自【{clientName}】的 {size} 条数据" }, @@ -108,12 +103,14 @@ "btn": "清除数据", "confirmTip": "将删除【{clientName}】所追踪的 {hostCount} 个站点的 {rowCount} 条数据！" }, + "confirmStep": "确认数据", "clientTable": { "selectTip": "选择客户端", "dataRange": "已备份数据区间", "notSelected": "未选择客户端", "current": "当前" }, + "lastTimeTip": "上次备份时间: {lastTime}", "auto": { "label": "是否开启自动备份", "interval": "每 {input} 分钟备份一次" @@ -123,6 +120,22 @@ "title": "无障碍功能", "chartDecal": "{input} 是否显示图表的贴花图案" }, + "notification": { + "title": "消息推送", + "cycle": { + "label": "消息推送周期 {input}", + "daily": "每天", + "weekly": "每周" + }, + "method": { + "label": "消息推送方式 {input}", + "browser": "浏览器通知", + "callback": { + "label": "HTTP 回调", + "url": "回调 URL {input}" + } + } + }, "resetButton": "恢复默认", "resetSuccess": "成功重置为默认值", "exportButton": "导出设置", @@ -137,12 +150,10 @@ "zh_TW": { "yes": "是", "no": "否", + "on": "始終開啟", + "off": "始終關閉", "followBrowser": "跟隨瀏覽器", - "popup": { - "title": "彈出視窗", - "max": "僅顯示前 {input} 筆資料，其餘項目合併", - "displaySiteName": "{input} 顯示時是否使用網站名稱而非域名" - }, + "permGrantConfirm": "此功能需要相關權限才能運作", "appearance": { "title": "外觀設定", "displayWhitelist": "{input} 是否在 {contextMenu} 顯示 {whitelist} 功能", @@ -164,30 +175,27 @@ }, "darkMode": { "label": "深色模式 {input}", - "options": { - "on": "始終開啟", - "off": "始終關閉", - "timed": "定時開啟" - } + "timed": "定時開啟" }, - "animationDuration": "圖表動畫持續時間 {input}" + "animationDuration": "圖表動畫持續時間 {input}", + "sidePanel": "{input}是否開啟側邊面板" }, - "statistics": { + "tracking": { "title": "統計設定", "autoPauseTrack": "{input} 若 {maxTime} 內無活動 {info} 則暫停追蹤", - "noActivityInfo": "滑鼠與鍵盤無動作且非全螢幕模式時", + "noActivityInfo": "滑鼠跟鍵盤非使用中，未處於全螢幕模式，且沒有聲音撥放中", "countLocalFiles": "{input} 是否統計瀏覽器 {localFileTime} {info}", "localFileTime": "讀取本機檔案時間", "localFilesInfo": "支援 PDF、圖片、txt 及 json 等格式", "countTabGroup": "{input} 是否追蹤分頁群組的時間 {info}", "tabGroupInfo": "刪除分頁群組時，相關的時間追蹤數據也會一併清除。", - "tabGroupsPermGrant": "此功能需要相關權限才能運作", "fileAccessDisabled": "目前不允許存取檔案 URL，請至管理頁面啟用", - "fileAccessFirefox": "抱歉，Firefox 不支援此功能", "weekStart": "每週起始日 {input}", - "weekStartAsNormal": "依慣例" + "weekStartAsNormal": "依慣例", + "storage": "將追蹤資料儲存至{input}", + "storageConfirm": "您想將儲存格式改成{type}嗎？" }, - "dailyLimit": { + "limit": { "prompt": "限制時顯示提示文字 {input}", "reminder": "{input} 時間結束前 {minInput} 分鐘提醒", "level": { @@ -214,9 +222,6 @@ "type": "雲端服務類型 {input}", "client": "用戶端識別碼 {input}", "meta": { - "none": { - "label": "關閉備份" - }, "gist": { "authInfo": "需建立至少包含 gist 權限的 token" }, @@ -233,7 +238,6 @@ "operation": "備份資料", "download": { "btn": "下載", - "step2": "確認資料", "willDownload": "待下載資料", "confirmTip": "將從【{clientName}】下載 {size} 筆資料" }, @@ -241,6 +245,7 @@ "btn": "刪除資料", "confirmTip": "將刪除【{clientName}】追蹤的 {hostCount} 個網站共 {rowCount} 筆資料！" }, + "confirmStep": "確認資料", "clientTable": { "selectTip": "選擇用戶端", "dataRange": "資料範圍", @@ -257,6 +262,22 @@ "title": "無障礙設定", "chartDecal": "{input} 是否顯示圖表裝飾" }, + "notification": { + "title": "通知", + "cycle": { + "label": "通知頻率{input}", + "daily": "每日", + "weekly": "每週" + }, + "method": { + "label": "通知方式 {input}", + "browser": "瀏覽器", + "callback": { + "label": "HTTP 回應", + "url": "回應 URL {input}" + } + } + }, "resetButton": "重設", "resetSuccess": "已恢復預設值！", "exportButton": "匯出設定", @@ -271,12 +292,10 @@ "en": { "yes": "Yes", "no": "No", + "on": "Always on", + "off": "Always off", "followBrowser": "Follow browser", - "popup": { - "title": "Popup Page", - "max": "Show the first {input} data items", - "displaySiteName": "{input} Whether to display the website name instead of URL" - }, + "permGrantConfirm": "This feature requires relevant permissions", "appearance": { "title": "Appearance", "displayWhitelist": "{input} Whether to display {whitelist} in {contextMenu}", @@ -298,30 +317,27 @@ }, "darkMode": { "label": "Dark mode {input}", - "options": { - "on": "Always on", - "off": "Always off", - "timed": "Timed on" - } + "timed": "Timed on" }, - "animationDuration": "The duration of the chart's initial animation {input}" + "animationDuration": "The duration of the chart's initial animation {input}", + "sidePanel": "{input} Whether to enable the side panel" }, - "statistics": { + "tracking": { "title": "Tracking", "autoPauseTrack": "{input} Pause tracking if no activity detected {info} for {maxTime}", - "noActivityInfo": "The mouse and keyboard are inactive and not in full screen mode", + "noActivityInfo": "The mouse and keyboard are inactive, not in full-screen mode, and there is no sound playing", "countLocalFiles": "{input} Whether to track the time when the browser reads {localFileTime} {info}", "localFileTime": "local files", "localFilesInfo": "Supports files of types such as PDF, image, txt and json.", "countTabGroup": "{input} Whether to track the time of tab groups {info}", - "tabGroupInfo": "When you delete a tag group, the data will also be deleted.", - "tabGroupsPermGrant": "This feature requires relevant permissions", + "tabGroupInfo": "When you delete a tab group, the data will also be deleted.", "fileAccessDisabled": "Access to file URLs is currently not allowed. Please enable it on the manage page first", - "fileAccessFirefox": "Sorry, this feature is not supported in Firefox", "weekStart": "The first day for each week {input}", - "weekStartAsNormal": "As Normal" + "weekStartAsNormal": "As Normal", + "storage": "Store the tracking data in {input}", + "storageConfirm": "Do you want to change the storage type to {type}?" }, - "dailyLimit": { + "limit": { "prompt": "Prompt displayed when restricted {input}", "reminder": "{input} Reminder {minInput} minutes before time is up", "level": { @@ -340,17 +356,21 @@ "strictTitle": "Operation confirm", "strictContent": "When you select this option, if a site triggers daily limit, you will not be allowed to manually unblock it other than waiting until the next day. If rules are not set up properly, they can very well hinder your routines!", "pswFormLabel": "Password", - "pswFormAgain": "Re-enter" - } + "pswFormAgain": "Re-enter", + "2fa": "Must use 2FA code to unlock", + "twoFaTitle": "Enable 2FA", + "twoFaScanHint": "Scan the QR code with an authenticator app or import the setup link into a password manager that supports TOTP.", + "twoFaCopyLink": "Copy link", + "twoFaVerifyLabel": "Enter the 6-digit code to verify" + }, + "delayDuration": "Delay for {input} minutes per time" }, "backup": { "title": "Data Backup", "type": "Remote type {input}", "client": "Client name {input}", "meta": { - "none": { - "label": "Always off" - }, + "none": {}, "gist": { "authInfo": "One token with at least gist permission is required" }, @@ -368,7 +388,6 @@ "operation": "Backup", "download": { "btn": "Download", - "step2": "Confirm data", "willDownload": "To be downloaded", "confirmTip": "{size} pieces of data from [{clientName}] will be downloaded" }, @@ -376,6 +395,7 @@ "btn": "Clear", "confirmTip": "{rowCount} pieces of data for {hostCount} sites tracked by [{clientName}] will be deleted!" }, + "confirmStep": "Confirm data", "clientTable": { "selectTip": "Select client", "dataRange": "Range of data", @@ -392,6 +412,22 @@ "title": "Accessibility", "chartDecal": "{input} Whether to display the chart decal" }, + "notification": { + "title": "Notification", + "cycle": { + "label": "Notification cycle {input}", + "daily": "Daily", + "weekly": "Weekly" + }, + "method": { + "label": "Notification method {input}", + "browser": "Browser", + "callback": { + "label": "HTTP Callback", + "url": "Callback URL {input}" + } + } + }, "resetButton": "Reset", "resetSuccess": "Reset to default successfully!", "exportButton": "Export Settings", @@ -406,12 +442,9 @@ "ja": { "yes": "はい", "no": "いいえ", + "on": "常にオン", + "off": "常にオフ", "followBrowser": "ブラウザと同じ", - "popup": { - "title": "ポップアップページ", - "max": "最初の {input} 個のデータのみを表示し、残りのエントリは結合されます", - "displaySiteName": "{input} ドメインの代わりにウェブサイト名を表示するかどうか" - }, "appearance": { "title": "外観", "displayWhitelist": "{input} {contextMenu} に {whitelist} を表示するかどうか", @@ -433,27 +466,22 @@ }, "darkMode": { "label": "ダークモード {input}", - "options": { - "on": "常にオン", - "off": "常にオフ", - "timed": "時限スタート" - } + "timed": "時限スタート" }, "animationDuration": "チャートの初期アニメーションの持続時間 {input}" }, - "statistics": { + "tracking": { "title": "統計", "autoPauseTrack": "{input} アクティビティが検出されなかった場合、{info} {maxTime} の追跡を一時停止します", - "noActivityInfo": "マウスとキーボードが非アクティブで、全画面モードになっていません", "countLocalFiles": "{input} ブラウザで {localFileTime} {info} に費やされた時間をカウントするかどうか", "localFileTime": "ローカルファイルの読み取り", "localFilesInfo": "PDF、画像、txt、jsonを含む", "fileAccessDisabled": "ファイル URL へのアクセスは現在許可されていません。まず管理ページで有効にしてください。", - "fileAccessFirefox": "申し訳ありませんが、この機能はFirefoxではサポートされていません", "weekStart": "週の最初の日 {input}", - "weekStartAsNormal": "いつものように" + "weekStartAsNormal": "いつものように", + "storageConfirm": "ストレージタイプを {type}に変更しますか？" }, - "dailyLimit": { + "limit": { "prompt": "制限時に表示されるプロンプト {input}", "reminder": "{input} 時間切れの {minInput} 分前にリマインダーを送信します", "level": { @@ -480,9 +508,6 @@ "type": "バックアップ方法 {input}", "client": "クライアント名 {input}", "meta": { - "none": { - "label": "バックアップを有効にしない" - }, "gist": { "authInfo": "少なくとも gist 権限を持つトークンが 1 つ必要です" }, @@ -499,7 +524,6 @@ "operation": "バックアップ", "download": { "btn": "ダウンロード", - "step2": "データを確認", "willDownload": "ダウンロードするデータ", "confirmTip": "[{clientName}] から {size} 個のデータがダウンロードされます" }, @@ -507,6 +531,7 @@ "btn": "削除", "confirmTip": "[{clientName}] によって追跡されている {hostCount} サイトの {rowCount} 個のデータが削除されます。" }, + "confirmStep": "データを確認", "clientTable": { "selectTip": "クライアントの選択", "dataRange": "データ範囲", @@ -523,6 +548,20 @@ "title": "ユーザー補助機能", "chartDecal": "{input} チャートデカールを表示するかどうか" }, + "notification": { + "title": "通知", + "cycle": { + "daily": "毎日", + "weekly": "毎週" + }, + "method": { + "label": "通知方法{input}", + "browser": "ブラウザ", + "callback": { + "label": "HTTP Callback" + } + } + }, "resetButton": "リセット", "resetSuccess": "デフォルトに正常にリセット", "exportButton": "設定をエクスポート", @@ -537,12 +576,10 @@ "pt_PT": { "yes": "Sim", "no": "Não", + "on": "Sempre ativo", + "off": "Sempre inativo", "followBrowser": "Usar do navegador", - "popup": { - "title": "Página Pop-up", - "max": "Mostrar os primeiros {input} itens", - "displaySiteName": "{input} Se deve apresentar o nome do site em vez do domínio" - }, + "permGrantConfirm": "Esta funcionalidade precisa de permissões relevantes", "appearance": { "title": "Aparência", "displayWhitelist": "{input} Mostrar {whitelist} no {contextMenu}", @@ -564,27 +601,25 @@ }, "darkMode": { "label": "Modo escuro {input}", - "options": { - "on": "Sempre ativo", - "off": "Sempre inativo", - "timed": "Ativo por tempo" - } + "timed": "Ativo por tempo" }, - "animationDuration": "Duração da animação inicial {input}" + "animationDuration": "Duração da animação inicial {input}", + "sidePanel": "{input} Se ativar ou não o painel lateral" }, - "statistics": { + "tracking": { "title": "Estatísticas", "autoPauseTrack": "{input} Pausar sem atividade {info} por {maxTime}", - "noActivityInfo": "Sem atividade do rato/teclado e não em ecrã completo", + "noActivityInfo": "O mouse e o teclado estão inativos, não está em modo tela cheia, e nenhum som sendo reproduzido", "countLocalFiles": "{input} Contar tempo a {localFileTime} {info}", "localFileTime": "ler ficheiros locais", "localFilesInfo": "Suporta PDF, imagens, txt e json.", + "countTabGroup": "{input} Se quiser acompanhar o tempo da aba{info}", + "tabGroupInfo": "Quando você excluir um grupo de tags, os dados também serão excluídos.", "fileAccessDisabled": "Acesso a URLs de ficheiro não permitido. Ative na página de gestão.", - "fileAccessFirefox": "Não suportado no Firefox", "weekStart": "Primeiro dia da semana {input}", "weekStartAsNormal": "Normal" }, - "dailyLimit": { + "limit": { "prompt": "Aviso quando restrito {input}", "reminder": "{input} Aviso {minInput} minutos antes", "level": { @@ -611,9 +646,6 @@ "type": "Tipo remoto {input}", "client": "Nome do cliente {input}", "meta": { - "none": { - "label": "Sempre inativo" - }, "gist": { "authInfo": "Necessário token com permissão gist" }, @@ -630,7 +662,6 @@ "operation": "Cópia", "download": { "btn": "Transferir", - "step2": "Confirmar dados", "willDownload": "Dados a transferir", "confirmTip": "{size} dados de [{clientName}] serão transferidos" }, @@ -638,6 +669,7 @@ "btn": "Limpar", "confirmTip": "{rowCount} dados de {hostCount} sites de [{clientName}] serão eliminados!" }, + "confirmStep": "Confirmar dados", "clientTable": { "selectTip": "Selecionar cliente", "dataRange": "Intervalo de dados", @@ -647,7 +679,7 @@ "lastTimeTip": "Última cópia: {lastTime}", "auto": { "label": "Cópia automática", - "interval": "executar a cada {input} minutos" + "interval": "e executar a cada {input} minutos" } }, "accessibility": { @@ -656,17 +688,22 @@ }, "resetButton": "Repor", "resetSuccess": "Reposição concluída!", + "exportButton": "Exportar configurações", + "importButton": "Importar configurações", + "exportSuccess": "Configurações exportadas com sucesso", + "importSuccess": "Configurações importadas com sucesso\n", + "importError": "Falha na Importação: Documento de configurações inválido", + "importConfirm": "Configurações importadas com sucesso, recarregue a página para aplicar às mudanças!", + "reloadButton": "Recarregar", "defaultValue": "Predefinido: {default}" }, "uk": { "yes": "Так", "no": "Ні", + "on": "Завжди ввімкнено", + "off": "Завжди вимкнено", "followBrowser": "Як у браузері", - "popup": { - "title": "Вікно розширення", - "max": "Кількість записів для показу: {input}", - "displaySiteName": "{input} Чи відображати назву веб-сайту замість домену" - }, + "permGrantConfirm": "Ця функція потребує відповідних дозволів", "appearance": { "title": "Зовнішній вигляд", "displayWhitelist": "{input} Показувати {whitelist} в {contextMenu}", @@ -688,27 +725,23 @@ }, "darkMode": { "label": "Темний режим: {input}", - "options": { - "on": "Увімкнено", - "off": "Вимкнено", - "timed": "За розкладом" - } + "timed": "За розкладом" }, "animationDuration": "Тривалість початкової анімації діаграми {input}" }, - "statistics": { + "tracking": { "title": "Статистика", - "autoPauseTrack": "{input} Призупинити відстеження, якщо не виявлено активності {info} протягом {maxTime}", - "noActivityInfo": "Миша та клавіатура неактивні та не в повноекранному режимі", - "countLocalFiles": "{input} Враховувати час {localFileTime} {info} в браузері", + "autoPauseTrack": "{input} Призупинити відстеження, якщо не виявлено активності протягом {maxTime} {info}", + "countLocalFiles": "{input} Враховувати час {localFileTime} в браузері {info}", "localFileTime": "перегляду локального файлу", "localFilesInfo": "Підтримуються файли PDF, зображення, текстові та формат json", + "countTabGroup": "{input} Відстежувати час груп вкладок {info}", + "tabGroupInfo": "Якщо видалити групу вкладок, дані також видаляться.", "fileAccessDisabled": "Доступ до URL-адрес файлу наразі не дозволено. Спершу ввімкніть на сторінці керування", - "fileAccessFirefox": "На жаль, ця функція не підтримується у Firefox", "weekStart": "Перший день тижня: {input}", "weekStartAsNormal": "Типово" }, - "dailyLimit": { + "limit": { "prompt": "Запит, який відображається під час обмеження {input}", "reminder": "{input} Нагадування за {minInput} хвилин до закінчення часу", "level": { @@ -727,7 +760,7 @@ "strictTitle": "Підтвердження операції", "strictContent": "Коли ви вибираєте цю опцію, якщо сайт активує щоденний ліміт, ви не зможете розблокувати його вручну до наступного дня. Якщо не налаштувати правила належним чином, вони можуть дуже заважати вашій роботі!", "pswFormLabel": "Пароль", - "pswFormAgain": "Змінити" + "pswFormAgain": "Повторне введення" } }, "backup": { @@ -735,9 +768,6 @@ "type": "Тип резервного копіювання {input}", "client": "Назва клієнта {input}", "meta": { - "none": { - "label": "Завжди вимкнено" - }, "gist": { "authInfo": "Потрібно вказати токен для доступу gist" }, @@ -754,7 +784,6 @@ "operation": "Зробити резервну копію", "download": { "btn": "Завантажити", - "step2": "Підтвердження даних", "willDownload": "До завантаження", "confirmTip": "Буде завантажено {size} елементів даних із [{clientName}]" }, @@ -762,6 +791,7 @@ "btn": "Очистити", "confirmTip": "Буде видалено {rowCount} елементів даних для {hostCount} сайтів, записаних у [{clientName}]!" }, + "confirmStep": "Підтвердження даних", "clientTable": { "selectTip": "Вибір клієнта", "dataRange": "Діапазон даних", @@ -776,21 +806,26 @@ }, "accessibility": { "title": "Доступність", - "chartDecal": "{input} Чи відображати наклейку діаграми" + "chartDecal": "{input} Показувати наклейку діаграми" }, "resetButton": "Скинути", "resetSuccess": "Скидання виконано успішно!", + "exportButton": "Експортувати налаштування", + "importButton": "Імпортувати налаштування", + "exportSuccess": "Налаштування успішно експортовано", + "importSuccess": "Налаштування успішно імпортовано", + "importError": "Помилка імпорту: неприпустимий файл налаштувань", + "importConfirm": "Налаштування успішно імпортовано. Перезавантажте сторінку для застосування змін!", + "reloadButton": "Перезавантажити", "defaultValue": "Типово: {default}" }, "es": { "yes": "Sí", "no": "No", + "on": "Siempre encendido", + "off": "Siempre apagado", "followBrowser": "Igual que el navegador", - "popup": { - "title": "Página emergente", - "max": "Mostrar los primeros {input} elementos de datos", - "displaySiteName": "{input} Si se debe mostrar el nombre del sitio web en lugar del dominio" - }, + "permGrantConfirm": "Esta función requiere permisos pertinentes", "appearance": { "title": "Apariencia", "displayWhitelist": "{input} Mostrar {whitelist} en {contextMenu}", @@ -812,30 +847,23 @@ }, "darkMode": { "label": "Modo oscuro {input}", - "options": { - "on": "Siempre encendido", - "off": "Siempre apagado", - "timed": "Cronometrado" - } + "timed": "Cronometrado" }, "animationDuration": "Duración de la animación inicial del gráfico {input}" }, - "statistics": { + "tracking": { "title": "Estadísticas", "autoPauseTrack": "{input} Pausar el seguimiento si no se detecta actividad {info} durante {maxTime}", - "noActivityInfo": "El mousse y el teclado están inactivos y no en modo de pantalla completa", "countLocalFiles": "{input} Contar el tiempo para {localFileTime} {info} en el navegador", "localFileTime": "leer un archivo local", "localFilesInfo": "Soporta archivos de tipos como PDF, imagen, TXT y JSON", "countTabGroup": "{input} Rastrear el tiempo de los grupos de pestañas {info}", "tabGroupInfo": "Al eliminar un grupo de pestañas, sus datos también se borrarán.", - "tabGroupsPermGrant": "Esta función requiere permisos pertinentes", "fileAccessDisabled": "Actualmente no se permite el acceso a las URL de archivos. Habilítelo primero en la página de administración", - "fileAccessFirefox": "Lo sentimos, esta función no es compatible con Firefox", "weekStart": "El primer día de cada semana {input}", "weekStartAsNormal": "Como normalmente" }, - "dailyLimit": { + "limit": { "prompt": "Punto mostrado cuando está restringido {input}", "reminder": "{input} Recordatorio {minInput} minutos antes de que se acabe el tiempo", "level": { @@ -862,9 +890,6 @@ "type": "Tipo remoto {input}", "client": "Nombre del cliente {input}", "meta": { - "none": { - "label": "Siempre apagado" - }, "gist": { "authInfo": "Se requiere un token con al menos los permisos esenciales" }, @@ -881,7 +906,6 @@ "operation": "Copia de seguridad", "download": { "btn": "Descargar", - "step2": "Confirmar datos", "willDownload": "Para ser descargado", "confirmTip": "Se descargarán {size} piezas de datos de [{clientName}]" }, @@ -889,6 +913,7 @@ "btn": "Limpiar", "confirmTip": "¡Se eliminarán {rowCount} piezas de datos para {hostCount} sitios rastreados por [{clientName}]!" }, + "confirmStep": "Confirmar datos", "clientTable": { "selectTip": "Seleccionar cliente", "dataRange": "Rango de datos", @@ -919,12 +944,10 @@ "de": { "yes": "Ja", "no": "Nein", + "on": "Immer an", + "off": "Immer aus", "followBrowser": "Browser verfolgen", - "popup": { - "title": "Popup-Seite", - "max": "Zeige die ersten {input} Datenelemente", - "displaySiteName": "{input} Ob der Websitename anstelle der Domäne angezeigt werden soll" - }, + "permGrantConfirm": "Dieses Feature benötigt entsprechende Berechtigungen", "appearance": { "title": "Aussehen", "displayWhitelist": "{input} {whitelist} in {contextMenu} anzeigen", @@ -932,8 +955,8 @@ "contextMenu": "Kontextmenü", "displayBadgeText": "{input} {timeInfo} in {icon} anzeigen", "badgeBgColor": "Die Hintergrundfarbe des Textes auf dem Symbol {input}", - "icon": "das Symbol der Erweiterung", - "badgeTextContent": "die Besuchszeit der aktuellen Webseite", + "icon": "Icon der Erweiterung", + "badgeTextContent": "Besuchszeit der aktuellen Webseite", "locale": { "label": "Sprache {input}", "changeConfirm": "Die Sprache wurde erfolgreich geändert. Bitte lade diese Seite neu!", @@ -946,27 +969,29 @@ }, "darkMode": { "label": "Dunkler Modus {input}", - "options": { - "on": "Immer an", - "off": "Immer aus", - "timed": "Zeitgesteuert" - } - } + "timed": "Zeitsteuerung aktiv" + }, + "animationDuration": "Die Dauer der ersten Animation des Diagramms {input}", + "sidePanel": "{input} Ob das Seitenpanel aktiviert wird" }, - "statistics": { + "tracking": { "title": "Statistik", "autoPauseTrack": "{input} Tracking pausieren, wenn {maxTime} keine Aktivität erkannt wird {info}", - "noActivityInfo": "Die Maus und die Tastatur sind inaktiv und nicht im Vollbildmodus", + "noActivityInfo": "Maus und Tastatur sind inaktiv, nicht im Vollbildmodus und es gibt kein Audio", "countLocalFiles": "{input} Zeit an {localFileTime} {info} im Browser zählen", "localFileTime": "eine lokale Datei lesen", "localFilesInfo": "Unterstützt Dateitypen, wie PDF, Bilder, .txt und .json", + "countTabGroup": "{input} Ob die Zeit der Tab-Gruppen {info} verfolgt werden soll", + "tabGroupInfo": "Wenn Sie eine Tag-Gruppe löschen, werden auch die Daten gelöscht.", "fileAccessDisabled": "Der Zugriff auf Datei-URLs ist derzeit nicht erlaubt. Bitte aktiviere ihn zuerst auf der Verwaltungsseite", - "fileAccessFirefox": "Leider wird diese Funktion in Firefox nicht unterstützt", "weekStart": "Erster Tag der Woche {input}", - "weekStartAsNormal": "Wie normal" + "weekStartAsNormal": "Wie normal", + "storage": "Speichern der Trackingdaten in {input}", + "storageConfirm": "Möchten Sie die Speicherart ändern zu {type}?" }, - "dailyLimit": { + "limit": { "prompt": "Eingabeaufforderung wird angezeigt, wenn eingeschränkt {input}", + "reminder": "{input} Erinnerung {minInput} Minuten bevor die Zeit abgelaufen ist", "level": { "label": "Wie man bei eingeschränktem {input} entsperrt", "nothing": "Erlaube das direkte Entsperren auf der Admin-Seite", @@ -981,17 +1006,22 @@ }, "strict": "Entsperren trotzdem nicht zulassen", "strictTitle": "Operation bestätigen", - "strictContent": "Wenn Sie diese Option wählen, wenn eine Site Tageslimit auslöst, Sie dürfen die Blockierung nur bis zum nächsten Tag manuell entsperren. Wenn Regeln nicht richtig eingerichtet sind, können sie sehr gut Ihre Routinen behindern!" - } + "strictContent": "Wenn Sie diese Option wählen, wenn eine Site Tageslimit auslöst, Sie dürfen die Blockierung nur bis zum nächsten Tag manuell entsperren. Wenn Regeln nicht richtig eingerichtet sind, können sie sehr gut Ihre Routinen behindern!", + "pswFormLabel": "Passwort", + "pswFormAgain": "Erneut eingeben", + "2fa": "Zum Entsperren ist ein 2FA‑Code erforderlich", + "twoFaTitle": "Zwei Faktor Authentifikation - 2FA nutzen", + "twoFaScanHint": "Scanne den QR‑Code mit einer Authentifikation‑App oder importiere den Einrichtungslink in einen TOTP‑fähigen Passwortmanager.", + "twoFaCopyLink": "Link kopieren", + "twoFaVerifyLabel": "Zur Bestätigung den 6‑stelligen Code eingeben" + }, + "delayDuration": "Verzögerung für {input} Minuten pro Vorgang" }, "backup": { "title": "Datensicherung", "type": "Remote Typ {input}", "client": "Kundenname {input}", "meta": { - "none": { - "label": "Immer aus" - }, "gist": { "authInfo": "Ein Token mit mindestens gist Berechtigung ist erforderlich" }, @@ -1008,7 +1038,6 @@ "operation": "Backup", "download": { "btn": "Herunterladen", - "step2": "Daten bestätigen", "willDownload": "Zum Herunterladen", "confirmTip": "Lädt {size} Datenstücke von [{clientName}] herunter" }, @@ -1016,6 +1045,7 @@ "btn": "Löschen", "confirmTip": "{rowCount} Datenelemente für {hostCount} Websites, die von [{clientName}] verfolgt werden, werden gelöscht!" }, + "confirmStep": "Daten bestätigen", "clientTable": { "selectTip": "Wählen Sie ein Terminal aus", "dataRange": "Datenreichweite", @@ -1032,25 +1062,46 @@ "title": "Barrierefreiheit", "chartDecal": "{input} Ob das Diagramm-Aufkleber angezeigt werden soll" }, + "notification": { + "title": "Benachrichtigungen", + "cycle": { + "label": "Benachrichtigungszyklus {input}", + "daily": "Täglich", + "weekly": "Wöchentlich" + }, + "method": { + "label": "Nachrichtenmethode {input}", + "browser": "Browser", + "callback": { + "label": "HTTP Callback", + "url": "Callback URL {input}" + } + } + }, "resetButton": "Zurücksetzen", "resetSuccess": "Auf Standardwerte zurückgesetzt!", + "exportButton": "Einstellungen exportieren", + "importButton": "Einstellungen importieren", + "exportSuccess": "Einstellungen erfolgreich exportiert", + "importSuccess": "Einstellungen erfolgreich importiert", + "importError": "Import fehlgeschlagen: Ungültige Konfigurationsdatei", + "importConfirm": "Einstellungen erfolgreich importiert. Bitte laden Sie die Seite neu, um die Änderungen zu übernehmen!", + "reloadButton": "Neu laden", "defaultValue": "Standard: {default}" }, "fr": { "yes": "Oui", "no": "Non", + "on": "Toujours activé", + "off": "Toujours éteint", "followBrowser": "Suivre le navigateur", - "popup": { - "title": "Page pop-up", - "max": "Afficher les {input} premiers éléments de données", - "displaySiteName": "{input} S'il faut afficher le nom du site Web au lieu du domaine" - }, + "permGrantConfirm": "Cette fonctionnalité nécessite des autorisations appropriées", "appearance": { "title": "Apparence", - "displayWhitelist": "{input} S'il faut afficher là {whitelist} dans {contextMenu}", - "whitelistItem": "whitelist related shortcuts", - "contextMenu": "le menu contextuel.", - "displayBadgeText": "{input} S'il faut afficher là {timeInfo} dans {icon}", + "displayWhitelist": "{input} S'il faut afficher les {whitelist} dans {contextMenu}", + "whitelistItem": "raccourcis liés à la liste blanche", + "contextMenu": "le menu contextuel", + "displayBadgeText": "{input} S'il faut afficher {timeInfo} dans {icon}", "badgeBgColor": "La couleur de fond du texte sur l'icône {input}", "icon": "l'icône de l'extension", "badgeTextContent": "le temps de navigation du site actuel", @@ -1060,40 +1111,37 @@ "reloadButton": "Redémarrer" }, "printInConsole": { - "label": "{input} S'il faut imprimer {info} dans là {console}", + "label": "{input} S'il faut afficher {info} dans la {console}", "console": "console", "info": "le nombre de visites du site actuel aujourd'hui" }, "darkMode": { "label": "Mode sombre {input}", - "options": { - "on": "Toujours On", - "off": "Toujours éteint", - "timed": "Horaire" - } + "timed": "Horaire" }, - "animationDuration": "La durée de l'animation initiale du graphique {input}" + "animationDuration": "La durée de l'animation initiale du graphique {input}", + "sidePanel": "{input} Autoriser l'affichage du panneau latéral" }, - "statistics": { + "tracking": { "title": "Statistiques", "autoPauseTrack": "{input} Pause de suivi si aucune activité n'a détecté {info} pour {maxTime}", - "noActivityInfo": "La souris et le clavier sont inactifs et non en mode plein écran", - "countLocalFiles": "{input} S'il faut compter le temps jusqu'à {localFileTime} {info} dans le navigateur", + "noActivityInfo": "La souris et le clavier sont inactifs, pas en plein écran, et il n'y a pas de son joué", + "countLocalFiles": "{input} S'il faut compter le temps passé à {localFileTime} {info} dans le navigateur", "localFileTime": "lire un fichier local", "localFilesInfo": "Prend en charge les fichiers de types tels que PDF, image, txt et json.", "countTabGroup": "{input} Suivre le temps des groupes d'onglets {info}", "tabGroupInfo": "Lorsque vous supprimez un groupe d'onglets, les données seront également supprimées.", - "tabGroupsPermGrant": "Cette fonctionnalité nécessite des autorisations pertinentes", - "fileAccessDisabled": "L'accès aux URL des fichiers n'est actuellement pas autorisé. Veuillez d'abord l'activer dans la page de gestion.", - "fileAccessFirefox": "Désolé, cette fonctionnalité n'est pas prise en charge dans Firefox", + "fileAccessDisabled": "L'accès aux URL des fichiers n'est actuellement pas autorisé. Veuillez d'abord l'activer dans la page de gestion", "weekStart": "Le premier jour de chaque semaine {input}", - "weekStartAsNormal": "Comme d'habitude" + "weekStartAsNormal": "Comme d'habitude", + "storage": "Stocker les données de suivi dans {input}", + "storageConfirm": "Voulez-vous changer le type de stockage en {type} ?" }, - "dailyLimit": { + "limit": { "prompt": "Invite affichée en cas de restriction {input}", "reminder": "{input} Rappel {minInput} minutes avant la fin du temps", "level": { - "label": "Comment déverrouiller en étant restreint {input}", + "label": "Comment déverrouiller en étant limité {input}", "nothing": "Autoriser le déverrouillage direct sur la page d'administration", "password": "Vous devez entrer le mot de passe pour déverrouiller", "verification": "Vous devez entrer le code de vérification pour déverrouiller", @@ -1104,21 +1152,24 @@ "hard": "Strict", "disgusting": "Dégoûtant" }, - "strict": "Ne pas autoriser le déblocage quand même", + "strict": "Ne pas autoriser le déblocage", "strictTitle": "Confirmation de l'opération", "strictContent": "Lorsque vous sélectionnez cette option, si un site déclenche une limite quotidienne, vous ne serez pas autorisé à le débloquer manuellement sauf en attendant le lendemain. Si les règles ne sont pas correctement configurées, elles peuvent très bien gêner vos routines !", "pswFormLabel": "Mot de passe", - "pswFormAgain": "Retapez" - } + "pswFormAgain": "Retapez", + "2fa": "Utilisez le code 2FA pour déverrouiller", + "twoFaTitle": "Activer l'authentification à deux facteurs (A2F)", + "twoFaScanHint": "Scannez le code QR avec une application d'authentification ou importez le lien d'installation dans un gestionnaire de mots de passe qui prend en charge TOTP.", + "twoFaCopyLink": "Copier le lien", + "twoFaVerifyLabel": "Entrez le code à 6 chiffres pour verifier" + }, + "delayDuration": "Délai additionnel de {input} minutes à chaque fois" }, "backup": { "title": "Sauvegarde des données", - "type": "Type distant {input}", + "type": "Choix de la sauvegarde {input}", "client": "Nom du client {input}", "meta": { - "none": { - "label": "Toujours éteint" - }, "gist": { "authInfo": "Un jeton avec au moins une permission de gist est requis" }, @@ -1135,7 +1186,6 @@ "operation": "Sauvegarder", "download": { "btn": "Télécharger", - "step2": "Confirmer les données", "willDownload": "À télécharger", "confirmTip": "{size} éléments de données de [{clientName}] seront téléchargés" }, @@ -1143,6 +1193,7 @@ "btn": "Effacer", "confirmTip": "Les données {rowCount} pour les sites {hostCount} suivis par [{clientName}] seront supprimées !" }, + "confirmStep": "Confirmer les données", "clientTable": { "selectTip": "Sélectionnez le client", "dataRange": "Plage de données", @@ -1157,7 +1208,23 @@ }, "accessibility": { "title": "Accessibilité", - "chartDecal": "{input} S'il faut afficher l'autocollant de la carte" + "chartDecal": "{input} afficher les motifs de la carte" + }, + "notification": { + "title": "Notification", + "cycle": { + "label": "Cycle des notifications {input}", + "daily": "Quotidien", + "weekly": "Hebdomadaire" + }, + "method": { + "label": "Méthode de notification {input}", + "browser": "Navigateur Web", + "callback": { + "label": "HTTP Callback", + "url": "Callback URL {input}" + } + } }, "resetButton": "Réinitialiser", "resetSuccess": "Remise à zéro avec succès !", @@ -1173,11 +1240,9 @@ "ru": { "yes": "Да", "no": "Нет", - "popup": { - "title": "Всплывающее окно", - "max": "Показать первые {input} элементов данных", - "displaySiteName": "{input} Отображать ли имя веб-сайта вместо домена" - }, + "on": "Всегда включен", + "off": "Всегда выключен", + "followBrowser": "Как в браузере", "appearance": { "title": "Появление", "displayWhitelist": "{input} Отображать ли {whitelist} в {contextMenu}", @@ -1189,43 +1254,130 @@ "badgeTextContent": "время просмотра текущего веб-сайта", "locale": { "label": "Язык {input}", + "changeConfirm": "Язык был успешно изменён, пожалуйста, перезагрузите эту страницу!", "reloadButton": "Обновить" }, "printInConsole": { - "console": "консоль" + "label": "{input} Отображать ли {info} в {console}", + "console": "консоль", + "info": "посещений текущего сайта за сегодня" }, "darkMode": { "label": "Тёмный режим {input}", - "options": { - "on": "Всегда включен" - } + "timed": "По времени" }, - "animationDuration": "Длительность начальной анимации графика {input}" + "animationDuration": "Длительность начальной анимации графика {input}", + "sidePanel": "{input} включает ли боковую панель" }, - "statistics": { + "tracking": { "title": "Статистика", - "localFilesInfo": "Поддержка типов файлов, таких как PDF, изображения, txt и json." + "autoPauseTrack": "{input} Приостановить отслеживание, если нет активности {info} в течение {maxTime}", + "noActivityInfo": "Мышь и клавиатура неактивны, не в полноэкранном режиме, и нет воспроизводимого звука.", + "countLocalFiles": "{input} Отслеживать ли время, когда браущер читает {localFileTime} {info}", + "localFilesInfo": "Поддержка типов файлов, таких как PDF, изображения, txt и json.", + "countTabGroup": "{input} Отслеживать время для групп вкладок {info}", + "tabGroupInfo": "При удалении группы вкладок данные также будут удалены.", + "fileAccessDisabled": "Доступ к URL-адресам файлов в настоящее время запрещен. Пожалуйста, сначала включите его на странице управления", + "weekStart": "Первый день каждой недели {input}", + "weekStartAsNormal": "Как обычно (Воскресенье)", + "storage": "Сохранять данные отслеживания в {input}", + "storageConfirm": "Вы хотите изменить тип хранилища на {type}" + }, + "limit": { + "prompt": "Шаблон, отображаемый при ограниченных {input}", + "reminder": "{input} Напоминать за {minInput} минут до окончания времени", + "level": { + "label": "Как разблокировать при ограничении {input}", + "nothing": "Разрешить прямую разблокировку на странице администратора", + "password": "Необходимо ввести пароль для разблокировки", + "verification": "Необходимо ввести проверочный код для разблокировки", + "passwordLabel": "Пароль для разблокировки {input}", + "verificationLabel": "Сложность проверочного кода {input}", + "verificationDifficulty": { + "easy": "Лёгкий", + "hard": "Сложный", + "disgusting": "Отвратительный" + }, + "strict": "Не разрешать разблокировку при любых обстоятельствах", + "strictTitle": "Подтверждение операции", + "strictContent": "При выборе этой опции, если сайт вызывает ежедневное ограничение, вам не будет разрешено разблокировать его вручную, кроме ожидания, до следующего дня. Если правила настроены неправильно, они могут очень затруднять ваши процедуры!", + "pswFormLabel": "Пароль", + "pswFormAgain": "Введите повторно" + } }, "backup": { "title": "Резервное копирование данных", + "type": "Дистанционный тип {input}", + "client": "Наименование клиента {input}", + "meta": { + "gist": { + "authInfo": "Необходим хотя бы один Gist токен с разрешением" + }, + "obsidian_local_rest_api": { + "endpointInfo": "Доступен только HTTP, так как CORS не может быть настроен для страниц расширений" + } + }, + "label": { + "endpoint": "Конечный адрес {info} {input}", + "path": "Путь к директории {input}", + "account": "Имя пользователя {input}", + "password": "Пароль {input}" + }, "operation": "Резервное копирование", "download": { - "btn": "Скачать" + "btn": "Скачать", + "willDownload": "Для скачивания", + "confirmTip": "{size} фрагментов данных из [{clientName}] будут загружены" + }, + "clear": { + "btn": "Очистить", + "confirmTip": "{rowCount} фрагментов данных для {hostCount} сайтов, отслеживаемых [{clientName}] будут удалены!" + }, + "confirmStep": "Подтвердить данные", + "clientTable": { + "selectTip": "Выбрать клиент", + "dataRange": "Диапазон данных", + "notSelected": "Клиент не выбран", + "current": "Текущий" + }, + "lastTimeTip": "Время последнего резервного копирования: {lastTime}", + "auto": { + "label": "Включить ли автоматическое резервное копирование?", + "interval": "и запускать каждые {input} минут" + } + }, + "accessibility": { + "title": "Специальные возможности", + "chartDecal": "{input} Отображать клетки на графике" + }, + "notification": { + "title": "Уведомление", + "cycle": { + "label": "Цикл уведомлений {input}", + "daily": "Ежедневно", + "weekly": "Еженедельно" + }, + "method": { + "label": "Метод оповещения {input}" } }, "resetButton": "Сброс", "resetSuccess": "Сброс к настройкам по умолчанию выполнен успешно!", + "exportButton": "Экспорт настроек", + "importButton": "Импорт настроек", + "exportSuccess": "Настройки успешно экспортированы", + "importSuccess": "Настройки успешно импортированы", + "importError": "Не удалось импортировать: недопустимый файл настроек", + "importConfirm": "Настройки успешно импортированы, пожалуйста, перезагрузите страницу, чтобы применить изменения!", + "reloadButton": "Обновить", "defaultValue": "По умолчанию: {default}" }, "ar": { "yes": "نعم", "no": "لا", + "on": "تفعيل دائم", + "off": "إيقاف دائم", "followBrowser": "نفس وضع المتصفح", - "popup": { - "title": "صفحة منبثقة", - "max": "عرض أول {input} عنصر من البيانات", - "displaySiteName": "{input} هل سيتم عرض اسم الموقع بدلاً من النطاق" - }, "appearance": { "title": "المظهر", "displayWhitelist": "{input} هل يتم عرض {whitelist} في {contextMenu}", @@ -1247,30 +1399,23 @@ }, "darkMode": { "label": "الوضع الداكن {input}", - "options": { - "on": "تفعيل دائم", - "off": "إيقاف دائم", - "timed": "تفعيل مؤقت" - } + "timed": "تفعيل مؤقت" }, "animationDuration": "مدة تحريك الرسوم البيانية {input}" }, - "statistics": { + "tracking": { "title": "الإحصائيات", "autoPauseTrack": "{input} إيقاف تتبع الوقت إذا لم يكن هناك تفاعل {info} لمدة {maxTime}", - "noActivityInfo": "الفأرة ولوحة المفاتيح غير نشطة والشاشة ليست في وضع ملء الشاشة", "countLocalFiles": "{input} هل يتم حساب الوقت عند فتح {localFileTime} في المتصفح {info}", "localFileTime": "الملفات المحلية", "localFilesInfo": "يدعم ملفات مثل PDF، الصور، txt و json.", "countTabGroup": "{input} هل يتم تتبع وقت مجموعات علامات التبويب {info}", "tabGroupInfo": "عند حذف مجموعة علامات تبويب، سيتم حذف البيانات أيضًا.", - "tabGroupsPermGrant": "هذه الميزة تتطلب أذونات ذات صلة", "fileAccessDisabled": "الوصول إلى عناوين الملفات غير مسموح به حاليًا. يرجى تفعيل الخاصية من صفحة الإدارة أولاً", - "fileAccessFirefox": "عذراً، هذه الميزة غير مدعومة في فايرفوكس", "weekStart": "اليوم الأول لكل أسبوع {input}", "weekStartAsNormal": "بشكل عادي" }, - "dailyLimit": { + "limit": { "prompt": "رسالة التنبيه عند التقييد {input}", "reminder": "{input} تذكير {minInput} دقائق قبل انتهاء الوقت", "level": { @@ -1297,9 +1442,6 @@ "type": "نوع الربط الخارجي {input}", "client": "اسم العميل {input}", "meta": { - "none": { - "label": "معطّل دائمًا" - }, "gist": { "authInfo": "مطلوب رمز وصول واحد على الأقل مع صلاحية Gist" }, @@ -1316,7 +1458,6 @@ "operation": "إنشاء نسخة إحتياطية", "download": { "btn": "تحميل", - "step2": "تأكيد البيانات", "willDownload": "ليتم تحميله", "confirmTip": "سيتم تنزيل {size} من البيانات من [{clientName}]" }, @@ -1324,6 +1465,7 @@ "btn": "مسح", "confirmTip": "سيتم حذف {rowCount} من البيانات لـ {hostCount} موقعًا التي يتتبعها [{clientName}]!" }, + "confirmStep": "تأكيد البيانات", "clientTable": { "selectTip": "اختر عميلاً", "dataRange": "مجال البيانات", @@ -1350,5 +1492,437 @@ "importConfirm": "تم استيراد الإعدادات بنجاح، يرجى إعادة تحميل الصفحة لتطبيق التغييرات!", "reloadButton": "إعادة التحميل", "defaultValue": "الوضع الإفتراضي: {default}" + }, + "tr": { + "yes": "Evet", + "no": "Hayır", + "on": "Her zaman açık", + "off": "Her zaman kapalı", + "followBrowser": "Tarayıcıyı takip et", + "permGrantConfirm": "Bu özellik ilgili izinleri gerektirir", + "appearance": { + "title": "Görünüm", + "displayWhitelist": "{input} {contextMenu} içinde {whitelist} gösterilip gösterilmeyeceğini seçin", + "whitelistItem": "beyaz liste ile ilgili kısayollar", + "contextMenu": "içerik menüsü", + "displayBadgeText": "{input} {timeInfo} öğesini {icon} içinde gösterip göstermemeyi seçin", + "badgeBgColor": "Simge üzerindeki metnin arka plan rengi {input}", + "icon": "uzantı simgesi", + "badgeTextContent": "mevcut web sitesinin gezinme süresi", + "locale": { + "label": "Dil {input}", + "changeConfirm": "Dil başarıyla değiştirildi, lütfen bu sayfayı yeniden yükleyin!", + "reloadButton": "Yeniden yükle" + }, + "printInConsole": { + "label": "{input} {console} içinde {info} yazdırılıp yazdırılmayacağını seçin", + "console": "konsol", + "info": "bugün mevcut web sitesinin ziyaret sayısı" + }, + "darkMode": { + "label": "Karanlık mod {input}", + "timed": "Zamanlanmış" + }, + "animationDuration": "Grafiğin ilk animasyonunun süresi {input}", + "sidePanel": "{input} Yan panelin gösterilip gösterilmeyeceğini seçin" + }, + "tracking": { + "title": "İzleme", + "autoPauseTrack": "{input} {maxTime} süresince herhangi bir etkinlik algılanmazsa izlemeyi duraklat {info}", + "noActivityInfo": "Fare ve klavye etkin değil, tam ekran modunda değil ve ses çalınmıyor", + "countLocalFiles": "{input} Tarayıcının {localFileTime} {info} dosyasını okuduğu zamanı izlemek isteyip istemediğinizi seçin", + "localFileTime": "yerel dosyalar", + "localFilesInfo": "PDF, resim, txt ve json gibi dosya türlerini destekler.", + "countTabGroup": "{input} Sekme gruplarının zamanını takip etmek isteyip istemediğinizi seçin {info}", + "tabGroupInfo": "Bir etiket grubunu sildiğinizde, veriler de silinir.", + "fileAccessDisabled": "Dosya URL'lerine erişim şu anda izin verilmiyor. Lütfen önce yönetim sayfasında bunu etkinleştirin", + "weekStart": "Her haftanın ilk günü {input}", + "weekStartAsNormal": "Normal", + "storage": "İzleme verilerini {input} içinde saklayın.", + "storageConfirm": "Depolama türünü {type} olarak değiştirmek ister misiniz?" + }, + "limit": { + "prompt": "Kısıtlı olduğunda gösterilecek uyarı {input}", + "reminder": "{input} Süre dolmadan {minInput} dakika önce hatırlatma", + "level": { + "label": "Kısıtlıyken kilit nasıl açılsın {input}", + "nothing": "Yönetici sayfasında doğrudan kilit açmaya izin ver", + "password": "Kilidi açmak için şifre girilmelidir", + "verification": "Kilidi açmak için doğrulama kodunu girmeniz gerekir", + "passwordLabel": "Kilidi açmak için şifre {input}", + "verificationLabel": "Doğrulama kodunun zorluğu {input}", + "verificationDifficulty": { + "easy": "Kolay", + "hard": "Zor", + "disgusting": "İğrenç" + }, + "strict": "Her halükarda kilidin açılmasına izin verme", + "strictTitle": "İşlemi onayla", + "strictContent": "Bu seçeneği seçtiğinizde, bir site günlük sınırı tetiklediğinde, ertesi güne kadar beklemek dışında manuel olarak engellemeyi kaldırmanız mümkün olmayacaktır. Kurallar doğru şekilde ayarlanmazsa, günlük rutinlerinizi büyük ölçüde engelleyebilirler!", + "pswFormLabel": "Şifre", + "pswFormAgain": "Yeniden girin" + } + }, + "backup": { + "title": "Veri Yedekleme", + "type": "Uzaktan yedekleme tipi {input}", + "client": "Uygulama adı {input}", + "meta": { + "gist": { + "authInfo": "Gist iznine sahip bir token gereklidir" + }, + "obsidian_local_rest_api": { + "endpointInfo": "Uzantı sayfaları için CORS yapılandırılamadığından yalnızca HTTP kullanılabilir" + } + }, + "label": { + "endpoint": "Uç nokta adresi {info} {input}", + "path": "Dizin yolu {input}", + "account": "Kullanıcı Adı {input}", + "password": "Şifre {input}" + }, + "operation": "Yedekleme", + "download": { + "btn": "İndir", + "willDownload": "İndirilecek", + "confirmTip": "[{clientName}] {size} adet veri indirilecektir" + }, + "clear": { + "btn": "Temizle", + "confirmTip": "[{clientName}] tarafından izlenen {hostCount} siteye ait {rowCount} adet veri silinecek!" + }, + "confirmStep": "Verileri onaylayın", + "clientTable": { + "selectTip": "Uygulama seç", + "dataRange": "Veri aralığı", + "notSelected": "Uygulama seçilmedi", + "current": "Şimdiki" + }, + "lastTimeTip": "Son yedekleme zamanı: {lastTime}", + "auto": { + "label": "Otomatik yedeklemeyi etkinleştirip etkinleştirmemeyi seçin", + "interval": "ve her {input} dakikada bir çalıştırın" + } + }, + "accessibility": { + "title": "Erişilebilirlik", + "chartDecal": "{input} Grafik çıkartmasını gösterip göstermemeyi seçin" + }, + "notification": { + "title": "Bildirim", + "cycle": { + "label": "Bildirim döngüsü {input}", + "daily": "Günlük", + "weekly": "Haftalık" + }, + "method": { + "label": "Bildirim methodu {input}", + "browser": "Tarayıcı", + "callback": { + "label": "HTTP Callback", + "url": "Callback URL {input}" + } + } + }, + "resetButton": "Sıfırla", + "resetSuccess": "Varsayılan ayarlara sıfırlama işlemi başarıyla tamamlandı!", + "exportButton": "Ayarları Dışa Aktar", + "importButton": "Ayarları İçe Aktar", + "exportSuccess": "Ayarlar başarıyla dışa aktarıldı", + "importSuccess": "Ayarlar başarıyla içe aktarıldı", + "importError": "İçe aktarma başarısız: Geçersiz ayar dosyası", + "importConfirm": "Ayarlar başarıyla içe aktarıldı, değişiklikleri uygulamak için lütfen sayfayı yeniden yükleyin!", + "reloadButton": "Yeniden yükle", + "defaultValue": "Varsayılan: {default}" + }, + "pl": { + "yes": "Tak", + "no": "Nie", + "on": "Zawsze włączone", + "off": "Zawsze wyłączone", + "followBrowser": "Śledź przeglądarkę", + "permGrantConfirm": "Ta opcja wymaga odpowiednich uprawnień", + "appearance": { + "title": "Wygląd", + "displayWhitelist": "{input} Wyświetlanie {whitelist} w {contextMenu}", + "whitelistItem": "skrótów związanych z whitelistą", + "contextMenu": "menu kontekstowym", + "displayBadgeText": "{input} Wyświetlanie {timeInfo} na {icon}", + "badgeBgColor": "Kolor tła tekstu na ikonie paska rozszerzeń {input}", + "icon": "ikonie rozszerzenia", + "badgeTextContent": "czasu przeglądania bieżącej strony", + "locale": { + "label": "Język {input}", + "changeConfirm": "Język został zmieniony pomyślnie, proszę odświeżyć tę stronę!", + "reloadButton": "Przeładuj" + }, + "printInConsole": { + "label": "{input} Wyświetlanie {info} w {console}", + "console": "konsoli", + "info": "liczby dzisiejszych wizyt na bieżącej stronie" + }, + "darkMode": { + "label": "Tryb ciemny {input}", + "timed": "Czas na" + }, + "animationDuration": "Długość trwania początkowej animacji wykresu {input}", + "sidePanel": "{input} - czy włączyć panel boczny" + }, + "tracking": { + "title": "Monitorowanie", + "autoPauseTrack": "{input} Wstrzymaj monitorowanie, jeżeli nie wykryto aktywności {info} przez {maxTime}", + "noActivityInfo": "Mysz i klawiatura są nieaktywne, nie są w trybie pełnoekranowym i nie ma dźwięku", + "countLocalFiles": "{input} Śledzenie czasu, kiedy przeglądarka odczytuje {localFileTime} {info}", + "localFileTime": "pliki lokalne", + "localFilesInfo": "Obsługuje pliki takich typów jak PDF, obrazy, txt lub JSON.", + "countTabGroup": "{input} Śledzenie czasu w grupach kart {info}", + "tabGroupInfo": "Po usunięciu grupy tagów, dane również zostaną usunięte.", + "fileAccessDisabled": "Dostęp do adresów URL plików jest obecnie niedozwolony. Proszę najpierw włączyć go na stronie zarządzania", + "weekStart": "Pierwszy dzień tygodnia {input}", + "weekStartAsNormal": "Normalnie", + "storage": "Przechowuj dane śledzenia w {input}", + "storageConfirm": "Czy chcesz zmienić typ pamięci na {type}?" + }, + "limit": { + "prompt": "Wyświetlane zapytanie, gdy ograniczono {input}", + "reminder": "Przypomnienie {input} {minInput} minut(y) przed limitem czasu", + "level": { + "label": "Jak odblokować podczas ograniczenia {input}", + "nothing": "Zezwalaj na bezpośrednie odblokowanie na stronie administratora", + "password": "Musisz wprowadzić hasło, aby odblokować", + "verification": "Musisz wprowadzić kod weryfikacyjny, aby odblokować", + "passwordLabel": "Hasło odblokowujące {input}", + "verificationLabel": "Trudność kodu weryfikacyjnego {input}", + "verificationDifficulty": { + "easy": "Łatwy", + "hard": "Trudny", + "disgusting": "Odrzucający" + }, + "strict": "Nie zezwalaj na odblokowanie mimo to", + "strictTitle": "Potwierdzenie operacji", + "strictContent": "Gdy wybierzesz tę opcję, jeśli witryna osiągnie dzienny limit, nie będzie wolno jej odblokować ręcznie inaczej, niż czekając do następnego dnia. Jeśli reguły nie są poprawnie skonfigurowane, mogą one skutecznie utrudnić twoją rutynę!", + "pswFormLabel": "Hasło", + "pswFormAgain": "Wprowadź ponownie" + } + }, + "backup": { + "title": "Kopia zapasowa danych", + "type": "Zdalny typ: {input}", + "client": "Nazwa klienta {input}", + "meta": { + "gist": { + "authInfo": "Wymagany jest przynajmniej jeden token z gist" + }, + "obsidian_local_rest_api": { + "endpointInfo": "Tylko HTTP jest dostępny, ponieważ CORS nie może być skonfigurowany dla stron rozszerzenia" + } + }, + "label": { + "endpoint": "Adres punktu końcowego {info} {input}", + "path": "Ścieżka do folderu {input}", + "account": "Nazwa użytkownika {input}", + "password": "Hasło {input}" + }, + "operation": "Kopia zapasowa", + "download": { + "btn": "Pobierz", + "willDownload": "Do pobrania", + "confirmTip": "{size} części danych z [{clientName}] zostaną pobrane" + }, + "clear": { + "btn": "Wyczyść", + "confirmTip": "{rowCount} części danych dla stron {hostCount} śledzonych przez [{clientName}] zostaną usunięte!" + }, + "confirmStep": "Potwierdź dane", + "clientTable": { + "selectTip": "Wybierz klienta", + "dataRange": "Zakres danych", + "notSelected": "Nie wybrano klienta", + "current": "Aktualny" + }, + "lastTimeTip": "Ostatnia kopia zapasowa: {lastTime}", + "auto": { + "label": "Automatyczne kopie zapasowe", + "interval": "co {input} minut" + } + }, + "accessibility": { + "title": "Ułatwienia dostępu", + "chartDecal": "{input} - czy wyświetlić wykres typu decal" + }, + "notification": { + "title": "Powiadomienie", + "cycle": { + "label": "Cykl powiadomień {input}", + "daily": "Codziennie", + "weekly": "Co tydzień" + }, + "method": { + "label": "Metoda powiadomienia {input}", + "browser": "Przeglądarka", + "callback": { + "label": "HTTP Callback", + "url": "Callback URL {input}" + } + } + }, + "resetButton": "Reset", + "resetSuccess": "Pomyślnie przywrócono ustawienia domyślne!", + "exportButton": "Eksportuj ustawienia", + "importButton": "Importuj ustawienia", + "exportSuccess": "Ustawienia wyeksportowane pomyślnie", + "importSuccess": "Ustawienia zaimportowane pomyślnie", + "importError": "Import nie powiódł się: Nieprawidłowy plik ustawień", + "importConfirm": "Ustawienia zaimportowane pomyślnie, proszę odświeżyć stronę aby zastosować zmiany!", + "reloadButton": "Odśwież", + "defaultValue": "Domyślnie: {default}" + }, + "it": { + "yes": "Si", + "no": "No", + "on": "Sempre acceso", + "off": "Sempre spento", + "followBrowser": "Segui browser", + "permGrantConfirm": "Questa funzione richiede autorizzazioni rilevanti", + "appearance": { + "title": "Apparenza", + "displayWhitelist": "{input} Se visualizzare {whitelist} in {contextMenu}", + "whitelistItem": "scorciatoie correlate alla whitelist", + "contextMenu": "il menu contestuale", + "displayBadgeText": "{input} Se visualizzare {timeInfo} in {icon}", + "badgeBgColor": "Il colore di sfondo del testo sull'icona {input}", + "icon": "l'icona dell'estensione", + "badgeTextContent": "il tempo di navigazione del sito web corrente", + "locale": { + "label": "Linguaggio {input}", + "changeConfirm": "La lingua è stata modificata con successo, si prega di aggiorna questa pagina!", + "reloadButton": "Aggiorna" + }, + "printInConsole": { + "label": "{input} Se stampare {info} in {console}", + "console": "console", + "info": "il conteggio delle visite del sito attuale oggi" + }, + "darkMode": { + "label": "Modalità oscura {input}", + "timed": "Sincronizzato" + }, + "animationDuration": "La durata dell'animazione iniziale del grafico {input}", + "sidePanel": "{input} Se abilitare il pannello laterale" + }, + "tracking": { + "title": "Tracciamento", + "autoPauseTrack": "{input} Pausa tracciamento se nessuna attività rilevata {info} per {maxTime}", + "noActivityInfo": "Il mouse e la tastiera sono inattivi, non in modalità a schermo intero, e non c'è suono in riproduzione", + "countLocalFiles": "{input} Se tenere traccia del tempo in cui il browser legge {localFileTime} {info}", + "localFileTime": "file locali", + "localFilesInfo": "Supporta file di tipi come PDF, immagine, txt e json.", + "countTabGroup": "{input} Se tenere traccia dell'orario dei gruppi di schede {info}", + "tabGroupInfo": "Quando si elimina un gruppo di schede, anche i dati verranno eliminati.", + "fileAccessDisabled": "L'accesso agli URL dei file non è attualmente consentito. Si prega di attivarlo prima nella pagina di gestione", + "weekStart": "Il primo giorno di ogni settimana {input}", + "weekStartAsNormal": "Come Normale", + "storage": "Memorizza i dati di tracciamento in {input}", + "storageConfirm": "Vuoi cambiare il tipo di storage in {type}?" + }, + "limit": { + "prompt": "Prompt mostrato quando riservato {input}", + "reminder": "{input} Promemoria {minInput} minuti prima che il tempo sia scaduto", + "level": { + "label": "Come sbloccare durante la limitazione {input}", + "nothing": "Consenti lo sblocco diretto nella pagina di amministrazione", + "password": "È necessario inserire la password per sbloccare", + "verification": "È necessario inserire il codice di verifica per sbloccare", + "passwordLabel": "Password per sbloccare {input}", + "verificationLabel": "La difficoltà del codice di verifica {input}", + "verificationDifficulty": { + "easy": "Facile", + "hard": "Difficile", + "disgusting": "Disgustoso" + }, + "strict": "Non consentire comunque lo sblocco", + "strictTitle": "Conferma operazione", + "strictContent": "Quando si seleziona questa opzione, se un sito attiva il limite giornaliero, non ti sarà permesso di sbloccare manualmente se non aspettare fino al giorno successivo. Se le regole non sono impostate correttamente, possono molto bene ostacolare le tue routine!", + "pswFormLabel": "Password", + "pswFormAgain": "Conferma", + "2fa": "È necessario utilizzare il codice 2FA per sbloccare", + "twoFaTitle": "Abilita 2FA", + "twoFaScanHint": "Scansiona il codice QR con un'app di autenticazione o importa il link di configurazione in un gestore di password che supporta TOTP.", + "twoFaCopyLink": "Copia link", + "twoFaVerifyLabel": "Inserisci il codice a 6 cifre da verificare" + }, + "delayDuration": "Ritardo per {input} minuti per volta" + }, + "backup": { + "title": "Backup Dati", + "type": "Tipo remoto {input}", + "client": "Nome dell' Cliente {input}", + "meta": { + "gist": { + "authInfo": "È richiesto un token con almeno il permesso di gist" + }, + "obsidian_local_rest_api": { + "endpointInfo": "Solo HTTP è disponibile, poiché CORS non può essere configurato per le pagine di estensione" + } + }, + "label": { + "endpoint": "Indirizzo endpoint {info} {input}", + "path": "Il percorso della cartella {input}", + "account": "Nome Utente {input}", + "password": "Password {input}" + }, + "operation": "Backup", + "download": { + "btn": "Scarica", + "willDownload": "Da scaricare", + "confirmTip": "{size} pezzi di dati da [{clientName}] verranno scaricati" + }, + "clear": { + "btn": "Cancella", + "confirmTip": "{rowCount} pezzi di dati per i siti {hostCount} tracciati da [{clientName}] verranno eliminati!" + }, + "confirmStep": "Conferma i dati", + "clientTable": { + "selectTip": "Seleziona cliente", + "dataRange": "Intervallo di dati", + "notSelected": "Client non selezionato", + "current": "Attuale" + }, + "lastTimeTip": "L' Ultimo tempo di backup: {lastTime}", + "auto": { + "label": "Indica se abilitare il backup automatico", + "interval": "e esegui ogni {input} minuti" + } + }, + "accessibility": { + "title": "Accessibilità", + "chartDecal": "{input} Indica se visualizzare la decal del grafico" + }, + "notification": { + "title": "Notifiche", + "cycle": { + "label": "Ciclo di notifica {input}", + "daily": "Giornaliero", + "weekly": "Settimanale" + }, + "method": { + "label": "Metodo di notifica {input}", + "browser": "Browser", + "callback": { + "label": "HTTP Callback", + "url": "Callback URL {input}" + } + } + }, + "resetButton": "Reset", + "resetSuccess": "Reset completato!", + "exportButton": "Impostazioni di esportazione", + "importButton": "Impostazioni di importazione", + "exportSuccess": "Impostazioni esportate con successo", + "importSuccess": "Impostazioni importate con successo", + "importError": "Importazione non riuscita: file delle impostazioni non valido", + "importConfirm": "Impostazioni importate con successo, aggiorna la pagina per applicare le modifiche!", + "reloadButton": "Aggiorna", + "defaultValue": "Default: {default}" } } \ No newline at end of file diff --git a/src/i18n/message/app/option.ts b/src/i18n/message/app/option.ts index 070928947..898d193af 100644 --- a/src/i18n/message/app/option.ts +++ b/src/i18n/message/app/option.ts @@ -9,12 +9,10 @@ import resource from './option-resource.json' export type OptionMessage = { yes: string no: string + on: string + off: string followBrowser: string - popup: { - title: string - max: string - displaySiteName: string - } + permGrantConfirm: string appearance: { title: string // whitelist @@ -38,11 +36,12 @@ export type OptionMessage = { }, darkMode: { label: string - options: Omit, 'default'> + timed: string } animationDuration: string + sidePanel: string } - statistics: { + tracking: { title: string autoPauseTrack: string noActivityInfo: string @@ -51,41 +50,45 @@ export type OptionMessage = { localFilesInfo: string countTabGroup: string tabGroupInfo: string - tabGroupsPermGrant: string fileAccessDisabled: string - fileAccessFirefox: string weekStart: string weekStartAsNormal: string + storage: string + storageConfirm: string } - dailyLimit: { + limit: { prompt: string reminder: string level: { - [level in timer.limit.RestrictionLevel]: string + [level in tt4b.limit.RestrictionLevel]: string } & { label: string passwordLabel: string verificationLabel: string verificationDifficulty: { - [diff in timer.limit.VerificationDifficulty]: string + [diff in tt4b.limit.VerificationDifficulty]: string } strictTitle: string strictContent: string pswFormLabel: string pswFormAgain: string + twoFaTitle: string + twoFaScanHint: string + twoFaCopyLink: string + twoFaVerifyLabel: string } + delayDuration: string } backup: { title: string type: string client: string meta: { - [type in timer.backup.Type]: { - label?: string + [type in tt4b.backup.Type]: { authInfo?: string } } & { - [type in Extract]: { + [type in Extract]: { endpointInfo: string } } @@ -104,7 +107,6 @@ export type OptionMessage = { } download: { btn: string - step2: string willDownload: string confirmTip: string } @@ -112,6 +114,7 @@ export type OptionMessage = { btn: string confirmTip: string } + confirmStep: string lastTimeTip: string auto: { label: string @@ -122,6 +125,22 @@ export type OptionMessage = { title: string chartDecal: string } + notification: { + title: string + cycle: { + label: string + daily: string + weekly: string + } + method: { + label: string + browser: string + callback: { + label: string + url: string + } + } + } resetButton: string resetSuccess: string exportButton: string diff --git a/src/i18n/message/app/report-resource.json b/src/i18n/message/app/record-resource.json similarity index 77% rename from src/i18n/message/app/report-resource.json rename to src/i18n/message/app/record-resource.json index 6defaef3d..9b96fb627 100644 --- a/src/i18n/message/app/report-resource.json +++ b/src/i18n/message/app/record-resource.json @@ -64,6 +64,7 @@ }, "ja": { "exportFileName": "私のウェブ時間データ", + "total": "合計訪問回数： {visit} 回、合計時間： {focus}", "batchDelete": { "noSelectedMsg": "最初にテーブルで削除する行にチェックマークを付けてください", "confirmMsg": "{date} の {example} のようなサイトの {count} レコードは削除されます！", @@ -84,6 +85,7 @@ }, "pt_PT": { "exportFileName": "Meu_Tempo_de_Navegação", + "total": "Visitas Totais: {visit} vezes, total duração: {focus}", "batchDelete": { "noSelectedMsg": "Por favor, selecione a linha que deseja excluir na tabela primeiro", "confirmMsg": "{count} registros de sites como {example} em {date} serão excluídos!", @@ -103,7 +105,7 @@ "noMore": "Não mais" }, "uk": { - "exportFileName": "My_Browsing_Time", + "total": "Всього відвідувань: {visit} разів, загальна тривалість: {focus}", "batchDelete": { "noSelectedMsg": "Спершу виберіть рядок, який ви хочете видалити", "confirmMsg": "{count} записів для сайтів, як-от {example}, за {date} будуть видалені!", @@ -145,6 +147,7 @@ }, "de": { "exportFileName": "Timer_Daten", + "total": "Besuche Gesamt: {visit}, Gesamtdauer: {focus}", "batchDelete": { "noSelectedMsg": "Bitte wählen Sie die Zeile aus, die Sie zuerst in der Tabelle löschen möchten", "confirmMsg": "{count} Einträge für Sites wie {example} auf {date} werden gelöscht!", @@ -160,7 +163,8 @@ "value": "Wert", "percentage": "Prozentsatz" } - } + }, + "noMore": "Nicht mehr" }, "fr": { "exportFileName": "Mon_heure_de_navigation", @@ -223,5 +227,66 @@ } }, "noMore": "لا مزيد" + }, + "tr": { + "exportFileName": "Gezinti_Zamanım", + "total": "Toplam ziyaret sayısı: {visit} kez, toplam süre: {focus}", + "batchDelete": { + "noSelectedMsg": "Lütfen önce tabloda silmek istediğiniz satırı seçin", + "confirmMsg": "{date} tarihine ait [{example}] gibi {count} kayıt silinecektir!", + "confirmMsgAll": "[{example}] gibi {count} kayıt silinecek!", + "confirmMsgRange": "{start} ile {end} arasında [{example}] gibi {count} kayıt silinecek!" + }, + "remoteReading": { + "on": "Uzaktan yedeklenen verileri okuma", + "off": "Uzaktan yedeklenen verileri okumak için tıklayın", + "table": { + "client": "Uygulama adı", + "localData": "Yerel Veri", + "value": "Değeri", + "percentage": "Yüzdesi" + } + }, + "noMore": "Daha Fazla Veri Yok" + }, + "pl": { + "total": "Całkowita liczba wizyt: {visit}, całkowity czas trwania: {focus}", + "batchDelete": { + "noSelectedMsg": "Proszę najpierw wybrać wiersz, który chcesz usunąć z tabeli", + "confirmMsg": "{count} rekord/y/ów takich jak [{example}] z {date} zostaną usunięte!", + "confirmMsgAll": "{count} rekord/y/ów takich jak [{example}] zostaną usunięte!", + "confirmMsgRange": "{count} rekord/y/ów takich jak [{example}] pomiędzy {start} i {end} zostaną usunięte!" + }, + "remoteReading": { + "on": "Czytanie zdalnych kopii zapasowych", + "off": "Kliknij, aby przeczytać zdalne kopie zapasowe", + "table": { + "client": "Nazwa klienta", + "localData": "Lokalne Dane", + "value": "Wartość", + "percentage": "Procent" + } + }, + "noMore": "Nie więcej" + }, + "it": { + "total": "Visite totali: {visit} volte, durata totale: {focus}", + "batchDelete": { + "noSelectedMsg": "Si prega di selezionare la riga che si desidera eliminare nella prima tabella", + "confirmMsg": "{count} record come [{example}] di {date} saranno eliminati!", + "confirmMsgAll": "{count} record come [{example}], saranno eliminati!", + "confirmMsgRange": "{count} record come [{example}] tra {start} ed {end} saranno eliminati!" + }, + "remoteReading": { + "on": "Lettura dei dati di backup remoti", + "off": "Clicca per leggere i dati di backup remoti", + "table": { + "client": "Nome del cliente", + "localData": "Dati locali", + "value": "Valore", + "percentage": "Percentuale" + } + }, + "noMore": "Nient'altro" } } \ No newline at end of file diff --git a/src/i18n/message/app/report.ts b/src/i18n/message/app/record.ts similarity index 82% rename from src/i18n/message/app/report.ts rename to src/i18n/message/app/record.ts index d1be95f6a..c4c17e57e 100644 --- a/src/i18n/message/app/report.ts +++ b/src/i18n/message/app/record.ts @@ -5,9 +5,9 @@ * https://opensource.org/licenses/MIT */ -import resource from './report-resource.json' +import resource from './record-resource.json' -export type ReportMessage = { +export type RecordMessage = { exportFileName: string total: string batchDelete: { @@ -29,6 +29,6 @@ export type ReportMessage = { noMore: string } -const _default: Messages = resource +const _default: Messages = resource export default _default \ No newline at end of file diff --git a/src/i18n/message/app/rule-resource.json b/src/i18n/message/app/rule-resource.json new file mode 100644 index 000000000..80b46d7fe --- /dev/null +++ b/src/i18n/message/app/rule-resource.json @@ -0,0 +1,433 @@ +{ + "zh_CN": { + "white": { + "label": "白名单", + "addConfirmMsg": "{url} 将被加入至白名单", + "removeConfirmMsg": "{url} 将从白名单中移除", + "infoAlertTitle": "你可以在这里配置网站白名单", + "infoAlert0": "白名单内网站的上网时长和打开次数不会被统计", + "infoAlert1": "白名单内网站的上网时间也不会被限制", + "infoAlert2": "您可以使用通配符 (*) 匹配多个站点，例如 *.example.com/**，并使用 + 作为前缀排除站点，例如 +need.example.com/**" + }, + "merge": { + "label": "子域名合并", + "removeConfirmMsg": "自定义合并规则 {origin} 将被移除", + "originPlaceholder": "原域名", + "mergedPlaceholder": "合并后域名", + "errorOrigin": "原域名格式错误", + "duplicateMsg": "合并规则已存在：{origin}", + "addConfirmMsg": "将为 {origin} 设置自定义合并规则", + "infoAlertTitle": "该页面可以配置子域名的合并规则", + "infoAlert0": "点击新增按钮，会弹出原域名和合并后域名的输入框，填写并保存规则", + "infoAlert1": "原域名可填具体的域名或者正则表达式，比如 www.baidu.com，*.baidu.com，*.google.com.*。以此确定哪些域名在合并时会使用该条规则", + "infoAlert2": "合并后域名可填具体的域名，或者填数字，或者不填", + "infoAlert3": "如果填数字，则表示合并后域名的级数。比如存在规则【 *.*.edu.cn >>> 3 】，那么 www.hust.edu.cn 将被合并至 hust.edu.cn", + "infoAlert4": "如果不填，则表示原域名不会被合并", + "infoAlert5": "如果没有命中任何规则，则默认会合并至 {psl} 的前一级", + "tagResult": { + "blank": "不合并", + "level": "{level} 级域名" + } + } + }, + "zh_TW": { + "white": { + "label": "白名單", + "addConfirmMsg": "{url} 將會被加入白名單。", + "removeConfirmMsg": "{url} 將會被白名單移除。", + "infoAlertTitle": "網站白名單設定", + "infoAlert0": "白名單內的網站將不會記錄瀏覽時長與造訪次數", + "infoAlert1": "白名單內的網站不受時間限制功能影響", + "infoAlert2": "您可以使用通配符(*)來匹配多個網站，例如*.example.com/​​**，並使用+作為前綴來排除網站，例如+need.example.com/​**" + }, + "merge": { + "label": "網站合併規則", + "removeConfirmMsg": "自訂合併規則 {origin} 將被刪除", + "originPlaceholder": "原始網域", + "mergedPlaceholder": "合併後網域", + "errorOrigin": "原始網域格式錯誤", + "duplicateMsg": "合併規則已存在：{origin}", + "addConfirmMsg": "將為 {origin} 設定自訂合併規則", + "infoAlertTitle": "此頁面可設定子網域合併規則", + "infoAlert0": "點擊「新增」按鈕後，需填寫原始網域與合併後網域", + "infoAlert1": "原始網域可填寫具體網域或正規表示式，例如：www.baidu.com、*.baidu.com、*.google.com.*", + "infoAlert2": "合併後網域可填寫：具體網域／數字／留空", + "infoAlert3": "若填數字，代表合併後的網域層級數。例如規則【 *.*.edu.cn >>> 3 】會將 www.hust.edu.cn 合併為 hust.edu.cn", + "infoAlert4": "若留空，表示原始網域將保持不變", + "infoAlert5": "若未匹配任何規則，預設會合併至 {psl} 的上一層級", + "tagResult": { + "blank": "保持原網域", + "level": "{level} 層網域" + } + } + }, + "en": { + "white": { + "label": "Whitelist", + "addConfirmMsg": "{url} will be added to the whitelist.", + "removeConfirmMsg": "{url} will be removed from the whitelist.", + "infoAlertTitle": "You can whitelist sites on this page", + "infoAlert0": "Whitelisted sites will not be counted", + "infoAlert1": "Whitelisted sites will not be restricted", + "infoAlert2": "You can use a wildcards(*) to match multiple sites, such as *.example.com/**, and use + as a prefix to exclude sites, such as +need.example.com/**" + }, + "merge": { + "label": "Merge-site Rules", + "removeConfirmMsg": "{origin} will be removed from customized merge rules.", + "originPlaceholder": "Original site", + "mergedPlaceholder": "Merged", + "errorOrigin": "The format of original site is invalid.", + "duplicateMsg": "The rule already exists: {origin}", + "addConfirmMsg": "Customized merge rules will be set for {origin}", + "infoAlertTitle": "the merge rules when counting sites on this page", + "infoAlert0": "Click the [New] button, the input boxes of the source site and the merge site will be displayed, fill in and save the rule", + "infoAlert1": "The original site can be filled with a specific site or regular expression, such as www.baidu.com, *.baidu.com, *.google.com.*, to determine which sites will match this rule while merging", + "infoAlert2": "The merged site can be filled with a specific site, a number or blank", + "infoAlert3": "A number means the level of merged site. For example, there is a rule '*.*.edu.cn >>> 3', then 'www.hust.edu.cn' will be merged to 'hust.edu.cn'", + "infoAlert4": "Blank means the original site will not be merged", + "infoAlert5": "If no rule is matched, it will default to the level before {psl}", + "tagResult": { + "blank": "Not Merge", + "level": "Keep Level {level}" + } + } + }, + "ja": { + "white": { + "label": "ホワイトリスト", + "addConfirmMsg": "{url} がホワイトリストに追加されます。", + "removeConfirmMsg": "{url} はホワイトリストから削除されます", + "infoAlertTitle": "このページでサイトのホワイトリストを設定できます", + "infoAlert0": "ホワイトリストのサイトはカウントされません。", + "infoAlert1": "ホワイトリストのサイトは制限されません。" + }, + "merge": { + "label": "ドメイン合併", + "removeConfirmMsg": "カスタム マージ ルール {origin} は削除されます", + "originPlaceholder": "独自ドメイン名", + "mergedPlaceholder": "統計的ドメイン名", + "errorOrigin": "元のドメイン名の形式が間違っています", + "duplicateMsg": "ルールはすでに存在します：{origin}", + "addConfirmMsg": "カスタム マージ ルールが {origin} に設定されます", + "infoAlertTitle": "このページでは、サブドメインのマージ ルールを設定できます", + "infoAlert0": "[追加] ボタンをクリックすると、元のドメイン名と結合されたドメイン名の入力ボックスがポップアップし、ルールを入力して保存します。", + "infoAlert1": "元のドメイン名には、特定のドメイン名または正規表現 (www.baidu.com、*.baidu.com、*.google.com.* など) を入力できます。 マージ時にこのルールを使用するドメインを決定するには", + "infoAlert2": "統合されたドメイン名の後、特定のドメイン名を入力するか、番号を入力するか、空白のままにすることができます", + "infoAlert3": "数字を記入する場合は、ドメイン名のレベルが予約されていることを意味します。 たとえば、ルール [*.*.edu.cn >>> 3 ] がある場合、www.hust.edu.cn は hust.edu.cn にマージされます。", + "infoAlert4": "記入しない場合は、元のドメイン名が統合されないことを意味します", + "infoAlert5": "一致するルールがない場合、デフォルトで {psl} より前のレベルになります", + "tagResult": { + "blank": "不合并", + "level": "{level} 次ドメイン" + } + } + }, + "pt_PT": { + "white": { + "label": "Lista Branca", + "addConfirmMsg": "{url} será adicionado à lista de permissões.", + "removeConfirmMsg": "{url} será removido da lista de permissões.", + "infoAlertTitle": "Pode adicionar sites à lista de permissões nesta página", + "infoAlert0": "Os sites na lista de permissões não serão contabilizados", + "infoAlert1": "Os sites na lista de permissões não serão restringidos", + "infoAlert2": "Podes usar wildcards(*) para corresponder a vários sites, como *.example.com/**, e usar + como prefixo para excluir sites específicos, como +need.example.com/**" + }, + "merge": { + "label": "Regras de Agrupamento", + "removeConfirmMsg": "{origin} será removido das regras de agrupamento personalizadas.", + "originPlaceholder": "Site original", + "mergedPlaceholder": "Agrupado", + "errorOrigin": "Formato do site original inválido.", + "duplicateMsg": "A regra já existe: {origin}", + "addConfirmMsg": "Será criada uma regra de agrupamento para {origin}", + "infoAlertTitle": "Regras de agrupamento para contagem de sites nesta página", + "infoAlert0": "Clique em [Novo] para mostrar os campos do site original e do site agrupado", + "infoAlert1": "O site original pode ser um URL específico ou expressão regular (ex: www.baidu.com, *.baidu.com, *.google.com.*)", + "infoAlert2": "O site agrupado pode ser um URL específico, um número ou ficar em branco", + "infoAlert3": "Um número indica o nível de agrupamento. Ex: com a regra '*.*.edu.cn >>> 3', 'www.hust.edu.cn' será agrupado como 'hust.edu.cn'", + "infoAlert4": "Em branco significa que o site original não será agrupado", + "infoAlert5": "Se nenhuma regra for encontrada, usará o nível anterior a {psl}", + "tagResult": { + "blank": "Não Agrupar", + "level": "Manter Nível {level}" + } + } + }, + "uk": { + "white": { + "label": "Білий список", + "addConfirmMsg": "{url} буде додано до білого списку.", + "removeConfirmMsg": "{url} буде вилучено з білого списку.", + "infoAlertTitle": "На цій сторінці ви можете налаштувати білий список сайтів", + "infoAlert0": "Сайти в білому списку не враховуватимуться", + "infoAlert1": "Сайти в білому списку не матимуть обмежень", + "infoAlert2": "Можна використовувати змінні (*) для збігів декількох сайтів, наприклад *.example.com/**. Щоб виключити сайти, використовуйте +, наприклад +need.example.com/**" + }, + "merge": { + "label": "Правила об'єднання сайтів", + "removeConfirmMsg": "{origin} буде вилучено з налаштованих правил об'єднання.", + "originPlaceholder": "Оригінальний сайт", + "mergedPlaceholder": "Об'єднуваний", + "errorOrigin": "Неприпустимий формат оригінального сайту.", + "duplicateMsg": "Правило вже існує: {origin}", + "addConfirmMsg": "Для {origin} буде встановлено користувацьке правило об'єднання", + "infoAlertTitle": "На цій сторінці ви можете встановити правила об’єднання для статистики використання сайтів", + "infoAlert0": "Натисніть кнопку [Нове], заповніть поля оригінального та об'єднуваного сайту, після чого збережіть правило", + "infoAlert1": "Оригінальний сайт можна ввести як URL-адресу або регулярний вираз, як-от www.wikipedia.org, *.wikipedia.org, *.google.com.*, щоб визначити відповідні сайти для об'єднання", + "infoAlert2": "Об'єднуваний сайт можна ввести як URL-адресу, число, або залишити пустим", + "infoAlert3": "Число означає рівень об'єднуваного сайту. Наприклад, для правила '*.*.edu.cn >>> 3' об'єднуваний сайт 'www.hust.edu.cn' буде об'єднано з 'hust.edu.cn'", + "infoAlert4": "Пусте поле означає, що сайт не буде об'єднано", + "infoAlert5": "Якщо жодне правило не збігається, його буде встановлено до типового рівня {psl}", + "tagResult": { + "blank": "Не об'єднувати", + "level": "Зберегти рівень {level}" + } + } + }, + "es": { + "white": { + "label": "Lista blanca", + "addConfirmMsg": "{url} se agregará a la lista blanca.", + "removeConfirmMsg": "{url} será eliminado de la lista blanca.", + "infoAlertTitle": "Puedes configurar una lista blanca de sitios en esta página", + "infoAlert0": "Los sitios en la lista blanca no serán contados", + "infoAlert1": "Los sitios en la lista blanca no serán restringidos", + "infoAlert2": "Puedes usar un comodín (*) para coincidir varios sitios a la vez: *.ejemplo.com/**, y usar + como prefijo para excluir sitios, como +meme.ejemplo.com/**" + }, + "merge": { + "label": "Reglas de fusión de sitios", + "removeConfirmMsg": "{origin} será eliminado de las reglas de fusión personalizadas.", + "originPlaceholder": "Sitio original", + "mergedPlaceholder": "Fusionado", + "errorOrigin": "El formato del sitio original no es válido.", + "duplicateMsg": "La regla ya existe: {origin}", + "addConfirmMsg": "Las reglas de fusión personalizadas se establecerán para {origin}", + "infoAlertTitle": "Puedes establecer las reglas de fusión al contar sitios en esta página", + "infoAlert0": "Haz clic en el botón [New One], se mostrarán los recuadros del sitio fuente y el sitio fusionado, llénalos y guarda la regla", + "infoAlert1": "El sitio original puede ser llenado con un sitio específico o una expresión regular, tal como www.baidu.com, *.baidu.com, *.google.com.*, para determinar qué sitios seguirán esta regla al fusionarse", + "infoAlert2": "El sitio fusionado puede ser llenado con un sitio específico, un número o en dejarse en blanco", + "infoAlert3": "Un número significa el nivel del sitio fusionado. Por ejemplo, hay una regla '*.*.edu.cn >>> 3', entonces 'www.hust.edu.cn' se fusionará con 'hust.edu.cn'", + "infoAlert4": "Dejar en blanco significa que el sitio original no se fusionará", + "infoAlert5": "Si no se sigue ninguna regla, se establecerá por defecto al nivel antes de {psl}", + "tagResult": { + "blank": "No fusionar", + "level": "Mantener en nivel {level}" + } + } + }, + "de": { + "white": { + "label": "Whitelist", + "addConfirmMsg": "{url} wird zur Whitelist hinzugefügt.", + "removeConfirmMsg": "{url} wird von der Whitelist entfernt.", + "infoAlertTitle": "Sie können eine Whitelist vonseiten auf dieser Seite festlegen", + "infoAlert0": "Websites auf der Whitelist werden nicht gezählt", + "infoAlert1": "Websites auf der Whitelist werden nicht eingeschränkt", + "infoAlert2": "Sie können einen Platzhalter (*) verwenden, um mehrere Websites wie *.example.com/** zusammenzufassen, und + als Präfix verwenden, um Webseiten wie +need.example.com/** auszuschließen" + }, + "merge": { + "label": "Regeln zusammenführen", + "removeConfirmMsg": "{origin} wird aus den benutzerdefinierten Zusammenführen Regeln entfernt.", + "originPlaceholder": "Ursprüngliche Website", + "mergedPlaceholder": "Zusammengeführt", + "errorOrigin": "Das Format der Original-Website ist ungültig.", + "duplicateMsg": "Die Regel existiert bereits: {origin}", + "addConfirmMsg": "Für {origin} werden benutzerdefinierte Zusammenführungsregeln festgelegt", + "infoAlertTitle": "Auf dieser Seite können Sie Zusammenführen Regeln für die Zählung von Websites festlegen", + "infoAlert0": "Klicken Sie auf die Schaltfläche [Erstellen]. Die Eingabefelder der ursprünglichen Website und der zusammengeführten Website werden angezeigt. Füllen Sie die Regel aus und speichern Sie sie", + "infoAlert1": "Die ursprüngliche Website kann mit einer bestimmten Website oder einem regulären Ausdruck wie www.baidu.com, *.baidu.com, *.google.com.* gefüllt werden, um zu bestimmen, welche Websites beim Zusammenführen dieser Regel entsprechen", + "infoAlert2": "Die zusammengeführte Website kann mit einer bestimmten Site, einer Zahl oder einem Leerzeichen gefüllt werden", + "infoAlert3": "Eine Zahl gibt die Ebene der zusammengeführten Website an. Gibt es beispielsweise eine Regel „*.*.edu.cn >>> 3“, dann wird „www.hust.edu.cn“ als „hust.edu.cn“ zusammengeführt", + "infoAlert4": "Leer bedeutet, dass die ursprüngliche Website nicht zusammengeführt wird", + "infoAlert5": "Wenn keine Regel zutrifft, wird standardmäßig die Ebene vor {psl} verwendet", + "tagResult": { + "blank": "Nicht zusammenführen", + "level": "Level behalten {level}" + } + } + }, + "fr": { + "white": { + "label": "Liste blanche", + "addConfirmMsg": "{url} sera ajouté à la liste blanche.", + "removeConfirmMsg": "{url} sera supprimé de la liste blanche.", + "infoAlertTitle": "Vous pouvez ajouter des sites à la liste blanche sur cette page", + "infoAlert0": "Les sites sur liste blanche ne seront pas comptés", + "infoAlert1": "Les sites sur liste blanche ne seront pas restreints", + "infoAlert2": "Vous pouvez utiliser un signe générique(*) pour cibler plusieurs sites, comme *.example.com/**, et utiliser + comme un préfixe pour exclure des sites, comme +need.example.com/**" + }, + "merge": { + "label": "Fusionner les règles du site", + "removeConfirmMsg": "{origin} sera supprimé des règles de fusion personnalisées.", + "originPlaceholder": "Site original", + "mergedPlaceholder": "Fusionné", + "errorOrigin": "Le format du site original est invalide.", + "duplicateMsg": "La règle existe déjà : {origin}", + "addConfirmMsg": "Les règles de fusion personnalisées seront définies pour {origin}", + "infoAlertTitle": "Vous pouvez définir les règles de fusion lorsque vous comptez des sites sur cette page", + "infoAlert0": "Cliquez sur le bouton [Nouveau], les boîtes de saisie du site source et le site de fusion sera affiché, remplissez et enregistrez la règle", + "infoAlert1": "Le site d'origine peut être rempli avec un site spécifique ou une expression régulière, telle que www.baidu.com, *.baidu.com, *.google.com.*, pour déterminer quels sites correspondront à cette règle lors de la fusion", + "infoAlert2": "Le site fusionné peut être rempli avec un site spécifique, un numéro ou vide", + "infoAlert3": "Un nombre signifie le niveau du site fusionné. Par exemple, il existe une règle '*.*.edu.cn >>> 3', alors 'www.hust.edu.cn' sera fusionné avec 'hust.edu.cn'", + "infoAlert4": "Vide signifie que le site d'origine ne sera pas fusionné", + "infoAlert5": "Si aucune règle ne correspond, le niveau par défaut sera celui d'avant {psl}", + "tagResult": { + "blank": "Non Fusionner", + "level": "Garder le niveau {level}" + } + } + }, + "ru": { + "white": { + "label": "Белый список", + "addConfirmMsg": "{url} будет добавлен в белый список.", + "removeConfirmMsg": "{url} будет удален из белого списка.", + "infoAlertTitle": "Вы можете добавить сайты в белый список на этой странице", + "infoAlert0": "Сайты, внесенные в белый список, не будут учитываться", + "infoAlert1": "Сайты из белого списка не будут ограничены" + }, + "merge": { + "label": "Объединение сайтов", + "removeConfirmMsg": "{origin} будет удален из настроенных правил слияния.", + "originPlaceholder": "Оригинальный сайт", + "mergedPlaceholder": "Соединено", + "errorOrigin": "Недопустимый формат оригинального сайта.", + "duplicateMsg": "Это правило уже существует: {origin}", + "addConfirmMsg": "Для {origin} будут установлены индивидуальные правила слияния", + "infoAlertTitle": "правила слияния при подсчете сайтов на этой странице", + "infoAlert0": "Нажмите кнопку [Новый], будут показаны поля ввода сайта источника и будут отображаться слияния, заполнять и сохранять правило", + "infoAlert1": "Исходный сайт может быть заполнен определенным сайтом или регулярным выражением, например www.baidu.com, *.baidu.com, *.google.com.*, чтобы определить, какие сайты будут соответствовать этому правилу при слиянии", + "infoAlert2": "Объединенный сайт может быть заполнен определенным сайтом, номером или пустым местом", + "infoAlert3": "Число означает уровень слияния сайта. Например, правило '*.*.edu.cn >>> 3', то 'www.hust.edu.cn' будет объединено с 'hust.edu.cn'", + "infoAlert4": "Пустое значение означает, что оригинальный сайт не будет объединён", + "infoAlert5": "Если правило не совпадает, оно будет по умолчанию на уровне до {psl}", + "tagResult": { + "blank": "Не объединять", + "level": "Сохранять уровень {level}" + } + } + }, + "ar": { + "white": { + "label": "القائمة البيضاء", + "addConfirmMsg": "سيتم إضافة {url} إلى القائمة البيضاء.", + "removeConfirmMsg": "سيتم إزالة {url} من القائمة البيضاء.", + "infoAlertTitle": "يمكنك إضافة المواقع إلى القائمة البيضاء في هذه الصفحة", + "infoAlert0": "لن يتم احتساب المواقع المدرجة في القائمة البيضاء", + "infoAlert1": "لن يتم تقييد المواقع المدرجة في القائمة البيضاء" + }, + "merge": { + "label": "دمج قواعد الموقع", + "removeConfirmMsg": "سيتم إزالة {origin} من قواعد الدمج المخصصة.", + "originPlaceholder": "الموقع الأصلي", + "mergedPlaceholder": "تم الدمج", + "errorOrigin": "تنسيق الموقع الأصلي غير صالح.", + "duplicateMsg": "القاعدة موجودة فعلًا: {origin}", + "addConfirmMsg": "سيتم تعيين قواعد الدمج المخصصة لـ {origin}", + "infoAlertTitle": "قواعد الدمج عند حساب المواقع الموجودة على هذه الصفحة", + "infoAlert0": "انقر فوق الزر [جديد]، سيتم عرض مربعات الإدخال الخاصة بموقع المصدر وموقع الدمج، املأ القاعدة واحفظها", + "infoAlert1": "يمكن ملء الموقع الأصلي بموقع معين أو تعبير عادي، مثل www.baidu.com، و*.baidu.com، و*.google.com.*، لتحديد المواقع التي ستطابق هذه القاعدة أثناء الدمج", + "infoAlert2": "يمكن ملء الموقع المدمج بموقع محدد أو رَقَم أو مساحة فارغة", + "infoAlert3": "يشير الرقم إلى مستوى الموقع المدمج. على سبيل المثال، هناك قاعدة '*.*.edu.cn >>> 3'، ثم سيتم دمج 'www.hust.edu.cn' في 'hust.edu.cn'", + "infoAlert4": "الفراغ يعني أن الموقع الأصلي لن يتم دمجه", + "infoAlert5": "إذا لم يتم مطابقة أي قاعدة، فسيتم تعيينها افتراضيًا على المستوى قبل {psl}", + "tagResult": { + "blank": "لا دمج", + "level": "الحفاظ على المستوى {level}" + } + } + }, + "tr": { + "white": { + "label": "Beyaz Liste", + "addConfirmMsg": "{url} beyaz listeye eklenecektir.", + "removeConfirmMsg": "{url} beyaz listeden kaldırılacaktır.", + "infoAlertTitle": "Bu sayfada siteleri beyaz listeye ekleyebilirsiniz", + "infoAlert0": "Beyaz listeye alınan siteler sayılmayacaktır", + "infoAlert1": "Beyaz listeye alınan siteler kısıtlanmayacaktır", + "infoAlert2": "Birden fazla siteyi eşleştirmek için joker karakterler (*) kullanabilirsiniz, örneğin *.example.com/**, ve siteleri hariç tutmak için + ön ekini kullanabilirsiniz, örneğin +need.example.com/**" + }, + "merge": { + "label": "Birleştirme Kuralları", + "removeConfirmMsg": "{origin} özelleştirilmiş birleştirme kurallarından kaldırılacaktır.", + "originPlaceholder": "Orijinal site", + "mergedPlaceholder": "Birleştirildi", + "errorOrigin": "Orijinal sitenin formatı geçersiz.", + "duplicateMsg": "Kural zaten mevcut: {origin}", + "addConfirmMsg": "{origin} için özelleştirilmiş birleştirme kuralları ayarlanacaktır", + "infoAlertTitle": "bu sayfadaki siteleri sayarken birleştirme kuralları", + "infoAlert0": "[Yeni] düğmesine tıklayın, kaynak sitenin ve birleştirme sitesinin giriş kutuları görüntülenecektir, kuralı doldurun ve kaydedin", + "infoAlert1": "Orijinal site, birleştirme sırasında bu kuralla eşleşecek siteleri belirlemek için www.baidu.com, *.baidu.com, *.google.com.* gibi belirli bir site veya düzenli ifade ile doldurulabilir", + "infoAlert2": "Birleştirilen site, belirli bir site, bir sayı veya boşluk ile doldurulabilir", + "infoAlert3": "Bir sayı, birleştirilen sitenin seviyesini ifade eder. Örneğin, ‘*.*.edu.cn >>> 3’ kuralı varsa, ‘www.hust.edu.cn’ sitesi ‘hust.edu.cn’ sitesiyle birleştirilir", + "infoAlert4": "Boşluk, orijinal sitenin birleştirilmeyeceği anlamına gelir", + "infoAlert5": "Eşleşen kural yoksa, varsayılan olarak {psl} öncesindeki seviyeye geçilir", + "tagResult": { + "blank": "Birleştirilemez", + "level": "Seviyeyi {level} koruyun" + } + } + }, + "pl": { + "white": { + "label": "Whitelista", + "addConfirmMsg": "{url} zostanie dodany do whitelisty.", + "removeConfirmMsg": "{url} zostanie usunięty z whitelisty.", + "infoAlertTitle": "Na tej stronie możesz dodawać strony do whitelisty", + "infoAlert0": "Strony znajdujące się na whiteliście nie będą liczone", + "infoAlert1": "Strony znajdujące się na whiteliście nie będą limitowane", + "infoAlert2": "Możesz użyć symboli wieloznacznych(*) do dopasowania wielu witryn, takich jak *.przykład.com/**, i użyć + jako prefiks do wykluczenia witryn, takich jak +potrzebny.przykład.com/**" + }, + "merge": { + "label": "Reguły łączenia stron", + "removeConfirmMsg": "{origin} zostanie usunięty ze spersonalizowanych reguł scalania.", + "originPlaceholder": "Oryginalna strona", + "mergedPlaceholder": "Scalony", + "errorOrigin": "Format oryginalnej strony jest nieprawidłowy.", + "duplicateMsg": "Ta reguła już istnieje: {origin}", + "addConfirmMsg": "Spersonalizowane reguły scalania zostaną ustawione dla {origin}", + "infoAlertTitle": "reguły scalania podczas liczenia witryn na tej stronie", + "infoAlert0": "Kliknij przycisk [New One], pola wprowadzania strony źródłowej oraz strony scalenia zostaną wyświetlone, wypełnij i zapisz regułę", + "infoAlert1": "Oryginalna strona może być wypełniona konkretną stroną lub wyrażeniem regularnym, takim jak *.baidu.com, *.google.com.*, aby określić, które witryny będą odpowiadać tej regule podczas scalania", + "infoAlert2": "Scalona witryna może być wypełniona określoną witryną, liczbą lub zostawiona pusta", + "infoAlert3": "Liczba oznacza poziom scalonej witryny. Na przykład istnieje reguła '*.*.edu.cn >>> 3', a następnie 'www.hust.edu.cn' zostanie połączona z 'hust.edu.cn'", + "infoAlert4": "Puste oznacza, że oryginalna strona nie zostanie połączona", + "infoAlert5": "Jeśli żadna reguła nie jest dopasowana, będzie domyślnie przed {psl}", + "tagResult": { + "blank": "Nie scalaj", + "level": "Zachowaj poziom {level}" + } + } + }, + "it": { + "white": { + "label": "Whitelist", + "addConfirmMsg": "{url} sarà aggiunto alla whitelist.", + "removeConfirmMsg": "{url} sarà rimosso dalla whitelist.", + "infoAlertTitle": "È possibile aggiungere alla whitelist questa pagina", + "infoAlert0": "I siti in whitelist non saranno conteggiati", + "infoAlert1": "I siti in whitelist non saranno conteggiati", + "infoAlert2": "È possibile utilizzare un jolly(*) per abbinare più siti, come *.example.com/**, e utilizzare + come prefisso per escludere i siti, come +need.example.com/**" + }, + "merge": { + "label": "Raggruppa regole dei siti", + "removeConfirmMsg": "{origin} Verrà rimosso dalle regole di unione personalizzate.", + "originPlaceholder": "Sito originale", + "mergedPlaceholder": "Uniti", + "errorOrigin": "Il formato del sito originale non è valido.", + "duplicateMsg": "La regola esiste già: {origin}", + "addConfirmMsg": "Verranno impostate regole di unione personalizzate per {origin}", + "infoAlertTitle": "le regole di unione quando si contano i siti su questa pagina", + "infoAlert0": "Fai clic sul pulsante [Nuovo]; verranno visualizzati i campi d'immissione relativi al sito di origine e al sito di unione; compila i campi e salva la regola", + "infoAlert1": "Il sito originale può essere compilato con un sito specifico o un'espressione regolare, ad esempio www.baidu.com, *.baidu.com, *.google.com*, per determinare quali siti saranno interessati da questa regola durante l'unione", + "infoAlert2": "Il sito unito può contenere il nome di un sito specifico, un numero o essere lasciato vuoto", + "infoAlert3": "Un numero indica il livello del sito a cui viene unito. Ad esempio, se esiste una regola del tipo '*.*.edu.cn >>> 3', allora 'www.hust.edu.cn' verrà unito a 'hust.edu.cn'", + "infoAlert4": "Vuoto significa che il sito originale non verrà unito", + "infoAlert5": "Se non viene individuata alcuna regola corrispondente, verrà utilizzato per impostazione predefinita il livello precedente {psl}", + "tagResult": { + "blank": "Non unite", + "level": "Mantiene Livello {level}" + } + } + } +} \ No newline at end of file diff --git a/src/i18n/message/app/rule.ts b/src/i18n/message/app/rule.ts new file mode 100644 index 000000000..0745cbb49 --- /dev/null +++ b/src/i18n/message/app/rule.ts @@ -0,0 +1,37 @@ +import resource from './rule-resource.json' + +export type RuleMessage = { + white: { + label: string + addConfirmMsg: string + removeConfirmMsg: string + infoAlertTitle: string + infoAlert0: string + infoAlert1: string + infoAlert2: string + } + merge: { + label: string + removeConfirmMsg: string + originPlaceholder: string + mergedPlaceholder: string + errorOrigin: string + duplicateMsg: string + addConfirmMsg: string + infoAlertTitle: string + infoAlert0: string + infoAlert1: string + infoAlert2: string + infoAlert3: string + infoAlert4: string + infoAlert5: string + tagResult: { + blank: string + level: string + } + } +} + +const _default: Messages = resource satisfies Messages + +export default _default \ No newline at end of file diff --git a/src/i18n/message/app/site-manage-resource.json b/src/i18n/message/app/site-manage-resource.json index b65a5c259..745564ff2 100644 --- a/src/i18n/message/app/site-manage-resource.json +++ b/src/i18n/message/app/site-manage-resource.json @@ -302,6 +302,7 @@ }, "de": { "deleteConfirmMsg": "{host} wird gelöscht", + "genAliasConfirmMsg": "Sollen die Namen der Seite automatisch in Batches vervollständigt werden?", "column": { "type": "Website-Typ", "alias": "Site-Name", @@ -336,7 +337,7 @@ "msg": { "hostExistWarn": "{host} existiert", "existedTag": "EXISTIERT", - "noSelected": "Kein Standort ausgewählt", + "noSelected": "Keine Website ausgewählt", "noSupported": "Die ausgewählten Sites können keine Kategorien festlegen", "disassociatedMsg": "Möchten Sie die Kategorien aller ausgewählten Sites löschen?", "batchDeleteMsg": "Möchten Sie alle ausgewählten Sites löschen?" @@ -406,13 +407,21 @@ "info": "подсчитайте любой URL в формате Ant Pattern, вы можете добавить пользовательский сайт в правом верхнем углу" } }, + "cate": { + "name": "Наименование", + "relatedMsg": "Эта категория была связана с {siteCount} сайтами и не может быть удалена", + "removeConfirm": "Вы уверены, что хотите удалить категорию: {category}?", + "batchChange": "Изменить категории" + }, "form": { "emptyAlias": "Введите название сайта", "emptyHost": "Введите URL-адрес сайта" }, "msg": { "hostExistWarn": "{host} существует", - "existedTag": "ВЫПОЛНЕНО" + "existedTag": "ВЫПОЛНЕНО", + "noSelected": "Сайт не выбран", + "batchDeleteMsg": "Вы уверенны, что хотите удалить выбранные сайты?" } }, "ar": { @@ -457,5 +466,134 @@ "disassociatedMsg": "هل تريد إخلاء فئات جميع المواقع المحددة؟", "batchDeleteMsg": "هل تريد حذف جميع المواقع المحددة؟" } + }, + "tr": { + "deleteConfirmMsg": "{host} silinecektir", + "genAliasConfirmMsg": "Site adlarını toplu olarak otomatik olarak tamamlayacak mısınız?", + "column": { + "type": "Site Türü", + "alias": "Site Adı", + "cate": "Site Kategorisi", + "icon": "İkon" + }, + "type": { + "normal": { + "name": "normal", + "info": "alan adına göre istatistikler" + }, + "merged": { + "name": "birleştirildi", + "info": "birden fazla ilgili alan adının istatistiklerini birleştirir ve birleştirme kuralları özelleştirilebilir" + }, + "virtual": { + "name": "sanal", + "info": "Ant Pattern formatındaki herhangi bir URL'yi saymak için, sağ üst köşeye özel bir site ekleyebilirsiniz" + } + }, + "cate": { + "name": "Adı", + "relatedMsg": "Bu kategori {siteCount} siteyle ilişkilendirilmiştir ve silinemez", + "removeConfirm": "Kategoriyi silmek için onaylayın: {category}?", + "batchChange": "Kategorileri değiştir", + "batchDisassociate": "Kategorileri ayır" + }, + "form": { + "emptyAlias": "Lütfen site adını girin", + "emptyHost": "Lütfen site URL'sini girin" + }, + "msg": { + "hostExistWarn": "{host} zaten mevcut", + "existedTag": "MEVCUT", + "noSelected": "Seçilmiş site yok", + "noSupported": "Seçilen siteler için kategori ayarlanamıyor", + "disassociatedMsg": "Seçilen tüm sitelerin kategorilerini temizlemek ister misiniz?", + "batchDeleteMsg": "Seçili tüm siteleri silmek istiyor musunuz?" + } + }, + "pl": { + "deleteConfirmMsg": "{host} zostanie usunięty", + "genAliasConfirmMsg": "Czy automatycznie uzupełniać nazwy witryny w seriach?", + "column": { + "type": "Typ witryny", + "alias": "Nazwa strony", + "cate": "Kategoria witryny", + "icon": "Ikona" + }, + "type": { + "normal": { + "name": "normalny", + "info": "statystyki według nazwy domeny" + }, + "merged": { + "name": "scalone", + "info": "łączenie statystyk wielu powiązanych nazw stron i reguły łączenia mogą być dostosowywane" + }, + "virtual": { + "name": "wirtualne", + "info": "policz dowolny adres URL w formacie Ant Pattern, możesz dodać niestandardową stronę w prawym górnym rogu" + } + }, + "cate": { + "name": "Nazwa", + "relatedMsg": "Ta kategoria została przypisana do witryn {siteCount} i nie może zostać usunięta", + "removeConfirm": "Potwierdzasz usunięcie kategorii: {category}?", + "batchChange": "Zmień kategorie", + "batchDisassociate": "Odłącz kategorie" + }, + "form": { + "emptyAlias": "Wprowadź nazwę witryny", + "emptyHost": "Wprowadź adres URL witryny" + }, + "msg": { + "hostExistWarn": "{host} istnieje", + "existedTag": "WYŁĄCZONE", + "noSelected": "Nie wybrano żadnej witryny", + "noSupported": "Wybrane witryny nie mogą ustawić kategorii", + "disassociatedMsg": "Czy chcesz wyczyścić kategorie wszystkich wybranych witryn?", + "batchDeleteMsg": "Czy chcesz usunąć wszystkie wybrane witryny?" + } + }, + "it": { + "deleteConfirmMsg": "{host} sarà eliminato", + "genAliasConfirmMsg": "Indica se completare automaticamente i nomi dei siti nei batch?", + "column": { + "type": "Site Type", + "alias": "Nome del sito", + "cate": "Categoria di Sito", + "icon": "Icone" + }, + "type": { + "normal": { + "name": "normale", + "info": "statistiche in base al nome dominio" + }, + "merged": { + "name": "uniti", + "info": "fonde le statistiche di più nomi di dominio correlati, e le regole di fusione possono essere personalizzate" + }, + "virtual": { + "name": "virtuale", + "info": "conta qualsiasi URL in formato Ant Pattern, è possibile aggiungere un sito personalizzato nell'angolo in alto a destra" + } + }, + "cate": { + "name": "Nome", + "relatedMsg": "Questa categoria è stata associata ai siti {siteCount} e non può essere eliminata", + "removeConfirm": "Confermi di voler eliminare la categoria: {category}?", + "batchChange": "Cambia categorie", + "batchDisassociate": "Dissocia categorie" + }, + "form": { + "emptyAlias": "Inserisci il nome del sito", + "emptyHost": "Inserisci l'URL del sito" + }, + "msg": { + "hostExistWarn": "{host} esiste", + "existedTag": "ESISTEVA", + "noSelected": "Nessun sito selezionato", + "noSupported": "I siti selezionati non possono impostare categorie", + "disassociatedMsg": "Vuoi cancellare le categorie di tutti i siti selezionati?", + "batchDeleteMsg": "Vuoi eliminare tutti i siti selezionati?" + } } } \ No newline at end of file diff --git a/src/i18n/message/app/site-manage.ts b/src/i18n/message/app/site-manage.ts index 3b4ba75c0..7f274756d 100644 --- a/src/i18n/message/app/site-manage.ts +++ b/src/i18n/message/app/site-manage.ts @@ -16,7 +16,7 @@ export type SiteManageMessage = { cate: string icon: string } - type: Record> + type: Record> cate: { name: string relatedMsg: string diff --git a/src/i18n/message/app/time-format-resource.json b/src/i18n/message/app/time-format-resource.json index 01b896c3a..5be1d0fed 100644 --- a/src/i18n/message/app/time-format-resource.json +++ b/src/i18n/message/app/time-format-resource.json @@ -48,7 +48,7 @@ "second": "Anzeige in Sekunden" }, "fr": { - "default": "Format d'heure par défaut", + "default": "Format de temps par défaut", "hour": "Afficher en heures", "minute": "Afficher en minutes", "second": "Afficher en secondes" @@ -64,5 +64,23 @@ "hour": "عرض في ساعات", "minute": "عرض في دقائق", "second": "العرض بالثواني" + }, + "tr": { + "default": "Varsayılan tarih formatı", + "hour": "Saat cinsinden göster", + "minute": "Dakika cinsinden göster", + "second": "Saniye cinsinden göster" + }, + "pl": { + "default": "Domyślny format czasu", + "hour": "Wyświetl w godzinach", + "minute": "Wyświetl w minutach", + "second": "Wyświetl w sekundach" + }, + "it": { + "default": "Formato orario predefinito", + "hour": "Visualizza in ore", + "minute": "Visualizza in minuti", + "second": "Visualizza in secondi" } } \ No newline at end of file diff --git a/src/i18n/message/app/time-format.ts b/src/i18n/message/app/time-format.ts index 9a8c456e7..35e17abf8 100644 --- a/src/i18n/message/app/time-format.ts +++ b/src/i18n/message/app/time-format.ts @@ -7,7 +7,7 @@ import resource from './time-format-resource.json' -export type TimeFormatMessage = { [key in timer.app.TimeFormat]: string } +export type TimeFormatMessage = { [key in tt4b.ui.TimeFormat]: string } const _default: Messages = resource diff --git a/src/i18n/message/app/whitelist-resource.json b/src/i18n/message/app/whitelist-resource.json deleted file mode 100644 index e55f0e154..000000000 --- a/src/i18n/message/app/whitelist-resource.json +++ /dev/null @@ -1,104 +0,0 @@ -{ - "zh_CN": { - "addConfirmMsg": "{url} 将被加入至白名单", - "removeConfirmMsg": "{url} 将从白名单中移除", - "duplicateMsg": "已存在白名单中", - "infoAlertTitle": "你可以在这里配置网站白名单", - "infoAlert0": "白名单内网站的上网时长和打开次数不会被统计", - "infoAlert1": "白名单内网站的上网时间也不会被限制", - "infoAlert2": "您可以使用通配符 (*) 匹配多个站点，例如 *.example.com/**，并使用 + 作为前缀排除站点，例如 +need.example.com/**", - "errorInput": "域名格式错误" - }, - "zh_TW": { - "addConfirmMsg": "{url} 將會被加入白名單。", - "removeConfirmMsg": "確定要將 {url} 從白名單移除嗎？", - "duplicateMsg": "此網址已存在於白名單中", - "infoAlertTitle": "網站白名單設定", - "infoAlert0": "白名單內的網站將不會記錄瀏覽時長與造訪次數", - "infoAlert1": "白名單內的網站不受時間限制功能影響", - "errorInput": "網域名稱格式錯誤" - }, - "en": { - "addConfirmMsg": "{url} will be added to the whitelist.", - "removeConfirmMsg": "{url} will be removed from the whitelist.", - "duplicateMsg": "Duplicated", - "infoAlertTitle": "You can whitelist sites on this page", - "infoAlert0": "Whitelisted sites will not be counted", - "infoAlert1": "Whitelisted sites will not be restricted", - "infoAlert2": "You can use a wildcards(*) to match multiple sites, such as *.example.com/**, and use + as a prefix to exclude sites, such as +need.example.com/**", - "errorInput": "Invalid site URL" - }, - "ja": { - "addConfirmMsg": "{url} がホワイトリストに追加されます。", - "removeConfirmMsg": "{url} はホワイトリストから削除されます", - "duplicateMsg": "繰り返される", - "infoAlertTitle": "このページでサイトのホワイトリストを設定できます", - "infoAlert0": "ホワイトリストのサイトはカウントされません。", - "infoAlert1": "ホワイトリストのサイトは制限されません。", - "errorInput": "無効なURL" - }, - "pt_PT": { - "addConfirmMsg": "{url} será adicionado à lista de permissões.", - "removeConfirmMsg": "{url} será removido da lista de permissões.", - "duplicateMsg": "Duplicado", - "infoAlertTitle": "Pode adicionar sites à lista de permissões nesta página", - "infoAlert0": "Os sites na lista de permissões não serão contabilizados", - "infoAlert1": "Os sites na lista de permissões não serão restringidos", - "errorInput": "URL do site inválido" - }, - "uk": { - "addConfirmMsg": "{url} буде додано до білого списку.", - "removeConfirmMsg": "{url} буде вилучено з білого списку.", - "duplicateMsg": "Дублікат", - "infoAlertTitle": "На цій сторінці ви можете налаштувати білий список сайтів", - "infoAlert0": "Сайти в білому списку не враховуватимуться", - "infoAlert1": "Сайти в білому списку не матимуть обмежень", - "infoAlert2": "Можна використовувати змінні (*) для збігів декількох сайтів, наприклад *.example.com/**. Щоб виключити сайти, використовуйте +, наприклад +need.example.com/**", - "errorInput": "Неприпустима URL-адреса сайту" - }, - "es": { - "addConfirmMsg": "{url} se agregará a la lista blanca.", - "removeConfirmMsg": "{url} será eliminado de la lista blanca.", - "duplicateMsg": "Duplicado", - "infoAlertTitle": "Puedes configurar una lista blanca de sitios en esta página", - "infoAlert0": "Los sitios en la lista blanca no serán contados", - "infoAlert1": "Los sitios en la lista blanca no serán restringidos", - "errorInput": "URL del sitio inválida" - }, - "de": { - "addConfirmMsg": "{url} wird zur Whitelist hinzugefügt.", - "removeConfirmMsg": "{url} wird von der Whitelist entfernt.", - "duplicateMsg": "Dupliziert", - "infoAlertTitle": "Sie können eine Whitelist vonseiten auf dieser Seite festlegen", - "infoAlert0": "Websites auf der Whitelist werden nicht gezählt", - "infoAlert1": "Websites auf der Whitelist werden nicht eingeschränkt", - "errorInput": "Ungültige Seiten-URL" - }, - "fr": { - "addConfirmMsg": "{url} sera ajouté à la liste blanche.", - "removeConfirmMsg": "{url} sera supprimé de la liste blanche.", - "duplicateMsg": "Doublon", - "infoAlertTitle": "Vous pouvez ajouter des sites à la liste blanche sur cette page", - "infoAlert0": "Les sites sur liste blanche ne seront pas comptés", - "infoAlert1": "Les sites sur liste blanche ne seront pas restreints", - "errorInput": "URL du site invalide" - }, - "ru": { - "addConfirmMsg": "{url} будет добавлен в белый список.", - "removeConfirmMsg": "{url} будет удален из белого списка.", - "duplicateMsg": "Дублированный", - "infoAlertTitle": "Вы можете добавить сайты в белый список на этой странице", - "infoAlert0": "Сайты, внесенные в белый список, не будут учитываться", - "infoAlert1": "Сайты из белого списка не будут ограничены", - "errorInput": "Неверный URL-адрес сайта" - }, - "ar": { - "addConfirmMsg": "سيتم إضافة {url} إلى القائمة البيضاء.", - "removeConfirmMsg": "سيتم إزالة {url} من القائمة البيضاء.", - "duplicateMsg": "مكررة", - "infoAlertTitle": "يمكنك إضافة المواقع إلى القائمة البيضاء في هذه الصفحة", - "infoAlert0": "لن يتم احتساب المواقع المدرجة في القائمة البيضاء", - "infoAlert1": "لن يتم تقييد المواقع المدرجة في القائمة البيضاء", - "errorInput": "عنوان الموقع غير صالح" - } -} \ No newline at end of file diff --git a/src/i18n/message/app/whitelist.ts b/src/i18n/message/app/whitelist.ts deleted file mode 100644 index 54741f6f5..000000000 --- a/src/i18n/message/app/whitelist.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import resource from './whitelist-resource.json' - -export type WhitelistMessage = { - addConfirmMsg: string - removeConfirmMsg: string - duplicateMsg: string - infoAlertTitle: string - infoAlert0: string - infoAlert1: string - infoAlert2: string - errorInput: string -} - -const _default: Messages = resource - -export default _default \ No newline at end of file diff --git a/src/i18n/message/bg/index.ts b/src/i18n/message/bg/index.ts new file mode 100644 index 000000000..acb729e5a --- /dev/null +++ b/src/i18n/message/bg/index.ts @@ -0,0 +1,18 @@ +import calendarMessages, { type CalendarMessage } from '../common/calendar' +import metaMessages, { type MetaMessage } from '../common/meta' +import { merge, MessageRoot } from '../merge' +import notificationMessages, { type NotificationMessage } from './notification' + +export type BgMessage = { + meta: MetaMessage + calendar: CalendarMessage + notification: NotificationMessage +} + +const CHILD_MESSAGES: MessageRoot = { + meta: metaMessages, + calendar: calendarMessages, + notification: notificationMessages, +} + +export default merge(CHILD_MESSAGES) \ No newline at end of file diff --git a/src/i18n/message/bg/notification-resource.json b/src/i18n/message/bg/notification-resource.json new file mode 100644 index 000000000..d302817f6 --- /dev/null +++ b/src/i18n/message/bg/notification-resource.json @@ -0,0 +1,5 @@ +{ + "en": { + "dailySummary": "Focus time: {focus}, Visits: {visit}, Sites: {siteCount}" + } +} \ No newline at end of file diff --git a/src/i18n/message/bg/notification.ts b/src/i18n/message/bg/notification.ts new file mode 100644 index 000000000..edb0e44a3 --- /dev/null +++ b/src/i18n/message/bg/notification.ts @@ -0,0 +1,7 @@ +import resources from "./notification-resource.json" + +export type NotificationMessage = { + dailySummary: string +} + +export default resources satisfies Messages \ No newline at end of file diff --git a/src/i18n/message/common/base-resource.json b/src/i18n/message/common/base-resource.json index 298afed45..43190cda2 100644 --- a/src/i18n/message/common/base-resource.json +++ b/src/i18n/message/common/base-resource.json @@ -3,9 +3,11 @@ "sidebar": "Sidebar", "allFunction": "All Features", "guidePage": "User Guide", - "option": "Settings", + "option": "Options", "sourceCode": "Source Code", - "changeLog": "Release Notes" + "changeLog": "Release Notes", + "limit": "Time Limit", + "helpUs": "Help Translation" }, "zh_CN": { "sidebar": "侧边栏", @@ -13,7 +15,9 @@ "guidePage": "使用指南", "option": "设置", "sourceCode": "源代码", - "changeLog": "版本日志" + "changeLog": "版本日志", + "limit": "时间限制", + "helpUs": "帮助翻译" }, "zh_TW": { "sidebar": "側邊欄", @@ -21,7 +25,9 @@ "guidePage": "使用指南", "option": "設定", "sourceCode": "原始碼", - "changeLog": "版本紀錄" + "changeLog": "版本紀錄", + "limit": "時間限制", + "helpUs": "協助翻譯" }, "ja": { "sidebar": "サイドバー", @@ -29,7 +35,9 @@ "guidePage": "使い方ガイド", "option": "設定", "sourceCode": "ソースコード", - "changeLog": "リリースノート" + "changeLog": "リリースノート", + "limit": "時間制限", + "helpUs": "協力する" }, "pt_PT": { "sidebar": "Barra Lateral", @@ -37,7 +45,9 @@ "guidePage": "Guia do Utilizador", "option": "Definições", "sourceCode": "Código Fonte", - "changeLog": "Notas de Lançamento" + "changeLog": "Notas de Lançamento", + "limit": "Limite de Tempo", + "helpUs": "Ajudar a Traduzir" }, "uk": { "sidebar": "Бічна панель", @@ -45,7 +55,9 @@ "guidePage": "Посібник", "option": "Налаштування", "sourceCode": "Програмний код", - "changeLog": "Журнал змін" + "changeLog": "Журнал змін", + "limit": "Обмеження часу", + "helpUs": "Допомогти нам" }, "es": { "sidebar": "Barra Lateral", @@ -53,7 +65,9 @@ "guidePage": "Guía de Usuario", "option": "Ajustes", "sourceCode": "Código Fuente", - "changeLog": "Notas de Versión" + "changeLog": "Notas de Versión", + "limit": "Límite de tiempo", + "helpUs": "Ayúdanos" }, "de": { "sidebar": "Seitenleiste", @@ -61,7 +75,9 @@ "guidePage": "Benutzeranleitung", "option": "Einstellungen", "sourceCode": "Quellcode", - "changeLog": "Versionshinweise" + "changeLog": "Versionshinweise", + "limit": "Zeitlimit", + "helpUs": "Hilfe bei der Übersetzung" }, "fr": { "sidebar": "Barre Latérale", @@ -69,7 +85,9 @@ "guidePage": "Guide d'Utilisation", "option": "Paramètres", "sourceCode": "Code Source", - "changeLog": "Notes de Version" + "changeLog": "Notes de Version", + "limit": "Limite de temps", + "helpUs": "Aider à la traduction" }, "ru": { "sidebar": "Боковая панель", @@ -77,7 +95,9 @@ "guidePage": "Руководство", "option": "Настройки", "sourceCode": "Исходный код", - "changeLog": "Версионные изменения" + "changeLog": "Версионные изменения", + "limit": "Ограничение по времени", + "helpUs": "Помогите перевести" }, "ar": { "sidebar": "الشريط الجانبي", @@ -85,6 +105,38 @@ "guidePage": "دليل الاستخدام", "option": "الإعدادات", "sourceCode": "الكود المصدري", - "changeLog": "ملاحظات الإصدار" + "changeLog": "ملاحظات الإصدار", + "limit": "المهلة", + "helpUs": "ساعدني في التَّرْجَمَةً" + }, + "tr": { + "sidebar": "Kenar Çubuğu", + "allFunction": "Tüm Özellikler", + "guidePage": "Kullanım Kılavuzu", + "option": "Seçenekler", + "sourceCode": "Kaynak Kodu", + "changeLog": "Sürüm Notları", + "limit": "Zaman Sınırı", + "helpUs": "Çeviriye yardım et" + }, + "pl": { + "sidebar": "Pasek boczny", + "allFunction": "Wszystkie funkcje", + "guidePage": "Podręcznik użytkownika", + "option": "Ustawienia", + "sourceCode": "Kod źródłowy", + "changeLog": "Lista Zmian", + "limit": "Limit czasu", + "helpUs": "Pomóż w tłumaczeniu" + }, + "it": { + "sidebar": "Barra laterale", + "allFunction": "Tutte le funzionalità", + "guidePage": "Guida per l'utente", + "option": "Opzioni", + "sourceCode": "Codice sorgente", + "changeLog": "Note di Rilascio", + "limit": "Limite di tempo", + "helpUs": "Aiuto Traduzione" } } \ No newline at end of file diff --git a/src/i18n/message/common/base.ts b/src/i18n/message/common/base.ts index b64d19b24..f14c4ebd7 100644 --- a/src/i18n/message/common/base.ts +++ b/src/i18n/message/common/base.ts @@ -8,12 +8,13 @@ import resource from './base-resource.json' export type BaseMessage = { - sidebar: string allFunction: string guidePage: string changeLog: string option: string sourceCode: string + limit: string + helpUs: string } /** diff --git a/src/i18n/message/common/button-resource.json b/src/i18n/message/common/button-resource.json index df855cc55..991cae1c1 100644 --- a/src/i18n/message/common/button-resource.json +++ b/src/i18n/message/common/button-resource.json @@ -12,14 +12,17 @@ "cancel": "Cancel", "previous": "Back", "next": "Next", - "okey": "OK", + "okay": "OK", "dont": "No", "operation": "Actions", "configuration": "Settings", "clear": "Clear", "enable": "Enable", "batchEnable": "Batch Enable", - "batchDisable": "Batch Disable" + "batchDisable": "Batch Disable", + "collapse": "Collapse", + "expand": "Expand", + "copy": "Copy" }, "zh_CN": { "create": "新建", @@ -34,14 +37,17 @@ "cancel": "取消", "previous": "上一步", "next": "下一步", - "okey": "确定", + "okay": "确定", "dont": "取消", "operation": "操作", "configuration": "设置", "clear": "清除", "enable": "启用", "batchEnable": "批量启用", - "batchDisable": "批量禁用" + "batchDisable": "批量禁用", + "collapse": "折叠", + "expand": "展开", + "copy": "复制" }, "zh_TW": { "create": "新增", @@ -56,17 +62,20 @@ "cancel": "取消", "previous": "上一步", "next": "下一步", - "okey": "確定", + "okay": "確定", "dont": "取消", "operation": "操作", "configuration": "設定", "clear": "清除", "enable": "啟用", "batchEnable": "批次啟用", - "batchDisable": "批次停用" + "batchDisable": "批量停用", + "collapse": "收合", + "expand": "展開" }, "ja": { "create": "新規", + "add": "追加", "delete": "削除", "batchDelete": "一括削除", "modify": "編集", @@ -77,13 +86,16 @@ "cancel": "キャンセル", "previous": "戻る", "next": "次へ", - "okey": "OK", + "okay": "OK", "dont": "いいえ", "operation": "操作", "configuration": "設定", "clear": "クリア", + "enable": "有効化", "batchEnable": "一括有効", - "batchDisable": "一括無効" + "batchDisable": "一括無効", + "collapse": "折りたたむ", + "expand": "展開" }, "pt_PT": { "create": "Criar", @@ -98,14 +110,15 @@ "cancel": "Cancelar", "previous": "Anterior", "next": "Seguinte", - "okey": "OK", "dont": "Não", "operation": "Ações", "configuration": "Configurações", "clear": "Limpar", "enable": "Ativar", "batchEnable": "Ativar em Lote", - "batchDisable": "Desativar em Lote" + "batchDisable": "Desativar em Lote", + "collapse": "Colapsar", + "expand": "Expandir" }, "uk": { "create": "Новий", @@ -120,7 +133,7 @@ "cancel": "Скасувати", "previous": "Назад", "next": "Далі", - "okey": "Гаразд", + "okay": "Гаразд", "dont": "НІ", "operation": "Дії", "configuration": "Налаштування", @@ -142,17 +155,19 @@ "cancel": "Cancelar", "previous": "Anterior", "next": "Siguiente", - "okey": "OK", - "dont": "¡NO!", + "dont": "No", "operation": "Acciones", "configuration": "Configuración", "clear": "Limpiar", "enable": "Activar", "batchEnable": "Habilitar en Lote", - "batchDisable": "Deshabilitar en Lote" + "batchDisable": "Deshabilitar en Lote", + "collapse": "Colapsar", + "expand": "Expandir" }, "de": { "create": "Neu", + "add": "Hinzufügen", "delete": "Löschen", "batchDelete": "Stapelverarbeitung löschen", "modify": "Bearbeiten", @@ -163,13 +178,17 @@ "cancel": "Abbrechen", "previous": "Zurück", "next": "Weiter", - "okey": "OK", + "okay": "OK", "dont": "Nein", "operation": "Aktionen", "configuration": "Einstellungen", "clear": "Leeren", + "enable": "Aktivieren", "batchEnable": "Stapelaktivierung", - "batchDisable": "Stapeldeaktivierung" + "batchDisable": "Stapeldeaktivierung", + "collapse": "Schließen", + "expand": "Aufklappen", + "copy": "Kopieren" }, "fr": { "create": "Nouveau", @@ -184,17 +203,21 @@ "cancel": "Annuler", "previous": "Retour", "next": "Suivant", - "okey": "OK", + "okay": "OK", "dont": "Non", "operation": "Opérations", "configuration": "Paramètres", "clear": "Effacer", "enable": "Activer", "batchEnable": "Activation par Lot", - "batchDisable": "Désactivation par Lot" + "batchDisable": "Désactivation par Lot", + "collapse": "Réduire", + "expand": "Développer", + "copy": "Copier" }, "ru": { "create": "Создать", + "add": "Добавить", "delete": "Удалить", "batchDelete": "Массовое удаление", "modify": "Редактировать", @@ -205,11 +228,12 @@ "cancel": "Отменить", "previous": "Назад", "next": "Далее", - "okey": "ОК", + "okay": "ОК", "dont": "Нет", "operation": "Действия", "configuration": "Настройки", "clear": "Очистить", + "enable": "Включить", "batchEnable": "Массовое включение", "batchDisable": "Массовое отключение" }, @@ -226,7 +250,7 @@ "cancel": "إلغاء", "previous": "السابق", "next": "التالي", - "okey": "موافق", + "okay": "موافق", "dont": "لا", "operation": "إجراءات", "configuration": "إعدادات", @@ -234,5 +258,78 @@ "enable": "تفعيل", "batchEnable": "تمكين جماعي", "batchDisable": "تعطيل جماعي" + }, + "tr": { + "create": "Yeni", + "add": "Ekle", + "delete": "Sil", + "batchDelete": "Toplu Sil", + "modify": "Düzenle", + "save": "Kaydet", + "test": "Test", + "paste": "Yapıştır", + "confirm": "Onayla", + "cancel": "İptal Et", + "previous": "Geri", + "next": "İleri", + "okay": "Tamam", + "dont": "Hayır", + "operation": "Eylemler", + "configuration": "Ayarlar", + "clear": "Temizle", + "enable": "Etkinleştir", + "batchEnable": "Toplu Etkinleştirme", + "batchDisable": "Toplu Devre Dışı Bırakma", + "collapse": "Daralt", + "expand": "Genişlet" + }, + "pl": { + "create": "Nowe", + "add": "Dodaj", + "delete": "Usuń", + "batchDelete": "Usuń wiele", + "modify": "Edytuj", + "save": "Zapisz", + "test": "Test", + "paste": "Wklej", + "confirm": "Potwierdź", + "cancel": "Anuluj", + "previous": "Wstecz", + "next": "Dalej", + "okay": "Ok", + "dont": "Nie", + "operation": "Działania", + "configuration": "Ustawienia", + "clear": "Wyczyść", + "enable": "Włącz", + "batchEnable": "Włączanie serii", + "batchDisable": "Seria wyłączenia", + "collapse": "Zwiń", + "expand": "Rozwiń" + }, + "it": { + "create": "Nuovo", + "add": "Aggiungi", + "delete": "Elimina", + "batchDelete": "Elimina batch", + "modify": "Modifica", + "save": "Salva", + "test": "Test", + "paste": "Incolla", + "confirm": "Conferma", + "cancel": "Cancella", + "previous": "Indietro", + "next": "Avanti", + "okay": "OK", + "dont": "No", + "operation": "Azioni", + "configuration": "Impostazioni", + "clear": "Cancella", + "enable": "Abilita", + "batchEnable": "Attiva Batch", + "batchDisable": "Disabilita Batch", + "collapse": "Riduci", + "expand": "Espandi", + "copy": "Copia" } } \ No newline at end of file diff --git a/src/i18n/message/common/button.ts b/src/i18n/message/common/button.ts index eb5f4fe12..054b834a5 100644 --- a/src/i18n/message/common/button.ts +++ b/src/i18n/message/common/button.ts @@ -19,7 +19,7 @@ export type ButtonMessage = { cancel: string previous: string next: string - okey: string + okay: string dont: string operation: string configuration: string @@ -27,6 +27,9 @@ export type ButtonMessage = { enable: string batchEnable: string batchDisable: string + collapse: string + expand: string + copy: string } const _default: Messages = resource diff --git a/src/i18n/message/common/calendar-resource.json b/src/i18n/message/common/calendar-resource.json index d81852141..057201a00 100644 --- a/src/i18n/message/common/calendar-resource.json +++ b/src/i18n/message/common/calendar-resource.json @@ -16,6 +16,7 @@ "everyday": "每天", "thisWeek": "本周", "thisMonth": "本月", + "lastWeek": "上周", "lastDays": "最近{n}天", "tillYesterday": "截至昨天", "tillDaysAgo": "截至{n}天前", @@ -39,6 +40,7 @@ "everyday": "每天", "thisWeek": "本週", "thisMonth": "本月", + "lastWeek": "上週", "lastDays": "最近{n}天", "tillYesterday": "截至昨天", "tillDaysAgo": "截至{n}天前", @@ -62,6 +64,7 @@ "everyday": "Everyday", "thisWeek": "This week", "thisMonth": "This month", + "lastWeek": "Last week", "lastDays": "Last {n} days", "tillYesterday": "Through yesterday", "tillDaysAgo": "Through {n} days ago", @@ -85,6 +88,7 @@ "everyday": "毎日", "thisWeek": "今週", "thisMonth": "今月", + "lastWeek": "先週", "lastDays": "過去{n}日間", "tillYesterday": "昨日まで", "tillDaysAgo": "{n}日前まで", @@ -154,6 +158,7 @@ "everyday": "Diario", "thisWeek": "Esta semana", "thisMonth": "Este mes", + "lastWeek": "Semana pasada", "lastDays": "Últimos {n} días", "tillYesterday": "Hasta ayer", "tillDaysAgo": "Hasta hace {n} días", @@ -177,6 +182,7 @@ "everyday": "Täglich", "thisWeek": "Diese Woche", "thisMonth": "Diesen Monat", + "lastWeek": "Letzte Woche", "lastDays": "Letzte {n} Tage", "tillYesterday": "Bis gestern", "tillDaysAgo": "Bis vor {n} Tagen", @@ -200,6 +206,7 @@ "everyday": "Quotidien", "thisWeek": "Cette semaine", "thisMonth": "Ce mois-ci", + "lastWeek": "Dernière semaine", "lastDays": "{n} derniers jours", "tillYesterday": "Jusqu'à hier", "tillDaysAgo": "Jusqu'à {n} jours", @@ -251,5 +258,77 @@ "tillDaysAgo": "حتى منذ {n} يوم", "allTime": "كل الفترة" } + }, + "tr": { + "weekDays": "Pzt|Salı|Çar|Per|Cum|Cts|Paz", + "months": "Oca|Şub|Mar|Nis|May|Haz|Tem|Ağu|Eyl|Eki|Kas|Ara", + "dateFormat": "{d}/{m}/{y}", + "monthDateFormat": "{d}/{m}", + "timeFormat": "{d}/{m}/{y} {h}:{i}:{s}", + "simpleTimeFormat": "{d}/{m} {h}:{i}", + "label": { + "startDate": "Başlangıç ​​tarihi", + "endDate": "Bitiş tarihi" + }, + "range": { + "today": "Bugün", + "yesterday": "Dün", + "everyday": "Her gün", + "thisWeek": "Bu hafta", + "thisMonth": "Bu ay", + "lastWeek": "Geçen hafta", + "lastDays": "Son {n} gün", + "tillYesterday": "Dün boyunca", + "tillDaysAgo": "{n} gün önce", + "allTime": "Tüm zamanlar" + } + }, + "pl": { + "weekDays": "Pn|Wt|Śr|Cz|Pt|Sb|Nd", + "months": "Sty|Lut|Mar|Kwi|Maj|Cze|Lip|Sie|Wrz|Paź|Lis|Gru", + "dateFormat": "{d}/{m}/{y}", + "monthDateFormat": "{d}/{m}", + "timeFormat": "{d}/{m}/{y} {h}:{i}:{s}", + "simpleTimeFormat": "{m}/{d} {h}:{i}", + "label": { + "startDate": "Data rozpoczęcia", + "endDate": "Data zakończenia" + }, + "range": { + "today": "Dzisiaj", + "yesterday": "Wczoraj", + "everyday": "Codziennie", + "thisWeek": "W tym tygodniu", + "thisMonth": "W tym miesiącu", + "lastWeek": "W zeszłym tygodniu", + "lastDays": "W ciągu ostatnich {n} dni", + "tillYesterday": "Wczoraj", + "tillDaysAgo": "Przez {n} dni temu", + "allTime": "Od początku" + } + }, + "it": { + "weekDays": "Lun|Mar|Mer|Gio|Ven|Sab|Dom", + "months": "Gen|Feb|Mar|Apr|Mag|Giu|Lug|Ago|Set|Ott|Nov|Dic", + "dateFormat": "{d}/{m}/{y}", + "monthDateFormat": "{d}/{m}", + "timeFormat": "{d}/{m}/{y} {h}:{i}:{s}", + "simpleTimeFormat": "{d}/{m} {h}:{i}", + "label": { + "startDate": "Data Inizio", + "endDate": "Data di fine" + }, + "range": { + "today": "Oggi", + "yesterday": "Ieri", + "everyday": "Tutti i giorni", + "thisWeek": "Questa settimana", + "thisMonth": "Questo mese", + "lastWeek": "Ultima settimana", + "lastDays": "Ultimi {n} giorni", + "tillYesterday": "Fino a ieri", + "tillDaysAgo": "Fino a {n} giorni fa", + "allTime": "Sempre" + } } } \ No newline at end of file diff --git a/src/i18n/message/common/calendar.ts b/src/i18n/message/common/calendar.ts index 8e11c891d..6e838d44c 100644 --- a/src/i18n/message/common/calendar.ts +++ b/src/i18n/message/common/calendar.ts @@ -24,6 +24,7 @@ export type CalendarMessage = { yesterday: string thisWeek: string thisMonth: string + lastWeek: string lastDays: string tillYesterday: string tillDaysAgo: string diff --git a/src/i18n/message/common/context-menus-resource.json b/src/i18n/message/common/context-menus-resource.json index b3cea4cd7..3c1f9813b 100644 --- a/src/i18n/message/common/context-menus-resource.json +++ b/src/i18n/message/common/context-menus-resource.json @@ -53,5 +53,20 @@ "add2Whitelist": "أضف {host} إلى القائمة البيضاء", "removeFromWhitelist": "إزالة {host} من القائمة البيضاء", "feedbackPage": "مشكلات" + }, + "tr": { + "add2Whitelist": "{host} adresini beyaz listeye ekle", + "removeFromWhitelist": "{host} adresini beyaz listeden çıkart", + "feedbackPage": "Sorunlar" + }, + "pl": { + "add2Whitelist": "Dodaj {host} do Whitelisty", + "removeFromWhitelist": "Usuń {host} z Whitelisty", + "feedbackPage": "Zgłoszenia" + }, + "it": { + "add2Whitelist": "Aggiungi {host} alla whitelist", + "removeFromWhitelist": "Rimuovi {host} dalla whitelist", + "feedbackPage": "Problemi" } } \ No newline at end of file diff --git a/src/i18n/message/common/initial-resource.json b/src/i18n/message/common/initial-resource.json index 855a8edcf..ebecb809a 100644 --- a/src/i18n/message/common/initial-resource.json +++ b/src/i18n/message/common/initial-resource.json @@ -86,5 +86,29 @@ "pic": "الصور", "txt": "نص" } + }, + "tr": { + "localFile": { + "json": "JSON", + "pdf": "PDF", + "pic": "Resimler", + "txt": "Metin" + } + }, + "pl": { + "localFile": { + "json": "JSON", + "pdf": "PDF", + "pic": "Zdjęcia", + "txt": "Tekst" + } + }, + "it": { + "localFile": { + "json": "JSON", + "pdf": "PDF", + "pic": "Immagini", + "txt": "Testo" + } } } \ No newline at end of file diff --git a/src/i18n/message/common/item-resource.json b/src/i18n/message/common/item-resource.json index e8b26c461..e44637776 100644 --- a/src/i18n/message/common/item-resource.json +++ b/src/i18n/message/common/item-resource.json @@ -11,10 +11,7 @@ "analysis": "分析", "deleteConfirmMsgAll": "将删除 {url} 的所有访问记录", "deleteConfirmMsgRange": "将删除 {url} 在 {start} 至 {end} 期间的访问记录", - "deleteConfirmMsg": "将删除 {url} 在 {date} 的访问记录", - "exportWholeData": "导出数据", - "importWholeData": "导入数据", - "importOtherData": "导入其他插件数据" + "deleteConfirmMsg": "将删除 {url} 在 {date} 的访问记录" } }, "zh_TW": { @@ -29,10 +26,7 @@ "analysis": "分析", "deleteConfirmMsgAll": "將刪除 {url} 的所有瀏覽紀錄", "deleteConfirmMsgRange": "將刪除 {url} 在 {start} 至 {end} 期間的瀏覽紀錄", - "deleteConfirmMsg": "將刪除 {url} 在 {date} 的瀏覽紀錄", - "exportWholeData": "匯出資料", - "importWholeData": "匯入資料", - "importOtherData": "匯入其他擴充功能資料" + "deleteConfirmMsg": "將刪除 {url} 在 {date} 的瀏覽紀錄" } }, "en": { @@ -47,15 +41,13 @@ "analysis": "Analyze", "deleteConfirmMsgAll": "All visit records for [{url}] will be deleted", "deleteConfirmMsgRange": "Visit records for [{url}] between {start} and {end} will be deleted", - "deleteConfirmMsg": "Visit record for [{url}] of {date} will be deleted", - "exportWholeData": "Export", - "importWholeData": "Import", - "importOtherData": "Import from Extensions" + "deleteConfirmMsg": "Visit record for [{url}] of {date} will be deleted" } }, "ja": { "date": "日付", "host": "ドメイン", + "group": "タブグループ", "focus": "閲覧時間", "run": "実行時間", "time": "訪問回数", @@ -64,15 +56,13 @@ "analysis": "分析", "deleteConfirmMsgAll": "{url} の全ての訪問記録を削除します", "deleteConfirmMsgRange": "{url} の {start} から {end} までの訪問記録を削除します", - "deleteConfirmMsg": "{url} の {date} の訪問記録を削除します", - "exportWholeData": "エクスポート", - "importWholeData": "インポート", - "importOtherData": "拡張機能からインポート" + "deleteConfirmMsg": "{url} の {date} の訪問記録を削除します" } }, "pt_PT": { "date": "Data", "host": "Domínio", + "group": "Grupo de Separadores", "focus": "Duração", "run": "Tempo de Execução", "time": "Visitas", @@ -81,10 +71,7 @@ "analysis": "Analisar", "deleteConfirmMsgAll": "Todos os registos de visitas de {url} serão eliminados", "deleteConfirmMsgRange": "Os registos de visitas de {url} entre {start} e {end} serão eliminados", - "deleteConfirmMsg": "O registo de visita de {url} de {date} será eliminado", - "exportWholeData": "Exportar", - "importWholeData": "Importar", - "importOtherData": "Importar de Extensões" + "deleteConfirmMsg": "O registo de visita de {url} de {date} será eliminado" } }, "uk": { @@ -99,10 +86,7 @@ "analysis": "Аналіз", "deleteConfirmMsgAll": "Усі записи для {url} будуть видалені!", "deleteConfirmMsgRange": "Усі записи для {url} між {start} і {end} будуть видалені!", - "deleteConfirmMsg": "Запис для {url} {date} буде видалено!", - "exportWholeData": "Експортувати дані", - "importWholeData": "Імпортувати дані", - "importOtherData": "Імпорт з інших розширень" + "deleteConfirmMsg": "Запис для {url} {date} буде видалено!" } }, "es": { @@ -117,26 +101,22 @@ "analysis": "Analizar", "deleteConfirmMsgAll": "Se eliminarán todos los registros de {url}", "deleteConfirmMsgRange": "Se eliminarán los registros de {url} entre {start} y {end}", - "deleteConfirmMsg": "Se eliminará el registro de {url} del {date}", - "exportWholeData": "Exportar", - "importWholeData": "Importar", - "importOtherData": "Importar de extensiones" + "deleteConfirmMsg": "Se eliminará el registro de {url} del {date}" } }, "de": { "date": "Datum", "host": "Webseite", + "group": "Tab-Gruppe", "focus": "Dauer", + "run": "Laufzeit", "time": "Besuche", "operation": { "add2Whitelist": "Whitelist", "analysis": "Analyse", "deleteConfirmMsgAll": "Alle Datensätze von {url} werden gelöscht", "deleteConfirmMsgRange": "Alle Einträge von {url} zwischen {start} und {end} werden gelöscht", - "deleteConfirmMsg": "Der Eintrag von {url} am {date} wird gelöscht", - "exportWholeData": "Exportieren", - "importWholeData": "Importieren", - "importOtherData": "Aus Erweiterungen importieren" + "deleteConfirmMsg": "Der Eintrag von {url} am {date} wird gelöscht" } }, "fr": { @@ -147,18 +127,17 @@ "run": "Durée d'exécution", "time": "Visites", "operation": { - "add2Whitelist": "Whitelist", + "add2Whitelist": "Liste blanche", "analysis": "Analyser", "deleteConfirmMsgAll": "Tous les enregistrements de {url} seront supprimés", "deleteConfirmMsgRange": "Les enregistrements de {url} entre {start} et {end} seront supprimés", - "exportWholeData": "Exporter", - "importWholeData": "Importer", - "importOtherData": "Depuis d'autres extensions" + "deleteConfirmMsg": "L'enregistrement des visites pour [{url}] du [{date}] seront supprimés" } }, "ru": { "date": "Дата", "host": "Сайт", + "group": "Группа вкладок", "focus": "Длительность", "run": "Время работы", "time": "Визиты", @@ -167,10 +146,7 @@ "analysis": "Анализ", "deleteConfirmMsgAll": "Все записи {url} будут удалены", "deleteConfirmMsgRange": "Записи {url} с {start} по {end} будут удалены", - "deleteConfirmMsg": "Запись {url} за {date} будет удалена", - "exportWholeData": "Экспорт", - "importWholeData": "Импорт", - "importOtherData": "Импорт из дополнений" + "deleteConfirmMsg": "Запись {url} за {date} будет удалена" } }, "ar": { @@ -185,10 +161,52 @@ "analysis": "تحليل", "deleteConfirmMsgAll": "سيتم حذف جميع سجلات {url}", "deleteConfirmMsgRange": "سيتم حذف سجلات {url} بين {start} و{end}", - "deleteConfirmMsg": "سيتم حذف سجل {url} بتاريخ {date}", - "exportWholeData": "تصدير", - "importWholeData": "استيراد", - "importOtherData": "استيراد من إضافات أخرى" + "deleteConfirmMsg": "سيتم حذف سجل {url} بتاريخ {date}" + } + }, + "tr": { + "date": "Tarih", + "host": "Alan adı", + "group": "Sekme Grubu", + "focus": "Süre", + "run": "Çalışma Süresi", + "time": "Ziyaretler", + "operation": { + "add2Whitelist": "Beyaz Liste", + "analysis": "Analiz et", + "deleteConfirmMsgAll": "[{url}] adresine ait tüm ziyaret kayıtları silinecektir", + "deleteConfirmMsgRange": "{start} ile {end} arasındaki [{url}] ziyaret kayıtları silinecektir", + "deleteConfirmMsg": "{date} tarihindeki [{url}] için ziyaret kaydı silinecektir" + } + }, + "pl": { + "date": "Data", + "host": "Domena", + "group": "Grupa zakładek", + "focus": "Czas trwania", + "run": "Czas pracy", + "time": "Liczba wizyt", + "operation": { + "add2Whitelist": "Whitelista", + "analysis": "Analizuj", + "deleteConfirmMsgAll": "Wszystkie wpisy wizyt dla [{url}] zostaną usunięte", + "deleteConfirmMsgRange": "Sprawdź wpisy dla [{url}] pomiędzy {start} a {end} zostaną usunięte", + "deleteConfirmMsg": "Wpis wizyt dla [{url}] z {date} zostanie usunięty" + } + }, + "it": { + "date": "Data", + "host": "Dominio", + "group": "Gruppo Di Schede", + "focus": "Durata", + "run": "Tempo Di Esecuzione", + "time": "Visite", + "operation": { + "add2Whitelist": "Whitelist", + "analysis": "Analizza", + "deleteConfirmMsgAll": "Tutti i record di visita per [{url}] verranno eliminati", + "deleteConfirmMsgRange": "Record di visite per [{url}] tra {start} ed {end} saranno eliminati", + "deleteConfirmMsg": "Visita record per [{url}] di {date} sarà eliminato" } } } \ No newline at end of file diff --git a/src/i18n/message/common/item.ts b/src/i18n/message/common/item.ts index 0ed7cf70b..755c0ac6b 100644 --- a/src/i18n/message/common/item.ts +++ b/src/i18n/message/common/item.ts @@ -17,12 +17,9 @@ export type ItemMessage = { deleteConfirmMsgRange: string deleteConfirmMsg: string analysis: string - exportWholeData: string - importWholeData: string - importOtherData: string } } & { - [dimension in timer.core.Dimension]: string + [dimension in tt4b.core.Dimension]: string } const _default: Messages = resource diff --git a/src/i18n/message/common/locale-resource.json b/src/i18n/message/common/locale-resource.json index f8bc66eeb..d2c129694 100644 --- a/src/i18n/message/common/locale-resource.json +++ b/src/i18n/message/common/locale-resource.json @@ -43,15 +43,21 @@ "name": "عربي", "comma": " " }, + "tr": { + "name": "Türkçe", + "comma": ", " + }, "pl": { - "name": "Polski" + "name": "Polski", + "comma": ", " + }, + "it": { + "name": "italiano", + "comma": ", " }, "ko": { "name": "한국인" }, - "it": { - "name": "italiano" - }, "sv": { "name": "Sverige" }, @@ -67,9 +73,6 @@ "id": { "name": "bahasa Indonesia" }, - "tr": { - "name": "Türkçe" - }, "cs": { "name": "čeština" }, @@ -90,5 +93,11 @@ }, "hi": { "name": "हिन्दी" + }, + "nb": { + "name": "norsk bokmål" + }, + "hu": { + "name": "magyar" } } \ No newline at end of file diff --git a/src/i18n/message/common/locale.ts b/src/i18n/message/common/locale.ts index ec1d4045a..012af62f6 100644 --- a/src/i18n/message/common/locale.ts +++ b/src/i18n/message/common/locale.ts @@ -20,11 +20,11 @@ type Meta = MetaBase & { * * @since 0.8.0 */ -export type LocaleMessages = +type LocaleMessages = { - [locale in timer.Locale]: Meta + [locale in tt4b.Locale]: Meta } & { - [translatingLocale in timer.TranslatingLocale]: MetaBase + [translatingLocale in tt4b.TranslatingLocale]: MetaBase } const _default: LocaleMessages = resource diff --git a/src/i18n/message/common/meta-resource.json b/src/i18n/message/common/meta-resource.json index c87684ac2..8a2c5d558 100644 --- a/src/i18n/message/common/meta-resource.json +++ b/src/i18n/message/common/meta-resource.json @@ -1,57 +1,72 @@ { "zh_CN": { "name": "网费很贵", - "marketName": "网费很贵 - 上网时间统计", - "description": "追踪时间，分析习惯，改善行为，提高效率" + "marketName": "网费很贵 - 屏幕习惯分析 & 成瘾网站拦截", + "description": "追踪网页时间，分析浏览习惯，防止网站沉迷，提高工作效率" }, "zh_TW": { "name": "網費很貴", - "marketName": "網費很貴 - 上網時間統計", - "description": "追蹤時間，分析習慣，改善行為，提高效率" + "marketName": "網費很貴 - 螢幕習慣分析 & 成癮網站攔截", + "description": "追蹤上網時間，分析瀏覽習慣，避免沉迷網站，提升工作效率" }, "ja": { - "name": "Web時間統計", - "marketName": "Web時間統計", - "description": "統計、分析、改善、効率向上" + "name": "タイムトラッカー", + "marketName": "タイムトラッカー - Web習慣ビルダー", + "description": "時間を追跡し、習慣を分析し、依存性のあるサイトをブロック" }, "en": { - "name": "Time Tracker for Browser", - "marketName": "Time Tracker for Browser - Web Habit Builder", - "description": "Track, analyze, control, then improve efficiency" + "name": "Time Tracker", + "marketName": "Time Tracker - Web Habit Builder", + "description": "Track time, analyze your habits and block addictive sites" }, "pt_PT": { - "name": "Monitor de Tempo para Navegador", - "marketName": "Monitor de Tempo para Navegador - Criador de Hábitos Web", - "description": "Monitorize, analise, controle e melhore a eficiência" + "name": "Rastreador de Tempo", + "marketName": "Rastreador de Tempo - Construtor de Hábitos na Web", + "description": "Acompanhe o tempo, analise seus hábitos e bloqueie sites viciantes" }, "uk": { "name": "Веб-трекер часу", - "marketName": "Веб-трекер часу", - "description": "Відстежуйте, аналізуйте, контролюйте, а потім підвищуйте ефективність" + "marketName": "Веб-трекер часу - Творець веб-звичок", + "description": "Відстежуйте час, аналізуйте звички та блокуйте сайти, що викликають залежність" }, "es": { "name": "Rastreador de tiempo web", - "marketName": "Rastreador de tiempo web", - "description": "Realice un seguimiento, analice, controle y luego mejore la eficiencia" + "marketName": "Rastreador de tiempo web - Creador de hábitos web", + "description": "Realice un seguimiento del tiempo, analice sus hábitos y bloquee sitios adictivos" }, "de": { "name": "Zeiterfassung", - "marketName": "Zeiterfassung", - "description": "Verfolgen, analysieren, kontrollieren und dann die Effizienz verbessern" + "marketName": "Zeiterfassung - Web-Gewohnheitstrainer", + "description": "Verfolgen Sie die Zeit, analysieren Sie Ihre Gewohnheiten und blockieren Sie süchtig machende Websites" }, "fr": { "name": "Suivi du temps Web", - "marketName": "Suivi du temps Web - Online Habit Formers", - "description": "Suivre, analyser, contrôler, puis améliorer l’efficacité" + "marketName": "Suivi du temps Web - Créateur d'habitudes web", + "description": "Suivez votre temps, analysez vos habitudes et bloquez les sites addictifs" }, "ru": { "name": "Трекер времени", - "marketName": "Трекер времени", - "description": "Отслеживайте, анализируйте, контролируйте, а затем повышайте эффективность" + "marketName": "Трекер времени — Формирование веб-привычек", + "description": "Отслеживайте время, анализируйте свои привычки и блокируйте вызывающие зависимость сайты" }, "ar": { "name": "متتبع الوقت", "marketName": "متتبع الوقت - منشئ عادات الويب", - "description": "تتبع وتحليل ومراقبة ثم تحسين الكفاءة" + "description": "تتبع الوقت، حلل عاداتك، واحظر المواقع الإدمانية" + }, + "tr": { + "name": "Zaman Takipçisi", + "marketName": "Zaman Takipçisi – Alışkanlık Oluşturucu ve Site Engelleyici", + "description": "Zamanınızı takip edin, alışkanlıklarınızı analiz edin, bağımlılık yapan siteleri engelleyin" + }, + "pl": { + "name": "Zegar Czasu", + "marketName": "Zegar Czasu - Kreator Nawyków Internetowych", + "description": "Śledź czas, analizuj swoje nawyki i blokuj uzależniające strony" + }, + "it": { + "name": "Tracker del Tempo", + "marketName": "Tracker del Tempo - Costruttore di Abitudini Web", + "description": "Traccia il tempo, analizza le tue abitudini e blocca i siti che creano dipendenza" } } \ No newline at end of file diff --git a/src/i18n/message/common/shared-resource.json b/src/i18n/message/common/shared-resource.json index 363fba2dd..d930cbf0d 100644 --- a/src/i18n/message/common/shared-resource.json +++ b/src/i18n/message/common/shared-resource.json @@ -12,6 +12,12 @@ }, "cate": { "notSet": "Not Set" + }, + "limit": { + "daily": "Daily limit", + "weekly": "Weekly limit", + "period": "Blocked periods", + "visits": "{n} visits" } }, "zh_CN": { @@ -27,6 +33,12 @@ }, "cate": { "notSet": "未分类" + }, + "limit": { + "daily": "每日上限", + "weekly": "每周上限", + "period": "不可访问的时间段", + "visits": "{n}次访问" } }, "ja": { @@ -36,11 +48,18 @@ "date": "日期", "domain": "URL", "cate": "カテゴリー", + "group": "タブグループ", "notMerge": "不合并" } }, "cate": { "notSet": "未設定" + }, + "limit": { + "daily": "1日の限度", + "weekly": "週間の限度", + "period": "許可されない期間", + "visits": "{n}訪問" } }, "zh_TW": { @@ -56,6 +75,12 @@ }, "cate": { "notSet": "未設定" + }, + "limit": { + "daily": "每日上限", + "weekly": "每週上限", + "period": "限制時段", + "visits": "{n}次造訪" } }, "pt_PT": { @@ -65,11 +90,18 @@ "date": "Data", "domain": "URL", "cate": "Categoria", + "group": "Grupo de Separadores", "notMerge": "Não Agrupar" } }, "cate": { "notSet": "Não Definido" + }, + "limit": { + "daily": "Limite diário", + "weekly": "Limite semanal", + "period": "Períodos bloqueados", + "visits": "{n} visitas" } }, "uk": { @@ -85,6 +117,33 @@ }, "cate": { "notSet": "Не встановлено" + }, + "limit": { + "daily": "Денний ліміт", + "weekly": "Тижневий ліміт", + "period": "Недозволені періоди", + "visits": "{n} відвідування" + } + }, + "it": { + "merge": { + "mergeBy": "Unisci per", + "mergeMethod": { + "date": "Data", + "domain": "URL", + "cate": "Categoria", + "group": "Gruppo Di Schede", + "notMerge": "Non Unire" + } + }, + "cate": { + "notSet": "Non impostato" + }, + "limit": { + "daily": "Limite giornaliero", + "weekly": "Limite settimanale", + "period": "Periodi bloccati", + "visits": "{n} visite" } }, "es": { @@ -100,20 +159,33 @@ }, "cate": { "notSet": "No establecido" + }, + "limit": { + "daily": "Límite diario", + "weekly": "Límite semanal", + "period": "Periodos no permitidos", + "visits": "{n} visitas" } }, "de": { "merge": { - "mergeBy": "Merge nach", + "mergeBy": "Zusammenführen durch", "mergeMethod": { "date": "Datum", "domain": "URL", "cate": "Kategorie", + "group": "Tab-Gruppe", "notMerge": "Nicht zusammenführen" } }, "cate": { "notSet": "Nicht festgelegt" + }, + "limit": { + "daily": "Tägliches Limit", + "weekly": "Wöchentliches Limit", + "period": "Unzulässiger Zeitraum", + "visits": "{n} Besuche" } }, "fr": { @@ -129,6 +201,12 @@ }, "cate": { "notSet": "Non Défini" + }, + "limit": { + "daily": "Limite quotidienne", + "weekly": "Limite hebdomadaire", + "period": "Périodes bloquées", + "visits": "{n} visites" } }, "ru": { @@ -138,11 +216,18 @@ "date": "Дата", "domain": "URL", "cate": "Категория", + "group": "Группа вкладок", "notMerge": "Не объединять" } }, "cate": { "notSet": "Не задано" + }, + "limit": { + "daily": "Дневной лимит", + "weekly": "Недельный лимит", + "period": "Заблокированное время", + "visits": "{n} посещения" } }, "ar": { @@ -158,6 +243,54 @@ }, "cate": { "notSet": "غير مضبوط" + }, + "limit": { + "daily": "الحد اليومي", + "weekly": "الحد الأسبوعي", + "period": "فترات محظورة", + "visits": "{n} زيارة" + } + }, + "tr": { + "merge": { + "mergeBy": "Birleştirme biçimi", + "mergeMethod": { + "date": "Tarih", + "domain": "URL", + "cate": "Kategori", + "group": "Sekme Grubu", + "notMerge": "Birleştirilemez" + } + }, + "cate": { + "notSet": "Ayarlanmadı" + }, + "limit": { + "daily": "Günlük limit", + "weekly": "Haftalık limit", + "period": "Engellenen periyotlar", + "visits": "{n} ziyaretler" + } + }, + "pl": { + "merge": { + "mergeBy": "Połącz przez", + "mergeMethod": { + "date": "Data", + "domain": "Adres URL", + "cate": "Kategoria", + "group": "Grupa zakładek", + "notMerge": "Nie scalaj" + } + }, + "cate": { + "notSet": "Nie ustawiono" + }, + "limit": { + "daily": "Dzienny limit", + "weekly": "Limit tygodniowy", + "period": "Godziny blokowania", + "visits": "{n} wizyt" } } } \ No newline at end of file diff --git a/src/i18n/message/common/shared.ts b/src/i18n/message/common/shared.ts index c4e0e4d01..41ea1c830 100644 --- a/src/i18n/message/common/shared.ts +++ b/src/i18n/message/common/shared.ts @@ -3,11 +3,17 @@ import resource from "./shared-resource.json" export type SharedMessage = { merge: { mergeBy: string - mergeMethod: Record & { notMerge: string } + mergeMethod: Record & { notMerge: string } } cate: { notSet: string } + limit: { + daily: string + weekly: string + period: string + visits: string + } } const sharedMessages = resource satisfies Messages diff --git a/src/i18n/message/cs/console-resource.json b/src/i18n/message/cs/console-resource.json index f32de0deb..73ee5c041 100644 --- a/src/i18n/message/cs/console-resource.json +++ b/src/i18n/message/cs/console-resource.json @@ -42,5 +42,17 @@ "ar": { "consoleLog": "اليوم فتحت {host} {time} مرة, أنفقت {focus} أثناء تصفحها.", "closeAlert": "يمكنك تعطيل هذه الإشعارات في إعدادات [{appName}]" + }, + "tr": { + "consoleLog": "Bugün {host} {time} saat(ler) açtınız ve {focus} saniye boyunca göz attınız.", + "closeAlert": "Bu bildirimleri [{appName}] ayarlarından devre dışı bırakabilirsiniz!" + }, + "pl": { + "consoleLog": "Dziś otworzyłeś {host} {time} raz(y) i spędziłeś {focus} przeglądając go.", + "closeAlert": "Możesz wyłączyć te powiadomienia w ustawieniach [{appName}]!" + }, + "it": { + "consoleLog": "Oggi hai aperto {host} {time} volta(e), spendendo {focus} navigandolo.", + "closeAlert": "Puoi disabilitare queste notifiche nelle impostazioni di [{appName}]!" } } \ No newline at end of file diff --git a/src/i18n/message/cs/index.ts b/src/i18n/message/cs/index.ts index 7bdb9f4dc..791f279f3 100644 --- a/src/i18n/message/cs/index.ts +++ b/src/i18n/message/cs/index.ts @@ -2,6 +2,7 @@ import limitMessages, { type LimitMessage } from "../app/limit" import menuMessages, { type MenuMessage } from "../app/menu" import calendarMessages, { type CalendarMessage } from "../common/calendar" import metaMessages, { type MetaMessage } from "../common/meta" +import sharedMessages, { type SharedMessage } from '../common/shared' import { merge, type MessageRoot } from "../merge" import consoleMessages, { type ConsoleMessage } from "./console" import modalMessages, { type ModalMessage } from "./modal" @@ -11,6 +12,7 @@ export type CsMessage = { modal: ModalMessage meta: MetaMessage limit: LimitMessage + shared: SharedMessage menu: MenuMessage calendar: CalendarMessage } @@ -20,6 +22,7 @@ const CHILD_MESSAGES: MessageRoot = { modal: modalMessages, meta: metaMessages, limit: limitMessages, + shared: sharedMessages, menu: menuMessages, calendar: calendarMessages, } diff --git a/src/i18n/message/cs/modal-resource.json b/src/i18n/message/cs/modal-resource.json index 5c3c72aec..2615fb8e7 100644 --- a/src/i18n/message/cs/modal-resource.json +++ b/src/i18n/message/cs/modal-resource.json @@ -1,68 +1,86 @@ { "zh_CN": { "defaultPrompt": "古希腊时间与浏览器之神正在阻止您访问该页面", - "more5Minutes": "延长5分钟", + "delay": "延长{n}分钟", "browsingTime": "当前浏览时长", "ruleDetail": "规则详情" }, "en": { "defaultPrompt": "This page was blocked!", - "more5Minutes": "5 more minutes", + "delay": "{n} more minutes", "browsingTime": "Browsing time", "ruleDetail": "Rule details" }, "ja": { "defaultPrompt": "このページはブロックされました!", - "more5Minutes": "5分延長", + "delay": "{n}分延長", "browsingTime": "閲覧時間", "ruleDetail": "ルール詳細" }, "zh_TW": { "defaultPrompt": "古希臘時間與瀏覽器之神暫時封鎖此頁面", - "more5Minutes": "延長5分鐘", + "delay": "延長{n}分鐘", "browsingTime": "目前瀏覽時長", "ruleDetail": "規則詳情" }, "pt_PT": { "defaultPrompt": "Esta página foi bloqueada!", - "more5Minutes": "Mais 5 minutos", + "delay": "Mais {n} minutos", "browsingTime": "Tempo de Navegação", "ruleDetail": "Detalhes da Regra" }, "uk": { "defaultPrompt": "Цю сторінку заблоковано!", - "more5Minutes": "Ще 5 хвилин", + "delay": "Ще {n} хвилин", "browsingTime": "Час перегляду", "ruleDetail": "Подробиці правила" }, "fr": { - "defaultPrompt": "Cette page a été bloquée!", - "more5Minutes": "5 minutes supplémentaires", + "defaultPrompt": "Cette page a été bloquée !", + "delay": "{n} minutes supplémentaires", "browsingTime": "Temps de navigation", "ruleDetail": "Détails des règles" }, "es": { "defaultPrompt": "¡Esta página fue bloqueada!", - "more5Minutes": "5 minutos más", + "delay": "{n} minutos más", "browsingTime": "Tiempo de navegación", "ruleDetail": "Detalles de la regla" }, "de": { "defaultPrompt": "Diese Seite wurde gesperrt!", - "more5Minutes": "Noch 5 Minuten", + "delay": "Noch {n} Minuten", "browsingTime": "Browsing-Zeit", "ruleDetail": "Regeldetails" }, "ru": { "defaultPrompt": "Эта страница заблокирована!", - "more5Minutes": "Ещё 5 минут", + "delay": "Ещё {n} минут", "browsingTime": "Время просмотра", "ruleDetail": "Подробности правила" }, "ar": { "defaultPrompt": "تم حظر هذه الصفحة!", - "more5Minutes": "5 دقائق إضافية", + "delay": "{n} دقائق إضافية", "browsingTime": "وقت التصفح", "ruleDetail": "تفاصيل القاعدة" + }, + "tr": { + "defaultPrompt": "Bu sayfa engellendi!", + "delay": "{n} dakika daha", + "browsingTime": "Gezinme süresi", + "ruleDetail": "Kural Detayları" + }, + "pl": { + "defaultPrompt": "Ta strona została zablokowana!", + "delay": "jeszcze {n} minut", + "browsingTime": "Czas przeglądania", + "ruleDetail": "Szczegóły zasad" + }, + "it": { + "defaultPrompt": "Questa pagina è stata bloccata!", + "delay": "{n} altri minuti", + "browsingTime": "Tempo di navigazione", + "ruleDetail": "Dettagli regola" } } \ No newline at end of file diff --git a/src/i18n/message/cs/modal.ts b/src/i18n/message/cs/modal.ts index 8e8765ddc..3054c7fa6 100644 --- a/src/i18n/message/cs/modal.ts +++ b/src/i18n/message/cs/modal.ts @@ -2,7 +2,7 @@ import resource from './modal-resource.json' export type ModalMessage = { defaultPrompt: string - more5Minutes: string + delay: string browsingTime: string ruleDetail: string } diff --git a/src/i18n/message/merge.ts b/src/i18n/message/merge.ts index 06acdd627..92157272f 100644 --- a/src/i18n/message/merge.ts +++ b/src/i18n/message/merge.ts @@ -1,4 +1,4 @@ -const ALL_LOCALE_VALIDATOR: { [locale in timer.Locale]: 0 } = { +const ALL_LOCALE_VALIDATOR: { [locale in tt4b.Locale]: 0 } = { en: 0, zh_CN: 0, ja: 0, @@ -10,14 +10,17 @@ const ALL_LOCALE_VALIDATOR: { [locale in timer.Locale]: 0 } = { fr: 0, ru: 0, ar: 0, + tr: 0, + pl: 0, + it: 0, } -export const ALL_LOCALES: timer.Locale[] = Object.keys(ALL_LOCALE_VALIDATOR) as timer.Locale[] +export const ALL_LOCALES: tt4b.Locale[] = Object.keys(ALL_LOCALE_VALIDATOR) as tt4b.Locale[] export type MessageRoot = { [key in keyof T]: Messages } export function merge(messageRoot: MessageRoot): Required> { - const result: Partial>> = {} + const result: Partial>> = {} ALL_LOCALES.forEach(locale => { const message = messageOfRoot(locale, messageRoot) result[locale] = message as T & EmbeddedPartial @@ -25,8 +28,8 @@ export function merge(messageRoot: MessageRoot): Required> { return result as Required> } -function messageOfRoot(locale: timer.Locale, messageRoot: MessageRoot): T { - const entries: [string, any][] = Object.entries(messageRoot).map(([key, val]) => ([key, (val as Record>)[locale]])) +function messageOfRoot(locale: tt4b.Locale, messageRoot: MessageRoot): T { + const entries: [string, any][] = Object.entries(messageRoot).map(([key, val]) => ([key, (val as Record>)[locale]])) const result = Object.fromEntries(entries) as T return result } \ No newline at end of file diff --git a/src/i18n/message/popup/content-resource.json b/src/i18n/message/popup/content-resource.json index 0017f07d3..9b98da656 100644 --- a/src/i18n/message/popup/content-resource.json +++ b/src/i18n/message/popup/content-resource.json @@ -9,15 +9,25 @@ "lastDays": "近 {n} 天数据", "allTime": "全部数据" }, - "saveAsImageTitle": "保存", - "averageTime": "平均每天 {value}", + "shareTitle": "分享", + "installTip": "扫描安装 👉", "averageCount": "平均每天 {value} 次", + "averageTime": "平均每天 {value}", "totalTime": "共 {totalTime}", "totalCount": "共 {totalCount} 次", "otherLabel": "其他{count}个网站" }, "ranking": { "includingCount": "含 {siteCount} 个网站" + }, + "limit": { + "noData": "此URL无限制规则", + "newOne": "新建", + "timeUsed": "已使用 {percent}", + "visitUsed": "已使用 {used} 次", + "remain": "剩余 {remaining}", + "noLimit": "无限制", + "notHit": "未命中" } }, "zh_TW": { @@ -30,7 +40,6 @@ "lastDays": "近{n}天紀錄", "allTime": "全部紀錄" }, - "saveAsImageTitle": "儲存圖片", "averageCount": "平均每日 {value} 次", "averageTime": "平均每日 {value}", "totalTime": "總計 {totalTime}", @@ -51,7 +60,8 @@ "lastDays": "Last {n} days' data", "allTime": "All data" }, - "saveAsImageTitle": "Snapshot", + "shareTitle": "Share", + "installTip": "Scan to install", "averageCount": "{value} times per day on average", "averageTime": "{value} per day on average", "totalTime": "Total {totalTime}", @@ -60,6 +70,15 @@ }, "ranking": { "includingCount": "Including {siteCount} sites" + }, + "limit": { + "noData": "No limit rule effective for this URL", + "newOne": "New One", + "timeUsed": "{percent} used", + "visitUsed": "{used} count visited", + "remain": "{remaining} remaining", + "noLimit": "No limit", + "notHit": "Not in effect" } }, "ja": { @@ -72,7 +91,6 @@ "lastDays": "過去 {n} 日間のデータ", "allTime": "すべてのデータ" }, - "saveAsImageTitle": "スクリーンショット", "averageCount": "1日平均 {value} 回", "averageTime": "1日平均 {value}", "totalTime": "合計 {totalTime}", @@ -81,6 +99,15 @@ }, "ranking": { "includingCount": "{siteCount} サイトを含む" + }, + "limit": { + "noData": "このURLには制限が適用されません", + "newOne": "追加", + "timeUsed": "{percent} 使用済み", + "visitUsed": "訪問回数{used}回", + "remain": "残り {remaining}", + "noLimit": "制限なし", + "notHit": "無効です" } }, "pt_PT": { @@ -93,7 +120,6 @@ "lastDays": "Dados dos últimos {n} dias", "allTime": "Todos os dados" }, - "saveAsImageTitle": "Captura", "averageCount": "Média de {value} vezes por dia", "averageTime": "Média de {value} por dia", "totalTime": "Total: {totalTime}", @@ -114,7 +140,8 @@ "lastDays": "Дані за минулі {n} днів", "allTime": "Всі дані" }, - "saveAsImageTitle": "Знімок", + "shareTitle": "Поділитися", + "installTip": "Сканувати для встановлення", "averageCount": "{value} разів на день у середньому", "averageTime": "{value} на день у середньому", "totalTime": "Всього {totalTime}", @@ -123,6 +150,15 @@ }, "ranking": { "includingCount": "Включаючи {siteCount} сайтів" + }, + "limit": { + "noData": "Для цієї URL-адреси не призначене правило обмеження", + "newOne": "Створити", + "timeUsed": "{percent} використано", + "visitUsed": "{used} кількість відвіданих", + "remain": "{remaining} залишилося", + "noLimit": "Без обмежень", + "notHit": "Не задіяно" } }, "es": { @@ -135,7 +171,6 @@ "lastDays": "Datos de los últimos {n} días", "allTime": "Todos los datos" }, - "saveAsImageTitle": "Captura de pantalla", "averageCount": "{value} veces al día en promedio", "averageTime": "{value} al día en promedio", "totalTime": "Total {totalTime}", @@ -156,15 +191,25 @@ "lastDays": "Daten der letzten {n} Tage", "allTime": "Alle Daten" }, - "saveAsImageTitle": "Bildschirmfoto", + "shareTitle": "Teilen", + "installTip": "Zum Installieren scannen", "averageCount": "{value} mal pro Tag", "averageTime": "{value} pro Tag im Durchschnitt", - "totalTime": "Gesamt {totalTime}", - "totalCount": "Gesamt {totalCount} mal", + "totalTime": "Insgesamt {totalTime}", + "totalCount": "Insgesamt {totalCount} mal", "otherLabel": "{count} andere Websites" }, "ranking": { "includingCount": "Einschließlich {siteCount} Websites" + }, + "limit": { + "noData": "Für diese URL ist keine Regel aktiv", + "newOne": "Neu", + "timeUsed": "{percent} verwendet", + "visitUsed": "{used} mal besucht", + "remain": "{remaining} verbleibend", + "noLimit": "Kein Limit", + "notHit": "Nicht aktiv" } }, "fr": { @@ -177,7 +222,8 @@ "lastDays": "Les données de ces {n} derniers jours", "allTime": "Toutes les données" }, - "saveAsImageTitle": "Capture d'écran", + "shareTitle": "Partager", + "installTip": "Scanner pour installer", "averageCount": "{value} fois par jour en moyenne", "averageTime": "{value} par jour en moyenne", "totalTime": "{totalTime} au total", @@ -186,6 +232,15 @@ }, "ranking": { "includingCount": "Y compris {siteCount} sites" + }, + "limit": { + "noData": "Pas de règle de limite en vigueur pour cette URL", + "newOne": "Créer Nouvelle", + "timeUsed": "{percent} utilisé", + "visitUsed": "{used} visites", + "remain": "{remaining} restantes", + "noLimit": "Aucune limite", + "notHit": "Pas en vigueur" } }, "ru": { @@ -198,7 +253,6 @@ "lastDays": "Данные за последние {n} дней", "allTime": "Все данные" }, - "saveAsImageTitle": "Снимок", "averageCount": "{value} раз в день в среднем", "averageTime": "{value} в день в среднем", "totalTime": "Всего {totalTime}", @@ -219,7 +273,6 @@ "lastDays": "بيانات آخر {n} يوم", "allTime": "كل البيانات" }, - "saveAsImageTitle": "لقطة", "averageCount": "متوسط {value} زيارة يومياً", "averageTime": "متوسط {value} يومياً", "totalTime": "الإجمالي {totalTime}", @@ -229,5 +282,76 @@ "ranking": { "includingCount": "بما في ذلك {siteCount} موقعاً" } + }, + "tr": { + "percentage": { + "title": { + "today": "Bugünkü Veriler", + "yesterday": "Dünkü Veriler", + "thisWeek": "Bu Haftaki Veriler", + "thisMonth": "Bu Ayki Veriler", + "lastDays": "Son {n} günün verileri", + "allTime": "Tüm Veriler" + }, + "averageCount": "Günde ortalama {value} kez", + "averageTime": "Günde ortalama {value}", + "totalTime": "Toplam Zaman {totalTime}", + "totalCount": "Toplam {totalCount} kez", + "otherLabel": "Diğer {count} site" + }, + "ranking": { + "includingCount": "{siteCount} site dahil" + } + }, + "pl": { + "percentage": { + "title": { + "today": "Dzisiejsze dane", + "yesterday": "Dane wczorajsze", + "thisWeek": "Dane w tym tygodniu", + "thisMonth": "Dane z tego miesiąca", + "lastDays": "Ostatnie dane z {n} dnia/i", + "allTime": "Wszystkie dane" + }, + "averageCount": "Średnio {value} razy co dzień", + "averageTime": "Średnio {value} razy dziennie", + "totalTime": "Ogółem {totalTime}", + "totalCount": "Razem: {totalCount}", + "otherLabel": "Pozostałe strony: {count}" + }, + "ranking": { + "includingCount": "Wliczając {siteCount} stron" + } + }, + "it": { + "percentage": { + "title": { + "today": "Dati di oggi", + "yesterday": "Data di Ieri", + "thisWeek": "Dati di questa Settimana", + "thisMonth": "Dati di questo Mese", + "lastDays": "Ultimo {n} giorni dati", + "allTime": "Tutti i dati" + }, + "shareTitle": "Condividi", + "installTip": "Scansiona per installare", + "averageCount": "{value} al giorno in media", + "averageTime": "{value} al giorno in media", + "totalTime": "Totale {totalTime}", + "totalCount": "{totalCount} volte Totale", + "otherLabel": "Altri siti {count}" + }, + "ranking": { + "includingCount": "Inclusi siti {siteCount}" + }, + "limit": { + "noData": "Nessuna regola di limite effettiva per questo URL", + "newOne": "Nuova", + "timeUsed": "{percent} usato", + "visitUsed": "Conteggio visite {used}", + "remain": "{remaining} rimanente", + "noLimit": "Nessun limite", + "notHit": "Non funzione" + } } } \ No newline at end of file diff --git a/src/i18n/message/popup/content.ts b/src/i18n/message/popup/content.ts index cc61dc8a9..c5e5d976c 100644 --- a/src/i18n/message/popup/content.ts +++ b/src/i18n/message/popup/content.ts @@ -7,10 +7,16 @@ import resource from './content-resource.json' +type PopupDuration = + | "today" | "yesterday" | "thisWeek" | "thisMonth" + | "lastDays" + | "allTime" + export type ContentMessage = { percentage: { - title: { [key in timer.option.PopupDuration]: string } - saveAsImageTitle: string + title: { [key in PopupDuration]: string } + shareTitle: string + installTip: string averageTime: string averageCount: string totalTime: string @@ -20,8 +26,17 @@ export type ContentMessage = { ranking: { includingCount: string } + limit: { + noData: string + newOne: string + timeUsed: string + visitUsed: string + remain: string + noLimit: string + notHit: string + } } -const contentMessages = resource as Messages +const contentMessages = resource satisfies Messages export default contentMessages \ No newline at end of file diff --git a/src/i18n/message/popup/footer-resource.json b/src/i18n/message/popup/footer-resource.json index 46fffbae8..2de89ae5e 100644 --- a/src/i18n/message/popup/footer-resource.json +++ b/src/i18n/message/popup/footer-resource.json @@ -58,5 +58,23 @@ "percentage": "التوزيع", "ranking": "الترتيب" } + }, + "tr": { + "route": { + "percentage": "Dağılım", + "ranking": "Sıralama" + } + }, + "pl": { + "route": { + "percentage": "Rozkład", + "ranking": "Ranking" + } + }, + "it": { + "route": { + "percentage": "Distribuzione", + "ranking": "Classifica" + } } } \ No newline at end of file diff --git a/src/i18n/message/popup/footer.ts b/src/i18n/message/popup/footer.ts index f76486e33..252c4e5cf 100644 --- a/src/i18n/message/popup/footer.ts +++ b/src/i18n/message/popup/footer.ts @@ -5,11 +5,13 @@ * https://opensource.org/licenses/MIT */ -import { type PopupRoute } from '@popup/router' import resource from './footer-resource.json' export type FooterMessage = { - route: Record + route: { + percentage: string + ranking: string + } } const footerMessages = resource satisfies Messages diff --git a/src/i18n/message/popup/header-resource.json b/src/i18n/message/popup/header-resource.json index 696574d0d..5af352876 100644 --- a/src/i18n/message/popup/header-resource.json +++ b/src/i18n/message/popup/header-resource.json @@ -1,68 +1,76 @@ { "en": { - "updateVersion": "Update", - "updateVersionInfo": "Latest version: {version}", - "updateVersionInfo4Firefox": "Please update to {version} via about:addons", - "rate": "Rate Us" + "rating": "Submit rating", + "discord": "Join Discord", + "showSiteName": "Display site name", + "showTopN": "Display top {n}", + "donutChart": "Displayed as donut charts" }, "zh_CN": { - "updateVersion": "可更新", - "updateVersionInfo": "最新版本：{version}", - "updateVersionInfo4Firefox": "请前往 about:addons 更新至 {version}", - "rate": "评分" + "rating": "提交评价", + "discord": "加入 Discord", + "showSiteName": "显示网站名称", + "showTopN": "显示前 {n} 名", + "donutChart": "以圆环图显示" }, "zh_TW": { - "updateVersion": "可更新", - "updateVersionInfo": "最新版本：{version}", - "updateVersionInfo4Firefox": "請前往 about:addons 更新至 {version}", - "rate": "評分" + "rating": "送出評分", + "showSiteName": "顯示網站名稱", + "showTopN": "顯示前{n}个", + "donutChart": "以圓餅圖顯示" }, "ja": { - "updateVersion": "更新可能", - "updateVersionInfo": "最新バージョン: {version}", - "updateVersionInfo4Firefox": "about:addons で {version} に更新してください", - "rate": "評価する" + "rating": "評価を送信", + "showSiteName": "サイト名を表示", + "showTopN": "トップ {n} を表示", + "donutChart": "ドーナツグラフとして表示" }, "pt_PT": { - "updateVersion": "Atualizar", - "updateVersionInfo": "Versão mais recente: {version}", - "updateVersionInfo4Firefox": "Atualize para {version} através do about:addons", - "rate": "Avaliar" - }, - "uk": { - "updateVersion": "Оновити", - "updateVersionInfo": "Найновіша версія: {version}", - "updateVersionInfo4Firefox": "Оновіться до {version} через about:addons", - "rate": "Оцінити" + "showSiteName": "Mostrar nome do site", + "donutChart": "Mostrado como gráfico estilo donut" }, + "uk": {}, "es": { - "updateVersion": "Actualizar", - "updateVersionInfo": "Última versión: {version}", - "updateVersionInfo4Firefox": "Actualice a {version} en about:addons", - "rate": "Calificar" + "rating": "Enviar Puntuación", + "showSiteName": "Mostrar nombre del sitio", + "showTopN": "Mostrar primeros {n}", + "donutChart": "Mostrar como gráfico de donas" }, "de": { - "updateVersion": "Aktualisierbar", - "updateVersionInfo": "Neueste Version: {version}", - "updateVersionInfo4Firefox": "Bitte aktualisieren Sie auf {version} über about:addons", - "rate": "Bewerten" + "rating": "Bewertung absenden", + "showSiteName": "Seitenname anzeigen", + "showTopN": "Top {n} anzeigen", + "donutChart": "Als Donut-Diagramme angezeigt" }, "fr": { - "updateVersion": "MAJ", - "updateVersionInfo": "Dernière version: {version}", - "updateVersionInfo4Firefox": "Veuillez mettre à jour vers {version} via about:addons", - "rate": "Noter" + "rating": "Donner une note", + "discord": "Rejoignez notre Discord", + "showSiteName": "Afficher le nom du site", + "showTopN": "Afficher les {n} premiers", + "donutChart": "Affichés sous forme de graphiques en anneau" }, "ru": { - "updateVersion": "Обновить", - "updateVersionInfo": "Последняя версия: {version}", - "updateVersionInfo4Firefox": "Обновитесь до {version} через about:addons", - "rate": "Оценить" + "rating": "Отправить оценку", + "showSiteName": "Отобразить имя сайта", + "showTopN": "Отображать заголовок {n}" + }, + "ar": {}, + "tr": { + "rating": "Değerlendirmeyi Gönder", + "showSiteName": "Site adını göster", + "showTopN": "En iyi {n} göster", + "donutChart": "Halka grafik olarak göster" + }, + "pl": { + "rating": "Prześlij ocenę", + "showSiteName": "Wyświetl nazwę witryny", + "showTopN": "Wyświetl górną część {n}", + "donutChart": "Wyświetlane jako wykresy" }, - "ar": { - "updateVersion": "تحديث متاح", - "updateVersionInfo": "أحدث إصدار: {version}", - "updateVersionInfo4Firefox": "الرجاء التحديث إلى {version} عبر about:addons", - "rate": "قيمنا" + "it": { + "rating": "Invia il tuo voto", + "showSiteName": "Visualizza nome del sito", + "showTopN": "Mostra top {n}", + "donutChart": "Visualizzati come grafici di ciambella" } } \ No newline at end of file diff --git a/src/i18n/message/popup/header.ts b/src/i18n/message/popup/header.ts index 44205dcdd..ba3017ebe 100644 --- a/src/i18n/message/popup/header.ts +++ b/src/i18n/message/popup/header.ts @@ -8,10 +8,11 @@ import resource from './header-resource.json' export type HeaderMessage = { - updateVersion: string - updateVersionInfo: string - updateVersionInfo4Firefox: string - rate: string + rating: string + discord: string + donutChart: string + showSiteName: string + showTopN: string } const headerMessages = resource satisfies Messages diff --git a/src/i18n/message/popup/index.ts b/src/i18n/message/popup/index.ts index 890f031b0..3d7501dfd 100644 --- a/src/i18n/message/popup/index.ts +++ b/src/i18n/message/popup/index.ts @@ -5,7 +5,6 @@ * https://opensource.org/licenses/MIT */ -import menuMessages, { type MenuMessage } from "../app/menu" import baseMessages, { type BaseMessage } from "../common/base" import calendarMessages, { type CalendarMessage } from "../common/calendar" import itemMessages, { type ItemMessage } from "../common/item" @@ -16,6 +15,7 @@ import contentMessages, { type ContentMessage } from "./content" import footerMessages, { type FooterMessage } from "./footer" import headerMessages, { type HeaderMessage } from "./header" + export type PopupMessage = { content: ContentMessage item: ItemMessage @@ -23,7 +23,6 @@ export type PopupMessage = { base: BaseMessage header: HeaderMessage footer: FooterMessage - menu: MenuMessage calendar: CalendarMessage shared: SharedMessage } @@ -35,7 +34,6 @@ const MESSAGE_ROOT: MessageRoot = { base: baseMessages, header: headerMessages, footer: footerMessages, - menu: menuMessages, calendar: calendarMessages, shared: sharedMessages, } diff --git a/src/i18n/message/side/list-resource.json b/src/i18n/message/side/list-resource.json index 722d26893..e09528796 100644 --- a/src/i18n/message/side/list-resource.json +++ b/src/i18n/message/side/list-resource.json @@ -9,7 +9,7 @@ }, "de": { "searchPlaceholder": "Domain oder URL eingeben", - "title": "Browser-Analyse" + "title": "Nutzungsanalyse" }, "ja": { "searchPlaceholder": "ドメインまたはURLを入力", @@ -42,5 +42,17 @@ "ar": { "searchPlaceholder": "أدخل النطاق أو الرابط", "title": "تحليل التصفح" + }, + "tr": { + "searchPlaceholder": "Alan adı veya URL giriniz", + "title": "Gezinme Analizi" + }, + "pl": { + "searchPlaceholder": "Wprowadź domenę lub adres URL", + "title": "Analiza przeglądania " + }, + "it": { + "searchPlaceholder": "Inserisci dominio o URL", + "title": "Analisi Di Esplorazione" } } \ No newline at end of file diff --git a/src/manifest-firefox.ts b/src/manifest-firefox.ts index 6a52f7877..95fcd8bee 100644 --- a/src/manifest-firefox.ts +++ b/src/manifest-firefox.ts @@ -6,16 +6,16 @@ */ /** - * Build the manifest.json in chrome extension directory via this file + * Build the manifest.json in Firefox extension directory via this file * * @author zhy * @since 0.0.1 */ -// Not use path alias in manifest.json -import packageInfo from "./package" -const { version, author: { name: authorName }, homepage } = packageInfo +import packageJson from "../package.json" -const _default: chrome.runtime.ManifestFirefox = { +const { version, author: { name: authorName }, homepage } = packageJson + +const _default: browser._manifest.WebExtensionManifest = { name: '__MSG_meta_marketName__', description: "__MSG_meta_description__", version, @@ -23,10 +23,11 @@ const _default: chrome.runtime.ManifestFirefox = { default_locale: 'en', homepage_url: homepage, manifest_version: 2, + minimum_opera_version: '140', icons: { - 16: "static/images/icon.png", - 48: "static/images/icon.png", - 128: "static/images/icon.png", + 16: "static/images/icon-16.png", + 48: "static/images/icon-48.png", + 128: "static/images/icon-128.png", }, background: { scripts: ['background.js'], @@ -38,7 +39,7 @@ const _default: chrome.runtime.ManifestFirefox = { "" ], js: [ - "content_scripts_skeleton.js", + "content_scripts.js", ], run_at: "document_start" } @@ -51,11 +52,21 @@ const _default: chrome.runtime.ManifestFirefox = { '', ], optional_permissions: [ - "tabGroups", + 'tabGroups', + 'notifications', ], browser_action: { default_popup: "static/popup_skeleton.html", - default_icon: "static/images/icon.png", + default_icon: "static/images/icon-128.png", + }, + browser_specific_settings: { + gecko: { + id: '{a8cf72f7-09b7-4cd4-9aaa-7a023bf09916}', + data_collection_permissions: { + required: ['none'], + optional: ['technicalAndInteraction'], + }, + }, }, sidebar_action: { default_icon: "static/images/icon.png", diff --git a/src/manifest.ts b/src/manifest.ts index ecba682e6..caa0e1d65 100644 --- a/src/manifest.ts +++ b/src/manifest.ts @@ -11,10 +11,9 @@ * @author zhy * @since 0.0.1 */ -// Not use path alias in manifest.json -import packageInfo from "./package" -import { OPTION_ROUTE } from "./pages/app/router/constants" -const { version, author: { email }, homepage } = packageInfo +import packageJson from "../package.json" +import { APP_OPTION_ROUTE } from "./shared/route" +const { version, author: { email }, homepage } = packageJson const _default: chrome.runtime.ManifestV3 = { name: '__MSG_meta_marketName__', @@ -25,9 +24,9 @@ const _default: chrome.runtime.ManifestV3 = { homepage_url: homepage, manifest_version: 3, icons: { - 16: "static/images/icon.png", - 48: "static/images/icon.png", - 128: "static/images/icon.png", + 16: "static/images/icon-16.png", + 48: "static/images/icon-48.png", + 128: "static/images/icon-128.png", }, background: { service_worker: 'background.js' @@ -38,7 +37,7 @@ const _default: chrome.runtime.ManifestV3 = { "" ], js: [ - "content_scripts_skeleton.js", + "content_scripts.js", ], run_at: "document_start" } @@ -53,6 +52,7 @@ const _default: chrome.runtime.ManifestV3 = { ], optional_permissions: [ 'tabGroups', + 'notifications', ], host_permissions: [ "", @@ -60,9 +60,11 @@ const _default: chrome.runtime.ManifestV3 = { web_accessible_resources: [{ resources: [ 'content_scripts.js', - 'content_scripts.css', + 'content_scripts_limit.js', + 'vendor/*.js', 'static/images/*', 'static/popup.html', + 'static/limit.html', ], matches: [""], }], @@ -73,7 +75,7 @@ const _default: chrome.runtime.ManifestV3 = { /** * @since 0.4.0 */ - options_page: 'static/app.html#' + OPTION_ROUTE + options_page: 'static/app.html#' + APP_OPTION_ROUTE } -export default _default \ No newline at end of file +export default _default diff --git a/src/pages/app/Layout/VersionTag.tsx b/src/pages/app/Layout/VersionTag.tsx deleted file mode 100644 index 81b08baef..000000000 --- a/src/pages/app/Layout/VersionTag.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import packageInfo from "@src/package" -import type { FunctionalComponent, StyleValue } from "vue" - -const STYLE: StyleValue = { - position: 'fixed', - width: '100px', - bottom: '-10px', - right: '10px', - textAlign: 'right', - color: '#888', - fontSize: '8px', -} - -const VersionTag: FunctionalComponent = () => ( -
-

- {`v${packageInfo.version}`} -

-
-) - -export default VersionTag \ No newline at end of file diff --git a/src/pages/app/Layout/icons/About.tsx b/src/pages/app/Layout/icons/About.tsx deleted file mode 100644 index a284cd7dc..000000000 --- a/src/pages/app/Layout/icons/About.tsx +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Copyright (c) 2024 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { type FunctionalComponent } from "vue" - -const About: FunctionalComponent = () => ( - - - - - -) - -export default About \ No newline at end of file diff --git a/src/pages/app/Layout/icons/Database.tsx b/src/pages/app/Layout/icons/Database.tsx deleted file mode 100644 index e3544ede2..000000000 --- a/src/pages/app/Layout/icons/Database.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Copyright (c) 2024 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import type { FunctionalComponent } from "vue" - -const Database: FunctionalComponent = () => ( - - - - - - -) - -export default Database \ No newline at end of file diff --git a/src/pages/app/Layout/icons/Table.tsx b/src/pages/app/Layout/icons/Table.tsx deleted file mode 100644 index 7575d2896..000000000 --- a/src/pages/app/Layout/icons/Table.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) 2024 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import type { FunctionalComponent } from "vue" - -const Table: FunctionalComponent = () => ( - - - -) - -export default Table \ No newline at end of file diff --git a/src/pages/app/Layout/icons/Trend.tsx b/src/pages/app/Layout/icons/Trend.tsx deleted file mode 100644 index a726c0997..000000000 --- a/src/pages/app/Layout/icons/Trend.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import type { FunctionalComponent } from "vue" - -const Trend: FunctionalComponent = () => ( - - - -) - -export default Trend \ No newline at end of file diff --git a/src/pages/app/Layout/icons/Website.tsx b/src/pages/app/Layout/icons/Website.tsx deleted file mode 100644 index 5132f081d..000000000 --- a/src/pages/app/Layout/icons/Website.tsx +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) 2024 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import type { FunctionalComponent } from "vue" - -const Website: FunctionalComponent = () => ( - - - -) - -export default Website \ No newline at end of file diff --git a/src/pages/app/Layout/icons/Whitelist.tsx b/src/pages/app/Layout/icons/Whitelist.tsx deleted file mode 100644 index bd8faabbd..000000000 --- a/src/pages/app/Layout/icons/Whitelist.tsx +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Copyright (c) 2024 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import type { FunctionalComponent } from "vue" - -const Whitelist: FunctionalComponent = () => ( - - - - -) - -export default Whitelist \ No newline at end of file diff --git a/src/pages/app/Layout/index.tsx b/src/pages/app/Layout/index.tsx index d55db02a0..1bf49c714 100644 --- a/src/pages/app/Layout/index.tsx +++ b/src/pages/app/Layout/index.tsx @@ -5,38 +5,57 @@ * https://opensource.org/licenses/MIT */ -import { initAppContext } from "@app/context" -import { CLZ_HIDDEN_MD_AND_UP, CLZ_HIDDEN_SM_AND_DOWN } from "@pages/element-ui/style" -import { ElAside, ElContainer, ElHeader, ElScrollbar } from "element-plus" +import { css, injectGlobal } from '@emotion/css' +import { ElAside, ElContainer, ElHeader, useNamespace } from "element-plus" import { defineComponent, type StyleValue } from "vue" import { RouterView } from "vue-router" +import { initAppContext } from "../context" import HeadNav from "./menu/Nav" import SideMenu from "./menu/Side" -import "./style.sass" -import VersionTag from "./VersionTag" + +const HEADER_STYLE: StyleValue = { + padding: 0, + height: 'fit-content', +} + +const CONTENT_CLS = css` + width: 100%; + margin: auto; + background: var(--el-fill-color-blank); + + html[data-theme='dark'] & { + background: var(--el-fill-color-lighter); + } +` + +const injectCss = () => { + const containerNs = useNamespace('container') + injectGlobal` + .${containerNs.b()} { + height: 100%; + overflow-y: auto; + } + ` +} const _default = defineComponent(() => { - initAppContext() + const { layout } = initAppContext() + + injectCss() return () => ( - - + + - - - - + + - + - ) }) diff --git a/src/pages/app/Layout/menu/Nav.tsx b/src/pages/app/Layout/menu/Nav.tsx index 1bc0198be..c143e5e38 100644 --- a/src/pages/app/Layout/menu/Nav.tsx +++ b/src/pages/app/Layout/menu/Nav.tsx @@ -5,73 +5,97 @@ * https://opensource.org/licenses/MIT */ -import { getUrl } from "@api/chrome/runtime" -import { t } from "@app/locale" -import { CloseBold, Link, Menu } from "@element-plus/icons-vue" -import { useSwitch } from "@hooks" -import { ElBreadcrumb, ElBreadcrumbItem, ElIcon, ElMenu, ElMenuItem } from "element-plus" +import { getIconUrl } from "@api/chrome/runtime" +import { t } from '@app/locale' +import { CloseBold, Menu } from "@element-plus/icons-vue" +import { css } from '@emotion/css' +import { useSwitch } from '@hooks' +import Flex from '@pages/components/Flex' +import Img from '@pages/components/Img' +import { ElBreadcrumb, ElBreadcrumbItem, ElIcon, ElMenu, ElMenuItem, useNamespace } from "element-plus" import { defineComponent, h, onBeforeMount, ref, watch } from "vue" import { useRouter } from "vue-router" -import { NAV_MENUS } from "./item" +import { indexOfItem, type MenuItem, navMenus } from "./item" import { handleClick, initTitle } from "./route" +import { colorMenu } from './style' -const findTitle = (routePath: string): string => { - const title = NAV_MENUS.find(v => routePath === v.route)?.title +const HEADER_HEIGHT = 'var(--el-header-height)' + +const useStyle = () => { + const menuNs = useNamespace('menu') + const containerCls = css` + height: 100%; + background: var(${colorMenu('bg')}); + color: var(${colorMenu('text')}); + padding-inline: 20px; + ` + const menuWrapperCls = css` + position: absolute; + top: calc(${HEADER_HEIGHT} - 1px); + left: 0; + width: 100vw; + z-index: 9999; + max-height: calc(100vh - ${HEADER_HEIGHT}); + & .${menuNs.b()} { + padding-bottom: 10px; + } + ` + return { containerCls, menuWrapperCls } +} + +const findTitle = (routePath: string, menus: MenuItem[]): string => { + const title = menus.find(v => 'route' in v && routePath === v.route)?.title return title ? t(title) : '' } -const _default = defineComponent(() => { +const _default = defineComponent<{}>(() => { + const menus = navMenus() const router = useRouter() const title = ref('') const [showMenu, , closeMenu, toggleMenu] = useSwitch(false) + const handleItemClick = (item: MenuItem) => { + handleClick(item, router) + closeMenu() + } const syncRouter = () => { const route = router.currentRoute.value - route && (title.value = findTitle(route.path)) + route && (title.value = findTitle(route.path, menus)) } watch(router.currentRoute, syncRouter) onBeforeMount(() => initTitle(router)) + const { containerCls, menuWrapperCls } = useStyle() return () => ( -
-
-
+
+ + - + {t(msg => msg.meta.name)} {!!title.value && {title.value}} -
+
{showMenu.value ? : }
+ +
+ + {menus.map(item => ( + handleItemClick(item)}> + {h(item.icon)} + {t(item.title)} + + ))} +
- {!!showMenu.value && ( -
- - {NAV_MENUS.map(item => ( - { - handleClick(item, router) - closeMenu() - }} - > - - {h(item.icon)} - - {t(item.title)} - {!!item.href && } - - ))} - -
- )}
) }) diff --git a/src/pages/app/Layout/menu/Side.tsx b/src/pages/app/Layout/menu/Side.tsx index 32fd497a8..dfd082a99 100644 --- a/src/pages/app/Layout/menu/Side.tsx +++ b/src/pages/app/Layout/menu/Side.tsx @@ -5,57 +5,136 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" -import Box from "@pages/components/Box" -import { ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup } from "element-plus" -import { defineComponent, h, onMounted, ref, watch, type StyleValue } from "vue" -import { useRouter } from "vue-router" -import { MENUS } from "./item" +import { getVersion } from '@api/chrome/runtime' +import { t } from '@app/locale' +import { Expand, Fold } from '@element-plus/icons-vue' +import { css } from '@emotion/css' +import { useCached, useState } from '@hooks' +import Flex from '@pages/components/Flex' +import { colorVariant } from '@pages/util/style' +import { ElCollapseTransition, ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, ElScrollbar, ElText, ElTooltip, useNamespace } from "element-plus" +import { defineComponent, h, nextTick, onMounted, type Ref, ref, type StyleValue, watch } from "vue" +import { type Router, useRouter } from "vue-router" +import { indexOfItem, menuGroups, type MenuItem } from "./item" import { handleClick, initTitle } from "./route" +import { colorMenu } from './style' -const ICON_STYLE: StyleValue = { - paddingInline: '4px', - height: '1em', - lineHeight: '0.83em', +const useCollapseState = () => { + const [collapsed, setCollapsed] = useCached('menu-collapsed', false) + const [tooltipVisible, setTooltipVisible] = useState(false) + + const toggle = () => { + setTooltipVisible(false) + nextTick(() => setCollapsed(!collapsed.value)) + } + + return { + collapsed, toggle, + tooltipVisible, setTooltipVisible, + } } +const useStyle = () => { + const menuNs = useNamespace('menu') + const iconNs = useNamespace('icon') + + return css` + & .${menuNs.b()}:not(.${menuNs.m('collapse')}) { + width: 240px; + } + & .${menuNs.b('item')} .${iconNs.b()} { + height: 1em; + line-height: 0.83em; + } + & .${menuNs.b('item')}.is-active { + background: var(${colorVariant('primary')}) + } + & .${menuNs.b()}:not(.${menuNs.m('collapse')}) .${menuNs.b('item')} .${iconNs.b()} { + padding-inline: 4px; + } + ` +} + +const renderItem = (item: MenuItem, router: Router, curr: Ref) => ( + handleClick(item, router, curr)} + v-slots={{ + default: () => {h(item.icon)}, + title: () => {t(item.title)}, + }} + /> +) + const _default = defineComponent(() => { const router = useRouter() - const currentActive = ref() + const curr = ref() const syncRouter = () => { const route = router.currentRoute.value - route && (currentActive.value = route.path) + route && (curr.value = route.path) } watch(router.currentRoute, syncRouter) onMounted(() => initTitle(router)) + const { + collapsed, toggle, + tooltipVisible, setTooltipVisible, + } = useCollapseState() + const cls = useStyle() + const menus = menuGroups() + return () => ( - - - {MENUS.map(menu => ( - - {menu.children.map(item => ( - handleClick(item, router, currentActive)} - v-slots={{ - default: () => ( - - {h(item.icon)} - - ), - title: () => {t(item.title)} - }} - /> + + + + {collapsed.value + ? menus.flatMap(g => g.children).map(item => renderItem(item, router, curr)) + : menus.map(({ children, title }) => ( + + {children.map(item => renderItem(item, router, curr))} + ))} - - ))} - - + + + + msg.button[collapsed.value ? 'expand' : 'collapse'])} + > + + + {collapsed.value ? : } + + + + + + v{getVersion()} + + + + ) }) diff --git a/src/pages/app/Layout/menu/item.ts b/src/pages/app/Layout/menu/item.ts index 5901ef939..c225b2f9f 100644 --- a/src/pages/app/Layout/menu/item.ts +++ b/src/pages/app/Layout/menu/item.ts @@ -6,24 +6,18 @@ * https://opensource.org/licenses/MIT */ -import { type I18nKey } from "@app/locale" -import { ANALYSIS_ROUTE, MERGE_ROUTE } from "@app/router/constants" -import { Aim, Connection, HelpFilled, Histogram, Memo, MoreFilled, Rank, SetUp, Stopwatch, Timer, View } from "@element-plus/icons-vue" +import { type I18nKey } from '@app/locale' +import { ANALYSIS_ROUTE, RECORD_ROUTE, RULE_ROUTE } from '@app/router/constants' +import { + Aim, Connection, HelpFilled, Histogram, Memo, MoreFilled, SetUp, Stopwatch, Timer, View, +} from "@element-plus/icons-vue" +import { About, Database, Rule, Table, Trend, Website } from '@pages/icons' import { getGuidePageUrl } from "@util/constant/url" -import { type IconProps } from "element-plus" -import About from "../icons/About" -import Database from "../icons/Database" -import Table from "../icons/Table" -import Trend from "../icons/Trend" -import Website from "../icons/Website" -import Whitelist from "../icons/Whitelist" +import { type Component } from 'vue' -export type MenuItem = { +type MenuBase = { title: I18nKey - icon: IconProps | string - route?: string - href?: string - index?: string + icon: Component | string /** * Whether to support mobile * @@ -32,14 +26,22 @@ export type MenuItem = { mobile?: boolean } -export type MenuGroup = Omit & { +export type MenuItem = MenuBase & ( + | { route: string } + | { href: string } +) + +type MenuGroup = MenuBase & { + index: string children: MenuItem[] } +export const indexOfItem = (item: MenuItem) => 'route' in item ? item.route : item.href + /** * Menu items */ -export const MENUS: MenuGroup[] = [{ +export const menuGroups = (): MenuGroup[] => [{ title: msg => msg.menu.data, index: 'data', icon: Histogram, @@ -47,21 +49,18 @@ export const MENUS: MenuGroup[] = [{ title: msg => msg.menu.dashboard, route: '/data/dashboard', icon: Stopwatch, - mobile: true, }, { - title: msg => msg.menu.dataReport, - route: '/data/report', + title: msg => msg.menu.record, + route: RECORD_ROUTE, icon: Table, - mobile: true, }, { title: msg => msg.menu.siteAnalysis, route: ANALYSIS_ROUTE, icon: Trend, - mobile: true, }, { title: msg => msg.menu.dataClear, route: '/data/manage', - icon: Database + icon: Database, }] }, { title: msg => msg.menu.behavior, @@ -71,11 +70,10 @@ export const MENUS: MenuGroup[] = [{ title: msg => msg.menu.habit, route: '/behavior/habit', icon: Aim, - mobile: true, }, { - title: msg => msg.menu.limit, + title: msg => msg.base.limit, route: '/behavior/limit', - icon: Timer + icon: Timer, }] }, { title: msg => msg.menu.additional, @@ -84,20 +82,16 @@ export const MENUS: MenuGroup[] = [{ children: [{ title: msg => msg.menu.siteManage, route: '/additional/site-manage', - icon: Website - }, { - title: msg => msg.menu.whitelist, - route: '/additional/whitelist', - icon: Whitelist + icon: Website, + mobile: false, }, { - title: msg => msg.menu.mergeRule, - route: MERGE_ROUTE, - icon: Rank + title: msg => msg.menu.rule, + route: RULE_ROUTE, + icon: Rule, }, { title: msg => msg.base.option, route: '/additional/option', icon: SetUp, - mobile: true, }] }, { title: msg => msg.menu.other, @@ -107,17 +101,17 @@ export const MENUS: MenuGroup[] = [{ title: msg => msg.base.guidePage, href: getGuidePageUrl(), icon: Memo, - index: '_guide', + mobile: false, }, { - title: msg => msg.menu.helpUs, + title: msg => msg.base.helpUs, route: '/other/help', icon: HelpFilled, + mobile: false, }, { title: msg => msg.menu.about, route: '/other/about', icon: About, - mobile: true, }] }] -export const NAV_MENUS: MenuItem[] = MENUS.flatMap(g => g.children || []).filter(m => m.mobile) \ No newline at end of file +export const navMenus = (): MenuItem[] => menuGroups().flatMap(g => g.children || []).filter(({ mobile = true }) => mobile) \ No newline at end of file diff --git a/src/pages/app/Layout/menu/route.ts b/src/pages/app/Layout/menu/route.ts index ccfee5fe8..6d6d10913 100644 --- a/src/pages/app/Layout/menu/route.ts +++ b/src/pages/app/Layout/menu/route.ts @@ -1,8 +1,8 @@ import { createTabAfterCurrent } from "@api/chrome/tab" -import { type I18nKey, t } from "@app/locale" +import { type I18nKey, t } from '@app/locale' import { type Ref } from "vue" import { type Router } from "vue-router" -import { type MenuItem, MENUS } from "./item" +import { type MenuItem, menuGroups } from "./item" function openMenu(route: string, title: I18nKey, router: Router) { const currentPath = router.currentRoute.value?.path @@ -15,11 +15,11 @@ function openMenu(route: string, title: I18nKey, router: Router) { const openHref = (href: string) => createTabAfterCurrent(href) export function handleClick(menuItem: MenuItem, router: Router, currentActive?: Ref) { - const { route, title, href } = menuItem - if (route) { - openMenu(route, title, router) - } else if (href) { - openHref(href) + const { title } = menuItem + if ('route' in menuItem) { + openMenu(menuItem.route, title, router) + } else { + openHref(menuItem.href) currentActive && (currentActive.value = router.currentRoute?.value?.path) } } @@ -27,11 +27,10 @@ export function handleClick(menuItem: MenuItem, router: Router, currentActive?: export async function initTitle(router: Router) { await router.isReady() const currentPath = router.currentRoute.value.path - for (const group of MENUS) { - for (const { route, title } of group.children) { - const docTitle = route === currentPath && t(title) - if (docTitle) { - document.title = docTitle + for (const group of menuGroups()) { + for (const child of group.children) { + if ('route' in child && child.route === currentPath) { + document.title = t(child.title) return } } diff --git a/src/pages/app/Layout/menu/style.ts b/src/pages/app/Layout/menu/style.ts new file mode 100644 index 000000000..ec1c70502 --- /dev/null +++ b/src/pages/app/Layout/menu/style.ts @@ -0,0 +1,3 @@ +type ColorUsage = 'bg' | 'text' + +export const colorMenu = (usage: ColorUsage) => `--el-menu-${usage}-color` \ No newline at end of file diff --git a/src/pages/app/Layout/style.sass b/src/pages/app/Layout/style.sass deleted file mode 100644 index 328db6139..000000000 --- a/src/pages/app/Layout/style.sass +++ /dev/null @@ -1,33 +0,0 @@ -.app-layout - .el-menu-item.is-active - background: var(--el-color-primary) - -.app-header - background-color: var(--el-menu-bg-color) - color: var(--el-menu-text-color) - height: fit-content - .nav-container - height: 100% - .nav-content - height: var(--el-header-height) - display: flex - justify-content: space-between - align-items: center - .bread-wrapper - display: flex - gap: 20px - height: 100% - align-items: center - .menu-wrapper - position: absolute - top: var(--el-header-height) - left: 0 - width: 100vw - z-index: 9999 - max-height: calc(100vh - var(--el-header-height)) - .el-menu - padding-bottom: 10px - .nav-menu-group-title - display: flex - justify-content: flex-start - align-items: center diff --git a/src/pages/app/components/About/DescLink.tsx b/src/pages/app/components/About/DescLink.tsx index 91bdd6a03..c2a8b21f8 100644 --- a/src/pages/app/components/About/DescLink.tsx +++ b/src/pages/app/components/About/DescLink.tsx @@ -1,16 +1,18 @@ +import { useXsState } from "@hooks" +import Flex from '@pages/components/Flex' import { ElLink } from "element-plus" -import { defineComponent, h, useSlots } from "vue" -import "./desc-link.sass" +import { type Component, defineComponent, h, useSlots } from "vue" -type Icon = "github" | "element-plus" | "echarts" | "vue" - -const _default = defineComponent<{ href?: string, icon?: Icon }>(props => { +const _default = defineComponent<{ href?: string, icon?: Component }>(props => { const { icon, href } = props - const { default: default_ } = useSlots() + const isXs = useXsState() + return () => ( - {icon ?
: null} - {default_ ? h(default_) : href ?? ''} + {icon && !isXs.value && + {h(icon)} + } + {useSlots().default?.() ?? href ?? ''} ) }, { props: ['href', 'icon'] }) diff --git a/src/pages/app/components/About/Description.tsx b/src/pages/app/components/About/Description.tsx index 70352f478..dc48ed8ef 100644 --- a/src/pages/app/components/About/Description.tsx +++ b/src/pages/app/components/About/Description.tsx @@ -1,27 +1,69 @@ -import { t } from "@app/locale" -import { MediaSize, useMediaSize } from "@hooks" +import packageInfo, { AUTHOR_EMAIL } from "@/package" +import { t } from '@app/locale' +import { css } from '@emotion/css' +import { MediaSize, useMediaSize } from '@hooks' import { locale } from "@i18n" import Flex from "@pages/components/Flex" -import metaService from "@service/meta-service" -import packageInfo, { AUTHOR_EMAIL } from "@src/package" +import { Coffee, GitHub } from '@pages/icons' +import { rateClicked } from '@pages/util/rate' import { - CHANGE_LOG_PAGE, - CHROME_HOMEPAGE, EDGE_HOMEPAGE, - FEEDBACK_QUESTIONNAIRE, - FIREFOX_HOMEPAGE, - getHomepageWithLocale, - GITHUB_ISSUE_ADD, - HOMEPAGE, - LICENSE_PAGE, PRIVACY_PAGE, - REVIEW_PAGE, - SOURCE_CODE_PAGE, + BUY_ME_A_COFFEE_PAGE, CHANGE_LOG_PAGE, CHROME_HOMEPAGE, EDGE_HOMEPAGE, FEEDBACK_QUESTIONNAIRE, FIREFOX_HOMEPAGE, + getHomepageWithLocale, GITHUB_ISSUE_ADD, HOMEPAGE, LICENSE_PAGE, PRIVACY_PAGE, REVIEW_PAGE, SOURCE_CODE_PAGE, } from "@util/constant/url" -import { type ComponentSize, ElCard, ElDescriptions, ElDescriptionsItem, ElDivider, ElText } from "element-plus" +import { type ComponentSize, ElCard, ElDescriptions, ElDescriptionsItem, ElDivider, ElText, useNamespace } from "element-plus" import { computed, defineComponent, reactive } from "vue" import DescLink from "./DescLink" -import "./description.sass" +import { Chrome, Echarts, Edge, ElementPlus, Firefox, Vue } from './Icon' import InstallationLink from "./InstallationLink" +const useStyle = () => { + const textNs = useNamespace('text') + const descriptionsNs = useNamespace('descriptions') + + const textContainer = css` + padding: 20px 40px; + flex-direction: row; + + & > div { + flex: 1; + text-align: center; + padding: 0 40px; + line-height: 1.75rem; + + & .${textNs.b()} { + a { + color: unset; + font-size: inherit; + line-height: inherit; + } + + a:visited { + color: unset; + } + } + } + + html[data-media-size='xs'] & { + flex-direction: column; + padding-inline: 0; + gap: 40px; + + > div { + padding: 0; + } + } + ` + + const descriptionsCls = css` + html[data-media-size='xs'] & { + .${descriptionsNs.e('content')} { + word-break: break-all; + } + } + ` + return [textContainer, descriptionsCls] +} + const computeSize = (mediaSize: MediaSize): ComponentSize => { if (mediaSize <= MediaSize.sm) { return 'small' @@ -45,13 +87,11 @@ const _default = defineComponent<{}>(() => { email: AUTHOR_EMAIL, }) + const [textContainerCls, descriptionsCls] = useStyle() + return () => ( - - + + msg.about.label.name)} labelAlign="right"> {t(msg => msg.meta.marketName)} @@ -67,7 +107,7 @@ const _default = defineComponent<{}>(() => { msg.base.sourceCode)} labelAlign="right"> - + msg.about.label.license)} labelAlign="right"> @@ -75,37 +115,48 @@ const _default = defineComponent<{}>(() => { msg.base.changeLog)} labelAlign="right"> - + msg.about.label.support)} labelAlign="right"> {pages.email} msg.about.label.installation)} labelAlign="right"> - - - + + + + + + + + + msg.about.label.thanks)} labelAlign="right">
- VueJS + VueJS
- Echarts + Echarts
- Element Plus + Element Plus
+ {locale !== 'zh_CN' && ( + + {BUY_ME_A_COFFEE_PAGE} + + )} -
+
🌟  {t(msg => msg.about.text.greet)}  - metaService.saveFlag("rateOpen")}> + {t(msg => msg.about.text.rate)} @@ -118,7 +169,7 @@ const _default = defineComponent<{}>(() => {
-
+ ) }) diff --git a/src/pages/app/components/About/Icon.tsx b/src/pages/app/components/About/Icon.tsx new file mode 100644 index 000000000..17935e0c5 --- /dev/null +++ b/src/pages/app/components/About/Icon.tsx @@ -0,0 +1,160 @@ +import { type FunctionalComponent } from 'vue' + +export const Chrome: FunctionalComponent<{}> = () => ( + + + + + + + + + + + + + + + + + + + +) + +export const Edge: FunctionalComponent<{}> = () => ( + + + + + + +) + +export const Firefox: FunctionalComponent<{}> = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +) + +export const Vue: FunctionalComponent<{}> = () => ( + + + + +) + +export const Echarts: FunctionalComponent<{}> = () => ( + + + +) + +export const ElementPlus: FunctionalComponent<{}> = () => ( + + + +) \ No newline at end of file diff --git a/src/pages/app/components/About/InstallationLink.tsx b/src/pages/app/components/About/InstallationLink.tsx index 662f5fdc8..eec9d9c78 100644 --- a/src/pages/app/components/About/InstallationLink.tsx +++ b/src/pages/app/components/About/InstallationLink.tsx @@ -1,18 +1,67 @@ +import { css } from '@emotion/css' +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" -import type { FunctionalComponent } from "vue" -import "./installation-link.sass" +import { colorUsage, colorVariant } from '@pages/util/style' +import { computed, defineComponent, type StyleValue, useSlots } from "vue" -type _Source = 'chrome' | 'firefox' | 'edge' +type Props = { name: string, href: string } -type Props = { source: _Source, name: string, href: string } +const useStyle = () => { + const containerCls = css` + border-radius: 4px; + background-color: var(${colorUsage('fill')}); + height: 7.5rem; + width: 7.5rem; -const InstallationLink: FunctionalComponent = ({ href, name, source }) => ( - - -
- {name} - - -) + &:hover { + border: 1px solid var(${colorVariant('primary')}); + } + + html[data-media-size='xs'] & { + height: unset; + width: unset; + background-color: unset; + } + ` + + const nameCls = css` + text-align: center; + line-height: 24px; + font-size: 14px; + color: var(--el-text-color-primary); + font-weight: 500; + + html[data-media-size='xs'] & { + display: none; + } + ` + + return [containerCls, nameCls] +} + +const InstallationLink = defineComponent(({ href, name }) => { + const [containerCls, nameCls] = useStyle() + const { default: icon } = useSlots() + const isXs = useXsState() + const iconStyle = computed(() => { + const size = isXs.value ? '2em' : '2.5em' + return { width: size, height: size } + }) + + return () => ( + + +
+ {icon?.()} +
+ {name} + + + ) +}, { props: ['href', 'name'] }) export default InstallationLink \ No newline at end of file diff --git a/src/pages/app/components/About/desc-link.sass b/src/pages/app/components/About/desc-link.sass deleted file mode 100644 index 29b4ee1e2..000000000 --- a/src/pages/app/components/About/desc-link.sass +++ /dev/null @@ -1,13 +0,0 @@ -.i-about-icon - width: 0.8rem - height: 0.8rem - background-size: 100% - margin-inline-end: 4px -.i-about-icons-github - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='32' aria-hidden='true' viewBox='0 0 16 16' version='1.1' width='32' data-view-component='true' class='octicon octicon-mark-github v-align-middle color-fg-default'%3E%3Cpath d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z'%3E%3C/path%3E%3C/svg%3E") -.i-about-icons-element-plus - background-image: url("data:image/svg+xml,%3Csvg t='1710917830333' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2291' width='24' height='24'%3E%3Cpath d='M870.632727 753.338182c0 36.538182-19.316364 44.916364-19.316363 44.916363L500.596364 1000.727273A39.330909 39.330909 0 0 1 465.454545 1000.727273S121.018182 800.581818 108.450909 791.272727a30.021818 30.021818 0 0 1-12.8-23.272727V354.676364c0-18.152727 23.272727-30.952727 23.272727-30.952728l343.272728-198.981818a46.545455 46.545455 0 0 1 41.658181 0l336.523637 195.723637a47.941818 47.941818 0 0 1 29.090909 47.941818v384.930909z m-137.309091-395.636364L496.872727 221.090909a37.003636 37.003636 0 0 0-32.814545 0L193.861818 375.854545s-17.92 10.705455-17.687273 25.134546 0 323.956364 0 323.956364a23.272727 23.272727 0 0 0 10.007273 17.454545c10.007273 6.981818 279.272727 162.909091 279.272727 162.909091a30.487273 30.487273 0 0 0 27.694546 0c16.756364-9.309091 274.850909-158.021818 274.850909-158.021818s15.127273-6.516364 15.127273-35.141818v-80.756364l-302.545455 183.854545V744.727273a70.981818 70.981818 0 0 1 23.272727-48.174546L772.654545 535.272727a56.785455 56.785455 0 0 0 12.8-33.978182v-72.378181l-305.105454 184.32v-74.472728a51.665455 51.665455 0 0 1 19.316364-41.658181z m222.487273-259.490909a9.076364 9.076364 0 0 0-8.610909-9.774545H884.363636V24.669091c0-3.723636-6.050909-5.12-12.334545-5.12L837.818182 25.134545c-4.189091 0-7.214545 2.792727-7.214546 5.352728V88.436364H768a9.309091 9.309091 0 0 0-8.378182 8.610909v46.545454h69.818182V209.454545c0 3.723636 6.050909 6.283636 12.567273 5.352728l35.141818-5.818182c4.189091 0 6.749091-3.025455 6.749091-5.352727V142.894545h69.818182z' fill='%23409EFF' p-id='2292'%3E%3C/path%3E%3C/svg%3E") -.i-about-icons-echarts - background-image: url("data:image/svg+xml,%3Csvg t='1710917892300' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3272' width='24' height='24'%3E%3Cpath d='M512 0C229.236364 0 0 229.236364 0 512s229.236364 512 512 512 512-229.236364 512-512S794.763636 0 512 0z m352.395636 750.545455c-0.791273-0.930909-1.861818-1.629091-2.234181-2.653091-24.529455-65.629091-57.716364-74.612364-109.381819-29.463273-106.728727 93.277091-255.953455 109.614545-379.904 41.565091-130.327273-71.493818-199.074909-230.167273-156.253091-360.820364 46.545455-141.917091 205.265455-214.900364 340.805819-156.718545 139.357091 59.810909 197.352727 222.301091 126.929454 355.560727-4.328727 8.145455-9.681455 15.778909-13.358545 24.203636-12.706909 29.090909-1.675636 60.416 25.367272 73.541819a55.854545 55.854545 0 0 0 73.541819-25.367273c13.358545-27.554909 2.932364-57.949091-25.506909-73.169455-5.957818-3.211636-12.613818-5.026909-21.504-8.517818 45.754182-30.254545 91.927273-13.684364 100.026181 34.304 2.420364 14.522182 5.026909 20.433455 19.968 25.553455 46.126545 15.825455 55.156364 62.184727 21.504 101.934545z' fill='%23A9314D' p-id='3273'%3E%3C/path%3E%3C/svg%3E") -.i-about-icons-vue - background-image: url("data:image/svg+xml,%3Csvg t='1710917926989' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4232' width='24' height='24'%3E%3Cpath d='M615.6 123.6h165.5L512 589.7 242.9 123.6H63.5L512 900.4l448.5-776.9z' fill='%2341B883' p-id='4233'%3E%3C/path%3E%3Cpath d='M781.1 123.6H615.6L512 303 408.4 123.6H242.9L512 589.7z' fill='%2334495E' p-id='4234'%3E%3C/path%3E%3C/svg%3E") diff --git a/src/pages/app/components/About/description.sass b/src/pages/app/components/About/description.sass deleted file mode 100644 index 4d1b93737..000000000 --- a/src/pages/app/components/About/description.sass +++ /dev/null @@ -1,47 +0,0 @@ -.about-card - .text-container - padding: 20px 40px - display: flex - flex-direction: row - >div - flex: 1 - text-align: center - padding: 0 40px - line-height: 1.75rem - .el-text - a - color: unset - font-size: inherit - line-height: inherit - a:visited - color: unset - -html[data-media-size='xs'] - .about-card - .el-descriptions__table - table-layout: fixed - .el-descriptions__label - width: 28% - min-width: 100px - .el-descriptions__content - word-break: break-all - .i-about-icon - display: none - .installation-link-container - background-color: none - height: unset - width: unset - a - span - display: none - .i-logos - width: 2em - height: 2em - background-color: var(--el-card-bg-color) - margin-bottom: 0 - .text-container - flex-direction: column - padding-inline: 0 - gap: 40px - >div - padding: 0 diff --git a/src/pages/app/components/About/index.tsx b/src/pages/app/components/About/index.tsx index 084769c31..61b320c04 100644 --- a/src/pages/app/components/About/index.tsx +++ b/src/pages/app/components/About/index.tsx @@ -1,6 +1,6 @@ import { ElScrollbar } from 'element-plus' import { type FunctionalComponent, type StyleValue } from "vue" -import ContentContainer from "../common/ContentContainer" +import ContentContainer from '../common/ContentContainer' import Description from "./Description" const About: FunctionalComponent = () => ( diff --git a/src/pages/app/components/About/installation-link.sass b/src/pages/app/components/About/installation-link.sass deleted file mode 100644 index 3cdd7542e..000000000 --- a/src/pages/app/components/About/installation-link.sass +++ /dev/null @@ -1,33 +0,0 @@ -.installation-link-container:hover - border: 1px solid var(--el-color-primary) - -.installation-link-container - border-radius: 4px - background-color: var(--el-fill-color) - height: 7.5rem - width: 7.5rem - .installation-link - display: flex - width: 100% - flex-direction: column - justify-content: center - align-items: center - text-decoration-line: none - .i-logos - width: 2.5rem - height: 2.5rem - background-size: 100% - margin-bottom: 8px - .installation-name - text-align: center - line-height: 24px - font-size: 14px - color: var(--el-text-color-primary) - font-weight: 500 - .i-logos-edge - background-image: url("data:image/svg+xml,%3Csvg t='1706769032426' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='5515' width='24' height='24'%3E%3Cpath d='M923.69886 761.758375a328.212997 328.212997 0 0 1-41.986312 18.793873 408.90669 408.90669 0 0 1-143.553199 25.991526c-189.138338 0-353.884628-129.957632-353.884629-297.10314a125.479092 125.479092 0 0 1 65.578621-109.16441c-171.144204 7.197653-215.129864 185.539511-215.129865 289.905486 0 295.503661 272.311222 325.493884 331.092059 325.493884 31.589701 0 79.174188-9.197002 107.964802-18.394003l5.198305-1.599479a511.833134 511.833134 0 0 0 266.313178-211.131168 15.994785 15.994785 0 0 0-4.798436-21.99283 16.834512 16.834512 0 0 0-16.794524-0.799739z' fill='%230F5197' p-id='5516'%3E%3C/path%3E%3Cpath d='M422.662206 965.29202A317.816387 317.816387 0 0 1 331.891798 880.119787a322.734783 322.734783 0 0 1 117.961543-479.843563 132.47681 132.47681 0 0 1 61.979793-15.994786 130.317514 130.317514 0 0 1 102.766497 51.983053 128.79801 128.79801 0 0 1 25.591657 74.775622c0-0.799739 97.968061-318.29623-319.895709-318.296231-175.54277 0-319.895709 166.745638-319.895709 312.698056a521.50998 521.50998 0 0 0 48.384226 223.926996 512.113043 512.113043 0 0 0 625.396111 268.312526 303.02121 303.02121 0 0 1-251.518001-32.38944z' fill='%230C88DA' p-id='5517'%3E%3C/path%3E%3Cpath d='M609.001456 595.412606c-3.198957 3.998696-13.195698 9.996741-13.195698 22.792569 0 10.396611 6.797784 20.393351 18.793873 28.790614 57.581228 39.986964 165.945899 34.788658 166.345769 34.788659a238.922108 238.922108 0 0 0 121.160499-33.18918 245.120087 245.120087 0 0 0 121.56037-211.531038c1.199609-89.570799-31.989571-149.151374-45.185269-175.54277a440.496391 440.496391 0 0 0-83.732702-113.842886 493.639066 493.639066 0 0 0-142.673486-97.088347A582.530086 582.530086 0 0 0 511.833134 0.006718 511.833134 511.833134 0 0 0 0 504.642199c1.999348-145.952417 147.152026-263.91396 319.895709-263.91396 13.995437 0 93.969365 1.199609 167.945247 40.386833 65.178751 34.388789 99.567539 75.575361 123.159848 116.761934 24.791917 42.786051 29.190483 96.368582 29.190484 117.961543s-10.79648 53.182662-31.189832 79.574057z' fill='%232CC3D5' p-id='5518'%3E%3C/path%3E%3Cpath d='M649.548237 15.12179s372.638514 385.154434-48.544174 593.246592c0 0-27.231122 45.225256 102.846471 68.61763 0 0 215.489747 46.824734 302.461393-142.513538 17.51429-59.380641 33.109206-151.390644-13.195698-253.797259a427.860511 427.860511 0 0 0-76.974905-113.682937 546.381871 546.381871 0 0 0-113.083134-94.68913c-68.457682-34.988593-153.509953-57.181358-153.509953-57.181358z' fill='%2349D668' p-id='5519'%3E%3C/path%3E%3C/svg%3E") - .i-logos-chrome - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='none' height='63' viewBox='0 0 63 63' width='63'%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='34.9087' x2='7.63224' y1='61.029' y2='13.7847'%3E%3Cstop offset='0' stop-color='%231e8e3e'/%3E%3Cstop offset='1' stop-color='%2334a853'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='26.9043' x2='54.1808' y1='63.0788' y2='15.8345'%3E%3Cstop offset='0' stop-color='%23fcc934'/%3E%3Cstop offset='1' stop-color='%23fbbc04'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='4.22145' x2='58.7745' y1='19.6884' y2='19.6884'%3E%3Cstop offset='0' stop-color='%23d93025'/%3E%3Cstop offset='1' stop-color='%23ea4335'/%3E%3C/linearGradient%3E%3Cpath d='m31.499 47.2466c8.6985 0 15.75-7.0515 15.75-15.75s-7.0515-15.75-15.75-15.75-15.75 7.0515-15.75 15.75 7.0515 15.75 15.75 15.75z' fill='%23fff'/%3E%3Cpath d='m17.8591 39.3751-13.63772-23.6212c-2.76527 4.788-4.22118922 10.2197-4.22137998 15.7489s1.45535998 10.961 4.22028998 15.7492c2.76494 4.7882 6.74181 8.7641 11.53071 11.5279 4.7889 2.7637 10.221 4.2179 15.7502 4.2164l13.6377-23.6212v-.0041c-1.3813 2.3954-3.369 4.3848-5.7632 5.7681s-5.1104 2.1118-7.8755 2.1122-5.4816-.7272-7.8762-2.1099c-2.3945-1.3826-4.3829-3.3714-5.7649-5.7663z' fill='url(%23a)'/%3E%3Cpath d='m45.1379 39.3741-13.6376 23.6212c5.5292.0008 10.9611-1.4542 15.7496-4.2187 4.7885-2.7644 8.7648-6.7408 11.5291-11.5294 2.7642-4.7887 4.219-10.2207 4.2181-15.7499-.001-5.5292-1.4577-10.9606-4.2237-15.7483h-27.2754l-.0034.0021c2.7651-.0014 5.4818.7254 7.8769 2.1071 2.3951 1.3818 4.3841 3.3698 5.767 5.7643 1.3829 2.3944 2.1109 5.1108 2.1109 7.8758-.0001 2.7651-.7283 5.4814-2.1113 7.8758z' fill='url(%23b)'/%3E%3Cpath d='m31.499 43.9688c6.8863 0 12.4688-5.5825 12.4688-12.4688s-5.5825-12.4688-12.4688-12.4688-12.4687 5.5825-12.4687 12.4688 5.5824 12.4688 12.4687 12.4688z' fill='%231a73e8'/%3E%3Cpath d='m31.4991 15.75h27.2754c-2.764-4.7888-6.74-8.76553-11.5283-11.53029-4.7883-2.76475-10.2202-4.22010235-15.7494-4.21970992s-10.9608 1.45650992-15.7487 4.22194992c-4.788 2.76543-8.76341 6.74275-11.52666 11.53185l13.63766 23.6212.0035.0019c-1.3837-2.394-2.1127-5.11-2.1136-7.8751s.7264-5.4817 2.1086-7.8765c1.3821-2.3948 3.3706-4.3835 5.7652-5.7659 2.3947-1.3825 5.1112-2.11 7.8763-2.1094z' fill='url(%23c)'/%3E%3C/svg%3E") - - .i-logos-firefox - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='446.9' y1='76.85' x2='47.94' y2='461.77' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.05' stop-color='%23fff44f'/%3E%3Cstop offset='.11' stop-color='%23ffe847'/%3E%3Cstop offset='.22' stop-color='%23ffc830'/%3E%3Cstop offset='.37' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.46' stop-color='%23ff672a'/%3E%3Cstop offset='.53' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3CradialGradient id='b' cx='428.46' cy='55.06' r='501.01' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.13' stop-color='%23ffbd4f'/%3E%3Cstop offset='.19' stop-color='%23ffac31'/%3E%3Cstop offset='.25' stop-color='%23ff9d17'/%3E%3Cstop offset='.28' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff563b'/%3E%3Cstop offset='.47' stop-color='%23ff3750'/%3E%3Cstop offset='.71' stop-color='%23f5156c'/%3E%3Cstop offset='.78' stop-color='%23eb0878'/%3E%3Cstop offset='.86' stop-color='%23e50080'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='245.39' cy='259.88' r='501.01' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.3' stop-color='%23960e18'/%3E%3Cstop offset='.35' stop-color='%23b11927' stop-opacity='.74'/%3E%3Cstop offset='.43' stop-color='%23db293d' stop-opacity='.34'/%3E%3Cstop offset='.5' stop-color='%23f5334b' stop-opacity='.09'/%3E%3Cstop offset='.53' stop-color='%23ff3750' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='305.8' cy='-58.64' r='362.96' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.13' stop-color='%23fff44f'/%3E%3Cstop offset='.25' stop-color='%23ffdc3e'/%3E%3Cstop offset='.51' stop-color='%23ff9d12'/%3E%3Cstop offset='.53' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='189.98' cy='390.75' r='238.55' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.35' stop-color='%233a8ee6'/%3E%3Cstop offset='.47' stop-color='%235c79f0'/%3E%3Cstop offset='.67' stop-color='%239059ff'/%3E%3Cstop offset='1' stop-color='%23c139e6'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='252.16' cy='201.25' r='126.48' gradientTransform='matrix(.97 -.24 .28 1.14 -48.36 31.43)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.21' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.28' stop-color='%238c4ff3' stop-opacity='.06'/%3E%3Cstop offset='.75' stop-color='%237716a8' stop-opacity='.45'/%3E%3Cstop offset='.97' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='g' cx='239.06' cy='34.56' r='171.62' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.12' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.73' stop-color='%23ff7e37'/%3E%3Cstop offset='.79' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='h' cx='373.96' cy='-74.29' r='732.21' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.11' stop-color='%23fff44f'/%3E%3Cstop offset='.46' stop-color='%23ff980e'/%3E%3Cstop offset='.62' stop-color='%23ff5634'/%3E%3Cstop offset='.72' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='i' cx='304.59' cy='7.07' r='536.37' gradientTransform='matrix(.1 .99 -.65 .07 277.32 -296.33)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.06' stop-color='%23ffe847'/%3E%3Cstop offset='.17' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.36' stop-color='%23ff8b16'/%3E%3Cstop offset='.45' stop-color='%23ff672a'/%3E%3Cstop offset='.57' stop-color='%23ff3647'/%3E%3Cstop offset='.74' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='j' cx='235.02' cy='98.12' r='457.12' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.14' stop-color='%23fff44f'/%3E%3Cstop offset='.48' stop-color='%23ff980e'/%3E%3Cstop offset='.59' stop-color='%23ff5634'/%3E%3Cstop offset='.66' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='k' cx='355.69' cy='124.88' r='500.32' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.09' stop-color='%23fff44f'/%3E%3Cstop offset='.23' stop-color='%23ffe141'/%3E%3Cstop offset='.51' stop-color='%23ffaf1e'/%3E%3Cstop offset='.63' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='l' x1='442.1' y1='74.79' x2='102.64' y2='414.26' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.17' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.27' stop-color='%23fff44f' stop-opacity='.63'/%3E%3Cstop offset='.49' stop-color='%23fff44f' stop-opacity='.22'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94 0 0 0 .14.05.4C427.71 111.15 381.63 83.83 344 24.36c-1.91-3-3.81-6-5.67-9.21-1.05-1.81-1.9-3.45-2.64-5A43.73 43.73 0 0 1 332.1.68a.63.63 0 0 0-.54-.65.86.86 0 0 0-.45 0 .47.47 0 0 0-.11.07c-.06 0-.12.07-.18.09l.1-.13c-60.37 35.36-80.85 100.77-82.73 133.5A120.27 120.27 0 0 0 182 159.05a71.11 71.11 0 0 0-6.22-4.7 111.39 111.39 0 0 1-.67-58.74c-24.69 11.25-43.89 29-57.85 44.71h-.11c-9.53-12.07-8.86-51.88-8.32-60.19-.11-.52-7.1 3.63-8 4.26a174.74 174.74 0 0 0-23.49 20.12 210.18 210.18 0 0 0-22.44 26.91 202.86 202.86 0 0 0-32.25 72.82c-.11.52-.21 1.06-.32 1.59-.45 2.11-2.08 12.7-2.37 15v.53A229.1 229.1 0 0 0 16 254.52v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.78-41.22-.53-84.54-15.59-120.76zm-277 188.12c1.12.53 2.18 1.12 3.33 1.64l.16.1c-1.15-.56-2.32-1.14-3.48-1.74zm55-144.95zM454.9 179v-.23.26z' fill='url(%23a)'/%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94v.49c22.68 61.48 10.32 124-7.48 162.2-27.54 59.1-94.21 119.68-198.58 116.73-112.67-3.2-212-86.91-230.55-196.46-3.38-17.29 0-26.06 1.7-40.09-2.07 10.81-2.86 13.94-3.89 33.16v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.75-41.22-.56-84.54-15.62-120.76z' fill='url(%23b)'/%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94v.49c22.68 61.48 10.32 124-7.48 162.2-27.54 59.1-94.21 119.68-198.58 116.73-112.67-3.2-212-86.91-230.55-196.46-3.38-17.29 0-26.06 1.7-40.09-2.07 10.81-2.86 13.94-3.89 33.16v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.75-41.22-.56-84.54-15.62-120.76z' fill='url(%23c)'/%3E%3Cpath d='M361.92 194.62c.53.37 1 .74 1.5 1.11a130.49 130.49 0 0 0-22.32-29.12C266.4 91.91 321.52 4.63 330.81.19l.1-.13c-60.37 35.36-80.85 100.77-82.73 133.5 2.8-.19 5.59-.43 8.44-.43 45.05 0 84.29 24.78 105.3 61.49z' fill='url(%23d)'/%3E%3Cpath d='M256.77 209.54c-.39 6-21.51 26.6-28.9 26.6-68.34 0-79.43 41.34-79.43 41.34 3 34.82 27.26 63.49 56.61 78.66 1.34.69 2.69 1.31 4 1.93 2.35 1 4.71 2 7.06 2.89a106.88 106.88 0 0 0 31.27 6c119.78 5.62 143-143.22 56.55-186.44 22.13-3.85 45.11 5.06 57.94 14.07-21-36.71-60.25-61.49-105.3-61.49-2.85 0-5.64.24-8.44.43A120.27 120.27 0 0 0 182 159.05c3.67 3.11 7.81 7.25 16.52 15.83 16.34 16.12 58.16 32.71 58.25 34.66z' fill='url(%23e)'/%3E%3Cpath d='M256.77 209.54c-.39 6-21.51 26.6-28.9 26.6-68.34 0-79.43 41.34-79.43 41.34 3 34.82 27.26 63.49 56.61 78.66 1.34.69 2.69 1.31 4 1.93 2.35 1 4.71 2 7.06 2.89a106.88 106.88 0 0 0 31.27 6c119.78 5.62 143-143.22 56.55-186.44 22.13-3.85 45.11 5.06 57.94 14.07-21-36.71-60.25-61.49-105.3-61.49-2.85 0-5.64.24-8.44.43A120.27 120.27 0 0 0 182 159.05c3.67 3.11 7.81 7.25 16.52 15.83 16.34 16.12 58.16 32.71 58.25 34.66z' fill='url(%23f)'/%3E%3Cpath d='M170.83 151.06c1.95 1.26 3.55 2.32 5 3.29a111.39 111.39 0 0 1-.67-58.74c-24.69 11.25-43.89 29-57.85 44.71 1.13-.03 35.99-.66 53.52 10.74z' fill='url(%23g)'/%3E%3Cpath d='M18.22 261.45C36.77 371 136.1 454.71 248.85 457.91c104.37 2.95 171-57.63 198.58-116.73 17.8-38.21 30.16-100.72 7.48-162.2v-.46c0 .06 0 .14.05.4 8.52 55.67-19.79 109.6-64.05 146.07a7.3 7.3 0 0 0-.13.31c-86.25 70.23-168.78 42.37-185.49 31-1.16-.56-2.33-1.14-3.49-1.74-50.29-24-71.06-69.85-66.61-109.14-42.45 0-56.93-35.82-56.93-35.82s38.12-27.18 88.36-3.54c46.53 21.9 90.23 3.55 90.23 3.54-.09-1.95-41.91-18.59-58.22-34.66-8.71-8.58-12.85-12.72-16.52-15.83a71.11 71.11 0 0 0-6.22-4.7c-1.43-1-3-2-5-3.29-17.53-11.4-52.39-10.77-53.54-10.74h-.11c-9.53-12.07-8.86-51.88-8.32-60.19-.11-.52-7.1 3.63-8 4.26a174.74 174.74 0 0 0-23.49 20.12 210.18 210.18 0 0 0-22.44 26.91 202.86 202.86 0 0 0-32.25 72.82c-.19.46-8.74 37.79-4.52 57.15z' fill='url(%23h)'/%3E%3Cpath d='M341.1 166.61a130.49 130.49 0 0 1 22.32 29.12 46.36 46.36 0 0 1 3.6 3C421.5 248.89 393 319.9 390.83 325c44.26-36.47 72.57-90.4 64.05-146.07-27.17-67.78-73.25-95.1-110.88-154.57-1.91-3-3.81-6-5.67-9.21-1.05-1.81-1.9-3.45-2.64-5A43.73 43.73 0 0 1 332.1.68a.63.63 0 0 0-.54-.65.86.86 0 0 0-.45 0 .47.47 0 0 0-.11.07c-.06 0-.12.07-.18.09-9.3 4.44-64.42 91.72 10.28 166.42z' fill='url(%23i)'/%3E%3Cpath d='M367 198.68a46.36 46.36 0 0 0-3.6-3c-.49-.37-1-.74-1.5-1.11-12.83-9-35.81-17.92-57.94-14.07 86.44 43.22 63.23 192.06-56.55 186.44a106.88 106.88 0 0 1-31.27-6c-2.35-.88-4.71-1.85-7.06-2.89-1.36-.62-2.71-1.24-4-1.93l.16.1c16.71 11.4 99.24 39.26 185.49-31 0 0 .05-.13.13-.31C393 319.9 421.5 248.89 367 198.68z' fill='url(%23j)'/%3E%3Cpath d='M148.44 277.48s11.09-41.34 79.43-41.34c7.39 0 28.51-20.62 28.9-26.6s-43.7 18.36-90.23-3.54c-50.24-23.64-88.36 3.54-88.36 3.54s14.48 35.82 56.93 35.82c-4.45 39.29 16.32 85.1 66.61 109.14 1.12.53 2.18 1.12 3.33 1.64-29.35-15.14-53.58-43.84-56.61-78.66z' fill='url(%23k)'/%3E%3Cpath d='M478.71 166.38c-10.44-25.13-31.6-52.26-48.21-60.83 13.52 26.51 21.34 53.1 24.33 72.94 0 0 0 .14.05.4C427.71 111.15 381.63 83.83 344 24.36c-1.91-3-3.81-6-5.67-9.21-1.05-1.81-1.9-3.45-2.64-5A43.73 43.73 0 0 1 332.1.68a.63.63 0 0 0-.54-.65.86.86 0 0 0-.45 0 .47.47 0 0 0-.11.07c-.06 0-.12.07-.18.09l.1-.13c-60.37 35.36-80.85 100.77-82.73 133.5 2.8-.19 5.59-.43 8.44-.43 45.05 0 84.29 24.78 105.3 61.49-12.83-9-35.81-17.92-57.94-14.07 86.44 43.22 63.23 192.06-56.55 186.44a106.88 106.88 0 0 1-31.27-6c-2.35-.88-4.71-1.85-7.06-2.89-1.36-.62-2.71-1.24-4-1.93l.16.1c-1.16-.56-2.33-1.14-3.49-1.74 1.12.53 2.18 1.12 3.33 1.64-29.41-15.17-53.64-43.87-56.67-78.69 0 0 11.09-41.34 79.43-41.34 7.39 0 28.51-20.62 28.9-26.6-.09-1.95-41.91-18.59-58.22-34.66-8.71-8.58-12.85-12.72-16.52-15.83a71.11 71.11 0 0 0-6.22-4.7 111.39 111.39 0 0 1-.67-58.74c-24.69 11.25-43.89 29-57.85 44.71h-.11c-9.53-12.07-8.86-51.88-8.32-60.19-.11-.52-7.1 3.63-8 4.26a174.74 174.74 0 0 0-23.49 20.12 210.18 210.18 0 0 0-22.44 26.91 202.86 202.86 0 0 0-32.25 72.82c-.11.52-.21 1.06-.32 1.59-.45 2.11-2.49 12.85-2.77 15.15 0 .18 0-.17 0 0A278.84 278.84 0 0 0 16 254.52v1.23c0 132.72 107.6 240.32 240.32 240.32 118.87 0 217.56-86.3 236.89-199.66.4-3.07.73-6.17 1.09-9.27 4.78-41.22-.53-84.54-15.59-120.76zm-23.84 12.34v.26z' fill='url(%23l)'/%3E%3C/svg%3E") diff --git a/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx b/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx index f6cad9265..10c39fa19 100644 --- a/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx +++ b/src/pages/app/components/Analysis/components/AnalysisFilter/TargetSelect.tsx @@ -1,36 +1,34 @@ -import { useCategories } from "@app/context" -import { t } from "@app/locale" -import { useDebounce, useRequest, useState } from "@hooks" +import { searchSite } from "@api/sw/site" +import { useAnalysisTarget } from '@app/components/Analysis/context' +import type { AnalysisTarget } from '@app/components/Analysis/types' +import { labelOfHostInfo } from '@app/components/Analysis/util' +import { useCategory } from '@app/context' +import { t } from '@app/locale' +import { useDebounceState, useRequest } from '@hooks' import Flex from "@pages/components/Flex" -import siteService from "@service/site-service" -import statService from "@service/stat-service" -import { identifySiteKey, parseSiteKeyFromIdentity, SiteMap } from "@util/site" +import { CATE_NOT_SET_ID, identifySiteKey, parseSiteIdentity, SiteMap } from "@util/site" import { ElSelectV2, ElTag, useNamespace } from "element-plus" import type { OptionType } from "element-plus/es/components/select-v2/src/select.types" import { computed, defineComponent, type FunctionalComponent, onMounted, ref, type StyleValue } from "vue" -import { useAnalysisTarget } from "../../context" -import type { AnalysisTarget } from "../../types" -import { labelOfHostInfo } from "../../util" -import "./select-v2.fix.sass" const SITE_PREFIX = 'S' const CATE_PREFIX = 'C' const cvtTarget2Key = (target: AnalysisTarget | undefined): string => { - if (target?.type === 'site') { - return `${SITE_PREFIX}${identifySiteKey(target.key)}` - } else if (target?.type === 'cate') { - return `${CATE_PREFIX}${target.key}` + const { type, key } = target ?? {} + switch (type) { + case 'site': return `${SITE_PREFIX}${identifySiteKey(key)}` + case 'cate': return `${CATE_PREFIX}${key}` + default: return '' } - return '' } const cvtKey2Target = (key: string | undefined): AnalysisTarget | undefined => { if (!key) return undefined - const prefix = key?.charAt?.(0) - const content = key?.substring(1) + const prefix = key.charAt(0) + const content = key.substring(1) if (prefix === SITE_PREFIX) { - const key = parseSiteKeyFromIdentity(content) + const key = parseSiteIdentity(content) if (key) return { type: 'site', key } } else if (prefix === CATE_PREFIX) { let cateId: number | undefined @@ -46,34 +44,14 @@ type TargetItem = AnalysisTarget & { label: string } -function collectHosts(hosts: Record, collector: SiteMap) { - Object.entries(hosts).forEach(([key, arr]) => { - const type = key as timer.site.Type - arr.forEach(host => { - const site: timer.site.SiteInfo = { host, type } - collector?.put(site, site) - }) - }) -} - -const fetchItems = async (categories: timer.site.Cate[]): Promise<[siteItems: TargetItem[], cateItems: TargetItem[]]> => { +const fetchItems = async (categories: tt4b.site.Cate[]): Promise<[siteItems: TargetItem[], cateItems: TargetItem[]]> => { // 1. query categories - const cateItems = categories?.map(({ id, name }) => ({ type: 'cate', key: id, label: name } satisfies TargetItem)) + const cateItems: TargetItem[] = categories.map(({ id, name }) => ({ type: 'cate', key: id, label: name })) // 2. query sites - const siteSet = new SiteMap() - - // 2.1 sites from hosts - const hosts = await statService.listHosts() - collectHosts(hosts, siteSet) - - // 2.2 query sites from sites - const sites = await siteService.selectAll() - sites?.forEach(site => siteSet.put(site, site)) - - const siteItems = siteSet?.map((_, site) => site) - .filter(site => !!site) - .map(site => ({ type: 'site', key: site, label: labelOfHostInfo(site) }) satisfies TargetItem) + const sites = await searchSite() + const siteMap = SiteMap.identify(sites) + const siteItems: TargetItem[] = siteMap.map((_, key) => ({ type: 'site', key, label: labelOfHostInfo(key) })) return [cateItems, siteItems] } @@ -84,15 +62,15 @@ const SiteTypeTag: FunctionalComponent<{ text: string }> = ({ text }) => ( ) -const SiteOption = defineComponent<{ value: timer.site.SiteInfo }>(props => { - const alias = computed(() => props.value?.alias) - const type = computed(() => props.value?.type) +const SiteOption = defineComponent<{ value: tt4b.site.SiteInfo }>(props => { + const alias = computed(() => props.value.alias) + const type = computed(() => props.value.type) const mergedText = t(msg => msg.analysis.common.merged) const virtualText = t(msg => msg.analysis.common.virtual) return () => ( - {props.value?.host} + {props.value.host} {alias.value} @@ -103,7 +81,7 @@ const SiteOption = defineComponent<{ value: timer.site.SiteInfo }>(props => { }, { props: ['value'] }) const TargetSelect = defineComponent(() => { - const { categories } = useCategories() + const cate = useCategory() const target = useAnalysisTarget() const selectKey = computed({ @@ -112,53 +90,55 @@ const TargetSelect = defineComponent(() => { }) const { data: allItems } = useRequest( - () => fetchItems(categories.value), - { deps: categories }, + () => fetchItems([...cate.all, { id: CATE_NOT_SET_ID, name: t(msg => msg.shared.cate.notSet) }]), + { defaultValue: [[], []], deps: [() => cate.all] }, ) - const [query, setQuery] = useState('') - const debouncedQuery = useDebounce(query, 50) - + const [query, setQuery] = useDebounceState('', 50) const options = computed(() => { - const q = debouncedQuery.value?.trim?.() - let [cateItems, siteItems] = allItems.value || [] + const q = query.value.trim() + let [cateItems, siteItems] = allItems.value if (q) { - siteItems = siteItems?.filter(item => { - const { host, alias } = (item.key as timer.site.SiteInfo) || {} - return host?.includes?.(q) || alias?.includes?.(q) + siteItems = siteItems.filter(({ key, type }) => { + if (type !== 'site') return false + const { host, alias } = key + return host.includes(q) || alias?.includes(q) }) - cateItems = cateItems?.filter(item => item.label?.includes?.(q)) + cateItems = cateItems.filter(item => item.label.includes(q)) } let res: OptionType[] = [] - cateItems?.length && res.push({ + cate.enabled && cateItems.length && res.push({ value: 'cate', label: t(msg => msg.analysis.target.cate), options: cateItems.map(item => ({ value: cvtTarget2Key(item), label: item.label, data: item })), }) - siteItems?.length && res.push({ + siteItems.length && res.push({ value: 'site', label: t(msg => msg.analysis.target.site), options: siteItems.map(item => ({ value: cvtTarget2Key(item), label: item.label, data: item })), }) - if (res.length === 1) { - // Single content, not use group - res = res[0].options - } + // Single content, not use group + if (res.length === 1) res = res[0]?.options ?? [] return res }) const ns = useNamespace('select') const select = ref>() onMounted(() => { + // Do nothing if target selected if (target.value) return - let el = select.value?.$el as HTMLElement | undefined - if (!el) return + + let el = select.value?.$el + if (!(el instanceof HTMLElement)) return el.click() - const input = el.querySelector(`.${ns.e('input')}`) as HTMLInputElement - (el.querySelector(`.${ns.e('wrapper')}`) as HTMLElement)?.classList?.add?.(ns.is('focused')) - input?.click?.() - input?.focus?.() + const input = el.querySelector(`.${ns.e('input')}`) + const wrapper = el.querySelector(`.${ns.e('wrapper')}`) + if (input instanceof HTMLInputElement) { + input.click() + input.focus() + } + if (wrapper instanceof HTMLElement) wrapper.classList.add(ns.is('focused')) }) return () => ( @@ -171,7 +151,7 @@ const TargetSelect = defineComponent(() => { filterMethod={setQuery} style={{ width: '240px' } as StyleValue} defaultFirstOption - options={options.value ?? []} + options={options.value} fitInputWidth={false} v-slots={({ item }: any) => { const target = (item as any).data as TargetItem diff --git a/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx b/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx index 6c8b29fea..068360266 100644 --- a/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx +++ b/src/pages/app/components/Analysis/components/AnalysisFilter/index.tsx @@ -5,10 +5,10 @@ * https://opensource.org/licenses/MIT */ -import TimeFormatFilterItem from "@app/components/common/filter/TimeFormatFilterItem" +import { useAnalysisTimeFormat } from "@app/components/Analysis/context" +import TimeFormatFilterItem from '@app/components/common/filter/TimeFormatFilterItem' import Flex from "@pages/components/Flex" import { defineComponent } from "vue" -import { useAnalysisTimeFormat } from "../../context" import TargetSelect from "./TargetSelect" const AnalysisFilter = defineComponent(() => { diff --git a/src/pages/app/components/Analysis/components/AnalysisFilter/select-v2.fix.sass b/src/pages/app/components/Analysis/components/AnalysisFilter/select-v2.fix.sass deleted file mode 100644 index e79e5e003..000000000 --- a/src/pages/app/components/Analysis/components/AnalysisFilter/select-v2.fix.sass +++ /dev/null @@ -1,2 +0,0 @@ -.el-vl__window.el-select-dropdown__list - direction: unset !important diff --git a/src/pages/app/components/Analysis/components/Summary/Calendar/Wrapper.ts b/src/pages/app/components/Analysis/components/Summary/Calendar/Wrapper.ts index 00d276e3a..47041e983 100644 --- a/src/pages/app/components/Analysis/components/Summary/Calendar/Wrapper.ts +++ b/src/pages/app/components/Analysis/components/Summary/Calendar/Wrapper.ts @@ -4,20 +4,17 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" -import { periodFormatter } from "@app/util/time" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getRegularTextColor, getSecondaryTextColor } from "@pages/util/style" -import weekHelper from "@service/components/week-helper" +import { getWeekStartDay, getWeekStartTime } from '@api/sw/option' +import { t } from '@app/locale' +import { parseValueOfFormatter } from "@app/util/echarts" +import { periodFormatter } from '@app/util/time' +import { EchartsWrapper } from '@hooks' +import { getRegularTextColor, getSecondaryTextColor } from '@pages/util/style' import { groupBy, rotate, toMap } from "@util/array" import { formatTime, getAllDatesBetween, MILL_PER_WEEK, parseTime } from "@util/time" import type { - ComposeOption, - EffectScatterSeriesOption, - GridComponentOption, - TitleComponentOption, - TooltipComponentOption, - VisualMapComponentOption + ComposeOption, EffectScatterSeriesOption, GridComponentOption, TitleComponentOption, TooltipComponentOption, + VisualMapComponentOption, } from "echarts" import type { TopLevelFormatterParams } from "echarts/types/dist/shared" @@ -66,22 +63,21 @@ function getXAxisLabelMap(data: _Value[]): { [x: string]: string } { const xAndMonthMap = groupBy(data, e => e[0], grouped => new Set(grouped.map(a => a[3].substring(4, 6)))) let lastMonth: string | undefined = undefined Object.entries(xAndMonthMap).forEach(([x, monthSet]) => { - if (monthSet.size != 1) { - return - } + if (monthSet.size != 1) return const currentMonth = Array.from(monthSet)[0] - if (currentMonth === lastMonth) { - return - } + if (!currentMonth || currentMonth === lastMonth) return lastMonth = currentMonth const monthNum = parseInt(currentMonth) const label = allMonthLabel[monthNum - 1] - result[x] = label + label && (result[x] = label) }) return result } -function optionOf(data: _Value[], weekDays: string[], format: timer.app.TimeFormat, domWidth: number): EcOption { +function optionOf( + data: _Value[], weekDays: string[], + format: tt4b.ui.TimeFormat, domWidth: number, +): EcOption { const xAxisLabelMap = getXAxisLabelMap(data) const axisTextColor = getSecondaryTextColor() const gridLeft = domWidth * 0.1 < MIN_GRID_LEFT_PX ? MIN_GRID_LEFT_PX : '10%' @@ -99,12 +95,12 @@ function optionOf(data: _Value[], weekDays: string[], format: timer.app.TimeForm tooltip: { borderWidth: 0, formatter: (params: TopLevelFormatterParams) => { - const parma = Array.isArray(params) ? params[0] : params - const { data } = parma - const { value } = data as any + const value = parseValueOfFormatter(params) + // todo: not safety const [_1, _2, mills, date] = value as _Value if (!mills) return '' const time = parseTime(date) + if (!time) return '' return time ? `${formatTime(time, t(msg => msg.calendar.dateFormat))}
${periodFormatter(mills, { format })}` : '' }, }, @@ -143,8 +139,8 @@ function optionOf(data: _Value[], weekDays: string[], format: timer.app.TimeForm } export type BizOption = { - rows: timer.stat.Row[] - timeFormat: timer.app.TimeFormat + rows: tt4b.stat.Row[] + timeFormat: tt4b.ui.TimeFormat } class Wrapper extends EchartsWrapper { @@ -154,7 +150,7 @@ class Wrapper extends EchartsWrapper { const width = this.getDomWidth() const colNum = getWeekNum(width) const endTime = new Date() - const [startTime,] = await weekHelper.getWeekDate(endTime.getTime() - MILL_PER_WEEK * (colNum - 1)) + const startTime = await getWeekStartTime(endTime.getTime() - MILL_PER_WEEK * (colNum - 1)) const allDates = getAllDatesBetween(startTime, endTime) const value = toMap(rows, r => r.date, r => r.focus) const data: _Value[] = [] @@ -165,7 +161,7 @@ class Wrapper extends EchartsWrapper { const x = colIndex, y = 7 - (1 + weekDay) data.push([x, y, dailyMills, date]) }) - const weekStart = await weekHelper.getRealWeekStart() + const weekStart = await getWeekStartDay() const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse() rotate(weekDays, weekStart, true) return optionOf(data, weekDays, timeFormat, width) diff --git a/src/pages/app/components/Analysis/components/Summary/Calendar/index.tsx b/src/pages/app/components/Analysis/components/Summary/Calendar/index.tsx index 35ca2ea6d..d9979ab43 100644 --- a/src/pages/app/components/Analysis/components/Summary/Calendar/index.tsx +++ b/src/pages/app/components/Analysis/components/Summary/Calendar/index.tsx @@ -4,8 +4,8 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { useAnalysisRows, useAnalysisTimeFormat } from "@app/components/Analysis/context" -import { useEcharts } from "@hooks/useEcharts" +import { useAnalysisRows, useAnalysisTimeFormat } from '@app/components/Analysis/context' +import { useEcharts } from '@hooks' import { computed, defineComponent } from "vue" import Wrapper, { type BizOption } from "./Wrapper" diff --git a/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx b/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx index df978a180..c9b33c7da 100644 --- a/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx +++ b/src/pages/app/components/Analysis/components/Summary/TargetInfo.tsx @@ -5,15 +5,15 @@ * https://opensource.org/licenses/MIT */ -import { useCategories } from "@app/context" -import { t } from "@app/locale" -import { useRequest } from "@hooks" +import { useAnalysisTarget } from "@app/components/Analysis/context" +import { labelOfHostInfo } from "@app/components/Analysis/util" +import { useCategory } from '@app/context' +import { t } from '@app/locale' import Flex from "@pages/components/Flex" -import siteService from "@service/site-service" +import Img from '@pages/components/Img' +import { CATE_NOT_SET_ID } from '@util/site' import { ElTag } from "element-plus" -import { computed, defineComponent, type StyleValue, toRef } from "vue" -import { useAnalysisTarget } from "../../context" -import { labelOfHostInfo } from "../../util" +import { computed, defineComponent, FunctionalComponent, type StyleValue } from "vue" const TITLE_STYLE: StyleValue = { fontSize: '26px', @@ -33,30 +33,32 @@ const SUBTITLE_STYLE: StyleValue = { margin: 0, } -const SiteInfo = defineComponent<{ value: timer.site.SiteKey }>(props => { - const key = toRef(props, 'value') - const { data: site } = useRequest(() => key.value ? siteService.get(key.value) : undefined, { deps: key }) - const iconUrl = computed(() => site.value?.iconUrl) - const title = computed(() => site.value?.alias ?? labelOfHostInfo(site.value)) - const subtitle = computed(() => site.value?.alias ? labelOfHostInfo(site.value) : undefined) +const SiteInfo: FunctionalComponent<{ site: tt4b.site.SiteInfo }> = ({ site }) => { + const { iconUrl, alias } = site + const label = labelOfHostInfo(site) + const [title, subtitle] = alias ? [alias, label] : [label] - return () => ( + return ( - -

{title.value}

- {subtitle &&

{subtitle.value}

} + +

{title}

+ {subtitle &&

{subtitle}

} ) -}, { props: ['value'] }) +} const CateInfo = defineComponent<{ value: number }>(props => { - const cateId = toRef(props, 'value') - const { categories } = useCategories() - const cate = computed(() => categories.value?.find(c => c.id === cateId.value)) + const { all } = useCategory() + const cateName = computed(() => { + const cateId = props.value + return cateId === CATE_NOT_SET_ID + ? t(msg => msg.shared.cate.notSet) + : all.find(c => c.id === cateId)?.name ?? '' + }) return () => ( -

{cate.value?.name}

+

{cateName.value}

{t(msg => msg.analysis.target.cate)} ) @@ -73,7 +75,7 @@ const TargetInfo = defineComponent(() => { padding="0 25px" > {!target.value &&

{t(msg => msg.analysis.common.emptyDesc)}

} - {target.value?.type === 'site' && } + {target.value?.type === 'site' && } {target.value?.type === 'cate' && } ) diff --git a/src/pages/app/components/Analysis/components/Summary/index.tsx b/src/pages/app/components/Analysis/components/Summary/index.tsx index 5a9ae0a7a..2cfcaf0e0 100644 --- a/src/pages/app/components/Analysis/components/Summary/index.tsx +++ b/src/pages/app/components/Analysis/components/Summary/index.tsx @@ -4,15 +4,16 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { KanbanCard, KanbanIndicatorCell } from "@app/components/common/kanban" -import { t } from "@app/locale" -import { cvt2LocaleTime, periodFormatter } from "@app/util/time" +import { useAnalysisRows, useAnalysisTarget, useAnalysisTimeFormat } from "@app/components/Analysis/context" +import type { AnalysisTarget } from "@app/components/Analysis/types" +import { KanbanCard, KanbanIndicatorCell } from '@app/components/common/kanban' +import { t } from '@app/locale' +import { cvt2LocaleTime, periodFormatter } from '@app/util/time' +import { css } from '@emotion/css' +import Grid from '@pages/components/Grid' import { computed, defineComponent } from "vue" -import { useAnalysisRows, useAnalysisTarget, useAnalysisTimeFormat } from "../../context" -import { AnalysisTarget } from "../../types" import Calendar from "./Calendar" import TargetInfo from "./TargetInfo" -import "./summary.sass" type Summary = { focus: number @@ -21,12 +22,12 @@ type Summary = { firstDay?: string } -function computeSummary(target: AnalysisTarget | undefined, rows: timer.stat.Row[]): Summary | undefined { +function computeSummary(target: AnalysisTarget | undefined, rows: tt4b.stat.Row[]): Summary | undefined { if (!target) return undefined const summary: Summary = { focus: 0, visit: 0, day: 0 } - summary.firstDay = rows?.[0]?.date - rows?.forEach(({ focus, time: visit }) => { + summary.firstDay = rows[0]?.date + rows.forEach(({ focus, time: visit }) => { summary.focus += focus summary.visit += visit focus && (summary.day += 1) @@ -43,11 +44,26 @@ const _default = defineComponent(() => { const timeFormat = useAnalysisTimeFormat() const rows = useAnalysisRows() const summary = computed(() => computeSummary(target.value, rows.value)) + const containerCls = css` + & > div > div { + background-color: var(--el-card-bg-color); + } + ` return () => ( - msg.analysis.summary.title)}> -
-
+ msg.analysis.summary.title}> + + { subValue={summary.value?.firstDay ? `@${cvt2LocaleTime(summary.value?.firstDay)}` : ''} /> -
+
-
+ ) }) diff --git a/src/pages/app/components/Analysis/components/Summary/summary.sass b/src/pages/app/components/Analysis/components/Summary/summary.sass deleted file mode 100644 index 503cc4351..000000000 --- a/src/pages/app/components/Analysis/components/Summary/summary.sass +++ /dev/null @@ -1,21 +0,0 @@ -.analysis-summary-container - display: grid - grid-template-columns: repeat(auto-fill, minmax(calc(min(100%, max(500px, calc(50% - .5px)))), 1fr)) - background-color: var(--el-border-color) - gap: 1px - >div - >div - background-color: var(--el-card-bg-color) - .indicator-area - display: grid - gap: 1px - grid-template-columns: repeat(auto-fill, minmax(calc(min(100%, max(300px, calc(50% - .5px)))), 1fr)) - -html[data-media-size='xs'] - .analysis-summary-container - .indicator-area - .kanban-indicator-cell-container - padding: 0 - text-align: center - .kanban-indicator-cell-sub-tip - margin: 0 auto diff --git a/src/pages/app/components/Analysis/components/Trend/Dimension/Chart.tsx b/src/pages/app/components/Analysis/components/Trend/Dimension/Chart.tsx index 090211f38..7b9c4e087 100644 --- a/src/pages/app/components/Analysis/components/Trend/Dimension/Chart.tsx +++ b/src/pages/app/components/Analysis/components/Trend/Dimension/Chart.tsx @@ -5,9 +5,10 @@ * https://opensource.org/licenses/MIT */ -import { type DimensionEntry, type ValueFormatter } from "@app/components/Analysis/util" -import { useEcharts } from "@hooks/useEcharts" -import { defineComponent, watch } from "vue" +import type { DimensionEntry } from '@app/components/Analysis/types' +import type { ValueFormatter } from '@app/components/common/kanban/types' +import { useEcharts } from '@hooks' +import { defineComponent } from "vue" import Wrapper from "./Wrapper" type Props = { @@ -18,14 +19,15 @@ type Props = { } const _default = defineComponent(props => { - const { elRef, refresh } = useEcharts(Wrapper, () => ({ + const { elRef } = useEcharts(Wrapper, () => ({ entries: props.data, preEntries: props.previous, title: props.title, valueFormatter: props.valueFormatter, - })) + }), { + deps: [() => props.data, () => props.valueFormatter], + }) - watch([() => props.data, () => props.valueFormatter], refresh) return () =>
}, { props: ['data', 'previous', 'title', 'valueFormatter'] }) diff --git a/src/pages/app/components/Analysis/components/Trend/Dimension/Wrapper.ts b/src/pages/app/components/Analysis/components/Trend/Dimension/Wrapper.ts index fbf4efddc..990377ac9 100644 --- a/src/pages/app/components/Analysis/components/Trend/Dimension/Wrapper.ts +++ b/src/pages/app/components/Analysis/components/Trend/Dimension/Wrapper.ts @@ -5,19 +5,15 @@ * https://opensource.org/licenses/MIT */ -import { type ValueFormatter } from "@app/components/Analysis/util" -import { getLineSeriesPalette, tooltipDot, tooltipFlexLine } from "@app/util/echarts" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getRegularTextColor } from "@pages/util/style" -import { type LineSeriesOption } from "echarts/charts" -import { - type GridComponentOption, - type TitleComponentOption, - type TooltipComponentOption, -} from "echarts/components" -import { type ComposeOption } from "echarts/core" -import { type TopLevelFormatterParams } from "echarts/types/dist/shared" -import { type DimensionEntry } from "../../../util" +import type { DimensionEntry } from '@app/components/Analysis/types' +import type { ValueFormatter } from '@app/components/common/kanban/types' +import { getLineSeriesPalette, tooltipDot, tooltipFlexLine } from '@app/util/echarts' +import { EchartsWrapper } from '@hooks' +import { getRegularTextColor } from '@pages/util/style' +import type { + ComposeOption, GridComponentOption, LineSeriesOption, TitleComponentOption, TooltipComponentOption, +} from "echarts" +import type { TopLevelFormatterParams } from "echarts/types/dist/shared" type EcOption = ComposeOption< | LineSeriesOption @@ -104,7 +100,7 @@ const generateOption = ({ entries, preEntries, title, valueFormatter }: BizOptio showSymbol: false, smooth: true, lineStyle: { width: prevExistData ? 0 : 1 }, - color: PREV_COLOR.colorStops[0].color, + color: PREV_COLOR.colorStops?.[0]?.color, areaStyle: { opacity: .5, color: PREV_COLOR }, emphasis: { focus: "self" }, }, { @@ -113,7 +109,7 @@ const generateOption = ({ entries, preEntries, title, valueFormatter }: BizOptio showSymbol: false, smooth: true, lineStyle: { width: thisExistData ? 0 : 1 }, - color: THIS_COLOR.colorStops[0].color, + color: THIS_COLOR.colorStops[0]?.color, areaStyle: { color: THIS_COLOR }, emphasis: { focus: "series" }, }] diff --git a/src/pages/app/components/Analysis/components/Trend/Dimension/index.tsx b/src/pages/app/components/Analysis/components/Trend/Dimension/index.tsx index 20af5eb1b..6026393e1 100644 --- a/src/pages/app/components/Analysis/components/Trend/Dimension/index.tsx +++ b/src/pages/app/components/Analysis/components/Trend/Dimension/index.tsx @@ -4,25 +4,22 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { formatValue, type DimensionEntry, type RingValue, type ValueFormatter } from "@app/components/Analysis/util" +import type { DimensionData } from '@app/components/Analysis/types' +import { formatValue } from "@app/components/Analysis/util" import { GRID_CELL_STYLE } from '@app/components/common/grid' -import { KanbanIndicatorCell } from "@app/components/common/kanban" -import { cvt2LocaleTime } from "@app/util/time" -import { useXsState } from "@hooks" +import { KanbanIndicatorCell } from '@app/components/common/kanban' +import type { RingValue, ValueFormatter } from '@app/components/common/kanban/types' +import { cvt2LocaleTime } from '@app/util/time' +import { useXsState } from '@hooks' import Box from "@pages/components/Box" import Flex from "@pages/components/Flex" import { defineComponent } from "vue" import Chart from "./Chart" -export type DimensionData = { - thisPeriod: DimensionEntry[] - previousPeriod: DimensionEntry[] -} - type Props = { - maxLabel?: string + maxLabel: string maxValue?: number - averageLabel?: string + averageLabel: string maxDate?: string average?: RingValue data?: DimensionData diff --git a/src/pages/app/components/Analysis/components/Trend/Filter.tsx b/src/pages/app/components/Analysis/components/Trend/Filter.tsx index 2750f188a..82433d9c2 100644 --- a/src/pages/app/components/Analysis/components/Trend/Filter.tsx +++ b/src/pages/app/components/Analysis/components/Trend/Filter.tsx @@ -7,24 +7,17 @@ import DateRangeFilterItem from '@app/components/common/filter/DateRangeFilterItem' import { t } from "@app/locale" -import { type ElementDatePickerShortcut } from "@pages/element-ui/date" +import type { ElDatePickerShortcut } from "@pages/element-ui/types" import { daysAgo } from "@util/time" import { defineComponent } from "vue" import { useAnalysisTrendDateRange } from "./context" -function datePickerShortcut(agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut { - return { - text: t(msg => msg.calendar.range.lastDays, { n: agoOfStart }), - value: daysAgo((agoOfStart ?? 0) - 1 || 0, agoOfEnd || 0), - } -} +const shortcut = (agoOfStart: number): ElDatePickerShortcut => ({ + text: t(msg => msg.calendar.range.lastDays, { n: agoOfStart }), + value: daysAgo(agoOfStart - 1, 0), +}) -const SHORTCUTS = [ - datePickerShortcut(7), - datePickerShortcut(15), - datePickerShortcut(30), - datePickerShortcut(90), -] +const SHORTCUTS = [7, 15, 30, 90].map(shortcut) const _default = defineComponent(() => { const dateRange = useAnalysisTrendDateRange() diff --git a/src/pages/app/components/Analysis/components/Trend/Total.tsx b/src/pages/app/components/Analysis/components/Trend/Total.tsx index 232bed63d..9b12f3489 100644 --- a/src/pages/app/components/Analysis/components/Trend/Total.tsx +++ b/src/pages/app/components/Analysis/components/Trend/Total.tsx @@ -5,15 +5,15 @@ * https://opensource.org/licenses/MIT */ -import type { RingValue } from "@app/components/Analysis/util" -import { KanbanIndicatorCell } from "@app/components/common/kanban" +import { useAnalysisTimeFormat } from '@app/components/Analysis/context' +import { GRID_CELL_STYLE } from '@app/components/common/grid' +import { KanbanIndicatorCell } from '@app/components/common/kanban' +import type { RingValue } from '@app/components/common/kanban/types' import { t } from "@app/locale" -import { periodFormatter } from "@app/util/time" +import { periodFormatter } from '@app/util/time' import Flex from "@pages/components/Flex" -import { defineComponent, StyleValue } from "vue" -import { useAnalysisTimeFormat } from "../../context" -import { useAnalysisTrendRangeLength } from "./context" -import { GRID_CELL_STYLE } from "../../../common/grid" +import { defineComponent, type CSSProperties } from "vue" +import { useAnalysisTrendRangeLength } from './context' const computeDayValue = (activeDay: RingValue | undefined, rangeLength: number) => { const thisActiveDay = activeDay?.[0] @@ -22,7 +22,7 @@ const computeDayValue = (activeDay: RingValue | undefined, rangeLength: number) type Props = Record<'activeDay' | 'visit' | 'focus', RingValue> -const INDICATOR_CONTAINER_STYLE: StyleValue = { +const INDICATOR_CONTAINER_STYLE: CSSProperties = { ...GRID_CELL_STYLE, flex: 1, width: '100%', } diff --git a/src/pages/app/components/Analysis/components/Trend/context.ts b/src/pages/app/components/Analysis/components/Trend/context.ts index 627927053..33b79937b 100644 --- a/src/pages/app/components/Analysis/components/Trend/context.ts +++ b/src/pages/app/components/Analysis/components/Trend/context.ts @@ -5,17 +5,16 @@ * https://opensource.org/licenses/MIT */ -import { cvt2LocaleTime } from "@app/util/time" -import { useProvide, useProvider } from "@hooks" +import { useAnalysisRows } from '@app/components/Analysis/context' +import type { DimensionData, DimensionEntry } from '@app/components/Analysis/types' +import { cvt2LocaleTime } from '@app/util/time' +import { useProvide, useProvider } from '@hooks' import { toMap } from "@util/array" import { daysAgo, getAllDatesBetween, getDayLength, MILL_PER_DAY } from "@util/time" import { computed, onMounted, ref, watch, type Ref } from "vue" -import { useAnalysisRows } from "../../context" -import type { DimensionEntry } from "../../util" -import type { DimensionData } from "./Dimension" type Context = { - dateRange: Ref<[Date, Date]> + dateRange: Ref<[Date?, Date?]> rangeLength: Ref } @@ -38,7 +37,7 @@ type IndicatorSet = Record] { +): [IndicatorSet | undefined, Record] { const [start, end] = dateRange || [] const allDates = start && end ? getAllDatesBetween(start, end) : [] if (!rows) { @@ -68,10 +67,11 @@ function computeIndicatorSet( focusMax = visitMax = { date: undefined, value: undefined } activeDay = focusTotal = visitTotal = 0 - const fullPeriodRow: Record = {} + const fullPeriodRow: Record = {} allDates.forEach(date => { const row = periodRowMap[date] - if (!(fullPeriodRow[date] = row)) return + if (!row) return + fullPeriodRow[date] = row const { focus, time: visit } = row focus > (focusMax.value ?? Number.MIN_SAFE_INTEGER) && (focusMax = { value: focus, date }) visit > (visitMax.value ?? Number.MIN_SAFE_INTEGER) && (visitMax = { value: visit, date }) diff --git a/src/pages/app/components/Analysis/components/Trend/index.tsx b/src/pages/app/components/Analysis/components/Trend/index.tsx index 3f7850dfb..1bfe7493c 100644 --- a/src/pages/app/components/Analysis/components/Trend/index.tsx +++ b/src/pages/app/components/Analysis/components/Trend/index.tsx @@ -4,14 +4,14 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ +import { useAnalysisTimeFormat } from '@app/components/Analysis/context' import { GRID_WRAPPER_STYLE } from '@app/components/common/grid' -import { KanbanCard } from "@app/components/common/kanban" -import { t } from "@app/locale" -import { periodFormatter } from "@app/util/time" +import { KanbanCard } from '@app/components/common/kanban' import { useXsState } from "@hooks" +import { t } from "@app/locale" +import { periodFormatter } from '@app/util/time' import Flex from "@pages/components/Flex" import { defineComponent } from "vue" -import { useAnalysisTimeFormat } from '../../context' import { initAnalysisTrend } from "./context" import Dimension from "./Dimension" import Filter from "./Filter" @@ -25,10 +25,7 @@ const _default = defineComponent(() => { const isXs = useXsState() return () => ( - msg.analysis.trend.title)} - v-slots={{ filter: () => }} - > + msg.analysis.trend.title} v-slots={{ filter: () => }}> - timeFormat: Ref - rows: Ref -} - -export type AnalysisQuery = Partial & { - cateId?: string + timeFormat: Ref + rows: Ref } function parseQuery(): AnalysisTarget | undefined { // Process the query param - const query = useRoute().query as unknown as AnalysisQuery + const query = useRoute().query as unknown as AppAnalysisQuery useRouter().replace({ query: {} }) - const { host, type: siteType, cateId } = query + const { host, type: siteType, cateId, url } = query if (cateId) return { type: 'cate', key: parseInt(cateId) } if (host && siteType) return { type: 'site', key: { host, type: siteType } } + if (url) return { type: 'site', key: { host: extractHostname(url).host, type: 'normal' } } return undefined } -async function queryRows(target: AnalysisTarget | undefined): Promise<(timer.stat.CateRow | timer.stat.SiteRow)[]> { +async function queryRows(target: AnalysisTarget | undefined): Promise<(tt4b.stat.CateRow | tt4b.stat.SiteRow)[]> { const { key, type } = target ?? {} if (!key) return [] if (type === 'cate') { - return statService.selectCate({ cateIds: [key], sortKey: 'date' }) + return await listCateStats({ cateIds: [key], sortKey: 'date' }) } else if (type === 'site') { - const { host, type: siteType } = key ?? {} - return statService.selectSite({ host, mergeHost: siteType === 'merged', sortKey: 'date' }) + const { host, type: siteType } = key + return await listSiteStats({ host, mergeHost: siteType === 'merged', sortKey: 'date' }) } else { // Not supported yet return [] @@ -51,9 +51,9 @@ const NAMESPACE = 'siteAnalysis' export const initAnalysis = () => { const target = ref(parseQuery()) - const [cachedFormat, setFormatCache] = useLocalStorage('analysis_timeFormat') - const timeFormat = ref(cachedFormat ?? 'default') - watch(timeFormat, setFormatCache) + const [cached, setCached] = useLocalStorage('analysis_timeFormat', isTimeFormat, 'default') + const timeFormat = ref(cached) + watch(timeFormat, setCached) const { data: rows, loading } = useRequest(() => queryRows(target.value), { deps: target, defaultValue: [] }) useProvide(NAMESPACE, { target, timeFormat, rows }) diff --git a/src/pages/app/components/Analysis/index.tsx b/src/pages/app/components/Analysis/index.tsx index 9adc71a13..9e18ea393 100644 --- a/src/pages/app/components/Analysis/index.tsx +++ b/src/pages/app/components/Analysis/index.tsx @@ -6,7 +6,7 @@ */ import { ElScrollbar } from "element-plus" import { defineComponent, type StyleValue } from "vue" -import ContentContainer, { FilterContainer } from "../common/ContentContainer" +import ContentContainer, { FilterContainer } from '../common/ContentContainer' import AnalysisFilter from "./components/AnalysisFilter" import Summary from "./components/Summary" import Trend from "./components/Trend" diff --git a/src/pages/app/components/Analysis/types.d.ts b/src/pages/app/components/Analysis/types.d.ts index 9bbe6135e..56fbcd80b 100644 --- a/src/pages/app/components/Analysis/types.d.ts +++ b/src/pages/app/components/Analysis/types.d.ts @@ -1,7 +1,17 @@ export type AnalysisTarget = { type: 'site' - key: timer.site.SiteInfo + key: tt4b.site.SiteInfo } | { type: 'cate' key: number -} \ No newline at end of file +} + +export type DimensionEntry = { + date: string + value: number +} + +export type DimensionData = { + thisPeriod: DimensionEntry[] + previousPeriod: DimensionEntry[] +} diff --git a/src/pages/app/components/Analysis/util.ts b/src/pages/app/components/Analysis/util.ts index 2d5e0a6d9..28ca91b89 100644 --- a/src/pages/app/components/Analysis/util.ts +++ b/src/pages/app/components/Analysis/util.ts @@ -6,11 +6,12 @@ */ import { t } from "@app/locale" +import type { ValueFormatter } from '../common/kanban/types' /** * Transfer host info to label */ -export function labelOfHostInfo(site: timer.site.SiteKey | undefined): string { +export function labelOfHostInfo(site: tt4b.site.SiteKey | undefined): string { if (!site) return '' const { host, type } = site if (!host) return '' @@ -20,38 +21,5 @@ export function labelOfHostInfo(site: timer.site.SiteKey | undefined): string { return `${host}${label}` } -export type RingValue = [ - current?: number, - last?: number, -] - -/** - * Compute ring text - * - * @param ring ring value - * @param formatter formatter - * @returns text or '-' - */ -export function computeRingText(ring: RingValue, formatter?: ValueFormatter): string { - if (!ring) { - return '' - } - const [current, last] = ring - if (current === undefined && last === undefined) { - // return undefined if both are undefined - return '' - } - const delta = (current || 0) - (last || 0) - let result = formatter ? formatter(delta) : delta?.toString() - delta >= 0 && (result = '+' + result) - return result -} - -export type ValueFormatter = (val: number | undefined) => string export const formatValue = (val: number | undefined, formatter?: ValueFormatter) => formatter ? formatter(val) : val?.toString() || '-' - -export type DimensionEntry = { - date: string - value: number -} \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/ChartTitle.tsx b/src/pages/app/components/Dashboard/ChartTitle.tsx index 9962c386e..f04baf993 100644 --- a/src/pages/app/components/Dashboard/ChartTitle.tsx +++ b/src/pages/app/components/Dashboard/ChartTitle.tsx @@ -1,12 +1,10 @@ -import { defineComponent, h, useSlots } from "vue" +import Box from '@pages/components/Box' +import type { FunctionalComponent } from "vue" -const _default = defineComponent<{ text?: string }>(props => { - const { default: textSlot } = useSlots() - return () => ( -
- {textSlot ? h(textSlot) : {props.text ?? ''}} -
- ) -}, { props: ['text'] }) +const _default: FunctionalComponent<{ text?: string }> = ({ text }, { slots }) => ( + + {slots.default?.() ?? {text ?? '-'}} + +) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/DashboardCard.tsx b/src/pages/app/components/Dashboard/DashboardCard.tsx index 10206fff7..7e2f5698b 100644 --- a/src/pages/app/components/Dashboard/DashboardCard.tsx +++ b/src/pages/app/components/Dashboard/DashboardCard.tsx @@ -5,22 +5,30 @@ * https://opensource.org/licenses/MIT */ +import { cvtPxScale } from '@pages/components/common' import { ElCard, ElCol } from "element-plus" -import type { FunctionalComponent, StyleValue } from "vue" +import type { CSSProperties, FunctionalComponent, StyleValue } from "vue" -type Props = { +export type DashboardCardProps = { span: number - height?: number + height?: CSSProperties['height'] + bodyHeight?: CSSProperties['height'] } -const DashboardCard: FunctionalComponent = ({ span, height }, ctx) => ( +const DashboardCard: FunctionalComponent = ({ span, height, bodyHeight }, ctx) => ( diff --git a/src/pages/app/components/Dashboard/components/Calendar/Wrapper.ts b/src/pages/app/components/Dashboard/components/Calendar/Wrapper.ts index 8441ab945..46462517f 100644 --- a/src/pages/app/components/Dashboard/components/Calendar/Wrapper.ts +++ b/src/pages/app/components/Dashboard/components/Calendar/Wrapper.ts @@ -4,23 +4,19 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ +import { getWeekStartDay } from "@api/sw/option" import { t } from "@app/locale" -import { getStepColors } from "@app/util/echarts" -import { cvt2LocaleTime } from "@app/util/time" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getPrimaryTextColor } from "@pages/util/style" -import weekHelper from "@service/components/week-helper" +import { getStepColors } from '@app/util/echarts' +import { cvt2LocaleTime } from '@app/util/time' +import { EchartsWrapper } from "@hooks" +import { getPrimaryTextColor } from '@pages/util/style' import { groupBy, rotate } from "@util/array" import { formatPeriodCommon, getAllDatesBetween, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time" -import { - type ComposeOption, - type GridComponentOption, - type HeatmapSeriesOption, - type ScatterSeriesOption, - type TooltipComponentOption, - type VisualMapComponentOption, +import type { + ComposeOption, GridComponentOption, HeatmapSeriesOption, ScatterSeriesOption, TooltipComponentOption, + VisualMapComponentOption, } from "echarts" -import { TopLevelFormatterParams } from "echarts/types/dist/shared" +import type { TopLevelFormatterParams } from "echarts/types/dist/shared" export type ChartValue = [ x: number, @@ -53,19 +49,15 @@ function getXAxisLabelMap(data: ChartValue[]): { [x: string]: string } { const result: Record = {} // {[ x:string ]: Set } const xAndMonthMap = groupBy(data, e => e[0], grouped => new Set(grouped.map(a => a[3].substring(4, 6)))) - let lastMonth: string + let lastMonth: string | undefined Object.entries(xAndMonthMap).forEach(([x, monthSet]) => { - if (monthSet.size != 1) { - return - } + if (monthSet.size != 1) return const currentMonth = Array.from(monthSet)[0] - if (currentMonth === lastMonth) { - return - } + if (!currentMonth || currentMonth === lastMonth) return lastMonth = currentMonth const monthNum = parseInt(currentMonth) const label = allMonthLabel[monthNum - 1] - result[x] = label + label && (result[x] = label) }) return result } @@ -127,8 +119,8 @@ function optionOf(data: ChartValue[], weekDays: string[], dom: HTMLElement): EcO borderWidth: 0, formatter: (params: TopLevelFormatterParams) => { const param = Array.isArray(params) ? params[0] : params - const { data } = param - const { value } = data as any + const { data } = param ?? {} + const { value } = data as any ?? {} const [_1, _2, mills, date] = value return mills ? formatTooltip(mills as number, date) : '' }, @@ -191,7 +183,7 @@ class Wrapper extends EchartsWrapper { data.push([x, y, dailyMills, date]) }) const weekDays = (t(msg => msg.calendar.weekDays)?.split?.('|') || []).reverse() - const weekStart = await weekHelper.getRealWeekStart() + const weekStart = await getWeekStartDay() weekStart && rotate(weekDays, weekStart, true) return optionOf(data, weekDays, this.getDom()) } diff --git a/src/pages/app/components/Dashboard/components/Calendar/index.tsx b/src/pages/app/components/Dashboard/components/Calendar/index.tsx index b45524048..8da120db3 100644 --- a/src/pages/app/components/Dashboard/components/Calendar/index.tsx +++ b/src/pages/app/components/Dashboard/components/Calendar/index.tsx @@ -6,19 +6,17 @@ */ import { createTabAfterCurrent } from "@api/chrome/tab" -import type { ReportQueryParam } from "@app/components/Report/types" +import { getWeekStartTime } from '@api/sw/option' +import { listSiteStats } from '@api/sw/stat' +import ChartTitle from '@app/components/Dashboard/ChartTitle' import { t } from "@app/locale" -import { REPORT_ROUTE } from "@app/router/constants" -import { useRequest } from "@hooks" -import { useEcharts } from "@hooks/useEcharts" +import { RECORD_ROUTE, type RecordQuery } from '@app/router/constants' +import { useEcharts, useRequest } from "@hooks" import Flex from "@pages/components/Flex" -import weekHelper from "@service/components/week-helper" -import statService from "@service/stat-service" import { groupBy, sum } from "@util/array" import { getAppPageUrl } from "@util/constant/url" -import { formatTimeYMD, MILL_PER_DAY, MILL_PER_HOUR } from "@util/time" +import { cvtDateRange2Str, formatTimeYMD, MILL_PER_DAY, MILL_PER_HOUR } from "@util/time" import { computed, defineComponent } from "vue" -import ChartTitle from "../../ChartTitle" import Wrapper, { type BizOption, type ChartValue } from "./Wrapper" const titleText = (option: Result | undefined) => { @@ -38,19 +36,15 @@ type Result = BizOption & { yearAgo: Date } const fetchData = async (): Promise => { const endTime = new Date() - const yearAgo = new Date(endTime.getTime() - MILL_PER_DAY * 365) - const [startTime] = await weekHelper.getWeekDate(yearAgo) - const items = await statService.selectSite({ date: [startTime, endTime], sortKey: 'date' }) - const value = groupBy( - items, - i => i.date, - list => sum(list?.map(i => i.focus ?? 0)) - ) - return { value, startTime, endTime, yearAgo } + const yearAgo = endTime.getTime() - MILL_PER_DAY * 365 + const startTime = await getWeekStartTime(yearAgo) + const items = await listSiteStats({ date: cvtDateRange2Str([startTime, endTime]), sortKey: 'date' }) + const value = groupBy(items, i => i.date, list => sum(list.map(i => i.focus))) + return { value, startTime, endTime, yearAgo: new Date(yearAgo) } } /** - * Click to jump to the report page + * Click to jump to the record page * * @since 1.1.1 */ @@ -64,9 +58,8 @@ function handleClick(value: ChartValue): void { const currentMonth = parseInt(currentDate.substring(4, 6)) - 1 const currentDay = parseInt(currentDate.substring(6, 8)) const currentTs = (new Date(currentYear, currentMonth, currentDay).getTime() + 1000).toString() - const query: ReportQueryParam = { ds: currentTs, de: currentTs } - const url = getAppPageUrl(REPORT_ROUTE, query) + const url = getAppPageUrl(RECORD_ROUTE, { ds: currentTs, de: currentTs } satisfies RecordQuery) createTabAfterCurrent(url) } diff --git a/src/pages/app/components/Dashboard/components/Indicator.tsx b/src/pages/app/components/Dashboard/components/Indicator.tsx index d57c5a20f..5f42fca1c 100644 --- a/src/pages/app/components/Dashboard/components/Indicator.tsx +++ b/src/pages/app/components/Dashboard/components/Indicator.tsx @@ -5,57 +5,66 @@ * https://opensource.org/licenses/MIT */ -import NumberGrow from "@app/components/common/NumberGrow" +import { listPeriods } from "@api/sw/period" +import { listSiteStats } from "@api/sw/stat" import { tN, type I18nKey } from "@app/locale" -import periodDatabase from "@db/period-database" import { Sunrise } from "@element-plus/icons-vue" import { useRequest, useXsState } from "@hooks" import Flex from "@pages/components/Flex" -import statService from "@service/stat-service" -import { calcMostPeriodOf2Hours } from "@util/period" -import { getStartOfDay, MILL_PER_DAY, MILL_PER_MINUTE } from "@util/time" -import { ElIcon } from "element-plus" +import { groupBy, sum } from '@util/array' +import { getStartOfDay, MILL_PER_DAY, MILL_PER_HOUR, MILL_PER_MINUTE } from "@util/time" +import { ElIcon, ElScrollbar } from "element-plus" import { computed, defineComponent, toRef, type VNode } from "vue" +import NumberGrow from "./NumberGrow" type _Value = { installedDays?: number sites: number visits: number browsingTime: number - most2Hour: number + busiestClock: number | undefined } /** * @return days used */ function calculateInstallDays(installTime: Date, now: Date): number { - const deltaMills = getStartOfDay(now).getTime() - getStartOfDay(installTime).getTime() + const deltaMills = getStartOfDay(now) - getStartOfDay(installTime) return Math.round(deltaMills / MILL_PER_DAY) } +function calcBusiestClock(rows: tt4b.period.Row[]): number | undefined { + const map = groupBy(rows, + ({ startTime }) => startTime - getStartOfDay(startTime), + list => sum(list.map(e => e.milliseconds)) + ) + const maxOffsetStr = Object.entries(map).sort((a, b) => b[1] - a[1])[0]?.[0] + if (maxOffsetStr === undefined) return undefined + return Math.floor(Number.parseInt(maxOffsetStr) / MILL_PER_HOUR) +} + async function query(): Promise<_Value> { - const allData = await statService.selectSite() + const allData = await listSiteStats() const hostSet = new Set() let visits = 0 let browsingTime = 0 - allData.forEach(({ siteKey, focus, time }) => { - const { host } = siteKey || {} - host && hostSet.add(host) + allData.forEach(({ siteKey: { host }, focus, time }) => { + hostSet.add(host) visits += time browsingTime += focus }) - const periodInfos: timer.period.Result[] = await periodDatabase.getAll() - const most2Hour = calcMostPeriodOf2Hours(periodInfos) + const periods = await listPeriods({ size: 8 }) + const busiestClock = calcBusiestClock(periods) const result: _Value = { - sites: hostSet?.size || 0, + sites: hostSet.size, visits, browsingTime, - most2Hour + busiestClock, } // 2. if not exist, calculate from all data items - const firstDate = allData.map(a => a.date).filter(d => d?.length === 8).sort()[0] + const firstDate = allData.map(a => a.date).filter(d => d.length === 8).sort()[0] if (firstDate) { const year = parseInt(firstDate.substring(0, 4)) const month = parseInt(firstDate.substring(4, 6)) - 1 @@ -89,10 +98,10 @@ const IndicatorLabel = defineComponent(props => { }, { props: ['path', 'param', 'duration'] }) const computeMost2HourParam = (value: _Value | undefined): { start: number, end: number } => { - const most2HourIndex = value?.most2Hour - const [start, end] = most2HourIndex === undefined || isNaN(most2HourIndex) + const { busiestClock } = value ?? {} + const [start, end] = busiestClock === undefined || isNaN(busiestClock) ? [0, 0] - : [most2HourIndex * 2, most2HourIndex * 2 + 2] + : [busiestClock, busiestClock + 2] return { start, end } } @@ -102,34 +111,36 @@ const _default = defineComponent(() => { const most2HourParam = computed(() => computeMost2HourParam(data.value)) return () => ( - - - - - + + + + + + + + msg.dashboard.indicator.installedDays} + param={{ number: data.value?.installedDays || 0 }} + duration={1.5} + /> + msg.dashboard.indicator.visitCount} + param={{ visit: data.value?.visits || 0, site: data.value?.sites || 0 }} + duration={1.75} + /> + msg.dashboard.indicator.browsingTime} + param={{ minute: Math.floor((data.value?.browsingTime || 0) / MILL_PER_MINUTE) }} + duration={2} + /> + msg.dashboard.indicator.mostUse} + param={most2HourParam.value} + duration={2.25} + /> - msg.dashboard.indicator.installedDays} - param={{ number: data.value?.installedDays || 0 }} - duration={1.5} - /> - msg.dashboard.indicator.visitCount} - param={{ visit: data.value?.visits || 0, site: data.value?.sites || 0 }} - duration={1.75} - /> - msg.dashboard.indicator.browsingTime} - param={{ minute: Math.floor((data.value?.browsingTime || 0) / MILL_PER_MINUTE) }} - duration={2} - /> - msg.dashboard.indicator.mostUse} - param={most2HourParam.value} - duration={2.25} - /> - + ) }) diff --git a/src/pages/app/components/Dashboard/components/MonthOnMonth/Wrapper.ts b/src/pages/app/components/Dashboard/components/MonthOnMonth/Wrapper.ts index 02472e477..1bb685ffb 100644 --- a/src/pages/app/components/Dashboard/components/MonthOnMonth/Wrapper.ts +++ b/src/pages/app/components/Dashboard/components/MonthOnMonth/Wrapper.ts @@ -1,15 +1,11 @@ import { getCompareColor, getDiffColor, tooltipDot } from "@app/util/echarts" -import { cvt2LocaleTime } from "@app/util/time" -import { EchartsWrapper } from "@hooks/useEcharts" +import { cvt2LocaleTime } from '@app/util/time' +import { EchartsWrapper } from "@hooks" import { formatPeriodCommon } from "@util/time" -import { - type BarSeriesOption, - type ComposeOption, - type GridComponentOption, - type LegendComponentOption, - type TooltipComponentOption, +import type { + BarSeriesOption, ComposeOption, GridComponentOption, LegendComponentOption, TooltipComponentOption, } from "echarts" -import { type TopLevelFormatterParams } from "echarts/types/dist/shared" +import type { TopLevelFormatterParams } from "echarts/types/dist/shared" type EcOption = ComposeOption< | BarSeriesOption @@ -38,9 +34,9 @@ function optionOf(lastPeriodItems: Row[], thisPeriodItems: Row[], domWidth: numb const [thisColor, lastColor] = params.map(v => v.color) const { date: thisDate, total: thisVal } = thisItem || {} const { date: lastDate, total: lastVal } = lastItem || {} - const lastStr = `${tooltipDot(lastColor as string)} ${cvt2LocaleTime(lastDate)} ${formatPeriodCommon(lastVal)}` - let thisStr = `${tooltipDot(thisColor as string)} ${cvt2LocaleTime(thisDate)} ${formatPeriodCommon(thisVal)}` - if (lastVal) { + const lastStr = `${tooltipDot(lastColor as string)} ${cvt2LocaleTime(lastDate)} ${formatPeriodCommon(lastVal ?? 0)}` + let thisStr = `${tooltipDot(thisColor as string)} ${cvt2LocaleTime(thisDate)} ${formatPeriodCommon(thisVal ?? 0)}` + if (lastVal && thisVal) { const delta = (thisVal - lastVal) / lastVal * 100 let deltaStr = delta.toFixed(1) + '%' if (delta >= 0) deltaStr = '+' + deltaStr @@ -78,7 +74,7 @@ function optionOf(lastPeriodItems: Row[], thisPeriodItems: Row[], domWidth: numb barCategoryGap: `${domWidth < 500 ? 30 : 55}%`, itemStyle: { color: color1 }, data: thisPeriodItems.map((row, idx) => { - const otherIsEmpty = lastPeriodItems[idx].total === 0 + const otherIsEmpty = !lastPeriodItems[idx]?.total return { value: row.total, row, itemStyle: { borderRadius: otherIsEmpty ? 10 : [10, 10, 0, 0] }, @@ -90,7 +86,7 @@ function optionOf(lastPeriodItems: Row[], thisPeriodItems: Row[], domWidth: numb type: 'bar', itemStyle: { color: color2 }, data: lastPeriodItems.map((row, idx) => { - const otherIsEmpty = thisPeriodItems[idx].total === 0 + const otherIsEmpty = !thisPeriodItems[idx]?.total return { value: -row.total, row, itemStyle: { borderRadius: otherIsEmpty ? 10 : [0, 0, 10, 10] }, diff --git a/src/pages/app/components/Dashboard/components/MonthOnMonth/index.tsx b/src/pages/app/components/Dashboard/components/MonthOnMonth/index.tsx index 05851d77b..5cc854b16 100644 --- a/src/pages/app/components/Dashboard/components/MonthOnMonth/index.tsx +++ b/src/pages/app/components/Dashboard/components/MonthOnMonth/index.tsx @@ -1,12 +1,12 @@ +import { listSiteStats } from "@api/sw/stat" +import ChartTitle from "@app/components/Dashboard/ChartTitle" import { t } from "@app/locale" -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from "@hooks" import Flex from "@pages/components/Flex" -import statService from "@service/stat-service" import { groupBy, sum } from "@util/array" import DateIterator from "@util/date-iterator" -import { MILL_PER_DAY } from "@util/time" +import { cvtDateRange2Str, MILL_PER_DAY } from "@util/time" import { defineComponent } from "vue" -import ChartTitle from "../../ChartTitle" import Wrapper from "./Wrapper" const PERIOD_WIDTH = 30 @@ -17,7 +17,7 @@ type Row = { total: number } -const cvtRow = (rows: timer.stat.Row[], start: Date, end: Date): Row[] => { +const cvtRow = (rows: tt4b.stat.Row[], start: Date, end: Date): Row[] => { const groupByDate = groupBy(rows, r => r.date, l => sum(l.map(e => e.focus ?? 0))) const iterator = new DateIterator(start, end) const result: Row[] = [] @@ -37,9 +37,9 @@ const fetchData = async (): Promise<[thisMonth: Row[], lastMonth: Row[]]> => { // Query with alias // @since 1.1.8 - const lastPeriodItems = await statService.selectSite({ date: [lastPeriodStart, lastPeriodEnd] }) + const lastPeriodItems = await listSiteStats({ date: cvtDateRange2Str([lastPeriodStart, lastPeriodEnd]) }) const lastRows = cvtRow(lastPeriodItems, lastPeriodStart, lastPeriodEnd) - const thisPeriodItems = await statService.selectSite({ date: [thisPeriodStart, thisPeriodEnd] }) + const thisPeriodItems = await listSiteStats({ date: cvtDateRange2Str([thisPeriodStart, thisPeriodEnd]) }) const thisRows = cvtRow(thisPeriodItems, thisPeriodStart, thisPeriodEnd) return [lastRows, thisRows] } diff --git a/src/pages/app/components/Dashboard/components/NumberGrow.tsx b/src/pages/app/components/Dashboard/components/NumberGrow.tsx new file mode 100644 index 000000000..25f71ee8c --- /dev/null +++ b/src/pages/app/components/Dashboard/components/NumberGrow.tsx @@ -0,0 +1,31 @@ +/** + * Copyright (c) 2022 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { useCountUp } from '@hooks' +import { tNum } from '@i18n' +import { computed, defineComponent, toRef } from "vue" + +type Props = { + value: number + duration?: number + fontSize?: number +} + +const NumberGrow = defineComponent(props => { + const value = toRef(props, 'value') + const { current } = useCountUp({ value, duration: props.duration }) + const text = computed(() => tNum(current.value)) + return () => {text.value} +}, { props: ['value', 'duration', 'fontSize'] }) + + +export default NumberGrow \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/components/Timeline/Chart/Wrapper.ts b/src/pages/app/components/Dashboard/components/Timeline/Chart/Wrapper.ts index 0df34d624..a3bb3ccb4 100644 --- a/src/pages/app/components/Dashboard/components/Timeline/Chart/Wrapper.ts +++ b/src/pages/app/components/Dashboard/components/Timeline/Chart/Wrapper.ts @@ -1,18 +1,22 @@ +import { t } from '@app/locale' import { getSeriesPalette, tooltipDot } from '@app/util/echarts' -import { EchartsWrapper } from '@hooks/useEcharts' +import { EchartsWrapper } from '@hooks' import { getPrimaryTextColor } from '@pages/util/style' import { groupBy, toMap } from '@util/array' -import { formatPeriodCommon, MILL_PER_DAY, MILL_PER_HOUR, MILL_PER_MINUTE, MILL_PER_SECOND } from '@util/time' +import { CATE_NOT_SET_ID } from '@util/site' import { - type ComposeOption, type CustomSeriesOption, type CustomSeriesRenderItem, - type DataZoomComponentOption, type GridComponentOption, type LegendComponentOption, type TooltipComponentOption + formatPeriodCommon, getStartOfDay, MILL_PER_DAY, MILL_PER_HOUR, MILL_PER_MINUTE, MILL_PER_SECOND +} from '@util/time' +import type { + ComposeOption, CustomSeriesOption, CustomSeriesRenderItem, DataZoomComponentOption, GridComponentOption, + LegendComponentOption, TooltipComponentOption, } from 'echarts' import { graphic } from "echarts/core" -import type { Activity, MergeMethod } from './useMerge' +import { formatYAxis } from '../common' export type BizData = { - activities: Activity[] - merge: MergeMethod + activities: tt4b.timeline.Activity[] + merge: tt4b.timeline.MergeMethod dates: string[] } @@ -30,18 +34,12 @@ type LegendInfo = { color: string } -type MyItem = { - // host - name: string - value: [ - yIndex: number, - // seconds - start: number, - // seconds - end: number, - duration: number, - ] -} +type MyValue = [ + yIndex: number, + start: number, // milliseconds, offset of this day + end: number, // milliseconds, offset of this day + duration: number, +] const formatTimeLabel = (val: number) => { let minute = Math.floor(val / MILL_PER_MINUTE) @@ -71,7 +69,7 @@ const formatDuration = (duration: number): string => { const LEGEND_WIDTH = 180 -const collectLegends = (activities: Activity[]): LegendInfo[] => { +const collectLegends = (activities: tt4b.timeline.Activity[], merge: tt4b.timeline.MergeMethod): LegendInfo[] => { const colors = getSeriesPalette() const colorLen = colors.length || 1 @@ -82,15 +80,24 @@ const collectLegends = (activities: Activity[]): LegendInfo[] => { .sort((a, b) => b[1] - a[1]) .map(([key], idx) => ({ name: key, - displayName: keyNameMap[key], - color: colors[idx % colorLen], - })) + displayName: merge === 'cate' && key === String(CATE_NOT_SET_ID) + ? t(msg => msg.shared.cate.notSet) + : keyNameMap[key], + color: colors[idx % colorLen] ?? '#000', + } satisfies LegendInfo)) +} + +type Cartesian2DCoordSys = { + x: number + y: number + width: number + height: number } const renderItem: CustomSeriesRenderItem = (params, api) => { const categoryIndex = api.value(0) - const start = api.coord([api.value(1), categoryIndex]) - const end = api.coord([api.value(2), categoryIndex]) + const [sX = 0, sY = 0] = api.coord([api.value(1), categoryIndex]) + const [eX = 0] = api.coord([api.value(2), categoryIndex]) const size = api.size?.([0, 1]) const height = ((Array.isArray(size) ? size[1] : size) ?? 0) * 0.6 @@ -98,10 +105,10 @@ const renderItem: CustomSeriesRenderItem = (params, api) => { const coordSys = params.coordSys as unknown as Cartesian2DCoordSys var rectShape = graphic.clipRectByRect({ - x: start[0], - y: start[1] - height / 2, - width: end[0] - start[0], - height: height + x: sX, + y: sY - height / 2, + width: eX - sX, + height }, { x: coordSys.x, y: coordSys.y, @@ -137,14 +144,20 @@ const generateSeries = (biz: BizData, legendColors: Record): EcO }, renderItem, selectedMode: true, - data: list.map(({ date, start, duration }) => ({ - value: [dates.indexOf(date), start, start + duration, duration], - })) + data: list.map(({ start, duration }) => { + const date = formatYAxis(start) + const dateIdx = dates.indexOf(date) + const dayStart = getStartOfDay(start) + const startOffset = start - dayStart + const endOffset = start + duration - dayStart + const value: MyValue = [dateIdx, startOffset, endOffset, duration] + return { value } + }) } }) } -const calcDataZoomDefaultRange = (activities: Activity[]): [start: number | undefined, end: number | undefined] => { +const calcDataZoomDefaultRange = (activities: tt4b.timeline.Activity[]): [start: number | undefined, end: number | undefined] => { if (!activities.length) return [undefined, undefined] let min = activities.map(a => a.start).reduce((a, b) => b < a ? b : a) let max = activities.map(({ start, duration }) => start + duration).reduce((a, b) => b > a ? b : a) @@ -158,6 +171,7 @@ const calcDataZoomDefaultRange = (activities: Activity[]): [start: number | unde class Wrapper extends EchartsWrapper { protected replaceSeries: boolean = true + protected isSizeSensitize: boolean = true protected async generateOption(bizData: BizData): Promise { const { dates, activities, merge } = bizData @@ -165,7 +179,7 @@ class Wrapper extends EchartsWrapper { const gridLeft = Math.min(Math.max(30, domWidth * .05), 60) const primaryTextColor = getPrimaryTextColor() - const legendData = collectLegends(activities) + const legendData = collectLegends(activities, merge) const legendNames = toMap(legendData, e => e.name, e => e.displayName) const legendColor = toMap(legendData, e => e.name, e => e.color) @@ -219,8 +233,8 @@ class Wrapper extends EchartsWrapper { formatter: params => { const color = (params as any)?.color ?? "#000" const param = Array.isArray(params) ? params[0] : params - const { value, seriesName } = param - const [_1, start, _2, duration] = value as MyItem['value'] + const { value, seriesName } = param ?? {} + const [_1, start, _2, duration] = value as MyValue const startStr = formatStart(start) const durStr = formatDuration(duration) return `${tooltipDot(color)} ${seriesName ? tooltipSeriesName(seriesName) : ''}` diff --git a/src/pages/app/components/Dashboard/components/Timeline/Chart/index.tsx b/src/pages/app/components/Dashboard/components/Timeline/Chart/index.tsx index 3008520dc..a259ff9db 100644 --- a/src/pages/app/components/Dashboard/components/Timeline/Chart/index.tsx +++ b/src/pages/app/components/Dashboard/components/Timeline/Chart/index.tsx @@ -7,22 +7,19 @@ import ChartTitle from '@app/components/Dashboard/ChartTitle' import { t } from '@app/locale' -import { TIMELINE_LIFE_CYCLE } from '@db/timeline-database' import { Collection, Files, Link } from '@element-plus/icons-vue' -import { useShadow } from '@hooks' -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from '@hooks' import Flex from "@pages/components/Flex" +import IconRadioGroup from '@pages/components/IconRadioGroup' import { type ECElementEvent, type ECharts } from "echarts/core" -import { ElIcon, ElRadioButton, ElRadioGroup } from 'element-plus' -import { computed, defineComponent } from "vue" -import { type JSX } from 'vue/jsx-runtime' -import Wrapper, { EcOption, type BizData } from './Wrapper' -import { useMerge, type MergeMethod } from './useMerge' +import { type Component, computed, defineComponent } from "vue" +import { TIMELINE_DAY_COUNT, useTimelineContext } from '../context' +import Wrapper, { BizData, EcOption } from './Wrapper' -const CHART_CONFIG: Record = { - none: , - domain: , - cate: , +const CHART_CONFIG: Record = { + none: Files, + domain: Link, + cate: Collection, } const extractLegendSelected = (legends: EcOption['legend']): Record => { @@ -55,14 +52,9 @@ const handleClick = (inst: ECharts, ev: ECElementEvent) => { seriesNames2Toggle.forEach(name => inst.dispatchAction({ type: "legendToggleSelect", name })) } -const TimelineChart = defineComponent<{ data: timer.timeline.Tick[] }>(props => { - const [myData] = useShadow(() => props.data) - const { merge, setMerge, activities, dates } = useMerge(myData) - const bizData = computed(() => ({ - activities: activities.value, - merge: merge.value, - dates, - })) +const TimelineChart = defineComponent<{}>(() => { + const { dates, activities, merge, setMerge } = useTimelineContext() + const bizData = computed(() => ({ dates, activities: activities.value, merge: merge.value })) const { elRef } = useEcharts(Wrapper, bizData, { afterInit: ew => { @@ -77,22 +69,19 @@ const TimelineChart = defineComponent<{ data: timer.timeline.Tick[] }>(props => - {t(msg => msg.dashboard.timeline.title, { n: TIMELINE_LIFE_CYCLE })} - - - - {Object.entries(CHART_CONFIG).map(([k, v]) => ( - - {v} - - ))} - + {t(msg => msg.dashboard.timeline.title, { n: TIMELINE_DAY_COUNT })} + setMerge(val as tt4b.timeline.MergeMethod)} + options={Object.entries(CHART_CONFIG).map(([value, icon]) => ({ value, icon }))} + /> - +
) -}, { props: ['data'] }) +}) export default TimelineChart \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/components/Timeline/Chart/useMerge.ts b/src/pages/app/components/Dashboard/components/Timeline/Chart/useMerge.ts deleted file mode 100644 index c7113b39e..000000000 --- a/src/pages/app/components/Dashboard/components/Timeline/Chart/useMerge.ts +++ /dev/null @@ -1,145 +0,0 @@ -import { useCategories } from '@app/context' -import { t } from '@app/locale' -import mergeRuleDatabase from '@db/merge-rule-database' -import siteDatabase from '@db/site-database' -import { TIMELINE_LIFE_CYCLE } from '@db/timeline-database' -import { useState } from '@hooks' -import CustomizedHostMergeRuler from '@service/components/host-merge-ruler' -import { toMap } from '@util/array' -import { CATE_NOT_SET_ID } from '@util/site' -import { formatTime, getAllDatesBetween, getStartOfDay, MILL_PER_DAY } from '@util/time' -import { onMounted, Ref, ref, watch } from 'vue' - -export type Activity = { - date: string - // offset of date (mills) - start: number - // mills - duration: number - // series - seriesKey: string - seriesName: string | undefined -} - -type ActivityInner = Omit - -export type MergeMethod = 'cate' | 'domain' | 'none' - -const isMergeMethod = (val: unknown): val is MergeMethod => { - return val === 'none' || val === 'domain' || val === 'cate' -} - -const MONTH_DATE_FORMAT = t(msg => msg.calendar.monthDateFormat) -const formatDate = (date: Date | number) => formatTime(date, MONTH_DATE_FORMAT) - -const calcOffsetOfDay = (ts: number) => { - const startOfDate = getStartOfDay(ts) - return ts - startOfDate.getTime() -} - -const genLatestDates = () => { - const now = new Date() - const start = new Date(now.getTime() - MILL_PER_DAY * (TIMELINE_LIFE_CYCLE - 1)) - return getAllDatesBetween(start, now, formatDate) -} - -async function mergeByDomain(ticks: timer.timeline.Tick[]): Promise { - // 1. merge all - const mergeRules = await mergeRuleDatabase.selectAll() - const merger = new CustomizedHostMergeRuler(mergeRules) - const allHosts = Array.from(new Set(ticks.map(t => t.host))) - const mergedMap = toMap(allHosts, h => h, h => merger.merge(h)) - - // 2. query all the merged sites' names - const allSiteKeys = Array.from(new Set(Object.values(mergedMap))) - .map((mergedHost) => ({ type: 'merged', host: mergedHost } satisfies timer.site.SiteKey)) - const allSites = await siteDatabase.getBatch(allSiteKeys) - const nameMap = toMap(allSites, s => s.host, s => s.alias) - - // 3. convert - return ticks.map(({ start, duration, host }) => { - const seriesKey = mergedMap[host] ?? host - return { - start, duration, - seriesKey, seriesName: nameMap[seriesKey], - } - }) -} - -async function mergeByCate(ticks: timer.timeline.Tick[], cateNameMap: Record): Promise { - // 1. query all the sites' category - const allSiteKeys = Array.from(new Set(ticks.map(t => t.host))) - .map(host => ({ type: 'normal', host } satisfies timer.site.SiteKey)) - const allSites = await siteDatabase.getBatch(allSiteKeys) - const siteCateMap = toMap(allSites, s => s.host, s => s.cate) - - // 2. convert - return ticks.map(({ start, duration, host }) => { - const cateId = siteCateMap[host] ?? CATE_NOT_SET_ID - return { - start, duration, - seriesKey: `${cateId}`, - seriesName: cateNameMap[cateId], - } - }) -} - -async function fillSiteName(ticks: timer.timeline.Tick[]): Promise { - // 1. query all the sites' names - const allSiteKeys = Array.from(new Set(ticks.map(t => t.host))) - .map(host => ({ type: 'normal', host } satisfies timer.site.SiteKey)) - const allSites = await siteDatabase.getBatch(allSiteKeys) - const nameMap = toMap(allSites, s => s.host, s => s.alias) - - // 2. convert - return ticks.map(({ start, duration, host }) => ({ - start, duration, - seriesKey: host, seriesName: nameMap[host], - })) -} - -async function handleMerge( - ticks: timer.timeline.Tick[], - merge: MergeMethod, - cateNameMap: Record, - dates: Set -): Promise { - let activities: ActivityInner[] = [] - if (merge === 'domain') { - activities = await mergeByDomain(ticks) - } else if (merge === 'cate') { - activities = await mergeByCate(ticks, cateNameMap) - } else { - activities = await fillSiteName(ticks) - } - const result: Activity[] = [] - activities.forEach(act => { - let actStart = act.start - const date = formatDate(actStart) - if (!dates.has(date)) return - - const start = calcOffsetOfDay(act.start) - result.push({ ...act, date, start }) - }) - return result -} - -export const useMerge = (ticks: Ref) => { - const dates = genLatestDates() - const merge = ref('none') - const { cateNameMap } = useCategories() - const setMerge = (val: unknown) => isMergeMethod(val) && (merge.value = val) - - const [activities, setActivities] = useState([]) - - const refreshActivities = async () => { - const newVal = await handleMerge(ticks.value, merge.value, cateNameMap.value, new Set(dates)) - setActivities(newVal) - } - - watch([ticks, merge, cateNameMap], refreshActivities) - - onMounted(refreshActivities) - - return { merge, setMerge, activities, dates } -} \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/components/Timeline/Summary.tsx b/src/pages/app/components/Dashboard/components/Timeline/Summary.tsx index 0aec23a29..2831e44bc 100644 --- a/src/pages/app/components/Dashboard/components/Timeline/Summary.tsx +++ b/src/pages/app/components/Dashboard/components/Timeline/Summary.tsx @@ -6,37 +6,33 @@ import { groupBy } from '@util/array' import { MILL_PER_HOUR, MILL_PER_MINUTE } from '@util/time' import { ElIcon, ElRate, ElText, ElTooltip } from 'element-plus' import { computed, defineComponent } from 'vue' - -type AnalysisResult = { - busy: number - focus: number -} +import { useTimelineContext } from './context' const MAX_SCORE = 5 -const defaultResult = (): AnalysisResult => ({ +const defaultResult = (): { busy: number, focus: number } => ({ busy: 1, focus: 1, }) -const computeSessionScore = (ticks: timer.timeline.Tick[], hourCount: number) => { +const computeSessionScore = (activities: tt4b.timeline.Activity[], hourCount: number) => { let continuousSessions = 0 - let currentSession: timer.timeline.Tick[] = [] + let currentSession: tt4b.timeline.Activity[] = [] - ticks.sort((a, b) => a.start - b.start).forEach(currentTick => { - if (!currentSession.length) { - currentSession.push(currentTick) + activities.sort((a, b) => a.start - b.start).forEach(current => { + const prev = currentSession[currentSession.length - 1] + if (!prev) { + currentSession.push(current) return } - const prevTick = currentSession[currentSession.length - 1] - const gap = currentTick.start - (prevTick.start + prevTick.duration) + const gap = current.start - (prev.start + prev.duration) if (gap <= MILL_PER_MINUTE * 3) { - currentSession.push(currentTick) + currentSession.push(current) } else { if (currentSession.length > 1) continuousSessions++ - currentSession = [currentTick] + currentSession = [current] } }) @@ -46,31 +42,31 @@ const computeSessionScore = (ticks: timer.timeline.Tick[], hourCount: number) => return Math.min(sessionDensity, MAX_SCORE) } -const analyze = (ticks: timer.timeline.Tick[]): AnalysisResult => { - if (!ticks.length) return defaultResult() +const analyze = (activities: tt4b.timeline.Activity[]): { busy: number, focus: number } => { + if (!activities.length) return defaultResult() - const minTime = ticks.map(t => t.start).sort((a, b) => a - b)[0]! - const maxTime = ticks.map(t => t.start + t.duration).sort((a, b) => b - a)[0]! + const minTime = activities.map(t => t.start).sort((a, b) => a - b)[0]! + const maxTime = activities.map(t => t.start + t.duration).sort((a, b) => b - a)[0]! const totalRange = maxTime - minTime - const totalActiveTime = ticks.reduce((sum, tick) => sum + tick.duration, 0) + const totalActiveTime = activities.reduce((sum, s) => sum + s.duration, 0) - // { hourStart: hosts } - const hourlyData = groupBy(ticks, + // { hourStart: distinct series keys } — same merge dimension as the chart + const hourlyData = groupBy(activities, t => Math.floor(t.start / MILL_PER_HOUR) * MILL_PER_HOUR, - l => new Set(l.map(t => t.host)), + l => new Set(l.map(t => t.seriesKey)), ) - // busyScore = timeDensity * 0.6 + hostCountPerHour * 0.4 + // busyScore = timeDensity * 0.6 + seriesCountPerHour * 0.4 const timeDensity = totalActiveTime / totalRange const timeDensityScore = Math.min(timeDensity / 0.3, MAX_SCORE) - const maxHostCount = Object.values(hourlyData).map(hosts => hosts.size).sort((a, b) => b - a)[0]! - const hostMaxScore = Math.min(maxHostCount / 4, MAX_SCORE) - const busy = timeDensityScore * 0.6 + hostMaxScore * 0.4 + const maxSeriesCount = Object.values(hourlyData).map(keys => keys.size).sort((a, b) => b - a)[0]! + const seriesMaxScore = Math.min(maxSeriesCount / 4, MAX_SCORE) + const busy = timeDensityScore * 0.6 + seriesMaxScore * 0.4 // focusScore = duration * 0.7 + session * 0.3 - const avgDuration = totalActiveTime / ticks.length + const avgDuration = totalActiveTime / activities.length const avgDurationScore = Math.min(avgDuration / (2 * MILL_PER_MINUTE), MAX_SCORE) - const sessionScore = computeSessionScore(ticks, Object.keys(hourlyData).length) + const sessionScore = computeSessionScore(activities, Object.keys(hourlyData).length) const focus = avgDurationScore * 0.7 + sessionScore * 0.3 return { busy, focus } @@ -95,23 +91,24 @@ const Score = defineComponent<{ score: number, label: string, desc: string }>(pr ) }, { props: ['desc', 'label', 'score'] }) -const Summary = defineComponent<{ data: timer.timeline.Tick[] }>(props => { - const ticks = computed(() => analyze(props.data)) +const Summary = defineComponent<{}>(() => { + const { activities } = useTimelineContext() + const scores = computed(() => analyze(activities.value)) return () => ( msg.dashboard.timeline.busyScore)} desc={t(msg => msg.dashboard.timeline.busyScoreDesc)} /> msg.dashboard.timeline.focusScore)} desc={t(msg => msg.dashboard.timeline.focusScoreDesc)} /> ) -}, { props: ['data'] }) +}) export default Summary \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/components/Timeline/common.ts b/src/pages/app/components/Dashboard/components/Timeline/common.ts new file mode 100644 index 000000000..5e157153b --- /dev/null +++ b/src/pages/app/components/Dashboard/components/Timeline/common.ts @@ -0,0 +1,5 @@ +import { t } from '@app/locale' +import { formatTime } from '@util/time' + +const MONTH_DATE_FORMAT = t(msg => msg.calendar.monthDateFormat) +export const formatYAxis = (date: Date | number) => formatTime(date, MONTH_DATE_FORMAT) \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/components/Timeline/context.ts b/src/pages/app/components/Dashboard/components/Timeline/context.ts new file mode 100644 index 000000000..66f6bd458 --- /dev/null +++ b/src/pages/app/components/Dashboard/components/Timeline/context.ts @@ -0,0 +1,38 @@ +import { sendMsg2Runtime } from '@api/sw/common' +import { useProvide, useProvider, useRequest, useState } from '@hooks' +import { getAllDatesBetween, getStartOfDay, MILL_PER_DAY } from '@util/time' +import { type ShallowRef } from 'vue' +import { formatYAxis } from './common' + +/** + * The days shown in the timeline + */ +export const TIMELINE_DAY_COUNT = 3 + +const NAMESPACE = 'dashboard-timeline' + +type ContextValue = { + dates: string[] + activities: ShallowRef + merge: ShallowRef + setMerge: ArgCallback +} + +export const initTimelineContext = () => { + const start = getStartOfDay(Date.now() - MILL_PER_DAY * (TIMELINE_DAY_COUNT - 1)) + const dates = getAllDatesBetween(new Date(start), new Date(), formatYAxis) + const [merge, setMerge] = useState('none') + const { data: activities } = useRequest( + () => sendMsg2Runtime('timeline.list', { start, merge: merge.value }), + { + deps: [merge], + defaultValue: [], + } + ) + + useProvide(NAMESPACE, { dates, activities, merge, setMerge }) +} + +export const useTimelineContext = () => useProvider(NAMESPACE, + 'dates', 'activities', 'merge', 'setMerge', +) \ No newline at end of file diff --git a/src/pages/app/components/Dashboard/components/Timeline/index.tsx b/src/pages/app/components/Dashboard/components/Timeline/index.tsx index 346f0f6be..0ec851c7a 100644 --- a/src/pages/app/components/Dashboard/components/Timeline/index.tsx +++ b/src/pages/app/components/Dashboard/components/Timeline/index.tsx @@ -1,19 +1,18 @@ -import timelineDatabase from '@db/timeline-database' -import { useRequest } from '@hooks' +import DashboardCard from '@app/components/Dashboard/DashboardCard' import { defineComponent } from 'vue' -import DashboardCard from '../../DashboardCard' import TimelineChart from './Chart' import Summary from './Summary' +import { initTimelineContext } from './context' const Timeline = defineComponent<{ height: number }>(({ height }) => { - const { data } = useRequest(() => timelineDatabase.getAll(), { defaultValue: [] }) + initTimelineContext() return () => <> - + - + }, { props: ['height'] }) diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/Wrapper.ts b/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/Wrapper.ts index a68a549ce..a79609591 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/Wrapper.ts +++ b/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/Wrapper.ts @@ -1,9 +1,7 @@ import { getStepColors, tooltipDot } from "@app/util/echarts" -import { EchartsWrapper } from "@hooks/useEcharts" +import { EchartsWrapper } from "@hooks" import { generateSiteLabel } from "@util/site" -import type { BarSeriesOption } from "echarts/charts" -import type { GridComponentOption, TooltipComponentOption } from "echarts/components" -import type { ComposeOption } from "echarts/core" +import type { BarSeriesOption, ComposeOption, GridComponentOption, TooltipComponentOption } from "echarts" import { BizOption } from "../context" type EcOption = ComposeOption< diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/index.tsx b/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/index.tsx index 0852af7cc..8d0ea79d0 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/index.tsx +++ b/src/pages/app/components/Dashboard/components/TopKVisit/BarChart/index.tsx @@ -1,4 +1,4 @@ -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from "@hooks" import { defineComponent } from "vue" import { useTopKValue } from "../context" import Wrapper from "./Wrapper" diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/Wrapper.ts b/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/Wrapper.ts index 424a9b4b2..bc9587bac 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/Wrapper.ts +++ b/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/Wrapper.ts @@ -1,21 +1,14 @@ -import { getSeriesPalette, tooltipDot } from "@app/util/echarts" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getPrimaryTextColor } from "@pages/util/style" +import { getSeriesPalette, tooltipDot } from '@app/util/echarts' +import { EchartsWrapper } from "@hooks" +import { getPrimaryTextColor } from '@pages/util/style' import { generateSiteLabel } from "@util/site" -import { - type ComposeOption, - type GridComponentOption, - type PieSeriesOption, - type TooltipComponentOption, -} from "echarts" +import type { ComposeOption, GridComponentOption, PieSeriesOption, TooltipComponentOption } from "echarts" import { BizOption } from "../context" type EcOption = ComposeOption< | PieSeriesOption | GridComponentOption - | TooltipComponentOption -> - + | TooltipComponentOption> const tooltipOption = (): EcOption['tooltip'] => ( { show: true, diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/index.tsx b/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/index.tsx index 0852af7cc..8d0ea79d0 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/index.tsx +++ b/src/pages/app/components/Dashboard/components/TopKVisit/HalfBarChart/index.tsx @@ -1,4 +1,4 @@ -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from "@hooks" import { defineComponent } from "vue" import { useTopKValue } from "../context" import Wrapper from "./Wrapper" diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/Wrapper.ts b/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/Wrapper.ts index 1ded87bfb..c3ce50903 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/Wrapper.ts +++ b/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/Wrapper.ts @@ -1,14 +1,9 @@ import { getSeriesPalette, tooltipDot } from "@app/util/echarts" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getPrimaryTextColor } from "@pages/util/style" +import { EchartsWrapper } from "@hooks" +import { getPrimaryTextColor } from '@pages/util/style' import { generateSiteLabel } from "@util/site" -import { - type ComposeOption, - type GridComponentOption, - type PieSeriesOption, - type TooltipComponentOption -} from "echarts" -import { BizOption } from "../context" +import type { ComposeOption, GridComponentOption, PieSeriesOption, TooltipComponentOption } from "echarts" +import type { BizOption } from "../context" type EcOption = ComposeOption< | PieSeriesOption diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/index.tsx b/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/index.tsx index 0852af7cc..8d0ea79d0 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/index.tsx +++ b/src/pages/app/components/Dashboard/components/TopKVisit/PieChart/index.tsx @@ -1,4 +1,4 @@ -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from "@hooks" import { defineComponent } from "vue" import { useTopKValue } from "../context" import Wrapper from "./Wrapper" diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/Title/TitleSelect.tsx b/src/pages/app/components/Dashboard/components/TopKVisit/Title/TitleSelect.tsx index 8cf762e36..b2e3d89ff 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/Title/TitleSelect.tsx +++ b/src/pages/app/components/Dashboard/components/TopKVisit/Title/TitleSelect.tsx @@ -1,7 +1,41 @@ +import { css } from '@emotion/css' import { ElSelect, useNamespace } from "element-plus" import { defineComponent } from "vue" import { type TopKFilterOption, useTopKFilter } from "../context" +const useStyle = () => { + const selectNs = useNamespace('select') + + const selectCls = css` + margin-inline: 3px; + width: 28px; + + & .${selectNs.e('wrapper')} { + padding: 2px; + } + + & .${selectNs.e('suffix')} { + display: none; + } + + & .${selectNs.e('placeholder')} { + text-align: center; + } + ` + + const popoverCls = css` + & .${selectNs.be('dropdown', 'item')} { + padding: 0; + width: 35px; + height: 24px; + line-height: 24px; + text-align: center; + } + ` + + return [selectCls, popoverCls] +} + type Props = { field: keyof TopKFilterOption & ('topK' | 'dayNum') values: number[] @@ -9,19 +43,18 @@ type Props = { const TitleSelect = defineComponent(({ values, field }) => { const filter = useTopKFilter() - const ns = useNamespace('title-select') + const [selectCls, popoverCls] = useStyle() return () => ( filter[field] = val as number} popperOptions={{ placement: 'bottom' }} - popperClass={ns.e('popper')} - > - {values.map(k => )} - + popperClass={popoverCls} + options={values.map(k => ({ label: k, value: k }))} + /> ) }, { props: ['field', "values"] }) diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/Title/index.tsx b/src/pages/app/components/Dashboard/components/TopKVisit/Title/index.tsx index 1cdf07a43..48f95fef7 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/Title/index.tsx +++ b/src/pages/app/components/Dashboard/components/TopKVisit/Title/index.tsx @@ -1,59 +1,36 @@ import { tN } from "@app/locale" +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" -import { ElIcon, ElRadioButton, ElRadioGroup } from "element-plus" -import { defineComponent } from "vue" -import type { JSX } from "vue/jsx-runtime" +import IconRadioGroup from '@pages/components/IconRadioGroup' +import { BarChart, HalfPieChart, RoseChart } from '@pages/icons' +import { type Component, defineComponent } from "vue" import { type TopKChartType, useTopKFilter } from "../context" import TitleSelect from "./TitleSelect" -import "./title.sass" -const CHART_CONFIG: { [type in TopKChartType]: JSX.Element | string } = { - pie: ( - - - - - - - ), - bar: ( - - - - - - - - ), - halfPie: ( - - - - ), +const CHART_CONFIG: { [type in TopKChartType]: Component } = { + pie: RoseChart, + bar: BarChart, + halfPie: HalfPieChart, } const Title = defineComponent(() => { const filter = useTopKFilter() + const isXs = useXsState() return () => ( - + {tN(msg => msg.dashboard.topK.title, { k: , day: , })} - filter.topKChartType = val as TopKChartType} - > - {Object.entries(CHART_CONFIG).map(([k, v]) => ( - - {v} - - ))} - + options={Object.entries(CHART_CONFIG).map(([value, icon]) => ({ value, icon }))} + /> ) }) diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/Title/title.sass b/src/pages/app/components/Dashboard/components/TopKVisit/Title/title.sass deleted file mode 100644 index 303183d8a..000000000 --- a/src/pages/app/components/Dashboard/components/TopKVisit/Title/title.sass +++ /dev/null @@ -1,17 +0,0 @@ - -.el-title-select - margin-inline: 3px - width: 28px - .el-select__wrapper - padding: 2px - .el-select__suffix - display: none - .el-select__placeholder - text-align: center -.el-title-select__popper - .el-select-dropdown__item - padding: 0 - width: 35px - height: 24px - line-height: 24px - text-align: center diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/common.ts b/src/pages/app/components/Dashboard/components/TopKVisit/common.ts deleted file mode 100644 index 8f7d1e3c8..000000000 --- a/src/pages/app/components/Dashboard/components/TopKVisit/common.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { type GridComponentOption } from "echarts/components" - -export const generateGridOption = (): GridComponentOption => { - return { - top: 30, - bottom: 40, - left: 40, - right: 20, - } -} diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/context.ts b/src/pages/app/components/Dashboard/components/TopKVisit/context.ts index 4fb4ebf0d..1b3659e39 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/context.ts +++ b/src/pages/app/components/Dashboard/components/TopKVisit/context.ts @@ -1,7 +1,8 @@ +import { getSiteStatPage } from "@api/sw/stat" import { useLocalStorage, useProvide, useProvider, useRequest } from "@hooks" -import statService, { SiteQuery } from "@service/stat-service" -import { MILL_PER_DAY } from "@util/time" -import { reactive, toRaw, watch, type Reactive, type Ref } from "vue" +import { cvtDateRange2Str, MILL_PER_DAY } from "@util/time" +import { createObjectGuard, createStringUnionGuard, isInt } from 'typescript-guard' +import { reactive, type ShallowRef, toRaw, watch } from "vue" export type BizOption = { name: string @@ -12,41 +13,46 @@ export type BizOption = { } export type TopKChartType = 'bar' | 'pie' | 'halfPie' +const isTopKChartType = createStringUnionGuard('bar', 'pie', 'halfPie') export type TopKFilterOption = { topK: number dayNum: number topKChartType: TopKChartType } +const isTopKFilterOption = createObjectGuard({ + topK: isInt, + dayNum: isInt, + topKChartType: isTopKChartType, +}) type Context = { - value: Ref - filter: Reactive + value: ShallowRef + filter: TopKFilterOption } const NAMESPACE = 'dashboardTopKVisit' export const initProvider = () => { const [cachedFilter, setFilterCache] = useLocalStorage( - 'habit_period_filter', { topK: 6, dayNum: 30, topKChartType: 'pie' } + `${NAMESPACE}_filter`, isTopKFilterOption, { topK: 6, dayNum: 30, topKChartType: 'pie' } ) const filter = reactive(cachedFilter) watch(() => filter, () => setFilterCache(toRaw(filter)), { deep: true }) const { data: value } = useRequest(async () => { const now = new Date() const startTime: Date = new Date(now.getTime() - MILL_PER_DAY * filter.dayNum) - const query: SiteQuery = { - date: [startTime, now], + const query: tt4b.stat.SiteQuery = { + date: cvtDateRange2Str([startTime, now]), sortKey: "time", sortDirection: 'DESC', mergeDate: true, } const SIZE = filter.topK - const top = (await statService.selectSitePage(query, { num: 1, size: SIZE })).list - const data: BizOption[] = top.map(({ time, siteKey, alias }) => ({ - name: alias ?? siteKey?.host ?? '', - host: siteKey?.host ?? '', - alias, + const { list: top } = await getSiteStatPage({ num: 1, size: SIZE, ...query }) + const data: BizOption[] = top.map(({ time, siteKey: { host }, alias }) => ({ + name: alias ?? host, + host, alias, value: time, })) for (let realSize = top.length; realSize < SIZE; realSize++) { diff --git a/src/pages/app/components/Dashboard/components/TopKVisit/index.tsx b/src/pages/app/components/Dashboard/components/TopKVisit/index.tsx index d449c7264..cec5ae07a 100644 --- a/src/pages/app/components/Dashboard/components/TopKVisit/index.tsx +++ b/src/pages/app/components/Dashboard/components/TopKVisit/index.tsx @@ -4,9 +4,10 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ +import ChartTitle from "@app/components/Dashboard/ChartTitle" +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" -import { defineComponent } from "vue" -import ChartTitle from "../../ChartTitle" +import { computed, defineComponent } from "vue" import BarChart from "./BarChart" import { initProvider } from "./context" import HalfBarChart from "./HalfBarChart" @@ -15,16 +16,27 @@ import Title from "./Title" const _default = defineComponent(() => { const filter = initProvider() + const isXs = useXsState() + + const chart = computed(() => { + const type = filter.topKChartType + if (type === 'bar' || isXs.value) { + return + } else if (type === 'pie') { + return + } else if (type === 'halfPie') { + return + } + }) + return () => { return ( - </ChartTitle > + </ChartTitle> <Flex flex={1}> - {filter.topKChartType === 'pie' && <PieChart />} - {filter.topKChartType === 'bar' && <BarChart />} - {filter.topKChartType === 'halfPie' && <HalfBarChart />} + {chart.value} </Flex> </Flex> ) diff --git a/src/pages/app/components/Dashboard/dashboard.sass b/src/pages/app/components/Dashboard/dashboard.sass deleted file mode 100644 index a8dfe61a5..000000000 --- a/src/pages/app/components/Dashboard/dashboard.sass +++ /dev/null @@ -1,3 +0,0 @@ -.dashboard-chart-title - .el-radio-button__inner - padding: 3px 5px diff --git a/src/pages/app/components/Dashboard/index.tsx b/src/pages/app/components/Dashboard/index.tsx index ccd777dc5..456f88648 100644 --- a/src/pages/app/components/Dashboard/index.tsx +++ b/src/pages/app/components/Dashboard/index.tsx @@ -6,22 +6,21 @@ */ import { t } from "@app/locale" -import { MediaSize, useManualRequest, useMediaSize, useRequest, useXsState } from "@hooks" +import { MediaSize, useMediaSize, useRequest, useXsState } from "@hooks" import { isTranslatingLocale, locale } from "@i18n" import Flex from "@pages/components/Flex" -import metaService from "@service/meta-service" +import { rateClicked, recommendRate } from '@pages/util/rate' import { REVIEW_PAGE } from "@util/constant/url" import { ElRow, ElScrollbar } from "element-plus" -import { defineComponent, FunctionalComponent } from "vue" +import { computed, defineComponent, type FunctionalComponent } from "vue" import { useRouter } from "vue-router" -import ContentContainer from "../common/ContentContainer" +import ContentContainer from '../common/ContentContainer' import Calendar from "./components/Calendar" import Indicator from "./components/Indicator" import MonthOnMonth from "./components/MonthOnMonth" import Timeline from './components/Timeline' import TopKVisit from "./components/TopKVisit" -import "./dashboard.sass" -import DashboardCard from './DashboardCard' +import DashboardCard, { type DashboardCardProps } from './DashboardCard' const ROW_GUTTER = 15 @@ -43,19 +42,28 @@ const _default = defineComponent(() => { const jump2Help = () => router.push({ path: "/other/help" }) const isNotEnOrZhCn = locale !== "en" && locale !== "zh_CN" const showHelp = isTranslatingLocale() || isNotEnOrZhCn - const { data: showRate, refresh } = useRequest(metaService.recommendRate) - const { refresh: handleRate } = useManualRequest(() => metaService.saveFlag("rateOpen"), { onSuccess: refresh }) + const { data: showRate, refresh } = useRequest(recommendRate) + const onRateClicked = () => { + rateClicked() + refresh() + } const mediaSize = useMediaSize() const isXs = useXsState() + const indicatorCardProps = computed<DashboardCardProps>(() => isXs.value ? { + span: 24, + height: 'fit-content', + bodyHeight: 'fit-content', + } : { span: 8 }) + return () => ( <ElScrollbar> <ContentContainer class="dashboard-container"> <ElRow gutter={ROW_GUTTER}> {mediaSize.value <= MediaSize.md ? <> - <DashboardCard span={isXs.value ? 24 : 8}> + <DashboardCard {...indicatorCardProps.value}> <Indicator /> </DashboardCard> <DashboardCard span={isXs.value ? 24 : 16}> @@ -90,7 +98,7 @@ const _default = defineComponent(() => { <a href={REVIEW_PAGE} target="_blank" - onClick={handleRate} + onClick={onRateClicked} style={{ color: 'inherit' }} > {t(msg => msg.about.text.rate)} diff --git a/src/pages/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx b/src/pages/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx deleted file mode 100644 index 6e3709d73..000000000 --- a/src/pages/app/components/DataManage/ClearPanel/ClearFilter/DateFilter.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { t, tN } from "@app/locale" -import { dateFormat as elDateFormat } from "@i18n/element" -import { type ElementDatePickerShortcut } from "@pages/element-ui/date" -import { getDatePickerIconSlots } from "@pages/element-ui/rtl" -import { formatTime, getBirthday, MILL_PER_DAY } from "@util/time" -import { ElDatePicker } from "element-plus" -import { defineComponent, type PropType, type StyleValue } from "vue" - -const _default = defineComponent({ - emits: { - change: (_date: [Date, Date]) => true - }, - props: { - dateRange: Object as PropType<[Date, Date]> - }, - setup(props, ctx) { - const yesterday = new Date().getTime() - MILL_PER_DAY - const daysBefore = (days: number) => new Date(new Date().getTime() - days * MILL_PER_DAY) - - const birthday = getBirthday() - const pickerShortcuts: ElementDatePickerShortcut[] = [ - { - text: t(msg => msg.calendar.range.tillYesterday), - value: [birthday, daysBefore(1)], - }, { - text: t(msg => msg.calendar.range.tillDaysAgo, { n: 7 }), - value: [birthday, daysBefore(7)], - }, { - text: t(msg => msg.calendar.range.tillDaysAgo, { n: 30 }), - value: [birthday, daysBefore(30)], - } - ] - const dateFormat = '{y}-{m}-{d}' - const startPlaceholder = formatTime(birthday, dateFormat) - const endPlaceholder = formatTime(yesterday, dateFormat) - - return () => ( - <p> - <a style={{ marginInlineEnd: '10px' }}>1.</a> - {tN(msg => msg.dataManage.filterDate, { - picker: <ElDatePicker - modelValue={props.dateRange} - onUpdate:modelValue={date => ctx.emit("change", date)} - size="small" - style={{ width: "250px" } satisfies StyleValue} - startPlaceholder={startPlaceholder} - endPlaceholder={endPlaceholder} - dateFormat={elDateFormat()} - type="daterange" - disabledDate={(date: Date) => date.getTime() > yesterday} - shortcuts={pickerShortcuts} - rangeSeparator="-" - v-slots={getDatePickerIconSlots()} - /> - })} - </p> - ) - } -}) - -export default _default diff --git a/src/pages/app/components/DataManage/ClearPanel/ClearFilter/NumberFilter.tsx b/src/pages/app/components/DataManage/ClearPanel/ClearFilter/NumberFilter.tsx deleted file mode 100644 index 185e61a6a..000000000 --- a/src/pages/app/components/DataManage/ClearPanel/ClearFilter/NumberFilter.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { tN } from "@app/locale" -import { type DataManageMessage } from "@i18n/message/app/data-manage" -import { ElInput } from "element-plus" -import { defineComponent, type PropType, type Ref, ref, type StyleValue, watch } from "vue" - -const elInput = (ref: Ref<string | undefined>, placeholder: string) => ( - <ElInput - placeholder={placeholder} - clearable - size="small" - modelValue={ref.value} - onInput={val => ref.value = val?.trim()} - onClear={() => ref.value = undefined} - style={{ width: '60px' } satisfies StyleValue} - /> -) - -const _default = defineComponent({ - props: { - translateKey: { - type: String as PropType<keyof DataManageMessage>, - required: true, - }, - defaultValue: { - type: Object as PropType<[string?, string?]>, - required: true, - }, - lineNo: Number, - }, - emits: { - change: (_val: [string?, string?]) => true, - }, - setup(props, ctx) { - const start = ref(props.defaultValue[0]) - const end = ref(props.defaultValue[1]) - watch([start, end], () => ctx.emit("change", [start.value, end.value])) - - return () => ( - <p> - <a style={{ marginInlineEnd: '10px' }}>{props.lineNo}.</a> - {tN(msg => msg.dataManage[props.translateKey], { - start: elInput(start, '0'), - end: elInput(end, '∞'), - })} - </p> - ) - } -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/ClearPanel/ClearFilter/index.tsx b/src/pages/app/components/DataManage/ClearPanel/ClearFilter/index.tsx deleted file mode 100644 index 8838c0fe3..000000000 --- a/src/pages/app/components/DataManage/ClearPanel/ClearFilter/index.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { t } from "@app/locale" -import { Delete } from "@element-plus/icons-vue" -import { useState } from "@hooks" -import { ElButton } from "element-plus" -import { defineComponent } from "vue" -import DateFilter from "./DateFilter" -import NumberFilter from "./NumberFilter" - -const _default = defineComponent({ - emits: { - delete: (_date: [Date, Date] | undefined, _focus: [string?, string?], _time: [string?, string?]) => true - }, - setup(_, ctx) { - const [date, setDate] = useState<[Date, Date]>() - const [focus, setFocus] = useState<[string?, string?]>(['0', '2']) - const [time, setTime] = useState<[string?, string?]>(['0',]) - - return () => ( - <div style={{ paddingInlineStart: '30px', paddingTop: '40px' }}> - <h3>{t(msg => msg.dataManage.filterItems)}</h3> - <DateFilter dateRange={date.value} onChange={setDate} /> - <NumberFilter - translateKey="filterFocus" - defaultValue={focus.value} - lineNo={2} - onChange={setFocus} - /> - <NumberFilter - translateKey="filterTime" - defaultValue={time.value} - lineNo={3} - onChange={setTime} - /> - <div style={{ paddingTop: '40px' }}> - <ElButton - icon={Delete} - type="danger" - size="small" - onClick={() => ctx.emit("delete", date.value, focus.value, time.value)} - > - {t(msg => msg.button.delete)} - </ElButton> - </div> - </div> - ) - } -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/MemoryInfo.tsx b/src/pages/app/components/DataManage/MemoryInfo.tsx deleted file mode 100644 index 859e10af2..000000000 --- a/src/pages/app/components/DataManage/MemoryInfo.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import Flex from "@pages/components/Flex" -import { ElAlert, ElCard, ElProgress } from "element-plus" -import { computed, defineComponent, type StyleValue } from "vue" -import { alertProps } from "./common" -import { useDataMemory } from "./context" - -const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000 - -function computeColor(percentage: number, total: number): string { - // Danger color - let typeColor = '#F56C6C' - // Primary color - if (percentage < 50) typeColor = '#409EFF' - // Warning color - else if (percentage < 75) typeColor = '#E6A23C' - // Specially, show warning color if not detect the max memory - if (!total) typeColor = '#E6A23C' - return typeColor -} - -const totalTitle = (totalMb: number) => totalMb - ? t(msg => msg.dataManage.totalMemoryAlert, { size: totalMb }) - : t(msg => msg.dataManage.totalMemoryAlert1) - -const _default = defineComponent(() => { - const { memory } = useDataMemory() - - const usedMb = computed(() => byte2Mb(memory.value?.used)) - const totalMb = computed(() => byte2Mb(memory.value?.total)) - const percentage = computed(() => memory.value?.total ? Math.round(memory.value?.used * 10000.0 / memory.value.total) / 100 : 0) - const color = computed(() => computeColor(percentage.value, memory.value.total)) - - return () => ( - <ElCard - style={{ width: '100%' } satisfies StyleValue} - bodyStyle={{ height: '100%', boxSizing: 'border-box' }} - > - <Flex column height='100%' align="center"> - <ElAlert - {...alertProps} - type={totalMb.value ? "info" : "warning"} - title={totalTitle(totalMb.value)} - /> - <Flex flex={1} height={0}> - <ElProgress - width={260} - strokeWidth={30} - percentage={percentage.value} - type="circle" - color={color.value} - style={{ display: 'flex', marginTop: '30px' } satisfies StyleValue} - /> - </Flex> - <div style={{ userSelect: 'none' }}> - <h3 style={{ color: color.value }}> - {t(msg => msg.dataManage.usedMemoryAlert, { size: usedMb.value })} - </h3> - </div> - </Flex> - </ElCard> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/Migration/ImportButton.tsx b/src/pages/app/components/DataManage/Migration/ImportButton.tsx deleted file mode 100644 index 1e0f09a23..000000000 --- a/src/pages/app/components/DataManage/Migration/ImportButton.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { Upload } from "@element-plus/icons-vue" -import Immigration from "@service/components/immigration" -import { deserialize } from "@util/file" -import { ElButton, ElLoading, ElMessage } from "element-plus" -import { defineComponent, ref } from "vue" -import { useDataMemory } from "../context" - -const immigration: Immigration = new Immigration() - -async function handleFileSelected(fileInput: HTMLInputElement | undefined, callback: () => void) { - const files = fileInput?.files - if (!files?.length) { - return - } - const loading = ElLoading.service({ fullscreen: true }) - const file: File = files[0] - const fileText = await file.text() - const data = deserialize(fileText) - if (!data) { - ElMessage.error(t(msg => msg.dataManage.importError)) - } - await immigration.importData(data) - loading.close() - callback?.() - ElMessage.success(t(msg => msg.operation.successMsg)) -} - -const _default = defineComponent(() => { - const { refreshMemory } = useDataMemory() - const fileInput = ref<HTMLInputElement>() - - return () => ( - <ElButton - size="large" - type="primary" - icon={Upload} - onClick={() => fileInput.value?.click()} - style={{ margin: 0, flex: 1 }} - > - {t(msg => msg.item.operation.importWholeData)} - <input - ref={fileInput} - type="file" - accept=".json" - style={{ display: "none" }} - onChange={() => handleFileSelected(fileInput.value, refreshMemory)} - /> - </ElButton> - ) -}) - -export default _default diff --git a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx b/src/pages/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx deleted file mode 100644 index 245657805..000000000 --- a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Sop.tsx +++ /dev/null @@ -1,77 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import DialogSop, { type SopStepInstance } from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { useManualRequest } from "@hooks" -import Flex from "@pages/components/Flex" -import { processImportedData } from "@service/components/import-processor" -import { ElMessage, ElStep, ElSteps } from "element-plus" -import { defineComponent, ref } from "vue" -import Step1 from "./Step1" -import Step2 from "./Step2" - -const _default = defineComponent({ - emits: { - cancel: () => true, - import: () => true, - }, - setup(_, ctx) { - const step = ref<0 | 1>(0) - const step1 = ref<SopStepInstance<timer.imported.Data>>() - const step2 = ref<SopStepInstance<timer.imported.ConflictResolution>>() - - const { data, refresh: handleNext, loading: parsing } = useManualRequest(() => step1.value!.parseData(), { - defaultValue: { rows: [] }, - onSuccess: () => step.value = 1, - onError: e => ElMessage.error((e as Error)?.message ?? 'Unknown Error') - }) - - const { loading: importing, refresh: doImport } = useManualRequest( - async () => { - const resolution = await step2.value?.parseData?.() - if (!resolution) throw new Error(t(msg => msg.dataManage.importOther.conflictNotSelected)) - await processImportedData(data.value, resolution) - }, - { - onSuccess: () => { - ElMessage.success(t(msg => msg.operation.successMsg)) - ctx.emit('import') - }, - onError: e => ElMessage.warning((e as Error)?.message ?? 'Unknown error'), - } - ) - - return () => ( - <DialogSop - first={step.value === 0} - last={step.value === 1} - onCancel={() => ctx.emit('cancel')} - onBack={() => step.value = 0} - onNext={handleNext} - onFinish={doImport} - nextLoading={parsing.value} - finishLoading={importing.value} - v-slots={{ - steps: () => ( - <ElSteps space={200} finishStatus="success" active={step.value} alignCenter> - <ElStep title={t(msg => msg.dataManage.importOther.step1)} /> - <ElStep title={t(msg => msg.dataManage.importOther.step2)} /> - </ElSteps> - ), - content: () => ( - <Flex width="100%" justify="center"> - {step.value === 0 ? <Step1 ref={step1} /> : <Step2 ref={step2} data={data.value} />} - </Flex> - ), - }} - /> - ) - } -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Step1.tsx b/src/pages/app/components/DataManage/Migration/ImportOtherButton/Step1.tsx deleted file mode 100644 index 30c6469e8..000000000 --- a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Step1.tsx +++ /dev/null @@ -1,76 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { type SopStepInstance } from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { Document } from "@element-plus/icons-vue" -import { useState } from "@hooks" -import Flex from "@pages/components/Flex" -import { ElButton, ElForm, ElFormItem, ElOption, ElSelect } from "element-plus" -import { defineComponent, ref } from "vue" -import { type OtherExtension, parseFile } from "./processor" - -const OTHER_NAMES: { [ext in OtherExtension]: string } = { - webtime_tracker: "Webtime Tracker", - web_activity_time_tracker: "Web Activity Time Tracker", - history_trends_unlimited: "History Trends Unlimited", -} - -const OTHER_FILE_FORMAT: { [ext in OtherExtension]: string } = { - webtime_tracker: '.csv,.json', - web_activity_time_tracker: '.csv', - history_trends_unlimited: '.tsv', -} - -const ALL_TYPES: OtherExtension[] = Object.keys(OTHER_NAMES) as OtherExtension[] - -const _default = defineComponent((_, ctx) => { - const [type, setType] = useState<OtherExtension>('webtime_tracker') - const [selectedFile, setSelectedFile] = useState<File>() - const fileInput = ref<HTMLInputElement>() - - const parseData = async () => { - const file = selectedFile.value - if (!file) throw new Error(t(msg => msg.dataManage.importOther.fileNotSelected)) - - const data = await parseFile(type.value, file) - if (!data?.rows?.length) throw new Error("No rows parsed") - - return data - } - - ctx.expose({ parseData } satisfies SopStepInstance<timer.imported.Data>) - - return () => ( - <ElForm labelWidth={100} labelPosition="left" style={{ width: '500px' }}> - <ElFormItem label={t(msg => msg.dataManage.importOther.dataSource)} required> - <ElSelect modelValue={type.value} onChange={setType}> - { - ALL_TYPES.map(type => <ElOption value={type} label={OTHER_NAMES[type]} />) - } - </ElSelect> - </ElFormItem> - <ElFormItem label={t(msg => msg.dataManage.importOther.file)} required> - <Flex gap={10}> - <ElButton icon={Document} onClick={() => fileInput.value?.click?.()}> - {t(msg => msg.dataManage.importOther.selectFileBtn)} - <input - ref={fileInput} - type="file" - accept={OTHER_FILE_FORMAT[type.value]} - style={{ display: 'none' }} - onChange={() => setSelectedFile(fileInput.value?.files?.[0])} - /> - </ElButton> - {selectedFile.value?.name && <span>{selectedFile.value?.name}</span>} - </Flex> - </ElFormItem> - </ElForm> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Step2.tsx b/src/pages/app/components/DataManage/Migration/ImportOtherButton/Step2.tsx deleted file mode 100644 index 791d38a57..000000000 --- a/src/pages/app/components/DataManage/Migration/ImportOtherButton/Step2.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { type SopStepInstance } from "@app/components/common/DialogSop" -import CompareTable from "@app/components/common/imported/CompareTable" -import ResolutionRadio from "@app/components/common/imported/ResolutionRadio" -import { t } from "@app/locale" -import { useState } from "@hooks" -import Flex from "@pages/components/Flex" -import { defineComponent, type PropType } from "vue" - -const _default = defineComponent({ - props: { - data: { - type: Object as PropType<timer.imported.Data>, - required: true, - }, - }, - setup(props, ctx) { - const [resolution, setResolution] = useState<timer.imported.ConflictResolution>() - - ctx.expose({ - parseData: () => resolution.value - } satisfies SopStepInstance<timer.imported.ConflictResolution | undefined>) - - return () => ( - <Flex column width="100%" gap={20}> - <CompareTable - data={props.data} - comparedColName={t(msg => msg.dataManage.importOther.imported)} - /> - <Flex width="100%" justify="center"> - <ResolutionRadio modelValue={resolution.value} onChange={setResolution} /> - </Flex> - </Flex> - ) - } -}) - -export default _default diff --git a/src/pages/app/components/DataManage/Migration/ImportOtherButton/index.tsx b/src/pages/app/components/DataManage/Migration/ImportOtherButton/index.tsx deleted file mode 100644 index d34532b59..000000000 --- a/src/pages/app/components/DataManage/Migration/ImportOtherButton/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { Upload } from "@element-plus/icons-vue" -import { useSwitch } from "@hooks" -import { ElButton, ElDialog } from "element-plus" -import { defineComponent } from "vue" -import { useDataMemory } from "../../context" -import Sop from "./Sop" - -const _default = defineComponent(() => { - const { refreshMemory } = useDataMemory() - const [visible, open, close] = useSwitch() - const handleImported = () => { - close() - refreshMemory?.() - } - - return () => <> - <ElButton - size="large" - type="warning" - icon={Upload} - onClick={open} - style={{ margin: 0, flex: 1, width: '100%', textWrap: 'wrap', lineHeight: '1.4em' }} - > - {t(msg => msg.item.operation.importOtherData)} - </ElButton> - <ElDialog - top="10vh" - modelValue={visible.value} - title={t(msg => msg.item.operation.importOtherData)} - width="80%" - closeOnClickModal={false} - onClose={close} - > - <Sop onCancel={close} onImport={handleImported} /> - </ElDialog> - </> -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/Migration/index.tsx b/src/pages/app/components/DataManage/Migration/index.tsx deleted file mode 100644 index 32d2d0194..000000000 --- a/src/pages/app/components/DataManage/Migration/index.tsx +++ /dev/null @@ -1,54 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { Download } from "@element-plus/icons-vue" -import Flex from "@pages/components/Flex" -import Immigration from "@service/components/immigration" -import { exportJson } from "@util/file" -import { formatTime } from "@util/time" -import { ElAlert, ElButton, ElCard } from "element-plus" -import { type FunctionalComponent, type StyleValue } from "vue" -import { alertProps } from "../common" -import ImportButton from "./ImportButton" -import ImportOtherButton from "./ImportOtherButton" - -const immigration: Immigration = new Immigration() - -async function handleExport() { - const data = await immigration.getExportingData() - const timestamp = formatTime(new Date(), '{y}{m}{d}_{h}{i}{s}') - exportJson(data, `timer_backup_${timestamp}`) -} - -const Migration: FunctionalComponent = () => ( - <ElCard - style={{ width: '100%' } satisfies StyleValue} - bodyStyle={{ height: '100%', boxSizing: 'border-box' } as StyleValue} - > - <Flex justify="center" height="100%" align="center"> - <Flex column gap={20} height="100%" maxWidth={190} flex={3}> - <ElAlert style={{ flex: 1 }} {...alertProps} > - {t(msg => msg.dataManage.migrationAlert)} - </ElAlert> - <ElButton - size="large" - type="success" - icon={Download} - onClick={handleExport} - style={{ flex: 1 } satisfies StyleValue} - > - {t(msg => msg.item.operation.exportWholeData)} - </ElButton> - <ImportButton /> - <ImportOtherButton /> - </Flex> - </Flex> - </ElCard> -) - -export default Migration diff --git a/src/pages/app/components/DataManage/common.ts b/src/pages/app/components/DataManage/common.ts deleted file mode 100644 index 88ecb93fb..000000000 --- a/src/pages/app/components/DataManage/common.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -export const alertProps: { - center: boolean - closable: boolean - type: 'info' | 'warning' -} = { - center: true, - closable: false, - type: 'info' -} diff --git a/src/pages/app/components/DataManage/index.tsx b/src/pages/app/components/DataManage/index.tsx deleted file mode 100644 index 093ebc43c..000000000 --- a/src/pages/app/components/DataManage/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import Flex from "@pages/components/Flex" -import { ElScrollbar } from 'element-plus' -import { defineComponent, type StyleValue } from "vue" -import ContentContainer from "../common/ContentContainer" -import ClearPanel from "./ClearPanel" -import MemoryInfo from "./MemoryInfo" -import Migration from "./Migration" -import { initDataManage } from "./context" - -export default defineComponent(() => { - initDataManage() - - return () => ( - <ElScrollbar height="100%" style={{ width: '100%' } satisfies StyleValue}> - <ContentContainer> - <Flex gap={22} height={490}> - <Flex height='100%' flex={8}> - <MemoryInfo /> - </Flex> - <Flex height='100%' flex={11}> - <ClearPanel /> - </Flex> - <Flex height='100%' flex={5}> - <Migration /> - </Flex> - </Flex> - </ContentContainer > - </ElScrollbar> - ) -}) \ No newline at end of file diff --git a/src/pages/app/components/Habit/components/HabitFilter.tsx b/src/pages/app/components/Habit/HabitFilter.tsx similarity index 74% rename from src/pages/app/components/Habit/components/HabitFilter.tsx rename to src/pages/app/components/Habit/HabitFilter.tsx index a57fb830d..f2d9c4e61 100644 --- a/src/pages/app/components/Habit/components/HabitFilter.tsx +++ b/src/pages/app/components/Habit/HabitFilter.tsx @@ -5,11 +5,11 @@ * https://opensource.org/licenses/MIT */ -import DateRangeFilterItem from "@app/components/common/filter/DateRangeFilterItem" -import TimeFormatFilterItem from "@app/components/common/filter/TimeFormatFilterItem" -import { t } from "@app/locale" +import DateRangeFilterItem from '@app/components/common/filter/DateRangeFilterItem' +import TimeFormatFilterItem from '@app/components/common/filter/TimeFormatFilterItem' +import { t } from '@app/locale' import Flex from "@pages/components/Flex" -import { type ElementDatePickerShortcut } from "@pages/element-ui/date" +import { ElDatePickerShortcut } from '@pages/element-ui/types' import { daysAgo, MILL_PER_DAY } from "@util/time" import { defineComponent } from "vue" import { useHabitFilter } from "./context" @@ -26,7 +26,7 @@ const shortcutProps: ShortCutProp[] = [ [t(msg => msg.calendar.range.lastDays, { n: 365 }), 365], ] -const SHORTCUTS: ElementDatePickerShortcut[] = shortcutProps.map(([text, agoOfStart]) => ({ text, value: daysAgo(agoOfStart, 0) })) +const SHORTCUTS: ElDatePickerShortcut[] = shortcutProps.map(([text, agoOfStart]) => ({ text, value: daysAgo(agoOfStart, 0) })) const _default = defineComponent(() => { const filter = useHabitFilter() @@ -37,7 +37,7 @@ const _default = defineComponent(() => { clearable={false} modelValue={filter.dateRange} shortcuts={SHORTCUTS} - onChange={val => val && (filter.dateRange = val)} + onChange={([s, e]) => s && e && (filter.dateRange = [s, e])} disabledDate={d => d.getTime() < Date.now() - MILL_PER_DAY * 366} /> <TimeFormatFilterItem diff --git a/src/pages/app/components/Habit/Period/Average/Wrapper.tsx b/src/pages/app/components/Habit/Period/Average/Wrapper.tsx new file mode 100644 index 000000000..069225005 --- /dev/null +++ b/src/pages/app/components/Habit/Period/Average/Wrapper.tsx @@ -0,0 +1,313 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { t } from "@app/locale" +import { getCompareColor, tooltipDot, tooltipFlexLine, tooltipSpaceLine } from "@app/util/echarts" +import { EchartsWrapper } from "@hooks" +import { getPrimaryTextColor, getSecondaryTextColor } from '@pages/util/style' +import { averageByDay, MINUTE_PER_PERIOD } from "@util/period" +import { formatPeriodCommon, MILL_PER_MINUTE } from "@util/time" +import type { + BarSeriesOption, ComposeOption, EChartsType, ElementEvent, GridComponentOption, MarkLineComponentOption, + TooltipComponentOption, +} from "echarts" +import type { TopLevelFormatterParams } from "echarts/types/dist/shared" +import { generateGridOption } from "../common" + +type EcOption = ComposeOption< + | BarSeriesOption + | GridComponentOption + | TooltipComponentOption +> + +export type BizOption = { + currRange: tt4b.period.KeyRange + prevRange: tt4b.period.KeyRange + curr: tt4b.period.Row[] + prev: tt4b.period.Row[] + periodSize: number +} + +const [CURR_COLOR = '', PREV_COLOR = ''] = getCompareColor() + +const cvt2Item = (row: tt4b.period.Row): number => { + const milliseconds = row.milliseconds + return milliseconds +} + +const formatXAxis = (idx: number, periodSize: number) => { + let min = idx * periodSize * MINUTE_PER_PERIOD + const hour = Math.floor(min / 60) + min = min - hour * 60 + return hour.toString().padStart(2, '0') + ':' + min.toString().padStart(2, '0') +} + +const key2Str = (key: tt4b.period.Key) => { + const { month, date } = key + return `${month?.toString?.()?.padStart(2, '0')}/${date?.toString?.()?.padStart(2, '0')}` +} + +const isSameDay = (keyRange: tt4b.period.KeyRange): boolean => { + const [start, end] = keyRange || [] + return start?.year === end?.year + && start?.month === end?.month + && start?.date === end?.date +} + +const range2Str = (keyRange: tt4b.period.KeyRange) => { + const [start, end] = keyRange + return isSameDay(keyRange) ? key2Str(start) : `${key2Str(start)}-${key2Str(end)}` +} + +const formatValueLine = (mill: number, range: tt4b.period.KeyRange, color: string): string => { + return tooltipFlexLine( + `${tooltipDot(color)} <b>${formatPeriodCommon(mill ?? 0)}</b>`, + range2Str(range), + ) +} + +const formatTooltip = (params: TopLevelFormatterParams, biz: BizOption): string => { + const { periodSize, prevRange, currRange } = biz + if (!Array.isArray(params)) return '' + const [curr, prev] = params ?? [] + + const idx = curr?.dataIndex ?? 0 + const start = formatXAxis(idx, periodSize) + const end = formatXAxis(idx + 1, periodSize) + + const periodStr = `${start}-${end}` + const timeLine = isSameDay(currRange) + ? periodStr + : tooltipFlexLine( + t(msg => msg.habit.period.chartType.average), + periodStr, + ) + + const currLine = formatValueLine(curr?.value as number ?? 0, currRange, CURR_COLOR) + const prevLine = formatValueLine(-(prev?.value ?? 0 as number), prevRange, PREV_COLOR) + + return `${timeLine}${tooltipSpaceLine()}${currLine}${prevLine}` +} + +const MARK_LINE_COLOR = getSecondaryTextColor() +const LABEL_COLOR = getPrimaryTextColor() + +const generateOption = (biz: BizOption): EcOption => { + let { curr, prev, periodSize } = biz + + curr = averageByDay(curr, periodSize) + prev = averageByDay(prev, periodSize) + + const currData = curr.map(r => cvt2Item(r)) + const prevData = prev.map(r => cvt2Item(({ ...r, milliseconds: -r.milliseconds }))) + const borderRadius = 5 * periodSize + + return { + tooltip: { + trigger: 'axis', + formatter: (params: TopLevelFormatterParams) => formatTooltip(params, biz), + axisPointer: { + lineStyle: { color: MARK_LINE_COLOR }, + } + }, + grid: { ...generateGridOption(), right: 30 }, + xAxis: { + type: 'category', + axisLabel: { + color: LABEL_COLOR, + interval: (16 / periodSize - 1), + formatter: (_, index) => formatXAxis(index, periodSize), + }, + axisLine: { show: false }, + axisTick: { show: false }, + min: 0, + max: currData.length, + offset: -borderRadius * 2, + }, + yAxis: { + type: 'value', + axisLabel: { show: false }, + axisTick: { show: false }, + splitLine: { show: false }, + max: Math.max(...currData) + MILL_PER_MINUTE, + min: Math.min(...prevData) - MILL_PER_MINUTE, + }, + series: [ + { + type: "bar", + stack: 'one', + data: currData.map((value, idx) => ({ + value, + itemStyle: { borderRadius: prevData[idx] ? [borderRadius, borderRadius, 0, 0] : borderRadius }, + })), + barCategoryGap: '50%', + color: CURR_COLOR, + }, { + type: "bar", + stack: 'one', + data: prevData.map((value, idx) => ({ + value, + itemStyle: { borderRadius: currData[idx] ? [0, 0, borderRadius, borderRadius] : borderRadius }, + })), + color: PREV_COLOR, + } + ], + } +} + +class Markline { + #locked = false + #lockedValue: number | null = null + #currentYValue: number | null = null + #rafId: number | null = null + + constructor( + private chart: EChartsType, + private getPeriodSize: () => number | undefined, + ) { + } + + get #segWidth(): number { + const periodSize = this.getPeriodSize() + if (!periodSize || periodSize <= 1) return MILL_PER_MINUTE * 1 + if (periodSize <= 4) return MILL_PER_MINUTE * 5 + return MILL_PER_MINUTE * 10 + } + + init() { + this.chart.getZr().on('mousemove', params => this.#handleMouseMove(params)) + this.chart.getZr().on('click', params => this.#handleClick(params)) + this.chart.getZr().on('globalout', () => this.#handleGlobalout()) + } + + #handleClick(params: ElementEvent): boolean | void { + const pointInPixel = [params.offsetX, params.offsetY] + + if (!this.chart.containPixel('grid', pointInPixel)) { + // Click outside grid area, ignore + return + } + + if (this.#locked) { + this.#unlock() + return + } + + if (this.#currentYValue !== null && !isNaN(this.#currentYValue)) { + this.#locked = true + this.#lockedValue = this.#currentYValue + this.#render() + } + } + + #handleMouseMove(params: ElementEvent) { + if (this.#rafId) return + + this.#rafId = requestAnimationFrame(() => { + const pointInPixel = [params.offsetX, params.offsetY] + + if (this.chart.containPixel('grid', pointInPixel)) { + // Move in the grid area: update current Y value + const [, yVal] = this.chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel) + if (yVal !== undefined && !isNaN(yVal)) { + const segWidth = this.#segWidth + this.#currentYValue = Math.round(yVal / segWidth) * segWidth + !this.#locked && this.#render() + } + } else { + this.#handleGlobalout() + } + this.#rafId = null + }) + } + + #render() { + const val = this.#locked ? this.#lockedValue : this.#currentYValue + + const markLine: MarkLineComponentOption = val === null || isNaN(val) + ? { data: [] } + : { + animation: false, + symbol: 'none', + lineStyle: { + width: 1, + type: 'dashed', + opacity: .6, + color: MARK_LINE_COLOR, + }, + label: { + show: true, + position: 'end', + formatter: `${(val / MILL_PER_MINUTE).toFixed(0)}m`, + fontSize: 11, + borderRadius: 3, + color: LABEL_COLOR, + opacity: 1, + }, + data: [{ yAxis: val }], + emphasis: { + lineStyle: { + width: 1, + type: 'dashed', + opacity: 1, + color: MARK_LINE_COLOR, + } + } + } + + this.chart.setOption( + { series: [{ markLine }] }, + // Use layzUpdate to avoid triggering animation which may conflict with series data animations + { notMerge: false, lazyUpdate: true }, + ) + } + + /** + * Do nothing if locked, or clear the mark line + */ + #handleGlobalout() { + if (this.#locked) return + this.#currentYValue = null + this.#render() + } + + #unlock() { + this.#locked = false + this.#lockedValue = null + this.#render() + } + + forceLock(ms: number) { + const segWidth = this.#segWidth + this.#locked = true + this.#lockedValue = Math.round(ms / segWidth) * segWidth + this.#render() + } +} + +export default class Wrapper extends EchartsWrapper<BizOption, EcOption> { + #markline: Markline | undefined + + generateOption = generateOption + + override init(container: HTMLDivElement): void { + super.init(container) + + if (!this.instance) return + + this.#markline = new Markline(this.instance, () => this.lastBizOption?.periodSize) + this.#markline.init() + } + + override async render(biz: BizOption): Promise<void> { + await super.render(biz) + const { curr } = biz + const len = curr.length + if (!len) return + const average = curr.reduce((sum, r) => sum + r.milliseconds, 0) / len + this.#markline?.forceLock(average) + } +} \ No newline at end of file diff --git a/src/pages/app/components/Habit/components/Period/Average/index.tsx b/src/pages/app/components/Habit/Period/Average/index.tsx similarity index 95% rename from src/pages/app/components/Habit/components/Period/Average/index.tsx rename to src/pages/app/components/Habit/Period/Average/index.tsx index b60cbd5ba..9c86cd04f 100644 --- a/src/pages/app/components/Habit/components/Period/Average/index.tsx +++ b/src/pages/app/components/Habit/Period/Average/index.tsx @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from "@hooks" import { computed, defineComponent, type StyleValue } from "vue" import { usePeriodFilter, usePeriodRange, usePeriodValue } from "../context" import Wrapper, { type BizOption } from "./Wrapper" diff --git a/src/pages/app/components/Habit/components/Period/Filter.tsx b/src/pages/app/components/Habit/Period/Filter.tsx similarity index 88% rename from src/pages/app/components/Habit/components/Period/Filter.tsx rename to src/pages/app/components/Habit/Period/Filter.tsx index cfb66da81..50cbdb97b 100644 --- a/src/pages/app/components/Habit/components/Period/Filter.tsx +++ b/src/pages/app/components/Habit/Period/Filter.tsx @@ -11,8 +11,7 @@ import { type HabitMessage } from '@i18n/message/app/habit' import Flex from '@pages/components/Flex' import { ElRadioButton, ElRadioGroup } from 'element-plus' import { defineComponent } from 'vue' -import { type ChartType } from './common' -import { usePeriodFilter } from './context' +import { type ChartType, isChartType, usePeriodFilter } from './context' // [value, label] type _SizeOption = [number, keyof HabitMessage['period']['sizes']] @@ -31,7 +30,7 @@ function allOptions(): Record<number, string> { return allOptions } -const CHART_CONFIG: { [type in ChartType]: string } = { +const CHART_CONFIG: Record<ChartType, string> = { average: t(msg => msg.habit.period.chartType.average), trend: t(msg => msg.habit.period.chartType.trend), stack: t(msg => msg.habit.period.chartType.stack), @@ -46,7 +45,7 @@ const _default = defineComponent(() => { historyName='periodSize' defaultValue={filter.periodSize?.toString?.()} options={allOptions()} - onSelect={val => { + onChange={val => { if (!val) return const newPeriodSize = parseInt(val) if (isNaN(newPeriodSize)) return @@ -55,7 +54,7 @@ const _default = defineComponent(() => { /> <ElRadioGroup modelValue={filter.chartType} - onChange={val => val && (filter.chartType = val as ChartType)} + onChange={val => isChartType(val) && (filter.chartType = val)} > {Object.entries(CHART_CONFIG).map(([type, name]) => ( <ElRadioButton value={type}> diff --git a/src/pages/app/components/Habit/components/Period/Stack/Wrapper.ts b/src/pages/app/components/Habit/Period/Stack/Wrapper.ts similarity index 76% rename from src/pages/app/components/Habit/components/Period/Stack/Wrapper.ts rename to src/pages/app/components/Habit/Period/Stack/Wrapper.ts index 597a36e58..5a076e816 100644 --- a/src/pages/app/components/Habit/components/Period/Stack/Wrapper.ts +++ b/src/pages/app/components/Habit/Period/Stack/Wrapper.ts @@ -1,14 +1,9 @@ -import { t } from "@app/locale" +import { t } from '@app/locale' import { getLineSeriesPalette } from "@app/util/echarts" -import { periodFormatter } from "@app/util/time" -import { EchartsWrapper } from "@hooks/useEcharts" +import { periodFormatter } from '@app/util/time' +import { EchartsWrapper } from "@hooks" import { formatTime } from "@util/time" -import { - type ComposeOption, - type GridComponentOption, - type LineSeriesOption, - type TooltipComponentOption, -} from "echarts" +import type { ComposeOption, GridComponentOption, LineSeriesOption, TooltipComponentOption } from "echarts" import { type TopLevelFormatterParams } from "echarts/types/dist/shared" import { formatXAxisTime, generateGridOption } from "../common" @@ -19,17 +14,17 @@ type EcOption = ComposeOption< > export type BizOption = { - data: timer.period.Row[] - timeFormat: timer.app.TimeFormat + data: tt4b.period.Row[] + timeFormat: tt4b.ui.TimeFormat } const [COLOR] = getLineSeriesPalette() -const formatTooltip = (params: TopLevelFormatterParams, timeFormat: timer.app.TimeFormat) => { +const formatTooltip = (params: TopLevelFormatterParams, timeFormat: tt4b.ui.TimeFormat) => { const param = Array.isArray(params) ? params[0] : params - const [, total, , end] = param.data as number[] + const [, total, , end] = param?.data as number[] return ` - <div>${formatTime(end, t(msg => msg.calendar.timeFormat))}</div> + <div>${end ? formatTime(end, t(msg => msg.calendar.timeFormat)) : ''}</div> <div><b>${periodFormatter(total, { format: timeFormat })}</b></div> ` } @@ -38,8 +33,8 @@ const generateOption = (biz: BizOption): EcOption => { const { data, timeFormat } = biz || {} let stackVal: number = 0 const seriesData = data.map(row => { - const startTime = row.startTime.getTime() - const endTime = row.endTime.getTime() + const startTime = row.startTime + const endTime = row.endTime const time = (startTime + endTime) / 2 const delta = row.milliseconds ?? 0 stackVal += delta diff --git a/src/pages/app/components/Habit/components/Period/Stack/index.tsx b/src/pages/app/components/Habit/Period/Stack/index.tsx similarity index 88% rename from src/pages/app/components/Habit/components/Period/Stack/index.tsx rename to src/pages/app/components/Habit/Period/Stack/index.tsx index 8afe72cdb..ddf610a2b 100644 --- a/src/pages/app/components/Habit/components/Period/Stack/index.tsx +++ b/src/pages/app/components/Habit/Period/Stack/index.tsx @@ -5,9 +5,9 @@ * https://opensource.org/licenses/MIT */ -import { useEcharts } from "@hooks/useEcharts" +import { useHabitFilter } from "@app/components/Habit/context" +import { useEcharts } from "@hooks" import { computed, defineComponent, type StyleValue } from "vue" -import { useHabitFilter } from "../../context" import { usePeriodValue } from "../context" import Wrapper, { type BizOption } from "./Wrapper" diff --git a/src/pages/app/components/Habit/components/Period/Summary.tsx b/src/pages/app/components/Habit/Period/Summary.tsx similarity index 67% rename from src/pages/app/components/Habit/components/Period/Summary.tsx rename to src/pages/app/components/Habit/Period/Summary.tsx index 8acabafb7..449c76b38 100644 --- a/src/pages/app/components/Habit/components/Period/Summary.tsx +++ b/src/pages/app/components/Habit/Period/Summary.tsx @@ -1,8 +1,8 @@ -import { GRID_CELL_STYLE } from "@app/components/common/grid" -import { KanbanIndicatorCell } from "@app/components/common/kanban" -import { t } from "@app/locale" -import { periodFormatter } from "@app/util/time" -import { useXsState } from "@hooks" +import { GRID_CELL_STYLE } from '@app/components/common/grid' +import { KanbanIndicatorCell } from '@app/components/common/kanban' +import { t } from '@app/locale' +import { periodFormatter } from '@app/util/time' +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" import { averageByDay } from "@util/period" import { formatTime } from "@util/time" @@ -21,7 +21,7 @@ type Result = { } } -const computeSummary = (rows: timer.period.Row[], periodSize: number): Result => { +const computeSummary = (rows: tt4b.period.Row[], periodSize: number): Result => { const averaged = averageByDay(rows, periodSize) const favoriteRow = averaged.sort((b, a) => a.milliseconds - b.milliseconds)[0] let favoritePeriod = '-' @@ -31,14 +31,14 @@ const computeSummary = (rows: timer.period.Row[], periodSize: number): Result => favoritePeriod = `${formatTime(start, "{h}:{i}")}-${formatTime(end, "{h}:{i}")}` } - let maxIdle: [timer.period.Row | undefined, timer.period.Row | undefined, number] = [, , 0] + let maxIdle: [tt4b.period.Row | undefined, tt4b.period.Row | undefined, number] = [, , 0] - let idleStart: timer.period.Row | undefined - let idleEnd: timer.period.Row | undefined + let idleStart: tt4b.period.Row | undefined + let idleEnd: tt4b.period.Row | undefined rows.forEach(r => { if (r.milliseconds) { if (!idleStart || !idleEnd) return - const newEmptyTs = idleEnd.endTime.getTime() - idleStart.endTime.getTime() + const newEmptyTs = idleEnd.endTime - idleStart.endTime if (newEmptyTs > maxIdle[2]) { maxIdle = [idleStart, idleEnd, newEmptyTs] } @@ -54,7 +54,7 @@ const computeSummary = (rows: timer.period.Row[], periodSize: number): Result => let idleLength = '-' let idlePeriod = '' if (start && end) { - idleLength = periodFormatter(end.endTime.getTime() - start.startTime.getTime(), { format: 'hour' }) + idleLength = periodFormatter(end.endTime - start.startTime, { format: 'hour' }) const format = t(msg => msg.calendar.simpleTimeFormat) const startTime = formatTime(start.startTime, format) const endTime = formatTime(end.endTime, format) @@ -64,7 +64,7 @@ const computeSummary = (rows: timer.period.Row[], periodSize: number): Result => return { favorite: { period: favoritePeriod, - average: favoriteRow?.milliseconds, + average: favoriteRow?.milliseconds ?? 0, }, longestIdle: { length: idleLength, @@ -77,22 +77,22 @@ const _default = defineComponent(() => { const data = usePeriodValue() const filter = usePeriodFilter() const globalFilter = useHabitFilter() - const summary = computed(() => computeSummary(data.value?.curr, filter.periodSize)) + const summary = computed(() => computeSummary(data.value.curr, filter.periodSize)) const isXs = useXsState() return () => ( <Flex column gap={1} flex={isXs.value ? undefined : 1}> <KanbanIndicatorCell mainName={t(msg => msg.habit.period.busiest)} - mainValue={summary.value?.favorite?.period} + mainValue={summary.value.favorite.period} subTips={msg => msg.habit.common.focusAverage} - subValue={periodFormatter(summary.value?.favorite?.average, { format: globalFilter.timeFormat })} + subValue={periodFormatter(summary.value.favorite.average, { format: globalFilter.timeFormat })} containerStyle={GRID_CELL_STYLE} /> <KanbanIndicatorCell mainName={t(msg => msg.habit.period.idle)} - mainValue={summary.value?.longestIdle?.length} - subTips={() => summary.value?.longestIdle?.period} + mainValue={summary.value.longestIdle.length} + subTips={() => summary.value.longestIdle.period} containerStyle={GRID_CELL_STYLE} /> </Flex> diff --git a/src/pages/app/components/Habit/components/Period/Trend/Wrapper.ts b/src/pages/app/components/Habit/Period/Trend/Wrapper.ts similarity index 70% rename from src/pages/app/components/Habit/components/Period/Trend/Wrapper.ts rename to src/pages/app/components/Habit/Period/Trend/Wrapper.ts index 6746a279b..a933f1ef1 100644 --- a/src/pages/app/components/Habit/components/Period/Trend/Wrapper.ts +++ b/src/pages/app/components/Habit/Period/Trend/Wrapper.ts @@ -5,16 +5,11 @@ * https://opensource.org/licenses/MIT */ import { getSeriesPalette } from "@app/util/echarts" -import { periodFormatter } from "@app/util/time" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getPrimaryTextColor } from "@pages/util/style" +import { periodFormatter } from '@app/util/time' +import { EchartsWrapper } from "@hooks" +import { getPrimaryTextColor } from '@pages/util/style' import { formatTime } from "@util/time" -import { - type BarSeriesOption, - type ComposeOption, - type GridComponentOption, - type TooltipComponentOption, -} from "echarts" +import type { BarSeriesOption, ComposeOption, GridComponentOption, TooltipComponentOption } from "echarts" import type { TopLevelFormatterParams } from "echarts/types/dist/shared" import { formatXAxisTime, generateGridOption } from "../common" @@ -25,17 +20,24 @@ type EcOption = ComposeOption< > export type BizOption = { - data: timer.period.Row[] - timeFormat: timer.app.TimeFormat + data: tt4b.period.Row[] + timeFormat: tt4b.ui.TimeFormat } -function formatTimeOfEcharts(params: TopLevelFormatterParams, timeFormat: timer.app.TimeFormat): string { +function formatTimeOfEcharts(params: TopLevelFormatterParams, timeFormat: tt4b.ui.TimeFormat): string { const format = Array.isArray(params) ? params[0] : params - const value = format.value as number[] - const milliseconds = value?.[1] ?? 0 - const start = formatTime(value?.[2], '{m}-{d} {h}:{i}') - const end = formatTime(value?.[3], '{h}:{i}') + if (!format) return 'NaN' + const { value } = format + if (!Array.isArray(value)) return 'NaN' + const time = value?.[1] ?? 0 + const startTs = value?.[2] + const endTs = value?.[3] + const start = typeof startTs === 'number' ? formatTime(startTs, '{m}-{d} {h}:{i}') : 'NaN' + const end = typeof endTs === 'number' ? formatTime(endTs, '{h}:{i}') : 'NaN' + const milliseconds = time instanceof Date + ? time.getTime() + : (typeof time === 'number' ? time : Number.parseInt(time)) return ` <div>${start}-${end}</div> <div> @@ -48,9 +50,9 @@ function formatTimeOfEcharts(params: TopLevelFormatterParams, timeFormat: timer. type BarItem = Exclude<BarSeriesOption["data"], undefined>[number] -const cvt2Item = (row: timer.period.Row): BarItem => { - const startTime = row.startTime.getTime() - const endTime = row.endTime.getTime() +const cvt2Item = (row: tt4b.period.Row): BarItem => { + const startTime = row.startTime + const endTime = row.endTime const time = (startTime + endTime) / 2 const milliseconds = row.milliseconds return [time, milliseconds, startTime, endTime] diff --git a/src/pages/app/components/Habit/components/Period/Trend/index.tsx b/src/pages/app/components/Habit/Period/Trend/index.tsx similarity index 94% rename from src/pages/app/components/Habit/components/Period/Trend/index.tsx rename to src/pages/app/components/Habit/Period/Trend/index.tsx index 7503c6b12..4d2bfd5c9 100644 --- a/src/pages/app/components/Habit/components/Period/Trend/index.tsx +++ b/src/pages/app/components/Habit/Period/Trend/index.tsx @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from "@hooks" import { computed, defineComponent, type StyleValue } from "vue" import { useHabitFilter } from "../../context" import { usePeriodValue } from "../context" diff --git a/src/pages/app/components/Habit/components/Period/common.ts b/src/pages/app/components/Habit/Period/common.ts similarity index 61% rename from src/pages/app/components/Habit/components/Period/common.ts rename to src/pages/app/components/Habit/Period/common.ts index 9334f5287..3dd58cf2e 100644 --- a/src/pages/app/components/Habit/components/Period/common.ts +++ b/src/pages/app/components/Habit/Period/common.ts @@ -5,25 +5,16 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { t } from '@app/locale' import { formatTime } from "@util/time" import { type GridComponentOption } from "echarts/components" -export const generateGridOption = (): GridComponentOption => { - return { - top: 30, - bottom: 40, - left: 40, - right: 20, - } -} - -export type ChartType = 'average' | 'trend' | 'stack' - -export type FilterOption = { - periodSize: number - chartType: ChartType -} +export const generateGridOption = () => ({ + top: 30, + bottom: 40, + left: 40, + right: 20, +} satisfies GridComponentOption) const MONTHS = t(msg => msg.calendar.months).split('|') @@ -33,9 +24,10 @@ export const formatXAxisTime = (time: number, idx: number): string => { const isStartOfMonth = dateStr === '01000000' const isStartOfDate = dateStr.endsWith('000000') if (idx === 0 || isStartOfMonth) { - return MONTHS[date.getMonth()] + const monthIdx = date.getMonth() + return MONTHS[monthIdx] ?? `${monthIdx + 1}` } else if (isStartOfDate) { - return date.getDate()?.toString?.()?.padStart(2, '0') + return date.getDate().toString().padStart(2, '0') } else { return formatTime(date, "{h}:{i}") } diff --git a/src/pages/app/components/Habit/components/Period/context.ts b/src/pages/app/components/Habit/Period/context.ts similarity index 73% rename from src/pages/app/components/Habit/components/Period/context.ts rename to src/pages/app/components/Habit/Period/context.ts index 50f7d21c2..08a95506f 100644 --- a/src/pages/app/components/Habit/components/Period/context.ts +++ b/src/pages/app/components/Habit/Period/context.ts @@ -5,23 +5,35 @@ * https://opensource.org/licenses/MIT */ -import { useLocalStorage, useProvide, useProvider, useRequest } from "@hooks" -import { merge } from "@service/components/period-calculator" -import periodService from "@service/period-service" +import { listPeriods } from '@api/sw/period' +import { useLocalStorage, useProvide, useProvider, useRequest } from '@hooks' import { keyOf, MAX_PERIOD_ORDER } from "@util/period" import { getDayLength, MILL_PER_DAY } from "@util/time" +import { createObjectGuard, createStringUnionGuard, isInt } from 'typescript-guard' import { computed, reactive, toRaw, watch, type Reactive, type Ref } from "vue" import { useHabitFilter } from "../context" -import type { FilterOption } from "./common" + +export type ChartType = 'average' | 'trend' | 'stack' +export const isChartType = createStringUnionGuard<ChartType>('average', 'trend', 'stack') + +type FilterOption = { + periodSize: number + chartType: ChartType +} + +const isFilterOption = createObjectGuard<FilterOption>({ + periodSize: isInt, + chartType: isChartType, +}) type Value = { - curr: timer.period.Row[] - prev: timer.period.Row[] + curr: tt4b.period.Row[] + prev: tt4b.period.Row[] } -export type PeriodRange = { - curr: timer.period.KeyRange - prev: timer.period.KeyRange +type PeriodRange = { + curr: tt4b.period.KeyRange + prev: tt4b.period.KeyRange } type Context = { @@ -41,19 +53,13 @@ const computeRange = (filterDateRange: [Date, Date]): PeriodRange => { } } -const fetchRows = async (range: timer.period.KeyRange, periodSize: number) => { - const results = await periodService.listBetween({ periodRange: range }) - const [start, end] = range || [] - return merge(results, { start, end, periodSize }) -} - const NAMESPACE = 'habitPeriod' export const initProvider = () => { const globalFilter = useHabitFilter() const periodRange = computed(() => computeRange(globalFilter.dateRange)) const [cachedFilter, setFilterCache] = useLocalStorage<FilterOption>( - 'habit_period_filter', { periodSize: 1, chartType: 'average' } + 'habit_period_filter', isFilterOption, { periodSize: 1, chartType: 'average' } ) const filter = reactive<FilterOption>(cachedFilter) watch(() => filter, () => setFilterCache(toRaw(filter)), { deep: true }) @@ -62,8 +68,8 @@ export const initProvider = () => { const { curr: currRange, prev: prevRange } = periodRange.value || {} const periodSize = filter.periodSize const [curr, prev] = await Promise.all([ - fetchRows(currRange, periodSize), - fetchRows(prevRange, periodSize), + listPeriods({ range: currRange, size: periodSize }), + listPeriods({ range: prevRange, size: periodSize }), ]) return { curr, prev } }, { diff --git a/src/pages/app/components/Habit/components/Period/index.tsx b/src/pages/app/components/Habit/Period/index.tsx similarity index 87% rename from src/pages/app/components/Habit/components/Period/index.tsx rename to src/pages/app/components/Habit/Period/index.tsx index dc94f404b..b977fc567 100644 --- a/src/pages/app/components/Habit/components/Period/index.tsx +++ b/src/pages/app/components/Habit/Period/index.tsx @@ -7,8 +7,7 @@ import { GRID_CELL_STYLE } from "@app/components/common/grid" import { KanbanCard } from "@app/components/common/kanban" -import { t } from "@app/locale" -import { useXsState } from "@hooks" +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" import { defineComponent } from "vue" import Average from "./Average" @@ -23,10 +22,7 @@ const _default = defineComponent(() => { const isXs = useXsState() return () => ( - <KanbanCard - title={t(msg => msg.habit.period.title)} - v-slots={{ filter: () => <Filter /> }} - > + <KanbanCard title={msg => msg.habit.period.title} v-slots={{ filter: () => <Filter /> }}> <Flex gap={1} column={isXs.value} diff --git a/src/pages/app/components/Habit/components/Site/DailyTrend/Wrapper.ts b/src/pages/app/components/Habit/Site/DailyTrend/Wrapper.ts similarity index 90% rename from src/pages/app/components/Habit/components/Site/DailyTrend/Wrapper.ts rename to src/pages/app/components/Habit/Site/DailyTrend/Wrapper.ts index 22cc825b0..224e99bf8 100644 --- a/src/pages/app/components/Habit/components/Site/DailyTrend/Wrapper.ts +++ b/src/pages/app/components/Habit/Site/DailyTrend/Wrapper.ts @@ -1,21 +1,16 @@ -import { t } from "@app/locale" +import { t } from '@app/locale' import { getLineSeriesPalette, tooltipDot, tooltipFlexLine, tooltipSpaceLine } from "@app/util/echarts" import { cvt2LocaleTime, periodFormatter } from "@app/util/time" -import { EchartsWrapper } from "@hooks/useEcharts" +import { EchartsWrapper } from '@hooks' import { groupBy, sum } from "@util/array" import { getHost } from "@util/stat" import { getAllDatesBetween } from "@util/time" -import { - type ComposeOption, - type GridComponentOption, - type LegendComponentOption, - type LineSeriesOption, - type LinearGradientObject, - type TitleComponentOption, - type TooltipComponentOption, +import type { + ComposeOption, GridComponentOption, LegendComponentOption, LineSeriesOption, LinearGradientObject, + TitleComponentOption, TooltipComponentOption, } from "echarts" -import { type TopLevelFormatterParams, type YAXisOption } from "echarts/types/dist/shared" +import type { TopLevelFormatterParams, YAXisOption } from "echarts/types/dist/shared" import { generateTitleOption } from "../common" type EcOption = ComposeOption< @@ -39,9 +34,9 @@ const LEGEND_COLOR_MAP = { const TITLE = t(msg => msg.habit.site.trend.title) export type BizOption = { - rows: timer.stat.Row[] + rows: tt4b.stat.Row[] dateRange: [Date, Date] - timeFormat: timer.app.TimeFormat + timeFormat: tt4b.ui.TimeFormat } const valueYAxis = (): YAXisOption => ({ @@ -52,7 +47,7 @@ const valueYAxis = (): YAXisOption => ({ splitLine: { show: false }, }) -const formatTimeTooltip = (params: TopLevelFormatterParams, format: timer.app.TimeFormat) => { +const formatTimeTooltip = (params: TopLevelFormatterParams, format: tt4b.ui.TimeFormat) => { if (!Array.isArray(params)) return '' const date = params?.[0]?.name if (!date) return '' @@ -68,7 +63,7 @@ const formatTimeTooltip = (params: TopLevelFormatterParams, format: timer.app.Ti ? periodFormatter(value as number, { format }) : (value as number) return tooltipFlexLine( - `<b>${tooltipDot(color?.colorStops?.[0]?.color)} ${valueStr}</b>`, + `<b>${tooltipDot(color?.colorStops?.[0]?.color ?? '#000')} ${valueStr}</b>`, seriesName, ) }).join('') diff --git a/src/pages/app/components/Habit/components/Site/DailyTrend/index.tsx b/src/pages/app/components/Habit/Site/DailyTrend/index.tsx similarity index 94% rename from src/pages/app/components/Habit/components/Site/DailyTrend/index.tsx rename to src/pages/app/components/Habit/Site/DailyTrend/index.tsx index 4b08529dd..33da1ad3b 100644 --- a/src/pages/app/components/Habit/components/Site/DailyTrend/index.tsx +++ b/src/pages/app/components/Habit/Site/DailyTrend/index.tsx @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { useEcharts } from "@hooks/useEcharts" +import { useEcharts } from '@hooks' import { computed, defineComponent } from "vue" import { useHabitFilter } from "../../context" import { useRows } from "../context" diff --git a/src/pages/app/components/Habit/components/Site/Distribution/Wrapper.ts b/src/pages/app/components/Habit/Site/Distribution/Wrapper.ts similarity index 93% rename from src/pages/app/components/Habit/components/Site/Distribution/Wrapper.ts rename to src/pages/app/components/Habit/Site/Distribution/Wrapper.ts index 4e5d471a1..606893114 100644 --- a/src/pages/app/components/Habit/components/Site/Distribution/Wrapper.ts +++ b/src/pages/app/components/Habit/Site/Distribution/Wrapper.ts @@ -1,25 +1,16 @@ -import { t } from "@app/locale" +import { t } from '@app/locale' import { getPieBorderColor, getSeriesPalette } from "@app/util/echarts" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getPrimaryTextColor, getRegularTextColor } from "@pages/util/style" +import { EchartsWrapper } from '@hooks' +import { getPrimaryTextColor, getRegularTextColor } from '@pages/util/style' import { groupBy, sum } from "@util/array" import { getHost } from "@util/stat" import { MILL_PER_HOUR, MILL_PER_MINUTE, MILL_PER_SECOND } from "@util/time" -import { - type ComposeOption, - type LegendComponentOption, - type PieSeriesOption, - type TitleComponentOption -} from "echarts" -import { - type GridOption, - type TooltipOption, - type TopLevelFormatterParams -} from "echarts/types/dist/shared" +import type { ComposeOption, LegendComponentOption, PieSeriesOption, TitleComponentOption } from "echarts" +import type { GridOption, TooltipOption, TopLevelFormatterParams } from "echarts/types/dist/shared" import { computeAverageLen, generateTitleOption } from "../common" export type BizOption = { - rows: timer.stat.Row[] + rows: tt4b.stat.Row[] dateRange: [Date, Date] } diff --git a/src/pages/app/components/Habit/components/Site/Distribution/index.tsx b/src/pages/app/components/Habit/Site/Distribution/index.tsx similarity index 87% rename from src/pages/app/components/Habit/components/Site/Distribution/index.tsx rename to src/pages/app/components/Habit/Site/Distribution/index.tsx index 157c65a32..36adeb40a 100644 --- a/src/pages/app/components/Habit/components/Site/Distribution/index.tsx +++ b/src/pages/app/components/Habit/Site/Distribution/index.tsx @@ -5,9 +5,9 @@ * https://opensource.org/licenses/MIT */ -import { useEcharts } from "@hooks/useEcharts" +import { useHabitFilter } from "@app/components/Habit/context" +import { useEcharts } from '@hooks' import { computed, defineComponent } from "vue" -import { useHabitFilter } from "../../context" import { useDateMergedRows } from "../context" import Wrapper, { type BizOption } from "./Wrapper" diff --git a/src/pages/app/components/Habit/components/Site/Summary.tsx b/src/pages/app/components/Habit/Site/Summary.tsx similarity index 86% rename from src/pages/app/components/Habit/components/Site/Summary.tsx rename to src/pages/app/components/Habit/Site/Summary.tsx index 9b1d413e7..b30564f62 100644 --- a/src/pages/app/components/Habit/components/Site/Summary.tsx +++ b/src/pages/app/components/Habit/Site/Summary.tsx @@ -1,8 +1,8 @@ -import { GRID_CELL_STYLE } from "@app/components/common/grid" -import { KanbanIndicatorCell } from "@app/components/common/kanban" -import { t } from "@app/locale" -import { periodFormatter } from "@app/util/time" -import { useXsState } from "@hooks" +import { GRID_CELL_STYLE } from '@app/components/common/grid' +import { KanbanIndicatorCell } from '@app/components/common/kanban' +import { t } from '@app/locale' +import { periodFormatter } from '@app/util/time' +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" import { sum } from "@util/array" import { getHost } from "@util/stat" @@ -24,7 +24,7 @@ type Result = { exclusiveToday4Average: boolean } -const computeSummary = (rows: timer.stat.Row[] = [], filter: FilterOption): Result => { +const computeSummary = (rows: tt4b.stat.Row[] = [], filter: FilterOption): Result => { const [averageLen, exclusiveToday4Average, exclusiveDate] = computeAverageLen(filter?.dateRange) const totalFocus = sum(rows.map(r => r.focus)) const totalFocus4Average = exclusiveDate ? sum(rows.filter(r => r.date !== exclusiveDate).map(r => r.focus)) : totalFocus @@ -58,10 +58,7 @@ const _default = defineComponent(() => { const isXs = useXsState() return () => ( - <Flex - flex={isXs.value ? undefined : 4} - column gap={1} - > + <Flex flex={isXs.value ? undefined : 4} column gap={1}> <KanbanIndicatorCell mainName={t(msg => msg.analysis.common.focusTotal)} mainValue={periodFormatter(summary.value?.focus?.total, { format: filter.timeFormat })} @@ -74,7 +71,7 @@ const _default = defineComponent(() => { mainName={t(msg => msg.habit.site.countTotal)} mainValue={computeCountText(summary.value?.count)} subTips={msg => msg.habit.site.siteAverage} - subValue={summary.value?.count?.siteAverage?.toFixed(0) || '-'} + subValue={summary.value?.count?.siteAverage?.toFixed(1) ?? '-'} subInfo={summary.value?.exclusiveToday4Average ? t(msg => msg.habit.site.exclusiveToday) : undefined} containerStyle={GRID_CELL_STYLE} /> diff --git a/src/pages/app/components/Habit/components/Site/TopK/Wrapper.ts b/src/pages/app/components/Habit/Site/TopK/Wrapper.ts similarity index 77% rename from src/pages/app/components/Habit/components/Site/TopK/Wrapper.ts rename to src/pages/app/components/Habit/Site/TopK/Wrapper.ts index 85d981f7d..4b8d089f1 100644 --- a/src/pages/app/components/Habit/components/Site/TopK/Wrapper.ts +++ b/src/pages/app/components/Habit/Site/TopK/Wrapper.ts @@ -5,18 +5,14 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { t } from '@app/locale' import { getStepColors } from "@app/util/echarts" import { periodFormatter } from "@app/util/time" -import { EchartsWrapper } from "@hooks/useEcharts" +import { EchartsWrapper } from '@hooks' import { generateSiteLabel } from "@util/site" import { identifyTargetKey, isSite } from "@util/stat" -import { - type BarSeriesOption, - type ComposeOption, - type GridComponentOption, - type TitleComponentOption, - type TooltipComponentOption, +import type { + BarSeriesOption, ComposeOption, GridComponentOption, TitleComponentOption, TooltipComponentOption, } from "echarts" import { type TopLevelFormatterParams } from "echarts/types/dist/shared" import { type SeriesDataItem, generateTitleOption } from "../common" @@ -29,8 +25,8 @@ type EcOption = ComposeOption< > type BizOption = { - rows: timer.stat.Row[] - timeFormat: timer.app.TimeFormat + rows: tt4b.stat.Row[] + timeFormat: tt4b.ui.TimeFormat } const TOP_NUM = 8 @@ -38,10 +34,10 @@ const TOP_NUM = 8 const MARGIN_LEFT_P = 8 const MARGIN_RIGHT_P = 8 -const formatFocusTooltip = (params: TopLevelFormatterParams, format: timer.app.TimeFormat): string => { +const formatFocusTooltip = (params: TopLevelFormatterParams, format: tt4b.ui.TimeFormat): string => { const param = Array.isArray(params) ? params[0] : params const { data } = param || {} - const row = (data as any)?.row as timer.stat.Row + const row = (data as any)?.row as tt4b.stat.Row if (!isSite(row)) return '' @@ -54,27 +50,23 @@ const formatFocusTooltip = (params: TopLevelFormatterParams, format: timer.app.T </div> ` } +type MergeRow = + | MakeRequired<tt4b.stat.SiteRow | tt4b.stat.CateRow, 'mergedDates' | 'mergedRows'> + | MakeRequired<tt4b.stat.GroupRow, 'mergedDates' | 'mergedRows'> -function mergeDate(origin: timer.stat.Row[]): timer.stat.Row[] { - const map: Record< - string, - | MakeRequired<timer.stat.SiteRow | timer.stat.CateRow, 'mergedDates' | 'mergedRows'> - | MakeRequired<timer.stat.GroupRow, 'mergedDates'> - > = {} +function mergeDate(origin: tt4b.stat.Row[]): tt4b.stat.Row[] { + const map: Record<string, MergeRow> = {} origin.forEach(ele => { - const { date = '', focus, time } = ele + const { date, focus, time } = ele const key = identifyTargetKey(ele) - let exist = map[key] - if (!exist) { - exist = map[key] = { - ...ele, - focus: 0, - time: 0, - mergedRows: [], - mergedDates: [], - composition: { focus: [], time: [], run: [] }, - } - } + const exist: MergeRow = map[key] ?? (map[key] = { + ...ele, + focus: 0, + time: 0, + mergedRows: [], + mergedDates: [], + composition: { focus: [], time: [], run: [] }, + }) exist.focus += focus ?? 0 exist.time += time ?? 0 exist.mergedDates.push(date) @@ -83,7 +75,7 @@ function mergeDate(origin: timer.stat.Row[]): timer.stat.Row[] { return newRows } -async function generateOption(rows: timer.stat.Row[] = [], timeFormat: timer.app.TimeFormat, dom: HTMLElement): Promise<EcOption> { +async function generateOption(rows: tt4b.stat.Row[] = [], timeFormat: tt4b.ui.TimeFormat, dom: HTMLElement): Promise<EcOption> { const merged = mergeDate(rows) const topList = merged.sort((a, b) => b.focus - a.focus).splice(0, TOP_NUM).reverse() const max = topList[topList.length - 1]?.focus ?? 0 @@ -154,7 +146,7 @@ async function generateOption(rows: timer.stat.Row[] = [], timeFormat: timer.app padding: [0, 4, 0, 0], formatter: (params: TopLevelFormatterParams) => { const param = Array.isArray(params) ? params[0] : params - const { row } = (param.data || {}) as SeriesDataItem + const { row } = (param?.data ?? {}) as SeriesDataItem if (!isSite(row)) return '' const { siteKey, alias } = row return alias ?? siteKey.host diff --git a/src/pages/app/components/Habit/components/Site/TopK/index.tsx b/src/pages/app/components/Habit/Site/TopK/index.tsx similarity index 86% rename from src/pages/app/components/Habit/components/Site/TopK/index.tsx rename to src/pages/app/components/Habit/Site/TopK/index.tsx index 9fb83b6b1..ec8fa8e2a 100644 --- a/src/pages/app/components/Habit/components/Site/TopK/index.tsx +++ b/src/pages/app/components/Habit/Site/TopK/index.tsx @@ -5,9 +5,9 @@ * https://opensource.org/licenses/MIT */ -import { useEcharts } from "@hooks/useEcharts" +import { useHabitFilter } from "@app/components/Habit/context" +import { useEcharts } from '@hooks' import { computed, defineComponent } from "vue" -import { useHabitFilter } from "../../context" import { useDateMergedRows } from "../context" import Wrapper from "./Wrapper" diff --git a/src/pages/app/components/Habit/components/Site/common.ts b/src/pages/app/components/Habit/Site/common.ts similarity index 94% rename from src/pages/app/components/Habit/components/Site/common.ts rename to src/pages/app/components/Habit/Site/common.ts index 26529f06b..4a63023fc 100644 --- a/src/pages/app/components/Habit/components/Site/common.ts +++ b/src/pages/app/components/Habit/Site/common.ts @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { getRegularTextColor } from "@pages/util/style" +import { getRegularTextColor } from '@pages/util/style' import { formatTimeYMD, getDayLength, isSameDay } from "@util/time" import { type TitleComponentOption } from "echarts/components" @@ -25,7 +25,7 @@ export const generateTitleOption = (text: string): TitleComponentOption => { export type SeriesDataItem = { value: number - row: timer.stat.Row + row: tt4b.stat.Row } /** diff --git a/src/pages/app/components/Habit/Site/context.ts b/src/pages/app/components/Habit/Site/context.ts new file mode 100644 index 000000000..b23117231 --- /dev/null +++ b/src/pages/app/components/Habit/Site/context.ts @@ -0,0 +1,42 @@ +/** + * Copyright (c) 2024 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { listSiteStats } from "@api/sw/stat" +import { useProvide, useProvider, useRequest } from '@hooks' +import { cvtDateRange2Str, getDayLength } from "@util/time" +import { computed, type ShallowRef } from "vue" +import { useHabitFilter } from "../context" + +type Context = { + rows: ShallowRef<tt4b.stat.Row[]> + dateMergedRows: ShallowRef<tt4b.stat.Row[]> +} + +const NAMESPACE = 'habitSite' + +export const initProvider = () => { + const filter = useHabitFilter() + + const { data: rows } = useRequest(() => listSiteStats({ date: cvtDateRange2Str(filter.dateRange) }), { + deps: [() => filter.dateRange], + defaultValue: [], + }) + + const dateRangeLength = computed(() => getDayLength(filter.dateRange?.[0], filter.dateRange?.[1])) + + const { data: dateMergedRows } = useRequest(() => listSiteStats({ date: cvtDateRange2Str(filter.dateRange), mergeDate: true }), { + deps: [() => filter.dateRange], + defaultValue: [], + }) + useProvide<Context>(NAMESPACE, { rows, dateMergedRows }) + + return dateRangeLength +} + +export const useRows = (): ShallowRef<tt4b.stat.Row[]> => useProvider<Context, 'rows'>(NAMESPACE, "rows").rows + +export const useDateMergedRows = (): ShallowRef<tt4b.stat.Row[]> => useProvider<Context, 'dateMergedRows'>(NAMESPACE, 'dateMergedRows').dateMergedRows \ No newline at end of file diff --git a/src/pages/app/components/Habit/components/Site/index.tsx b/src/pages/app/components/Habit/Site/index.tsx similarity index 86% rename from src/pages/app/components/Habit/components/Site/index.tsx rename to src/pages/app/components/Habit/Site/index.tsx index 6eed0217b..3fc8ec4c9 100644 --- a/src/pages/app/components/Habit/components/Site/index.tsx +++ b/src/pages/app/components/Habit/Site/index.tsx @@ -5,10 +5,9 @@ * https://opensource.org/licenses/MIT */ -import { GRID_CELL_STYLE, GRID_WRAPPER_STYLE } from "@app/components/common/grid" +import { GRID_CELL_STYLE, GRID_WRAPPER_STYLE } from '@app/components/common/grid' import { KanbanCard } from "@app/components/common/kanban" -import { t } from "@app/locale" -import { useXsState } from "@hooks" +import { useXsState } from '@hooks' import Flex from "@pages/components/Flex" import { computed, defineComponent, type StyleValue } from "vue" import { initProvider } from "./context" @@ -27,7 +26,7 @@ const _default = defineComponent(() => { height: isXs.value ? '200px' : undefined, } satisfies StyleValue)) return () => ( - <KanbanCard title={t(msg => msg.habit.site.title)}> + <KanbanCard title={msg => msg.habit.site.title}> <Flex gap={1} column={isXs.value} style={GRID_WRAPPER_STYLE}> <Summary /> <Flex flex={isXs.value ? undefined : 4} style={topKStyle.value}> @@ -42,7 +41,7 @@ const _default = defineComponent(() => { </Flex> )} </Flex> - </KanbanCard > + </KanbanCard> ) }) diff --git a/src/pages/app/components/Habit/components/Period/Average/Wrapper.tsx b/src/pages/app/components/Habit/components/Period/Average/Wrapper.tsx deleted file mode 100644 index 42711e9c1..000000000 --- a/src/pages/app/components/Habit/components/Period/Average/Wrapper.tsx +++ /dev/null @@ -1,162 +0,0 @@ -/** - * Copyright (c) 2024 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { t } from "@app/locale" -import { getCompareColor, tooltipDot, tooltipFlexLine, tooltipSpaceLine } from "@app/util/echarts" -import { EchartsWrapper } from "@hooks/useEcharts" -import { getPrimaryTextColor } from "@pages/util/style" -import { averageByDay, MINUTE_PER_PERIOD } from "@util/period" -import { formatPeriodCommon, MILL_PER_MINUTE } from "@util/time" -import { - type BarSeriesOption, - type ComposeOption, - type GridComponentOption, type TooltipComponentOption -} from "echarts" -import { type TopLevelFormatterParams } from "echarts/types/dist/shared" -import { generateGridOption } from "../common" - -type EcOption = ComposeOption< - | BarSeriesOption - | GridComponentOption - | TooltipComponentOption -> - -export type BizOption = { - currRange: timer.period.KeyRange - prevRange: timer.period.KeyRange - curr: timer.period.Row[] - prev: timer.period.Row[] - periodSize: number -} - -const [CURR_COLOR = '', PREV_COLOR = ''] = getCompareColor() - -const cvt2Item = (row: timer.period.Row): number => { - const milliseconds = row.milliseconds - return milliseconds -} - -const formatXAxis = (idx: number, periodSize: number) => { - let min = idx * periodSize * MINUTE_PER_PERIOD - const hour = Math.floor(min / 60) - min = min - hour * 60 - return hour.toString().padStart(2, '0') + ':' + min.toString().padStart(2, '0') -} - -const key2Str = (key: timer.period.Key) => { - const { month, date } = key - return `${month?.toString?.()?.padStart(2, '0')}/${date?.toString?.()?.padStart(2, '0')}` -} - -const isSameDay = (keyRange: timer.period.KeyRange): boolean => { - const [start, end] = keyRange || [] - return start?.year === end?.year - && start?.month === end?.month - && start?.date === end?.date -} - -const range2Str = (keyRange: timer.period.KeyRange) => { - const [start, end] = keyRange - return isSameDay(keyRange) ? key2Str(start) : `${key2Str(start)}-${key2Str(end)}` -} - -const formatValueLine = (mill: number, range: timer.period.KeyRange, color: string): string => { - return tooltipFlexLine( - `${tooltipDot(color)} <b>${formatPeriodCommon(mill ?? 0)}</b>`, - range2Str(range), - ) -} - -const formatTooltip = (params: TopLevelFormatterParams, biz: BizOption): string => { - const { periodSize, prevRange, currRange } = biz - if (!Array.isArray(params)) return '' - const [curr, prev] = params || [] - - const idx = curr.dataIndex - const start = formatXAxis(idx, periodSize) - const end = formatXAxis(idx + 1, periodSize) - - const periodStr = `${start}-${end}` - const timeLine = isSameDay(currRange) - ? periodStr - : tooltipFlexLine( - t(msg => msg.habit.period.chartType.average), - periodStr, - ) - - const currLine = formatValueLine(curr.value as number, currRange, CURR_COLOR) - const prevLine = formatValueLine(-(prev?.value ?? 0 as number), prevRange, PREV_COLOR) - - return `${timeLine}${tooltipSpaceLine()}${currLine}${prevLine}` -} - -const generateOption = (biz: BizOption): EcOption => { - let { curr, prev, periodSize } = biz - - curr = averageByDay(curr, periodSize) - prev = averageByDay(prev, periodSize) - - const currData = curr.map(r => cvt2Item(r)) - const prevData = prev.map(r => cvt2Item(({ ...r, milliseconds: -r.milliseconds }))) - - const textColor = getPrimaryTextColor() - const borderRadius = 5 * periodSize - - return { - tooltip: { - trigger: 'axis', - formatter: (params: TopLevelFormatterParams) => formatTooltip(params, biz), - }, - grid: generateGridOption(), - xAxis: { - type: 'category', - axisLabel: { - color: textColor, - interval: (16 / periodSize - 1), - formatter: (_, index) => formatXAxis(index, periodSize), - }, - axisLine: { show: false }, - axisTick: { show: false }, - min: 0, - max: currData.length, - offset: -borderRadius * 2, - }, - yAxis: { - type: 'value', - axisLabel: { show: false }, - axisTick: { show: false }, - splitLine: { show: false }, - max: Math.max(...currData) + MILL_PER_MINUTE, - min: Math.min(...prevData) - MILL_PER_MINUTE, - }, - series: [ - { - type: "bar", - stack: 'one', - large: true, - data: currData.map((value, idx) => ({ - value, - itemStyle: { borderRadius: prevData[idx] ? [borderRadius, borderRadius, 0, 0] : borderRadius }, - })), - barCategoryGap: '50%', - color: CURR_COLOR, - }, { - type: "bar", - stack: 'one', - large: true, - data: prevData.map((value, idx) => ({ - value, - itemStyle: { borderRadius: currData[idx] ? [0, 0, borderRadius, borderRadius] : borderRadius }, - })), - color: PREV_COLOR, - } - ], - } -} - -export default class Wrapper extends EchartsWrapper<BizOption, EcOption> { - generateOption = generateOption -} \ No newline at end of file diff --git a/src/pages/app/components/Habit/components/Site/context.ts b/src/pages/app/components/Habit/components/Site/context.ts deleted file mode 100644 index a39f3d0a3..000000000 --- a/src/pages/app/components/Habit/components/Site/context.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Copyright (c) 2024 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { useProvide, useProvider, useRequest } from "@hooks" -import statService from "@service/stat-service" -import { mergeDate } from "@service/stat-service/merge/date" -import { getDayLength } from "@util/time" -import { computed, type Ref } from "vue" -import { useHabitFilter } from "../context" - -type Context = { - rows: Ref<timer.stat.Row[]> - dateMergedRows: Ref<timer.stat.Row[]> -} - -const NAMESPACE = 'habitSite' - -export const initProvider = () => { - const filter = useHabitFilter() - - const { data: rows } = useRequest(() => statService.selectSite({ date: filter.dateRange }), { - deps: [() => filter.dateRange], - defaultValue: [], - }) - - const dateRangeLength = computed(() => getDayLength(filter.dateRange?.[0], filter.dateRange?.[1])) - - const dateMergedRows = computed(() => mergeDate(rows.value ?? [])) - useProvide<Context>(NAMESPACE, { rows, dateMergedRows }) - - return dateRangeLength -} - -export const useRows = (): Ref<timer.stat.Row[]> => useProvider<Context, 'rows'>(NAMESPACE, "rows").rows - -export const useDateMergedRows = (): Ref<timer.stat.Row[]> => useProvider<Context, 'dateMergedRows'>(NAMESPACE, 'dateMergedRows').dateMergedRows \ No newline at end of file diff --git a/src/pages/app/components/Habit/components/context.ts b/src/pages/app/components/Habit/context.ts similarity index 88% rename from src/pages/app/components/Habit/components/context.ts rename to src/pages/app/components/Habit/context.ts index b1c10f41e..5443b9cf5 100644 --- a/src/pages/app/components/Habit/components/context.ts +++ b/src/pages/app/components/Habit/context.ts @@ -5,12 +5,12 @@ * https://opensource.org/licenses/MIT */ -import { useProvide, useProvider } from "@hooks" +import { useProvide, useProvider } from '@hooks' import { daysAgo } from "@util/time" import { reactive, Reactive } from "vue" export type FilterOption = { - timeFormat: timer.app.TimeFormat + timeFormat: tt4b.ui.TimeFormat dateRange: [Date, Date] } diff --git a/src/pages/app/components/Habit/index.tsx b/src/pages/app/components/Habit/index.tsx index d77a2e9cf..67ca15e82 100644 --- a/src/pages/app/components/Habit/index.tsx +++ b/src/pages/app/components/Habit/index.tsx @@ -4,20 +4,20 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import ContentContainer, { FilterContainer } from "@app/components/common/ContentContainer" import { ElScrollbar } from "element-plus" import { defineComponent, type StyleValue } from "vue" -import HabitFilter from "./components/HabitFilter" -import Period from "./components/Period" -import Site from "./components/Site" -import { initHabit } from "./components/context" +import ContentContainer, { FilterContainer } from '../common/ContentContainer' +import HabitFilter from "./HabitFilter" +import Period from "./Period" +import Site from "./Site" +import { initHabit } from "./context" const _default = defineComponent(() => { initHabit() return () => ( <ElScrollbar height="100%" style={{ width: '100%' } satisfies StyleValue}> - <ContentContainer > + <ContentContainer> <FilterContainer> <HabitFilter /> </FilterContainer> diff --git a/src/pages/app/components/HelpUs/MemberList.tsx b/src/pages/app/components/HelpUs/MemberList.tsx index 44d2c54f7..a8e43f56e 100644 --- a/src/pages/app/components/HelpUs/MemberList.tsx +++ b/src/pages/app/components/HelpUs/MemberList.tsx @@ -6,35 +6,31 @@ */ import { getMembers } from "@api/crowdin" -import { t } from "@app/locale" -import { useRequest } from "@hooks" +import { t } from '@app/locale' +import { useRequest } from '@hooks' import Box from "@pages/components/Box" -import Flex from "@pages/components/Flex" +import Flex from '@pages/components/Flex' +import Img from '@pages/components/Img' import { ElDivider } from "element-plus" import { defineComponent } from "vue" const _default = defineComponent(() => { const { data: list } = useRequest(async () => { - const members = await getMembers() || [] - return members.sort((a, b) => (a.joinedAt || "").localeCompare(b.joinedAt || "")) + const members = await getMembers() + return members.sort((a, b) => a.joinedAt.localeCompare(b.joinedAt)) }) return () => ( <Box marginTop={10}> - <ElDivider>{t(msg => msg.helpUs.contributors)}</ElDivider> - <Flex - wrap gap={15} justify="space-around" - marginInline="auto" paddingBlock={5} - > + <ElDivider>{t(msg => msg.helpUs.contributors)} ({list.value?.length ?? '-'})</ElDivider> + <Flex wrap gap={15} justify="space-around" marginInline="auto" paddingBlock={5}> {list.value?.map(({ avatarUrl, username }, idx, arr) => ( <a href={`https://crowdin.com/profile/${username}`} target="_blank" style={idx === (arr.length - 1) ? { marginInlineEnd: 'auto' } : undefined} > - <img - src={avatarUrl} - alt={username} - title={username} + <Img + src={avatarUrl} alt={username} title={username} style={{ width: '60px', height: '60px', borderRadius: '30px' }} /> </a> diff --git a/src/pages/app/components/HelpUs/ProgressList.tsx b/src/pages/app/components/HelpUs/ProgressList.tsx index ce9eecd9c..fc4508575 100644 --- a/src/pages/app/components/HelpUs/ProgressList.tsx +++ b/src/pages/app/components/HelpUs/ProgressList.tsx @@ -6,14 +6,14 @@ */ import { getTranslationStatus, type TranslationStatusInfo } from "@api/crowdin" -import { t } from "@app/locale" -import { useRequest } from "@hooks" +import { t } from '@app/locale' +import { useRequest } from '@hooks' import localeMessages from "@i18n/message/common/locale" import Flex from "@pages/components/Flex" import { ElProgress, type ProgressProps } from "element-plus" import { defineComponent, ref, type StyleValue } from "vue" -type SupportedLocale = timer.Locale | timer.TranslatingLocale +type SupportedLocale = tt4b.Locale | tt4b.TranslatingLocale const localeCrowdMap: { [locale in SupportedLocale]: string } = { en: "en", @@ -43,6 +43,8 @@ const localeCrowdMap: { [locale in SupportedLocale]: string } = { mn: "mn", ar: "ar", hi: "hi", + hu: "hu", + nb: "nb", } const crowdLocaleMap: { [locale: string]: SupportedLocale } = {} @@ -106,9 +108,9 @@ const _default = defineComponent(() => { status={computeType(progress)} style={{ fontSize: '16px' } satisfies StyleValue} > - <Flex width={70} gap={10} fontSize={12} column align="end" color="var(--el-text-color-regular)"> + <Flex width={70} gap={10} fontSize={12} column align="end" style={{ textAlign: 'end' }} color="var(--el-text-color-regular)"> <span>{`${progress}%`}</span> - <span>{localeMessages[locale as timer.Locale]?.name ?? locale}</span> + <span>{localeMessages[locale as tt4b.Locale]?.name ?? locale}</span> </Flex> </ElProgress> ))} diff --git a/src/pages/app/components/HelpUs/index.tsx b/src/pages/app/components/HelpUs/index.tsx index 2872b6e1d..9cd0f3f35 100644 --- a/src/pages/app/components/HelpUs/index.tsx +++ b/src/pages/app/components/HelpUs/index.tsx @@ -1,12 +1,12 @@ -import { createTabAfterCurrent } from "@api/chrome/tab" -import AlertLines from '@app/components/common/AlertLines' -import { t } from "@app/locale" +import { t } from '@app/locale' import { Pointer } from "@element-plus/icons-vue" import Box from "@pages/components/Box" +import { createTabAfterCurrent } from "@api/chrome/tab" import { CROWDIN_HOMEPAGE } from "@util/constant/url" import { ElButton, ElCard, ElScrollbar } from "element-plus" import type { FunctionalComponent, StyleValue } from "vue" -import ContentContainer from "../common/ContentContainer" +import AlertLines from '../common/AlertLines' +import ContentContainer from '../common/ContentContainer' import MemberList from "./MemberList" import ProgressList from "./ProgressList" @@ -22,7 +22,6 @@ const HelpUs: FunctionalComponent = () => ( msg => msg.helpUs.alert.l1, msg => msg.helpUs.alert.l2, msg => msg.helpUs.alert.l3, - msg => msg.helpUs.alert.l4, ]} /> <Box marginBlock={30}> diff --git a/src/pages/app/components/Limit/LimitFilter.tsx b/src/pages/app/components/Limit/LimitFilter.tsx deleted file mode 100644 index 8dca8d56a..000000000 --- a/src/pages/app/components/Limit/LimitFilter.tsx +++ /dev/null @@ -1,89 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { createTabAfterCurrent } from "@api/chrome/tab" -import ButtonFilterItem from "@app/components/common/filter/ButtonFilterItem" -import InputFilterItem from "@app/components/common/filter/InputFilterItem" -import SwitchFilterItem from "@app/components/common/filter/SwitchFilterItem" -import { t } from "@app/locale" -import { OPTION_ROUTE } from "@app/router/constants" -import { Delete, Open, Operation, Plus, SetUp, TurnOff } from "@element-plus/icons-vue" -import Flex from "@pages/components/Flex" -import { getAppPageUrl } from "@util/constant/url" -import { defineComponent } from "vue" -import DropdownButton, { type DropdownButtonItem } from "../common/DropdownButton" -import { useLimitAction, useLimitBatch, useLimitFilter } from "./context" - -const optionPageUrl = getAppPageUrl(OPTION_ROUTE, { i: 'dailyLimit' }) - -type BatchOpt = 'delete' | 'enable' | 'disable' - -const _default = defineComponent(() => { - const { create, test } = useLimitAction() - const filter = useLimitFilter() - const { batchDelete, batchDisable, batchEnable } = useLimitBatch() - - const batchItems: DropdownButtonItem<BatchOpt>[] = [ - { - key: 'delete', - label: t(msg => msg.button.batchDelete), - icon: Delete, - onClick: batchDelete, - }, { - key: 'enable', - label: t(msg => msg.button.batchEnable), - icon: Open, - onClick: batchEnable, - }, { - key: 'disable', - label: t(msg => msg.button.batchDisable), - icon: TurnOff, - onClick: batchDisable, - }, - ] - - return () => ( - <Flex justify="space-between" gap={10}> - <Flex gap={10}> - <InputFilterItem - defaultValue={filter.url} - placeholder={t(msg => msg.limit.item.condition)} - onSearch={val => filter.url = val} - /> - <SwitchFilterItem - historyName="onlyEnabled" - label={t(msg => msg.limit.filterDisabled)} - defaultValue={filter.onlyEnabled} - onChange={val => filter.onlyEnabled = val} - /> - </Flex> - <Flex gap={10}> - <DropdownButton items={batchItems} /> - <ButtonFilterItem - text={t(msg => msg.limit.button.test)} - type="primary" - icon={Operation} - onClick={test} - /> - <ButtonFilterItem - text={t(msg => msg.base.option)} - icon={SetUp} - type="primary" - onClick={() => createTabAfterCurrent(optionPageUrl)} - /> - <ButtonFilterItem - text={t(msg => msg.button.create)} - type="success" - icon={Plus} - onClick={create} - /> - </Flex> - </Flex> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step2.tsx b/src/pages/app/components/Limit/LimitModify/Sop/Step2.tsx deleted file mode 100644 index d4755bf20..000000000 --- a/src/pages/app/components/Limit/LimitModify/Sop/Step2.tsx +++ /dev/null @@ -1,91 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { Delete, WarnTriangleFilled } from "@element-plus/icons-vue" -import { useState } from "@hooks" -import Flex from "@pages/components/Flex" -import { EXCLUDING_PREFIX } from '@util/constant/remain-host' -import { cleanCond } from "@util/limit" -import { ElButton, ElDivider, ElIcon, ElInput, ElLink, ElMessage, ElScrollbar, ElText, type ScrollbarInstance } from "element-plus" -import { type StyleValue, defineComponent, ref } from "vue" -import { useSopData } from "./context" - -const _default = defineComponent(() => { - const data = useSopData() - const scrollbar = ref<ScrollbarInstance>() - - const handleAdd = () => { - let url: string | undefined = inputting.value?.trim?.()?.toLowerCase?.() - if (!url) return ElMessage.warning('URL is blank') - url = cleanCond(url) - if (!url) return ElMessage.warning('URL is invalid') - const urls = data.cond - if (urls.includes(url)) return ElMessage.warning('Duplicated URL') - urls.unshift(url) - scrollbar.value?.scrollTo(0) - - clearInputting() - } - - const handleRemove = (idx: number) => data.cond.splice(idx, 1) - - const [inputting, setInputting, clearInputting] = useState('') - - return () => ( - <Flex column width="100%"> - <Flex width="100%" column gap={5}> - <ElInput - modelValue={inputting.value} - onInput={setInputting} - clearable - onClear={clearInputting} - onKeydown={ev => (ev as KeyboardEvent)?.code === "Enter" && handleAdd()} - v-slots={{ - append: () => ( - <ElButton onClick={handleAdd} style={{ display: 'flex' } satisfies StyleValue}> - {t(msg => msg.button.add)} - </ElButton> - ) - }} - placeholder="www.demo.com, *.demo.com, demo.com/blog/*, demo.com/**, +www.demo.com/blog/list" - /> - <ElText style={{ textAlign: 'start', width: '100%', paddingInlineStart: '10px' } satisfies StyleValue}> - {t(msg => msg.limit.wildcardTip)} - </ElText> - </Flex> - <ElDivider /> - <ElScrollbar maxHeight={320} ref={scrollbar}> - <Flex column width="100%" gap={8}> - {data.cond?.map((url, idx) => ( - <Flex - key={`${url}-${idx}`} - height={32} - align="center" - justify="space-between" - padding='0 20px' - style={{ backgroundColor: 'var(--el-fill-color)', borderRadius: 'var(--el-border-radius-large)' }} - > - <ElText type={url.startsWith(EXCLUDING_PREFIX) ? 'info' : 'primary'}>{url}</ElText> - <ElLink icon={Delete} type="danger" onClick={() => handleRemove(idx)} /> - </Flex> - ))} - </Flex> - <Flex v-show={!data.cond?.length} width="100%" justify="center" gap={10} align="center"> - <ElIcon color="var(--el-color-danger)" size={24}> - <WarnTriangleFilled /> - </ElIcon> - <ElText> - {t(msg => msg.limit.message.noUrl)} - </ElText> - </Flex> - </ElScrollbar> - </Flex> - ) -}) - -export default _default diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step3/PeriodInput.tsx b/src/pages/app/components/Limit/LimitModify/Sop/Step3/PeriodInput.tsx deleted file mode 100644 index c47714918..000000000 --- a/src/pages/app/components/Limit/LimitModify/Sop/Step3/PeriodInput.tsx +++ /dev/null @@ -1,152 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { Check, Close, Plus } from "@element-plus/icons-vue" -import { useState, useSwitch } from "@hooks" -import Flex from "@pages/components/Flex" -import { dateMinute2Idx, period2Str } from "@util/limit" -import { MILL_PER_HOUR } from "@util/time" -import { ElButton, ElTag, ElTimePicker } from "element-plus" -import { type PropType, type StyleValue, defineComponent } from "vue" -import './period-input.sass' - -const BUTTON_STYLE: StyleValue = { - padding: '8px', - height: '32px', - lineHeight: '32px', -} - -const range2Period = (range: [Date, Date]): [number, number] => { - const [start, end] = range - const startIdx = dateMinute2Idx(start) - const endIdx = dateMinute2Idx(end) - return [Math.min(startIdx, endIdx), Math.max(startIdx, endIdx)] -} - -const insertPeriods = (periods: timer.limit.Period[], toInsert: timer.limit.Period) => { - if (!toInsert || !periods) return - let len = periods.length - if (!len) { - periods.push(toInsert) - return - } - for (let i = 0; i < len; i++) { - const pre = periods[i] - const next = periods[i + 1] - if (checkImpact(pre, toInsert)) { - mergePeriod(pre, toInsert) - if (checkImpact(pre, next)) { - mergePeriod(pre, next) - periods.splice(i + 1, 1) - } - return - } - if (checkImpact(toInsert, next)) { - mergePeriod(next, toInsert) - return - } - } - // Append - periods.push(toInsert) - periods.sort((a, b) => a[0] - b[0]) -} - -const mergePeriod = (target: timer.limit.Period, toMerge: timer.limit.Period) => { - if (!target || !toMerge) return - target[0] = Math.min(target[0], toMerge[0]) - target[1] = Math.max(target[1], toMerge[1]) -} - -const checkImpact = (p1: timer.limit.Period, p2: timer.limit.Period): boolean => { - if (!p1 || !p2) return false - const [s1, e1] = p1 - const [s2, e2] = p2 - return (s1 >= s2 && s1 <= e2) || (s2 >= s1 && s2 <= e1) -} - -const rangeInitial = (): [Date, Date] => { - const now = new Date() - return [now, new Date(now.getTime() + MILL_PER_HOUR)] -} - -const _default = defineComponent({ - props: { - modelValue: Array as PropType<timer.limit.Period[]> - }, - emits: { - change: (_periods: timer.limit.Period[]) => true, - }, - setup(props, ctx) { - const [editing, openEditing, closeEditing] = useSwitch(false) - const [editingRange, setEditingRange] = useState(rangeInitial()) - - const handleEdit = () => { - openEditing() - setEditingRange(rangeInitial()) - } - - const handleSave = () => { - const val = range2Period(editingRange.value) - const oldPeriods = props.modelValue?.map(p => ([p?.[0], p?.[1]] satisfies Vector<number>)) || [] - insertPeriods(oldPeriods, val) - ctx.emit('change', oldPeriods) - closeEditing() - } - - const handleDelete = (idx: number) => { - const newPeriods = props.modelValue?.filter((_, i) => i !== idx) - ?.map(p => ([p?.[0], p?.[1]] satisfies Vector<number>)) || [] - ctx.emit('change', newPeriods) - } - - return () => ( - <Flex gap={5}> - {props.modelValue?.map((p, idx) => - <ElTag - size="large" - closable - onClose={() => handleDelete(idx)} - > - {period2Str(p)} - </ElTag> - )} - <div v-show={editing.value}> - <ElTimePicker - class='limit-period-input-time-picker' - modelValue={editingRange.value} - onUpdate:modelValue={setEditingRange} - isRange - rangeSeparator="-" - format="HH:mm" - clearable={false} - /> - <ElButton - icon={Close} - onClick={closeEditing} - style={{ ...BUTTON_STYLE, borderRadius: 0 } satisfies StyleValue} - /> - <ElButton - icon={Check} - onClick={handleSave} - style={{ ...BUTTON_STYLE, marginInlineStart: 0 } satisfies StyleValue} - /> - </div> - <ElButton - v-show={!editing.value} - icon={Plus} - onClick={handleEdit} - style={BUTTON_STYLE} - > - {t(msg => msg.button.create)} - </ElButton> - </Flex> - ) - } -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step3/TimeInput.tsx b/src/pages/app/components/Limit/LimitModify/Sop/Step3/TimeInput.tsx deleted file mode 100644 index fde155be6..000000000 --- a/src/pages/app/components/Limit/LimitModify/Sop/Step3/TimeInput.tsx +++ /dev/null @@ -1,258 +0,0 @@ -import { CircleClose, Clock } from "@element-plus/icons-vue" -import { useDebounceFn, useState } from "@hooks" -import { getStyle } from "@pages/util/style" -import { range } from "@util/array" -import { Effect, ElIcon, ElInput, ElPopover, ElScrollbar, ScrollbarInstance, useLocale, useNamespace } from "element-plus" -import { computed, defineComponent, nextTick, onMounted, ref, Transition, watch } from "vue" - -function computeSecond2LimitInfo(time: number): [number, number, number] { - time = time || 0 - const second = time % 60 - const totalMinutes = (time - second) / 60 - const minute = totalMinutes % 60 - const hour = (totalMinutes - minute) / 60 - return [hour, minute, second] -} - -const formatTimeVal = (val: number): string => { - return val?.toString?.()?.padStart?.(2, '0') ?? 'NaN' -} - -const TimeSpinner = defineComponent({ - props: { - max: { - type: Number, - required: true, - }, - visible: Boolean, - modelValue: { - type: Number, - required: true, - }, - }, - emits: { - change: (_val: number) => true, - }, - setup(props, ctx) { - const ns = useNamespace('time') - const scrollbar = ref<ScrollbarInstance>() - const scrolling = ref(false) - - const debounceChangeValue = useDebounceFn((val: number) => { - scrolling.value = false - ctx.emit('change', val) - }, 200) - - const getScrollbarElement = () => { - const el = scrollbar.value?.$el - return el?.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement - } - - const adjustSpinner = (value: number) => { - let scrollbarEl = getScrollbarElement() - if (!scrollbarEl) return - - scrollbarEl.scrollTop = Math.max(0, value * typeItemHeight()) - } - - watch(() => props.modelValue, () => adjustSpinner(props.modelValue)) - watch(() => props.visible, () => props.visible && nextTick(() => adjustSpinner(props.modelValue))) - - const typeItemHeight = (): number => { - const listItem = scrollbar.value?.$el.querySelector('li') as HTMLLinkElement - if (listItem) { - return Number.parseFloat(getStyle(listItem, 'height')) || 0 - } - return 0 - } - - const bindScroll = () => { - let scrollbarEl = getScrollbarElement() - if (!scrollbarEl) return - - scrollbarEl.addEventListener('scroll', () => { - scrolling.value = true - const scrollTop = getScrollbarElement()?.scrollTop ?? 0 - const scrollbarH = (scrollbar.value?.$el as HTMLUListElement)!.offsetHeight ?? 0 - const itemH = typeItemHeight() - const estimatedIdx = Math.round((scrollTop - (scrollbarH * 0.5 - 10) / itemH + 3) / itemH) - const value = Math.min(estimatedIdx, props.max - 1) - debounceChangeValue(value) - }, { passive: true }) - } - - onMounted(() => { - bindScroll() - adjustSpinner(props.modelValue) - }) - - return () => ( - <ElScrollbar - ref={scrollbar} - class={ns.be('spinner', 'wrapper')} - viewClass={ns.be('spinner', 'list')} - noresize - wrapStyle={{ maxHeight: 'inherit' }} - tag="ul" - > - {range(props.max).map(idx => ( - <li - onClick={() => ctx.emit('change', idx)} - class={[ - ns.be('spinner', 'item'), - ns.is('active', idx === props.modelValue), - ]} - > - {idx.toString().padStart(2, '0')} - </li> - ))} - </ElScrollbar> - ) - }, -}) - -const useTimeInput = (source: () => number) => { - const [initialHour, initialMin, initialSec] = computeSecond2LimitInfo(source?.() ?? 0) - const [hour, setHour] = useState(initialHour) - const [minute, setMinute] = useState(initialMin) - const [second, setSecond] = useState(initialSec) - - const reset = () => { - const [hour, min, sec] = computeSecond2LimitInfo(source?.() ?? 0) - setHour(hour) - setMinute(min) - setSecond(sec) - } - - watch(source, reset) - - const getTotalSecond = () => { - let time = 0 - time += (hour.value ?? 0) * 3600 - time += (minute.value ?? 0) * 60 - time += (second.value ?? 0) - return time - } - - return { - hour, minute, second, - setHour, setMinute, setSecond, - reset, getTotalSecond, - } -} - -/** - * Rewrite - * - * https://github.com/element-plus/element-plus/blob/dev/packages/components/time-picker/src/time-picker-com/panel-time-pick.vue - */ -const TimeInput = defineComponent({ - props: { - modelValue: { - type: Number, - required: true, - }, - hourMax: Number, - }, - emits: { - change: (_val: number) => true, - }, - setup(props, ctx) { - const [popoverVisible, setPopoverVisible] = useState(false) - const { - hour, minute, second, - setHour, setMinute, setSecond, - reset, getTotalSecond, - } = useTimeInput(() => props.modelValue) - - const inputText = computed(() => `${formatTimeVal(hour.value)} h ${formatTimeVal(minute.value)} m ${formatTimeVal(second.value)} s`) - - const ns = useNamespace('time') - const nsDate = useNamespace('date') - const nsInput = useNamespace('input') - - const { t: tEle } = useLocale() - - const transitionName = computed(() => popoverVisible.value ? '' : `${ns.namespace.value}-zoom-in-top`) - - const handleCancel = () => { - reset() - setPopoverVisible(false) - } - - const handleConfirm = () => { - ctx.emit('change', getTotalSecond()) - setPopoverVisible(false) - } - - const handleVisibleChange = (newVal: boolean) => { - setPopoverVisible(newVal) - !newVal && handleCancel() - } - - const handleClear = (ev: MouseEvent) => { - ctx.emit('change', 0) - ev.stopPropagation() - } - - return () => ( - <ElPopover - trigger='click' - effect={Effect.LIGHT} - visible={popoverVisible.value} - transition={`${nsDate.namespace.value}-zoom-in-top`} - popperClass={`${nsDate.namespace.value}-picker__popper`} - onUpdate:visible={handleVisibleChange} - v-slots={{ - reference: () => ( - <ElInput - class={[nsDate.b('editor'), nsDate.bm('editor', 'time')]} - prefixIcon={Clock} - modelValue={inputText.value} - inputStyle={{ cursor: 'pointer', width: '100px' }} - readonly - v-slots={{ - suffix: () => !!props.modelValue && ( - <div onClick={handleClear}> - <ElIcon class={[nsInput.e('icon'), 'clear-icon']}> - <CircleClose /> - </ElIcon> - </div> - ) - }} - /> - ) - }}> - <Transition name={transitionName.value}> - <div class={ns.b('panel')} style={{ width: '100%' }}> - <div class={[ns.be('panel', 'content'), 'has-seconds']}> - <div class={[ns.b('spinner'), 'has-seconds']}> - <TimeSpinner max={props.hourMax ?? 24} modelValue={hour.value} onChange={setHour} visible={popoverVisible.value} /> - <TimeSpinner max={60} modelValue={minute.value} onChange={setMinute} visible={popoverVisible.value} /> - <TimeSpinner max={60} modelValue={second.value} onChange={setSecond} visible={popoverVisible.value} /> - </div> - </div> - <div class={[ns.be('panel', 'footer')]}> - <button - type="button" - class={[ns.be('panel', 'btn'), 'cancel']} - onClick={handleCancel} - > - {tEle('el.datepicker.cancel')} - </button> - <button - type="button" - class={[ns.be('panel', 'btn'), 'confirm']} - onClick={handleConfirm} - > - {tEle('el.datepicker.confirm')} - </button> - </div> - </div> - </Transition> - </ElPopover> - ) - }, -}) - -export default TimeInput \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step3/index.tsx b/src/pages/app/components/Limit/LimitModify/Sop/Step3/index.tsx deleted file mode 100644 index 25acb2b8f..000000000 --- a/src/pages/app/components/Limit/LimitModify/Sop/Step3/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import Flex from "@pages/components/Flex" -import { ElForm, ElFormItem, ElInputNumber } from "element-plus" -import { defineComponent } from "vue" -import { useSopData } from "../context" -import PeriodInput from "./PeriodInput" -import TimeInput from "./TimeInput" - -const MAX_HOUR_WEEKLY = 7 * 24 - -const _default = defineComponent(() => { - const data = useSopData() - - return () => ( - <Flex justify="center"> - <ElForm labelWidth={150} labelPosition="left"> - <ElFormItem label={t(msg => msg.limit.item.daily)}> - <Flex gap={10}> - <TimeInput modelValue={data.time} onChange={v => data.time = v} /> - {t(msg => msg.limit.item.or)} - <ElInputNumber - min={0} - step={10} - modelValue={data.count} - onChange={v => data.count = v ?? 0} - v-slots={{ suffix: () => t(msg => msg.limit.item.visits) }} - /> - </Flex> - </ElFormItem> - <ElFormItem label={t(msg => msg.limit.item.weekly)}> - <Flex gap={10}> - <TimeInput modelValue={data.weekly} onChange={v => data.weekly = v} hourMax={MAX_HOUR_WEEKLY} /> - {t(msg => msg.limit.item.or)} - <ElInputNumber - min={0} - step={10} - modelValue={data.weeklyCount} - onChange={v => data.weeklyCount = v ?? 0} - v-slots={{ suffix: () => t(msg => msg.limit.item.visits) }} - /> - </Flex> - </ElFormItem> - <ElFormItem label={t(msg => msg.limit.item.visitTime)}> - <TimeInput modelValue={data.visitTime} onChange={v => data.visitTime = v} /> - </ElFormItem> - <ElFormItem label={t(msg => msg.limit.item.period)}> - <PeriodInput modelValue={data.periods} onChange={v => data.periods = v} /> - </ElFormItem> - </ElForm> - </Flex> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step3/period-input.sass b/src/pages/app/components/Limit/LimitModify/Sop/Step3/period-input.sass deleted file mode 100644 index f7713222d..000000000 --- a/src/pages/app/components/Limit/LimitModify/Sop/Step3/period-input.sass +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -.limit-period-input-time-picker.el-date-editor - width: 120px !important - padding: 0 5px !important - border-top-right-radius: 0px - border-bottom-right-radius: 0px - .el-range__close-icon - width: 0px - .el-range-input - height: 28px diff --git a/src/pages/app/components/Limit/LimitModify/Sop/context.ts b/src/pages/app/components/Limit/LimitModify/Sop/context.ts deleted file mode 100644 index bca28b0ef..000000000 --- a/src/pages/app/components/Limit/LimitModify/Sop/context.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { t } from "@app/locale" -import { useProvide, useProvider } from "@hooks" -import { range } from "@util/array" -import { ElMessage } from "element-plus" -import { type Reactive, reactive, ref, toRaw } from "vue" - -type Step = 0 | 1 | 2 - -type SopData = Required<Omit<timer.limit.Rule, 'id'>> - -type Context = { - data: Reactive<SopData> -} - -const createInitial = (): SopData => ({ - name: '', - time: 3600, - weekly: 0, - cond: [], - visitTime: 0, - periods: [], - enabled: true, - weekdays: range(7), - count: 0, - weeklyCount: 0, - allowDelay: false, - locked: false, -}) - -type Options = { - onSave?: (data: SopData) => void -} - -const NAMESPACE = 'limit_sop_model' - -export const initSop = ({ onSave }: Options) => { - const step = ref<Step>(0) - const data = reactive<SopData>(createInitial()) - - const validator: Record<Step, () => Promise<boolean>> = { - 0: async () => { - const nameVal = data.name?.trim?.() - const weekdaysVal = data.weekdays - if (!nameVal) { - ElMessage.error("Name is empty") - return false - } if (!weekdaysVal?.length) { - ElMessage.error("Effective days are empty") - return false - } - return true - }, - 1: async () => { - if (!data.cond?.length) { - ElMessage.error(t(msg => msg.limit.message.noUrl)) - return false - } - return true - }, - 2: async () => { - const { time, count, weekly, weeklyCount, visitTime, periods } = data - if (true - && !time && !count - && !weekly && !weeklyCount - && !visitTime && !periods?.length - ) { - ElMessage.error(t(msg => msg.limit.message.noRule)) - return false - } - return true - }, - } - - const reset = (rule?: timer.limit.Rule) => { - const rawRule = rule ? toRaw(rule) : createInitial() - Object.entries(rawRule).forEach(([k, v]) => (data as any)[k] = v) - step.value = 0 - } - - const handleNext = async () => { - const stepVal = step.value - const isValid = await validator[stepVal]?.() - if (isValid) { - stepVal === 2 ? onSave?.(toRaw(data)) : step.value++ - } - } - - useProvide<Context>(NAMESPACE, { data }) - - return { - step, reset, handleNext - } -} - -export const useSopData = () => useProvider<Context, 'data'>(NAMESPACE, 'data').data \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitModify/Sop/index.tsx b/src/pages/app/components/Limit/LimitModify/Sop/index.tsx deleted file mode 100644 index 46333b734..000000000 --- a/src/pages/app/components/Limit/LimitModify/Sop/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import DialogSop from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { ElStep, ElSteps } from "element-plus" -import { computed, defineComponent } from "vue" -import { initSop } from "./context" -import Step1 from "./Step1" -import Step2 from "./Step2" -import Step3 from "./Step3" - -export type SopInstance = { - /** - * Reset with rule or initial value - */ - reset: (rule?: timer.limit.Rule) => void -} - -const _default = defineComponent({ - props: { - condDisabled: Boolean, - }, - emits: { - cancel: () => true, - save: (_rule: MakeOptional<timer.limit.Rule, 'id'>) => true, - }, - setup(_, ctx) { - const { reset, step, handleNext } = initSop({ onSave: data => ctx.emit('save', data) }) - const last = computed(() => step.value === 2) - const first = computed(() => step.value === 0) - ctx.expose({ reset } satisfies SopInstance) - - return () => ( - <DialogSop - last={last.value} - first={first.value} - onBack={() => step.value--} - onCancel={() => ctx.emit('cancel')} - onNext={handleNext} - onFinish={handleNext} - v-slots={{ - steps: () => ( - <ElSteps space={200} finishStatus="success" active={step.value} alignCenter> - <ElStep title={t(msg => msg.limit.step.base)} /> - <ElStep title={t(msg => msg.limit.step.url)} /> - <ElStep title={t(msg => msg.limit.step.rule)} /> - </ElSteps> - ), - content: () => <> - <Step1 v-show={step.value === 0} /> - <Step2 v-show={step.value === 1} /> - <Step3 v-show={step.value === 2} /> - </> - }} - /> - ) - } -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitModify/index.tsx b/src/pages/app/components/Limit/LimitModify/index.tsx deleted file mode 100644 index 2abe7dbe6..000000000 --- a/src/pages/app/components/Limit/LimitModify/index.tsx +++ /dev/null @@ -1,84 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { useSwitch } from "@hooks" -import limitService from "@service/limit-service" -import { ElDialog, ElMessage } from "element-plus" -import { computed, defineComponent, nextTick, ref, toRaw } from "vue" -import { type ModifyInstance, useLimitTable } from "../context" -import Sop, { type SopInstance } from "./Sop" - -type Mode = "create" | "modify" - -const _default = defineComponent((_, ctx) => { - const { refresh } = useLimitTable() - const [visible, open, close] = useSwitch() - const sop = ref<SopInstance>() - const mode = ref<Mode>() - const title = computed(() => mode.value === "create" ? t(msg => msg.button.create) : t(msg => msg.button.modify)) - // Cache - let modifyingItem: timer.limit.Rule | undefined = undefined - - const handleSave = async (rule: MakeOptional<timer.limit.Rule, "id">) => { - if (!rule) return - const { cond, enabled, name, time, weekly, visitTime, periods, weekdays, count, weeklyCount } = rule - let saved: timer.limit.Rule - if (mode.value === 'modify') { - if (!modifyingItem) return - saved = { - ...modifyingItem, - cond, enabled, name, time, weekly, visitTime, weekdays, count, weeklyCount, - // Object to array - periods: periods?.map(i => ([i?.[0], i?.[1]] satisfies Vector<number>)), - } satisfies timer.limit.Rule - await limitService.update(saved) - } else { - const toCreate = { - cond, enabled, name, time, weekly, visitTime, weekdays, count, weeklyCount, - // Object to array - periods: periods?.map(i => ([i?.[0], i?.[1]] satisfies Vector<number>)), - allowDelay: false, locked: false, - } satisfies MakeOptional<timer.limit.Rule, 'id'> - const id = await limitService.create(toCreate) - saved = { ...toCreate, id } - } - close() - ElMessage.success(t(msg => msg.operation.successMsg)) - sop.value?.reset?.() - refresh?.() - } - - ctx.expose({ - create() { - open() - mode.value = 'create' - modifyingItem = undefined - nextTick(() => sop.value?.reset()) - }, - modify(row: timer.limit.Item) { - open() - mode.value = 'modify' - modifyingItem = { ...row } - nextTick(() => sop.value?.reset?.(toRaw(row))) - }, - } satisfies ModifyInstance) - - return () => ( - <ElDialog - title={title.value} - modelValue={visible.value} - closeOnClickModal={false} - width={800} - onClose={close} - > - <Sop ref={sop} onSave={handleSave} onCancel={close} /> - </ElDialog> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitTable/RuleContent.tsx b/src/pages/app/components/Limit/LimitTable/RuleContent.tsx deleted file mode 100644 index 0a969f2c2..000000000 --- a/src/pages/app/components/Limit/LimitTable/RuleContent.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { t } from "@app/locale" -import Flex from "@pages/components/Flex" -import { period2Str } from "@util/limit" -import { formatPeriod, MILL_PER_SECOND } from "@util/time" -import { ElTag } from "element-plus" -import { computed, defineComponent, toRef, type PropType } from "vue" - -const TIME_FORMAT = { - dayMsg: '{day}d{hour}h{minute}m{second}s', - hourMsg: '{hour}h{minute}m{second}s', - minuteMsg: '{minute}m{second}s', - secondMsg: '{second}s', -} - -const TimeCountTag = defineComponent({ - props: { - time: Number, - count: Number, - label: String, - }, - setup(props) { - const visible = computed(() => !!props.time || !!props.count) - const content = computed(() => { - const timeContent = props.time ? formatPeriod(props.time * MILL_PER_SECOND, TIME_FORMAT) : '' - const countContent = props.count ? `${props.count} ${t(msg => msg.limit.item.visits)}` : '' - return [timeContent, countContent].filter(str => !!str).join(` ${t(msg => msg.limit.item.or)} `) - }) - - return () => ( - <div v-show={visible.value}> - <ElTag size="small"> - {props.label}: {content.value} - </ElTag> - </div> - ) - }, -}) - -const RuleContent = defineComponent({ - props: { - value: Object as PropType<timer.limit.Item> - }, - setup(props) { - const row = toRef(props, 'value') - - return () => ( - <Flex column gap={4}> - <TimeCountTag - time={row.value?.time} - count={row.value?.count} - label={t(msg => msg.limit.item.daily)} - /> - <TimeCountTag - time={row.value?.weekly} - count={row.value?.weeklyCount} - label={t(msg => msg.limit.item.weekly)} - /> - {!!row.value?.visitTime && ( - <div> - <ElTag size="small" type="danger"> - {t(msg => msg.limit.item.visitTime)}: {formatPeriod(row.value?.visitTime * MILL_PER_SECOND, TIME_FORMAT)} - </ElTag> - </div> - )} - {!!row.value?.periods?.length && <> - <div> - <ElTag size="small" type="info">{t(msg => msg.limit.item.period)}</ElTag> - </div> - <Flex justify="center" gap={4} wrap="wrap"> - {row.value?.periods?.map(p => <ElTag size="small" type="info">{period2Str(p)}</ElTag>)} - </Flex> - </>} - </Flex> - ) - }, -}) - -export default RuleContent \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitTable/Waste.tsx b/src/pages/app/components/Limit/LimitTable/Waste.tsx deleted file mode 100644 index 0b1baa8f4..000000000 --- a/src/pages/app/components/Limit/LimitTable/Waste.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import TooltipWrapper from "@app/components/common/TooltipWrapper" -import { t } from "@app/locale" -import Flex from "@pages/components/Flex" -import { meetLimit, meetTimeLimit } from "@util/limit" -import { formatPeriodCommon } from "@util/time" -import { ElTag } from "element-plus" -import { computed, defineComponent } from "vue" - -const Waste = defineComponent({ - props: { - time: Number, - waste: { - type: Number, - required: true, - }, - count: Number, - visit: Number, - delayCount: Number, - allowDelay: Boolean, - }, - setup(props) { - const timeType = computed(() => meetTimeLimit(props.time, props.waste, props.allowDelay, props.delayCount) ? 'danger' : 'info') - const visitType = computed(() => meetLimit(props.count, props.visit) ? 'danger' : 'info') - - return () => ( - <Flex column gap={5}> - <div> - <TooltipWrapper - trigger="hover" - usePopover={props.allowDelay && !!props.time} - placement="top" - v-slots={{ - content: () => `${t(msg => msg.limit.item.delayCount)}: ${props.delayCount ?? 0}`, - default: () => ( - <ElTag size="small" type={timeType.value}> - {formatPeriodCommon(props.waste)} - </ElTag> - ), - }} - /> - </div> - <div> - <ElTag size="small" type={visitType.value}> - {props.visit ?? 0} {t(msg => msg.limit.item.visits)} - </ElTag> - </div> - </Flex> - ) - }, -}) - -export default Waste \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx b/src/pages/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx deleted file mode 100644 index 9c82e745e..000000000 --- a/src/pages/app/components/Limit/LimitTable/column/LimitOperationColumn.tsx +++ /dev/null @@ -1,61 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { t } from "@app/locale" -import { Delete, Edit } from "@element-plus/icons-vue" -import { locale } from "@i18n" -import { type ElTableRowScope } from "@pages/element-ui/table" -import { ElButton, ElTableColumn } from "element-plus" -import { defineComponent } from "vue" -import { verifyCanModify } from "../../common" -import { useLimitAction, useLimitTable } from "../../context" - -const LOCALE_WIDTH: { [locale in timer.Locale]: number } = { - en: 220, - zh_CN: 200, - ja: 200, - zh_TW: 200, - pt_PT: 250, - uk: 260, - es: 240, - de: 250, - fr: 230, - ru: 240, - ar: 220, -} - -const _default = defineComponent(() => { - const { deleteRow } = useLimitTable() - const { modify } = useLimitAction() - - const handleModify = (row: timer.limit.Item) => verifyCanModify(row) - .then(() => modify(row)) - .catch(() => {/** Do nothing */ }) - - return () => <ElTableColumn - prop="operations" - label={t(msg => msg.button.operation)} - width={LOCALE_WIDTH[locale]} - align="center" - fixed="right" - v-slots={({ row }: ElTableRowScope<timer.limit.Item>) => <> - <ElButton type="danger" size="small" icon={Delete} onClick={() => deleteRow(row)}> - {t(msg => msg.button.delete)} - </ElButton> - <ElButton - type="primary" - size="small" - icon={Edit} - onClick={() => handleModify(row)} - > - {t(msg => msg.button.modify)} - </ElButton> - </> - } - /> -}) - -export default _default diff --git a/src/pages/app/components/Limit/LimitTable/index.tsx b/src/pages/app/components/Limit/LimitTable/index.tsx deleted file mode 100644 index 3e5615a09..000000000 --- a/src/pages/app/components/Limit/LimitTable/index.tsx +++ /dev/null @@ -1,183 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import ColumnHeader from "@app/components/common/ColumnHeader" -import { t } from "@app/locale" -import { useLocalStorage, useRequest, useState } from "@hooks" -import { type ElTableRowScope } from "@pages/element-ui/table" -import weekHelper from "@service/components/week-helper" -import { isEffective } from "@util/limit" -import { ElSwitch, ElTable, ElTableColumn, ElTag, type Sort } from "element-plus" -import { defineComponent, watch } from "vue" -import { useLimitTable } from "../context" -import LimitOperationColumn from "./column/LimitOperationColumn" -import RuleContent from "./RuleContent" -import Waste from "./Waste" -import Weekday from "./Weekday" - -export type LimitSortProp = keyof Pick<timer.limit.Item, 'name' | 'weekdays' | 'waste' | 'weeklyWaste'> - -const DEFAULT_SORT_COL = 'waste' - -const sortMethodByNumVal = (key: keyof timer.limit.Item & 'waste' | 'weeklyWaste'): (a: timer.limit.Item, b: timer.limit.Item) => number => { - return ({ [key]: a }: timer.limit.Item, { [key]: b }: timer.limit.Item) => (a ?? 0) - (b ?? 0) -} - -const sortByEffectiveDays = ({ weekdays: a }: timer.limit.Item, { weekdays: b }: timer.limit.Item) => (a?.length ?? 0) - (b?.length ?? 0) - -const _default = defineComponent(() => { - const { data: weekStartName } = useRequest(async () => { - const offset = await weekHelper.getRealWeekStart() - const name = t(msg => msg.calendar.weekDays)?.split('|')?.[offset] - return name || 'NaN' - }) - - const { - list, table, - changeEnabled, changeDelay, changeLocked - } = useLimitTable() - - const [cachedSort, setCachedSort] = useLocalStorage<Sort>( - '__limit_sort_default__', { prop: DEFAULT_SORT_COL, order: 'descending' } - ) - - const [sort, setSort] = useState(cachedSort) - watch(sort, () => setCachedSort(sort.value)) - - return () => ( - <ElTable - ref={table} - border fit highlightCurrentRow - style={{ width: "100%" }} - height="100%" - data={list.value} - defaultSort={sort.value} - onSort-change={(val: Sort) => setSort({ prop: val?.prop, order: val?.order })} - > - <ElTableColumn type="selection" align="center" fixed="left" /> - <ElTableColumn - prop='name' - label={t(msg => msg.limit.item.name)} - minWidth={120} - align="center" - formatter={({ name }: timer.limit.Item) => name || '-'} - fixed - sortable - sortBy={(row: timer.limit.Item) => row.name} - /> - <ElTableColumn - label={t(msg => msg.limit.item.condition)} - minWidth={180} - align="center" - formatter={({ cond }: timer.limit.Item) => <>{cond?.map?.(c => <span style={{ display: "block" }}>{c}</span>) || ''}</>} - /> - <ElTableColumn - label={t(msg => msg.limit.item.detail)} - minWidth={200} - align="center" - > - {({ row }: ElTableRowScope<timer.limit.Item>) => <RuleContent value={row} />} - </ElTableColumn> - <ElTableColumn - prop='effectiveDays' - label={t(msg => msg.limit.item.effectiveDay)} - minWidth={170} - align="center" - sortable - sortMethod={sortByEffectiveDays} - > - {({ row: { weekdays } }: ElTableRowScope<timer.limit.Item>) => <Weekday value={weekdays} />} - </ElTableColumn> - <ElTableColumn - prop={DEFAULT_SORT_COL} - sortable - sortMethod={sortMethodByNumVal('waste')} - label={t(msg => msg.calendar.range.today)} - minWidth={90} - align="center" - > - {({ row }: ElTableRowScope<timer.limit.Item>) => isEffective(row.weekdays) ? ( - <Waste - waste={row.waste} - time={row.time} - count={row.count} - visit={row.visit} - allowDelay={row.allowDelay} - delayCount={row.delayCount} - /> - ) : ( - <ElTag type="info" size="small"> - {t(msg => msg.limit.item.notEffective)} - </ElTag> - )} - </ElTableColumn> - <ElTableColumn - prop='weeklyWaste' - minWidth={110} - align="center" - sortable - sortMethod={sortMethodByNumVal('weeklyWaste')} - v-slots={{ - header: () => ( - <ColumnHeader - label={t(msg => msg.calendar.range.thisWeek)} - tooltipContent={t(msg => msg.limit.item.weekStartInfo, { weekStart: weekStartName.value })} - /> - ), - default: ({ row: { - weeklyWaste, weekly, - weeklyVisit, weeklyCount, - weeklyDelayCount, allowDelay, - } }: ElTableRowScope<timer.limit.Item>) => ( - <Waste - time={weekly} - waste={weeklyWaste} - count={weeklyCount} - visit={weeklyVisit} - allowDelay={allowDelay} - delayCount={weeklyDelayCount} - /> - ), - }} - /> - <ElTableColumn label={t(msg => msg.button.configuration)}> - <ElTableColumn - label={t(msg => msg.limit.item.enabled)} - minWidth={80} - align="center" - fixed="right" - > - {({ row }: ElTableRowScope<timer.limit.Item>) => ( - <ElSwitch size="small" modelValue={row.enabled} onChange={v => changeEnabled(row, !!v)} /> - )} - </ElTableColumn> - <ElTableColumn - label={t(msg => msg.limit.item.delayAllowed)} - minWidth={80} - align="center" - fixed="right" - > - {({ row }: ElTableRowScope<timer.limit.Item>) => ( - <ElSwitch size="small" modelValue={row.allowDelay} onChange={v => changeDelay(row, !!v)} /> - )} - </ElTableColumn> - <ElTableColumn - label={t(msg => msg.limit.item.locked)} - minWidth={80} - align="center" - fixed="right" - > - {({ row }: ElTableRowScope<timer.limit.Item>) => ( - <ElSwitch size="small" modelValue={row.locked} onChange={v => changeLocked(row, !!v)} /> - )} - </ElTableColumn> - </ElTableColumn> - <LimitOperationColumn /> - </ElTable> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitTest.tsx b/src/pages/app/components/Limit/LimitTest.tsx deleted file mode 100644 index ba1138e51..000000000 --- a/src/pages/app/components/Limit/LimitTest.tsx +++ /dev/null @@ -1,84 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { useState, useSwitch } from "@hooks" -import limitService from "@service/limit-service" -import { ElButton, ElDialog, ElFormItem, ElInput } from "element-plus" -import { computed, defineComponent } from "vue" -import AlertLines, { type AlertLinesProps } from '../common/AlertLines' -import { type TestInstance } from "./context" - -function computeResult(url: string | undefined, inputting: boolean, matched: timer.limit.Rule[]): AlertLinesProps { - if (!url) { - return { type: 'info', title: msg => msg.limit.message.inputTestUrl } - } - if (inputting) { - const title = t(msg => msg.limit.message.clickTestButton, { buttonText: t(msg => msg.button.test) }) - return { type: 'info', title } - } - if (!matched?.length) { - return { type: 'warning', title: msg => msg.limit.message.noRuleMatched } - } else { - return { - type: 'success', - title: msg => msg.limit.message.rulesMatched, - lines: matched.map(m => m.name) - } - } -} - -const _default = defineComponent((_props, ctx) => { - const [url, , clearUrl] = useState<string>() - const [matched, , clearMatched] = useState<timer.limit.Rule[]>([]) - const [visible, open, close] = useSwitch() - const [urlInputting, startInput, endInput] = useSwitch(true) - const result = computed(() => computeResult(url.value, urlInputting.value, matched.value)) - - const changeInput = (newVal?: string) => { - startInput() - url.value = newVal?.trim() - } - - const handleTest = async () => { - endInput() - matched.value = await limitService.select({ url: url.value, filterDisabled: true }) - } - - ctx.expose({ - show: () => { - clearUrl() - open() - startInput() - clearMatched() - } - } satisfies TestInstance) - return () => ( - <ElDialog - title={t(msg => msg.button.test)} - modelValue={visible.value} - closeOnClickModal={false} - onClose={close} - > - <ElFormItem labelWidth={120} label={t(msg => msg.limit.button.test)}> - <ElInput - modelValue={url.value} - clearable - onClear={() => changeInput()} - onKeydown={ev => (ev as KeyboardEvent).key === "Enter" && handleTest()} - onInput={changeInput} - v-slots={{ - append: () => <ElButton onClick={handleTest}>{t(msg => msg.button.test)}</ElButton> - }} - /> - </ElFormItem> - <AlertLines {...result.value} /> - </ElDialog> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/common.ts b/src/pages/app/components/Limit/common.ts deleted file mode 100644 index 791e2263c..000000000 --- a/src/pages/app/components/Limit/common.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { judgeVerificationRequired, processVerification } from "@app/util/limit" -import optionHolder from "@service/components/option-holder" - -const batchJudge = async (items: timer.limit.Item[]): Promise<boolean> => { - if (!items?.length) return false - for (const item of items) { - if (!item) continue - const needVerify = await judgeVerificationRequired(item) - if (needVerify) return true - } - return false -} - -export const verifyCanModify = async (...items: timer.limit.Item[]) => { - const needVerify = await batchJudge(items) - if (!needVerify) return - - // Open delay for limited rules, so verification is required - const option = await optionHolder.get() - await processVerification(option) -} \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/Filter.tsx b/src/pages/app/components/Limit/components/Filter.tsx new file mode 100644 index 000000000..33fc1fdb8 --- /dev/null +++ b/src/pages/app/components/Limit/components/Filter.tsx @@ -0,0 +1,128 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { createTabAfterCurrent } from "@api/chrome/tab" +import DropdownButton, { type DropdownButtonItem } from '@app/components/common/DropdownButton' +import ButtonFilterItem from "@app/components/common/filter/ButtonFilterItem" +import InputFilterItem from "@app/components/common/filter/InputFilterItem" +import SwitchFilterItem from '@app/components/common/filter/SwitchFilterItem' +import { t } from '@app/locale' +import { OPTION_ROUTE } from '@app/router/constants' +import { Delete, Open, Operation, Plus, SetUp, TurnOff, WarningFilled } from "@element-plus/icons-vue" +import { useXsState } from '@hooks' +import Flex from "@pages/components/Flex" +import { getAppPageUrl } from "@util/constant/url" +import { ElIcon, ElText, ElTooltip } from 'element-plus' +import { computed, defineComponent, ref, type Ref, watch } from "vue" +import { useLimitAction, useLimitBatch, useLimitFilter } from "../context" + +const optionPageUrl = getAppPageUrl(OPTION_ROUTE, { i: 'limit' }) + +type BatchOpt = 'delete' | 'enable' | 'disable' + +const useCreateTip = (empty: Ref<boolean>, isXs: Ref<boolean>) => { + const tipVisible = ref(false) + let initialized = false + watch(empty, emptyVal => { + if (initialized || !emptyVal) return + tipVisible.value = true + initialized = true + setTimeout(closeTip, 10000) + }) + const closeTip = () => tipVisible.value = false + const finalVisible = computed(() => !isXs.value && tipVisible.value) + return { tipVisible: finalVisible, closeTip } +} + +const _default = defineComponent(() => { + const { create, test, empty } = useLimitAction() + const isXs = useXsState() + const { tipVisible, closeTip } = useCreateTip(empty, isXs) + const filter = useLimitFilter() + const { batchDelete, batchDisable, batchEnable } = useLimitBatch() + + const batchItems: DropdownButtonItem<BatchOpt>[] = [ + { + key: 'delete', + label: t(msg => msg.button.batchDelete), + icon: Delete, + onClick: batchDelete, + }, { + key: 'enable', + label: t(msg => msg.button.batchEnable), + icon: Open, + onClick: batchEnable, + }, { + key: 'disable', + label: t(msg => msg.button.batchDisable), + icon: TurnOff, + onClick: batchDisable, + }, + ] + + const handleCreateClick = () => { + closeTip() + create() + } + + return () => ( + <Flex justify="space-between" gap={10}> + <Flex gap={10}> + <InputFilterItem + defaultValue={filter.url} + placeholder={t(msg => msg.limit.item.condition)} + onSearch={val => filter.url = val} + /> + <SwitchFilterItem + v-show={!isXs.value} + historyName="effective" + label={t(msg => msg.limit.onlyEffective)} + defaultValue={filter.effective} + onChange={val => filter.effective = val} + /> + </Flex> + <Flex gap={10} align='center'> + <DropdownButton v-show={!isXs.value} items={batchItems} /> + <ButtonFilterItem + text={msg => msg.limit.button.test} + icon={Operation} + onClick={test} + /> + <ButtonFilterItem + v-show={!isXs.value} + text={msg => msg.base.option} + icon={SetUp} + onClick={() => createTabAfterCurrent(optionPageUrl)} + /> + <ElTooltip + visible={tipVisible.value} + // Only close visible + onUpdate:visible={val => !val && closeTip()} + placement='bottom' + effect='light' + content={t(msg => msg.limit.emptyTips)} + v-slots={{ + content: () => (<Flex gap={4} align='center'> + <ElText type='primary'><ElIcon><WarningFilled /></ElIcon></ElText> + <ElText >{t(msg => msg.limit.emptyTips)}</ElText> + </Flex>), + default: () => ( + <ButtonFilterItem + text={msg => msg.button.create} + type="success" + icon={Plus} + onClick={handleCreateClick} + /> + ) + }} + /> + </Flex> + </Flex> + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/List/Card.tsx b/src/pages/app/components/Limit/components/List/Card.tsx new file mode 100644 index 000000000..b83c63240 --- /dev/null +++ b/src/pages/app/components/Limit/components/List/Card.tsx @@ -0,0 +1,99 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { useLimitAction } from "@app/components/Limit/context" +import { t } from '@app/locale' +import { Delete, EditPen } from "@element-plus/icons-vue" +import { css } from '@emotion/css' +import Flex from "@pages/components/Flex" +import { ElButton, ElCard, ElDivider, ElTag, type TagProps, useNamespace } from "element-plus" +import { defineComponent, type FunctionalComponent, type StyleValue } from "vue" +import Rule from "./Rule" + +type Props = { + value: tt4b.limit.Item +} + +const CARD_PADDING = 10 + +const useStyle = () => { + const cardNs = useNamespace('card') + const cardCls = css` + .${cardNs.e('body')} { + padding: ${CARD_PADDING}px; + } + ` + return cardCls +} + +const ALL_WEEKDAYS = t(msg => msg.calendar.weekDays).split('|') + +const Divider: FunctionalComponent<{}> = () => { + const marginInline = `${-CARD_PADDING}px` + const width = `calc(100% + ${CARD_PADDING * 2}px)` + return <ElDivider style={{ marginBlock: '6px', marginInline, width } satisfies StyleValue} /> +} + +const EffectiveDays: FunctionalComponent<{ weekdays?: number[] }> = ({ weekdays = [] }) => { + const weekdayNum = weekdays.length + const first = weekdays[0] + let text: string = '' + let type: TagProps['type'] | undefined = undefined + if (!weekdayNum || weekdayNum === 7) { + text = t(msg => msg.calendar.range.everyday) + type = 'success' + } else if (first !== undefined && weekdayNum === 1) { + text = ALL_WEEKDAYS[first] ?? '' + } else if (first !== undefined) { + text = `${ALL_WEEKDAYS[first] ?? ''}...${weekdayNum}` + } + + return <ElTag size="small" type={type}>{text}</ElTag> +} + +const _default = defineComponent<Props>(props => { + const { modify, remove } = useLimitAction() + const clz = useStyle() + + return () => ( + <ElCard class={clz} shadow="hover"> + <Flex column gap={8}> + <Flex justify="space-between" align="center"> + <Flex align="center" gap={8}> + <span style={{ fontWeight: 'bold' }}> + {props.value.name ?? 'Unnamed'} + </span> + <EffectiveDays weekdays={props.value.weekdays} /> + </Flex> + <ElButton + size="small" + type='danger' + text + icon={Delete} + onClick={() => remove(props.value)} + /> + </Flex> + <Divider /> + {/* Sites */} + <Flex gap={2}> + {props.value.cond.map((c, idx) => <ElTag key={idx} type='info'>{c}</ElTag>)} + </Flex> + <Divider /> + {/** Content */} + <Rule value={props.value} /> + <Divider /> + {/* Footer Button */} + <Flex justify='end'> + <ElButton text icon={EditPen} onClick={() => modify(props.value)} size='small'> + {t(msg => msg.button.modify)} + </ElButton> + </Flex> + </Flex> + </ElCard> + ) +}, { props: ['value'] }) + +export default _default diff --git a/src/pages/app/components/Limit/components/List/Rule.tsx b/src/pages/app/components/Limit/components/List/Rule.tsx new file mode 100644 index 000000000..c54f34b3a --- /dev/null +++ b/src/pages/app/components/Limit/components/List/Rule.tsx @@ -0,0 +1,112 @@ +import { useDelayDuration } from '@app/components/Limit/context' +import { t } from '@app/locale' +import Flex from '@pages/components/Flex' +import { isEffective, meetLimit, meetTimeLimit, period2Str } from '@util/limit' +import { formatPeriodCommon, MILL_PER_SECOND } from '@util/time' +import { ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus' +import { defineComponent, type FunctionalComponent, toRefs } from 'vue' +import { DAILY_WEEKLY_TAG_TYPE, PERIOD_TAG_TYPE, VISIT_TAG_TYPE } from '../style' + +type Props = { + value: tt4b.limit.Item +} + +const TimeCountPair: FunctionalComponent<{ time?: number, count?: number }> = ({ time, count }) => { + if (!time && !count) return null + return ( + <Flex gap={2} wrap> + {!!time && ( + <ElTag size="small" type={DAILY_WEEKLY_TAG_TYPE}>{formatPeriodCommon(time * MILL_PER_SECOND, true)}</ElTag> + )} + {!!count && ( + <ElTag size="small" type={DAILY_WEEKLY_TAG_TYPE}>{t(msg => msg.shared.limit.visits, { n: count })}</ElTag> + )} + </Flex> + ) +} + +type WastePairProps = { + time: Parameters<typeof meetTimeLimit>[0] + delay: Parameters<typeof meetTimeLimit>[1] + count?: number + visit?: number +} + +const WastePair: FunctionalComponent<WastePairProps> = props => { + const timeType = meetTimeLimit(props.time, props.delay) ? 'danger' : 'info' + const visitType = meetLimit(props.count, props.visit) ? 'danger' : 'info' + + return ( + <Flex gap={2}> + <ElTag size="small" type={timeType}> + {formatPeriodCommon(props.time.wasted)} + </ElTag> + <ElTag size="small" type={visitType}> + {t(msg => msg.shared.limit.visits, { n: props.visit ?? 0 })} + </ElTag> + </Flex> + ) +} + +const Rule = defineComponent<Props>(({ value }) => { + const { + time, count, waste, visit, + weekly, weeklyCount, weeklyWaste, weeklyVisit, + visitTime, periods, + weekdays, + allowDelay, delayCount, weeklyDelayCount, + } = toRefs(value) + + const delayDuration = useDelayDuration() + + return () => <> + <ElDescriptions border size='small' column={1} labelWidth={130}> + <ElDescriptionsItem label={t(msg => msg.shared.limit.daily)} v-show={time?.value || count?.value}> + <TimeCountPair time={time?.value} count={count?.value} /> + </ElDescriptionsItem> + <ElDescriptionsItem label={t(msg => msg.shared.limit.weekly)} v-show={weekly?.value || weeklyCount?.value}> + <TimeCountPair time={weekly?.value} count={weeklyCount?.value} /> + </ElDescriptionsItem> + {!!visitTime?.value && ( + <ElDescriptionsItem label={t(msg => msg.limit.item.visitTime)}> + <ElTag size="small" type={VISIT_TAG_TYPE}>{formatPeriodCommon(visitTime.value * MILL_PER_SECOND, true)}</ElTag> + </ElDescriptionsItem> + )} + {!!periods?.value?.length && ( + <ElDescriptionsItem label={t(msg => msg.shared.limit.period)}> + <Flex gap={2} wrap> + {periods.value.map((p, idx) => ( + <ElTag key={idx} size="small" type={PERIOD_TAG_TYPE}>{period2Str(p)}</ElTag> + ))} + </Flex> + </ElDescriptionsItem> + )} + </ElDescriptions> + <ElDescriptions border size='small' column={1} labelWidth={130}> + <ElDescriptionsItem label={t(msg => msg.calendar.range.today)}> + {isEffective(weekdays?.value) ? ( + <WastePair + time={{ wasted: waste.value, maxLimit: (time?.value ?? 0) * MILL_PER_SECOND }} + delay={{ count: delayCount.value, duration: delayDuration.value, allow: !!allowDelay.value }} + count={count?.value ?? 0} + visit={visit.value} + /> + ) : ( + <ElTag type="info" size="small"> + {t(msg => msg.limit.item.notEffective)} + </ElTag> + )} + </ElDescriptionsItem> + <ElDescriptionsItem label={t(msg => msg.calendar.range.thisWeek)}> + <WastePair + time={{ wasted: weeklyWaste.value, maxLimit: (weekly?.value ?? 0) * MILL_PER_SECOND }} + delay={{ count: weeklyDelayCount.value, duration: delayDuration.value, allow: !!allowDelay.value }} + count={weeklyCount?.value ?? 0} + visit={weeklyVisit.value} + /> + </ElDescriptionsItem> + </ElDescriptions> + </> +}, { props: ['value'] }) + +export default Rule \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/List/index.tsx b/src/pages/app/components/Limit/components/List/index.tsx new file mode 100644 index 000000000..3effb2458 --- /dev/null +++ b/src/pages/app/components/Limit/components/List/index.tsx @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { useLimitData } from "@app/components/Limit/context" +import Flex from '@pages/components/Flex' +import { ElScrollbar } from 'element-plus' +import { defineComponent } from "vue" +import Card from "./Card" + +const _default = defineComponent(() => { + const { list } = useLimitData() + + return () => ( + <ElScrollbar> + <Flex + column padding={8} gap={15} height="100%" + style={{ overflow: 'auto' }} + > + {list.value.map(row => <Card key={row.id} value={row} />)} + </Flex> + </ElScrollbar> + ) +}) + +export default _default diff --git a/src/pages/app/components/Limit/LimitModify/Sop/Step1.tsx b/src/pages/app/components/Limit/components/Modify/Step1.tsx similarity index 67% rename from src/pages/app/components/Limit/LimitModify/Sop/Step1.tsx rename to src/pages/app/components/Limit/components/Modify/Step1.tsx index d4dd76e86..3ad0585c1 100644 --- a/src/pages/app/components/Limit/LimitModify/Sop/Step1.tsx +++ b/src/pages/app/components/Limit/components/Modify/Step1.tsx @@ -1,15 +1,18 @@ -import { t } from "@app/locale" -import { ElCol, ElForm, ElFormItem, ElInput, ElOption, ElRow, ElSelect, ElSwitch } from "element-plus" +import { useDialogSop } from '@app/components/common/DialogSop/context' +import type { ModifyForm } from '@app/components/Limit/types' +import { t } from '@app/locale' +import { useXsState } from '@hooks' +import { ElCol, ElForm, ElFormItem, ElInput, ElRow, ElSelect, ElSwitch } from "element-plus" import { defineComponent } from "vue" -import { useSopData } from "./context" const _default = defineComponent(() => { - const data = useSopData() + const { form: data } = useDialogSop<ModifyForm>() + const isXs = useXsState() return () => ( <ElForm labelWidth={130} labelPosition="left"> <ElRow gutter={30}> - <ElCol span={12}> + <ElCol span={isXs.value ? 24 : 12}> <ElFormItem label={t(msg => msg.limit.item.name)} required> <ElInput modelValue={data.name} onInput={val => data.name = val} @@ -17,7 +20,7 @@ const _default = defineComponent(() => { /> </ElFormItem> </ElCol> - <ElCol span={12}> + <ElCol span={isXs.value ? 24 : 12}> <ElFormItem label={t(msg => msg.limit.item.enabled)} required> <ElSwitch modelValue={data.enabled} onChange={v => data.enabled = !!v} /> </ElFormItem> @@ -31,9 +34,8 @@ const _default = defineComponent(() => { modelValue={data.weekdays} onChange={v => data.weekdays = v} placeholder="" - > - {t(msg => msg.calendar.weekDays).split('|').map((weekDay, idx) => <ElOption value={idx} label={weekDay} />)} - </ElSelect> + options={t(msg => msg.calendar.weekDays).split('|').map((label, idx) => ({ value: idx, label }))} + /> </ElFormItem> </ElCol> </ElRow> diff --git a/src/pages/app/components/Limit/components/Modify/Step2.tsx b/src/pages/app/components/Limit/components/Modify/Step2.tsx new file mode 100644 index 000000000..00e1fcad3 --- /dev/null +++ b/src/pages/app/components/Limit/components/Modify/Step2.tsx @@ -0,0 +1,33 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { useDialogSop } from '@app/components/common/DialogSop/context' +import type { ModifyForm } from '@app/components/Limit/types' +import { t } from '@app/locale' +import CondEditor, { type CondEditorInstance } from '@pages/components/CondEditor' +import Flex from "@pages/components/Flex" +import { defineComponent, onUpdated, ref } from "vue" + +const _default = defineComponent(() => { + const { form: data } = useDialogSop<ModifyForm>() + const editor = ref<CondEditorInstance>() + onUpdated(() => editor.value?.focus()) + + return () => ( + <Flex column width="100%"> + <CondEditor + ref={editor} + modelValue={data.cond} + onChange={l => data.cond = l} + placeholder='e.g. www.demo.com, *.demo.com, demo.com/blog/*, demo.com/**, +www.demo.com/blog/list' + tip={t(msg => msg.limit.wildcardTip)} + /> + </Flex> + ) +}) + +export default _default diff --git a/src/pages/app/components/Limit/components/Modify/Step3/PeriodInput.tsx b/src/pages/app/components/Limit/components/Modify/Step3/PeriodInput.tsx new file mode 100644 index 000000000..a287bb867 --- /dev/null +++ b/src/pages/app/components/Limit/components/Modify/Step3/PeriodInput.tsx @@ -0,0 +1,178 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { t } from '@app/locale' +import { Check, Close, Plus } from "@element-plus/icons-vue" +import { css } from '@emotion/css' +import { useState, useSwitch, useXsState } from '@hooks' +import Flex from "@pages/components/Flex" +import { dateMinute2Idx, period2Str } from "@util/limit" +import { MILL_PER_HOUR } from "@util/time" +import { ElButton, ElTag, ElTimePicker, useNamespace } from "element-plus" +import { type StyleValue, defineComponent } from "vue" + +const BUTTON_STYLE: StyleValue = { + padding: '8px', + height: '32px', + lineHeight: '32px', +} + +const range2Period = (range: [Date, Date]): [number, number] => { + const [start, end] = range + const startIdx = dateMinute2Idx(start) + const endIdx = dateMinute2Idx(end) + return [Math.min(startIdx, endIdx), Math.max(startIdx, endIdx)] +} + +const insertPeriods = (periods: tt4b.limit.Period[], toInsert: tt4b.limit.Period) => { + if (!toInsert || !periods) return + let len = periods.length + if (!len) { + periods.push(toInsert) + return + } + for (let i = 0; i < len; i++) { + const pre = periods[i] + if (!pre) continue + const next = periods[i + 1] + if (checkImpact(pre, toInsert)) { + mergePeriod(pre, toInsert) + if (next && checkImpact(pre, next)) { + mergePeriod(pre, next) + periods.splice(i + 1, 1) + } + return + } + if (next && checkImpact(toInsert, next)) { + mergePeriod(next, toInsert) + return + } + } + // Append + periods.push(toInsert) + periods.sort((a, b) => a[0] - b[0]) +} + +const mergePeriod = (target: tt4b.limit.Period, toMerge: tt4b.limit.Period) => { + if (!target || !toMerge) return + target[0] = Math.min(target[0], toMerge[0]) + target[1] = Math.max(target[1], toMerge[1]) +} + +const checkImpact = (p1: tt4b.limit.Period, p2: tt4b.limit.Period): boolean => { + if (!p1 || !p2) return false + const [s1, e1] = p1 + const [s2, e2] = p2 + return (s1 >= s2 && s1 <= e2) || (s2 >= s1 && s2 <= e1) +} + +const rangeInitial = (): [Date, Date] => { + const now = new Date() + if (now.getHours() >= 23) { + const start = new Date(now) + start.setHours(23, 0, 0, 0) + const end = new Date(now) + end.setHours(23, 59, 0, 0) + return [start, end] + } + return [now, new Date(now.getTime() + MILL_PER_HOUR)] +} + +const usePickerStyle = () => { + const rangeNs = useNamespace('range') + return css` + width: 120px !important; + padding: 0 5px !important; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + & .${rangeNs.e('close-icon')} { + width: 0; + } + + & .${rangeNs.b('input')} { + height: 28px; + } + ` +} + +const PeriodInput = defineComponent<ModelValue<tt4b.limit.Period[]>>(props => { + const [editing, openEditing, closeEditing] = useSwitch(false) + const [editingRange, setEditingRange] = useState(rangeInitial()) + const isXs = useXsState() + + const handleEdit = () => { + openEditing() + setEditingRange(rangeInitial()) + } + + const handleSave = () => { + const val = range2Period(editingRange.value) + const oldPeriods = props.modelValue.map(p => [p[0], p[1]] satisfies tt4b.limit.Period) + insertPeriods(oldPeriods, val) + props.onChange?.(oldPeriods) + closeEditing() + } + + const handleDelete = (idx: number) => { + const newPeriods = props.modelValue.filter((_, i) => i !== idx) + .map(p => [p[0], p[1]] satisfies tt4b.limit.Period) + props.onChange?.(newPeriods) + } + + const pickerCls = usePickerStyle() + + return () => ( + <Flex gap={5} column={isXs.value}> + <Flex v-show={!!props.modelValue.length} gap={5} wrap> + {props.modelValue?.map((p, idx) => + <ElTag + size={isXs.value ? 'small' : 'large'} + closable + onClose={() => handleDelete(idx)} + > + {period2Str(p)} + </ElTag> + )} + </Flex> + <Flex v-show={editing.value} wrap={false}> + <ElTimePicker + class={pickerCls} + modelValue={editingRange.value} + onUpdate:modelValue={setEditingRange} + isRange + rangeSeparator="-" + format="HH:mm" + clearable={false} + /> + <ElButton + icon={Close} + onClick={closeEditing} + style={{ ...BUTTON_STYLE, borderRadius: 0 } satisfies StyleValue} + /> + <ElButton + icon={Check} + onClick={handleSave} + style={{ ...BUTTON_STYLE, marginInlineStart: 0 } satisfies StyleValue} + /> + </Flex> + <Flex> + <ElButton + v-show={!editing.value} + icon={Plus} + onClick={handleEdit} + style={BUTTON_STYLE} + size={isXs.value ? 'small' : undefined} + > + {t(msg => msg.button.create)} + </ElButton> + </Flex> + </Flex> + ) +}, { props: ['modelValue', 'onChange'] }) + +export default PeriodInput \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/Modify/Step3/index.tsx b/src/pages/app/components/Limit/components/Modify/Step3/index.tsx new file mode 100644 index 000000000..38dd6d890 --- /dev/null +++ b/src/pages/app/components/Limit/components/Modify/Step3/index.tsx @@ -0,0 +1,76 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { useDialogSop } from '@app/components/common/DialogSop/context' +import type { ModifyForm } from '@app/components/Limit/types' +import { t } from '@app/locale' +import { useXsState } from '@hooks' +import Flex from "@pages/components/Flex" +import TimeInput from '@pages/components/TimeInput' +import { ElForm, ElFormItem, ElInputNumber } from "element-plus" +import { defineComponent } from "vue" +import PeriodInput from "./PeriodInput" + +const MAX_HOUR_WEEKLY = 7 * 24 +const UNLIMITED = t(msg => msg.limit.item.unlimited) + +const _default = defineComponent(() => { + const { form: data } = useDialogSop<ModifyForm>() + const isXs = useXsState() + + return () => ( + <Flex justify="center"> + <ElForm labelWidth={150} labelPosition='left'> + <ElFormItem label={t(msg => msg.shared.limit.daily)}> + <Flex gap={10} column={isXs.value}> + <TimeInput placeholder={UNLIMITED} modelValue={data.time ?? 0} onChange={v => data.time = v} /> + {!isXs.value && t(msg => msg.limit.item.or)} + <ElInputNumber + min={0} + step={10} + modelValue={data.count} + onChange={v => data.count = v ?? 0} + size={isXs.value ? 'small' : undefined} + v-slots={{ suffix: () => t(msg => msg.shared.limit.visits, { n: '' }).trim() }} + /> + </Flex> + </ElFormItem> + <ElFormItem label={t(msg => msg.shared.limit.weekly)}> + <Flex gap={10} column={isXs.value}> + <TimeInput + placeholder={UNLIMITED} + modelValue={data.weekly ?? 0} + onChange={v => data.weekly = v} + hourMax={MAX_HOUR_WEEKLY} + /> + {!isXs.value && t(msg => msg.limit.item.or)} + <ElInputNumber + min={0} + step={10} + modelValue={data.weeklyCount} + onChange={v => data.weeklyCount = v ?? 0} + size={isXs.value ? 'small' : undefined} + v-slots={{ suffix: () => t(msg => msg.shared.limit.visits, { n: '' }).trim() }} + /> + </Flex> + </ElFormItem> + <ElFormItem label={t(msg => msg.limit.item.visitTime)}> + <TimeInput + placeholder={UNLIMITED} + modelValue={data.visitTime ?? 0} + onChange={v => data.visitTime = v} + /> + </ElFormItem> + <ElFormItem label={t(msg => msg.shared.limit.period)}> + <PeriodInput modelValue={data.periods ?? []} onChange={v => data.periods = v} /> + </ElFormItem> + </ElForm> + </Flex> + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/Modify/index.tsx b/src/pages/app/components/Limit/components/Modify/index.tsx new file mode 100644 index 000000000..0085e1470 --- /dev/null +++ b/src/pages/app/components/Limit/components/Modify/index.tsx @@ -0,0 +1,128 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { addLimit, updateLimits } from '@api/sw/limit' +import DialogSop from '@app/components/common/DialogSop' +import { initDialogSopContext } from '@app/components/common/DialogSop/context' +import { useLimitData } from "@app/components/Limit/context" +import type { ModifyForm, ModifyInstance } from '@app/components/Limit/types' +import { t } from '@app/locale' +import { cleanCond } from '@pages/components/CondEditor' +import { range } from '@util/array' +import { computed, defineComponent, ref, toRaw } from "vue" +import Step1 from './Step1' +import Step2 from './Step2' +import Step3 from './Step3' + +type Mode = "create" | "modify" + +const STEP_TITLES = [ + t(msg => msg.limit.step.base), + t(msg => msg.limit.step.url), + t(msg => msg.limit.step.rule), +] + +const createInitial = (url?: string): ModifyForm => ({ + name: `RULE-${new String(new Date().getTime() % 10000).padStart(4, '0')}`, + time: 3600, + weekly: 0, + cond: url ? [cleanCond(url)] : [], + visitTime: 0, + periods: [], + enabled: true, + weekdays: range(7), + count: 0, + weeklyCount: 0, + allowDelay: false, + locked: false, +}) + +const _default = defineComponent((_, ctx) => { + const { refresh } = useLimitData() + const mode = ref<Mode>() + const title = computed(() => mode.value === "create" ? t(msg => msg.button.create) : t(msg => msg.button.modify)) + + const { step, open } = initDialogSopContext<ModifyForm>({ + stepCount: STEP_TITLES.length, + init: createInitial, + onNext: ({ form, current }) => { + if (current === 0) { + const nameVal = form.name?.trim?.() + const weekdaysVal = form.weekdays + if (!nameVal) { + throw new Error("Name is empty") + } if (!weekdaysVal?.length) { + throw new Error("Effective days are empty") + } + } else if (current === 1) { + if (!form.cond?.length) { + form.urlMiss = true + throw new Error(t(msg => msg.limit.message.noUrl)) + } + form.urlMiss = false + } + }, + onFinish: async ({ form }) => { + const { cond, enabled, name, time, count, weekly, weeklyCount, visitTime, periods, weekdays } = toRaw(form) + if (true + && !time && !count + && !weekly && !weeklyCount + && !visitTime && !periods?.length + ) { + throw new Error(t(msg => msg.limit.message.noRule)) + } + let saved: tt4b.limit.Rule + if (mode.value === 'modify') { + if (!modifyingItem) return + saved = { + ...modifyingItem, + cond, enabled, name, time, weekly, visitTime, weekdays, count, weeklyCount, + // Object to array + periods: periods?.map(i => [i[0], i[1]] satisfies tt4b.limit.Period), + } satisfies tt4b.limit.Rule + await updateLimits([saved]) + } else { + const toCreate = { + cond, enabled, name, time, weekly, visitTime, weekdays, count, weeklyCount, + // Object to array + periods: periods?.map(i => [i[0], i[1]] satisfies tt4b.limit.Period), + allowDelay: false, locked: false, + } satisfies MakeOptional<tt4b.limit.Rule, 'id'> + const id = await addLimit(toCreate) + saved = { ...toCreate, id } + } + refresh?.() + } + }) + // Cache + let modifyingItem: tt4b.limit.Rule | undefined = undefined + + ctx.expose({ + create(url?: string) { + open(createInitial(url)) + mode.value = 'create' + modifyingItem = undefined + }, + modify(row: tt4b.limit.Item) { + open(toRaw(row)) + mode.value = 'modify' + modifyingItem = { ...row } + }, + } satisfies ModifyInstance) + + + return () => ( + <DialogSop title={title.value} stepTitles={STEP_TITLES}> + <Step1 v-show={step.value === 0} /> + <Step2 v-show={step.value === 1} /> + <Step3 v-show={step.value === 2} /> + </DialogSop> + + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/Table/Rule.tsx b/src/pages/app/components/Limit/components/Table/Rule.tsx new file mode 100644 index 000000000..dfc6683bd --- /dev/null +++ b/src/pages/app/components/Limit/components/Table/Rule.tsx @@ -0,0 +1,69 @@ +import { t } from '@app/locale' +import Flex from "@pages/components/Flex" +import { period2Str } from '@util/limit' +import { formatPeriodCommon, MILL_PER_SECOND } from '@util/time' +import { ElTag, TagProps } from 'element-plus' +import { defineComponent, type FunctionalComponent, toRef } from "vue" +import { DAILY_WEEKLY_TAG_TYPE, VISIT_TAG_TYPE } from '../style' + +type TimeCountPairProps = { + time?: number + count?: number + label: string + type?: TagProps['type'] +} + +const TimeCountPair: FunctionalComponent<TimeCountPairProps> = ({ time, count, label, type = DAILY_WEEKLY_TAG_TYPE }) => { + const content = [ + time && formatPeriodCommon(time * MILL_PER_SECOND, true), + count && t(msg => msg.shared.limit.visits, { n: count }), + ].filter(Boolean).join(` ${t(msg => msg.limit.item.or)} `) + + if (!content) return null + + return ( + <div> + <ElTag size="small" type={type}>{label}: {content}</ElTag> + </div> + ) +} + +const PeriodTag: FunctionalComponent<{ periods?: tt4b.limit.Period[], }> = ({ periods }) => { + if (!periods?.length) return null + + return <> + <div> + <ElTag size="small" type="info">{t(msg => msg.shared.limit.period)}</ElTag> + </div> + <Flex justify="center" gap={4} wrap="wrap"> + {periods.map((p, idx) => <ElTag key={idx} size="small" type="info">{period2Str(p)}</ElTag>)} + </Flex> + </> +} + +const Rule = defineComponent<{ value: tt4b.limit.Item }>(props => { + const row = toRef(props, 'value') + + return () => ( + <Flex column gap={4}> + <TimeCountPair + time={row.value?.time} + count={row.value?.count} + label={t(msg => msg.shared.limit.daily)} + /> + <TimeCountPair + time={row.value?.weekly} + count={row.value?.weeklyCount} + label={t(msg => msg.shared.limit.weekly)} + /> + <TimeCountPair + time={row.value?.visitTime} + label={t(msg => msg.limit.item.visitTime)} + type={VISIT_TAG_TYPE} + /> + <PeriodTag periods={row.value?.periods} /> + </Flex> + ) +}, { props: ['value'] }) + +export default Rule \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/Table/Waste.tsx b/src/pages/app/components/Limit/components/Table/Waste.tsx new file mode 100644 index 000000000..762718945 --- /dev/null +++ b/src/pages/app/components/Limit/components/Table/Waste.tsx @@ -0,0 +1,46 @@ +import { t } from '@app/locale' +import Flex from "@pages/components/Flex" +import TooltipWrapper from '@pages/components/TooltipWrapper' +import { meetLimit, meetTimeLimit } from "@util/limit" +import { formatPeriodCommon } from "@util/time" +import { ElTag } from "element-plus" +import { computed, defineComponent } from "vue" + +type Props = { + time: Parameters<typeof meetTimeLimit>[0] + delay: Parameters<typeof meetTimeLimit>[1] + count?: number + visit?: number +} + +const Waste = defineComponent<Props>(props => { + const timeType = computed(() => meetTimeLimit(props.time, props.delay) ? 'danger' : 'info') + const visitType = computed(() => meetLimit(props.count, props.visit) ? 'danger' : 'info') + + return () => ( + <Flex column gap={5}> + <div> + <TooltipWrapper + trigger="hover" + usePopover={props.delay.allow && !!props.time} + placement="top" + v-slots={{ + content: () => `${t(msg => msg.limit.item.delayCount)}: ${props.delay.count}`, + default: () => ( + <ElTag size="small" type={timeType.value}> + {formatPeriodCommon(props.time.wasted)} + </ElTag> + ), + }} + /> + </div> + <div> + <ElTag size="small" type={visitType.value}> + {t(msg => msg.shared.limit.visits, { n: props.visit ?? 0 })} + </ElTag> + </div> + </Flex> + ) +}, { props: ['time', 'delay', 'count', 'visit'] }) + +export default Waste \ No newline at end of file diff --git a/src/pages/app/components/Limit/LimitTable/Weekday.tsx b/src/pages/app/components/Limit/components/Table/Weekday.tsx similarity index 96% rename from src/pages/app/components/Limit/LimitTable/Weekday.tsx rename to src/pages/app/components/Limit/components/Table/Weekday.tsx index 33a8804a9..35e91f96e 100644 --- a/src/pages/app/components/Limit/LimitTable/Weekday.tsx +++ b/src/pages/app/components/Limit/components/Table/Weekday.tsx @@ -1,5 +1,5 @@ +import { t } from "@app/locale" import Flex from "@pages/components/Flex" -import { t } from "@popup/locale" import { ElTag } from "element-plus" import { computed, defineComponent, toRef, type PropType } from "vue" diff --git a/src/pages/app/components/Limit/components/Table/index.tsx b/src/pages/app/components/Limit/components/Table/index.tsx new file mode 100644 index 000000000..ca9f2cab3 --- /dev/null +++ b/src/pages/app/components/Limit/components/Table/index.tsx @@ -0,0 +1,219 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { getOption, getWeekStartDay } from "@api/sw/option" +import ColumnHeader from "@app/components/common/ColumnHeader" +import { useDelayDuration, useLimitAction, useLimitData } from "@app/components/Limit/context" +import type { LimitInstance } from '@app/components/Limit/types' +import { t } from '@app/locale' +import { Delete, Edit } from '@element-plus/icons-vue' +import { useCached, useRequest } from '@hooks' +import { locale } from '@i18n' +import { isEffective } from "@util/limit" +import { MILL_PER_SECOND } from "@util/time" +import { + ElButton, ElSwitch, ElTable, ElTableColumn, ElTag, type RenderRowData, type Sort, type TableInstance, +} from "element-plus" +import { defineComponent, ref } from "vue" +import Rule from "./Rule" +import Waste from "./Waste" +import Weekday from "./Weekday" + +const ACTION_WIDTH: { [locale in tt4b.Locale]: number } = { + en: 220, + zh_CN: 200, + ja: 200, + zh_TW: 200, + pt_PT: 250, + uk: 260, + es: 240, + de: 250, + fr: 230, + ru: 240, + ar: 220, + tr: 220, + pl: 220, + it: 220, +} + +const DEFAULT_SORT_COL = 'waste' + +function createSorter(key: 'waste' | 'weeklyWaste') { + return (a: tt4b.limit.Item, b: tt4b.limit.Item) => a[key] - b[key] +} + +function sortByEffectiveDays(a: tt4b.limit.Item, b: tt4b.limit.Item) { + return (a.weekdays?.length ?? 0) - (b.weekdays?.length ?? 0) +} + +const _default = defineComponent((_, ctx) => { + const { data: weekStartName } = useRequest(async () => { + const offset = await getWeekStartDay() + const name = t(msg => msg.calendar.weekDays)?.split('|')?.[offset] + return name || 'NaN' + }) + + const { list, changeEnabled, changeDelay, changeLocked } = useLimitData() + const { modify, remove } = useLimitAction() + const delayDuration = useDelayDuration() + + const [sort, setSort] = useCached<Sort>('__limit_sort_default__', { prop: DEFAULT_SORT_COL, order: 'descending' }) + const table = ref<TableInstance>() + + const { data: lockVisible } = useRequest(async () => { + const option = await getOption() + return option.limitLevel !== 'nothing' + }, { defaultValue: false }) + + ctx.expose({ + getSelected: () => (table.value?.getSelectionRows?.() ?? []) as tt4b.limit.Item[], + } satisfies LimitInstance) + + return () => ( + <ElTable + ref={table} + border fit highlightCurrentRow + style={{ width: "100%" }} + height="100%" + data={list.value} + defaultSort={sort.value} + onSort-change={val => val.prop && val.order && setSort({ prop: val?.prop, order: val?.order })} + > + <ElTableColumn type="selection" align="center" fixed="left" /> + <ElTableColumn + prop='name' + label={t(msg => msg.limit.item.name)} + minWidth={120} + align="center" + formatter={({ name }: tt4b.limit.Item) => name || '-'} + fixed + sortable + sortBy={(row: tt4b.limit.Item) => row.name} + /> + <ElTableColumn + label={t(msg => msg.limit.item.condition)} + minWidth={180} + align="center" + formatter={({ cond }: tt4b.limit.Item) => <>{cond?.map?.(c => <span style={{ display: "block" }}>{c}</span>) || ''}</>} + /> + <ElTableColumn + label={t(msg => msg.limit.item.detail)} + minWidth={200} + align="center" + > + {({ row }: RenderRowData<tt4b.limit.Item>) => <Rule value={row} />} + </ElTableColumn> + <ElTableColumn + prop='effectiveDays' + label={t(msg => msg.limit.item.effectiveDay)} + minWidth={170} + align="center" + sortable + sortMethod={sortByEffectiveDays} + > + {({ row: { weekdays } }: RenderRowData<tt4b.limit.Item>) => <Weekday value={weekdays} />} + </ElTableColumn> + <ElTableColumn + prop={DEFAULT_SORT_COL} + sortable + sortMethod={createSorter('waste')} + label={t(msg => msg.calendar.range.today)} + minWidth={90} + align="center" + > + {({ row }: RenderRowData<tt4b.limit.Item>) => isEffective(row.weekdays) ? ( + <Waste + time={{ wasted: row.waste, maxLimit: (row.time ?? 0) * MILL_PER_SECOND }} + delay={{ count: row.delayCount, duration: delayDuration.value, allow: !!row.allowDelay }} + count={row.count ?? 0} + visit={row.visit ?? 0} + /> + ) : ( + <ElTag type="info" size="small"> + {t(msg => msg.limit.item.notEffective)} + </ElTag> + )} + </ElTableColumn> + <ElTableColumn + prop='weeklyWaste' + minWidth={110} + align="center" + sortable + sortMethod={createSorter('weeklyWaste')} + v-slots={{ + header: () => ( + <ColumnHeader + label={t(msg => msg.calendar.range.thisWeek)} + tooltipContent={t(msg => msg.limit.item.weekStartInfo, { weekStart: weekStartName.value })} + /> + ), + default: ({ row: { + weeklyWaste, weekly, + weeklyVisit, weeklyCount, + weeklyDelayCount, allowDelay, + } }: RenderRowData<tt4b.limit.Item>) => ( + <Waste + time={{ wasted: weeklyWaste, maxLimit: (weekly ?? 0) * MILL_PER_SECOND }} + delay={{ count: weeklyDelayCount, duration: delayDuration.value, allow: !!allowDelay }} + count={weeklyCount ?? 0} + visit={weeklyVisit ?? 0} + /> + ), + }} + /> + <ElTableColumn label={t(msg => msg.button.configuration)}> + <ElTableColumn + label={t(msg => msg.limit.item.enabled)} + minWidth={80} + align="center" + fixed="right" + > + {({ row }: RenderRowData<tt4b.limit.Item>) => ( + <ElSwitch size="small" modelValue={row.enabled} onChange={v => changeEnabled(row, !!v)} /> + )} + </ElTableColumn> + <ElTableColumn + label={t(msg => msg.limit.item.allowDelay)} + minWidth={80} + align="center" + fixed="right" + > + {({ row }: RenderRowData<tt4b.limit.Item>) => ( + <ElSwitch size="small" modelValue={row.allowDelay} onChange={v => changeDelay(row, !!v)} /> + )} + </ElTableColumn> + {lockVisible.value && ( + <ElTableColumn + label={t(msg => msg.limit.item.locked)} + minWidth={80} + align="center" + fixed="right" + > + {({ row }: RenderRowData<tt4b.limit.Item>) => ( + <ElSwitch size="small" modelValue={row.locked} onChange={v => changeLocked(row, !!v)} /> + )} + </ElTableColumn> + )} + </ElTableColumn> + <ElTableColumn + label={t(msg => msg.button.operation)} + width={ACTION_WIDTH[locale]} + align="center" + fixed="right" + v-slots={({ row }: RenderRowData<tt4b.limit.Item>) => <> + <ElButton type="danger" size="small" icon={Delete} onClick={() => remove(row)}> + {t(msg => msg.button.delete)} + </ElButton> + <ElButton type="primary" size="small" icon={Edit} onClick={() => modify(row)}> + {t(msg => msg.button.modify)} + </ElButton> + </>} + /> + </ElTable> + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/Test.tsx b/src/pages/app/components/Limit/components/Test.tsx new file mode 100644 index 000000000..7baddcd2e --- /dev/null +++ b/src/pages/app/components/Limit/components/Test.tsx @@ -0,0 +1,67 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { listLimits } from "@api/sw/limit" +import AlertLines, { type AlertLinesProps } from '@app/components/common/AlertLines' +import { t } from '@app/locale' +import { useDebounce, useRequest, useState, useSwitch, useXsState } from '@hooks' +import Flex from '@pages/components/Flex' +import { ElDialog, ElInput } from "element-plus" +import { defineComponent } from "vue" +import type { TestInstance } from '../types' + +async function fetchResult(url: string | undefined): Promise<AlertLinesProps> { + if (!url) { + return { type: 'warning', title: msg => msg.limit.message.inputTestUrl } + } + const matched = await listLimits({ url, enabled: true }) + if (!matched.length) { + return { type: 'info', title: msg => msg.limit.message.noRuleMatched } + } else { + return { + type: 'success', + title: msg => msg.limit.message.rulesMatched, + lines: matched.map(m => m.name) + } + } +} + +const _default = defineComponent((_props, ctx) => { + const [url, setUrl, clearUrl] = useState<string>() + const debouncedUrl = useDebounce(url) + const [visible, open, close] = useSwitch() + const { data: result } = useRequest(() => fetchResult(debouncedUrl.value), { deps: debouncedUrl }) + const isXs = useXsState() + + ctx.expose({ + show: () => { + clearUrl() + open() + } + } satisfies TestInstance) + + return () => ( + <ElDialog + title={t(msg => msg.limit.button.test)} + modelValue={visible.value} + closeOnClickModal={false} + onClose={close} + fullscreen={isXs.value} + > + <Flex gap={18} column> + <ElInput + modelValue={url.value} onInput={setUrl} + clearable onClear={clearUrl} + placeholder='e.g. https://www.github.com/sheepzh/time-tracker-4-browser' + /> + {result.value && <AlertLines {...result.value} />} + </Flex> + </ElDialog> + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Limit/components/index.tsx b/src/pages/app/components/Limit/components/index.tsx new file mode 100644 index 000000000..353a8404e --- /dev/null +++ b/src/pages/app/components/Limit/components/index.tsx @@ -0,0 +1,5 @@ +export { default as Filter } from './Filter' +export { default as List } from './List' +export { default as Modify } from './Modify' +export { default as Table } from './Table' +export { default as Test } from './Test' diff --git a/src/pages/app/components/Limit/components/style.ts b/src/pages/app/components/Limit/components/style.ts new file mode 100644 index 000000000..56001cd08 --- /dev/null +++ b/src/pages/app/components/Limit/components/style.ts @@ -0,0 +1,5 @@ +import { type TagProps } from 'element-plus' + +export const DAILY_WEEKLY_TAG_TYPE = 'primary' satisfies TagProps['type'] +export const VISIT_TAG_TYPE = 'danger' satisfies TagProps['type'] +export const PERIOD_TAG_TYPE = 'info' satisfies TagProps['type'] \ No newline at end of file diff --git a/src/pages/app/components/Limit/context.ts b/src/pages/app/components/Limit/context.ts index 49a95c7db..c00295391 100644 --- a/src/pages/app/components/Limit/context.ts +++ b/src/pages/app/components/Limit/context.ts @@ -1,66 +1,109 @@ -import { t } from "@app/locale" -import { useDocumentVisibility, useManualRequest, useProvide, useProvider, useRequest } from "@hooks" -import limitService from "@service/limit-service" -import { ElMessage, ElMessageBox, type TableInstance } from "element-plus" -import { Reactive, reactive, ref, toRaw, watch, type Ref } from "vue" -import { useRoute, useRouter } from "vue-router" -import { verifyCanModify } from "./common" -import type { LimitFilterOption } from "./types" - -export type ModifyInstance = { - create(): void - modify(row: timer.limit.Item): void -} - -export type TestInstance = { - show(): void -} +import { getOption } from '@/api/sw/option' +import { DEFAULT_LIMIT } from '@/util/constant/option' +import { deleteLimits, listLimits, updateLimits } from "@api/sw/limit" +import { t } from '@app/locale' +import type { LimitQuery } from '@app/router/constants' +import { judgeVerificationRequired, processVerification } from '@app/util/limit' +import { useDocumentVisibility, useManualRequest, useProvide, useProvider, useRequest } from '@hooks' +import { tryParseInteger } from '@util/number' +import { ElMessage, ElMessageBox } from "element-plus" +import { computed, onMounted, reactive, ref, toRaw, watch, type ShallowRef } from "vue" +import { useRoute, useRouter } from 'vue-router' +import type { LimitFilterOption, LimitInstance, ModifyInstance, TestInstance } from "./types" type Context = { - table: Ref<TableInstance | undefined> - filter: Reactive<LimitFilterOption> - list: Ref<timer.limit.Item[]>, refresh: NoArgCallback, - deleteRow: ArgCallback<timer.limit.Item> + filter: LimitFilterOption + list: ShallowRef<tt4b.limit.Item[]> + refresh: NoArgCallback batchDelete: NoArgCallback batchEnable: NoArgCallback batchDisable: NoArgCallback - changeEnabled: (item: timer.limit.Item, val: boolean) => Promise<void> - changeDelay: (item: timer.limit.Item, val: boolean) => Promise<void> - changeLocked: (item: timer.limit.Item, val: boolean) => Promise<void> - modify: (item: timer.limit.Item) => void + changeEnabled: (item: tt4b.limit.Item, val: boolean) => Promise<void> + changeDelay: (item: tt4b.limit.Item, val: boolean) => Promise<void> + changeLocked: (item: tt4b.limit.Item, val: boolean) => Promise<void> + modify: ArgCallback<tt4b.limit.Item> + remove: ArgCallback<tt4b.limit.Item> create: () => void test: () => void + empty: ShallowRef<boolean> + delayDuration: ShallowRef<number> } const NAMESPACE = 'limit' -const initialUrl = () => { - // Init with url parameter - const urlParam = useRoute().query['url'] as string +const initialQuery = () => { + const { url, action, id: idQuery } = useRoute().query as LimitQuery useRouter().replace({ query: {} }) - return urlParam ? decodeURIComponent(urlParam) : '' + const [isNum, idMaybe] = idQuery ? tryParseInteger(idQuery) : [false, undefined] + return { + url: url && decodeURIComponent(url), + action, + id: isNum && !Number.isNaN(idMaybe) && idMaybe ? idMaybe : undefined, + } +} + +const batchJudge = async (items: tt4b.limit.Item[]): Promise<boolean> => { + if (!items?.length) return false + const { limitDelayDuration, limitLevel } = await getOption() + for (const item of items) { + if (!item) continue + let needVerify = await judgeVerificationRequired(item, limitDelayDuration) + // If locked and the level is not strict, verification is also required to modify the rule + if (limitLevel !== 'strict') needVerify ||= item.locked + if (needVerify) return true + } + return false +} + +const verifyCanModify = async (...items: tt4b.limit.Item[]) => { + const needVerify = await batchJudge(items) + if (!needVerify) return + + // Open delay for limited rules, so verification is required + const option = await getOption() + if (!option) return + await processVerification(option) } export const useLimitProvider = () => { - const filter = reactive<LimitFilterOption>({ url: initialUrl(), onlyEnabled: false }) + const { url, action, id } = initialQuery() + let modifyTriggered = false + const initialUrl = action === 'create' ? undefined : url + + if (action === 'create') { + onMounted(() => setTimeout(() => modifyInst.value?.create(url))) + } + + const filter = reactive<LimitFilterOption>({ url: initialUrl, effective: false }) - const { data: list, refresh } = useRequest( - () => limitService.select({ filterDisabled: filter.onlyEnabled, url: filter.url ?? '' }), + const { data: list, refresh, loading } = useRequest( + () => listLimits({ url: filter.url, effective: filter.effective }), { defaultValue: [], - deps: [() => filter.url, () => filter.onlyEnabled], + deps: [() => filter.url, () => filter.effective], + onSuccess: data => { + if (action !== 'modify' || modifyTriggered) return + const target = data.find(i => i.id === id) + target && setTimeout(() => modifyInst.value?.modify(target)) + modifyTriggered = true + } }, ) + const { data: delayDuration } = useRequest( + () => getOption().then(o => o.limitDelayDuration), + { defaultValue: DEFAULT_LIMIT.limitDelayDuration }, + ) + // Query data if the window become visible const docVisible = useDocumentVisibility() watch(docVisible, () => docVisible.value && refresh()) - const { refresh: deleteRow } = useManualRequest(async (row: timer.limit.Item) => { + const { refresh: remove } = useManualRequest(async (row: tt4b.limit.Item) => { await verifyCanModify(row) const message = t(msg => msg.limit.message.deleteConfirm, { name: row.name }) - await ElMessageBox.confirm(message, { type: "warning" }) - await limitService.remove(row) + await ElMessageBox.confirm(message) + await deleteLimits([row.id]) }, { onSuccess() { ElMessage.success(t(msg => msg.operation.successMsg)) @@ -68,10 +111,10 @@ export const useLimitProvider = () => { } }) - const table = ref<TableInstance>() + const inst = ref<LimitInstance>() - const selectedAndThen = (then: (list: timer.limit.Item[]) => void): void => { - const list = table.value?.getSelectionRows?.() + const selectedAndThen = (then: (list: tt4b.limit.Item[]) => void): void => { + const list = inst.value?.getSelected?.() if (!list?.length) { ElMessage.info('No limit rule selected') return @@ -84,92 +127,94 @@ export const useLimitProvider = () => { refresh() } - const handleBatchDelete = (list: timer.limit.Item[]) => verifyCanModify(...list) - .then(() => limitService.remove(...list)) - .then(onBatchSuccess) - .catch(() => { }) + const handleBatchDelete = (list: tt4b.limit.Item[]) => { + const names = list.map(item => item.name ?? item.id).join(', ') + verifyCanModify(...list) + .then(() => ElMessageBox.confirm(t(msg => msg.limit.message.deleteConfirm, { name: names }), { type: "warning" })) + .then(() => deleteLimits(list.map(item => item.id))) + .then(onBatchSuccess) + .catch(() => { }) + } - const handleBatchEnable = (list: timer.limit.Item[]) => { + const handleBatchEnable = (list: tt4b.limit.Item[]) => { list.forEach(item => item.enabled = true) - limitService.updateEnabled(...list).then(onBatchSuccess).catch(() => { }) + updateLimits(list).then(onBatchSuccess).catch(() => { }) } - const handleBatchDisable = (list: timer.limit.Item[]) => verifyCanModify(...list) + const handleBatchDisable = (list: tt4b.limit.Item[]) => verifyCanModify(...list) .then(() => { list.forEach(item => item.enabled = false) - return limitService.updateEnabled(...list) + return updateLimits(list) }) .then(onBatchSuccess) .catch(() => { }) - const changeEnabled = async (row: timer.limit.Item, newVal: boolean) => { - const enabled = !!newVal + const changeEnabled = async (row: tt4b.limit.Item, newVal: boolean) => { try { - (row.locked || !enabled) && await verifyCanModify(row) - row.enabled = enabled - await limitService.updateEnabled(toRaw(row)) + // Only verify when disabling, ignore lock state + !newVal && await verifyCanModify(row) + row.enabled = newVal + await updateLimits([toRaw(row)]) } catch (e) { - console.warn(e) + console.info(e) } } - const changeDelay = async (row: timer.limit.Item, newVal: boolean) => { - const delayable = !!newVal + const changeDelay = async (row: tt4b.limit.Item, newVal: boolean) => { try { - (row.locked || delayable) && await verifyCanModify(row) - row.allowDelay = delayable - await limitService.updateDelay(toRaw(row)) + (row.locked || newVal) && await verifyCanModify(row) + row.allowDelay = newVal + await updateLimits([toRaw(row)]) } catch (e) { console.warn(e) } } - const changeLocked = async (row: timer.limit.Item, newVal: boolean) => { - const locked = !!newVal + const changeLocked = async (row: tt4b.limit.Item, newVal: boolean) => { try { - if (locked) { + if (newVal) { const msg = t(msg => msg.limit.message.lockConfirm) await ElMessageBox.confirm(msg, { type: 'warning' }) } else { await verifyCanModify(row) } - row.locked = locked - await limitService.updateLocked(toRaw(row)) + row.locked = newVal + await updateLimits([toRaw(row)]) } catch (e) { console.warn(e) } } - const modifyInst = ref<ModifyInstance>() const testInst = ref<TestInstance>() - const modify = (row: timer.limit.Item) => modifyInst.value?.modify?.(toRaw(row)) + const modify = (row: tt4b.limit.Item) => verifyCanModify(row) + .then(() => modifyInst.value?.modify?.(toRaw(row))) + .catch(() => {/** Do nothing */ }) const create = () => modifyInst.value?.create?.() const test = () => testInst.value?.show?.() + const empty = computed(() => !loading.value && !(list.value?.length)) useProvide<Context>(NAMESPACE, { - table, - filter, - list, refresh, - deleteRow, + filter, list, empty, refresh, delayDuration, + remove, modify, create, test, changeEnabled, changeDelay, changeLocked, batchDelete: () => selectedAndThen(handleBatchDelete), batchEnable: () => selectedAndThen(handleBatchEnable), batchDisable: () => selectedAndThen(handleBatchDisable), - changeEnabled, changeDelay, changeLocked, - modify, create, test, }) - return { modifyInst, testInst } + return { modifyInst, testInst, inst } } -export const useLimitFilter = (): Reactive<LimitFilterOption> => useProvider<Context, 'filter'>(NAMESPACE, "filter").filter +export const useLimitFilter = (): LimitFilterOption => useProvider<Context, 'filter'>(NAMESPACE, "filter").filter -export const useLimitTable = () => useProvider<Context, 'list' | 'table' | 'refresh' | 'deleteRow' | 'changeEnabled' | 'changeDelay' | 'changeLocked'>( - NAMESPACE, 'list', 'table', 'refresh', 'deleteRow', 'changeEnabled', 'changeDelay', 'changeLocked' +export const useLimitData = () => useProvider<Context, 'list' | 'refresh' | 'changeEnabled' | 'changeDelay' | 'changeLocked'>( + NAMESPACE, 'list', 'refresh', 'changeEnabled', 'changeDelay', 'changeLocked' ) export const useLimitBatch = () => useProvider<Context, 'batchDelete' | 'batchEnable' | 'batchDisable'>( - NAMESPACE, 'batchDelete', 'batchDisable', 'batchEnable' + NAMESPACE, 'batchDelete', 'batchEnable', 'batchDisable' ) -export const useLimitAction = () => useProvider<Context, 'test' | 'modify' | 'create'>(NAMESPACE, 'modify', 'test', 'create') \ No newline at end of file +export const useLimitAction = () => useProvider<Context, 'test' | 'remove' | 'modify' | 'create' | 'empty'>(NAMESPACE, 'remove', 'modify', 'test', 'create', 'empty') + +export const useDelayDuration = () => useProvider<Context, 'delayDuration'>(NAMESPACE, 'delayDuration').delayDuration \ No newline at end of file diff --git a/src/pages/app/components/Limit/index.tsx b/src/pages/app/components/Limit/index.tsx index 77877f850..dee76c1ac 100644 --- a/src/pages/app/components/Limit/index.tsx +++ b/src/pages/app/components/Limit/index.tsx @@ -5,24 +5,24 @@ * https://opensource.org/licenses/MIT */ +import { useXsState } from '@hooks' import { defineComponent } from "vue" -import ContentContainer from "../common/ContentContainer" +import ContentCard from '../common/ContentCard' +import ContentContainer from '../common/ContentContainer' +import { Filter, List, Modify, Table, Test } from "./components" import { useLimitProvider } from "./context" -import LimitFilter from "./LimitFilter" -import LimitModify from "./LimitModify" -import LimitTable from "./LimitTable" -import LimitTest from "./LimitTest" const _default = defineComponent(() => { - const { modifyInst, testInst } = useLimitProvider() + const { modifyInst, testInst, inst } = useLimitProvider() + const isXs = useXsState() return () => ( <ContentContainer v-slots={{ - filter: () => <LimitFilter />, - content: () => <> - <LimitTable /> - <LimitModify ref={modifyInst} /> - <LimitTest ref={testInst} /> + filter: () => <Filter />, + default: () => <> + {isXs.value ? <List /> : <ContentCard><Table ref={inst} /></ContentCard>} + <Modify ref={modifyInst} /> + <Test ref={testInst} /> </> }} /> ) diff --git a/src/pages/app/components/Limit/types.d.ts b/src/pages/app/components/Limit/types.d.ts index 9e00296ce..f2c2c8ccc 100644 --- a/src/pages/app/components/Limit/types.d.ts +++ b/src/pages/app/components/Limit/types.d.ts @@ -1,4 +1,21 @@ export type LimitFilterOption = { url: string | undefined - onlyEnabled: boolean + effective: boolean } + +export type ModifyInstance = { + create(url?: string): void + modify(row: tt4b.limit.Item): void +} + +export type TestInstance = { + show(): void +} + +export type LimitInstance = { + getSelected(): tt4b.limit.Item[] +} + +export type ModifyForm = Omit<tt4b.limit.Rule, 'id'> & { + urlMiss?: boolean +} \ No newline at end of file diff --git a/src/pages/app/components/Migration/ClearPanel/ClearFilter/DateFilter.tsx b/src/pages/app/components/Migration/ClearPanel/ClearFilter/DateFilter.tsx new file mode 100644 index 000000000..65faecd51 --- /dev/null +++ b/src/pages/app/components/Migration/ClearPanel/ClearFilter/DateFilter.tsx @@ -0,0 +1,55 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { t, tN } from "@app/locale" +import { dateFormat as elDateFormat } from "@i18n/element" +import { getDatePickerIconSlots } from '@pages/element-ui/rtl' +import type { ElDatePickerShortcut } from '@pages/element-ui/types' +import { formatTime, getBirthday, MILL_PER_DAY } from "@util/time" +import { ElDatePicker } from "element-plus" +import { defineComponent, type StyleValue } from "vue" + +type Props = ModelValue<[Date, Date] | undefined> +const _default = defineComponent<Props>(props => { + const birthday = getBirthday() + const yesterday = Date.now() - MILL_PER_DAY + const daysBefore = (days: number) => new Date(Date.now() - days * MILL_PER_DAY) + const dateFormat = t(msg => msg.calendar.dateFormat) + const shortcuts: ElDatePickerShortcut[] = [{ + text: t(msg => msg.calendar.range.tillYesterday), + value: [birthday, daysBefore(1)], + }, { + text: t(msg => msg.calendar.range.tillDaysAgo, { n: 7 }), + value: [birthday, daysBefore(7)], + }, { + text: t(msg => msg.calendar.range.tillDaysAgo, { n: 30 }), + value: [birthday, daysBefore(30)], + }] + + return () => ( + <p> + <a style={{ marginInlineEnd: '10px' }}>1.</a> + {tN(msg => msg.dataManage.filterDate, { + picker: <ElDatePicker + modelValue={props.modelValue} + onUpdate:modelValue={props.onChange} + size="small" + style={{ width: "250px" } satisfies StyleValue} + startPlaceholder={formatTime(birthday, dateFormat)} + endPlaceholder={formatTime(yesterday, dateFormat)} + dateFormat={elDateFormat()} + type="daterange" + disabledDate={(date: Date) => date.getTime() > yesterday} + shortcuts={shortcuts} + rangeSeparator="-" + v-slots={getDatePickerIconSlots()} + /> + })} + </p> + ) +}, { props: ['modelValue', 'onChange'] }) + +export default _default diff --git a/src/pages/app/components/Migration/ClearPanel/ClearFilter/NumberFilter.tsx b/src/pages/app/components/Migration/ClearPanel/ClearFilter/NumberFilter.tsx new file mode 100644 index 000000000..573123f5f --- /dev/null +++ b/src/pages/app/components/Migration/ClearPanel/ClearFilter/NumberFilter.tsx @@ -0,0 +1,42 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { tN } from "@app/locale" +import { type DataManageMessage } from "@i18n/message/app/data-manage" +import { ElInput } from "element-plus" +import { defineComponent, type StyleValue } from "vue" + +const elInput = (value: string | undefined, onChange: ArgCallback<string | undefined>, placeholder: string) => ( + <ElInput + placeholder={placeholder} + clearable + size="small" + modelValue={value} + onInput={onChange} + onClear={() => onChange(undefined)} + style={{ width: '60px' } satisfies StyleValue} + /> +) + +type Props = ModelValue<[string?, string?]> & { + i18nKey: keyof DataManageMessage + lineNo: number +} + +const _default = defineComponent<Props>(props => { + return () => ( + <p> + <a style={{ marginInlineEnd: '10px' }}>{props.lineNo}.</a> + {tN(msg => msg.dataManage[props.i18nKey], { + start: elInput(props.modelValue[0], val => props.onChange?.([val, props.modelValue[1]]), '0'), + end: elInput(props.modelValue[1], val => props.onChange?.([props.modelValue[0], val]), '∞'), + })} + </p> + ) +}, { props: ['modelValue', 'onChange', 'lineNo', 'i18nKey'] }) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Migration/ClearPanel/ClearFilter/index.tsx b/src/pages/app/components/Migration/ClearPanel/ClearFilter/index.tsx new file mode 100644 index 000000000..930fe3927 --- /dev/null +++ b/src/pages/app/components/Migration/ClearPanel/ClearFilter/index.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { t } from "@app/locale" +import { Delete } from "@element-plus/icons-vue" +import { useState } from "@hooks" +import Box from '@pages/components/Box' +import { ElButton } from "element-plus" +import { defineComponent } from "vue" +import DateFilter from "./DateFilter" +import NumberFilter from "./NumberFilter" + +type Props = { + onDelete?: (date: [Date, Date] | undefined, focus: [string?, string?], time: [string?, string?]) => void +} + +const _default = defineComponent<Props>(props => { + const [date, setDate] = useState<[Date, Date]>() + const [focus, setFocus] = useState<[string?, string?]>(['0', '2']) + const [time, setTime] = useState<[string?, string?]>(['0',]) + const handleDelete = () => props.onDelete?.(date.value, focus.value, time.value) + + return () => ( + <div style={{ paddingInlineStart: '30px', paddingTop: '40px' }}> + <h3>{t(msg => msg.dataManage.filterItems)}</h3> + <DateFilter modelValue={date.value} onChange={setDate} /> + <NumberFilter i18nKey="filterFocus" lineNo={2} modelValue={focus.value} onChange={setFocus} /> + <NumberFilter i18nKey="filterTime" lineNo={3} modelValue={time.value} onChange={setTime} /> + <Box marginTop={40}> + <ElButton icon={Delete} type="danger" onClick={handleDelete}> + {t(msg => msg.button.delete)} + </ElButton> + </Box> + </div> + ) +}, { props: ['onDelete'] }) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/ClearPanel/index.tsx b/src/pages/app/components/Migration/ClearPanel/index.tsx similarity index 66% rename from src/pages/app/components/DataManage/ClearPanel/index.tsx rename to src/pages/app/components/Migration/ClearPanel/index.tsx index 2c3906202..d025f4b35 100644 --- a/src/pages/app/components/DataManage/ClearPanel/index.tsx +++ b/src/pages/app/components/Migration/ClearPanel/index.tsx @@ -5,13 +5,13 @@ * https://opensource.org/licenses/MIT */ +import { batchDeleteStats, listGroupStats, listSiteStats } from "@api/sw/stat" import { t } from "@app/locale" -import db, { type StatCondition } from "@db/stat-database" -import { MILL_PER_DAY, MILL_PER_SECOND } from "@util/time" -import { ElAlert, ElCard, ElMessage, ElMessageBox } from "element-plus" +import { cvtDateRange2Str, getBirthday, MILL_PER_DAY, MILL_PER_SECOND } from "@util/time" +import { ElCard, ElMessage, ElMessageBox } from "element-plus" import { defineComponent, type StyleValue } from "vue" -import { alertProps } from "../common" import { useDataMemory } from "../context" +import DataManageAlert from '../DataManageAlert' import ClearFilter from "./ClearFilter" type FilterOption = { @@ -20,21 +20,20 @@ type FilterOption = { time: [string?, string?] } -async function generateParamAndSelect(option: FilterOption): Promise<timer.core.Row[]> { - const param = checkParam(option) - if (!param) { - ElMessage.warning(t(msg => msg.dataManage.paramError)) - return [] - } +type ClearFilterRanges = { + focusRange: [number, number] + timeRange: [number, number?] +} +function buildClearStatQuery(option: FilterOption): (tt4b.stat.SiteQuery & tt4b.stat.GroupQuery) | undefined { + const param = checkParam(option) + if (!param) return undefined const { date } = option - let [dateStart, dateEnd] = date || [] - if (dateEnd == null) { - // default end time is the yesterday - dateEnd = new Date(new Date().getTime() - MILL_PER_DAY) - } - param.date = dateStart ? [dateStart, dateEnd] : undefined - return await db.select(param) + let [ + start = getBirthday(), + end = new Date(Date.now() - MILL_PER_DAY), + ] = date ?? [] + return { ...param, date: cvtDateRange2Str([start, end]) } } /** @@ -57,7 +56,7 @@ function assertQueryParam(range: [number, number?], mustInteger?: boolean): bool const str2Num = (str: string | undefined) => str ? parseInt(str) : undefined const seconds2Milliseconds = (a: number) => a * MILL_PER_SECOND -function checkParam(option: FilterOption): StatCondition | undefined { +function checkParam(option: FilterOption): ClearFilterRanges | undefined { const { focus, time } = option let hasError = false const focusRange = str2Range(focus, seconds2Milliseconds) as [number, number] @@ -67,10 +66,7 @@ function checkParam(option: FilterOption): StatCondition | undefined { if (hasError) { return undefined } - const condition: StatCondition = {} - condition.focusRange = focusRange - condition.timeRange = timeRange - return condition + return { focusRange, timeRange } } function str2Range(startAndEnd: [string?, string?], numAmplifier?: (origin: number) => number): [number, number | undefined] { @@ -86,15 +82,23 @@ function str2Range(startAndEnd: [string?, string?], numAmplifier?: (origin: numb const _default = defineComponent(() => { const { refreshMemory } = useDataMemory() async function handleClick(option: FilterOption) { - const result = await generateParamAndSelect(option) + const q = buildClearStatQuery(option) + if (!q) { + ElMessage.warning(t(msg => msg.dataManage.paramError)) + return + } + const siteRows = await listSiteStats(q) + const groupRows = await listGroupStats(q) + + const count = siteRows.length + groupRows.length + if (!count) return - const count = result.length const confirmMsg = t(msg => msg.dataManage.deleteConfirm, { count }) ElMessageBox.confirm(confirmMsg, { cancelButtonText: t(msg => msg.button.cancel), - confirmButtonText: t(msg => msg.button.confirm) + confirmButtonText: t(msg => msg.button.confirm), }).then(async () => { - await db.delete(result) + await batchDeleteStats([...siteRows, ...groupRows]) ElMessage.success(t(msg => msg.operation.successMsg)) refreshMemory?.() }).catch(() => { }) @@ -102,7 +106,7 @@ const _default = defineComponent(() => { return () => ( <ElCard style={{ width: '100%' } satisfies StyleValue}> - <ElAlert {...alertProps} title={t(msg => msg.dataManage.operationAlert)} /> + <DataManageAlert text={msg => msg.dataManage.operationAlert} /> <ClearFilter onDelete={(date, focus, time) => handleClick({ date, focus, time })} /> </ElCard> ) diff --git a/src/pages/app/components/Migration/DataManageAlert.tsx b/src/pages/app/components/Migration/DataManageAlert.tsx new file mode 100644 index 000000000..2dab72417 --- /dev/null +++ b/src/pages/app/components/Migration/DataManageAlert.tsx @@ -0,0 +1,32 @@ +import { t, type I18nKey } from '@app/locale' +import { ElAlert, type AlertProps } from 'element-plus' +import { computed, defineComponent } from 'vue' + +type Props = { + type?: AlertProps['type'] + text: I18nKey | string +} + +const DataManageAlert = defineComponent<Props>(props => { + const message = computed(() => + typeof props.text === 'string' ? props.text : t(props.text)) + + return () => ( + <div + style={{ + flexShrink: 0, + width: '100%', + minHeight: 52, + display: 'flex', + alignItems: 'center', + boxSizing: 'border-box', + }} + > + <ElAlert type={props.type ?? 'info'} closable={false} center style={{ width: '100%' }}> + {message.value} + </ElAlert> + </div> + ) +}, { props: ['text', 'type'] }) + +export default DataManageAlert \ No newline at end of file diff --git a/src/pages/app/components/Migration/MemoryInfo.tsx b/src/pages/app/components/Migration/MemoryInfo.tsx new file mode 100644 index 000000000..8252c03fc --- /dev/null +++ b/src/pages/app/components/Migration/MemoryInfo.tsx @@ -0,0 +1,87 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { getOption } from '@api/sw/option' +import { t } from '@app/locale' +import { OPTION_ROUTE } from '@app/router/constants' +import { useRequest } from '@hooks' +import Flex from "@pages/components/Flex" +import { getColor } from '@pages/util/style' +import { getAppPageUrl } from '@util/constant/url' +import { ElCard, ElLink, ElProgress, ElText } from "element-plus" +import { computed, defineComponent, type StyleValue } from "vue" +import { useDataMemory } from "./context" +import DataManageAlert from './DataManageAlert' + +const byte2Mb = (size: number) => Math.round((size || 0) / 1024.0 / 1024.0 * 1000) / 1000 + +const IDB_THRESHOLD_MB = 5 +const IDB_THRESHOLD_PERCENTAGE = 75 + +function computeColor(percentage: number, total: number): string | undefined { + if (!total) { + return getColor('warning') + } else if (percentage < 50) { + return getColor('primary') + } else if (percentage < IDB_THRESHOLD_PERCENTAGE) { + return getColor('warning') + } else { + return getColor('danger') + } +} + +const totalTitle = (totalMb: number) => totalMb + ? t(msg => msg.dataManage.totalMemoryAlert, { size: totalMb }) + : t(msg => msg.dataManage.totalMemoryAlert1) + + +const _default = defineComponent(() => { + const { memory } = useDataMemory() + const { data: option } = useRequest(getOption) + const usedMb = computed(() => byte2Mb(memory.value?.used)) + const totalMb = computed(() => byte2Mb(memory.value?.total)) + const percentage = computed(() => memory.value?.total ? Math.round(memory.value?.used * 10000.0 / memory.value.total) / 100 : 0) + const color = computed(() => computeColor(percentage.value, memory.value.total)) + const idbTipVisible = computed(() => { + if (option.value?.storage !== 'classic') return false + return totalMb.value ? percentage.value > IDB_THRESHOLD_PERCENTAGE : usedMb.value > IDB_THRESHOLD_MB + }) + + return () => ( + <ElCard style={{ width: '100%' } satisfies StyleValue}> + <Flex column width='100%' align="center" gap={16}> + <DataManageAlert + type={totalMb.value ? "info" : "warning"} + text={totalTitle(totalMb.value)} + /> + <Flex justify='center' align='center'> + <ElProgress + strokeWidth={10} + percentage={percentage.value} + type="circle" + color={color.value} + /> + </Flex> + <Flex justify='center' column gap={10}> + <ElText style={{ color: color.value }} size='large'> + {t(msg => msg.dataManage.usedMemoryAlert, { size: usedMb.value })} + </ElText> + {idbTipVisible.value && ( + <ElLink + type='primary' underline + href={getAppPageUrl(OPTION_ROUTE, { i: 'tracking' })} + > + {t(msg => msg.dataManage.idbAlert)} + </ElLink> + )} + </Flex> + </Flex> + </ElCard> + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Migration/Restore/ImportOtherButton/Step1.tsx b/src/pages/app/components/Migration/Restore/ImportOtherButton/Step1.tsx new file mode 100644 index 000000000..021f48826 --- /dev/null +++ b/src/pages/app/components/Migration/Restore/ImportOtherButton/Step1.tsx @@ -0,0 +1,48 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { useDialogSop } from '@app/components/common/DialogSop/context' +import { t } from '@app/locale' +import { Document } from "@element-plus/icons-vue" +import Flex from "@pages/components/Flex" +import { ElButton, ElForm, ElFormItem } from "element-plus" +import { defineComponent, ref } from "vue" +import type { ImportForm, OtherExtension } from './types' + +const OTHER_FILE_FORMAT: Record<OtherExtension, string> = { + webtime_tracker: '.csv,.json', + web_activity_time_tracker: '.csv,.json', + history_trends_unlimited: '.tsv', +} + +const _default = defineComponent<{}>(() => { + const { form } = useDialogSop<ImportForm>() + const fileInput = ref<HTMLInputElement>() + + return () => ( + <ElForm labelWidth={100} labelPosition="left" style={{ width: '500px' }}> + <ElFormItem label={t(msg => msg.dataManage.importOther.file)} required> + <Flex gap={10}> + <ElButton icon={Document} onClick={() => fileInput.value?.click?.()}> + {t(msg => msg.dataManage.importOther.selectFileBtn)} + <input + key={form.ext} + ref={fileInput} + type="file" + accept={OTHER_FILE_FORMAT[form.ext]} + style={{ display: 'none' }} + onChange={() => form.file = fileInput.value?.files?.[0]} + /> + </ElButton> + {<span>{form.file?.name ?? ''}</span>} + </Flex> + </ElFormItem> + </ElForm> + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Migration/Restore/ImportOtherButton/Step2.tsx b/src/pages/app/components/Migration/Restore/ImportOtherButton/Step2.tsx new file mode 100644 index 000000000..59d40c9e9 --- /dev/null +++ b/src/pages/app/components/Migration/Restore/ImportOtherButton/Step2.tsx @@ -0,0 +1,28 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { useDialogSop } from '@app/components/common/DialogSop/context' +import CompareTable from "@app/components/common/imported/CompareTable" +import ResolutionRadio from "@app/components/common/imported/ResolutionRadio" +import Flex from "@pages/components/Flex" +import { defineComponent } from "vue" +import type { ImportForm } from './types' + +const _default = defineComponent<{}>(() => { + const { form } = useDialogSop<ImportForm>() + + return () => ( + <Flex column width="100%" gap={20}> + <CompareTable data={form.data} comparedCol={msg => msg.dataManage.importOther.imported} /> + <Flex width="100%" justify="center"> + <ResolutionRadio modelValue={form.resolution} onChange={v => form.resolution = v} /> + </Flex> + </Flex> + ) +}) + +export default _default diff --git a/src/pages/app/components/Migration/Restore/ImportOtherButton/detector.ts b/src/pages/app/components/Migration/Restore/ImportOtherButton/detector.ts new file mode 100644 index 000000000..7e49e119c --- /dev/null +++ b/src/pages/app/components/Migration/Restore/ImportOtherButton/detector.ts @@ -0,0 +1,23 @@ +import { IS_CHROME, IS_EDGE } from '@util/constant/environment' + +const WATT_CHROME_ID = 'hhfnghjdeddcfegfekjeihfmbjenlomm' +const WATT_EDGE_ID = 'eepmlmdenlkkjieghjmedjahpofieogf' +const WATT_RES_URL = '/assets/pomodoro-sounds/1.mp3' +export async function detectWatt(): Promise<boolean> { + if (IS_CHROME) { + return await fetchChrome(WATT_CHROME_ID, WATT_RES_URL) + } else if (IS_EDGE) { + return await fetchChrome(WATT_CHROME_ID, WATT_RES_URL) || await fetchChrome(WATT_EDGE_ID, WATT_RES_URL) + } + return false +} + +async function fetchChrome(id: string, uri: string) { + const url = `chrome-extension://${id}${uri}` + try { + const resp = await fetch(url, { method: 'HEAD' }) + return resp.status === 200 + } catch { + return false + } +} \ No newline at end of file diff --git a/src/pages/app/components/Migration/Restore/ImportOtherButton/index.tsx b/src/pages/app/components/Migration/Restore/ImportOtherButton/index.tsx new file mode 100644 index 000000000..b6984ab25 --- /dev/null +++ b/src/pages/app/components/Migration/Restore/ImportOtherButton/index.tsx @@ -0,0 +1,143 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { importOther } from '@api/sw/immigration' +import DialogSop from '@app/components/common/DialogSop' +import { initDialogSopContext } from '@app/components/common/DialogSop/context' +import { useDataMemory } from '@app/components/Migration/context' +import { t } from "@app/locale" +import { css } from '@emotion/css' +import { useRequest, useState } from '@hooks' +import Flex from '@pages/components/Flex' +import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElText } from "element-plus" +import { type Component, computed, defineComponent, h, toRaw } from "vue" +import { detectWatt } from './detector' +import { parseFile } from './processor' +import Step1 from './Step1' +import Step2 from './Step2' +import type { ImportForm, OtherExtension } from './types' + +type Config = { + name: string + Icon: Component +} + +const EXTENSION_CONFIGS: Record<OtherExtension, Config> = { + webtime_tracker: { + name: "Webtime Tracker", + Icon: () => ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"> + <g><path style="opacity:1" fill="#3896fa" d="M 52.5,-0.5 C 54.1667,-0.5 55.8333,-0.5 57.5,-0.5C 58.8309,8.13683 58.8309,16.8035 57.5,25.5C 53.6019,26.975 49.6019,28.1417 45.5,29C 41.6563,31.5153 37.823,34.0153 34,36.5C 27.7055,32.376 21.5388,28.0426 15.5,23.5C 14.3691,21.9255 14.2025,20.2588 15,18.5C 25.3653,7.73449 37.8653,1.40116 52.5,-0.5 Z" /></g> + <g><path style="opacity:1" fill="#f9645c" d="M 61.5,-0.5 C 63.1667,-0.5 64.8333,-0.5 66.5,-0.5C 96.5,4.83333 114.167,22.5 119.5,52.5C 119.5,57.1667 119.5,61.8333 119.5,66.5C 114.167,96.5 96.5,114.167 66.5,119.5C 62.5,119.5 58.5,119.5 54.5,119.5C 41.2903,118.898 29.957,113.898 20.5,104.5C 26.0177,98.8165 31.351,92.9832 36.5,87C 43.7447,89.8929 51.4114,91.7263 59.5,92.5C 73.6465,92.5144 83.8132,86.181 90,73.5C 97.1507,47.4534 87.6507,31.4534 61.5,25.5C 60.1691,16.8035 60.1691,8.13683 61.5,-0.5 Z" /></g> + <g><path style="opacity:1" fill="#51c15c" d="M -0.5,66.5 C -0.5,61.8333 -0.5,57.1667 -0.5,52.5C 0.666576,42.9739 3.99991,34.1406 9.5,26C 10.9078,25.6848 12.2411,26.0181 13.5,27C 18.5,30.6667 23.5,34.3333 28.5,38C 29.8045,38.804 30.4712,39.9707 30.5,41.5C 24.1818,56.0341 25.5151,69.7007 34.5,82.5C 29.4427,88.737 24.1093,94.9037 18.5,101C 17.5,101.667 16.5,101.667 15.5,101C 6.46176,91.0972 1.12842,79.5972 -0.5,66.5 Z" /></g> + </svg> + ), + }, + web_activity_time_tracker: { + name: "Web Activity Time Tracker", + Icon: () => ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"> + <g><path style="opacity:1" fill="#023750" d="M 45.5,-0.5 C 54.8333,-0.5 64.1667,-0.5 73.5,-0.5C 74.7785,2.00241 74.7785,4.50241 73.5,7C 70.1832,7.49834 66.8499,7.66501 63.5,7.5C 63.5,9.83333 63.5,12.1667 63.5,14.5C 74.5659,14.5351 84.2325,18.2017 92.5,25.5C 94.3586,23.8076 96.3586,22.3076 98.5,21C 105.333,19.8333 108.167,22.6667 107,29.5C 105.692,31.6414 104.192,33.6414 102.5,35.5C 120.15,66.7322 114.483,92.8989 85.5,114C 80.285,116.571 74.9516,118.404 69.5,119.5C 62.8333,119.5 56.1667,119.5 49.5,119.5C 26.929,113.761 12.7623,99.4278 7,76.5C 4.65865,61.5335 7.82532,47.8669 16.5,35.5C 14.4346,32.9573 13.1012,30.1239 12.5,27C 13.0621,21.4471 16.0621,19.4471 21.5,21C 23.5852,22.0414 25.2519,23.5414 26.5,25.5C 34.7685,18.2011 44.4352,14.5344 55.5,14.5C 55.5,12.1667 55.5,9.83333 55.5,7.5C 52.1501,7.66501 48.8168,7.49834 45.5,7C 44.2215,4.50241 44.2215,2.00241 45.5,-0.5 Z" /></g> + <g><path style="opacity:1" fill="#eff2f0" d="M 52.5,21.5 C 71.0342,20.1879 85.8675,26.8546 97,41.5C 108.799,63.1963 106.299,83.0297 89.5,101C 64.3901,118.657 41.8901,115.824 22,92.5C 11.2242,73.4867 12.2242,55.1534 25,37.5C 32.8691,29.7679 42.0357,24.4345 52.5,21.5 Z" /></g> + <g><path style="opacity:1" fill="#6aba57" d="M 53.5,29.5 C 54.8333,29.5 56.1667,29.5 57.5,29.5C 57.3354,32.5184 57.502,35.5184 58,38.5C 59,39.8333 60,39.8333 61,38.5C 61.3333,35.5 61.6667,32.5 62,29.5C 82.4616,32.4608 93.9616,44.1274 96.5,64.5C 93.5525,64.2229 90.7191,64.5562 88,65.5C 87.3162,66.7839 87.4829,67.9505 88.5,69C 91.1667,69.3333 93.8333,69.6667 96.5,70C 93.7002,90.1331 82.2002,101.633 62,104.5C 61.502,101.518 61.3354,98.5184 61.5,95.5C 60.1667,95.5 58.8333,95.5 57.5,95.5C 57.6646,98.5184 57.498,101.518 57,104.5C 36.7998,101.633 25.2998,90.1331 22.5,70C 25.1667,69.6667 27.8333,69.3333 30.5,69C 31.5171,67.9505 31.6838,66.7839 31,65.5C 28.2809,64.5562 25.4475,64.2229 22.5,64.5C 24.6824,45.6491 35.0158,33.9824 53.5,29.5 Z" /></g> + <g><path style="opacity:1" fill="#033751" d="M 79.5,41.5 C 84.1225,40.4082 85.9558,42.0748 85,46.5C 76.4048,54.4232 68.5715,62.9232 61.5,72C 55.7247,72.2045 53.5581,69.3712 55,63.5C 64.2013,57.4732 72.3679,50.1399 79.5,41.5 Z" /></g> + </svg> + ), + }, + history_trends_unlimited: { + name: "History Trends Unlimited", + Icon: () => ( + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"> + <g><path style="opacity:1" fill="#e6e000" d="M 59.5,5.5 C 59.5,23.8333 59.5,42.1667 59.5,60.5C 42.4539,65.6783 25.4539,71.0117 8.5,76.5C 1.16551,47.0244 10.8322,24.8577 37.5,10C 44.4758,6.7715 51.8091,5.2715 59.5,5.5 Z" /></g> + <g><path style="opacity:1" fill="#446fa1" d="M 59.5,5.5 C 87.1275,6.95499 104.961,20.955 113,47.5C 115.24,57.3463 114.74,67.013 111.5,76.5C 94.1807,71.1767 76.8474,65.8433 59.5,60.5C 59.5,42.1667 59.5,23.8333 59.5,5.5 Z" /></g> + <g><path style="opacity:1" fill="#a7433d" d="M 59.5,60.5 C 76.8474,65.8433 94.1807,71.1767 111.5,76.5C 105.384,93.7824 93.7178,105.616 76.5,112C 52.7659,118.31 32.9326,112.144 17,93.5C 13.0956,88.3579 10.2623,82.6912 8.5,76.5C 25.4539,71.0117 42.4539,65.6783 59.5,60.5 Z" /></g> + </svg> + ), + }, +} + +const STEP_TITLES = [ + t(msg => msg.dataManage.importOther.step1), + t(msg => msg.dataManage.importOther.step2), +] + +const dropdownCls = css` + width: 100%; + & .el-button-group { + width: 100%; + display: flex; + } + & .el-button-group > .el-button:first-child { + flex: 1; + min-width: 0; + } +` + +const _default = defineComponent(() => { + const { refreshMemory } = useDataMemory() + const [ext, setExt] = useState<OtherExtension>('webtime_tracker') + useRequest(detectWatt, { onSuccess: v => v && setExt('web_activity_time_tracker') }) + const buttonText = computed(() => t(msg => msg.dataManage.restoreFromOther, { ext: EXTENSION_CONFIGS[ext.value].name })) + + const { step, open } = initDialogSopContext<ImportForm>({ + stepCount: 2, + init: () => ({ ext: 'webtime_tracker', data: { rows: [], focus: true, time: true } }), + onNext: async ({ form }) => { + const file = form.file + if (!file) throw new Error(t(msg => msg.dataManage.importOther.fileNotSelected)) + + const data = await parseFile(form.ext, file) + if (!data.rows.length) throw new Error("No rows parsed") + form.data = data + }, + onFinish: async ({ form }) => { + const data = form.data + if (!data) throw new Error(t(msg => msg.dataManage.importOther.fileNotSelected)) + const resolution = form.resolution + if (!resolution) throw new Error(t(msg => msg.dataManage.importOther.conflictNotSelected)) + await importOther({ data: toRaw(data), resolution }) + refreshMemory?.() + }, + }) + + return () => <> + <ElDropdown + splitButton + type='primary' + size="large" + class={dropdownCls} + style={{ width: '100%' }} + onCommand={(ext: OtherExtension) => setExt(ext)} + onClick={() => open({ ext: ext.value, data: { rows: [], focus: true, time: true } })} + v-slots={{ + dropdown: () => ( + <ElDropdownMenu> + {Object.entries(EXTENSION_CONFIGS).map(([ext, config]) => ( + <ElDropdownItem key={ext} command={ext}> + <ElIcon>{h(config.Icon)}</ElIcon> + {config.name} + </ElDropdownItem> + ))} + </ElDropdownMenu> + ), + }} + > + <Flex gap={2} align='center'> + <ElIcon size='1.4em'>{h(EXTENSION_CONFIGS[ext.value].Icon)}</ElIcon> + <ElText truncated style={{ minWidth: 0, color: 'inherit', fontSize: 'inherit', lineHeight: 'inherit' }}>{buttonText.value}</ElText> + </Flex> + </ElDropdown> + <DialogSop title={buttonText.value} stepTitles={STEP_TITLES} width='80%' top="10vh"> + <Flex width="100%" justify="center"> + <Step1 v-show={step.value === 0} /> + <Step2 v-show={step.value === 1} /> + </Flex> + </DialogSop> + </> +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/DataManage/Migration/ImportOtherButton/processor.ts b/src/pages/app/components/Migration/Restore/ImportOtherButton/processor.ts similarity index 55% rename from src/pages/app/components/DataManage/Migration/ImportOtherButton/processor.ts rename to src/pages/app/components/Migration/Restore/ImportOtherButton/processor.ts index 7a97196d2..87846e579 100644 --- a/src/pages/app/components/DataManage/Migration/ImportOtherButton/processor.ts +++ b/src/pages/app/components/Migration/Restore/ImportOtherButton/processor.ts @@ -5,33 +5,24 @@ * https://opensource.org/licenses/MIT */ -import { fillExist } from "@service/components/import-processor" -import { AUTHOR_EMAIL } from "@src/package" +import { AUTHOR_EMAIL } from "@/package" +import { sendMsg2Runtime } from '@api/sw/common' import { IS_WINDOWS } from "@util/constant/environment" import { extractHostname, isBrowserUrl } from "@util/pattern" +import { mergeWith } from '@util/stat' import { formatTimeYMD, MILL_PER_SECOND } from "@util/time" +import type { OtherExtension } from './types' -export type OtherExtension = - | "webtime_tracker" - | "web_activity_time_tracker" - | "history_trends_unlimited" - -const throwError = () => { throw new Error("Failed to parse, please check your file or contact the author via " + AUTHOR_EMAIL) } +function throwError<T>(): T { + throw new Error("Failed to parse, please check your file or contact the author via " + AUTHOR_EMAIL) +} -/** - * Parse the content to rows - * - * @param type extension type - * @param file selected file - * @returns row data - */ -export async function parseFile(ext: OtherExtension, file: File): Promise<timer.imported.Data> { - // const worker = new Worker() - let rows: timer.imported.Row[] = [] +export async function parseFile(ext: OtherExtension, file: File): Promise<tt4b.imported.Data> { + let rows: tt4b.imported.Row[] = [] let focus = false let time = false if (ext === 'web_activity_time_tracker') { - rows = await parseWebActivityTimeTracker(file) + [rows, time] = await parseWebActivityTimeTracker(file) focus = true } else if (ext === 'webtime_tracker') { rows = await parseWebtimeTracker(file) @@ -40,20 +31,67 @@ export async function parseFile(ext: OtherExtension, file: File): Promise<timer. rows = await parseHistoryTrendsUnlimited(file) time = true } - await fillExist(rows) + const exists = await sendMsg2Runtime('item.batch', rows) + await mergeWith(rows, exists, (r, exist) => { r.exist = exist }) return { rows, focus, time } } -async function parseWebActivityTimeTracker(file: File): Promise<timer.imported.Row[]> { +async function parseWebActivityTimeTracker(file: File): Promise<[tt4b.imported.Row[], time: boolean]> { const text = await file.text() - const lines = text.split('\n').map(line => line.trim()).filter(line => !!line).splice(1) - const rows = lines.map(line => { - const [host, date, seconds] = line.split(',').map(cell => cell.trim()) - !host || !date || (!seconds && seconds !== '0') && throwError() - const [year, month, day] = date.split('/') - !year || !month || !day && throwError() - const realDate = `${year}${month.length == 2 ? month : '0' + month}${day.length == 2 ? day : '0' + day}` - return { host, date: realDate, focus: parseInt(seconds) * MILL_PER_SECOND, time: 0 } satisfies timer.imported.Row + if (isCsvFile(file)) { + const lines = text.split('\n').map(line => line.trim()).filter(line => !!line).splice(1) + const rows: tt4b.imported.Row[] = lines.map(line => { + const [host, date, seconds] = line.split(',').map(cell => cell.trim()) + if (!host || !date || (!seconds && seconds !== '0')) return throwError() + const [year, month, day] = date?.split('/') ?? [] + if (!year || !month || !day) return throwError() + const realDate = `${year}${month.length == 2 ? month : '0' + month}${day.length == 2 ? day : '0' + day}` + return { host, date: realDate, focus: parseInt(seconds) * MILL_PER_SECOND, time: 0 } + }) + return [rows, false] + } else if (isJsonFile(file)) { + return [parseWattJsonFile(text), true] + } else { + throw new Error("Invalid file format") + } +} + +type WattJsonItem = { + url?: string + favicon?: string + summaryTime?: number + counter?: number + days?: { + // new Date().toLocaleDateString("en-US") => "7/22/2023" + // @see https://github.com/Stigmatoz/web-activity-time-tracker/blob/master/src/utils/date.ts#L6 + date?: string + // seconds + summary?: number + // visit count + counter?: number + }[] +} + +const parseWattJsonFile = (fileContent: string) => { + const rows: tt4b.imported.Row[] = [] + const data = JSON.parse(fileContent) as WattJsonItem[] + data.forEach(({ url: host, days }) => { + if (!host) throw new Error("Invalid item without url") + if (!days) throw new Error("Invalid item without days") + days.forEach(({ date, summary, counter: time }) => { + if (!date) throw new Error("Invalid day without date") + if (!summary && !time) throw new Error("Invalid day without summary and counter") + const [month, day, year] = date.split('/') + if (!year || !month || !day) throw new Error("Invalid date format: " + date) + const dateObj = new Date(parseInt(year), parseInt(month) - 1, parseInt(day)) + const realDate = formatTimeYMD(dateObj) + rows.push({ + host, + date: realDate, + focus: (summary ?? 0) * MILL_PER_SECOND, + time: time ?? 0, + }) + }) }) return rows } @@ -75,13 +113,13 @@ type WebtimeTrackerBackup = { const WEBTIME_TRACKER_DATE_REG = /(\d{2})-(\d{2})-\d{2}/ const cvtWebtimeTrackerDate = (date: string): string | undefined => WEBTIME_TRACKER_DATE_REG.test(date) ? date.split('-').join('') : undefined -async function parseWebtimeTracker(file: File): Promise<timer.imported.Row[]> { +async function parseWebtimeTracker(file: File): Promise<tt4b.imported.Row[]> { const text = await file.text() if (isJsonFile(file)) { // JSON file by backup const data = JSON.parse(text) as WebtimeTrackerBackup const domains = data?.content?.domains || {} - const rows: timer.imported.Row[] = Object.entries(domains) + const rows: tt4b.imported.Row[] = Object.entries(domains) .flatMap( ([host, value]) => Object.entries(value?.days || {}) .map(([date, item]) => [host, cvtWebtimeTrackerDate(date), item?.seconds] as [string, string, number]) @@ -91,19 +129,19 @@ async function parseWebtimeTracker(file: File): Promise<timer.imported.Row[]> { host, date, focus: seconds * MILL_PER_SECOND - } as timer.imported.Row)) + } as tt4b.imported.Row)) return rows } else if (isCsvFile(file)) { const lines = text.split('\n').map(line => line.trim()).filter(line => !!line) - const colHeaders = lines[0].split(',') - const rows: timer.imported.Row[] = [] + const colHeaders = lines[0]?.split(',') ?? [] + const rows: tt4b.imported.Row[] = [] lines.slice(1).forEach(line => { const cells = line.split(',') const host = cells[0] if (!host) return for (let i = 1; i < colHeaders?.length; i++) { - const seconds = Number.parseInt(cells[i]) - const date = cvtWebtimeTrackerDate(colHeaders[i]) + const seconds = Number.parseInt(cells[i] ?? '') + const date = cvtWebtimeTrackerDate(colHeaders[i] ?? '') seconds && date && rows.push({ host, date, focus: seconds * MILL_PER_SECOND, time: 0 }) } }) @@ -115,9 +153,9 @@ async function parseWebtimeTracker(file: File): Promise<timer.imported.Row[]> { function parseHistoryTrendsUnlimitedLine(line: string, data: { [dateAndHost: string]: number }) { const cells = line.split('\t') const url = cells[0] - if (isBrowserUrl(url)) return + if (!url || isBrowserUrl(url)) return const tsMaybe = cells?.[1]?.trim?.() - if (/^U\d{13,}(\.\d*)?$/.test(tsMaybe)) { + if (tsMaybe && /^U\d{13,}(\.\d*)?$/.test(tsMaybe)) { // Backup data let date: string try { @@ -132,16 +170,16 @@ function parseHistoryTrendsUnlimitedLine(line: string, data: { [dateAndHost: str data[key] = (data[key] ?? 0) + 1 } else { // Analyze data - const host = cells[1] - const dateStr = cells[4] - const date = cvtWebtimeTrackerDate(dateStr?.substring(0, 10)) + const host = cells[1] ?? '' + const dateStr = cells[4] ?? '' + const date = cvtWebtimeTrackerDate(dateStr.substring(0, 10)) if (!host || !date) return const key = date + host data[key] = (data[key] ?? 0) + 1 } } -async function parseHistoryTrendsUnlimited(file: File): Promise<timer.imported.Row[]> { +async function parseHistoryTrendsUnlimited(file: File): Promise<tt4b.imported.Row[]> { const text = await file.text() if (isTsvFile(file)) { const lines = text.split('\n').map(line => line.trim()).filter(line => !!line) @@ -150,7 +188,7 @@ async function parseHistoryTrendsUnlimited(file: File): Promise<timer.imported.R return Object.entries(dailyVisits).map(([dateAndHost, time]) => { const date = dateAndHost.substring(0, 8) const host = dateAndHost.substring(8) - return { date, host, time, focus: 0 } satisfies timer.imported.Row + return { date, host, time, focus: 0 } satisfies tt4b.imported.Row }) } throw new Error("Invalid file format") diff --git a/src/pages/app/components/Migration/Restore/ImportOtherButton/types.ts b/src/pages/app/components/Migration/Restore/ImportOtherButton/types.ts new file mode 100644 index 000000000..d1abbd52c --- /dev/null +++ b/src/pages/app/components/Migration/Restore/ImportOtherButton/types.ts @@ -0,0 +1,11 @@ +export type ImportForm = { + ext: OtherExtension + file?: File + data: tt4b.imported.Data + resolution?: tt4b.imported.ConflictResolution +} + +export type OtherExtension = + | "webtime_tracker" + | "web_activity_time_tracker" + | "history_trends_unlimited" diff --git a/src/pages/app/components/Migration/Restore/index.tsx b/src/pages/app/components/Migration/Restore/index.tsx new file mode 100644 index 000000000..256340807 --- /dev/null +++ b/src/pages/app/components/Migration/Restore/index.tsx @@ -0,0 +1,85 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { sendMsg2Runtime } from '@api/sw/common' +import { t } from '@app/locale' +import { Download, Upload } from "@element-plus/icons-vue" +import { useManualRequest } from '@hooks' +import Flex from "@pages/components/Flex" +import { deserialize, exportJson } from "@util/file" +import { formatTime } from "@util/time" +import { ElButton, ElCard, ElMessage } from "element-plus" +import { defineComponent, ref, type StyleValue } from "vue" +import { useDataMemory } from '../context' +import DataManageAlert from '../DataManageAlert' +import ImportOtherButton from "./ImportOtherButton" + +const BUTTON_STYLE: StyleValue = { + width: '100%', + margin: 0, +} + +const Migration = defineComponent(() => { + const { refreshMemory } = useDataMemory() + const fileInput = ref<HTMLInputElement>() + + const { refresh: handleExport } = useManualRequest(async () => { + const data = await sendMsg2Runtime('immigration.export') + const timestamp = formatTime(new Date(), '{y}{m}{d}_{h}{i}{s}') + exportJson(data, `timer_backup_${timestamp}`) + }, { + loadingOptions: { fullscreen: true }, + onSuccess: () => ElMessage.success(t(msg => msg.operation.successMsg)), + }) + + const { refresh: onFileSelected } = useManualRequest(async () => { + const input = fileInput.value + try { + const file = input?.files?.[0] + if (!file) throw new Error(t(msg => msg.dataManage.importOther.fileNotSelected)) + const fileText = await file.text() + const data = deserialize(fileText) + if (!data) throw new Error(t(msg => msg.dataManage.importError)) + await sendMsg2Runtime('immigration.import', data) + } finally { + if (input) input.value = '' + } + }, { + loadingOptions: { fullscreen: true }, + onSuccess: () => { + refreshMemory() + ElMessage.success(t(msg => msg.operation.successMsg)) + }, + onError: e => ElMessage.error(e instanceof Error ? e.message : String(e)), + }) + + return () => ( + <ElCard style={{ width: '100%' } satisfies StyleValue}> + <Flex column width='100%' align='center' gap={16}> + <DataManageAlert text={msg => msg.dataManage.migrationAlert} /> + <Flex column gap={20} maxWidth={350} width='100%' align='stretch'> + <ImportOtherButton /> + <ElButton size="large" icon={Download} onClick={handleExport} style={BUTTON_STYLE}> + {t(msg => msg.dataManage.exportData)} + </ElButton> + <ElButton size="large" icon={Upload} onClick={() => fileInput.value?.click()} style={BUTTON_STYLE}> + {t(msg => msg.dataManage.restoreData)} + <input + ref={fileInput} + type="file" + accept=".json" + style={{ display: "none" }} + onChange={onFileSelected} + /> + </ElButton> + </Flex> + </Flex> + </ElCard> + ) +}) + +export default Migration diff --git a/src/pages/app/components/DataManage/context.ts b/src/pages/app/components/Migration/context.ts similarity index 54% rename from src/pages/app/components/DataManage/context.ts rename to src/pages/app/components/Migration/context.ts index ac8877778..dffe0eb29 100644 --- a/src/pages/app/components/DataManage/context.ts +++ b/src/pages/app/components/Migration/context.ts @@ -1,16 +1,19 @@ -import { getUsedStorage, type MemoryInfo } from "@db/memory-detector" -import { useProvide, useProvider, useRequest } from "@hooks" -import { type Ref } from "vue" +import { sendMsg2Runtime } from '@api/sw/common' +import { useProvide, useProvider, useRequest } from '@hooks' +import { type ShallowRef } from "vue" type Context = { - memory: Ref<MemoryInfo> + memory: ShallowRef<tt4b.common.StorageUsage> refreshMemory: () => void } const NAMESPACE = 'dataManage' export const initDataManage = () => { - const { data: memory, refresh: refreshMemory } = useRequest(getUsedStorage, { defaultValue: { used: 0, total: 1 } }) + const { data: memory, refresh: refreshMemory } = useRequest( + () => sendMsg2Runtime('meta.usedStorage'), + { defaultValue: { used: 0, total: 1 } }, + ) useProvide<Context>(NAMESPACE, { memory, refreshMemory }) } diff --git a/src/pages/app/components/Migration/index.tsx b/src/pages/app/components/Migration/index.tsx new file mode 100644 index 000000000..22e1b7c1e --- /dev/null +++ b/src/pages/app/components/Migration/index.tsx @@ -0,0 +1,40 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { MediaSize, useMediaSize } from '@hooks' +import Flex from "@pages/components/Flex" +import { ElScrollbar } from 'element-plus' +import { computed, defineComponent, type StyleValue } from "vue" +import ContentContainer from '../common/ContentContainer' +import ClearPanel from './ClearPanel' +import MemoryInfo from "./MemoryInfo" +import Migration from "./Restore" +import { initDataManage } from "./context" + +export default defineComponent(() => { + initDataManage() + const mediaSize = useMediaSize() + const ltSm = computed(() => mediaSize.value < MediaSize.sm) + + return () => ( + <ElScrollbar height="100%" style={{ width: '100%' } satisfies StyleValue}> + <ContentContainer> + <Flex column gap={22}> + <Flex gap={22} align='start' column={ltSm.value}> + <Flex flex={5} width='100%' style={{ minWidth: 0 }}> + <Migration /> + </Flex> + <Flex flex={5} width='100%' style={{ minWidth: 0 }}> + <MemoryInfo /> + </Flex> + </Flex> + <ClearPanel /> + </Flex> + </ContentContainer> + </ElScrollbar> + ) +}) \ No newline at end of file diff --git a/src/pages/app/components/Option/Select.tsx b/src/pages/app/components/Option/Select.tsx index b39d68c05..e3df4eecf 100644 --- a/src/pages/app/components/Option/Select.tsx +++ b/src/pages/app/components/Option/Select.tsx @@ -1,37 +1,22 @@ -import { t } from "@app/locale" -import { ElCard, ElSelect } from "element-plus" -import { defineComponent, h, ref, useSlots, watch } from "vue" -import { useRouter } from "vue-router" -import ContentContainer from "../common/ContentContainer" -import { CATE_LABELS, changeQuery, type OptionCategory, parseQuery } from "./common" - -const IGNORED_CATE: OptionCategory[] = ['dailyLimit'] +import { ElCard, ElOption, ElSelect } from "element-plus" +import { defineComponent, h, useSlots } from "vue" +import ContentContainer from '../common/ContentContainer' +import { useCategory } from "./useCategory" const _default = defineComponent(() => { - const tab = ref<OptionCategory>(parseQuery() || 'appearance') - const router = useRouter() - watch(tab, () => changeQuery(tab.value, router)) - + const { category, setCategory, getLabel } = useCategory() const slots = useSlots() return () => ( <ContentContainer v-slots={{ filter: () => ( - <ElSelect - modelValue={tab.value} - onChange={val => tab.value = val} - > - {Object.keys(slots) - .filter(key => !IGNORED_CATE.includes(key as OptionCategory) && key !== 'default') - .map(cate => ( - <ElSelect.Option value={cate} label={t(CATE_LABELS[cate as OptionCategory])} /> - )) - } + <ElSelect modelValue={category.value} onChange={setCategory}> + {Object.keys(slots).map(c => <ElOption value={c} label={getLabel(c)} />)} </ElSelect> ), default: () => { - const slot = slots[tab.value] - return !!slot && <ElCard class="option-select-card">{h(slot)}</ElCard> + const slot = slots[category.value] + return !!slot && <ElCard style={{ "--el-card-padding": '20px 10px' }}>{h(slot)}</ElCard> } }} /> ) diff --git a/src/pages/app/components/Option/Tabs.tsx b/src/pages/app/components/Option/Tabs.tsx index 40e5b3bf1..746e7d1b2 100644 --- a/src/pages/app/components/Option/Tabs.tsx +++ b/src/pages/app/components/Option/Tabs.tsx @@ -1,115 +1,94 @@ -import { t } from "@app/locale" +import { t } from '@app/locale' import { Download, Refresh, Upload } from "@element-plus/icons-vue" +import { css } from '@emotion/css' import Flex from "@pages/components/Flex" -import { ElLink, ElMessage, ElMessageBox, ElTabPane, ElTabs, ElTooltip, TabPaneName } from "element-plus" -import { defineComponent, h, ref, useSlots } from "vue" -import { useRouter } from "vue-router" -import ContentContainer from "../common/ContentContainer" -import { CATE_LABELS, changeQuery, type OptionCategory, parseQuery } from "./common" +import { ElButton, ElMessage, ElMessageBox, ElTabPane, ElTabs, useNamespace } from "element-plus" +import { defineComponent, useSlots } from "vue" +import ContentContainer from '../common/ContentContainer' import { createFileInput, exportSettings, importSettings } from "./export-import" +import { type OptionCategory, useCategory } from './useCategory' -const TOOLBAR_NAME = "toolbar" - -type TooltipProps = { - onReset?: NoArgCallback +const handleExport = async () => { + try { + await exportSettings() + ElMessage.success(t(msg => msg.option.exportSuccess)) + } catch (error) { + ElMessage.error('Export failed: ' + (error as Error).message) + } } -const Toolbar = defineComponent<TooltipProps>(props => { - const handleExport = async () => { - try { - await exportSettings() - ElMessage.success(t(msg => msg.option.exportSuccess)) - } catch (error) { - ElMessage.error('Export failed: ' + (error as Error).message) - } +const handleImport = async () => { + try { + const fileContent = await createFileInput() + // User cancelled, don't show error message + if (!fileContent) return + await importSettings(fileContent) + ElMessageBox({ + message: t(msg => msg.option.importConfirm), + type: "success", + confirmButtonText: t(msg => msg.option.reloadButton), + closeOnPressEscape: false, + closeOnClickModal: false + }).then(() => { + window.location.reload() + }).catch(() => {/* do nothing */ }) + } catch (error) { + ElMessage.error(t(msg => msg.option.importError)) } +} - const handleImport = async () => { - try { - const fileContent = await createFileInput() - // User cancelled, don't show error message - if (!fileContent) return - await importSettings(fileContent) - ElMessageBox({ - message: t(msg => msg.option.importConfirm), - type: "success", - confirmButtonText: t(msg => msg.option.reloadButton), - closeOnPressEscape: false, - closeOnClickModal: false - }).then(() => { - window.location.reload() - }).catch(() => {/* do nothing */ }) - } catch (error) { - ElMessage.error(t(msg => msg.option.importError)) +type Props = { onReset: (category: OptionCategory) => Promise<void> | void } + +const useStyle = () => { + const tabsNs = useNamespace('tabs') + + return css` + & { + .${tabsNs.e('item')} { + font-size: 16px; + height: 43px; + line-height: 43px; + } + .${tabsNs.e('content')} { + margin: 22px 10px 10px 10px; + font-size: 14px; + } } - } + ` +} + +const _default = defineComponent<Props>(props => { + const { category, setCategory, getLabel } = useCategory() + const handleReset = () => props.onReset(category.value) + const cls = useStyle() return () => ( - <Flex align="center" gap={10} onClick={ev => ev.stopPropagation()}> - <ElTooltip content={t(msg => msg.option.exportButton)}> - <ElLink - icon={Download} - underline="never" - onClick={handleExport} - /> - </ElTooltip> - <ElTooltip content={t(msg => msg.option.importButton)}> - <ElLink - icon={Upload} - underline="never" - onClick={handleImport} - /> - </ElTooltip> - <ElLink - icon={Refresh} - underline="never" - onClick={() => props.onReset?.()} + <ContentContainer> + <Flex justify='end' gap={5}> + <ElButton icon={Download} onClick={handleExport} type='primary'> + {t(msg => msg.option.exportButton)} + </ElButton> + <ElButton icon={Upload} onClick={handleImport} type='primary'> + {t(msg => msg.option.importButton)} + </ElButton> + <ElButton icon={Refresh} onClick={handleReset} type='danger'> + {t(msg => msg.option.resetButton)} + </ElButton> + </Flex> + <ElTabs + modelValue={category.value} + class={cls} + type='border-card' + onTabChange={setCategory} > - {t(msg => msg.option.resetButton)} - </ElLink> - </Flex> + {Object.entries(useSlots()).filter(([key]) => key !== 'default').map(([key, slot]) => ( + <ElTabPane name={key} label={getLabel(key)}> + {slot?.()} + </ElTabPane> + ))} + </ElTabs> + </ContentContainer> ) -}, { - props: ['onReset'] -}) - -type Props = { onReset: (cate: OptionCategory) => Promise<void> | void } - -const _default = defineComponent<Props>( - props => { - const tab = ref(parseQuery() ?? 'appearance') - const router = useRouter() - const handleReset = () => props.onReset?.(tab.value) - - const handleBeforeLeave = (activeName: TabPaneName): Promise<boolean> => { - if (activeName === TOOLBAR_NAME) { - // do nothing, and never happen - return Promise.reject() - } - // Change the query of current route - changeQuery(activeName as OptionCategory, router) - return Promise.resolve(true) - } - return () => ( - <ContentContainer> - <ElTabs - modelValue={tab.value} - type="border-card" - beforeLeave={handleBeforeLeave} - class="option-tab" - > - {Object.entries(useSlots()).filter(([key]) => key !== 'default').map(([key, slot]) => ( - <ElTabPane name={key} label={t(CATE_LABELS[key as OptionCategory])}> - {!!slot && h(slot)} - </ElTabPane> - ))} - <ElTabPane - name={TOOLBAR_NAME} - v-slots={{ label: () => <Toolbar onReset={handleReset} /> }} - /> - </ElTabs> - </ContentContainer> - ) - }, { props: ['onReset'] }) +}, { props: ['onReset'] }) -export default _default \ No newline at end of file +export default _default diff --git a/src/pages/app/components/Option/components/AccessibilityOption.tsx b/src/pages/app/components/Option/categories/Accessibility.tsx similarity index 53% rename from src/pages/app/components/Option/components/AccessibilityOption.tsx rename to src/pages/app/components/Option/categories/Accessibility.tsx index 9fbd03495..02d4585e1 100644 --- a/src/pages/app/components/Option/components/AccessibilityOption.tsx +++ b/src/pages/app/components/Option/categories/Accessibility.tsx @@ -1,19 +1,19 @@ -import { defaultAccessibility } from "@util/constant/option" +import { DEFAULT_ACCESSIBILITY } from "@util/constant/option" import { ElSwitch } from "element-plus" import { defineComponent } from "vue" -import { type OptionInstance } from "../common" +import { OptionItem } from '../components' import { useOption } from "../useOption" -import OptionItem from "./OptionItem" +import type { CategoryInstance } from './types' -function copy(target: timer.option.AccessibilityOption, source: timer.option.AccessibilityOption) { +function copy(target: tt4b.option.AccessibilityOption, source: Readonly<tt4b.option.AccessibilityOption>) { target.chartDecal = source.chartDecal } const _default = defineComponent((_, ctx) => { - const { option } = useOption({ defaultValue: defaultAccessibility, copy }) + const { option } = useOption({ defaultValue: DEFAULT_ACCESSIBILITY, copy }) ctx.expose({ - reset: () => copy(option, defaultAccessibility()) - } satisfies OptionInstance) + reset: () => copy(option, DEFAULT_ACCESSIBILITY) + } satisfies CategoryInstance) return () => ( <OptionItem label={msg => msg.option.accessibility.chartDecal} defaultValue={false}> <ElSwitch modelValue={option.chartDecal} onChange={val => option.chartDecal = val as boolean} /> diff --git a/src/pages/app/components/Option/components/AppearanceOption/DarkModeInput.tsx b/src/pages/app/components/Option/categories/Appearance/DarkModeInput.tsx similarity index 72% rename from src/pages/app/components/Option/components/AppearanceOption/DarkModeInput.tsx rename to src/pages/app/components/Option/categories/Appearance/DarkModeInput.tsx index 3b2a3bdf6..f9f9d1917 100644 --- a/src/pages/app/components/Option/components/AppearanceOption/DarkModeInput.tsx +++ b/src/pages/app/components/Option/categories/Appearance/DarkModeInput.tsx @@ -4,11 +4,17 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" -import { ElOption, ElSelect, ElTimePicker } from "element-plus" +import { t } from '@app/locale' +import { ElSelect, ElTimePicker } from "element-plus" import { computed, defineComponent, StyleValue } from "vue" -const ALL_MODES: timer.option.DarkMode[] = ["default", "on", "off", "timed"] +const ALL_MODES: tt4b.option.DarkMode[] = ["default", "on", "off", "timed"] +const MODE_LABELS: Record<tt4b.option.DarkMode, string> = { + default: t(msg => msg.option.followBrowser), + on: t(msg => msg.option.on), + off: t(msg => msg.option.off), + timed: t(msg => msg.option.appearance.darkMode.timed) +} function computeSecondToDate(secondOfDate: number): Date { const now = new Date() @@ -30,10 +36,10 @@ function computeDateToSecond(date: Date) { } type Props = { - modelValue: timer.option.DarkMode + modelValue: tt4b.option.DarkMode startSecond?: number endSecond?: number - onChange?: (darkMode: timer.option.DarkMode, [startSecond, endSecond]: [number?, number?]) => void + onChange?: (darkMode: tt4b.option.DarkMode, [startSecond, endSecond]: [number?, number?]) => void } const _default = defineComponent<Props>(props => { @@ -45,15 +51,9 @@ const _default = defineComponent<Props>(props => { modelValue={props.modelValue} size="small" style={{ width: "120px" }} - onChange={val => props.onChange?.(val as timer.option.DarkMode, [props.startSecond, props.endSecond])} - > - { - ALL_MODES.map(value => <ElOption - value={value} - label={t(msg => value === 'default' ? msg.option.followBrowser : msg.option.appearance.darkMode.options[value])} - />) - } - </ElSelect> + onChange={val => props.onChange?.(val as tt4b.option.DarkMode, [props.startSecond, props.endSecond])} + options={ALL_MODES.map(value => ({ value, label: MODE_LABELS[value] }))} + /> {props.modelValue === "timed" && <> <ElTimePicker modelValue={start.value} diff --git a/src/pages/app/components/Option/components/AppearanceOption/index.tsx b/src/pages/app/components/Option/categories/Appearance/index.tsx similarity index 69% rename from src/pages/app/components/Option/components/AppearanceOption/index.tsx rename to src/pages/app/components/Option/categories/Appearance/index.tsx index e55d6405d..2268d5c0d 100644 --- a/src/pages/app/components/Option/components/AppearanceOption/index.tsx +++ b/src/pages/app/components/Option/categories/Appearance/index.tsx @@ -5,28 +5,33 @@ * https://opensource.org/licenses/MIT */ -import { type I18nKey, t, tWith } from "@app/locale" +import { isSidePanelEnabled, setSidePanelEnabled, SIDE_PANEL_STATE_SUPPORTED_CONTROL } from '@api/chrome/sidePanel' +import { OptionItem, OptionLines, OptionTag } from '@app/components/Option/components' +import { useOption } from '@app/components/Option/useOption' +import { type I18nKey, t, tWith } from '@app/locale' +import { useRequest } from '@hooks' import { ALL_LOCALES, localeSameAsBrowser } from "@i18n" import localeMessages from "@i18n/message/common/locale" -import optionService from "@service/option-service" +import { processDarkMode } from '@pages/util/dark-mode' import { IS_ANDROID } from "@util/constant/environment" -import { defaultAppearance } from "@util/constant/option" -import { toggle } from "@util/dark-mode" -import { ElColorPicker, ElMessageBox, ElOption, ElSelect, ElSlider, ElSwitch, ElTag, type TagProps } from "element-plus" +import { DEFAULT_APPEARANCE } from "@util/constant/option" +import { ElColorPicker, ElMessageBox, ElSelect, ElSlider, ElSwitch, ElTag, type TagProps } from "element-plus" import { computed, defineComponent, type StyleValue } from "vue" -import { type OptionInstance } from "../../common" -import { useOption } from "../../useOption" -import OptionItem from "../OptionItem" -import OptionLines from '../OptionLines' -import OptionTag from "../OptionTag" +import type { CategoryInstance } from '../types' import DarkModeInput from "./DarkModeInput" -const SORTED_LOCALES: timer.Locale[] = ALL_LOCALES +const FOLLOW_BROWSER: I18nKey = msg => msg.option.followBrowser + +const SORTED_LOCALES: tt4b.Locale[] = ALL_LOCALES // Keep the locale same as this browser first position .sort((a, _b) => a === localeSameAsBrowser ? -1 : 0) -const allLocaleOptions: timer.option.LocaleOption[] = ["default", ...SORTED_LOCALES] -function copy(target: timer.option.AppearanceOption, source: timer.option.AppearanceOption) { +const allLocaleOptions = (["default", ...SORTED_LOCALES] satisfies tt4b.option.LocaleOption[]).map(locale => ({ + value: locale, + label: locale === "default" ? t(FOLLOW_BROWSER) : localeMessages[locale].name +})) + +function copy(target: tt4b.option.AppearanceOption, source: tt4b.option.AppearanceOption) { target.displayWhitelistMenu = source.displayWhitelistMenu target.displayBadgeText = source.displayBadgeText target.badgeBgColor = source.badgeBgColor @@ -38,24 +43,34 @@ function copy(target: timer.option.AppearanceOption, source: timer.option.Appear target.chartAnimationDuration = source.chartAnimationDuration } -const DEFAULT_ANIMA_DURATION = defaultAppearance().chartAnimationDuration -const FOLLOW_BROWSER: I18nKey = msg => msg.option.followBrowser +const DEFAULT_SIDE_PANEL_ENABLED = true + const _default = defineComponent((_props, ctx) => { - const { option } = useOption<timer.option.AppearanceOption>({ - defaultValue: defaultAppearance, copy, - onChange: async val => optionService.isDarkMode(val).then(toggle) + const { option } = useOption<tt4b.option.AppearanceOption>({ + defaultValue: DEFAULT_APPEARANCE, copy, + onChange: processDarkMode, + }) + const { data: sidePanelEnabled, refresh: refreshSidePanel } = useRequest(isSidePanelEnabled, { + defaultValue: DEFAULT_SIDE_PANEL_ENABLED, }) + const handleSidePanelChange = async (val: boolean) => { + await setSidePanelEnabled(val) + refreshSidePanel() + } ctx.expose({ - reset: () => copy(option, defaultAppearance()) - } satisfies OptionInstance) + reset() { + handleSidePanelChange(DEFAULT_SIDE_PANEL_ENABLED) + copy(option, DEFAULT_APPEARANCE) + } + } satisfies CategoryInstance) - const handleLocaleChange = (newVal: timer.option.LocaleOption) => { + const handleLocaleChange = (newVal: tt4b.option.LocaleOption) => { option.locale = newVal // await maybe not work in Firefox, so calculate the real locale again // GG Firefox - const realLocale: timer.Locale = newVal === "default" + const realLocale: tt4b.Locale = newVal === "default" ? localeSameAsBrowser : newVal ElMessageBox({ @@ -69,7 +84,7 @@ const _default = defineComponent((_props, ctx) => { const animaDurationTagType = computed<TagProps['type']>(() => { const val = option.chartAnimationDuration if (!val) return 'info' - if (val > DEFAULT_ANIMA_DURATION) return 'warning' + if (val > DEFAULT_APPEARANCE.chartAnimationDuration) return 'warning' return 'primary' }) @@ -92,19 +107,15 @@ const _default = defineComponent((_props, ctx) => { modelValue={option.locale} size="small" style={{ width: "120px" }} - onChange={(newVal: timer.option.LocaleOption) => handleLocaleChange(newVal)} + onChange={(newVal: tt4b.option.LocaleOption) => handleLocaleChange(newVal)} filterable - > - {allLocaleOptions.map(locale => <ElOption - value={locale} - label={locale === "default" ? t(FOLLOW_BROWSER) : localeMessages[locale].name} - />)} - </ElSelect> + options={allLocaleOptions} + /> </OptionItem> {!IS_ANDROID && <> <OptionItem label={msg => msg.option.appearance.displayWhitelist} - defaultValue={t(msg => msg.option.yes)} + defaultValue={DEFAULT_APPEARANCE.displayWhitelistMenu} v-slots={{ whitelist: () => <OptionTag>{t(msg => msg.option.appearance.whitelistItem)}</OptionTag>, contextMenu: () => <OptionTag>{t(msg => msg.option.appearance.contextMenu)}</OptionTag>, @@ -117,7 +128,7 @@ const _default = defineComponent((_props, ctx) => { </OptionItem> <OptionItem label={msg => msg.option.appearance.displayBadgeText} - defaultValue={t(msg => msg.option.yes)} + defaultValue={DEFAULT_APPEARANCE.displayBadgeText} v-slots={{ timeInfo: () => <OptionTag>{t(msg => msg.option.appearance.badgeTextContent)}</OptionTag>, icon: () => <OptionTag>{t(msg => msg.option.appearance.icon)}</OptionTag>, @@ -140,7 +151,7 @@ const _default = defineComponent((_props, ctx) => { </OptionItem> <OptionItem label={msg => msg.option.appearance.printInConsole.label} - defaultValue={t(msg => msg.option.yes)} + defaultValue={DEFAULT_APPEARANCE.printInConsole} v-slots={{ console: () => <OptionTag>{t(msg => msg.option.appearance.printInConsole.console)}</OptionTag>, info: () => <OptionTag>{t(msg => msg.option.appearance.printInConsole.info)}</OptionTag>, @@ -152,9 +163,20 @@ const _default = defineComponent((_props, ctx) => { /> </OptionItem> </>} + {SIDE_PANEL_STATE_SUPPORTED_CONTROL && ( + <OptionItem + label={msg => msg.option.appearance.sidePanel} + defaultValue={DEFAULT_SIDE_PANEL_ENABLED} + > + <ElSwitch + modelValue={sidePanelEnabled.value} + onChange={v => handleSidePanelChange(!!v)} + /> + </OptionItem> + )} <OptionItem label={msg => msg.option.appearance.animationDuration} - defaultValue={`${DEFAULT_ANIMA_DURATION}ms`} + defaultValue={`${DEFAULT_APPEARANCE.chartAnimationDuration}ms`} > <ElSlider modelValue={option.chartAnimationDuration} @@ -164,7 +186,7 @@ const _default = defineComponent((_props, ctx) => { persistent={false} style={{ width: '250px', display: 'inline-flex', marginInlineStart: '10px' } satisfies StyleValue} formatTooltip={val => `${val}ms`} - onUpdate:modelValue={val => option.chartAnimationDuration = Array.isArray(val) ? val[0] : val} + onUpdate:modelValue={val => option.chartAnimationDuration = Array.isArray(val) ? (val[0] ?? 0) : val} /> <ElTag size="small" diff --git a/src/pages/app/components/Option/components/BackupOption/AutoInput.tsx b/src/pages/app/components/Option/categories/Backup/AutoInput.tsx similarity index 97% rename from src/pages/app/components/Option/components/BackupOption/AutoInput.tsx rename to src/pages/app/components/Option/categories/Backup/AutoInput.tsx index a3f6307c8..0d986e2a8 100644 --- a/src/pages/app/components/Option/components/BackupOption/AutoInput.tsx +++ b/src/pages/app/components/Option/categories/Backup/AutoInput.tsx @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { t, tN } from "@app/locale" +import { t, tN } from '@app/locale' import { locale } from "@i18n" import localeMessages from "@i18n/message/common/locale" import { ElInputNumber, ElSwitch } from "element-plus" diff --git a/src/pages/app/components/Option/components/BackupOption/Clear/Step2.tsx b/src/pages/app/components/Option/categories/Backup/Clear/Step2.tsx similarity index 55% rename from src/pages/app/components/Option/components/BackupOption/Clear/Step2.tsx rename to src/pages/app/components/Option/categories/Backup/Clear/Step2.tsx index 9778251d9..0bb43dd7f 100644 --- a/src/pages/app/components/Option/components/BackupOption/Clear/Step2.tsx +++ b/src/pages/app/components/Option/categories/Backup/Clear/Step2.tsx @@ -5,20 +5,22 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { useDialogSop } from '@app/components/common/DialogSop/context' +import { t } from '@app/locale' import { ElAlert } from "element-plus" import { defineComponent, toRaw } from "vue" -import { type StatResult } from "./Step1" +import type { ClearForm } from './types' -const _default = defineComponent<{ data?: StatResult }>(props => { +const _default = defineComponent<{}>(() => { + const { form } = useDialogSop<ClearForm>() return () => ( <ElAlert type="success" closable={false}> {t(msg => msg.option.backup.clear.confirmTip, { - ...toRaw(props.data), - clientName: props.data?.client?.name || '' + ...toRaw(form.result), + clientName: form.client?.name ?? '' })} </ElAlert> ) -}, { props: ['data'] }) +}) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/categories/Backup/Clear/index.tsx b/src/pages/app/components/Option/categories/Backup/Clear/index.tsx new file mode 100644 index 000000000..902db37ce --- /dev/null +++ b/src/pages/app/components/Option/categories/Backup/Clear/index.tsx @@ -0,0 +1,72 @@ +/** + * Copyright (c) 2023-present Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { clearBackup, queryBackup } from '@api/sw/backup' +import DialogSop from "@app/components/common/DialogSop" +import { initDialogSopContext } from '@app/components/common/DialogSop/context' +import { t } from '@app/locale' +import { Delete } from "@element-plus/icons-vue" +import { BIRTHDAY, formatTimeYMD } from '@util/time' +import { ElButton } from "element-plus" +import { defineComponent } from "vue" +import ClientTable from '../ClientTable' +import Step2 from './Step2' +import type { ClearForm, StatResult } from './types' + +const STEP_TITLES = [ + t(msg => msg.option.backup.clientTable.selectTip), + t(msg => msg.option.backup.confirmStep), +] + +async function fetchStatResult(client: tt4b.backup.Client): Promise<StatResult> { + const { id: specCid, maxDate, minDate = BIRTHDAY } = client + const start = minDate ?? BIRTHDAY + const end = maxDate ?? formatTimeYMD(Date.now()) + const remoteRows = await queryBackup({ specCid, start, end }) + const siteSet: Set<string> = new Set() + remoteRows?.forEach(row => { + const { host } = row || {} + host && siteSet.add(host) + }) + const rowCount = remoteRows?.length || 0 + const hostCount = siteSet?.size || 0 + return { rowCount, hostCount } +} + +const _default = defineComponent(() => { + const { step, form, open } = initDialogSopContext<ClearForm>({ + stepCount: STEP_TITLES.length, + init: () => ({}), + onNext: async ({ form }) => { + const client = form.client + if (!client) throw new Error(t(msg => msg.option.backup.clientTable.notSelected)) + form.result = await fetchStatResult(client) + }, + onFinish: async ({ form }) => { + const cid = form.client?.id + if (!cid) throw new Error(t(msg => msg.option.backup.clientTable.notSelected)) + const errMsg = await clearBackup(cid) + if (errMsg) throw new Error(errMsg) + }, + }) + + + return () => <> + <ElButton type="danger" icon={Delete} onClick={() => open()}> + {t(msg => msg.option.backup.clear.btn)} + </ElButton> + <DialogSop + title={t(msg => msg.option.backup.clear.btn)} + finishButton={{ type: 'danger', text: t(msg => msg.option.backup.clear.btn) }} + stepTitles={STEP_TITLES} + > + {step.value === 0 ? <ClientTable onSelect={c => form.client = c} /> : <Step2 />} + </DialogSop> + </> +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/categories/Backup/Clear/types.ts b/src/pages/app/components/Option/categories/Backup/Clear/types.ts new file mode 100644 index 000000000..32fdcc5a3 --- /dev/null +++ b/src/pages/app/components/Option/categories/Backup/Clear/types.ts @@ -0,0 +1,9 @@ +export type ClearForm = { + client?: tt4b.backup.Client + result?: StatResult +} + +export type StatResult = { + rowCount: number + hostCount: number +} diff --git a/src/pages/app/components/Option/components/BackupOption/ClientTable.tsx b/src/pages/app/components/Option/categories/Backup/ClientTable.tsx similarity index 59% rename from src/pages/app/components/Option/components/BackupOption/ClientTable.tsx rename to src/pages/app/components/Option/categories/Backup/ClientTable.tsx index 11dbe14b9..50f3a3b7d 100644 --- a/src/pages/app/components/Option/components/BackupOption/ClientTable.tsx +++ b/src/pages/app/components/Option/categories/Backup/ClientTable.tsx @@ -5,42 +5,46 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" -import { cvt2LocaleTime } from "@app/util/time" +import { allBackupClients } from "@api/sw/backup" +import { t } from '@app/locale' +import { cvt2LocaleTime } from '@app/util/time' import { Loading, RefreshRight } from "@element-plus/icons-vue" -import { useRequest } from "@hooks" -import { type ElTableRowScope } from "@pages/element-ui/table" -import processor from "@service/backup/processor" -import metaService from "@service/meta-service" -import { ElLink, ElMessage, ElRadio, ElTable, ElTableColumn, ElTag } from "element-plus" -import { defineComponent, ref, toRaw } from "vue" +import { css } from '@emotion/css' +import { useRequest } from '@hooks' +import { + ElLink, ElMessage, ElRadio, ElTable, ElTableColumn, ElTag, useNamespace, type RenderRowData, +} from "element-plus" +import { defineComponent, ref, toRaw, type StyleValue } from "vue" -const formatTime = (value: timer.backup.Client): string => { +const useStyle = () => { + const radioNs = useNamespace('radio') + const radioCls = css` + & .${radioNs.e('label')} { + padding: 0; + } + ` + return { radioCls } +} + +const formatTime = (value: tt4b.backup.Client): string => { const { minDate, maxDate } = value || {} const min = minDate ? cvt2LocaleTime(minDate) : '' const max = maxDate ? cvt2LocaleTime(maxDate) : '' return `${min} - ${max}` } -const _default = defineComponent<{ onSelect: ArgCallback<timer.backup.Client> }>(props => { - const { data: list, loading, refresh } = useRequest(async () => { - const { success, data, errorMsg } = await processor.listClients() || {} - if (!success) { - throw new Error(errorMsg) - } - return data - }, { +const _default = defineComponent<{ onSelect: ArgCallback<tt4b.backup.Client> }>(props => { + const { data: list, loading, refresh } = useRequest(allBackupClients, { defaultValue: [], - onError: e => ElMessage.error(typeof e === 'string' ? e : (e as Error).message || 'Unknown error...') + onError: e => ElMessage.error(e instanceof Error ? e.message : String(e ?? 'Unknown error...')) }) - const { data: localCid } = useRequest(() => metaService.getCid()) - const selectedCid = ref<string>() - const handleRowSelect = (row: timer.backup.Client) => { + const handleRowSelect = (row: tt4b.backup.Client) => { selectedCid.value = row.id props.onSelect?.(toRaw(row)) } + const { radioCls } = useStyle() return () => ( <ElTable @@ -49,7 +53,7 @@ const _default = defineComponent<{ onSelect: ArgCallback<timer.backup.Client> }> maxHeight="40vh" class="backup-client-table" highlightCurrentRow - onCurrent-change={(row: timer.backup.Client) => handleRowSelect(row)} + onCurrent-change={row => row && handleRowSelect(row)} emptyText={loading.value ? 'Loading data ...' : 'Empty data'} > <ElTableColumn @@ -64,8 +68,9 @@ const _default = defineComponent<{ onSelect: ArgCallback<timer.backup.Client> }> underline="never" /> ), - default: ({ row }: ElTableRowScope<timer.backup.Client>) => ( + default: ({ row }: RenderRowData<tt4b.backup.Client>) => ( <ElRadio + class={radioCls} value={row.id} modelValue={selectedCid.value} onChange={() => handleRowSelect(row)} @@ -78,16 +83,20 @@ const _default = defineComponent<{ onSelect: ArgCallback<timer.backup.Client> }> align="center" headerAlign="center" width={320} - formatter={(client: timer.backup.Client) => client.id || '-'} + formatter={(client: tt4b.backup.Client) => client.id || '-'} /> <ElTableColumn label={t(msg => msg.option.backup.client, { input: '' })} align="center" headerAlign="center" > - {({ row: client }: ElTableRowScope<timer.backup.Client>) => <> + {({ row: client }: RenderRowData<(tt4b.backup.Client & { current: boolean })>) => <> {client.name || '-'} - <ElTag v-show={localCid.value === client?.id} size="small" type="danger"> + <ElTag + v-show={client.current} + size="small" type="danger" + style={{ height: '20px', marginInline: '6px 0' } satisfies StyleValue} + > {t(msg => msg.option.backup.clientTable.current)} </ElTag> </>} diff --git a/src/pages/app/components/Option/categories/Backup/Download/Step2.tsx b/src/pages/app/components/Option/categories/Backup/Download/Step2.tsx new file mode 100644 index 000000000..106ef0491 --- /dev/null +++ b/src/pages/app/components/Option/categories/Backup/Download/Step2.tsx @@ -0,0 +1,37 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { useDialogSop } from '@app/components/common/DialogSop/context' +import CompareTable from "@app/components/common/imported/CompareTable" +import ResolutionRadio from "@app/components/common/imported/ResolutionRadio" +import { t } from '@app/locale' +import Flex from "@pages/components/Flex" +import { ElAlert } from "element-plus" +import { defineComponent } from "vue" +import { DownloadForm } from './types' + +const _default = defineComponent<{}>(() => { + const { form } = useDialogSop<DownloadForm>() + + return () => ( + <Flex column width='100%' gap={20} margin='40px 20px 0 20px'> + <ElAlert type="success" closable={false}> + { + t(msg => msg.option.backup.download.confirmTip, { + clientName: form.client?.name, + size: form.data.rows.length, + }) + } + </ElAlert> + <CompareTable data={form.data} comparedCol={msg => msg.option.backup.download.willDownload} /> + <Flex justify="center"> + <ResolutionRadio modelValue={form.resolution} onChange={v => form.resolution = v} /> + </Flex> + </Flex> + ) +}) + +export default _default diff --git a/src/pages/app/components/Option/categories/Backup/Download/index.tsx b/src/pages/app/components/Option/categories/Backup/Download/index.tsx new file mode 100644 index 000000000..ac0d3544c --- /dev/null +++ b/src/pages/app/components/Option/categories/Backup/Download/index.tsx @@ -0,0 +1,69 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { previewBackup } from '@api/sw/backup' +import { importOther } from '@api/sw/immigration' +import DialogSop from '@app/components/common/DialogSop' +import { initDialogSopContext } from '@app/components/common/DialogSop/context' +import { t } from "@app/locale" +import { Files } from "@element-plus/icons-vue" +import { BIRTHDAY, formatTimeYMD } from '@util/time' +import { ElButton } from "element-plus" +import { defineComponent, toRaw } from "vue" +import ClientTable from '../ClientTable' +import Step2 from './Step2' +import type { DownloadForm } from './types' + +const STEP_TITLES = [ + t(msg => msg.option.backup.clientTable.selectTip), + t(msg => msg.option.backup.confirmStep), +] + +async function fetchData(client: tt4b.backup.Client): Promise<tt4b.imported.Data> { + const { id: specCid, maxDate, minDate } = client + const start = minDate ?? BIRTHDAY + const end = maxDate ?? formatTimeYMD(Date.now()) + const rows = await previewBackup({ specCid, start, end }) + return { rows, focus: true, time: true } +} + +const _default = defineComponent(() => { + const { open, step, form } = initDialogSopContext<DownloadForm>({ + stepCount: STEP_TITLES.length, + init: () => ({ data: { rows: [], focus: true, time: true }, resolution: undefined }), + onNext: async ({ form, target }) => { + if (target === 1) { + const clientVal = form.client + if (!clientVal) throw new Error(t(msg => msg.option.backup.clientTable.notSelected)) + form.data = await fetchData(clientVal) + } + }, + onFinish: async ({ form }) => { + const resolution = form.resolution + if (!resolution) throw new Error(t(msg => msg.dataManage.importOther.conflictNotSelected)) + const data = form.data + if (!data) throw new Error(t(msg => msg.option.backup.clientTable.notSelected)) + await importOther({ resolution, data: toRaw(data) }) + }, + }) + + return () => <> + <ElButton type="primary" icon={Files} onClick={() => open()}> + {t(msg => msg.option.backup.download.btn)} + </ElButton> + <DialogSop + width='80%' + title={t(msg => msg.option.backup.download.btn)} + stepTitles={STEP_TITLES} + finishButton={{ text: t(msg => msg.option.backup.download.btn) }} + > + <ClientTable v-show={step.value === 0} onSelect={c => form.client = c} /> + <Step2 v-show={step.value === 1} /> + </DialogSop> + </> +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/categories/Backup/Download/types.ts b/src/pages/app/components/Option/categories/Backup/Download/types.ts new file mode 100644 index 000000000..6a60bdf1a --- /dev/null +++ b/src/pages/app/components/Option/categories/Backup/Download/types.ts @@ -0,0 +1,5 @@ +export type DownloadForm = { + client?: tt4b.backup.Client + resolution?: tt4b.imported.ConflictResolution + data: tt4b.imported.Data +} \ No newline at end of file diff --git a/src/pages/app/components/Option/components/BackupOption/Footer.tsx b/src/pages/app/components/Option/categories/Backup/Footer.tsx similarity index 50% rename from src/pages/app/components/Option/components/BackupOption/Footer.tsx rename to src/pages/app/components/Option/categories/Backup/Footer.tsx index 9171a70b7..5e94910e2 100644 --- a/src/pages/app/components/Option/components/BackupOption/Footer.tsx +++ b/src/pages/app/components/Option/categories/Backup/Footer.tsx @@ -5,57 +5,54 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { checkAuth, getLastBackUp, syncData } from "@api/sw/backup" +import { t } from '@app/locale' import { Operation, UploadFilled } from "@element-plus/icons-vue" -import { useManualRequest, useRequest, useState } from "@hooks" +import { css } from '@emotion/css' +import { useManualRequest, useRequest } from "@hooks" import Flex from "@pages/components/Flex" -import processor from "@service/backup/processor" -import metaService from "@service/meta-service" import { formatTime } from "@util/time" -import { ElButton, ElDivider, ElLoading, ElMessage, ElText } from "element-plus" +import { ElButton, ElDivider, ElMessage, ElText, useNamespace } from "element-plus" import { defineComponent, type StyleValue } from "vue" import Clear from "./Clear" import Download from "./Download" -async function handleTest() { - const loading = ElLoading.service({ text: "Please wait...." }) - try { - const { errorMsg } = await processor.checkAuth() - if (!errorMsg) { - ElMessage.success("Valid!") - } else { - ElMessage.error(errorMsg) +const useStyle = () => { + const buttonNs = useNamespace('button') + return css` + .${buttonNs.b()}+.${buttonNs.b()} { + margin-inline-start: 0px; } - } finally { - loading.close() - } + ` } const TIME_FORMAT = t(msg => msg.calendar.timeFormat) -const _default = defineComponent<{ type: timer.backup.Type }>(props => { - const [lastTime, setLastTime] = useState<number>() +const _default = defineComponent<{ type: tt4b.backup.Type }>(props => { - useRequest(async () => { - const type = props.type - return type && (await metaService.getLastBackUp(type))?.ts - }, { deps: () => props.type, onSuccess: setLastTime }) + const { data: lastTime, refresh: refreshLastTime } = useRequest(() => getLastBackUp(props.type), { + deps: () => props.type, + }) - const { refresh: handleBackup } = useManualRequest(() => processor.syncData(), { + const { refresh: handleBackup } = useManualRequest(syncData, { loadingText: "Doing backup....", - onSuccess: ({ success, data, errorMsg }) => { - if (success) { - ElMessage.success('Successfully!') - setLastTime(data ?? Date.now()) - } else { - ElMessage.error(errorMsg ?? 'Unknown error') - } + onSuccess: errorMsg => { + if (errorMsg) return ElMessage.error(errorMsg) + ElMessage.success('Successfully!') + refreshLastTime() }, }) + const { refresh: handleTest } = useManualRequest(checkAuth, { + loadingText: "Please wait....", + onSuccess: err => err ? ElMessage.error(err) : ElMessage.success("Valid!"), + }) + + const footerCls = useStyle() + return () => <> <ElDivider /> - <Flex gap={12}> + <Flex gap={12} wrap class={footerCls}> <ElButton type="primary" icon={Operation} onClick={handleTest}> {t(msg => msg.button.test)} </ElButton> diff --git a/src/pages/app/components/Option/components/BackupOption/index.tsx b/src/pages/app/components/Option/categories/Backup/index.tsx similarity index 57% rename from src/pages/app/components/Option/components/BackupOption/index.tsx rename to src/pages/app/components/Option/categories/Backup/index.tsx index 01049c684..df0f1333f 100644 --- a/src/pages/app/components/Option/components/BackupOption/index.tsx +++ b/src/pages/app/components/Option/categories/Backup/index.tsx @@ -8,87 +8,80 @@ import { DEFAULT_VAULT as DEFAULT_OBSIDIAN_BUCKET, DEFAULT_ENDPOINT as DEFAULT_OBSIDIAN_ENDPOINT, } from "@api/obsidian" -import { t } from "@app/locale" -import { ElInput, ElOption, ElSelect } from "element-plus" +import { OptionItem, OptionLines, OptionTooltip } from '@app/components/Option/components' +import { t } from '@app/locale' +import { ElInput, ElSelect } from "element-plus" import { computed, defineComponent } from "vue" -import { type OptionInstance } from "../../common" -import OptionItem from "../OptionItem" -import OptionLines from '../OptionLines' -import OptionTooltip from "../OptionTooltip" +import type { CategoryInstance } from '../types' import AutoInput from "./AutoInput" import Footer from "./Footer" -import { useOptionState } from "./state" -import "./style.sass" +import { useBackup } from "./useBackup" -const ALL_TYPES: timer.backup.Type[] = [ +const ALL_TYPES: tt4b.backup.Type[] = [ 'none', 'gist', 'web_dav', 'obsidian_local_rest_api', ] -const TYPE_NAMES: { [t in timer.backup.Type]: string } = { - none: t(msg => msg.option.backup.meta.none.label), +const TYPE_NAMES: Record<tt4b.backup.Type, string> = { + none: t(msg => msg.option.off), gist: 'GitHub Gist', obsidian_local_rest_api: 'Obsidian - Local REST API', web_dav: 'WebDAV' } +const LONG_INPUT_WIDTH = 'min(400px, calc(100vw - 80px))' + const _default = defineComponent((_, ctx) => { const { - backupType, clientName, reset, - autoBackUp, autoBackUpInterval, - auth, account, password, + option, auth, account, password, reset, ext, setExtField, - } = useOptionState() + } = useBackup() - const isNotNone = computed(() => backupType.value && backupType.value !== 'none') + const isNotNone = computed(() => option.backupType !== 'none') - ctx.expose({ reset } satisfies OptionInstance) + ctx.expose({ reset } satisfies CategoryInstance) return () => <OptionLines> <OptionItem label={msg => msg.option.backup.type} defaultValue={TYPE_NAMES['none']}> <ElSelect - modelValue={backupType.value} + modelValue={option.backupType} size="small" - onChange={(val: timer.backup.Type) => backupType.value = val} - > - {ALL_TYPES.map(type => <ElOption value={type} label={TYPE_NAMES[type]} />)} - </ElSelect> - </OptionItem > - <OptionItem - v-show={isNotNone.value} - label={_ => "{input}"} - defaultValue={t(msg => msg.option.no)} - > - <AutoInput - autoBackup={autoBackUp.value} - interval={autoBackUpInterval.value} - onAutoBackupChange={val => autoBackUp.value = val} - onIntervalChange={val => autoBackUpInterval.value = val} + onChange={(val: tt4b.backup.Type) => option.backupType = val} + options={ALL_TYPES.map(value => ({ value, label: TYPE_NAMES[value] }))} /> </OptionItem> - {backupType.value === 'gist' && <> + {isNotNone.value && ( + <OptionItem label="{input}" defaultValue={false}> + <AutoInput + autoBackup={option.autoBackUp} + interval={option.autoBackUpInterval} + onAutoBackupChange={val => option.autoBackUp = val} + onIntervalChange={val => val !== undefined && (option.autoBackUpInterval = val)} + /> + </OptionItem> + )} + {option.backupType === 'gist' && ( <OptionItem - key="gist-token" - label={_ => 'Personal Access Token {info} {input}'} + label="Personal Access Token {info} {input}" v-slots={{ info: () => <OptionTooltip>{t(msg => msg.option.backup.meta.gist.authInfo)}</OptionTooltip> }} > <ElInput + name='token' modelValue={auth.value} size="small" type="password" showPassword - style={{ width: "400px" }} + style={{ width: LONG_INPUT_WIDTH }} onInput={val => auth.value = val?.trim?.() || ''} /> </OptionItem> - </>} - {backupType.value === 'obsidian_local_rest_api' && <> + )} + {option.backupType === 'obsidian_local_rest_api' && <> <OptionItem - key="obsidian-endpoint" label={msg => msg.option.backup.label.endpoint} v-slots={{ info: () => <OptionTooltip>{t(msg => msg.option.backup.meta.obsidian_local_rest_api.endpointInfo)}</OptionTooltip> @@ -98,11 +91,11 @@ const _default = defineComponent((_, ctx) => { placeholder={DEFAULT_OBSIDIAN_ENDPOINT} modelValue={ext.value?.endpoint} size="small" - style={{ width: "400px" }} + style={{ width: LONG_INPUT_WIDTH }} onInput={val => setExtField('endpoint', val)} /> </OptionItem> - <OptionItem key="obsidian-vault" label={_ => "Vault Name {input}"}> + <OptionItem label="Vault Name {input}"> <ElInput placeholder={DEFAULT_OBSIDIAN_BUCKET} modelValue={ext.value?.bucket} @@ -111,28 +104,27 @@ const _default = defineComponent((_, ctx) => { onInput={val => setExtField('bucket', val)} /> </OptionItem> - <OptionItem key="obsidian-path" label={msg => msg.option.backup.label.path} required> + <OptionItem label={msg => msg.option.backup.label.path} required> <ElInput modelValue={ext.value?.dirPath} size="small" - style={{ width: "400px" }} + style={{ width: LONG_INPUT_WIDTH }} onInput={val => setExtField('dirPath', val)} /> </OptionItem> - <OptionItem key="obsidian-auth" label={_ => "Authorization {input}"} required> + <OptionItem label="Authorization {input}" required> <ElInput modelValue={auth.value} size="small" type="password" showPassword - style={{ width: "400px" }} + style={{ width: LONG_INPUT_WIDTH }} onInput={val => auth.value = val?.trim?.() || ''} /> </OptionItem> </>} - {backupType.value === 'web_dav' && <> + {option.backupType === 'web_dav' && <> <OptionItem - key="web-dav-endpoint" label={msg => msg.option.backup.label.endpoint} v-slots={{ info: () => '' }} required @@ -141,20 +133,20 @@ const _default = defineComponent((_, ctx) => { modelValue={ext.value?.endpoint} placeholder="https://for.example.com:443" size="small" - style={{ width: "400px" }} + style={{ width: LONG_INPUT_WIDTH }} onInput={val => setExtField('endpoint', val)} /> </OptionItem> - <OptionItem key='web-dav-path' label={msg => msg.option.backup.label.path} required> + <OptionItem label={msg => msg.option.backup.label.path} required> <ElInput modelValue={ext.value?.dirPath} placeholder="/for/example" size="small" - style={{ width: "400px" }} + style={{ width: LONG_INPUT_WIDTH }} onInput={val => setExtField('dirPath', val)} /> </OptionItem> - <OptionItem key='web-dav-acc' label={msg => msg.option.backup.label.account} required> + <OptionItem label={msg => msg.option.backup.label.account} required> <ElInput modelValue={account.value} size="small" @@ -162,7 +154,7 @@ const _default = defineComponent((_, ctx) => { onInput={val => account.value = val?.trim?.()} /> </OptionItem> - <OptionItem key='web-dav-psw' label={msg => msg.option.backup.label.password} required> + <OptionItem label={msg => msg.option.backup.label.password} required> <ElInput modelValue={password.value} size="small" @@ -172,15 +164,17 @@ const _default = defineComponent((_, ctx) => { /> </OptionItem> </>} - <OptionItem v-show={isNotNone.value} label={msg => msg.option.backup.client}> - <ElInput - modelValue={clientName.value} - size="small" - style={{ width: "120px" }} - onInput={val => clientName.value = val?.trim?.() || ''} - /> - </OptionItem> - {isNotNone.value && <Footer type={backupType.value} />} + {isNotNone.value && <> + <OptionItem label={msg => msg.option.backup.client}> + <ElInput + modelValue={option.clientName} + size="small" + style={{ width: "120px" }} + onInput={val => option.clientName = val?.trim?.() ?? ''} + /> + </OptionItem> + <Footer type={option.backupType} /> + </>} </OptionLines> }) diff --git a/src/pages/app/components/Option/categories/Backup/useBackup.ts b/src/pages/app/components/Option/categories/Backup/useBackup.ts new file mode 100644 index 000000000..9b2e6e7de --- /dev/null +++ b/src/pages/app/components/Option/categories/Backup/useBackup.ts @@ -0,0 +1,79 @@ +import { useOption } from '@app/components/Option/useOption' +import { DEFAULT_BACKUP } from "@util/constant/option" +import { computed } from "vue" + +function copy(target: tt4b.option.BackupOption, source: tt4b.option.BackupOption) { + target.backupType = source.backupType + target.autoBackUp = source.autoBackUp + target.autoBackUpInterval = source.autoBackUpInterval + target.backupExts = source.backupExts + target.backupAuths = source.backupAuths + target.clientName = source.clientName + target.backupLogin = source.backupLogin +} + +export const useBackup = () => { + const { option } = useOption<tt4b.option.BackupOption>({ defaultValue: DEFAULT_BACKUP, copy }) + + const reset = () => { + // Only reset type and auto flag + option.backupType = DEFAULT_BACKUP.backupType + option.autoBackUp = DEFAULT_BACKUP.autoBackUp + } + + const auth = computed({ + get: () => option.backupAuths[option.backupType], + set: val => { + const typeVal = option.backupType + if (!typeVal) return + const newAuths = { + ...option.backupAuths, + [typeVal]: val, + } + option.backupAuths = newAuths + } + }) + + const ext = computed<tt4b.backup.TypeExt | undefined>({ + get: () => option.backupExts?.[option.backupType], + set: val => { + const typeVal = option.backupType + if (!typeVal) return + const newExts = { + ...option.backupExts, + [typeVal]: val, + } + option.backupExts = newExts + }, + }) + + const setExtField = (field: keyof tt4b.backup.TypeExt, val: string) => { + const newVal = { ...(ext.value || {}), [field]: val?.trim?.() } + ext.value = newVal + } + + const setLoginField = (field: keyof tt4b.backup.LoginInfo, val: string) => { + const typeVal = option.backupType + if (!typeVal) return + const newLogin = { + ...option.backupLogin, + [typeVal]: { ...option.backupLogin?.[typeVal], [field]: val } + } + option.backupLogin = newLogin + } + + const account = computed<string | undefined>({ + get: () => option.backupLogin?.[option.backupType]?.acc, + set: val => setLoginField('acc', val ?? '') + }) + + const password = computed<string | undefined>({ + get: () => option.backupLogin?.[option.backupType]?.psw, + set: val => setLoginField('psw', val ?? '') + }) + + return { + option, auth, account, password, reset, + ext, setExtField, + } +} diff --git a/src/pages/app/components/Option/categories/Limit/index.tsx b/src/pages/app/components/Option/categories/Limit/index.tsx new file mode 100644 index 000000000..f94bab970 --- /dev/null +++ b/src/pages/app/components/Option/categories/Limit/index.tsx @@ -0,0 +1,226 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { OptionItem, OptionLines } from '@app/components/Option/components' +import { useOption } from "@app/components/Option/useOption" +import { t } from '@app/locale' +import { processVerification } from "@app/util/limit" +import { Edit } from "@element-plus/icons-vue" +import { css } from '@emotion/css' +import { locale } from '@i18n' +import { DEFAULT_LIMIT } from "@util/constant/option" +import { ElButton, ElInput, ElInputNumber, ElMessage, ElMessageBox, ElSelect, ElSwitch, useNamespace } from "element-plus" +import { defineComponent, FunctionalComponent, type StyleValue } from "vue" +import type { CategoryInstance } from '../types' +import { use2faSetup } from './use2faSetup' +import { usePswEdit } from "./usePswEdit" +import { useVerify } from "./useVerify" + +const useLevelSelectStyle = () => { + const selectNs = useNamespace('select') + const localWidth: Partial<Record<tt4b.Locale, number>> = { + en: 330, + uk: 330, + zh_CN: 210, + zh_TW: 210, + } + const width = localWidth[locale] ?? 370 + + const cls = css` + & .${selectNs.e('wrapper')} { + width: 100% !important; + } + ` + + return { width, cls } +} + +const ALL_LEVEL: tt4b.limit.RestrictionLevel[] = [ + 'nothing', + 'verification', + 'password', + '2fa', + 'strict', +] + +const ALL_DIFF: tt4b.limit.VerificationDifficulty[] = [ + 'easy', + 'hard', + 'disgusting', +] + +function copy(target: tt4b.option.LimitOption, source: Readonly<tt4b.option.LimitOption>) { + target.limitPrompt = source.limitPrompt + target.limitLevel = source.limitLevel + target.limitPassword = source.limitPassword + target.limitVerifyDifficulty = source.limitVerifyDifficulty + target.limitReminder = source.limitReminder + target.limitReminderDuration = source.limitReminderDuration + target.limitDelayDuration = source.limitDelayDuration +} + +function reset(target: tt4b.option.LimitOption) { + const defaultValue: MakeOptional< + tt4b.option.LimitOption, 'limitPassword' | 'limitVerifyDifficulty' | 'limitReminderDuration' + > = structuredClone(DEFAULT_LIMIT) + // Not to reset limitPassword + delete defaultValue.limitPassword + // Not to reset difficulty + delete defaultValue.limitVerifyDifficulty + // Not to reset notification duration + delete defaultValue.limitReminderDuration + Object.entries(defaultValue).forEach(([key, val]) => (target as any)[key] = val) +} + +const confirm4Strict = async (): Promise<void> => { + const title = t(msg => msg.option.limit.level.strictTitle) + const content = t(msg => msg.option.limit.level.strictContent) + await ElMessageBox.confirm(content, title, { + type: "warning", + confirmButtonText: t(msg => msg.button.confirm), + cancelButtonText: t(msg => msg.button.cancel), + }) +} + +const TestButton: FunctionalComponent<{ onClick: NoArgCallback }> = props => ( + <ElButton + size="small" + style={{ height: '28px', marginInlineStart: '5px' } satisfies StyleValue} + onClick={props.onClick} + > + {t(msg => msg.button.test)} + </ElButton> +) + +const _default = defineComponent((_, ctx) => { + const { option } = useOption<tt4b.option.LimitOption>({ defaultValue: DEFAULT_LIMIT, copy }) + const { verified, verify } = useVerify(option) + const { modifyPsw } = usePswEdit({ reset: () => option.limitPassword }) + const { setup2fa } = use2faSetup() + + ctx.expose({ + reset: () => verify().then(() => reset(option)).catch(() => { }) + } satisfies CategoryInstance) + + const handleLevelChange = (val: tt4b.limit.RestrictionLevel) => { + verify().then(async () => { + if (val === "strict") { + await confirm4Strict() + } else if (val === '2fa') { + await setup2fa() + } else if (val === "password") { + option.limitPassword = await modifyPsw() + } + option.limitLevel = val + }).catch(e => console.warn("Failed to verify", e)) + } + + const handlePswEdit = async () => { + verify().then(async () => { + option.limitPassword = await modifyPsw() + ElMessage.success(t(msg => msg.operation.successMsg)) + }).catch(e => console.warn("Failed to verify", e)) + } + + const handleDurationChange = (val: number | undefined) => { + if (typeof val !== "number") return + verify() + .then(() => option.limitDelayDuration = val) + .catch(e => console.warn("Failed to verify", e)) + } + + const handleTest = () => processVerification(option).then(() => ElMessage.success('Valid!')).catch(console.warn) + + const levelSelectStyle = useLevelSelectStyle() + + return () => <OptionLines> + <OptionItem label={msg => msg.option.limit.delayDuration} defaultValue={DEFAULT_LIMIT.limitDelayDuration}> + <ElInputNumber + modelValue={option.limitDelayDuration} + size="small" min={1} max={20} + style={{ width: "80px" } satisfies StyleValue} + onChange={handleDurationChange} + /> + </OptionItem> + <OptionItem + label={msg => msg.option.limit.reminder} + defaultValue={false} + v-slots={{ + default: () => ( + <ElSwitch + modelValue={option.limitReminder} + onChange={val => option.limitReminder = !!val} + /> + ), + minInput: () => ( + <ElInputNumber + disabled={!option.limitReminder} + modelValue={option.limitReminderDuration} + onChange={val => val && (option.limitReminderDuration = val)} + min={1} max={20} size="small" + style={{ width: "80px" } satisfies StyleValue} + /> + ), + }} + /> + <OptionItem + label={msg => msg.option.limit.level.label} + defaultValue={t(msg => msg.option.limit.level[DEFAULT_LIMIT.limitLevel])} + > + <ElSelect + modelValue={option.limitLevel} + size="small" + class={levelSelectStyle.cls} + style={{ width: `${levelSelectStyle.width}px` }} + onChange={handleLevelChange} + options={ALL_LEVEL.map(value => ({ value, label: t(msg => msg.option.limit.level[value]) }))} + /> + {option.limitLevel === '2fa' && <TestButton onClick={handleTest} />} + </OptionItem> + <OptionItem + v-show={option.limitLevel === "password"} + label={msg => msg.option.limit.level.passwordLabel} + > + <ElInput + modelValue={option.limitPassword} + size="small" + type="password" + showPassword={verified.value} + style={{ width: "300px" }} + v-slots={{ + append: () => <ElButton icon={Edit} onClick={handlePswEdit} />, + }} + /> + </OptionItem> + <OptionItem + v-show={option.limitLevel === "verification"} + label={msg => msg.option.limit.level.verificationLabel} + defaultValue={t(msg => (msg.option.limit.level as any)[DEFAULT_LIMIT.limitVerifyDifficulty])} + > + <ElSelect + modelValue={option.limitVerifyDifficulty} + size="small" + onChange={(val: tt4b.limit.VerificationDifficulty) => verify() + .then(() => option.limitVerifyDifficulty = val) + .catch(console.warn) + } + options={ALL_DIFF.map(value => ({ value, label: t(msg => msg.option.limit.level.verificationDifficulty[value]) }))} + /> + <TestButton onClick={handleTest} /> + </OptionItem> + <OptionItem label={msg => msg.option.limit.prompt}> + <ElInput + modelValue={option.limitPrompt} + size="small" + onInput={val => option.limitPrompt = val} + placeholder={t(msg => msg.limitModal.defaultPrompt)} + style={{ width: "280px" }} + /> + </OptionItem> + </OptionLines> +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/categories/Limit/use2faSetup/Form.tsx b/src/pages/app/components/Option/categories/Limit/use2faSetup/Form.tsx new file mode 100644 index 000000000..b12885a20 --- /dev/null +++ b/src/pages/app/components/Option/categories/Limit/use2faSetup/Form.tsx @@ -0,0 +1,81 @@ +import { t } from '@app/locale' +import { CopyDocument } from '@element-plus/icons-vue' +import { useRequest, useState } from '@hooks' +import Flex from '@pages/components/Flex' +import Img from '@pages/components/Img' +import { generateQrDataUrl } from '@pages/util/qrcode' +import { ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElText } from 'element-plus' +import { computed, defineComponent, toRef, watch } from 'vue' + +function extractSecret(otpauth: string): string { + const raw = new URL(otpauth).searchParams.get('secret') + return raw ?? 'Secret is unknown' +} + +async function copy(text: string) { + try { + await navigator.clipboard.writeText(text) + ElMessage.success('Copied') + } catch (e) { + const errMsg = e instanceof Error ? e.message : e ?? 'Unknown error' + ElMessage.error(`Copy failed: ${errMsg}`) + } +} + +export type FormInstance = { + getVerifyCode: () => string +} + +const _default = defineComponent<{ otpauth: string }>((props, ctx) => { + const otpauth = toRef(props, 'otpauth') + + const [code, setCode] = useState('') + watch(otpauth, () => setCode(''), { immediate: true }) + + const { data: qrData } = useRequest( + () => generateQrDataUrl({ text: otpauth.value, size: 200 }), + { deps: otpauth }, + ) + ctx.expose({ + getVerifyCode: () => code.value, + } satisfies FormInstance) + + const secret = computed(() => extractSecret(otpauth.value)) + + return () => ( + <ElForm labelPosition="top"> + <Flex column marginBottom={12} marginTop={12}> + <ElText style={{ lineHeight: 1.5 }}> + {t(msg => msg.option.limit.level.twoFaScanHint)} + </ElText> + </Flex> + <Flex column align="center" marginBottom={12}> + <Img src={qrData.value} size={200} /> + </Flex> + <ElFormItem label='2FA Secret'> + <ElInput + size='small' + modelValue={secret.value} + readonly v-slots={{ + append: () => <ElButton size="small" icon={CopyDocument} onClick={() => copy(secret.value)} />, + }} + /> + <Flex marginTop={6}> + <ElButton size="small" icon={CopyDocument} onClick={() => copy(otpauth.value)}> + {t(msg => msg.option.limit.level.twoFaCopyLink)} + </ElButton> + </Flex> + </ElFormItem> + <ElFormItem required label={t(msg => msg.option.limit.level.twoFaVerifyLabel)}> + <ElInput + size='small' + modelValue={code.value} + onUpdate:modelValue={val => setCode(val.trim())} + maxlength={6} + /> + </ElFormItem> + </ElForm > + ) +}, { props: ['otpauth'] }) + +export default _default diff --git a/src/pages/app/components/Option/categories/Limit/use2faSetup/index.tsx b/src/pages/app/components/Option/categories/Limit/use2faSetup/index.tsx new file mode 100644 index 000000000..794af3486 --- /dev/null +++ b/src/pages/app/components/Option/categories/Limit/use2faSetup/index.tsx @@ -0,0 +1,41 @@ +import { sendMsg2Runtime } from '@api/sw/common' +import { t } from '@app/locale' +import { ElMessage, ElMessageBox } from 'element-plus' +import { ref } from 'vue' +import Form, { type FormInstance } from './Form' + +export const use2faSetup = () => { + const form = ref<FormInstance>() + + const setup2fa = async () => { + const otpauth = await sendMsg2Runtime('meta.prepare2fa') + + const action = await ElMessageBox({ + title: t(msg => msg.option.limit.level.twoFaTitle), + message: () => <Form ref={form} otpauth={otpauth} />, + confirmButtonText: t(msg => msg.button.confirm), + showCancelButton: true, + closeOnClickModal: false, + showClose: false, + customStyle: { '--el-messagebox-padding-primary': '12px 20px' }, + beforeClose: (act, instance, done) => { + if (act !== 'confirm') return done() + + const code = form.value?.getVerifyCode().replace(/\s/g, '') + if (!code) return ElMessage.error('Verify code is empty') + if (!/^\d{6}$/.test(code)) return ElMessage.error('Invalid verify code') + + sendMsg2Runtime('meta.check2fa', code).then(ok => { + if (!ok) return ElMessage.error("Incorrect code") + instance.action = act + instance.inputValue = code + done() + }).catch(() => ElMessage.error("Failed to check code")) + }, + }) + + if (action !== 'confirm') throw new Error('User cancelled') + } + + return { setup2fa } +} diff --git a/src/pages/app/components/Option/components/LimitOption/usePswEdit.tsx b/src/pages/app/components/Option/categories/Limit/usePswEdit.tsx similarity index 71% rename from src/pages/app/components/Option/components/LimitOption/usePswEdit.tsx rename to src/pages/app/components/Option/categories/Limit/usePswEdit.tsx index e96bba8eb..0a3769892 100644 --- a/src/pages/app/components/Option/components/LimitOption/usePswEdit.tsx +++ b/src/pages/app/components/Option/categories/Limit/usePswEdit.tsx @@ -1,6 +1,7 @@ -import { t } from "@app/locale" -import { useState } from "@hooks" -import { ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox } from "element-plus" +import { t } from '@app/locale' +import { css } from '@emotion/css' +import { useState } from '@hooks' +import { ElForm, ElFormItem, ElInput, ElMessage, ElMessageBox, useNamespace } from "element-plus" type Options = { reset: () => string | undefined @@ -12,23 +13,37 @@ export const usePswEdit = (options: Options) => { const [psw, setPsw] = useState(reset?.()) const [confirmPsw, setConfirmPsw, resetConfirmPsw] = useState('') + const messageBoxNs = useNamespace('message-box') + const customClass = css` + & .${messageBoxNs.e('container')} { + padding: 15px 10px; + + .${messageBoxNs.e('status')} { + display: none; + } + .${messageBoxNs.e('message')} { + flex: 1; + } + } + ` + const modifyPsw = async (): Promise<string | undefined> => { setPsw('') resetConfirmPsw() const action = await ElMessageBox({ - title: t(msg => msg.option.dailyLimit.level.passwordLabel, { input: '' }), + title: t(msg => msg.option.limit.level.passwordLabel, { input: '' }), message: ( <ElForm labelWidth={120} labelPosition="left"> - <ElFormItem required label={t(msg => msg.option.dailyLimit.level.pswFormLabel)}> - <ElInput modelValue={psw.value} onInput={setPsw} /> + <ElFormItem required label={t(msg => msg.option.limit.level.pswFormLabel)}> + <ElInput modelValue={psw.value} onInput={setPsw} type='password' /> </ElFormItem> - <ElFormItem required label={t(msg => msg.option.dailyLimit.level.pswFormAgain)}> - <ElInput modelValue={confirmPsw.value} onInput={setConfirmPsw} /> + <ElFormItem required label={t(msg => msg.option.limit.level.pswFormAgain)}> + <ElInput modelValue={confirmPsw.value} onInput={setConfirmPsw} type='password' /> </ElFormItem> </ElForm> ), - customClass: 'option-daily-limit-psw-box', + customClass, confirmButtonText: t(msg => msg.button.confirm), showCancelButton: true, cancelButtonText: t(msg => msg.button.cancel), diff --git a/src/pages/app/components/Option/categories/Limit/useVerify.ts b/src/pages/app/components/Option/categories/Limit/useVerify.ts new file mode 100644 index 000000000..d69992c41 --- /dev/null +++ b/src/pages/app/components/Option/categories/Limit/useVerify.ts @@ -0,0 +1,19 @@ +import { listLimits } from "@api/sw/limit" +import { judgeVerificationRequired, processVerification } from "@app/util/limit/index" +import { ref } from "vue" + +export const useVerify = (option: tt4b.option.LimitOption) => { + const verified = ref(false) + + const verify = async (): Promise<void> => { + if (verified.value) return + const items = await listLimits() + const delayDuration = option.limitDelayDuration + const triggerResults = await Promise.all(items.map(item => judgeVerificationRequired(item, delayDuration))) + const anyTrigger = triggerResults.some(t => t) + if (anyTrigger) await processVerification(option) + verified.value = true + } + + return { verified, verify } +} \ No newline at end of file diff --git a/src/pages/app/components/Option/categories/Notification/Footer.tsx b/src/pages/app/components/Option/categories/Notification/Footer.tsx new file mode 100644 index 000000000..3c3746a4f --- /dev/null +++ b/src/pages/app/components/Option/categories/Notification/Footer.tsx @@ -0,0 +1,30 @@ +import { sendMsg2Runtime } from '@api/sw/common' +import { t } from '@app/locale' +import { Operation } from '@element-plus/icons-vue' +import Flex from '@pages/components/Flex' +import { ElButton, ElDivider, ElMessage } from 'element-plus' +import type { FunctionalComponent } from 'vue' + +const Footer: FunctionalComponent<{}> = () => { + const handleTest = async () => { + try { + const errMsg = await sendMsg2Runtime('option.testNotification') + if (errMsg) throw new Error(errMsg) + ElMessage.success('Valid!') + } catch (e) { + const msg = e instanceof Error ? e.message : String(e) ?? 'Unknown error' + ElMessage.error(msg) + } + } + + return <> + <ElDivider /> + <Flex gap={12} wrap> + <ElButton type="primary" icon={Operation} onClick={handleTest}> + {t(msg => msg.button.test)} + </ElButton> + </Flex> + </> +} + +export default Footer \ No newline at end of file diff --git a/src/pages/app/components/Option/categories/Notification/index.tsx b/src/pages/app/components/Option/categories/Notification/index.tsx new file mode 100644 index 000000000..cc649c48a --- /dev/null +++ b/src/pages/app/components/Option/categories/Notification/index.tsx @@ -0,0 +1,127 @@ +import { OptionItem, OptionLines } from '@app/components/Option/components' +import { t } from '@app/locale' +import { QuestionFilled } from '@element-plus/icons-vue' +import { ElIcon, ElInput, ElLink, ElMessage, ElSelect, ElTimePicker, ElTooltip } from 'element-plus' +import { computed, defineComponent, StyleValue } from 'vue' +import type { CategoryInstance } from '../types' +import Footer from './Footer' +import { useNotification } from './useNotification' +import usePermission from './usePermission' + +const CYCLE_LABELS: Record<tt4b.notification.Cycle, string> = { + none: t(msg => msg.option.off), + daily: t(msg => msg.option.notification.cycle.daily), + weekly: t(msg => msg.option.notification.cycle.weekly), +} + +const METHOD_LABELS: Record<tt4b.notification.Method, string> = { + browser: t(msg => msg.option.notification.method.browser), + callback: t(msg => msg.option.notification.method.callback.label), +} + +const ALL_WEEKDAYS = t(msg => msg.calendar.weekDays)?.split('|') || [] + +const PADDING: StyleValue = { paddingInlineStart: '2px' } + +const Notification = defineComponent((_, ctx) => { + const { option, weekday, datetime, reset } = useNotification() + const isNotNone = computed(() => option.notificationCycle !== 'none') + + const { checkRequest } = usePermission() + + const onCycleChange = async (val: tt4b.notification.Cycle) => { + if (val === 'none') { + option.notificationCycle = val + return + } + const result = await checkRequest(option.notificationMethod) + result ? option.notificationCycle = val : ElMessage.info('Denied by user') + } + + const onMethodChange = async (val: tt4b.notification.Method) => { + const result = await checkRequest(val) + result ? option.notificationMethod = val : ElMessage.info('Denied by user') + } + + ctx.expose({ + reset, + } satisfies CategoryInstance) + + return () => ( + <OptionLines> + <OptionItem label={msg => msg.option.notification.cycle.label} defaultValue={msg => msg.option.off}> + <ElSelect + modelValue={option.notificationCycle} + size="small" + style={{ width: "120px" } satisfies StyleValue} + onChange={val => onCycleChange(val as tt4b.notification.Cycle)} + options={Object.entries(CYCLE_LABELS).map(([value, label]) => ({ value: value as tt4b.notification.Cycle, label }))} + /> + {option.notificationCycle === 'weekly' && <> + <ElSelect + modelValue={weekday.value} + size="small" + style={{ minWidth: "70px", width: "70px", ...PADDING } satisfies StyleValue} + onChange={val => weekday.value = val as number} + options={ALL_WEEKDAYS.map((label, idx) => ({ value: idx, label }))} + /> + <span style={PADDING}>-</span> + </>} + {(option.notificationCycle === 'daily' || option.notificationCycle === 'weekly') && ( + <ElTimePicker + modelValue={datetime.value} + size="small" + style={{ width: "80px", ...PADDING } satisfies StyleValue} + onUpdate:modelValue={val => datetime.value = val as Date} + format="HH:mm" + clearable={false} + /> + )} + </OptionItem> + <OptionItem v-show={isNotNone.value} label={msg => msg.option.notification.method.label}> + <ElSelect + modelValue={option.notificationMethod} + size="small" + style={{ width: "150px" } satisfies StyleValue} + onChange={val => onMethodChange(val as tt4b.notification.Method)} + options={Object.entries(METHOD_LABELS).map(([value, label]) => ({ value: value as tt4b.notification.Method, label }))} + /> + </OptionItem> + {isNotNone.value && option.notificationMethod === 'callback' && ( + <> + <OptionItem label={msg => msg.option.notification.method.callback.url} required> + <ElInput + modelValue={option.notificationEndpoint || ''} + size="small" + style={{ width: "400px" } satisfies StyleValue} + onInput={val => option.notificationEndpoint = val} + placeholder="https://example.com/notification" + /> + <ElTooltip content='Document' effect='light' placement='top'> + <ElLink + target='_blank' underline={false} + href="https://github.com/sheepzh/time-tracker-4-browser/blob/main/examples/notification/README.md" + > + <ElIcon><QuestionFilled /></ElIcon> + </ElLink> + </ElTooltip> + </OptionItem> + <OptionItem label="Security Token {input}"> + <ElInput + modelValue={option.notificationAuthToken || ''} + size="small" + type="password" + showPassword={true} + style={{ width: "300px" } satisfies StyleValue} + onInput={val => option.notificationAuthToken = val} + placeholder="Optional" + /> + </OptionItem> + </> + )} + {isNotNone.value && <Footer />} + </OptionLines> + ) +}) + +export default Notification diff --git a/src/pages/app/components/Option/categories/Notification/useNotification.ts b/src/pages/app/components/Option/categories/Notification/useNotification.ts new file mode 100644 index 000000000..1f6c4aa4d --- /dev/null +++ b/src/pages/app/components/Option/categories/Notification/useNotification.ts @@ -0,0 +1,63 @@ +import { useOption } from '@app/components/Option/useOption' +import { DEFAULT_NOTIFICATION } from '@util/constant/option' +import { computed } from 'vue' + +function copy(target: tt4b.option.NotificationOption, source: Readonly<tt4b.option.NotificationOption>) { + target.notificationCycle = source.notificationCycle + target.notificationOffset = source.notificationOffset + target.notificationMethod = source.notificationMethod + target.notificationEndpoint = source.notificationEndpoint + target.notificationAuthToken = source.notificationAuthToken +} + +const MIN_PER_DAY = 24 * 60 + +export const useNotification = () => { + const { option } = useOption<tt4b.option.NotificationOption>({ defaultValue: DEFAULT_NOTIFICATION, copy }) + + const weekday = computed<number | null>({ + get() { + if (option.notificationCycle !== 'weekly') return null + let offset = option.notificationOffset + offset = Number.isNaN(offset) ? 0 : offset + return Math.floor(offset / MIN_PER_DAY) + }, + set(val) { + if (option.notificationCycle !== 'weekly' || val === null) return + const timeMinutes = option.notificationOffset % MIN_PER_DAY + option.notificationOffset = val * MIN_PER_DAY + timeMinutes + }, + }) + + const datetime = computed<Date | null>({ + get() { + if (option.notificationCycle === 'none') return null + let offset = option.notificationOffset + offset = Number.isNaN(offset) ? 0 : offset + const hours = Math.floor(offset / 60) + const minutes = offset % 60 + const date = new Date() + date.setHours(hours, minutes, 0, 0) + return date + }, + set(val) { + if (val === null || option.notificationCycle === 'none') return + const hours = val.getHours() + const minutes = val.getMinutes() + const dateMinutes = hours * 60 + minutes + + if (option.notificationCycle === 'daily') { + option.notificationOffset = dateMinutes + } else if (option.notificationCycle === 'weekly') { + option.notificationOffset = (weekday.value ?? 0) * MIN_PER_DAY + dateMinutes + } + }, + }) + + const reset = () => { + option.notificationCycle = DEFAULT_NOTIFICATION.notificationCycle + // other fields needn't be reset + } + + return { option, weekday, datetime, reset } +} diff --git a/src/pages/app/components/Option/categories/Notification/usePermission.tsx b/src/pages/app/components/Option/categories/Notification/usePermission.tsx new file mode 100644 index 000000000..d296b9d56 --- /dev/null +++ b/src/pages/app/components/Option/categories/Notification/usePermission.tsx @@ -0,0 +1,46 @@ +import { hasPerm, requestPerm } from '@api/chrome/permission' +import { IS_FIREFOX } from '@util/constant/environment' +import { onBeforeMount, reactive } from 'vue' + +const DATA_PERM: browser._manifest.OptionalDataCollectionPermission = 'technicalAndInteraction' +const BASE_PERM: chrome.runtime.ManifestPermission = 'notifications' + +const judgeDataPerm = async () => { + if (!IS_FIREFOX) return true + const perm = await browser?.permissions?.getAll() + return !!perm?.data_collection?.includes?.(DATA_PERM) +} + +const doRequestPerm = async (method: tt4b.notification.Method | undefined): Promise<boolean> => { + if (!method) return true + if (method === 'browser') { + return await requestPerm(BASE_PERM) + } + + if (!IS_FIREFOX) return true + + return await browser.permissions.request({ data_collection: [DATA_PERM] }) +} + +const usePermission = () => { + const granted = reactive<Record<tt4b.notification.Method, boolean>>({ + browser: false, + callback: false, + }) + + onBeforeMount(async () => { + granted.callback = await judgeDataPerm() + granted.browser = await hasPerm(BASE_PERM) + }) + + const checkRequest = async (method: tt4b.notification.Method) => { + // Invalid method to check + if (granted[method]) return true + + return granted[method] = await doRequestPerm(method) + } + + return { checkRequest } +} + +export default usePermission \ No newline at end of file diff --git a/src/pages/app/components/Option/components/StatisticsOption.tsx b/src/pages/app/components/Option/categories/Tracking.tsx similarity index 54% rename from src/pages/app/components/Option/components/StatisticsOption.tsx rename to src/pages/app/components/Option/categories/Tracking.tsx index 039b652ac..7faebc33d 100644 --- a/src/pages/app/components/Option/components/StatisticsOption.tsx +++ b/src/pages/app/components/Option/categories/Tracking.tsx @@ -5,50 +5,73 @@ * https://opensource.org/licenses/MIT */ import { hasPerm, requestPerm } from "@api/chrome/permission" -import { isAllowedFileSchemeAccess, sendMsg2Runtime } from "@api/chrome/runtime" -import { t } from "@app/locale" -import { useRequest } from "@hooks" +import { isAllowedFileSchemeAccess } from "@api/chrome/runtime" +import { sendMsg2Runtime } from '@api/sw/common' +import { t } from '@app/locale' +import { useManualRequest, useRequest } from '@hooks' import { locale } from "@i18n" import { rotate } from "@util/array" import { IS_ANDROID, IS_FIREFOX } from "@util/constant/environment" -import { defaultStatistics } from "@util/constant/option" +import { DEFAULT_TRACKING } from "@util/constant/option" import { MILL_PER_SECOND } from "@util/time" -import { ElMessage, ElMessageBox, ElOption, ElSelect, ElSwitch, ElTimePicker, ElTooltip } from "element-plus" +import { ElMessage, ElMessageBox, ElSelect, ElSwitch, ElTimePicker, ElTooltip } from "element-plus" import { computed, defineComponent } from "vue" -import { type OptionInstance } from "../common" +import { OptionItem, OptionLines, OptionTag, OptionTooltip } from '../components' import { useOption } from "../useOption" -import OptionItem from "./OptionItem" -import OptionLines from './OptionLines' -import OptionTag from "./OptionTag" -import OptionTooltip from "./OptionTooltip" +import type { CategoryInstance } from './types' -const weekStartOptionPairs: [[timer.option.WeekStartOption, string]] = [ - ['default', t(msg => msg.option.statistics.weekStartAsNormal)] +const ALL_STORAGES: Record<tt4b.option.StorageType, string> = { + classic: 'chrome.storage.local', + indexed_db: 'IndexedDB', +} + +const weekStartOptionPairs: [[tt4b.option.WeekStartOption, string]] = [ + ['default', t(msg => msg.option.tracking.weekStartAsNormal)] ] const allWeekDays = t(msg => msg.calendar.weekDays) .split('|') - .map((weekDay, idx) => [idx + 1, weekDay] as [timer.option.WeekStartOption, string]) + .map((weekDay, idx) => [idx + 1, weekDay] as [tt4b.option.WeekStartOption, string]) rotate(allWeekDays, locale === 'zh_CN' ? 0 : 1, true) allWeekDays.forEach(weekDayInfo => weekStartOptionPairs.push(weekDayInfo)) -function copy(target: timer.option.StatisticsOption, source: timer.option.StatisticsOption) { +function copy(target: tt4b.option.TrackingOption, source: Readonly<tt4b.option.TrackingOption>) { target.countLocalFiles = source.countLocalFiles target.countTabGroup = source.countTabGroup target.weekStart = source.weekStart target.autoPauseTracking = source.autoPauseTracking target.autoPauseInterval = source.autoPauseInterval + target.storage = source.storage } const _default = defineComponent((_props, ctx) => { - const { option } = useOption({ defaultValue: defaultStatistics, copy }) + const { option } = useOption<tt4b.option.TrackingOption>({ defaultValue: DEFAULT_TRACKING, copy }) const { data: fileAccess } = useRequest(isAllowedFileSchemeAccess) - ctx.expose({ - reset: () => { - const oldInterval = option.autoPauseInterval - copy(option, defaultStatistics()) - option.autoPauseInterval = oldInterval + const reset = () => { + // Not to reset these fields + const { + autoPauseInterval: oldInterval, + storage: oldStorage, + } = option + copy(option, DEFAULT_TRACKING) + option.autoPauseInterval = oldInterval + option.storage = oldStorage + } + ctx.expose({ reset } satisfies CategoryInstance) + + const { refresh: changeStorageType, loading: storageMigrating } = useManualRequest( + type => sendMsg2Runtime('option.changeStorage', type), + { + loadingText: 'Data migrating...', + onSuccess: (_, type) => option.storage = type, } - } satisfies OptionInstance) + ) + + const handleChangeStorage = (type: tt4b.option.StorageType) => { + const msg = t(msg => msg.option.tracking.storageConfirm, { type: ALL_STORAGES[type] }) + ElMessageBox.confirm(msg, { type: 'warning' }) + .then(() => changeStorageType(type)) + .catch(() => ElMessage.info('Cancelled by user')) + } const interval = computed<number>({ get: _oldValue => { @@ -76,7 +99,7 @@ const _default = defineComponent((_props, ctx) => { const handleTabGroupChange = async (val: boolean) => { if (val && !await hasPerm("tabGroups")) { try { - const granted = await ElMessageBox.confirm(t(msg => msg.option.statistics.tabGroupsPermGrant), { type: 'primary' }) + const granted = await ElMessageBox.confirm(t(msg => msg.option.permGrantConfirm), { type: 'primary' }) .then(() => requestPerm("tabGroups")) if (!granted) { ElMessage.error("Grant permission failed") @@ -87,16 +110,15 @@ const _default = defineComponent((_props, ctx) => { } } option.countTabGroup = val - val && sendMsg2Runtime("enableTabGroup") } return () => <OptionLines> {!IS_ANDROID && <> <OptionItem - label={msg => msg.option.statistics.autoPauseTrack} - defaultValue={t(msg => msg.option.no)} + label={msg => msg.option.tracking.autoPauseTrack} + defaultValue={DEFAULT_TRACKING.autoPauseTracking} v-slots={{ - info: () => <OptionTooltip>{t(msg => msg.option.statistics.noActivityInfo)}</OptionTooltip>, + info: () => <OptionTooltip>{t(msg => msg.option.tracking.noActivityInfo)}</OptionTooltip>, maxTime: () => <ElTimePicker size="small" clearable={false} @@ -113,43 +135,52 @@ const _default = defineComponent((_props, ctx) => { }} /> <OptionItem - label={msg => msg.option.statistics.countLocalFiles} - defaultValue={fileAccess.value ? t(msg => msg.option.yes) : undefined} + label={msg => msg.option.tracking.countLocalFiles} + defaultValue={DEFAULT_TRACKING.countLocalFiles} v-slots={{ - info: () => <OptionTooltip>{t(msg => msg.option.statistics.localFilesInfo)}</OptionTooltip>, - localFileTime: () => <OptionTag>{t(msg => msg.option.statistics.localFileTime)}</OptionTag>, - default: () => fileAccess.value - ? <ElSwitch modelValue={option.countLocalFiles} onChange={val => option.countLocalFiles = val as boolean} /> + info: () => <OptionTooltip>{t(msg => msg.option.tracking.localFilesInfo)}</OptionTooltip>, + localFileTime: () => <OptionTag>{t(msg => msg.option.tracking.localFileTime)}</OptionTag>, + default: () => fileAccess.value || IS_FIREFOX + ? <ElSwitch modelValue={option.countLocalFiles} onChange={val => option.countLocalFiles = !!val} /> : <ElTooltip placement="top" v-slots={{ - content: () => IS_FIREFOX ? t(msg => msg.option.statistics.fileAccessFirefox) : t(msg => msg.option.statistics.fileAccessDisabled), + content: () => t(msg => msg.option.tracking.fileAccessDisabled), default: () => <ElSwitch modelValue={false} disabled />, }} />, }} /> <OptionItem - label={msg => msg.option.statistics.countTabGroup} - defaultValue={t(msg => msg.option.no)} + label={msg => msg.option.tracking.countTabGroup} + defaultValue={DEFAULT_TRACKING.countTabGroup} v-slots={{ - info: () => <OptionTooltip>{t(msg => msg.option.statistics.tabGroupInfo)}</OptionTooltip>, + info: () => <OptionTooltip>{t(msg => msg.option.tracking.tabGroupInfo)}</OptionTooltip>, default: () => <ElSwitch modelValue={option.countTabGroup} onChange={val => handleTabGroupChange(!!val)} /> }} /> </>} <OptionItem - label={msg => msg.option.statistics.weekStart} - defaultValue={t(msg => msg.option.statistics.weekStartAsNormal)} + label={msg => msg.option.tracking.weekStart} + defaultValue={msg => msg.option.tracking.weekStartAsNormal} > <ElSelect modelValue={option.weekStart} size="small" style={{ width: '120px' }} - onChange={(val: timer.option.WeekStartOption) => option.weekStart = val} - > - {weekStartOptionPairs.map(([val, label]) => <ElOption value={val} label={label} />)} - </ElSelect> + onChange={(val: tt4b.option.WeekStartOption) => option.weekStart = val} + options={weekStartOptionPairs.map(([value, label]) => ({ value, label }))} + /> + </OptionItem> + <OptionItem label={msg => msg.option.tracking.storage}> + <ElSelect + modelValue={option.storage} + size="small" + loading={storageMigrating.value} + style={{ width: '160px' }} + onChange={val => handleChangeStorage(val)} + options={Object.entries(ALL_STORAGES).map(([value, label]) => ({ value, label }))} + /> </OptionItem> </OptionLines> }) diff --git a/src/pages/app/components/Option/categories/index.ts b/src/pages/app/components/Option/categories/index.ts new file mode 100644 index 000000000..70a309ed1 --- /dev/null +++ b/src/pages/app/components/Option/categories/index.ts @@ -0,0 +1,8 @@ +export { default as Accessibility } from "./Accessibility" +export { default as Appearance } from "./Appearance" +export { default as Backup } from "./Backup" +export { default as Limit } from "./Limit" +export { default as Notification } from "./Notification" +export { default as Tracking } from "./Tracking" +export * from "./types" + diff --git a/src/pages/app/components/Option/categories/types.ts b/src/pages/app/components/Option/categories/types.ts new file mode 100644 index 000000000..42d15e510 --- /dev/null +++ b/src/pages/app/components/Option/categories/types.ts @@ -0,0 +1,4 @@ + +export interface CategoryInstance { + reset(): Promise<void> | void +} diff --git a/src/pages/app/components/Option/common.tsx b/src/pages/app/components/Option/common.tsx deleted file mode 100644 index 27a2f7183..000000000 --- a/src/pages/app/components/Option/common.tsx +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { type I18nKey } from "@app/locale" -import { type Router, useRoute } from "vue-router" - -export const ALL_CATEGORIES = ["appearance", "statistics", "popup", 'dailyLimit', 'accessibility', 'backup'] as const -export type OptionCategory = typeof ALL_CATEGORIES[number] - -export type OptionInstance = { - reset: () => Promise<void> | void -} - -const PARAM = "i" - -export function parseQuery(): OptionCategory | undefined { - const initialQuery = useRoute().query?.[PARAM] - const queryVal: string | null | undefined = Array.isArray(initialQuery) ? initialQuery[0] : initialQuery - if (!queryVal) return undefined - const cate = queryVal as OptionCategory - return ALL_CATEGORIES.includes(cate) ? cate : undefined -} - -export function changeQuery(cate: OptionCategory, router: Router) { - const query: Record<string, string> = {} - query[PARAM] = cate - router.replace({ query }) -} - -export const CATE_LABELS: Record<OptionCategory, I18nKey> = { - appearance: msg => msg.option.appearance.title, - statistics: msg => msg.option.statistics.title, - popup: msg => msg.option.popup.title, - dailyLimit: msg => msg.menu.limit, - accessibility: msg => msg.option.accessibility.title, - backup: msg => msg.option.backup.title, -} \ No newline at end of file diff --git a/src/pages/app/components/Option/components/BackupOption/Clear/Sop.tsx b/src/pages/app/components/Option/components/BackupOption/Clear/Sop.tsx deleted file mode 100644 index 7ce384f32..000000000 --- a/src/pages/app/components/Option/components/BackupOption/Clear/Sop.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import DialogSop, { type SopInstance, type SopStepInstance } from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { useManualRequest, useState } from "@hooks" -import processor from "@service/backup/processor" -import { ElMessage, ElStep, ElSteps } from "element-plus" -import { defineComponent, ref } from "vue" -import Step1, { type StatResult } from "./Step1" -import Step2 from "./Step2" - -type Props = { - onCancel: NoArgCallback - onClear: NoArgCallback -} - -const _default = defineComponent<Props>((props, ctx) => { - const [step, setStep] = useState<0 | 1>(0) - const step1 = ref<SopStepInstance<StatResult>>() - - const { data, refresh: handleNext, loading: readingClient } = useManualRequest(() => step1.value?.parseData?.(), { - onSuccess: () => setStep(1), - onError: e => ElMessage.warning((e as Error)?.message || 'Unknown error'), - }) - - const { refresh: handleClear, loading: deleting } = useManualRequest(async () => { - const cid = data.value?.client?.id - if (!cid) throw new Error('Client not selected') - const result = await processor.clear(cid) - if (!result.success) throw new Error(result.errorMsg) - }, { - onSuccess: () => { - ElMessage.success(t(msg => msg.operation.successMsg)) - props.onClear?.() - }, - onError: e => ElMessage.warning((e as Error)?.message || 'Unknown error'), - }) - - ctx.expose({ init: () => setStep(0) } satisfies SopInstance) - - return () => ( - <DialogSop - first={step.value === 0} - last={step.value === 1} - onCancel={props.onCancel} - onNext={handleNext} - nextLoading={readingClient.value} - onBack={() => step.value = 0} - onFinish={handleClear} - finishLoading={deleting.value} - v-slots={{ - steps: () => ( - <ElSteps space={200} finishStatus="success" active={step.value} alignCenter> - <ElStep title={t(msg => msg.option.backup.clientTable.selectTip)} /> - <ElStep title={t(msg => msg.option.backup.download.step2)} /> - </ElSteps> - ), - content: () => step.value === 0 ? <Step1 ref={step1} /> : <Step2 data={data.value} /> - }} - /> - ) -}, { props: ['onCancel', 'onClear'] }) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/components/BackupOption/Clear/Step1.tsx b/src/pages/app/components/Option/components/BackupOption/Clear/Step1.tsx deleted file mode 100644 index 1961c7d1d..000000000 --- a/src/pages/app/components/Option/components/BackupOption/Clear/Step1.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { type SopStepInstance } from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { useState } from "@hooks" -import processor from "@service/backup/processor" -import { BIRTHDAY, getBirthday, parseTime } from "@util/time" -import { defineComponent } from "vue" -import ClientTable from "../ClientTable" - -export type StatResult = { - rowCount: number - hostCount: number - client: timer.backup.Client -} - -async function fetchStatResult(client: timer.backup.Client): Promise<StatResult> { - const { id: specCid, maxDate, minDate = BIRTHDAY } = client - const start = parseTime(minDate) ?? getBirthday() - const end = parseTime(maxDate) ?? new Date() - const remoteRows: timer.core.Row[] = await processor.query({ specCid, start, end }) - const siteSet: Set<string> = new Set() - remoteRows?.forEach(row => { - const { host } = row || {} - host && siteSet.add(host) - }) - const rowCount = remoteRows?.length || 0 - const hostCount = siteSet?.size || 0 - return { - rowCount, - hostCount, - client, - } -} - -const _default = defineComponent((_, ctx) => { - const [client, setClient] = useState<timer.backup.Client>() - - const parseData = (): Promise<StatResult> => { - const clientVal = client.value - if (!clientVal) throw new Error(t(msg => msg.option.backup.clientTable.notSelected)) - return fetchStatResult(clientVal) - } - - ctx.expose({ parseData } satisfies SopStepInstance<StatResult>) - - return () => <ClientTable onSelect={setClient} /> -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/components/BackupOption/Clear/index.tsx b/src/pages/app/components/Option/components/BackupOption/Clear/index.tsx deleted file mode 100644 index e6ce843bc..000000000 --- a/src/pages/app/components/Option/components/BackupOption/Clear/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Copyright (c) 2023-present Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { type SopInstance } from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { Delete } from "@element-plus/icons-vue" -import { useSwitch } from "@hooks" -import { ElButton, ElDialog } from "element-plus" -import { defineComponent, ref, type StyleValue } from "vue" -import Sop from "./Sop" - -const _default = defineComponent(() => { - const [dialogVisible, open, close] = useSwitch(false) - const sop = ref<SopInstance>() - - return () => <> - <ElButton - type="danger" - icon={Delete} - onClick={open} - style={{ marginInlineStart: 0 } satisfies StyleValue} - > - {t(msg => msg.option.backup.clear.btn)} - </ElButton> - <ElDialog - title={t(msg => msg.option.backup.clear.btn)} - modelValue={dialogVisible.value} - onOpen={() => sop.value?.init?.()} - onClose={close} - > - <Sop ref={sop} onCancel={close} onClear={close} /> - </ElDialog> - </> -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/components/BackupOption/Download/Sop.tsx b/src/pages/app/components/Option/components/BackupOption/Download/Sop.tsx deleted file mode 100644 index d70cafd80..000000000 --- a/src/pages/app/components/Option/components/BackupOption/Download/Sop.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import DialogSop, { type SopInstance, type SopStepInstance } from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { useManualRequest, useState } from "@hooks" -import processor from "@service/backup/processor" -import { fillExist, processImportedData } from "@service/components/import-processor" -import { getBirthday, parseTime } from "@util/time" -import { ElMessage, ElStep, ElSteps } from "element-plus" -import { defineComponent, ref } from "vue" -import ClientTable from "../ClientTable" -import Step2 from "./Step2" - -async function fetchData(client: timer.backup.Client): Promise<timer.imported.Data> { - const { id: specCid, maxDate, minDate } = client - const start = parseTime(minDate) ?? getBirthday() - const end = parseTime(maxDate) ?? new Date() - const remoteRows = await processor.query({ specCid, start, end }) - const rows: timer.imported.Row[] = remoteRows.map(rr => ({ - date: rr.date, - host: rr.host, - focus: rr.focus, - time: rr.time, - })) - await fillExist(rows) - return { rows, focus: true, time: true } -} - -type Props = { - onCancel: NoArgCallback - onDownload: NoArgCallback -} - -const _default = defineComponent<Props>((props, ctx) => { - const [step, setStep] = useState<0 | 1>(0) - const [client, setClient] = useState<timer.backup.Client>() - const step2 = ref<SopStepInstance<timer.imported.ConflictResolution>>() - - const init = () => { - setStep(0) - setClient() - } - - ctx.expose({ init } satisfies SopInstance) - - const { data, refresh: handleNext, loading: dataFetching } = useManualRequest(() => { - if (step.value !== 0) throw new Error("Data already loaded") - - const clientVal = client.value - if (!clientVal) throw new Error(t(msg => msg.option.backup.clientTable.notSelected)) - return fetchData(clientVal) - }, { - defaultValue: { rows: [] }, - onSuccess: () => step.value = 1, - onError: e => ElMessage.error((e as Error)?.message || 'Unknown error...'), - }) - - const { refresh: handleDownload, loading: downloading } = useManualRequest(async () => { - const resolution = await step2.value?.parseData?.() - if (!resolution) throw new Error(t(msg => msg.dataManage.importOther.conflictNotSelected)) - - await processImportedData(data.value, resolution) - }, { - onSuccess: () => { - ElMessage.success(t(msg => msg.operation.successMsg)) - props.onDownload?.() - }, - onError: e => ElMessage.error((e as Error)?.message || 'Unknown error...'), - }) - - return () => ( - <DialogSop - first={step.value === 0} - last={step.value === 1} - onNext={handleNext} - nextLoading={dataFetching.value} - onCancel={props.onCancel} - onBack={init} - onFinish={handleDownload} - finishLoading={downloading.value} - v-slots={{ - steps: () => ( - <ElSteps finishStatus="success" active={step.value} alignCenter> - <ElStep title={t(msg => msg.option.backup.clientTable.selectTip)} /> - <ElStep title={t(msg => msg.option.backup.download.step2)} /> - </ElSteps> - ), - content: () => step.value === 0 - ? <ClientTable onSelect={setClient} /> - : <Step2 - ref={step2} - data={data.value} - clientName={client.value?.name ?? ''} - /> - }} - /> - ) -}, { props: ['onCancel', 'onDownload'] }) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/components/BackupOption/Download/Step2.tsx b/src/pages/app/components/Option/components/BackupOption/Download/Step2.tsx deleted file mode 100644 index a53b5e610..000000000 --- a/src/pages/app/components/Option/components/BackupOption/Download/Step2.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import type { SopStepInstance } from "@app/components/common/DialogSop" -import CompareTable from "@app/components/common/imported/CompareTable" -import ResolutionRadio from "@app/components/common/imported/ResolutionRadio" -import { t } from "@app/locale" -import { useState } from "@hooks" -import Flex from "@pages/components/Flex" -import { ElAlert } from "element-plus" -import { defineComponent } from "vue" - -type Props = { - data: timer.imported.Data - clientName: string -} - -const _default = defineComponent<Props>((props, ctx) => { - const [resolution, setResolution] = useState<timer.imported.ConflictResolution>() - - ctx.expose({ parseData: () => resolution.value } satisfies SopStepInstance<timer.imported.ConflictResolution | undefined>) - - return () => ( - <Flex column width='100%' gap={20} margin='40px 20px 0 20px'> - <ElAlert type="success" closable={false}> - { - t(msg => msg.option.backup.download.confirmTip, { - clientName: props.clientName, - size: props.data?.rows?.length || 0 - }) - } - </ElAlert> - <CompareTable data={props.data} comparedColName={t(msg => msg.option.backup.download.willDownload)} /> - <Flex justify="center"> - <ResolutionRadio modelValue={resolution.value} onChange={setResolution} /> - </Flex> - </Flex> - ) -}, { props: ['data', 'clientName'] }) - -export default _default diff --git a/src/pages/app/components/Option/components/BackupOption/Download/index.tsx b/src/pages/app/components/Option/components/BackupOption/Download/index.tsx deleted file mode 100644 index c32ccf22e..000000000 --- a/src/pages/app/components/Option/components/BackupOption/Download/index.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import type { SopInstance } from "@app/components/common/DialogSop" -import { t } from "@app/locale" -import { Files } from "@element-plus/icons-vue" -import { useSwitch } from "@hooks" -import { ElButton, ElDialog } from "element-plus" -import { defineComponent, ref } from "vue" -import Sop from "./Sop" - -const _default = defineComponent(() => { - const [dialogVisible, open, close] = useSwitch() - const sop = ref<SopInstance>() - - return () => <> - <ElButton type="primary" icon={Files} onClick={open}> - {t(msg => msg.option.backup.download.btn)} - </ElButton> - <ElDialog - alignCenter - title={t(msg => msg.option.backup.download.btn)} - width="70%" - modelValue={dialogVisible.value} - onOpen={() => sop.value?.init?.()} - onClose={close} - > - <Sop ref={sop} onCancel={close} onDownload={close} /> - </ElDialog> - </> -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/components/BackupOption/state.ts b/src/pages/app/components/Option/components/BackupOption/state.ts deleted file mode 100644 index b77e492c2..000000000 --- a/src/pages/app/components/Option/components/BackupOption/state.ts +++ /dev/null @@ -1,118 +0,0 @@ -import optionHolder from "@service/components/option-holder" -import optionService from "@service/option-service" -import { defaultBackup } from "@util/constant/option" -import { computed, onBeforeMount, type Ref, ref, toRaw, watch } from "vue" - -type Result = { - reset: () => void - backupType: Ref<timer.backup.Type> - clientName: Ref<string> - autoBackUp: Ref<boolean> - autoBackUpInterval: Ref<number | undefined> - auth: Ref<string | undefined> - account: Ref<string | undefined> - password: Ref<string | undefined> - ext: Ref<timer.backup.TypeExt | undefined> - setExtField: (field: keyof timer.backup.TypeExt, val: string) => void -} - -export const useOptionState = (): Result => { - const defaultOption = defaultBackup() - const backupType = ref(defaultOption.backupType) - const autoBackUp = ref(defaultOption.autoBackUp) - const autoBackUpInterval = ref(defaultOption.autoBackUpInterval) - const backupExts = ref(defaultOption.backupExts) - const backupAuths = ref(defaultOption.backupAuths) - const clientName = ref(defaultOption.clientName) - const login = ref(defaultOption.backupLogin) - - watch([ - backupType, - autoBackUp, autoBackUpInterval, - backupExts, backupAuths, login, - clientName, - ], () => optionService.setBackupOption({ - backupType: backupType.value, - autoBackUp: autoBackUp.value, - autoBackUpInterval: autoBackUpInterval.value, - backupExts: toRaw(backupExts.value), - backupAuths: toRaw(backupAuths.value), - clientName: clientName.value, - backupLogin: toRaw(login.value), - })) - - onBeforeMount(async () => { - const val = await optionHolder.get() - backupType.value = val?.backupType - autoBackUp.value = val?.autoBackUp - autoBackUpInterval.value = val?.autoBackUpInterval - backupExts.value = val?.backupExts - backupAuths.value = val?.backupAuths - clientName.value = val?.clientName - login.value = val?.backupLogin - }) - - const reset = () => { - // Only reset type and auto flag - backupType.value = defaultOption.backupType - autoBackUp.value = defaultOption.autoBackUp - } - - const auth = computed({ - get: () => backupAuths.value?.[backupType?.value], - set: val => { - const typeVal = backupType.value - if (!typeVal) return - const newAuths = { - ...backupAuths.value || {}, - [typeVal]: val, - } - backupAuths.value = newAuths - } - }) - - const ext = computed<timer.backup.TypeExt | undefined>({ - get: () => backupExts.value?.[backupType.value], - set: val => { - const typeVal = backupType.value - if (!typeVal) return - const newExts = { - ...backupExts.value || {}, - [typeVal]: val, - } - backupExts.value = newExts - }, - }) - - const setExtField = (field: keyof timer.backup.TypeExt, val: string) => { - const newVal = { ...(ext.value || {}), [field]: val?.trim?.() } - ext.value = newVal - } - - const setLoginField = (field: keyof timer.backup.LoginInfo, val: string) => { - const typeVal = backupType.value - if (!typeVal) return - const newLogin = { - ...login.value || {}, - [typeVal]: { ...(login.value?.[typeVal] || {}), [field]: val } - } - login.value = newLogin - } - - const account = computed<string | undefined>({ - get: () => login.value?.[backupType?.value]?.acc, - set: (val: string | undefined) => setLoginField('acc', val ?? '') - }) - - const password = computed<string | undefined>({ - get: () => login.value?.[backupType?.value]?.psw, - set: (val: string | undefined) => setLoginField('psw', val ?? '') - }) - - return { - backupType, clientName, reset, - autoBackUp, autoBackUpInterval, - auth, account, password, - ext, setExtField, - } -} diff --git a/src/pages/app/components/Option/components/BackupOption/style.sass b/src/pages/app/components/Option/components/BackupOption/style.sass deleted file mode 100644 index 969b708b6..000000000 --- a/src/pages/app/components/Option/components/BackupOption/style.sass +++ /dev/null @@ -1,8 +0,0 @@ -.backup-client-table - .el-radio__label - padding: 0 - .el-tag - height: 20px - margin-inline: 6px 0 -.operation-container - margin: 40px 20px 0 20px diff --git a/src/pages/app/components/Option/components/Item.tsx b/src/pages/app/components/Option/components/Item.tsx new file mode 100644 index 000000000..2033f4e7a --- /dev/null +++ b/src/pages/app/components/Option/components/Item.tsx @@ -0,0 +1,122 @@ +import { t, tN, type I18nKey } from '@app/locale' +import { css } from '@emotion/css' +import { MediaSize, useMediaSize } from '@hooks' +import Flex from "@pages/components/Flex" +import { colorVariant } from '@pages/util/style' +import { ElTag, useNamespace } from "element-plus" +import { computed, defineComponent, h, type StyleValue, type VNode } from "vue" + +type Props = { + label: I18nKey | string + defaultValue?: string | number | boolean | I18nKey + required?: boolean +} + +const OPTION_ITEM_SYMBOL = Symbol('OptionItem') + +const computedDefValText = (defVal: Props['defaultValue']): string | number | undefined => { + switch (typeof defVal) { + case 'undefined': return undefined + case 'string': + case 'number': return defVal + case 'boolean': return t(msg => msg.option[defVal ? 'yes' : 'no']) + default: return t(defVal) + } +} + +const TAG_STYLE: StyleValue = { height: '20px', marginInlineStart: '4px' } + +const renderLabel = (label: Props['label'], param: any) => { + const key = typeof label === 'string' ? () => label : label + return tN(key, param) +} + +export function isOptionItem(component: VNode): boolean { + if (!component || typeof component !== 'object') return false + const { type } = component + return !!(type as any)[OPTION_ITEM_SYMBOL] +} + +const useStyle = () => { + const inputNs = useNamespace('input') + const selectNs = useNamespace('select') + const dateEditNs = useNamespace('date-edit') + const dividerNs = useNamespace('divider') + + const lineCls = css` + & { + .${selectNs.b()} { + display: inline-flex; + height: 28px; + min-width: 120px; + width: 120px; + .${selectNs.e('wrapper')} { + width: 100%; + } + } + .${inputNs.m('small')} { + height: 28px; + .${inputNs.e('wrapper')} { + height: 26px; + } + } + .${dateEditNs.m('time')} { + width: 100px; + .${dateEditNs.e('prefix')} { + width: 16px; + margin-inline-start: 5px; + } + } + + i { + margin: 0 2px; + font-size: 13px !important; + } + } + ` + + const smCls = css` + & { + .${dividerNs.m('horizontal')} { + margin: 12px 0; + } + .${selectNs.b()},.${inputNs.b()} { + margin-inline-start: 4px !important; + } + } + ` + + return { lineCls, smCls } +} + +const Item = defineComponent<Props>((props, { slots }) => { + const defaultText = computed(() => computedDefValText(props.defaultValue)) + const mediaSize = useMediaSize() + const isSmScreen = computed(() => mediaSize.value <= MediaSize.sm) + const { lineCls, smCls } = useStyle() + + return () => { + const param: Record<string, VNode> = {} + Object.entries(slots).forEach(([k, slot]) => slot && (param[k === "default" ? "input" : k] = h(slot))) + return ( + <Flex class={[lineCls, isSmScreen.value && smCls]} align="center" justify="space-between" gap={10}> + <Flex align="center" color='text-primary' gap={4} wrap lineHeight={32}> + {!!props.required && <span style={{ color: `var(${colorVariant('danger')})`, marginInlineEnd: 4 }}>*</span>} + {renderLabel(props.label, param)} + </Flex> + {defaultText.value && !isSmScreen.value && ( + <Flex as='a' color='text-primary'> + {tN(msg => msg.option.defaultValue, { + default: <ElTag size="small" style={TAG_STYLE}>{defaultText.value}</ElTag> + })} + </Flex> + )} + </Flex> + ) + } +}, { props: ['label', 'required', 'defaultValue'] }) + +const ItemAny = Item as any +ItemAny[OPTION_ITEM_SYMBOL] = true + +export default Item \ No newline at end of file diff --git a/src/pages/app/components/Option/components/LimitOption/index.tsx b/src/pages/app/components/Option/components/LimitOption/index.tsx deleted file mode 100644 index 05cad2ae2..000000000 --- a/src/pages/app/components/Option/components/LimitOption/index.tsx +++ /dev/null @@ -1,182 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { t } from "@app/locale" -import { processVerification } from "@app/util/limit" -import { Edit } from "@element-plus/icons-vue" -import { defaultDailyLimit } from "@util/constant/option" -import { ElButton, ElInput, ElInputNumber, ElMessage, ElMessageBox, ElOption, ElSelect, ElSwitch } from "element-plus" -import { defineComponent, type StyleValue } from "vue" -import { type OptionInstance } from "../../common" -import { useOption } from "../../useOption" -import OptionItem from "../OptionItem" -import OptionLines from '../OptionLines' -import "./limit-option.sass" -import { usePswEdit } from "./usePswEdit" -import { useVerify } from "./useVerify" - -const ALL_LEVEL: timer.limit.RestrictionLevel[] = [ - 'nothing', - 'verification', - 'password', - 'strict', -] - -const ALL_DIFF: timer.limit.VerificationDifficulty[] = [ - 'easy', - 'hard', - 'disgusting', -] - -function copy(target: timer.option.LimitOption, source: timer.option.LimitOption) { - target.limitPrompt = source.limitPrompt - target.limitLevel = source.limitLevel - target.limitPassword = source.limitPassword - target.limitVerifyDifficulty = source.limitVerifyDifficulty - target.limitReminder = source.limitReminder - target.limitReminderDuration = source.limitReminderDuration -} - -function reset(target: timer.option.LimitOption) { - const defaultValue: MakeOptional<timer.option.LimitOption, 'limitPassword' | 'limitVerifyDifficulty' | 'limitReminderDuration'> = defaultDailyLimit() - // Not to reset limitPassword - delete defaultValue.limitPassword - // Not to reset difficulty - delete defaultValue.limitVerifyDifficulty - // Not to reset notification duration - delete defaultValue.limitReminderDuration - Object.entries(defaultValue).forEach(([key, val]) => (target as any)[key] = val) -} - -const confirm4Strict = async (): Promise<void> => { - const title = t(msg => msg.option.dailyLimit.level.strictTitle) - const content = t(msg => msg.option.dailyLimit.level.strictContent) - await ElMessageBox.confirm(content, title, { - type: "warning", - confirmButtonText: t(msg => msg.button.confirm), - cancelButtonText: t(msg => msg.button.cancel), - }) -} - -const _default = defineComponent((_, ctx) => { - const { option } = useOption<timer.option.LimitOption>({ defaultValue: defaultDailyLimit, copy }) - const { verified, verify } = useVerify(option) - const { modifyPsw } = usePswEdit({ reset: () => option.limitPassword }) - - ctx.expose({ - reset: () => verify().then(() => reset(option)).catch(() => { }) - } satisfies OptionInstance) - - const handleLevelChange = async (val: timer.limit.RestrictionLevel) => { - try { - await verify() - if (val === "strict") { - await confirm4Strict() - } else if (val === "password") { - option.limitPassword = await modifyPsw() - } - option.limitLevel = val - } catch (e) { - console.warn("Failed to verify", e) - } - } - - const handlePswEdit = async () => { - try { - await verify() - option.limitPassword = await modifyPsw() - ElMessage.success(t(msg => msg.operation.successMsg)) - } catch (e) { - console.warn("Failed to verify", e) - } - } - - return () => <OptionLines> - <OptionItem - label={msg => msg.option.dailyLimit.reminder} - defaultValue={t(msg => msg.option.no)} - v-slots={{ - default: () => ( - <ElSwitch - modelValue={option.limitReminder} - onChange={val => option.limitReminder = val as boolean} - /> - ), - minInput: () => ( - <ElInputNumber - disabled={!option.limitReminder} - modelValue={option.limitReminderDuration} - onChange={val => val && (option.limitReminderDuration = val)} - min={1} max={20} - size="small" - /> - ), - }} - /> - <OptionItem - label={msg => msg.option.dailyLimit.level.label} - defaultValue={t(msg => msg.option.dailyLimit.level[defaultDailyLimit().limitLevel])} - > - <ElSelect - modelValue={option.limitLevel} - size="small" - class='option-daily-limit-level-select' - onChange={handleLevelChange} - > - {ALL_LEVEL.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.level[item])} />)} - </ElSelect> - </OptionItem> - <OptionItem - v-show={option.limitLevel === "password"} - label={msg => msg.option.dailyLimit.level.passwordLabel} - > - <ElInput - modelValue={option.limitPassword} - size="small" - type="password" - showPassword={verified.value} - style={{ width: "300px" }} - v-slots={{ - append: () => <ElButton icon={Edit} onClick={handlePswEdit} />, - }} - /> - </OptionItem> - <OptionItem - v-show={option.limitLevel === "verification"} - label={msg => msg.option.dailyLimit.level.verificationLabel} - defaultValue={t(msg => (msg.option.dailyLimit.level as any)[defaultDailyLimit().limitVerifyDifficulty])} - > - <ElSelect - modelValue={option.limitVerifyDifficulty} - size="small" - onChange={(val: timer.limit.VerificationDifficulty) => verify() - .then(() => option.limitVerifyDifficulty = val) - .catch(console.warn) - } - > - {ALL_DIFF.map(item => <ElOption value={item} label={t(msg => msg.option.dailyLimit.level.verificationDifficulty[item])} />)} - </ElSelect> - <ElButton - size="small" - style={{ height: '28px', marginInlineStart: '5px' } satisfies StyleValue} - onClick={() => processVerification(option)} - > - {t(msg => msg.button.test)} - </ElButton> - </OptionItem> - <OptionItem label={msg => msg.option.dailyLimit.prompt}> - <ElInput - modelValue={option.limitPrompt} - size="small" - onInput={val => option.limitPrompt = val} - placeholder={t(msg => msg.limitModal.defaultPrompt)} - style={{ width: "280px" }} - /> - </OptionItem> - </OptionLines> -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Option/components/LimitOption/limit-option.sass b/src/pages/app/components/Option/components/LimitOption/limit-option.sass deleted file mode 100644 index 6d7b69884..000000000 --- a/src/pages/app/components/Option/components/LimitOption/limit-option.sass +++ /dev/null @@ -1,19 +0,0 @@ -.option-daily-limit-psw-box - .el-message-box__container - padding: 15px 10px - .el-message-box__status - display: none - .el-message-box__message - flex: 1 - -.option-daily-limit-level-select>.el-select__wrapper - width: 100% !important - -.option-daily-limit-level-select - width: 370px !important -html[data-locale="en"],html[data-locale="uk"] - .option-daily-limit-level-select - width: 330px !important -html[data-locale="zh_CN"],html[data-locale="zh_TW"] - .option-daily-limit-level-select - width: 210px !important diff --git a/src/pages/app/components/Option/components/LimitOption/useVerify.ts b/src/pages/app/components/Option/components/LimitOption/useVerify.ts deleted file mode 100644 index dab534573..000000000 --- a/src/pages/app/components/Option/components/LimitOption/useVerify.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { judgeVerificationRequired, processVerification } from "@app/util/limit" -import limitService from "@service/limit-service" -import { ref } from "vue" - -export const useVerify = (option: timer.option.LimitOption) => { - const verified = ref(false) - - const verify = async (): Promise<void> => { - if (verified.value) return - const items = await limitService.select({ filterDisabled: true, url: undefined }) - const triggerResults = await Promise.all((items || []).map(judgeVerificationRequired)) - const anyTrigger = triggerResults.some(t => !!t) - if (anyTrigger) { - await processVerification(option) - } - verified.value = true - } - - return { verified, verify } -} \ No newline at end of file diff --git a/src/pages/app/components/Option/components/OptionLines.tsx b/src/pages/app/components/Option/components/Lines.tsx similarity index 53% rename from src/pages/app/components/Option/components/OptionLines.tsx rename to src/pages/app/components/Option/components/Lines.tsx index 96dbf4337..865ba4b43 100644 --- a/src/pages/app/components/Option/components/OptionLines.tsx +++ b/src/pages/app/components/Option/components/Lines.tsx @@ -1,33 +1,31 @@ import { ElDivider } from 'element-plus' -import { type FunctionalComponent, h, isVNode, type VNode } from "vue" -import { isOptionItem } from './OptionItem' - -function isFragment({ type, children }: VNode): boolean { - return typeof type === 'symbol' && Array.isArray(children) -} +import { type FunctionalComponent, h, isVNode, type VNode, vShow } from "vue" +import { isOptionItem } from './Item' function isComment({ type, children }: VNode): boolean { return typeof type === 'symbol' && (children === null || children === undefined) } function isHidden({ dirs }: VNode): boolean { - return !!dirs?.some(({ dir, value }) => (dir as any)?.name === 'show' && value === false) + return !!dirs?.some(({ dir, value }) => dir === vShow && value === false) } function flattenChildren(original: VNode[]): VNode[] { const flat: VNode[] = [] + const stack: unknown[] = [...original] - for (const child of original) { + let child: unknown | undefined + while ((child = stack.shift()) != undefined) { if (!isVNode(child)) { - flat.push(child) + console.log('Found non-VNode child, ignored:', child) continue } - if (isFragment(child) && child.children) { - const fragmentChildren = Array.isArray(child.children) - ? child.children - : [child.children] - flat.push(...flattenChildren(fragmentChildren as VNode[])) + const { type, children } = child + if (typeof type === 'symbol' && Array.isArray(children)) { + // is Fragment, flatten it by pushing its children to stack + stack.unshift(...children) + continue } else { flat.push(child) } @@ -35,7 +33,7 @@ function flattenChildren(original: VNode[]): VNode[] { return flat } -const OptionLines: FunctionalComponent<{}> = (_, { slots }) => { +const Lines: FunctionalComponent<{}> = (_, { slots }) => { const children: VNode[] = [] let beforeIsItem = false @@ -50,10 +48,9 @@ const OptionLines: FunctionalComponent<{}> = (_, { slots }) => { children.push(child) beforeIsItem = thisIsItem } - - return h('div', {}, children) + return <div>{children}</div> } -OptionLines.displayName = 'OptionLines' +Lines.displayName = 'OptionLines' -export default OptionLines \ No newline at end of file +export default Lines \ No newline at end of file diff --git a/src/pages/app/components/Option/components/OptionItem.tsx b/src/pages/app/components/Option/components/OptionItem.tsx deleted file mode 100644 index 6d8f4afa5..000000000 --- a/src/pages/app/components/Option/components/OptionItem.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { t, tN, type I18nKey } from "@app/locale" -import Flex from "@pages/components/Flex" -import { ElTag } from "element-plus" -import { computed, defineComponent, h, type VNode } from "vue" - -type Props = { - label: I18nKey | string - defaultValue?: string | number | boolean | I18nKey - required?: boolean -} - -const OPTION_ITEM_SYMBOL = Symbol('OptionItem') - -const computedDefValText = (defVal: Props['defaultValue']): string | number | undefined => { - switch (typeof defVal) { - case 'undefined': return undefined - case 'string': - case 'number': return defVal - case 'boolean': return t(defVal ? msg => msg.option.yes : msg => msg.option.no) - default: return t(defVal) - } -} - -const renderLabel = (label: Props['label'], param: any) => { - return typeof label === 'string' ? label : tN(label, param) -} - -export function isOptionItem(component: VNode): boolean { - if (!component || typeof component !== 'object') return false - const { type } = component - return !!(type as any)[OPTION_ITEM_SYMBOL] -} - -const OptionItem = defineComponent<Props>((props, { slots }) => { - const defaultText = computed(() => computedDefValText(props.defaultValue)) - return () => { - const param: Record<string, VNode> = {} - Object.entries(slots).forEach(([k, slot]) => slot && (param[k === "default" ? "input" : k] = h(slot))) - return ( - <div> - <Flex class="option-line" align="center" justify="space-between" gap={10}> - <Flex class="option-label" align="center" gap={4}> - {!!props.required && <span class="option-item-required">*</span>} - {renderLabel(props.label, param)} - </Flex> - {defaultText.value && ( - <a class="option-default"> - {tN( - msg => msg.option.defaultValue, - { default: <ElTag size="small">{defaultText.value}</ElTag> }, - )} - </a> - )} - </Flex> - </div> - ) - } -}, { props: ['label', 'required', 'defaultValue'] }) - -const OptionItemAny = OptionItem as any -OptionItemAny[OPTION_ITEM_SYMBOL] = true - -export default OptionItem \ No newline at end of file diff --git a/src/pages/app/components/Option/components/OptionTag.tsx b/src/pages/app/components/Option/components/OptionTag.tsx deleted file mode 100644 index ef3126168..000000000 --- a/src/pages/app/components/Option/components/OptionTag.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { h, type FunctionalComponent, type StyleValue } from "vue" - -const OptionTag: FunctionalComponent<{}> = (_, { slots: { default: default_ } }) => ( - <a style={{ color: '#F56C6C' } satisfies StyleValue}> - {default_ && h(default_)} - </a> -) -OptionTag.displayName = 'OptionTag' - -export default OptionTag diff --git a/src/pages/app/components/Option/components/OptionTooltip.tsx b/src/pages/app/components/Option/components/OptionTooltip.tsx deleted file mode 100644 index f75fc29e3..000000000 --- a/src/pages/app/components/Option/components/OptionTooltip.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { InfoFilled } from "@element-plus/icons-vue" -import { ElIcon, ElTooltip } from "element-plus" -import { type FunctionalComponent } from "vue" - -const OptionTooltip: FunctionalComponent<{}> = (_, { slots: { default: content } }) => ( - content ? ( - <ElTooltip v-slots={{ content }}> - <ElIcon size={15}><InfoFilled /></ElIcon> - </ElTooltip> - ) : null -) -OptionTooltip.displayName = 'OptionTooltip' - -export default OptionTooltip \ No newline at end of file diff --git a/src/pages/app/components/Option/components/PopupOption.tsx b/src/pages/app/components/Option/components/PopupOption.tsx deleted file mode 100644 index 73376831a..000000000 --- a/src/pages/app/components/Option/components/PopupOption.tsx +++ /dev/null @@ -1,51 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { IS_ANDROID } from "@util/constant/environment" -import { defaultPopup } from "@util/constant/option" -import { ElInputNumber, ElSwitch } from "element-plus" -import { defineComponent } from "vue" -import { type OptionInstance } from "../common" -import { useOption } from "../useOption" -import OptionItem from "./OptionItem" -import OptionLines from './OptionLines' - -const defaultVal = defaultPopup() - -function copy(target: timer.option.PopupOption, source: timer.option.PopupOption) { - target.displaySiteName = source.displaySiteName - target.popupMax = source.popupMax -} - -const PopupOption = defineComponent<{}>((_, ctx) => { - const { option } = useOption({ defaultValue: defaultPopup, copy }) - - ctx.expose({ - reset: () => copy(option, defaultPopup()) - } satisfies OptionInstance) - - return () => <OptionLines> - <OptionItem label={msg => msg.option.popup.max} defaultValue={defaultVal.popupMax}> - <ElInputNumber - modelValue={option.popupMax} - size="small" - min={5} - max={100} - onChange={val => option.popupMax = val!} - /> - </OptionItem> - {!IS_ANDROID && ( - <OptionItem label={msg => msg.option.popup.displaySiteName} defaultValue={true}> - <ElSwitch - modelValue={option.displaySiteName} - onChange={val => option.displaySiteName = val as boolean} - /> - </OptionItem> - )} - </OptionLines> -}) - -export default PopupOption diff --git a/src/pages/app/components/Option/components/index.tsx b/src/pages/app/components/Option/components/index.tsx new file mode 100644 index 000000000..ff3965ca1 --- /dev/null +++ b/src/pages/app/components/Option/components/index.tsx @@ -0,0 +1,24 @@ +import { InfoFilled } from '@element-plus/icons-vue' +import { ElIcon, ElTooltip } from 'element-plus' +import type { FunctionalComponent, StyleValue } from 'vue' + +const Tag: FunctionalComponent<{}> = (_, { slots }) => ( + <a style={{ color: '#F56C6C', fontSize: 'inherit' } satisfies StyleValue}> + {slots.default?.()} + </a> +) +Tag.displayName = 'OptionTag' +export const OptionTag = Tag + +const Tooltip: FunctionalComponent<{}> = (_, { slots: { default: content } }) => ( + content ? ( + <ElTooltip v-slots={{ content }}> + <ElIcon size={15}><InfoFilled /></ElIcon> + </ElTooltip> + ) : null +) +Tooltip.displayName = 'OptionTooltip' +export const OptionTooltip = Tooltip + +export { default as OptionItem } from "./Item" +export { default as OptionLines } from "./Lines" diff --git a/src/pages/app/components/Option/export-import.ts b/src/pages/app/components/Option/export-import.ts index de08301eb..6938f3f42 100644 --- a/src/pages/app/components/Option/export-import.ts +++ b/src/pages/app/components/Option/export-import.ts @@ -4,23 +4,23 @@ * https://opensource.org/licenses/MIT */ -import optionHolder from "@service/components/option-holder" +import { getOption, setOption } from "@api/sw/option" import { deserialize, exportJson } from "@util/file" import { mergeObject } from '@util/lang' -export interface ExportedSettings { +interface ExportedSettings { version: string timestamp: number - settings: timer.option.AllOption + settings: tt4b.option.AllOption } /** * Export all settings to JSON file */ export async function exportSettings(): Promise<void> { - const settings = await optionHolder.get() + const settings = await getOption() const exportData: ExportedSettings = { - version: '1.0', + version: chrome.runtime.getManifest().version, timestamp: Date.now(), settings, } @@ -43,18 +43,18 @@ export async function importSettings(jsonString: string): Promise<void> { const validatedSettings = await validateAndMergeSettings(importData.settings) // Set the imported settings - await optionHolder.set(validatedSettings) + await setOption(validatedSettings as Partial<tt4b.option.AllOption>) } /** * Validate imported settings and merge with defaults to ensure all required fields exist */ -async function validateAndMergeSettings(importedSettings: Partial<timer.option.AllOption>): Promise<timer.option.AllOption> { +async function validateAndMergeSettings(importedSettings: Partial<tt4b.option.AllOption>): Promise<tt4b.option.AllOption> { // Get current user settings as defaults instead of default options - const defaults = await optionHolder.get() + const current = await getOption() // Delete client name delete importedSettings['clientName'] - return mergeObject(defaults, importedSettings) + return mergeObject(current ?? {}, importedSettings) as tt4b.option.AllOption } /** diff --git a/src/pages/app/components/Option/index.tsx b/src/pages/app/components/Option/index.tsx index 02c7037c9..184c4a44b 100644 --- a/src/pages/app/components/Option/index.tsx +++ b/src/pages/app/components/Option/index.tsx @@ -4,40 +4,34 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { MediaSize, useMediaSize } from "@hooks" +import { MediaSize, useMediaSize } from '@hooks' import { ElScrollbar } from 'element-plus' import { defineComponent, ref, type Ref, type StyleValue } from "vue" -import { type JSX } from "vue/jsx-runtime" -import { type OptionCategory, type OptionInstance } from "./common" -import AccessibilityOption from "./components/AccessibilityOption" -import AppearanceOption from "./components/AppearanceOption" -import BackupOption from './components/BackupOption' -import LimitOption from './components/LimitOption' -import PopupOption from "./components/PopupOption" -import StatisticsOption from "./components/StatisticsOption" +import type { JSX } from "vue/jsx-runtime" +import { Accessibility, Appearance, Backup, type CategoryInstance, Limit, Notification, Tracking } from './categories' import Select from "./Select" -import './style.sass' import Tabs from "./Tabs" +import type { OptionCategory } from "./useCategory" const _default = defineComponent(() => { - const paneRefMap: Record<OptionCategory, Ref<OptionInstance | undefined>> = { + const paneRefMap: Record<OptionCategory, Ref<CategoryInstance | undefined>> = { appearance: ref(), - statistics: ref(), - popup: ref(), + tracking: ref(), backup: ref(), - dailyLimit: ref(), + limit: ref(), accessibility: ref(), + notification: ref(), } const mediaSize = useMediaSize() const slots: Record<OptionCategory, () => JSX.Element> = { - appearance: () => <AppearanceOption ref={paneRefMap.appearance} />, - statistics: () => <StatisticsOption ref={paneRefMap.statistics} />, - popup: () => <PopupOption ref={paneRefMap.popup} />, - dailyLimit: () => <LimitOption ref={paneRefMap.dailyLimit} />, - accessibility: () => <AccessibilityOption ref={paneRefMap.accessibility} />, - backup: () => <BackupOption ref={paneRefMap.backup} />, + appearance: () => <Appearance ref={paneRefMap.appearance} />, + tracking: () => <Tracking ref={paneRefMap.tracking} />, + limit: () => <Limit ref={paneRefMap.limit} />, + accessibility: () => <Accessibility ref={paneRefMap.accessibility} />, + backup: () => <Backup ref={paneRefMap.backup} />, + notification: () => <Notification ref={paneRefMap.notification} />, } const handleReset = (cate: OptionCategory) => paneRefMap[cate]?.value?.reset?.() diff --git a/src/pages/app/components/Option/style.sass b/src/pages/app/components/Option/style.sass deleted file mode 100644 index 5b99267b5..000000000 --- a/src/pages/app/components/Option/style.sass +++ /dev/null @@ -1,66 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -.option-tab,.option-select-card - // Keep the reset button top-right - .el-tabs__nav - float: none !important - #tab-toolbar - position: absolute - right: 0px - .el-tabs__item - font-size: 16px - height: 43px - line-height: 43px - .el-tabs__content - margin: 22px 10px 10px 10px - font-size: 14px - .option-line - .el-input--small - height: 28px - .el-input__wrapper - height: 26px - .option-label - color: var(--el-text-color-primary) - float: left - line-height: 32px - .option-item-required - color: var(--el-color-danger) - margin-inline-end: 4px - i - margin: 0 2px - font-size: 13px !important - .el-input--small - height: 28px - .el-input__wrapper - height: 26px - .el-select - display: inline-flex - height: 28px - min-width: 120px - width: 120px - .el-select__wrapper - width: 100% - .el-date-editor--time - width: 100px - .el-input__prefix - width: 16px - margin-inline-start: 5px - .option-default - display: flex - color: var(--el-text-color-primary) - .el-tag - height: 20px - margin-inline-start: 4px -.option-select-card - .el-divider--horizontal - margin: 12px 0 - .option-label - .el-select,.el-input - margin-inline-start: 4px !important - .option-default - display: none !important diff --git a/src/pages/app/components/Option/useCategory.ts b/src/pages/app/components/Option/useCategory.ts new file mode 100644 index 000000000..641fe8ea7 --- /dev/null +++ b/src/pages/app/components/Option/useCategory.ts @@ -0,0 +1,53 @@ +import { t, type I18nKey } from '@app/locale' +import { createStringUnionGuard } from 'typescript-guard' +import { computed, type ShallowRef } from 'vue' +import { useRoute, useRouter, type LocationQuery } from 'vue-router' + +export type OptionCategory = 'appearance' | 'tracking' | 'limit' | 'accessibility' | 'backup' | 'notification' +const isCategory = createStringUnionGuard<OptionCategory>('appearance', 'tracking', 'limit', 'accessibility', 'backup', 'notification') + +const CATE_LABELS: Record<OptionCategory, I18nKey> = { + appearance: msg => msg.option.appearance.title, + tracking: msg => msg.option.tracking.title, + limit: msg => msg.base.limit, + accessibility: msg => msg.option.accessibility.title, + backup: msg => msg.option.backup.title, + notification: msg => msg.option.notification.title, +} + +const PARAM = "i" + +function parseInit(query: LocationQuery): OptionCategory | undefined { + const initialQuery = query[PARAM] + const queryVal = Array.isArray(initialQuery) ? initialQuery[0] : initialQuery + return isCategory(queryVal) ? queryVal : undefined +} + +export const useCategory = (): { + category: ShallowRef<OptionCategory> + setCategory: (value: unknown) => void + getLabel: (cate: unknown) => string | undefined +} => { + const route = useRoute() + const router = useRouter() + + const category = computed({ + set(value: OptionCategory) { + const oldQuery = route.query + const query: LocationQuery = { + ...oldQuery, + [PARAM]: value, + } + router.replace({ query }) + }, + get: () => parseInit(route.query) ?? 'appearance', + }) + + const setCategory = (value: unknown) => isCategory(value) && (category.value = value) + const getLabel = (cate: unknown) => { + const key = isCategory(cate) ? CATE_LABELS[cate] : undefined + return key ? t(key) : undefined + } + + return { category, setCategory, getLabel } +} \ No newline at end of file diff --git a/src/pages/app/components/Option/useOption.ts b/src/pages/app/components/Option/useOption.ts index 48e6d6404..438337c74 100644 --- a/src/pages/app/components/Option/useOption.ts +++ b/src/pages/app/components/Option/useOption.ts @@ -1,25 +1,31 @@ -import optionHolder from "@service/components/option-holder" -import { onBeforeMount, type Reactive, reactive, toRaw, watch } from "vue" +import { getOption, setOption } from "@api/sw/option" +import { useRequest } from '@hooks' +import { reactive, toRaw, watch } from "vue" type Options<T> = { - defaultValue: () => T - copy: (target: T, source: T) => void + defaultValue: (() => T) | T + copy: (target: T, source: Readonly<T>) => void onChange?: (newVal: T) => void } -export const useOption = <T extends object = Partial<timer.option.AllOption>>(options: Options<T>): { option: Reactive<T> } => { +type MutableKeys<T> = { + -readonly [K in keyof T]: T[K] +} + +export const useOption = <T extends object = Partial<tt4b.option.AllOption>>(options: Options<T>) => { const { defaultValue, copy, onChange } = options - const option = reactive<T>(defaultValue?.()) + const option = reactive<MutableKeys<T>>(typeof defaultValue === 'function' ? defaultValue() : structuredClone(defaultValue)) - onBeforeMount(async () => { - const currentVal = await optionHolder.get() as T + const { loading } = useRequest(async () => { + const currentVal = await getOption() as T copy(option as T, currentVal) - watch(option, async () => { - const newVal = toRaw(option) as T - await optionHolder.set(newVal) - onChange?.(newVal) - }) }) - return { option } + watch(option, async () => { + const newVal = toRaw(option) as T + !loading.value && await setOption(newVal) + onChange?.(newVal) + }) + + return { option, loading } } \ No newline at end of file diff --git a/src/pages/app/components/Report/ReportFilter/BatchDelete.tsx b/src/pages/app/components/Record/Filter/BatchDelete.tsx similarity index 62% rename from src/pages/app/components/Report/ReportFilter/BatchDelete.tsx rename to src/pages/app/components/Record/Filter/BatchDelete.tsx index 29e93490b..86a5c5b4e 100644 --- a/src/pages/app/components/Report/ReportFilter/BatchDelete.tsx +++ b/src/pages/app/components/Record/Filter/BatchDelete.tsx @@ -1,16 +1,17 @@ import { getGroup } from "@api/chrome/tabGroups" -import { type I18nKey, t } from "@app/locale" -import statDatabase from "@db/stat-database" +import { + batchDeleteStats, countGroupStatsByIds, countSiteStatsByHosts, deleteSiteStatByGroup, deleteSiteStatByHost, +} from "@api/sw/stat" +import { type I18nKey, t } from '@app/locale' import { DeleteFilled } from "@element-plus/icons-vue" -import statService from "@service/stat-service" import { isGroup, isNormalSite, isSite } from "@util/stat" -import { formatTime } from "@util/time" +import { cvtDateRange2Str, DateRange, formatTime, formatTimeYMD, getBirthday } from "@util/time" import { ElButton, ElMessage, ElMessageBox } from "element-plus" import { computed, defineComponent } from "vue" -import { useReportComponent, useReportFilter } from "../context" -import type { DisplayComponent, ReportFilterOption } from "../types" +import { useRecordComponent, useRecordFilter } from "../context" +import type { DisplayComponent, RecordFilterOption } from "../types" -async function computeBatchDeleteMsg(selected: timer.stat.Row[], mergeDate: boolean, dateRange: [Date, Date] | undefined): Promise<string> { +async function computeBatchDeleteMsg(selected: tt4b.stat.Row[], mergeDate: boolean, dateRange: DateRange): Promise<string> { const hosts: string[] = [] const groupIds: number[] = [] selected.forEach(row => { @@ -25,13 +26,15 @@ async function computeBatchDeleteMsg(selected: timer.stat.Row[], mergeDate: bool } if (!example) { // Never happen - return t(msg => msg.report.batchDelete.noSelectedMsg) + return t(msg => msg.record.batchDelete.noSelectedMsg) } let count2Delete = selected.length ?? 0 if (mergeDate) { // All the items - const siteCount = hosts.length ? await statService.countSiteByHosts(hosts, dateRange) : 0 - const groupCount = groupIds.length ? await statService.countGroupByIds(groupIds, dateRange) : 0 + const [start, end] = dateRange instanceof Date ? [dateRange,] : dateRange ?? [] + const date: [string?, string?] = [start && formatTimeYMD(start), end && formatTimeYMD(end)] + const siteCount = hosts.length ? await countSiteStatsByHosts(hosts, date) : 0 + const groupCount = groupIds.length ? await countGroupStatsByIds(groupIds, date) : 0 count2Delete = siteCount + groupCount } const i18nParam: Record<string, string | number | undefined> = { @@ -48,23 +51,23 @@ async function computeBatchDeleteMsg(selected: timer.stat.Row[], mergeDate: bool } let key: I18nKey | undefined = undefined - const hasDateRange = dateRange?.length === 2 && (dateRange[0] || dateRange[1]) - if (!hasDateRange) { + let [startDate, endDate] = dateRange instanceof Date ? [dateRange,] : dateRange ?? [] + if (!startDate && !endDate) { // Delete all - key = msg => msg.report.batchDelete.confirmMsgAll + key = msg => msg.record.batchDelete.confirmMsgAll } else { const dateFormat = t(msg => msg.calendar.dateFormat) - const startDate = dateRange[0] - const endDate = dateRange[1] + startDate = startDate ?? getBirthday() + endDate = endDate ?? new Date() const start = formatTime(startDate, dateFormat) const end = formatTime(endDate, dateFormat) if (start === end) { // Single date - key = msg => msg.report.batchDelete.confirmMsg + key = msg => msg.record.batchDelete.confirmMsg i18nParam.date = start } else { // Date range - key = msg => msg.report.batchDelete.confirmMsgRange + key = msg => msg.record.batchDelete.confirmMsgRange i18nParam.start = start i18nParam.end = end } @@ -72,19 +75,19 @@ async function computeBatchDeleteMsg(selected: timer.stat.Row[], mergeDate: bool return t(key, i18nParam) } -async function handleBatchDelete(displayComp: DisplayComponent | undefined, filter: ReportFilterOption) { +async function handleBatchDelete(displayComp: DisplayComponent | undefined, filter: RecordFilterOption) { if (!displayComp) return - const selected: timer.stat.Row[] = displayComp?.getSelected?.() || [] + const selected = displayComp?.getSelected?.() ?? [] if (!selected?.length) { - ElMessage.info(t(msg => msg.report.batchDelete.noSelectedMsg)) + ElMessage.info(t(msg => msg.record.batchDelete.noSelectedMsg)) return } const { dateRange, mergeDate } = filter ElMessageBox({ message: await computeBatchDeleteMsg(selected, mergeDate, dateRange), type: "warning", - confirmButtonText: t(msg => msg.button.okey), + confirmButtonText: t(msg => msg.button.okay), showCancelButton: true, cancelButtonText: t(msg => msg.button.dont), // Cant close this on press ESC @@ -101,27 +104,27 @@ async function handleBatchDelete(displayComp: DisplayComponent | undefined, filt }) } -async function deleteBatch(selected: timer.stat.Row[], mergeDate: boolean, dateRange: [Date, Date] | undefined) { +async function deleteBatch(selected: tt4b.stat.Row[], mergeDate: boolean, dateRange: DateRange) { if (mergeDate) { // Delete according to the date range - const [start, end] = dateRange ?? [] + const date = cvtDateRange2Str(dateRange) for (const row of selected) { - isNormalSite(row) && await statDatabase.deleteByUrlBetween(row.siteKey.host, start, end) - isGroup(row) && await statDatabase.deleteByGroupBetween(row.groupKey, start, end) + isNormalSite(row) && await deleteSiteStatByHost(row.siteKey.host, date) + isGroup(row) && await deleteSiteStatByGroup(row.groupKey, date) } } else { // If not merge date, batch delete - await statService.batchDelete(selected) + await batchDeleteStats(selected) } } const BatchDelete = defineComponent(() => { - const filter = useReportFilter() + const filter = useRecordFilter() const disabled = computed(() => { const { siteMerge } = filter return !!siteMerge && siteMerge !== 'group' }) - const comp = useReportComponent() + const comp = useRecordComponent() return () => ( <ElButton diff --git a/src/pages/app/components/Report/ReportFilter/DownloadFile.tsx b/src/pages/app/components/Record/Filter/DownloadFile.tsx similarity index 84% rename from src/pages/app/components/Report/ReportFilter/DownloadFile.tsx rename to src/pages/app/components/Record/Filter/DownloadFile.tsx index be20100e6..7c84e13c9 100644 --- a/src/pages/app/components/Report/ReportFilter/DownloadFile.tsx +++ b/src/pages/app/components/Record/Filter/DownloadFile.tsx @@ -5,13 +5,13 @@ * https://opensource.org/licenses/MIT */ -import { useCategories } from "@app/context" +import { useCategory } from "@app/context" import { Download } from "@element-plus/icons-vue" -import { useTabGroups } from "@hooks/useTabGroups" +import { useTabGroups } from "@hooks" import { ElButton, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon } from "element-plus" import { defineComponent } from "vue" import { queryAll } from "../common" -import { useReportFilter, useReportSort } from "../context" +import { useRecordFilter, useRecordSort } from "../context" import { exportCsv, exportJson, ExportParam } from "../file-export" import { ICON_BTN_STYLE } from "./common" @@ -19,16 +19,16 @@ const ALL_FILE_FORMATS = ["json", "csv"] as const type FileFormat = typeof ALL_FILE_FORMATS[number] const DownloadFile = defineComponent(() => { - const filter = useReportFilter() - const sort = useReportSort() - const { categories } = useCategories() + const filter = useRecordFilter() + const sort = useRecordSort() + const cate = useCategory() const { groupMap } = useTabGroups() const handleDownload = async (format: FileFormat) => { const rows = await queryAll(filter, sort.value) const param: ExportParam = { rows, filter, - categories: categories.value, + categories: cate.all, groupMap: groupMap.value, } format === 'json' && exportJson(param) diff --git a/src/pages/app/components/Report/ReportFilter/MergeFilterItem.tsx b/src/pages/app/components/Record/Filter/MergeFilterItem.tsx similarity index 65% rename from src/pages/app/components/Report/ReportFilter/MergeFilterItem.tsx rename to src/pages/app/components/Record/Filter/MergeFilterItem.tsx index 7e2b38a86..809cceaaa 100644 --- a/src/pages/app/components/Report/ReportFilter/MergeFilterItem.tsx +++ b/src/pages/app/components/Record/Filter/MergeFilterItem.tsx @@ -1,29 +1,34 @@ -import { t } from "@app/locale" +import { useCategory } from '@app/context' +import { t } from '@app/locale' import { Calendar, Collection, Link, Menu } from "@element-plus/icons-vue" +import { useSiteMerge } from '@hooks' import Flex from "@pages/components/Flex" -import { IS_ANDROID } from "@util/constant/environment" -import { ALL_MERGE_METHODS } from "@util/merge" import { ElCheckboxButton, ElCheckboxGroup, ElIcon, ElText, ElTooltip } from "element-plus" import { computed, defineComponent, StyleValue } from "vue" import { type JSX } from "vue/jsx-runtime" -import { useReportFilter } from "../context" -import type { ReportFilterOption } from "../types" +import { useRecordFilter } from "../context" -const METHOD_ICONS: Record<timer.stat.MergeMethod, JSX.Element> = { +const METHOD_ICONS: Record<tt4b.stat.MergeMethod, JSX.Element> = { cate: <Collection />, date: <Calendar />, domain: <Link />, group: <Menu />, } -const METHODS = IS_ANDROID ? ALL_MERGE_METHODS.filter(m => m !== 'group') : ALL_MERGE_METHODS - -const MergeFilterItem = defineComponent<{ hideCate?: boolean }>(props => { - const filter = useReportFilter() +const MergeFilterItem = defineComponent<{}>(() => { + const filter = useRecordFilter() + const cate = useCategory() + const { mergeItems: siteMergeItems } = useSiteMerge({ + onGroupDisabled: () => mergeMethod.value.filter(v => v !== 'group') + }) + const mergeItems = computed(() => { + const res = ['date', ...siteMergeItems.value] satisfies tt4b.stat.MergeMethod[] + return cate.enabled ? res : res.filter(m => m !== 'cate') + }) const mergeMethod = computed({ get: () => { const { mergeDate, siteMerge } = filter - const res: timer.stat.MergeMethod[] = [] + const res: tt4b.stat.MergeMethod[] = [] mergeDate && (res.push('date')) siteMerge && (res.push(siteMerge)) return res @@ -31,7 +36,7 @@ const MergeFilterItem = defineComponent<{ hideCate?: boolean }>(props => { set: val => { filter.mergeDate = val.includes('date') const oldSiteMerge = filter.siteMerge - const newSiteMerge = (['cate', 'domain', 'group'] satisfies ReportFilterOption['siteMerge'][]) + const newSiteMerge = siteMergeItems.value .filter(t => val.includes(t)) .sort(t => oldSiteMerge?.includes(t) ? 1 : -1)[0] filter.siteMerge = newSiteMerge @@ -46,9 +51,9 @@ const MergeFilterItem = defineComponent<{ hideCate?: boolean }>(props => { </ElText> <ElCheckboxGroup modelValue={mergeMethod.value} - onChange={val => mergeMethod.value = val as timer.stat.MergeMethod[]} + onChange={val => mergeMethod.value = val as tt4b.stat.MergeMethod[]} > - {METHODS.filter(m => m !== 'cate' || !props.hideCate).map(method => ( + {mergeItems.value.map(method => ( <ElCheckboxButton value={method}> <ElTooltip content={t(msg => msg.shared.merge.mergeMethod[method])} offset={20} placement="top"> <span style={{ margin: '-6px' } satisfies StyleValue}> @@ -58,7 +63,7 @@ const MergeFilterItem = defineComponent<{ hideCate?: boolean }>(props => { </ElCheckboxButton> ))} </ElCheckboxGroup> - </Flex > + </Flex> ) }, { props: ['hideCate'] }) diff --git a/src/pages/app/components/Report/ReportFilter/RemoteClient.tsx b/src/pages/app/components/Record/Filter/RemoteClient.tsx similarity index 73% rename from src/pages/app/components/Report/ReportFilter/RemoteClient.tsx rename to src/pages/app/components/Record/Filter/RemoteClient.tsx index 505872850..42bd2223e 100644 --- a/src/pages/app/components/Report/ReportFilter/RemoteClient.tsx +++ b/src/pages/app/components/Record/Filter/RemoteClient.tsx @@ -5,19 +5,19 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { checkAuth } from '@api/sw/backup' +import { t } from '@app/locale' import { UploadFilled } from "@element-plus/icons-vue" -import { useRequest } from "@hooks" -import statService from "@service/stat-service" +import { useRequest } from '@hooks' import { ElButton, ElIcon, ElTooltip } from "element-plus" import { computed, defineComponent } from "vue" -import { useReportFilter } from "../context" +import { useRecordFilter } from "../context" import { ICON_BTN_STYLE } from "./common" const _default = defineComponent(() => { - const filter = useReportFilter() - const content = computed(() => t(msg => msg.report.remoteReading[filter.readRemote ? 'on' : 'off'])) - const { data: visible } = useRequest(() => statService.canReadRemote(), { defaultValue: false }) + const filter = useRecordFilter() + const content = computed(() => t(msg => msg.record.remoteReading[filter.readRemote ? 'on' : 'off'])) + const { data: visible } = useRequest(() => checkAuth().then(errMsg => !errMsg), { defaultValue: false }) return () => ( <ElTooltip trigger="hover" placement="bottom-start" effect="dark" content={content.value}> diff --git a/src/pages/app/components/Report/ReportFilter/common.ts b/src/pages/app/components/Record/Filter/common.ts similarity index 100% rename from src/pages/app/components/Report/ReportFilter/common.ts rename to src/pages/app/components/Record/Filter/common.ts diff --git a/src/pages/app/components/Report/ReportFilter/index.tsx b/src/pages/app/components/Record/Filter/index.tsx similarity index 65% rename from src/pages/app/components/Report/ReportFilter/index.tsx rename to src/pages/app/components/Record/Filter/index.tsx index be4494f2e..62828e70e 100644 --- a/src/pages/app/components/Report/ReportFilter/index.tsx +++ b/src/pages/app/components/Record/Filter/index.tsx @@ -9,37 +9,31 @@ import CategoryFilter from "@app/components/common/filter/CategoryFilter" import DateRangeFilterItem from "@app/components/common/filter/DateRangeFilterItem" import InputFilterItem from '@app/components/common/filter/InputFilterItem' import TimeFormatFilterItem from "@app/components/common/filter/TimeFormatFilterItem" -import { t } from "@app/locale" +import { t } from '@app/locale' import Flex from "@pages/components/Flex" -import { type ElementDatePickerShortcut } from "@pages/element-ui/date" +import { ElDatePickerShortcut } from '@pages/element-ui/types' import { daysAgo } from "@util/time" import { defineComponent } from "vue" -import { useReportFilter } from "../context" +import { useRecordFilter } from "../context" import BatchDelete from "./BatchDelete" import DownloadFile from "./DownloadFile" import MergeFilterItem from "./MergeFilterItem" import RemoteClient from "./RemoteClient" -function datePickerShortcut(text: string, agoOfStart?: number, agoOfEnd?: number): ElementDatePickerShortcut { - const value = daysAgo(agoOfStart || 0, agoOfEnd || 0) - return { text, value } -} +const shortcut = (text: string, agoOfStart?: number, agoOfEnd?: number): ElDatePickerShortcut => ( + { text, value: daysAgo(agoOfStart ?? 0, agoOfEnd ?? 0) } +) -const dateShortcuts: ElementDatePickerShortcut[] = [ - datePickerShortcut(t(msg => msg.calendar.range.today)), - datePickerShortcut(t(msg => msg.calendar.range.yesterday), 1, 1), - datePickerShortcut(t(msg => msg.calendar.range.lastDays, { n: 7 }), 7), - datePickerShortcut(t(msg => msg.calendar.range.lastDays, { n: 30 }), 30), - datePickerShortcut(t(msg => msg.calendar.range.lastDays, { n: 60 }), 60), +const dateShortcuts: ElDatePickerShortcut[] = [ + shortcut(t(msg => msg.calendar.range.today)), + shortcut(t(msg => msg.calendar.range.yesterday), 1, 1), + shortcut(t(msg => msg.calendar.range.lastDays, { n: 7 }), 7), + shortcut(t(msg => msg.calendar.range.lastDays, { n: 30 }), 30), + shortcut(t(msg => msg.calendar.range.lastDays, { n: 60 }), 60), ] -type Props = { - hideCateFilter: boolean, -} - -const _default = defineComponent<Props>(props => { - const { hideCateFilter } = props - const filter = useReportFilter() +const _default = defineComponent<{}>(() => { + const filter = useRecordFilter() return () => ( <Flex justify="space-between" width="100%" gap={10} wrap> @@ -53,7 +47,7 @@ const _default = defineComponent<Props>(props => { endPlaceholder={t(msg => msg.calendar.label.endDate)} disabledDate={(date: Date | number) => new Date(date) > new Date()} shortcuts={dateShortcuts} - modelValue={filter.dateRange} + modelValue={(filter.dateRange instanceof Date ? [filter.dateRange] : (filter.dateRange ?? [])) as [Date?, Date?]} onChange={val => filter.dateRange = val} /> <CategoryFilter @@ -65,7 +59,7 @@ const _default = defineComponent<Props>(props => { modelValue={filter.timeFormat} onChange={val => filter.timeFormat = val} /> - <MergeFilterItem hideCate={hideCateFilter} /> + <MergeFilterItem /> </Flex> <Flex gap={4}> <BatchDelete /> @@ -74,6 +68,6 @@ const _default = defineComponent<Props>(props => { </Flex> </Flex> ) -}, { props: ['hideCateFilter'] }) +}) export default _default \ No newline at end of file diff --git a/src/pages/app/components/Report/ReportList/Item.tsx b/src/pages/app/components/Record/List/Item.tsx similarity index 71% rename from src/pages/app/components/Report/ReportList/Item.tsx rename to src/pages/app/components/Record/List/Item.tsx index 883b096b9..94e4f0214 100644 --- a/src/pages/app/components/Report/ReportList/Item.tsx +++ b/src/pages/app/components/Record/List/Item.tsx @@ -1,25 +1,42 @@ -import HostAlert from "@app/components/common/HostAlert" -import PopupConfirmButton from "@app/components/common/PopupConfirmButton" -import TooltipWrapper from "@app/components/common/TooltipWrapper" -import { cvt2LocaleTime, periodFormatter } from "@app/util/time" + +import HostAlert from '@app/components/common/HostAlert' +import PopupConfirmButton from '@app/components/common/PopupConfirmButton' +import { cvt2LocaleTime, periodFormatter } from '@app/util/time' import { Calendar, Delete, Mouse, QuartzWatch } from "@element-plus/icons-vue" -import { useTabGroups } from "@hooks/useTabGroups" +import { css } from '@emotion/css' +import { useTabGroups } from "@hooks" +import Flex from '@pages/components/Flex' +import TooltipWrapper from '@pages/components/TooltipWrapper' import { getComposition, isGroup, isNormalSite, isSite } from "@util/stat" -import { Effect, ElCheckbox, ElDivider, ElIcon, ElTag } from "element-plus" -import { computed, defineComponent, ref, watch } from "vue" +import { Effect, ElCheckbox, ElDivider, ElIcon, ElTag, useNamespace } from "element-plus" +import { computed, defineComponent, ref, StyleValue, watch } from "vue" import { computeDeleteConfirmMsg, handleDelete } from "../common" -import CompositionTable from "../CompositionTable" -import { useReportFilter } from "../context" -import TooltipSiteList from "../ReportTable/columns/TooltipSiteList" +import CompositionTable from "../components/CompositionTable" +import TooltipSiteList from "../components/TooltipSiteList" +import { useRecordFilter } from "../context" type Props = { - value: timer.stat.Row + value: tt4b.stat.Row onSelectedChange: ArgCallback<boolean> - onDelete?: ArgCallback<timer.stat.Row> + onDelete?: ArgCallback<tt4b.stat.Row> +} + +const useContentStyle = () => { + const tagNs = useNamespace('tag') + return css` + & .${tagNs.b()} { + padding: 0 4px; + } + & .${tagNs.e('content')} { + display: flex; + align-items: center; + gap: 2px; + } + ` } const _default = defineComponent<Props>(props => { - const filter = useReportFilter() + const filter = useRecordFilter() const { groupMap } = useTabGroups() const formatter = (focus: number): string => periodFormatter(focus, { format: filter?.timeFormat }) const { date, focus, time } = props.value @@ -32,15 +49,19 @@ const _default = defineComponent<Props>(props => { await handleDelete(props.value, filter) props.onDelete?.(props.value) } + + const contentCls = useContentStyle() + return () => ( - <div class="report-item"> - <div class="report-item-head"> - <div class="report-item-title"> + <div> + <Flex justify='space-between'> + <Flex inline align='center' gap={2}> <ElCheckbox v-show={canDelete.value} size="small" value={selected.value} onChange={val => selected.value = !!val} + style={{ height: '100%' } satisfies StyleValue} /> {isSite(props.value) && ( <TooltipWrapper @@ -50,7 +71,7 @@ const _default = defineComponent<Props>(props => { trigger="click" usePopover={props.value.siteKey.type === 'merged'} v-slots={{ - content: () => <TooltipSiteList modelValue={mergedRows} />, + content: () => <TooltipSiteList modelValue={mergedRows as tt4b.stat.SiteRow[]} />, }} > <HostAlert @@ -60,20 +81,20 @@ const _default = defineComponent<Props>(props => { /> </TooltipWrapper> )} - </div> + </Flex> {canDelete.value && ( <PopupConfirmButton buttonIcon={Delete} buttonType="danger" + buttonStyle={{ padding: 0 }} confirmText={computeDeleteConfirmMsg(props.value, filter, groupMap.value)} - onConfirm={onDelete} text /> )} - </div> + </Flex> <ElDivider style={{ margin: "5px 0" }} /> - <div class="report-item-content"> + <Flex wrap gap={5} justify="space-between" class={contentCls}> <ElTag v-show={!filter?.mergeDate} type="info" size="small"> <ElIcon><Calendar /></ElIcon> <span>{cvt2LocaleTime(date)}</span> @@ -106,7 +127,7 @@ const _default = defineComponent<Props>(props => { <span>{time ?? 0}</span> </ElTag> </TooltipWrapper> - </div> + </Flex> </div> ) }, { props: ['onDelete', 'onSelectedChange', 'value'] }) diff --git a/src/pages/app/components/Record/List/index.tsx b/src/pages/app/components/Record/List/index.tsx new file mode 100644 index 000000000..5f1a37652 --- /dev/null +++ b/src/pages/app/components/Record/List/index.tsx @@ -0,0 +1,83 @@ +import { t } from '@app/locale' +import { Pointer } from '@element-plus/icons-vue' +import { css } from '@emotion/css' +import { useScrollRequest } from '@hooks' +import { getHost } from "@util/stat" +import { ElButton, ElCard, ElScrollbar, useNamespace } from "element-plus" +import { defineComponent, ref } from "vue" +import { queryPage } from "../common" +import { useRecordFilter } from "../context" +import type { DisplayComponent } from "../types" +import Item from "./Item" + +const useStyle = () => { + const cardNs = useNamespace('card') + const listCls = css` + width: 100%; + display: grid; + gap: .6em; + grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); + + & .${cardNs.e('body')} { + padding: 15px; + } + ` + + const infoCls = css` + height: 20px; + width: 100%; + text-align: center; + color: var(--el-text-color-regular); + ` + + return [listCls, infoCls] +} + +const _default = defineComponent<{}>((_, ctx) => { + const filterOption = useRecordFilter() + const { data, loading, loadMore, end, reset } = useScrollRequest(async (num, size) => { + const pagination = await queryPage( + filterOption, + { order: "descending", prop: "focus" }, + { num, size }, + ) + return pagination.list + }, { resetDeps: () => ({ ...filterOption }) }) + + const selected = ref<number[]>([]) + + ctx.expose({ + getSelected: () => selected.value.map(idx => data.value[idx]).filter(i => !!i), + refresh: reset, + } satisfies DisplayComponent) + + const handleSelectedChange = (val: boolean, idx: number) => { + const newSelected = selected.value.filter(v => v !== idx) + val && newSelected.push(idx) + return selected.value = newSelected + } + const [listCls, infoCls] = useStyle() + + return () => ( + <div> + <ElScrollbar viewClass={listCls} {...{ onEndReached: loadMore }}> + {data.value.map((row, idx) => ( + <ElCard> + <Item + key={`row-${getHost(row)}-${idx}`} + value={row} + onSelectedChange={val => handleSelectedChange(val, idx)} + onDelete={() => reset()} + /> + </ElCard> + ))} + {end.value + ? <p class={infoCls}>{t(msg => msg.record.noMore)}</p> + : <ElButton text onClick={loadMore} icon={Pointer} loading={loading.value}>More</ElButton> + } + </ElScrollbar> + </div> + ) +}) + +export default _default \ No newline at end of file diff --git a/src/pages/app/components/Report/ReportTable/columns/CateColumn.tsx b/src/pages/app/components/Record/Table/columns/CateColumn.tsx similarity index 55% rename from src/pages/app/components/Report/ReportTable/columns/CateColumn.tsx rename to src/pages/app/components/Record/Table/columns/CateColumn.tsx index f97f12a80..7aef8a460 100644 --- a/src/pages/app/components/Report/ReportTable/columns/CateColumn.tsx +++ b/src/pages/app/components/Record/Table/columns/CateColumn.tsx @@ -1,29 +1,19 @@ -import CategoryEditable from "@app/components/common/category/CategoryEditable" -import { useCategories } from "@app/context" -import { t } from "@app/locale" +import CategoryEditable from "@app/components/common/Category/Editable" +import TooltipSiteList from "@app/components/Record/components/TooltipSiteList" +import { useCategory } from '@app/context' +import { t } from '@app/locale' import Flex from "@pages/components/Flex" -import { type ElTableRowScope } from "@pages/element-ui/table" -import { CATE_NOT_SET_ID, SiteMap } from "@util/site" +import { CATE_NOT_SET_ID } from "@util/site" import { getRelatedCateId, identifyStatKey, isCate, isGroup, isSite } from "@util/stat" -import { Effect, ElTableColumn, ElText, ElTooltip } from "element-plus" +import { Effect, ElTableColumn, ElText, ElTooltip, type RenderRowData } from "element-plus" import { defineComponent } from "vue" -import TooltipSiteList from "./TooltipSiteList" -const renderMerged = (cateId: number, categories: timer.site.Cate[], merged: timer.stat.SiteRow[]) => { - let cateName: string - let isNotSet = false - const siteMap = new SiteMap<string>() - merged.forEach(row => isSite(row) && siteMap.put(row.siteKey, row.iconUrl)) +const renderMerged = (cateId: number, categories: tt4b.site.Cate[], merged: tt4b.stat.SiteRow[]) => { + const [cateName, isNotSet] = CATE_NOT_SET_ID === cateId + ? [t(msg => msg.shared.cate.notSet), true] + : [categories.find(c => c.id === cateId)?.name, false] - if (cateId === CATE_NOT_SET_ID) { - cateName = t(msg => msg.shared.cate.notSet) - isNotSet = true - } else { - const current = categories?.find(c => c.id === cateId) - if (!current) return null - cateName = current?.name - } - return ( + return cateName ? ( <ElTooltip effect={Effect.LIGHT} offset={10} @@ -38,28 +28,28 @@ const renderMerged = (cateId: number, categories: timer.site.Cate[], merged: tim ), }} /> - ) + ) : null } type Props = { - onChange: (key: timer.site.SiteKey, newCate: number | undefined) => void, + onChange: (key: tt4b.site.SiteKey, newCate: number | undefined) => void, } const CateColumn = defineComponent<Props>(props => { - const { categories } = useCategories() - return () => ( + const cate = useCategory() + return () => cate.enabled ? ( <ElTableColumn label={t(msg => msg.siteManage.column.cate)} minWidth={140}> - {({ row }: ElTableRowScope<timer.stat.Row>) => { + {({ row }: RenderRowData<tt4b.stat.Row>) => { if (!row || isGroup(row)) return const { mergedRows } = row const cateId = getRelatedCateId(row) return ( <Flex key={`${identifyStatKey(row)}_${cateId}`} justify="center"> - {isCate(row) && renderMerged(row.cateKey, categories.value, mergedRows ?? [])} + {isCate(row) && renderMerged(row.cateKey, cate.all, (mergedRows ?? []) as tt4b.stat.SiteRow[])} {isSite(row) && ( <CategoryEditable siteKey={row.siteKey} - cateId={cateId} + modelValue={cateId} onChange={newCateId => props.onChange(row.siteKey, newCateId)} /> )} @@ -67,7 +57,7 @@ const CateColumn = defineComponent<Props>(props => { ) }} </ElTableColumn> - ) + ) : null }, { props: ['onChange'] }) export default CateColumn \ No newline at end of file diff --git a/src/pages/app/components/Report/ReportTable/columns/GroupColumn.tsx b/src/pages/app/components/Record/Table/columns/GroupColumn.tsx similarity index 74% rename from src/pages/app/components/Report/ReportTable/columns/GroupColumn.tsx rename to src/pages/app/components/Record/Table/columns/GroupColumn.tsx index 4236d3f36..fc30e3664 100644 --- a/src/pages/app/components/Report/ReportTable/columns/GroupColumn.tsx +++ b/src/pages/app/components/Record/Table/columns/GroupColumn.tsx @@ -1,9 +1,8 @@ -import { cvtGroupColor } from "@api/chrome/tabGroups" -import { t } from "@app/locale" -import { useTabGroups } from "@hooks/useTabGroups" -import { type ElTableRowScope } from "@pages/element-ui/table" +import { t } from '@app/locale' +import { useTabGroups } from "@hooks" +import { cvtGroupColor } from '@pages/util/style' import { isGroup } from "@util/stat" -import { ElTableColumn, ElTag } from "element-plus" +import { ElTableColumn, ElTag, type RenderRowData } from "element-plus" import { defineComponent, StyleValue } from "vue" const GroupColumn = defineComponent(() => { @@ -14,7 +13,7 @@ const GroupColumn = defineComponent(() => { align="center" label={t(msg => msg.item.group)} width={140} - v-slots={({ row }: ElTableRowScope<timer.stat.Row>) => { + v-slots={({ row }: RenderRowData<tt4b.stat.Row>) => { if (!isGroup(row)) return const { groupKey } = row const { color, title } = groupMap.value[groupKey] ?? {} diff --git a/src/pages/app/components/Report/ReportTable/columns/HostColumn.tsx b/src/pages/app/components/Record/Table/columns/HostColumn.tsx similarity index 55% rename from src/pages/app/components/Report/ReportTable/columns/HostColumn.tsx rename to src/pages/app/components/Record/Table/columns/HostColumn.tsx index 4f865532a..4f2ecc5dc 100644 --- a/src/pages/app/components/Report/ReportTable/columns/HostColumn.tsx +++ b/src/pages/app/components/Record/Table/columns/HostColumn.tsx @@ -5,30 +5,29 @@ * https://opensource.org/licenses/MIT */ -import HostAlert from "@app/components/common/HostAlert" -import TooltipWrapper from "@app/components/common/TooltipWrapper" -import { t } from "@app/locale" +import HostAlert from '@app/components/common/HostAlert' +import TooltipSiteList from '@app/components/Record/components/TooltipSiteList' +import { useRecordFilter } from '@app/components/Record/context' +import type { RecordSort } from '@app/components/Record/types' +import { t } from '@app/locale' import Flex from "@pages/components/Flex" -import { type ElTableRowScope } from "@pages/element-ui/table" +import TooltipWrapper from '@pages/components/TooltipWrapper' import { identifySiteKey } from "@util/site" import { isGroup, isSite } from "@util/stat" -import { Effect, ElTableColumn } from "element-plus" +import { Effect, ElTableColumn, type RenderRowData } from "element-plus" import { defineComponent } from "vue" -import { useReportFilter } from "../../context" -import type { ReportSort } from "../../types" -import TooltipSiteList from "./TooltipSiteList" const _default = defineComponent(() => { - const filter = useReportFilter() + const filter = useRecordFilter() return () => ( <ElTableColumn - prop={'host' satisfies ReportSort['prop']} + prop={'host' satisfies RecordSort['prop']} label={t(msg => msg.item.host)} minWidth={210} sortable="custom" align="center" > - {({ row }: ElTableRowScope<timer.stat.Row>) => ( + {({ row }: RenderRowData<tt4b.stat.Row>) => ( <Flex key={isSite(row) ? identifySiteKey(row.siteKey) : ''} justify="center"> <TooltipWrapper usePopover={filter?.siteMerge === 'domain'} @@ -36,13 +35,17 @@ const _default = defineComponent(() => { offset={10} placement="left" v-slots={{ - content: () => <TooltipSiteList modelValue={isGroup(row) ? undefined : row.mergedRows} />, + content: () => ( + <TooltipSiteList + modelValue={isGroup(row) ? undefined : (row.mergedRows as tt4b.stat.SiteRow[] | undefined)} + /> + ), default: () => isSite(row) ? <HostAlert value={row.siteKey} iconUrl={row.iconUrl} /> : '', }} /> </Flex> )} - </ElTableColumn > + </ElTableColumn> ) }) diff --git a/src/pages/app/components/Report/ReportTable/columns/OperationColumn.tsx b/src/pages/app/components/Record/Table/columns/OperationColumn.tsx similarity index 59% rename from src/pages/app/components/Report/ReportTable/columns/OperationColumn.tsx rename to src/pages/app/components/Record/Table/columns/OperationColumn.tsx index acb26fc05..9f8d2134e 100644 --- a/src/pages/app/components/Report/ReportTable/columns/OperationColumn.tsx +++ b/src/pages/app/components/Record/Table/columns/OperationColumn.tsx @@ -4,25 +4,23 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import type { AnalysisQuery } from "@app/components/Analysis/context" -import PopupConfirmButton from "@app/components/common/PopupConfirmButton" -import { t } from "@app/locale" -import { ANALYSIS_ROUTE } from "@app/router/constants" +import { type AppAnalysisQuery } from '@/shared/route' +import { addWhitelist, deleteWhitelist, listWhitelist } from "@api/sw/whitelist" +import PopupConfirmButton from '@app/components/common/PopupConfirmButton' +import { computeDeleteConfirmMsg, handleDelete } from '@app/components/Record/common' +import { useRecordFilter } from '@app/components/Record/context' +import { t } from '@app/locale' +import { ANALYSIS_ROUTE } from '@app/router/constants' import { Delete, Open, Plus, Stopwatch } from "@element-plus/icons-vue" -import { useRequest } from "@hooks" -import { useTabGroups } from "@hooks/useTabGroups" +import { useManualRequest, useRequest, useTabGroups } from '@hooks' import { locale } from "@i18n" -import { type ElTableRowScope } from "@pages/element-ui/table" -import whitelistService from "@service/whitelist/service" import { CATE_NOT_SET_ID } from "@util/site" import { isCate, isGroup, isNormalSite, isSite } from "@util/stat" -import { ElButton, ElMessage, ElTableColumn } from "element-plus" +import { ElButton, ElMessage, ElTableColumn, type RenderRowData } from "element-plus" import { computed, defineComponent } from "vue" import { useRouter } from "vue-router" -import { computeDeleteConfirmMsg, handleDelete } from "../../common" -import { useReportFilter } from "../../context" -const LOCALE_WIDTH: { [locale in timer.Locale]: number } = { +const LOCALE_WIDTH: { [locale in tt4b.Locale]: number } = { en: 330, zh_CN: 290, ja: 360, @@ -34,39 +32,45 @@ const LOCALE_WIDTH: { [locale in timer.Locale]: number } = { fr: 330, ru: 350, ar: 320, + tr: 320, + pl: 320, + it: 320, } type Props = { - onDelete?: ArgCallback<timer.stat.Row> + onDelete?: ArgCallback<tt4b.stat.Row> } -const analysisVisible = (row: timer.stat.Row) => { +const analysisVisible = (row: tt4b.stat.Row) => { if (isGroup(row)) return false if (isCate(row)) return row.cateKey !== CATE_NOT_SET_ID return true } -const deleteVisible = (row: timer.stat.Row) => { +const deleteVisible = (row: tt4b.stat.Row) => { if (isCate(row)) return false if (isSite(row) && row.siteKey.type === 'merged') return false return true } const _default = defineComponent<Props>(({ onDelete }) => { - const filter = useReportFilter() + const filter = useRecordFilter() const { groupMap } = useTabGroups() const width = computed(() => { const siteMerge = filter.siteMerge return !siteMerge || siteMerge === 'group' ? LOCALE_WIDTH[locale] : 110 }) const router = useRouter() - const { - data: whitelist, - refresh: refreshWhitelist, - } = useRequest(() => whitelistService.listAll(), { defaultValue: [] }) + const { data: whitelist, refresh: refreshWhitelist } = useRequest(listWhitelist, { defaultValue: [] }) + const onWhitelistSuccess = () => { + refreshWhitelist() + ElMessage.success(t(msg => msg.operation.successMsg)) + } + const { refresh: onAddWhitelist } = useManualRequest(addWhitelist, { onSuccess: onWhitelistSuccess }) + const { refresh: onRemoveWhitelist } = useManualRequest(deleteWhitelist, { onSuccess: onWhitelistSuccess }) - const jump2Analysis = (row: timer.stat.Row) => { - let query: AnalysisQuery + const jump2Analysis = (row: tt4b.stat.Row) => { + let query: AppAnalysisQuery if (isCate(row)) { query = { cateId: row.cateKey?.toString?.() } } else if (isSite(row)) { @@ -83,7 +87,7 @@ const _default = defineComponent<Props>(({ onDelete }) => { label={t(msg => msg.button.operation)} align="center" > - {({ row }: ElTableRowScope<timer.stat.Row>) => <> + {({ row }: RenderRowData<tt4b.stat.Row>) => <> {/* Analysis */} {analysisVisible(row) && ( <ElButton @@ -109,33 +113,23 @@ const _default = defineComponent<Props>(({ onDelete }) => { /> )} {/* Add 2 whitelist */} - {isNormalSite(row) && !whitelist.value?.includes(row.siteKey.host) && ( + {isNormalSite(row) && !whitelist.value.includes(row.siteKey.host) && ( <PopupConfirmButton buttonIcon={Plus} buttonType="warning" buttonText={t(msg => msg.item.operation.add2Whitelist)} - confirmText={t(msg => msg.whitelist.addConfirmMsg, { url: row.siteKey?.host })} - onConfirm={async () => { - const host = row.siteKey?.host - host && await whitelistService.add(host) - refreshWhitelist() - ElMessage.success(t(msg => msg.operation.successMsg)) - }} + confirmText={t(msg => msg.rule.white.addConfirmMsg, { url: row.siteKey?.host })} + onConfirm={() => onAddWhitelist(row.siteKey.host)} /> )} {/* Remove from whitelist */} - {isNormalSite(row) && whitelist.value?.includes(row.siteKey.host) && ( + {isNormalSite(row) && whitelist.value.includes(row.siteKey.host) && ( <PopupConfirmButton buttonIcon={Open} buttonType="primary" buttonText={t(msg => msg.button.enable)} - confirmText={t(msg => msg.whitelist.removeConfirmMsg, { url: row.siteKey?.host })} - onConfirm={async () => { - const host = row.siteKey?.host - host && await whitelistService.remove(host) - refreshWhitelist() - ElMessage.success(t(msg => msg.operation.successMsg)) - }} + confirmText={t(msg => msg.rule.white.removeConfirmMsg, { url: row.siteKey?.host })} + onConfirm={() => onRemoveWhitelist(row.siteKey.host)} /> )} </>} diff --git a/src/pages/app/components/Report/ReportTable/columns/TimeColumn.tsx b/src/pages/app/components/Record/Table/columns/TimeColumn.tsx similarity index 63% rename from src/pages/app/components/Report/ReportTable/columns/TimeColumn.tsx rename to src/pages/app/components/Record/Table/columns/TimeColumn.tsx index 0d6859a2a..b790307db 100644 --- a/src/pages/app/components/Report/ReportTable/columns/TimeColumn.tsx +++ b/src/pages/app/components/Record/Table/columns/TimeColumn.tsx @@ -5,33 +5,32 @@ * https://opensource.org/licenses/MIT */ -import TooltipWrapper from "@app/components/common/TooltipWrapper" -import { t } from "@app/locale" -import { periodFormatter } from "@app/util/time" -import { type ElTableRowScope } from "@pages/element-ui/table" +import CompositionTable from '@app/components/Record/components/CompositionTable' +import { useRecordFilter } from "@app/components/Record/context" +import type { RecordSort } from "@app/components/Record/types" +import { t } from '@app/locale' +import { periodFormatter } from '@app/util/time' +import TooltipWrapper from '@pages/components/TooltipWrapper' import { getComposition } from "@util/stat" -import { Effect, ElTableColumn } from "element-plus" +import { Effect, ElTableColumn, type RenderRowData } from "element-plus" import { defineComponent } from "vue" -import CompositionTable from '../../CompositionTable' -import { useReportFilter } from "../../context" -import type { ReportSort } from "../../types" type Props = { - dimension: timer.core.Dimension & 'focus' | 'run' + dimension: tt4b.core.Dimension & 'focus' | 'run' } const TimeColumn = defineComponent<Props>(props => { - const filter = useReportFilter() + const filter = useRecordFilter() const formatter = (focus: number | undefined): string => periodFormatter(focus, { format: filter.timeFormat }) return () => ( <ElTableColumn - prop={props.dimension satisfies ReportSort['prop']} + prop={props.dimension satisfies RecordSort['prop']} label={t(msg => msg.item[props.dimension])} minWidth={130} align="center" sortable="custom" > - {({ row }: ElTableRowScope<timer.stat.Row>) => ( + {({ row }: RenderRowData<tt4b.stat.Row>) => ( <TooltipWrapper usePopover={filter.readRemote} placement="top" @@ -43,7 +42,7 @@ const TimeColumn = defineComponent<Props>(props => { }} /> )} - </ElTableColumn > + </ElTableColumn> ) }, { props: ['dimension'] }) diff --git a/src/pages/app/components/Report/ReportTable/columns/VisitColumn.tsx b/src/pages/app/components/Record/Table/columns/VisitColumn.tsx similarity index 64% rename from src/pages/app/components/Report/ReportTable/columns/VisitColumn.tsx rename to src/pages/app/components/Record/Table/columns/VisitColumn.tsx index b3f316e3b..95977b125 100644 --- a/src/pages/app/components/Report/ReportTable/columns/VisitColumn.tsx +++ b/src/pages/app/components/Record/Table/columns/VisitColumn.tsx @@ -5,27 +5,26 @@ * https://opensource.org/licenses/MIT */ -import TooltipWrapper from "@app/components/common/TooltipWrapper" -import { t } from "@app/locale" -import { type ElTableRowScope } from "@pages/element-ui/table" +import CompositionTable from "@app/components/Record/components/CompositionTable" +import { useRecordFilter } from "@app/components/Record/context" +import type { RecordSort } from "@app/components/Record/types" +import { t } from '@app/locale' +import TooltipWrapper from '@pages/components/TooltipWrapper' import { getComposition } from "@util/stat" -import { Effect, ElTableColumn } from "element-plus" +import { Effect, ElTableColumn, type RenderRowData } from "element-plus" import { defineComponent } from "vue" -import CompositionTable from "../../CompositionTable" -import { useReportFilter } from "../../context" -import type { ReportSort } from "../../types" const VisitColumn = defineComponent(() => { - const filter = useReportFilter() + const filter = useRecordFilter() return () => ( <ElTableColumn - prop={'time' satisfies ReportSort['prop']} + prop={'time' satisfies RecordSort['prop']} label={t(msg => msg.item.time)} minWidth={130} align="center" sortable="custom" > - {({ row }: ElTableRowScope<timer.stat.Row>) => ( + {({ row }: RenderRowData<tt4b.stat.Row>) => ( <TooltipWrapper usePopover={filter.readRemote} placement="top" diff --git a/src/pages/app/components/Report/ReportTable/index.tsx b/src/pages/app/components/Record/Table/index.tsx similarity index 64% rename from src/pages/app/components/Report/ReportTable/index.tsx rename to src/pages/app/components/Record/Table/index.tsx index 67427f7ff..d7c712c60 100644 --- a/src/pages/app/components/Report/ReportTable/index.tsx +++ b/src/pages/app/components/Record/Table/index.tsx @@ -4,48 +4,44 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import ContentCard from "@app/components/common/ContentCard" -import Editable from "@app/components/common/Editable" -import Pagination from "@app/components/common/Pagination" -import { t } from "@app/locale" -import { periodFormatter } from "@app/util/time" +import { changeSiteAlias } from '@api/sw/site' +import { listCateStats, listGroupStats, listSiteStats } from "@api/sw/stat" +import ContentCard from '@app/components/common/ContentCard' +import Editable from '@app/components/common/Editable' +import Pagination from '@app/components/common/Pagination' +import { t } from '@app/locale' +import { cvt2LocaleTime, periodFormatter } from '@app/util/time' import { Histogram } from "@element-plus/icons-vue" -import { useDocumentVisibility, useManualRequest, useRequest, useState } from "@hooks" +import { useDocumentVisibility, useManualRequest, useRequest, useState } from '@hooks' import Flex from "@pages/components/Flex" -import siteService from "@service/site-service" -import statService, { type SiteQuery } from "@service/stat-service" import { sum } from "@util/array" import { isRtl } from "@util/document" import { siteEqual } from "@util/site" import { getAlias, isSite } from "@util/stat" -import { ElLink, ElTable, ElTableColumn, ElText, ElTooltip, type TableInstance } from "element-plus" +import { cvtDateRange2Str } from '@util/time' +import { ElLink, ElTable, ElTableColumn, ElText, ElTooltip, type RenderRowData, type TableInstance } from "element-plus" +import { createObjectGuard, createStringUnionGuard, isAny } from 'typescript-guard' import { computed, defineComponent, ref, watch } from "vue" import { queryPage } from "../common" -import { useReportFilter, useReportSort } from "../context" -import type { DisplayComponent, ReportFilterOption, ReportSort } from "../types" +import { useRecordFilter, useRecordSort } from "../context" +import type { DisplayComponent, RecordFilterOption, RecordSort } from "../types" import CateColumn from "./columns/CateColumn" -import DateColumn from "./columns/DateColumn" import GroupColumn from "./columns/GroupColumn" import HostColumn from "./columns/HostColumn" import OperationColumn from "./columns/OperationColumn" import TimeColumn from "./columns/TimeColumn" import VisitColumn from "./columns/VisitColumn" -async function handleAliasChange(key: timer.site.SiteKey, newAlias: string | undefined, data: timer.stat.Row[]) { - newAlias = newAlias?.trim?.() - if (!newAlias) { - await siteService.removeAlias(key) - } else { - await siteService.saveAlias(key, newAlias) - } - data?.filter(isSite) - ?.filter(item => siteEqual(item.siteKey, key)) - ?.forEach(item => item.alias = newAlias) +async function handleAliasChange(key: tt4b.site.SiteKey, newAlias: string | undefined, data: tt4b.stat.Row[]) { + newAlias = await changeSiteAlias(key, newAlias) + data.filter(isSite) + .filter(item => siteEqual(item.siteKey, key)) + .forEach(item => item.alias = newAlias) } type ColumnVisible = Record<'index' | 'date' | 'site' | 'cate' | 'group', boolean> -const computeVisible = (filter: ReportFilterOption): ColumnVisible => { +const computeVisible = (filter: RecordFilterOption): ColumnVisible => { const { siteMerge, mergeDate } = filter return { index: !siteMerge || siteMerge === 'group', @@ -56,14 +52,21 @@ const computeVisible = (filter: ReportFilterOption): ColumnVisible => { } } +const isRecordSort = createObjectGuard<RecordSort>({ + order: createStringUnionGuard<RecordSort['order']>('ascending', 'descending'), + prop: createStringUnionGuard<RecordSort['prop']>('date', 'host', 'focus', 'run', 'time'), + init: isAny, + silent: isAny, +}) + const _default = defineComponent((_, ctx) => { const rtl = isRtl() - const [page, setPage] = useState<timer.common.PageQuery>({ size: 20, num: 1 }) - const sort = useReportSort() - const filter = useReportFilter() + const [page, setPage] = useState<tt4b.common.PageQuery>({ size: 20, num: 1 }) + const sort = useRecordSort() + const filter = useRecordFilter() const visible = computed(() => computeVisible(filter)) const { data, refresh, loading } = useRequest(() => queryPage(filter, sort.value, page.value), { - loadingTarget: () => table.value?.$el as HTMLDivElement, + loadingTarget: () => table.value?.$el, deps: [() => ({ ...filter }), sort, page], defaultValue: { list: [], total: 0 }, }) @@ -72,30 +75,31 @@ const _default = defineComponent((_, ctx) => { refresh: refreshTotal, loading: totalLoading, } = useManualRequest(async () => { - const { siteMerge, dateRange: date, query, readRemote: inclusiveRemote, cateIds } = filter - let rows: timer.stat.Row[] = [] + const { siteMerge, dateRange, query, readRemote: inclusiveRemote, cateIds } = filter + const date = cvtDateRange2Str(dateRange) + let rows: tt4b.stat.Row[] = [] if (siteMerge === 'group') { - rows = await statService.selectGroup({ date, query }) + rows = await listGroupStats({ date, query }) } else if (siteMerge === 'cate') { - rows = await statService.selectCate({ date, query, cateIds, inclusiveRemote }) + rows = await listCateStats({ date, query, cateIds, inclusiveRemote }) } else { - const param: SiteQuery = { + const param: tt4b.stat.SiteQuery = { date, query, cateIds, inclusiveRemote, mergeHost: siteMerge === 'domain', } - rows = await statService.selectSite(param) + rows = await listSiteStats(param) } const visit = sum(rows.map(e => e.time)) const focus = sum(rows.map(e => e.focus)) return { visit, focus } }, { defaultValue: { visit: 0, focus: 0 } }) - const runColVisible = computed(() => !!data.value?.list?.find(r => r.run)) + const runColVisible = computed(() => data.value.list.some(r => r.run)) // Query data if document become visible const docVisible = useDocumentVisibility() watch(docVisible, () => docVisible.value && refresh()) - const [selection, setSelection] = useState<timer.stat.Row[]>([]) + const [selection, setSelection] = useState<tt4b.stat.Row[]>([]) ctx.expose({ getSelected: () => selection.value, refresh, @@ -108,44 +112,47 @@ const _default = defineComponent((_, ctx) => { () => filter.siteMerge, ], () => table.value?.doLayout?.()) - const handleCateChange = (key: timer.site.SiteKey, newCateId: number | undefined) => { - data.value?.list - ?.filter(isSite) - ?.filter(item => siteEqual(item.siteKey, key)) - ?.forEach(i => i.cateId = newCateId) - } - return () => ( <ContentCard> <Flex gap={23} width="100%" height="100%" column> <Flex flex={1} height={0}> <ElTable ref={table} - data={data.value?.list} + data={data.value.list} border fit highlightCurrentRow height="100%" defaultSort={sort.value} onSelection-change={setSelection} - onSort-change={(val: ReportSort) => sort.value = val} + onSort-change={val => isRecordSort(val) && (sort.value = val)} > {visible.value.index && <ElTableColumn type="selection" align="center" fixed="left" />} - {visible.value.date && <DateColumn />} + {visible.value.date && ( + <ElTableColumn + prop={'date' satisfies RecordSort['prop']} + label={t(msg => msg.item.date)} + minWidth={135} + align="center" + sortable="custom" + > + {({ row }: RenderRowData<tt4b.stat.Row>) => <span>{cvt2LocaleTime(row.date)}</span>} + </ElTableColumn> + )} {visible.value.site && <> <HostColumn /> <ElTableColumn label={t(msg => msg.siteManage.column.alias)} minWidth={140} align="center" - v-slots={({ row }: { row: timer.stat.Row }) => ( + v-slots={({ row }: { row: tt4b.stat.Row }) => ( <Editable modelValue={getAlias(row)} - onChange={newAlias => 'siteKey' in row && handleAliasChange(row.siteKey, newAlias, data.value?.list ?? [])} + onChange={newAlias => 'siteKey' in row && handleAliasChange(row.siteKey, newAlias, data.value.list)} /> )} /> </>} {visible.value.group && <GroupColumn />} - {visible.value.cate && <CateColumn onChange={handleCateChange} />} + {visible.value.cate && <CateColumn onChange={refresh} />} <TimeColumn dimension="focus" /> {runColVisible.value && <TimeColumn dimension="run" />} <VisitColumn /> @@ -160,7 +167,7 @@ const _default = defineComponent((_, ctx) => { v-slots={{ content: () => ( <ElText v-loading={totalLoading.value}> - {t(msg => msg.report.total, { + {t(msg => msg.record.total, { visit: total.value.visit, focus: periodFormatter(total.value.focus, { format: filter.timeFormat }), })} @@ -172,7 +179,7 @@ const _default = defineComponent((_, ctx) => { <Pagination disabled={loading.value} defaultValue={page.value} - total={data.value?.total || 0} + total={data.value.total} onChange={setPage} /> </Flex> diff --git a/src/pages/app/components/Record/common.ts b/src/pages/app/components/Record/common.ts new file mode 100644 index 000000000..a4da62db3 --- /dev/null +++ b/src/pages/app/components/Record/common.ts @@ -0,0 +1,131 @@ +import { + deleteSiteStatByGroup, deleteSiteStatByHost, getCateStatPage, getGroupStatPage, getSiteStatPage, listCateStats, + listGroupStats, listSiteStats, +} from "@api/sw/stat" +import { t } from '@app/locale' +import { getGroupName, isGroup, isSite } from "@util/stat" +import { cvtDateRange2Str, type DateRange, formatTime, getBirthday } from "@util/time" +import type { RecordFilterOption, RecordSort } from "./types" + +/** + * Compute the confirm text for one item to delete + * + * @param url item url + * @param date item date + */ +function computeSingleConfirmText(url: string, date: string): string { + return t(msg => msg.item.operation.deleteConfirmMsg, { url, date }) +} + +function computeRangeConfirmText(url: string, dateRange: DateRange): string { + let [startDate, endDate] = dateRange instanceof Date ? [dateRange,] : dateRange ?? [] + if (!startDate && !endDate) { + // Delete all + return t(msg => msg.item.operation.deleteConfirmMsgAll, { url }) + } + const dateFormat = t(msg => msg.calendar.dateFormat) + startDate = startDate ?? getBirthday() + endDate = endDate ?? new Date() + const start = formatTime(startDate, dateFormat) + const end = formatTime(endDate, dateFormat) + return start === end + // Only one day + ? computeSingleConfirmText(url, start) + : t(msg => msg.item.operation.deleteConfirmMsgRange, { url, start, end }) +} + +export function computeDeleteConfirmMsg(row: tt4b.stat.Row, filterOption: RecordFilterOption, groupMap: Record<number, chrome.tabGroups.TabGroup>): string { + let name: string | undefined + if (isGroup(row)) { + name = getGroupName(groupMap, row) + } else if (isSite(row)) { + name = row.siteKey.host + } + const { date } = row + const { mergeDate, dateRange } = filterOption || {} + name = name ?? 'NaN' + return mergeDate + ? computeRangeConfirmText(name, dateRange) + : computeSingleConfirmText(name, date ?? '') +} + +export async function handleDelete(row: tt4b.stat.Row, filterOption: RecordFilterOption) { + const { date } = row + const { mergeDate, dateRange } = filterOption + if (!mergeDate) { + // Delete one day + isSite(row) && date && await deleteSiteStatByHost(row.siteKey.host, date) + isGroup(row) && date && await deleteSiteStatByGroup(row.groupKey, date) + return + } + const strRange = cvtDateRange2Str(dateRange) + const [start, end] = strRange ?? [] + if (!start && !end) { + // Delete all + isSite(row) && await deleteSiteStatByHost(row.siteKey.host) + isGroup(row) && await deleteSiteStatByGroup(row.groupKey) + return + } + + // Delete by range + isSite(row) && await deleteSiteStatByHost(row.siteKey.host, strRange) + isGroup(row) && await deleteSiteStatByGroup(row.groupKey, strRange) +} + +const cvtOrderDir = (order: RecordSort['order']): tt4b.common.SortDirection | undefined => { + if (order === 'ascending') return 'ASC' + else if (order === 'descending') return 'DESC' + else return undefined +} + +const cvt2GroupQuery = ( + { query, mergeDate, dateRange: date }: RecordFilterOption, + { prop, order }: RecordSort, +): tt4b.stat.GroupQuery => ({ + date: cvtDateRange2Str(date), mergeDate, query, + sortKey: prop !== 'host' && prop !== 'run' ? prop : undefined, + sortDirection: cvtOrderDir(order), +}) + +const cvt2SiteQuery = ( + { dateRange: date, mergeDate, siteMerge, query, cateIds, readRemote: inclusiveRemote }: RecordFilterOption, + { prop, order }: RecordSort, +): tt4b.stat.SiteQuery => ({ + date: cvtDateRange2Str(date), mergeDate, + mergeHost: siteMerge === 'domain', + query, cateIds, inclusiveRemote, + virtual: true, + sortKey: prop, + sortDirection: cvtOrderDir(order), +}) + +const cvt2CateQuery = ( + { dateRange: date, mergeDate, query, cateIds, readRemote: inclusiveRemote }: RecordFilterOption, + { prop, order }: RecordSort, +): tt4b.stat.CateQuery => ({ + date: cvtDateRange2Str(date), mergeDate, query, cateIds, inclusiveRemote, + sortKey: prop !== 'host' && prop !== 'run' ? prop : undefined, + sortDirection: cvtOrderDir(order), +}) + +export const queryPage = async (filter: RecordFilterOption, sort: RecordSort, page: tt4b.common.PageQuery): Promise<tt4b.common.PageResult<tt4b.stat.Row>> => { + const { siteMerge } = filter + if (siteMerge === 'group') { + return await getGroupStatPage({ ...cvt2GroupQuery(filter, sort), ...page }) + } else if (siteMerge === 'cate') { + return await getCateStatPage({ ...cvt2CateQuery(filter, sort), ...page }) + } else { + return await getSiteStatPage({ ...cvt2SiteQuery(filter, sort), ...page }) + } +} + +export const queryAll = async (filter: RecordFilterOption, sort: RecordSort): Promise<tt4b.stat.Row[]> => { + const { siteMerge } = filter + if (siteMerge === 'group') { + return await listGroupStats(cvt2GroupQuery(filter, sort)) + } else if (siteMerge === 'cate') { + return await listCateStats(cvt2CateQuery(filter, sort)) + } else { + return await listSiteStats(cvt2SiteQuery(filter, sort)) + } +} \ No newline at end of file diff --git a/src/pages/app/components/Report/CompositionTable.tsx b/src/pages/app/components/Record/components/CompositionTable.tsx similarity index 83% rename from src/pages/app/components/Report/CompositionTable.tsx rename to src/pages/app/components/Record/components/CompositionTable.tsx index 0ff130be3..2f3895342 100644 --- a/src/pages/app/components/Report/CompositionTable.tsx +++ b/src/pages/app/components/Record/components/CompositionTable.tsx @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { t } from '@app/locale' import { sum } from "@util/array" import { ElTable, ElTableColumn } from "element-plus" import { computed, defineComponent, type PropType } from "vue" @@ -18,12 +18,12 @@ type Row = { type ValueFormatter = (val: number) => string -const CLIENT_NAME = t(msg => msg.report.remoteReading.table.client) -const VALUE = t(msg => msg.report.remoteReading.table.value) -const LOCAL_DATA = t(msg => msg.report.remoteReading.table.localData) -const PERCENTAGE = t(msg => msg.report.remoteReading.table.percentage) +const CLIENT_NAME = t(msg => msg.record.remoteReading.table.client) +const VALUE = t(msg => msg.record.remoteReading.table.value) +const LOCAL_DATA = t(msg => msg.record.remoteReading.table.localData) +const PERCENTAGE = t(msg => msg.record.remoteReading.table.percentage) -function computeRows(data: timer.stat.RemoteCompositionVal[]): Row[] { +function computeRows(data: tt4b.stat.RemoteCompositionVal[]): Row[] { const rows: Row[] = data.map(e => typeof e === 'number' ? { name: LOCAL_DATA, value: e || 0 } : { name: e.cname || e.cid, value: e.value } @@ -44,7 +44,7 @@ const formatValue = (value: number, valueFormatter?: ValueFormatter) => { const _default = defineComponent({ props: { data: { - type: Array as PropType<timer.stat.RemoteCompositionVal[]>, + type: Array as PropType<tt4b.stat.RemoteCompositionVal[]>, required: true, }, valueFormatter: Function as PropType<ValueFormatter>, diff --git a/src/pages/app/components/Report/ReportTable/columns/TooltipSiteList.tsx b/src/pages/app/components/Record/components/TooltipSiteList.tsx similarity index 87% rename from src/pages/app/components/Report/ReportTable/columns/TooltipSiteList.tsx rename to src/pages/app/components/Record/components/TooltipSiteList.tsx index 18f78e0fa..f9e7c336e 100644 --- a/src/pages/app/components/Report/ReportTable/columns/TooltipSiteList.tsx +++ b/src/pages/app/components/Record/components/TooltipSiteList.tsx @@ -5,15 +5,15 @@ import { ElScrollbar } from "element-plus" import { computed, defineComponent, StyleValue, toRefs } from "vue" type Props = { - modelValue?: timer.stat.SiteRow[] | false + modelValue: tt4b.stat.SiteRow[] | false | undefined clickDisabled?: boolean } const TooltipSiteList = defineComponent<Props>(props => { const { modelValue, clickDisabled: clickable } = toRefs(props) const iconMap = computed(() => { - const siteMap = new SiteMap<string>() - const rows = modelValue?.value + const siteMap = new SiteMap<string | undefined>() + const rows = modelValue.value if (!rows) return siteMap rows.forEach(({ siteKey, iconUrl }) => siteMap.put(siteKey, iconUrl)) return siteMap diff --git a/src/pages/app/components/Record/context.ts b/src/pages/app/components/Record/context.ts new file mode 100644 index 000000000..4002c9c30 --- /dev/null +++ b/src/pages/app/components/Record/context.ts @@ -0,0 +1,116 @@ +import { isOptionalIntArray, isTimeFormat } from '@app/util/limit/types' +import { useLocalStorage, useProvide, useProvider } from '@hooks' +import { + createObjectGuard, createOptionalGuard, createStringUnionGuard, isBoolean, + isOptionalInt, + isOptionalString, + isString, +} from 'typescript-guard' +import { reactive, ref, type ShallowRef, toRaw, watch } from "vue" +import { type RouteLocation, type Router, useRoute, useRouter } from "vue-router" +import type { DisplayComponent, RecordFilterOption, RecordSort } from "./types" + +type Context = { + filter: RecordFilterOption + sort: ShallowRef<RecordSort> + comp: ShallowRef<DisplayComponent | undefined> +} + +const NAMESPACE = 'record' + +type QueryPartial = PartialPick<RecordFilterOption, 'query' | 'dateRange' | 'mergeDate' | 'siteMerge'> + +const isSortProp = createStringUnionGuard<RecordSort['prop']>('date', 'host', 'focus', 'run', 'time') +const isSiteMerge = createStringUnionGuard<Exclude<RecordFilterOption['siteMerge'], undefined>>( + 'cate', 'domain', 'group', +) + +/** + * Init the query parameters + */ +function parseQuery(route: RouteLocation, router: Router): [QueryPartial, RecordSort['prop'] | undefined] { + const routeQuery = route.query + const { q, mm, md, ds, de, sc } = routeQuery + const dateStart = isString(ds) ? new Date(Number.parseInt(ds)) : undefined + const dateEnd = isString(de) ? new Date(Number.parseInt(de)) : undefined + // Remove queries + router.replace({ query: {} }) + + const now = new Date() + const partial: QueryPartial = { + ...(isString(q) && { query: q }), + ...((md === 'true' || md === '1') && { mergeDate: true }), + ...((dateStart ?? dateEnd) && { dateRange: [dateStart ?? now, dateEnd ?? now] }), + ...(isSiteMerge(mm) && { siteMerge: mm }) + } + return [partial, isSortProp(sc) ? sc : undefined] +} + +type CacheValue = Omit<RecordFilterOption, 'dateRange' | 'readRemote'> & { + dateStart?: number + dateEnd?: number +} + +const isCacheValue = createObjectGuard<CacheValue>({ + query: isOptionalString, + mergeDate: isBoolean, + siteMerge: createOptionalGuard(isSiteMerge), + cateIds: isOptionalIntArray, + timeFormat: isTimeFormat, + dateStart: isOptionalInt, + dateEnd: isOptionalInt, +}) + +const cvtStorage2Filter = (storage: CacheValue | undefined): RecordFilterOption => { + const { query, dateStart, dateEnd, mergeDate, siteMerge, cateIds, timeFormat } = storage ?? {} + const now = new Date() + return { + query, + dateRange: [dateStart ? new Date(dateStart) : now, dateEnd ? new Date(dateEnd) : now], + mergeDate: mergeDate ?? false, + siteMerge, + cateIds, + timeFormat: timeFormat ?? 'default', + readRemote: false, + } +} + +const cvtFilter2Storage = (filter: RecordFilterOption): CacheValue => { + const { query, dateRange, mergeDate, siteMerge, cateIds, timeFormat } = filter + const [dateStart, dateEnd] = dateRange instanceof Date ? [dateRange,] : dateRange ?? [] + return { + query, + mergeDate, siteMerge, + dateStart: dateStart?.getTime?.(), + dateEnd: dateEnd?.getTime?.(), + cateIds, timeFormat, + } +} + +export const initRecordContext = () => { + const route = useRoute() + const router = useRouter() + const [queryFilter, querySort] = parseQuery(route, router) + + const [cachedFilter, setCachedFilter] = useLocalStorage<CacheValue>('record_filter', isCacheValue) + const filter = reactive<RecordFilterOption>({ ...cvtStorage2Filter(cachedFilter), ...queryFilter }) + watch(() => filter, v => setCachedFilter(cvtFilter2Storage(toRaw(v))), { deep: true }) + + const sort = ref<RecordSort>({ + order: 'descending', + prop: querySort ?? 'focus' + }) + + const comp = ref<DisplayComponent>() + + const context: Context = { filter, sort, comp } + useProvide<Context>(NAMESPACE, context) + + return context +} + +export const useRecordFilter = (): RecordFilterOption => useProvider<Context, 'filter'>(NAMESPACE, "filter").filter + +export const useRecordSort = (): ShallowRef<RecordSort> => useProvider<Context, 'sort'>(NAMESPACE, 'sort').sort + +export const useRecordComponent = () => useProvider<Context, 'comp'>(NAMESPACE, 'comp').comp \ No newline at end of file diff --git a/src/pages/app/components/Report/file-export.ts b/src/pages/app/components/Record/file-export.ts similarity index 75% rename from src/pages/app/components/Report/file-export.ts rename to src/pages/app/components/Record/file-export.ts index 10ab1d6cb..6dc915433 100644 --- a/src/pages/app/components/Report/file-export.ts +++ b/src/pages/app/components/Record/file-export.ts @@ -5,16 +5,13 @@ * https://opensource.org/licenses/MIT */ -import { type I18nKey, t } from "@app/locale" -import { periodFormatter } from "@app/util/time" -import { - exportCsv as exportCsv_, - exportJson as exportJson_, -} from "@util/file" +import { type I18nKey, t } from '@app/locale' +import { periodFormatter } from '@app/util/time' +import { exportCsv as exportCsv_, exportJson as exportJson_ } from "@util/file" import { CATE_NOT_SET_ID } from "@util/site" import { getAlias, getGroupName, getHost, getRelatedCateId, isGroup } from "@util/stat" import { formatTimeYMD } from "@util/time" -import type { ReportFilterOption } from "./types" +import type { RecordFilterOption } from "./types" type ExportInfo = { host?: string @@ -29,19 +26,18 @@ type ExportInfo = { /** * Compute the name of downloaded file */ -function computeFileName(filterParam: ReportFilterOption): string { - let baseName = t(msg => msg.report.exportFileName) +function computeFileName(filterParam: RecordFilterOption): string { const { dateRange, siteMerge, mergeDate, timeFormat } = filterParam - if (dateRange && dateRange.length === 2) { - const start = dateRange[0] - const end = dateRange[1] - baseName += '_' + formatTimeYMD(start) - baseName += '_' + formatTimeYMD(end) - } - mergeDate && (baseName += '_' + t(msg => msg.shared.merge.mergeMethod.date)) - siteMerge && (baseName += '_' + t(msg => msg.shared.merge.mergeMethod[siteMerge])) - timeFormat && (baseName += '_' + t(msg => msg.timeFormat[timeFormat])) - return baseName + const [ds, de] = dateRange instanceof Date ? [dateRange,] : dateRange ?? [] + const parts = [ + t(msg => msg.record.exportFileName), + ds && formatTimeYMD(ds), + de && formatTimeYMD(de), + mergeDate && t(msg => msg.shared.merge.mergeMethod.date), + siteMerge && t(msg => msg.shared.merge.mergeMethod[siteMerge]), + timeFormat && t(msg => msg.timeFormat[timeFormat]), + ] + return parts.filter(p => !!p).join('_') } const generateJsonData = ({ rows, categories, groupMap }: ExportParam): ExportInfo[] => rows.map(row => ({ @@ -54,7 +50,7 @@ const generateJsonData = ({ rows, categories, groupMap }: ExportParam): ExportIn time: row.time })) -const getCateName = (row: timer.stat.Row, categories: timer.site.Cate[]): string | undefined => { +const getCateName = (row: tt4b.stat.Row, categories: tt4b.site.Cate[]): string | undefined => { const cateId = getRelatedCateId(row) let cate: string | undefined = undefined if (cateId === CATE_NOT_SET_ID) { @@ -67,9 +63,9 @@ const getCateName = (row: timer.stat.Row, categories: timer.site.Cate[]): string } export type ExportParam = { - rows: timer.stat.Row[] - filter: ReportFilterOption - categories: timer.site.Cate[] + rows: tt4b.stat.Row[] + filter: RecordFilterOption + categories: tt4b.site.Cate[] groupMap: Record<number, chrome.tabGroups.TabGroup> } @@ -88,9 +84,9 @@ export function exportJson(param: ExportParam): void { type CsvColumn = keyof ExportInfo type CsvColumnConfig = { - visible: (mergeDate: boolean, siteMerge: ReportFilterOption['siteMerge']) => boolean + visible: (mergeDate: boolean, siteMerge: RecordFilterOption['siteMerge']) => boolean i18n: I18nKey - formatter: (row: timer.stat.Row, categories: timer.site.Cate[], groupMap: Record<number, chrome.tabGroups.TabGroup>) => string + formatter: (row: tt4b.stat.Row, categories: tt4b.site.Cate[], groupMap: Record<number, chrome.tabGroups.TabGroup>) => string } const CSV_COLUMN_CONFIGS: Record<CsvColumn, CsvColumnConfig> = { diff --git a/src/pages/app/components/Record/index.tsx b/src/pages/app/components/Record/index.tsx new file mode 100644 index 000000000..6fb5677e5 --- /dev/null +++ b/src/pages/app/components/Record/index.tsx @@ -0,0 +1,26 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { useXsState } from '@hooks' +import { defineComponent } from "vue" +import ContentContainer from '../common/ContentContainer' +import { initRecordContext } from "./context" +import Filter from "./Filter" +import List from "./List" +import Table from "./Table" + +const _default = defineComponent(() => { + const { comp } = initRecordContext() + const isXs = useXsState() + + return () => <ContentContainer v-slots={{ + filter: () => <Filter />, + default: () => isXs.value ? <List ref={comp} /> : <Table ref={comp} /> + }} /> +}) + +export default _default diff --git a/src/pages/app/components/Record/types.d.ts b/src/pages/app/components/Record/types.d.ts new file mode 100644 index 000000000..12ddb825a --- /dev/null +++ b/src/pages/app/components/Record/types.d.ts @@ -0,0 +1,24 @@ +import { DateRange } from '@util/time' +import type { Sort } from "element-plus" + +export type RecordSort = Omit<Sort, 'prop'> & { + prop: tt4b.core.Dimension | 'host' | 'date' +} + +export type RecordFilterOption = { + query: string | undefined + dateRange: DateRange + mergeDate: boolean + siteMerge?: Exclude<tt4b.stat.MergeMethod, 'date'> + cateIds?: number[] + /** + * @since 1.1.7 + */ + timeFormat: tt4b.ui.TimeFormat + readRemote?: boolean +} + +export interface DisplayComponent { + getSelected(): tt4b.stat.Row[] + refresh(): Promise<void> | void +} \ No newline at end of file diff --git a/src/pages/app/components/Report/ReportList/index.tsx b/src/pages/app/components/Report/ReportList/index.tsx deleted file mode 100644 index 91d766525..000000000 --- a/src/pages/app/components/Report/ReportList/index.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import { t } from "@app/locale" -import { useScrollRequest } from "@hooks" -import { getHost } from "@util/stat" -import { ElCard } from "element-plus" -import { defineComponent, ref } from "vue" -import { queryPage } from "../common" -import { useReportFilter } from "../context" -import type { DisplayComponent } from "../types" -import Item from "./Item" -import "./style.sass" - -const _default = defineComponent((_, ctx) => { - const filterOption = useReportFilter() - const { data, loading, loadMoreAsync, end, reset } = useScrollRequest(async (num, size) => { - const pagination = await queryPage( - filterOption, - { order: "descending", prop: "focus" }, - { num, size }, - ) - return pagination.list - }, { manual: true, resetDeps: () => ({ ...filterOption }) }) - - const selected = ref<number[]>([]) - - ctx.expose({ - getSelected: () => selected.value?.map(idx => data.value?.[idx])?.filter(i => !!i) ?? [], - refresh: reset, - } satisfies DisplayComponent) - - const handleSelectedChange = (val: boolean, idx: number) => { - const newSelected = selected.value?.filter(v => v !== idx) || [] - val && newSelected.push(idx) - return selected.value = newSelected - } - - return () => <> - <div class="report-list-wrapper"> - <div - class="report-list" - v-infinite-scroll={loadMoreAsync} - infinite-scroll-disabled={end.value || loading.value} - > - {data.value?.map((row, idx) => ( - <ElCard> - <Item - key={`row-${getHost(row)}-${idx}`} - value={row} - onSelectedChange={val => handleSelectedChange(val, idx)} - onDelete={() => reset()} - /> - </ElCard> - ))} - </div> - <p class="scroll-info" v-loading={loading.value}> - {end.value ? t(msg => msg.report.noMore) : (loading.value ? 'Loading ...' : 'Load More')} - </p> - </div> - </> -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Report/ReportList/style.sass b/src/pages/app/components/Report/ReportList/style.sass deleted file mode 100644 index 3026c2bfc..000000000 --- a/src/pages/app/components/Report/ReportList/style.sass +++ /dev/null @@ -1,36 +0,0 @@ -.report-list - width: 100% - display: grid - gap: .6em - grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) - .el-card__body - padding: 15px -.scroll-info - height: 20px - width: 100% - text-align: center - color: var(--el-text-color-regular) -.report-item - .report-item-head - display: flex - justify-content: space-between - .report-item-title - display: inline-flex - align-items: center - gap: 2px - .el-checkbox - height: 100% - >button - padding: 0 - .report-item-content - display: flex - gap: 5px - flex-wrap: wrap - justify-content: space-between - .el-tag__content - display: flex - align-items: center - gap: 2px - .report-item-content:after - content: "" - flex: auto diff --git a/src/pages/app/components/Report/ReportTable/columns/DateColumn.tsx b/src/pages/app/components/Report/ReportTable/columns/DateColumn.tsx deleted file mode 100644 index 7160cb51d..000000000 --- a/src/pages/app/components/Report/ReportTable/columns/DateColumn.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { cvt2LocaleTime } from "@app/util/time" -import { type ElTableRowScope } from "@pages/element-ui/table" -import { ElTableColumn } from "element-plus" -import { type FunctionalComponent } from "vue" -import type { ReportSort } from "../../types" - -const DateColumn: FunctionalComponent = () => ( - <ElTableColumn - prop={'date' satisfies ReportSort['prop']} - label={t(msg => msg.item.date)} - minWidth={135} - align="center" - sortable="custom" - > - {({ row }: ElTableRowScope<timer.stat.Row>) => <span>{cvt2LocaleTime(row.date)}</span>} - </ElTableColumn> -) - -export default DateColumn \ No newline at end of file diff --git a/src/pages/app/components/Report/common.ts b/src/pages/app/components/Report/common.ts deleted file mode 100644 index 688b2c859..000000000 --- a/src/pages/app/components/Report/common.ts +++ /dev/null @@ -1,126 +0,0 @@ -import { t } from "@app/locale" -import statDatabase from "@db/stat-database" -import statService, { type CateQuery, type GroupQuery, type SiteQuery } from "@service/stat-service" -import { getGroupName, isGroup, isSite } from "@util/stat" -import { formatTime } from "@util/time" -import type { ReportFilterOption, ReportSort } from "./types" - -/** - * Compute the confirm text for one item to delete - * - * @param url item url - * @param date item date - */ -function computeSingleConfirmText(url: string, date: string): string { - return t(msg => msg.item.operation.deleteConfirmMsg, { url, date }) -} - -function computeRangeConfirmText(url: string, dateRange: [Date, Date] | undefined): string { - const hasDateRange = dateRange?.length === 2 && (dateRange[0] || dateRange[1]) - if (!hasDateRange) { - // Delete all - return t(msg => msg.item.operation.deleteConfirmMsgAll, { url }) - } - const dateFormat = t(msg => msg.calendar.dateFormat) - const startDate = dateRange[0] - const endDate = dateRange[1] - const start = formatTime(startDate, dateFormat) - const end = formatTime(endDate, dateFormat) - return start === end - // Only one day - ? computeSingleConfirmText(url, start) - : t(msg => msg.item.operation.deleteConfirmMsgRange, { url, start, end }) -} - -export function computeDeleteConfirmMsg(row: timer.stat.Row, filterOption: ReportFilterOption, groupMap: Record<number, chrome.tabGroups.TabGroup>): string { - let name: string | undefined - if (isGroup(row)) { - name = getGroupName(groupMap, row) - } else if (isSite(row)) { - name = row.siteKey.host - } - const { date } = row - const { mergeDate, dateRange } = filterOption || {} - name = name ?? 'NaN' - return mergeDate - ? computeRangeConfirmText(name, dateRange) - : computeSingleConfirmText(name, date ?? '') -} - -export async function handleDelete(row: timer.stat.Row, filterOption: ReportFilterOption) { - const { date } = row - const { mergeDate, dateRange } = filterOption - if (!mergeDate) { - // Delete one day - isSite(row) && date && await statDatabase.deleteByUrlAndDate(row.siteKey.host, date) - isGroup(row) && date && await statDatabase.deleteByGroupAndDate(row.groupKey, date) - return - } - const start = dateRange?.[0] - const end = dateRange?.[1] - if (!start && !end) { - // Delete all - isSite(row) && await statDatabase.deleteByUrl(row.siteKey.host) - isGroup(row) && await statDatabase.deleteByGroup(row.groupKey) - return - } - - // Delete by range - isSite(row) && await statDatabase.deleteByUrlBetween(row.siteKey.host, start, end) - isGroup(row) && await statDatabase.deleteByGroupBetween(row.groupKey, start, end) -} - -const cvtOrderDir = (order: ReportSort['order']): timer.common.SortDirection | undefined => { - if (order === 'ascending') return 'ASC' - else if (order === 'descending') return 'DESC' - else return undefined -} - -const cvt2GroupQuery = ( - { query, mergeDate, dateRange: date }: ReportFilterOption, - { prop, order }: ReportSort, -): GroupQuery => ({ - date, mergeDate, query, - sortKey: prop !== 'host' && prop !== 'run' ? prop : undefined, - sortDirection: cvtOrderDir(order), -}) - -const cvt2SiteQuery = ( - { dateRange: date, mergeDate, siteMerge, query, cateIds, readRemote: inclusiveRemote }: ReportFilterOption, - { prop, order }: ReportSort, -): SiteQuery => ({ - date, mergeDate, mergeHost: siteMerge === 'domain', query, cateIds, inclusiveRemote, - sortKey: prop, - sortDirection: cvtOrderDir(order), -}) - -const cvt2CateQuery = ( - { dateRange: date, mergeDate, query, cateIds, readRemote: inclusiveRemote }: ReportFilterOption, - { prop, order }: ReportSort, -): CateQuery => ({ - date, mergeDate, query, cateIds, inclusiveRemote, - sortKey: prop !== 'host' && prop !== 'run' ? prop : undefined, - sortDirection: cvtOrderDir(order), -}) - -export const queryPage = (filter: ReportFilterOption, sort: ReportSort, page: timer.common.PageQuery): Promise<timer.common.PageResult<timer.stat.Row>> => { - const { siteMerge } = filter - if (siteMerge === 'group') { - return statService.selectGroupPage(cvt2GroupQuery(filter, sort), page) - } else if (siteMerge === 'cate') { - return statService.selectCatePage(cvt2CateQuery(filter, sort), page) - } else { - return statService.selectSitePage(cvt2SiteQuery(filter, sort), page) - } -} - -export const queryAll = (filter: ReportFilterOption, sort: ReportSort): Promise<timer.stat.Row[]> => { - const { siteMerge } = filter - if (siteMerge === 'group') { - return statService.selectGroup(cvt2GroupQuery(filter, sort)) - } else if (siteMerge === 'cate') { - return statService.selectCate(cvt2CateQuery(filter, sort)) - } else { - return statService.selectSite(cvt2SiteQuery(filter, sort)) - } -} \ No newline at end of file diff --git a/src/pages/app/components/Report/context.ts b/src/pages/app/components/Report/context.ts deleted file mode 100644 index 92fe56a78..000000000 --- a/src/pages/app/components/Report/context.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { useLocalStorage, useProvide, useProvider } from "@hooks" -import { reactive, type Reactive, ref, type Ref, toRaw, watch } from "vue" -import { type RouteLocation, type Router, useRoute, useRouter } from "vue-router" -import type { DisplayComponent, ReportFilterOption, ReportQueryParam, ReportSort } from "./types" - -type Context = { - filter: Reactive<ReportFilterOption> - sort: Ref<ReportSort> - comp: Ref<DisplayComponent | undefined> -} - -const NAMESPACE = 'report' - -type QueryPartial = PartialPick<ReportFilterOption, 'query' | 'dateRange' | 'mergeDate' | 'siteMerge'> - -/** - * Init the query parameters - */ -function parseQuery(route: RouteLocation, router: Router): [QueryPartial, ReportSort['prop'] | undefined] { - const routeQuery = route.query as unknown as ReportQueryParam - const { q, mm, md, ds, de, sc } = routeQuery - const dateStart = ds ? new Date(Number.parseInt(ds)) : undefined - const dateEnd = de ? new Date(Number.parseInt(de)) : undefined - // Remove queries - router.replace({ query: {} }) - - const now = new Date() - const partial: QueryPartial = { - ...(q && { query: q }), - ...((md === 'true' || md === '1') && { mergeDate: true }), - ...((dateStart ?? dateEnd) && { dateRange: [dateStart ?? now, dateEnd ?? now] }), - ...(mm && { siteMerge: mm }) - } - return [partial, sc ? sc satisfies ReportSort['prop'] : undefined] -} - -type FilterStorageValue = Omit<ReportFilterOption, 'dateRange' | 'readRemote'> & { - dateStart?: number - dateEnd?: number -} - -const cvtStorage2Filter = (storage: FilterStorageValue | undefined): ReportFilterOption => { - const { query, dateStart, dateEnd, mergeDate, siteMerge, cateIds, timeFormat } = storage || {} - const now = new Date() - return { - query, - dateRange: [dateStart ? new Date(dateStart) : now, dateEnd ? new Date(dateEnd) : now], - mergeDate: mergeDate ?? false, - siteMerge, - cateIds, - timeFormat: timeFormat ?? 'default', - readRemote: false, - } -} - -const cvtFilter2Storage = (filter: ReportFilterOption): FilterStorageValue => { - const { query, dateRange, mergeDate, siteMerge, cateIds, timeFormat } = filter - return { - query, - mergeDate, siteMerge, - dateStart: dateRange?.[0]?.getTime?.(), - dateEnd: dateRange?.[1]?.getTime?.(), - cateIds, timeFormat, - } -} - -export const initReportContext = () => { - const route = useRoute() - const router = useRouter() - const [queryFilter, querySort] = parseQuery(route, router) - - const [cachedFilter, setCachedFilter] = useLocalStorage<FilterStorageValue>('report_filter') - - const initialFilter: ReportFilterOption = { ...cvtStorage2Filter(cachedFilter), ...queryFilter } - const filter = reactive(initialFilter) - watch(() => filter, v => setCachedFilter(cvtFilter2Storage(toRaw(v))), { deep: true }) - - const sort = ref<ReportSort>({ - order: 'descending', - prop: querySort || 'focus' - }) - - const comp = ref<DisplayComponent>() - - const context: Context = { filter, sort, comp } - useProvide<Context>(NAMESPACE, context) - - return context -} - -export const useReportFilter = (): Reactive<ReportFilterOption> => useProvider<Context, 'filter'>(NAMESPACE, "filter").filter - -export const useReportSort = (): Ref<ReportSort> => useProvider<Context, 'sort'>(NAMESPACE, 'sort').sort - -export const useReportComponent = () => useProvider<Context, 'comp'>(NAMESPACE, 'comp').comp \ No newline at end of file diff --git a/src/pages/app/components/Report/index.tsx b/src/pages/app/components/Report/index.tsx deleted file mode 100644 index c0c56499f..000000000 --- a/src/pages/app/components/Report/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { useXsState } from "@hooks" -import { defineComponent } from "vue" -import ContentContainer from "../common/ContentContainer" -import { initReportContext } from "./context" -import ReportFilter from "./ReportFilter" -import ReportList from "./ReportList" -import ReportTable from "./ReportTable" - -const _default = defineComponent(() => { - const { comp } = initReportContext() - const isXs = useXsState() - - return () => <ContentContainer v-slots={{ - filter: () => <ReportFilter hideCateFilter={isXs.value} />, - default: () => isXs.value ? <ReportList ref={comp} /> : <ReportTable ref={comp} /> - }} /> -}) - -export default _default diff --git a/src/pages/app/components/Report/types.d.ts b/src/pages/app/components/Report/types.d.ts deleted file mode 100644 index aa09c770e..000000000 --- a/src/pages/app/components/Report/types.d.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { Sort } from "element-plus" - -export type ReportSort = Omit<Sort, 'prop'> & { - prop: timer.core.Dimension | 'host' | 'date' -} - -/** -* The query param of report page -*/ -export type ReportQueryParam = { - /** - * Query - */ - q?: string - /** - * Merge method - */ - mm?: Exclude<timer.stat.MergeMethod, 'date'> - /** - * Merge date - */ - md?: string - /** - * Date start - */ - ds?: string - /** - * Date end - */ - de?: string - /** - * Sorted column - */ - sc?: timer.core.Dimension -} - -export type ReportFilterOption = { - query: string | undefined - dateRange: [Date, Date] | undefined - mergeDate: boolean - siteMerge?: timer.stat.MergeMethod & ('cate' | 'domain' | 'group') - cateIds?: number[] - /** - * @since 1.1.7 - */ - timeFormat: timer.app.TimeFormat - readRemote?: boolean -} - -export interface DisplayComponent { - getSelected(): timer.stat.Row[] - refresh(): Promise<void> | void -} \ No newline at end of file diff --git a/src/pages/app/components/Rule/AlertBox.tsx b/src/pages/app/components/Rule/AlertBox.tsx new file mode 100644 index 000000000..7f70727b0 --- /dev/null +++ b/src/pages/app/components/Rule/AlertBox.tsx @@ -0,0 +1,15 @@ +import Flex from '@pages/components/Flex' +import { FunctionalComponent } from 'vue' +import AlertLines, { AlertLinesProps } from '../common/AlertLines' + +type Props = Pick<AlertLinesProps, 'title' | 'lines'> + +const AlertBox: FunctionalComponent<Props> = (props, ctx) => ( + <Flex gap={20} column padding={15}> + <AlertLines {...props} /> + {ctx.slots.default?.()} + </Flex> +) +AlertBox.displayName = 'AlertBox' + +export default AlertBox \ No newline at end of file diff --git a/src/pages/app/components/RuleMerge/ItemList.tsx b/src/pages/app/components/Rule/Merge/ItemList.tsx similarity index 65% rename from src/pages/app/components/RuleMerge/ItemList.tsx rename to src/pages/app/components/Rule/Merge/ItemList.tsx index 5c809e895..37cc1d9d0 100644 --- a/src/pages/app/components/RuleMerge/ItemList.tsx +++ b/src/pages/app/components/Rule/Merge/ItemList.tsx @@ -5,42 +5,39 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" -import mergeRuleDatabase from "@db/merge-rule-database" -import { useManualRequest, useRequest } from "@hooks" +import { addMergeRule, deleteMergeRule, listAllMergeRules } from "@api/sw/merge" +import { t } from '@app/locale' +import { useManualRequest, useRequest } from '@hooks' import Flex from "@pages/components/Flex" import { ElMessage, ElMessageBox } from "element-plus" import { defineComponent, ref } from "vue" import AddButton from './components/AddButton' import Item, { type ItemInstance } from './components/Item' -const _default = defineComponent(() => { - const { data: items, refresh } = useRequest(() => mergeRuleDatabase.selectAll()) +const _default = defineComponent<{}>(() => { + const { data: items, refresh } = useRequest(listAllMergeRules, { defaultValue: [] }) const handleSucc = () => { ElMessage.success(t(msg => msg.operation.successMsg)) refresh() } - const { refreshAsync: remove } = useManualRequest( - (origin: string) => mergeRuleDatabase.remove(origin), - { onSuccess: handleSucc }, - ) + const { refreshAsync: remove } = useManualRequest(deleteMergeRule, { onSuccess: handleSucc }) const { refresh: update } = useManualRequest(async (origin: string, merged: string | number) => { - await mergeRuleDatabase.remove(origin) - await mergeRuleDatabase.add({ origin, merged }) + await deleteMergeRule(origin) + await addMergeRule({ origin, merged }) }, { onSuccess: handleSucc }) const itemRefs = ref<ItemInstance[]>([]) const handleDelete = (origin: string) => { - const message = t(msg => msg.mergeRule.removeConfirmMsg, { origin }) + const message = t(msg => msg.rule.merge.removeConfirmMsg, { origin }) const title = t(msg => msg.operation.confirmTitle) ElMessageBox.confirm(message, title).then(() => remove(origin)) } async function handleChange(origin: string, merged: string | number, index: number): Promise<void> { - const hasDuplicate = items.value?.find((o, i) => o.origin === origin && i !== index) + const hasDuplicate = items.value.some((o, i) => o.origin === origin && i !== index) if (hasDuplicate) { - ElMessage.warning(t(msg => msg.mergeRule.duplicateMsg, { origin })) + ElMessage.warning(t(msg => msg.rule.merge.duplicateMsg, { origin })) itemRefs.value?.[index]?.forceEdit?.() return } @@ -48,18 +45,18 @@ const _default = defineComponent(() => { } const { refresh: add } = useManualRequest( - (rule: timer.merge.Rule) => mergeRuleDatabase.add(rule), + (rule: tt4b.merge.Rule) => addMergeRule(rule), { onSuccess: handleSucc } ) const handleAdd = async (origin: string, merged: string | number): Promise<boolean> => { - const alreadyExist = !!items.value?.find(item => item.origin === origin) + const alreadyExist = items.value.some(item => item.origin === origin) if (alreadyExist) { - ElMessage.warning(t(msg => msg.mergeRule.duplicateMsg, { origin })) + ElMessage.warning(t(msg => msg.rule.merge.duplicateMsg, { origin })) return false } const title = t(msg => msg.operation.confirmTitle) - const content = t(msg => msg.mergeRule.addConfirmMsg, { origin }) + const content = t(msg => msg.rule.merge.addConfirmMsg, { origin }) try { await ElMessageBox.confirm(content, title, { dangerouslyUseHTMLString: true }) add({ origin, merged }) @@ -71,7 +68,7 @@ const _default = defineComponent(() => { return () => ( <Flex gap={10} wrap justify="space-between"> - {items.value?.map((item, idx) => + {items.value.map((item, idx) => <Item ref={() => itemRefs.value[idx]} origin={item.origin} diff --git a/src/pages/app/components/RuleMerge/components/AddButton.tsx b/src/pages/app/components/Rule/Merge/components/AddButton.tsx similarity index 94% rename from src/pages/app/components/RuleMerge/components/AddButton.tsx rename to src/pages/app/components/Rule/Merge/components/AddButton.tsx index c45d46f96..26bd67cff 100644 --- a/src/pages/app/components/RuleMerge/components/AddButton.tsx +++ b/src/pages/app/components/Rule/Merge/components/AddButton.tsx @@ -5,8 +5,8 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" -import { useState, useSwitch } from "@hooks" +import { useState, useSwitch } from '@hooks' +import { t } from '@app/locale' import { ElButton } from "element-plus" import { defineComponent, StyleValue } from "vue" import ItemInput from './ItemInput' diff --git a/src/pages/app/components/RuleMerge/components/Item.tsx b/src/pages/app/components/Rule/Merge/components/Item.tsx similarity index 68% rename from src/pages/app/components/RuleMerge/components/Item.tsx rename to src/pages/app/components/Rule/Merge/components/Item.tsx index f192a8cf0..10b21f903 100644 --- a/src/pages/app/components/RuleMerge/components/Item.tsx +++ b/src/pages/app/components/Rule/Merge/components/Item.tsx @@ -4,13 +4,13 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import EditableTag from "@app/components/common/EditableTag" -import { t } from "@app/locale" -import { useShadow, useSwitch } from "@hooks" +import { t } from '@app/locale' +import { Edit } from '@element-plus/icons-vue' +import { useShadow, useSwitch } from '@hooks' import Flex from "@pages/components/Flex" import { LOCAL_HOST_PATTERN } from "@util/constant/remain-host" -import { type TagProps } from "element-plus" -import { computed, defineComponent } from "vue" +import { ElTag, type TagProps } from "element-plus" +import { computed, defineComponent, type StyleValue } from "vue" import ItemInput from "./ItemInput" type Props = { @@ -26,9 +26,9 @@ export type ItemInstance = { function computeMergeTxt(mergedVal: number | string,): string { if (typeof mergedVal === 'number') { - return t(msg => msg.mergeRule.tagResult.level, { level: mergedVal + 1 }) + return t(msg => msg.rule.merge.tagResult.level, { level: mergedVal + 1 }) } - if (!mergedVal) return t(msg => msg.mergeRule.tagResult.blank) + if (!mergedVal) return t(msg => msg.rule.merge.tagResult.blank) return mergedVal } @@ -38,6 +38,12 @@ function computeMergeType(mergedVal: number | string): TagProps["type"] | undefi return undefined } +const EDIT_ICON_STYLE: StyleValue = { + height: '14px', + width: '14px', + cursor: 'pointer', +} + const _default = defineComponent<Props>((props, ctx) => { const [origin, , refreshOrigin] = useShadow(() => props.origin) const [merged, , refreshMerged] = useShadow(() => props.merged, '') @@ -67,18 +73,23 @@ const _default = defineComponent<Props>((props, ctx) => { onCancel={handleCancel} /> ) : ( - <EditableTag - type={type.value} + <ElTag + size="large" closable={LOCAL_HOST_PATTERN !== origin.value} onClose={() => props.onDelete?.(props.origin)} - onEdit={openEditing} + type={type.value} > - <Flex gap={4}> - <span dir="ltr">{origin.value}</span> - <span>{'>>>'}</span> - <span>{mergeText.value}</span> + <Flex align="center" gap={7} style={{ marginInlineEnd: '-3px' }}> + <Flex gap={4}> + <span dir="ltr">{origin.value}</span> + <span>{'>>>'}</span> + <span>{mergeText.value}</span> + </Flex> + <Flex onClick={openEditing} > + <Edit style={EDIT_ICON_STYLE} /> + </Flex> </Flex> - </EditableTag> + </ElTag> ) }, { props: ['merged', 'onChange', 'onDelete', 'origin'] }) diff --git a/src/pages/app/components/RuleMerge/components/ItemInput.tsx b/src/pages/app/components/Rule/Merge/components/ItemInput.tsx similarity index 84% rename from src/pages/app/components/RuleMerge/components/ItemInput.tsx rename to src/pages/app/components/Rule/Merge/components/ItemInput.tsx index 7194c9dc3..97b20cef2 100644 --- a/src/pages/app/components/RuleMerge/components/ItemInput.tsx +++ b/src/pages/app/components/Rule/Merge/components/ItemInput.tsx @@ -5,9 +5,9 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { t } from '@app/locale' import { Check, Close } from "@element-plus/icons-vue" -import { useShadow } from "@hooks" +import { useShadow } from '@hooks' import Box from "@pages/components/Box" import { LOCAL_HOST_PATTERN } from "@util/constant/remain-host" import { tryParseInteger } from "@util/number" @@ -34,18 +34,18 @@ const _default = defineComponent<Props>(props => { else return mergedVal }, set(val: string) { - const newVal = tryParseInteger(val?.trim())[1] + const newVal = tryParseInteger(val.trim())[1] setMerged(typeof newVal === 'number' ? newVal - 1 : newVal) }, }) const handleSave = () => { const originVal = origin.value - const mergedVal = merged.value - if (originVal && mergedVal && isValidHost(originVal)) { + const mergedVal = merged.value ?? '' + if (originVal && isValidHost(originVal)) { props.onSave?.(originVal, mergedVal) } else { - ElMessage.warning(t(msg => msg.mergeRule.errorOrigin)) + ElMessage.warning(t(msg => msg.rule.merge.errorOrigin)) } } @@ -59,7 +59,7 @@ const _default = defineComponent<Props>(props => { <Box style={{ marginInlineEnd: props.end ? 'auto' : undefined }}> <ElInput modelValue={origin.value} - placeholder={t(msg => msg.mergeRule.originPlaceholder)} + placeholder={t(msg => msg.rule.merge.originPlaceholder)} clearable onClear={() => setOrigin('')} onInput={setOrigin} @@ -68,7 +68,7 @@ const _default = defineComponent<Props>(props => { /> <ElInput modelValue={mergedTxt.value} - placeholder={t(msg => msg.mergeRule.mergedPlaceholder)} + placeholder={t(msg => msg.rule.merge.mergedPlaceholder)} clearable onClear={() => mergedTxt.value = ''} onInput={val => mergedTxt.value = val} diff --git a/src/pages/app/components/Rule/Merge/index.tsx b/src/pages/app/components/Rule/Merge/index.tsx new file mode 100644 index 000000000..e9624c88b --- /dev/null +++ b/src/pages/app/components/Rule/Merge/index.tsx @@ -0,0 +1,38 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { PSL_HOMEPAGE } from '@util/constant/url' +import type { FunctionalComponent, StyleValue } from "vue" +import AlertBox from '../AlertBox' +import ItemList from "./ItemList" + +const pslStyle: StyleValue = { + fontSize: "var(--el-alert-description-font-size)", + color: "var(--el-color-info)", + marginInline: "2px", +} + +const Merge: FunctionalComponent = () => ( + <AlertBox + title={msg => msg.rule.merge.infoAlertTitle} + lines={[ + msg => msg.rule.merge.infoAlert0, + msg => msg.rule.merge.infoAlert1, + msg => msg.rule.merge.infoAlert2, + msg => msg.rule.merge.infoAlert3, + msg => msg.rule.merge.infoAlert4, + [msg => msg.rule.merge.infoAlert5, { + psl: <a href={PSL_HOMEPAGE} style={pslStyle} target="_blank" >Public Suffix List</a> + }], + ]} + > + <ItemList /> + </AlertBox> +) +Merge.displayName = 'Merge' + +export default Merge diff --git a/src/pages/app/components/Rule/Whitelist.tsx b/src/pages/app/components/Rule/Whitelist.tsx new file mode 100644 index 000000000..c25666e07 --- /dev/null +++ b/src/pages/app/components/Rule/Whitelist.tsx @@ -0,0 +1,35 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { listWhitelist, saveWhitelist } from '@api/sw/whitelist' +import { useDocumentVisibility, useManualRequest, useRequest } from '@hooks' +import CondEditor from '@pages/components/CondEditor' +import { defineComponent } from "vue" +import AlertBox from './AlertBox' + +const PLACEHOLDER = 'e.g. github.com, +github.com/sheepzh/**, *.youtube.com, __local_pdf__' + +const Whitelist = defineComponent<{}>(() => { + const docVisible = useDocumentVisibility() + const { data, refresh } = useRequest(listWhitelist, { defaultValue: [], deps: [docVisible] }) + const { refresh: handleChange } = useManualRequest(saveWhitelist, { onSuccess: refresh }) + + return () => ( + <AlertBox + title={msg => msg.rule.white.infoAlertTitle} + lines={[ + msg => msg.rule.white.infoAlert0, + msg => msg.rule.white.infoAlert1, + msg => msg.rule.white.infoAlert2, + ]} + > + <CondEditor modelValue={data.value} onChange={handleChange} placeholder={PLACEHOLDER} /> + </AlertBox> + ) +}) + +export default Whitelist diff --git a/src/pages/app/components/Rule/index.tsx b/src/pages/app/components/Rule/index.tsx new file mode 100644 index 000000000..0d732861f --- /dev/null +++ b/src/pages/app/components/Rule/index.tsx @@ -0,0 +1,62 @@ +import { t } from '@app/locale' +import { ElTabPane, ElTabs } from 'element-plus' +import { createStringUnionGuard } from 'typescript-guard' +import { computed, defineComponent, type StyleValue } from 'vue' +import { useRoute, useRouter, type LocationQuery } from 'vue-router' +import ContentContainer from '../common/ContentContainer' +import Merge from './Merge' +import Whitelist from './Whitelist' + +type RuleTab = 'white' | 'merge' +const isTab = createStringUnionGuard<RuleTab>('white', 'merge') + +const PARAM = "i" + +export const useTab = () => { + const route = useRoute() + const router = useRouter() + + const tab = computed<RuleTab, RuleTab>({ + set(value: RuleTab) { + const oldQuery = route.query + const query: LocationQuery = { + ...oldQuery, + [PARAM]: value, + } + router.replace({ query }) + }, + get() { + const query = route.query[PARAM] + const queryVal = Array.isArray(query) ? query[0] : query + return isTab(queryVal) ? queryVal : 'white' + }, + }) + + const setTab = (value: unknown) => isTab(value) && (tab.value = value) + + return { tab, setTab } +} + +const Rule = defineComponent<{}>(() => { + const { tab, setTab } = useTab() + + return () => ( + <ContentContainer> + <ElTabs + modelValue={tab.value} + onTabChange={setTab} + type='border-card' + style={{ flex: 1 } satisfies StyleValue} + > + <ElTabPane name='white' label={t(msg => msg.rule.white.label)}> + <Whitelist /> + </ElTabPane> + <ElTabPane name='merge' label={t(msg => msg.rule.merge.label)}> + <Merge /> + </ElTabPane> + </ElTabs> + </ContentContainer> + ) +}) + +export default Rule \ No newline at end of file diff --git a/src/pages/app/components/RuleMerge/index.tsx b/src/pages/app/components/RuleMerge/index.tsx deleted file mode 100644 index 0097a322b..000000000 --- a/src/pages/app/components/RuleMerge/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import AlertLines from '@app/components/common/AlertLines' -import Flex from "@pages/components/Flex" -import { PSL_HOMEPAGE } from '@util/constant/url' -import { ElCard } from "element-plus" -import type { FunctionalComponent, StyleValue } from "vue" -import ContentContainer from "../common/ContentContainer" -import ItemList from "./ItemList" - -const pslStyle: StyleValue = { - fontSize: "var(--el-alert-description-font-size)", - color: "var(--el-color-info)", - marginInline: "2px", -} - -const RuleMerge: FunctionalComponent = () => ( - <ContentContainer> - <ElCard> - <Flex column gap={20}> - <AlertLines - title={msg => msg.mergeRule.infoAlertTitle} - lines={[ - msg => msg.mergeRule.infoAlert0, - msg => msg.mergeRule.infoAlert1, - msg => msg.mergeRule.infoAlert2, - msg => msg.mergeRule.infoAlert3, - msg => msg.mergeRule.infoAlert4, - [msg => msg.mergeRule.infoAlert5, { - psl: <a href={PSL_HOMEPAGE} style={pslStyle} target="_blank" >Public Suffix List</a> - }], - ]} - /> - <ItemList /> - </Flex> - </ElCard> - </ContentContainer> -) -RuleMerge.displayName = 'RuleMerge' - -export default RuleMerge diff --git a/src/pages/app/components/SiteManage/Modify/HostSelect.tsx b/src/pages/app/components/SiteManage/Modify/HostSelect.tsx new file mode 100644 index 000000000..3ad646b05 --- /dev/null +++ b/src/pages/app/components/SiteManage/Modify/HostSelect.tsx @@ -0,0 +1,69 @@ +/** + * Copyright (c) 2022 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ +import { searchSite } from '@api/sw/site' +import { t } from '@app/locale' +import { useManualRequest } from '@hooks' +import { identifySiteKey, parseSiteIdentity } from '@util/site' +import { ElOption, ElSelect, ElTag } from "element-plus" +import { computed, defineComponent } from "vue" + +type Props = ModelValue<tt4b.site.SiteKey | undefined> + +const EXIST_MSG = t(msg => msg.siteManage.msg.existedTag) +const MERGED_MSG = t(msg => msg.siteManage.type.merged?.name)?.toLocaleUpperCase?.() +const VIRTUAL_MSG = t(msg => msg.siteManage.type.virtual?.name)?.toLocaleUpperCase?.() + +/** + * Calculate the label of alias key to display + * + * @returns + * 1. www.google.com + * 2. www.google.com[MERGED] + * 4. www.google.com[EXISTED] + * 5. www.github.com/sheepzh/*[VIRTUAL] + * 5. www.github.com/sheepzh/*[VIRTUAL-EXISTED] + * 3. www.google.com[MERGED-EXISTED] + */ +function labelOf(site: tt4b.site.SiteInfo): string { + let { host: label, type, alias } = site + const suffix: string[] = [] + type === 'merged' && suffix.push(MERGED_MSG) + type === 'virtual' && suffix.push(VIRTUAL_MSG) + alias && suffix.push(EXIST_MSG) + suffix.length && (label += `[${suffix.join('-')}]`) + return label +} + +const _default = defineComponent<Props>(props => { + const value = computed(() => identifySiteKey(props.modelValue)) + const { data: options, loading: searching, refresh: searchOption } = useManualRequest( + searchSite, { defaultValue: [] } + ) + + return () => ( + <ElSelect + style={{ width: '100%' }} + modelValue={value.value} + filterable + remote + loading={searching.value} + remoteMethod={searchOption} + onChange={val => props.onChange?.(parseSiteIdentity(val) ?? { host: '', type: 'normal' })} + > + {options.value.map(row => ( + <ElOption value={identifySiteKey(row)} disabled={!!row.alias} label={labelOf(row)}> + <span>{row.host}</span> + <ElTag v-show={row.type === 'merged'} size="small">{MERGED_MSG}</ElTag> + <ElTag v-show={row.type === 'virtual'} size="small">{VIRTUAL_MSG}</ElTag> + <ElTag v-show={!!row.alias} size="small" type="info">{EXIST_MSG}</ElTag> + </ElOption> + ))} + </ElSelect> + ) +}, { props: ['modelValue', 'onChange'] }) + +export default _default diff --git a/src/pages/app/components/SiteManage/SiteManageModify/index.tsx b/src/pages/app/components/SiteManage/Modify/index.tsx similarity index 74% rename from src/pages/app/components/SiteManage/SiteManageModify/index.tsx rename to src/pages/app/components/SiteManage/Modify/index.tsx index bab96b087..1949a4026 100644 --- a/src/pages/app/components/SiteManage/SiteManageModify/index.tsx +++ b/src/pages/app/components/SiteManage/Modify/index.tsx @@ -4,14 +4,14 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { sendMsg2Runtime } from '@api/sw/common' +import CategorySelect from '@app/components/common/Category/Select' +import { t } from '@app/locale' import { Check } from "@element-plus/icons-vue" -import { useSwitch } from "@hooks" -import siteService from "@service/site-service" +import { useSwitch } from '@hooks' import { supportCategory } from "@util/site" import { ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElMessage, type FormInstance, type FormItemRule } from "element-plus" import { computed, defineComponent, reactive, ref } from "vue" -import CategorySelect from "../../common/category/CategorySelect" import HostSelect from "./HostSelect" export type ModifyInstance = { @@ -22,7 +22,7 @@ type _FormData = { /** * Value of alias key */ - key: timer.site.SiteKey | undefined + key: tt4b.site.SiteKey | undefined alias: string | undefined category: number | undefined } @@ -49,21 +49,6 @@ function validateForm(form: FormInstance | undefined): Promise<boolean> { }) } -async function handleAdd(siteInfo: timer.site.SiteInfo): Promise<boolean> { - const existed = await siteService.exist(siteInfo) - if (existed) { - ElMessage({ - type: 'warning', - message: t(msg => msg.siteManage.msg.hostExistWarn, { host: siteInfo.host }), - showClose: true, - duration: 1600 - }) - } else { - await siteService.add(siteInfo) - } - return !existed -} - const initData = (): _FormData => ({ key: undefined, alias: undefined, @@ -82,21 +67,20 @@ const _default = defineComponent<{ onSave: NoArgCallback }>((props, ctx) => { } ctx.expose({ add } satisfies ModifyInstance) - const handleSave = async () => { - const valid: boolean = await validateForm(form.value) + const handleAdd = async () => { + const valid = await validateForm(form.value) if (!valid) return false let { key: siteKey, alias } = formData if (!siteKey) return false alias = alias?.trim() - const siteInfo: timer.site.SiteInfo = { ...siteKey, alias, cate: formData.category } - const saved = await handleAdd(siteInfo) - if (saved) { - close() - ElMessage.success(t(msg => msg.operation.successMsg)) - props.onSave?.() - } + const siteInfo: tt4b.site.SiteInfo = { ...siteKey, alias, cate: formData.category } + const errMsg = await sendMsg2Runtime('site.add', siteInfo) + if (errMsg) return ElMessage.warning(errMsg) + close() + ElMessage.success(t(msg => msg.operation.successMsg)) + props.onSave?.() } return () => ( @@ -108,13 +92,13 @@ const _default = defineComponent<{ onSave: NoArgCallback }>((props, ctx) => { onClose={close} v-slots={{ footer: () => ( - <ElButton type="primary" icon={Check} onClick={handleSave}> + <ElButton type="primary" icon={Check} onClick={handleAdd}> {t(msg => msg.button.save)} </ElButton> ) }} > - <ElForm model={formData} rules={formRule} ref={form}> + <ElForm model={formData} rules={formRule} ref={form} labelWidth={130}> <ElFormItem prop="key" label={t(msg => msg.item.host)}> <HostSelect modelValue={formData.key} onChange={val => formData.key = val} /> </ElFormItem> @@ -122,7 +106,7 @@ const _default = defineComponent<{ onSave: NoArgCallback }>((props, ctx) => { <ElInput modelValue={formData.alias} onInput={val => formData.alias = val} - onKeydown={ev => (ev as KeyboardEvent).key === "Enter" && handleSave()} + onKeydown={ev => ev instanceof KeyboardEvent && ev.key === "Enter" && handleAdd()} /> </ElFormItem> {showCate.value && ( diff --git a/src/pages/app/components/SiteManage/SiteManageFilter.tsx b/src/pages/app/components/SiteManage/SiteManageFilter.tsx index 7d18a6ecf..bd81bfbee 100644 --- a/src/pages/app/components/SiteManage/SiteManageFilter.tsx +++ b/src/pages/app/components/SiteManage/SiteManageFilter.tsx @@ -4,16 +4,16 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import ButtonFilterItem from "@app/components/common/filter/ButtonFilterItem" -import InputFilterItem from "@app/components/common/filter/InputFilterItem" -import { useCategories } from "@app/context" -import { t } from "@app/locale" +import { useCategory } from "@app/context" +import { t } from '@app/locale' import { Connection, Delete, Grid, Plus } from "@element-plus/icons-vue" import Flex from "@pages/components/Flex" import { computed, defineComponent, watch } from "vue" -import DropdownButton, { type DropdownButtonItem } from "../common/DropdownButton" -import CategoryFilter from "../common/filter/CategoryFilter" -import MultiSelectFilterItem from "../common/filter/MultiSelectFilterItem" +import DropdownButton, { type DropdownButtonItem } from '../common/DropdownButton' +import ButtonFilterItem from "../common/filter/ButtonFilterItem" +import CategoryFilter from '../common/filter/CategoryFilter' +import InputFilterItem from "../common/filter/InputFilterItem" +import MultiSelectFilterItem from '../common/filter/MultiSelectFilterItem' import { ALL_TYPES } from "./common" import { useSiteManageFilter } from './useSiteManage' @@ -25,7 +25,7 @@ const _default = defineComponent<{ onBatchDisassociate: NoArgCallback onBatchDelete: NoArgCallback }>(props => { - const { categories } = useCategories() + const cate = useCategory() const filter = useSiteManageFilter() const cateDisabled = computed(() => { @@ -34,8 +34,8 @@ const _default = defineComponent<{ }) watch(cateDisabled, () => cateDisabled.value && (filter.cateIds = [])) - watch(categories, () => { - const allCateIds = categories.value?.map(c => c.id) || [] + watch(cate.all, () => { + const allCateIds = cate.all.map(c => c.id) const newVal = filter.cateIds?.filter(cid => allCateIds.includes(cid)) // If selected category is deleted, then reset the value newVal?.length !== filter.cateIds?.length && (filter.cateIds = newVal) @@ -59,8 +59,8 @@ const _default = defineComponent<{ }] return () => ( - <Flex gap={10} justify="space-between"> - <Flex gap={10}> + <Flex gap={10} justify="space-between" wrap> + <Flex gap={10} wrap> <InputFilterItem placeholder={`${t(msg => msg.item.host)} / ${t(msg => msg.siteManage.column.alias)}`} onSearch={val => filter.query = val} @@ -69,8 +69,8 @@ const _default = defineComponent<{ <MultiSelectFilterItem placeholder={t(msg => msg.siteManage.column.type)} options={ALL_TYPES.map(type => ({ value: type, label: t(msg => msg.siteManage.type[type].name) }))} - defaultValue={filter.types} - onChange={val => filter.types = val as timer.site.Type[]} + defaultValue={filter.types ?? []} + onChange={val => filter.types = val as tt4b.site.Type[]} /> <CategoryFilter disabled={cateDisabled.value} @@ -81,7 +81,7 @@ const _default = defineComponent<{ <Flex gap={10}> <DropdownButton items={items} /> <ButtonFilterItem - text={t(msg => msg.button.create)} + text={msg => msg.button.create} icon={Plus} type="success" onClick={props.onCreate} @@ -89,6 +89,6 @@ const _default = defineComponent<{ </Flex> </Flex> ) -}) +}, { props: ['onBatchChangeCate', 'onBatchDelete', 'onBatchDisassociate', 'onCreate'] }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/SiteManage/SiteManageModify/HostSelect.tsx b/src/pages/app/components/SiteManage/SiteManageModify/HostSelect.tsx deleted file mode 100644 index ad7b9b171..000000000 --- a/src/pages/app/components/SiteManage/SiteManageModify/HostSelect.tsx +++ /dev/null @@ -1,105 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { useManualRequest } from "@hooks" -import siteService from "@service/site-service" -import statService from "@service/stat-service" -import { MERGED_HOST, ALL_HOSTS as REMAIN_HOSTS } from "@util/constant/remain-host" -import { isValidVirtualHost, judgeVirtualFast } from "@util/pattern" -import { ElOption, ElSelect, ElTag } from "element-plus" -import { computed, defineComponent } from "vue" -import { cvt2OptionValue, cvt2SiteKey, EXIST_MSG, labelOf, MERGED_MSG, VIRTUAL_MSG } from "../common" - -type _OptionInfo = { - siteKey: timer.site.SiteKey - hasAlias: boolean -} - -function cleanQuery(query: string) { - try { - const url = new URL(query) - const { host, pathname } = url - query = host + pathname - } catch { - } - if (query.endsWith('/')) query += '**' - return query -} - -async function handleRemoteSearch(query: string): Promise<_OptionInfo[]> { - query = cleanQuery(query) - if (!query) return [] - const { normal, merged } = await statService.listHosts(query) - const allAlias: timer.site.SiteKey[] = [ - ...normal.map(host => ({ host, type: 'normal' } satisfies timer.site.SiteKey)), - ...merged.map(host => ({ host, type: 'merged' } satisfies timer.site.SiteKey)), - ] - // Add local files - REMAIN_HOSTS.filter(h => h.includes(query)).forEach(remain => allAlias.push({ host: remain, type: 'normal' })) - MERGED_HOST.includes(query) && allAlias.push({ host: MERGED_HOST, type: 'merged' }) - const existedAliasSet = new Set() - const existedKeys = await siteService.existBatch(allAlias) - existedKeys.forEach(key => existedAliasSet.add(cvt2OptionValue(key))) - const existedOptions: _OptionInfo[] = [] - const notExistedOptions: _OptionInfo[] = [] - allAlias.forEach(siteKey => { - const hasAlias = existedAliasSet.has(cvt2OptionValue(siteKey)) - const props: _OptionInfo = { siteKey, hasAlias } - hasAlias ? existedOptions.push(props) : notExistedOptions.push(props) - }) - - const originalOptions = [...notExistedOptions, ...existedOptions] - - const result: _OptionInfo[] = [] - const existIdx = originalOptions.findIndex(o => o.siteKey?.host === query) - if (existIdx === -1) { - // Not exist host, insert site into the first - const isVirtual = judgeVirtualFast(query) - if (isVirtual) { - isValidVirtualHost(query) && result.push({ siteKey: { host: query, type: 'virtual' }, hasAlias: false }) - } else { - result.push({ siteKey: { host: query, type: 'normal' }, hasAlias: false }) - } - result.push(...originalOptions) - } else { - result.push(originalOptions[existIdx]) - originalOptions.forEach((opt, idx) => idx !== existIdx && result.push(opt)) - } - return result -} - -type Props = { - modelValue: timer.site.SiteKey | undefined - onChange?: (_siteKey: timer.site.SiteKey | undefined) => void -} - -const _default = defineComponent<Props>(props => { - const value = computed(() => cvt2OptionValue(props.modelValue)) - const { data: options, loading: searching, refresh: searchOption } = useManualRequest(handleRemoteSearch) - - return () => ( - <ElSelect - style={{ width: '100%' }} - modelValue={value.value} - filterable - remote - loading={searching.value} - remoteMethod={searchOption} - onChange={val => props.onChange?.(cvt2SiteKey(val))} - > - {options.value?.map(({ siteKey, hasAlias }) => ( - <ElOption value={cvt2OptionValue(siteKey)} disabled={hasAlias} label={labelOf(siteKey, hasAlias)}> - <span>{siteKey.host}</span> - <ElTag v-show={siteKey.type === 'merged'} size="small">{MERGED_MSG}</ElTag> - <ElTag v-show={siteKey.type === 'virtual'} size="small">{VIRTUAL_MSG}</ElTag> - <ElTag v-show={hasAlias} size="small" type="info">{EXIST_MSG}</ElTag> - </ElOption> - ))} - </ElSelect> - ) -}, { props: ['modelValue', 'onChange'] }) - -export default _default diff --git a/src/pages/app/components/SiteManage/SiteManageTable/column/AliasColumn.tsx b/src/pages/app/components/SiteManage/SiteManageTable/column/AliasColumn.tsx deleted file mode 100644 index f127eb7a9..000000000 --- a/src/pages/app/components/SiteManage/SiteManageTable/column/AliasColumn.tsx +++ /dev/null @@ -1,109 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import Editable from "@app/components/common/Editable" -import { t } from "@app/locale" -import { MagicStick } from "@element-plus/icons-vue" -import Flex from "@pages/components/Flex" -import siteService from "@service/site-service" -import { getSuffix as getPslSuffix } from "@util/psl" -import { identifySiteKey, SiteMap } from "@util/site" -import { ElIcon, ElMessage, ElPopconfirm, ElTableColumn, ElText } from "element-plus" -import { toUnicode as punyCode2Unicode } from "punycode" -import { defineComponent, type StyleValue } from "vue" -import { useSiteManageTable } from '../../useSiteManage' - -function cvt2Alias(part: string): string { - let decoded = part - try { - decoded = punyCode2Unicode(part) - } catch { - } - return decoded.charAt(0).toUpperCase() + decoded.slice(1) -} - -export function genInitialAlias(site: timer.site.SiteInfo): string | undefined { - const { host, alias, type } = site || {} - if (alias) return - if (type !== 'normal') return - let parts = host.split('.') - if (parts.length < 2) return - - const suffix = getPslSuffix(host) - const prefix = host.replace(`.${suffix}`, '').replace(/^www\./, '') - parts = prefix.split('.') - return parts.reverse().map(cvt2Alias).join(' ') -} - -const AliasColumn = defineComponent<{}>(() => { - const { pagination, refresh } = useSiteManageTable() - - const handleChange = async (newAlias: string | undefined, row: timer.site.SiteInfo) => { - newAlias = newAlias?.trim?.() - row.alias = newAlias - if (newAlias) { - await siteService.saveAlias(row, newAlias) - } else { - await siteService.removeAlias(row) - } - refresh() - } - - const handleBatchGenerate = async () => { - let data = pagination.value?.list - if (!data?.length) { - return ElMessage.info("No data") - } - const toSave = new SiteMap<string>() - const items = await siteService.batchSelect(data) - items.filter(i => !i.alias).forEach(site => { - const newAlias = genInitialAlias(site) - newAlias && toSave.put(site, newAlias) - }) - await siteService.batchSaveAliasNoRewrite(toSave) - refresh() - ElMessage.success(t(msg => msg.operation.successMsg)) - } - - return () => ( - <ElTableColumn - minWidth={160} - align="center" - v-slots={{ - header: () => ( - <Flex justify="center" align="center" gap={4}> - <span>{t(msg => msg.siteManage.column.alias)}</span> - <ElPopconfirm - title={t(msg => msg.siteManage.genAliasConfirmMsg)} - width={400} - onConfirm={handleBatchGenerate} - v-slots={{ - reference: () => ( - <Flex height='100%'> - <ElText type="primary" style={{ cursor: 'pointer' } satisfies StyleValue}> - <ElIcon color="primary"> - <MagicStick /> - </ElIcon> - </ElText> - </Flex> - ) - }} - /> - </Flex> - ), - default: ({ row }: { row: timer.site.SiteInfo }) => <Editable - key={`${identifySiteKey(row)}_${row.alias}`} - modelValue={row.alias} - initialValue={genInitialAlias(row)} - onChange={val => handleChange(val, row)} - /> - }} - /> - ) -}) - -export default AliasColumn \ No newline at end of file diff --git a/src/pages/app/components/SiteManage/Table/column/AliasColumn.tsx b/src/pages/app/components/SiteManage/Table/column/AliasColumn.tsx new file mode 100644 index 000000000..2f2395ce1 --- /dev/null +++ b/src/pages/app/components/SiteManage/Table/column/AliasColumn.tsx @@ -0,0 +1,76 @@ +/** + * Copyright (c) 2021 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { changeSiteAlias, fillInitialAlias, getInitialAlias } from "@api/sw/site" +import Editable from "@app/components/common/Editable" +import { useSiteManageTable } from '@app/components/SiteManage/useSiteManage' +import { t } from '@app/locale' +import { MagicStick } from "@element-plus/icons-vue" +import { useManualRequest } from '@hooks' +import Flex from "@pages/components/Flex" +import { identifySiteKey } from "@util/site" +import { ElIcon, ElMessage, ElPopconfirm, ElTableColumn, ElText } from "element-plus" +import { defineComponent, type StyleValue } from "vue" + +const AliasColumn = defineComponent<{}>(() => { + const { pagination, refresh } = useSiteManageTable() + const { refresh: doChange } = useManualRequest(changeSiteAlias, { onSuccess: refresh }) + + const handleBatchGenerate = async () => { + let { list } = pagination.value + if (!list.length) return ElMessage.info("No data") + await fillInitialAlias(list) + refresh() + ElMessage.success(t(msg => msg.operation.successMsg)) + } + + const genInitialAlias = async ({ host, type, alias }: tt4b.site.SiteInfo) => { + if (alias) return alias + if (type === 'normal') return await getInitialAlias(host) + return undefined + } + + return () => ( + <ElTableColumn + minWidth={160} + align="center" + v-slots={{ + header: () => ( + <Flex justify="center" align="center" gap={4}> + <span>{t(msg => msg.siteManage.column.alias)}</span> + <ElPopconfirm + title={t(msg => msg.siteManage.genAliasConfirmMsg)} + width={400} + onConfirm={handleBatchGenerate} + v-slots={{ + reference: () => ( + <Flex height='100%'> + <ElText type="primary" style={{ cursor: 'pointer' } satisfies StyleValue}> + <ElIcon color="primary"> + <MagicStick /> + </ElIcon> + </ElText> + </Flex> + ) + }} + /> + </Flex> + ), + default: ({ row }: { row: tt4b.site.SiteInfo }) => ( + <Editable + key={`${identifySiteKey(row)}_${row.alias}`} + modelValue={row.alias} + initialValue={() => genInitialAlias(row)} + onChange={val => doChange(row, val)} + /> + ) + }} + /> + ) +}) + +export default AliasColumn \ No newline at end of file diff --git a/src/pages/app/components/SiteManage/SiteManageTable/column/OperationColumn.tsx b/src/pages/app/components/SiteManage/Table/column/OperationColumn.tsx similarity index 60% rename from src/pages/app/components/SiteManage/SiteManageTable/column/OperationColumn.tsx rename to src/pages/app/components/SiteManage/Table/column/OperationColumn.tsx index 202495fac..5be59cbcd 100644 --- a/src/pages/app/components/SiteManage/SiteManageTable/column/OperationColumn.tsx +++ b/src/pages/app/components/SiteManage/Table/column/OperationColumn.tsx @@ -4,31 +4,31 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import PopupConfirmButton from "@app/components/common/PopupConfirmButton" -import { t } from "@app/locale" +import { deleteSites } from '@api/sw/site' +import PopupConfirmButton from '@app/components/common/PopupConfirmButton' +import { useSiteManageTable } from '@app/components/SiteManage/useSiteManage' +import { t } from '@app/locale' import { Delete } from "@element-plus/icons-vue" -import { type ElTableRowScope } from "@pages/element-ui/table" -import siteService from "@service/site-service" -import { ElTableColumn } from "element-plus" +import { useManualRequest } from '@hooks' +import { ElTableColumn, type RenderRowData } from "element-plus" import { defineComponent } from "vue" -import { useSiteManageTable } from '../../useSiteManage' const OperationColumn = defineComponent<{}>(() => { const { refresh } = useSiteManageTable() - const handleConfirm = (key: timer.site.SiteKey) => siteService.remove(key).then(refresh).catch(() => { }) + const { refresh: doDelete } = useManualRequest<[tt4b.site.SiteKey], void>(deleteSites, { onSuccess: refresh }) return () => ( <ElTableColumn width={150} label={t(msg => msg.button.operation)} align="center" v-slots={ - ({ row }: ElTableRowScope<timer.site.SiteInfo>) => ( + ({ row }: RenderRowData<tt4b.site.SiteInfo>) => ( <PopupConfirmButton buttonIcon={Delete} buttonType="danger" buttonText={t(msg => msg.button.delete)} confirmText={t(msg => msg.siteManage.deleteConfirmMsg, { host: row.host })} - onConfirm={() => handleConfirm(row)} + onConfirm={() => doDelete(row)} /> )} /> diff --git a/src/pages/app/components/SiteManage/SiteManageTable/column/TypeColumn.tsx b/src/pages/app/components/SiteManage/Table/column/TypeColumn.tsx similarity index 69% rename from src/pages/app/components/SiteManage/SiteManageTable/column/TypeColumn.tsx rename to src/pages/app/components/SiteManage/Table/column/TypeColumn.tsx index fbfc1da7b..9f66a66e8 100644 --- a/src/pages/app/components/SiteManage/SiteManageTable/column/TypeColumn.tsx +++ b/src/pages/app/components/SiteManage/Table/column/TypeColumn.tsx @@ -1,14 +1,13 @@ -import ColumnHeader from "@app/components/common/ColumnHeader" -import { t } from "@app/locale" -import { type ElTableRowScope } from "@pages/element-ui/table" -import { ElTableColumn, ElTag, type TagProps } from "element-plus" +import ColumnHeader from '@app/components/common/ColumnHeader' +import { ALL_TYPES } from "@app/components/SiteManage/common" +import { t } from '@app/locale' +import { ElTableColumn, ElTag, type RenderRowData, type TagProps } from "element-plus" import { type FunctionalComponent } from "vue" import type { JSX } from "vue/jsx-runtime" -import { ALL_TYPES } from "../../common" -const computeText = ({ type }: timer.site.SiteInfo): string => t(msg => msg.siteManage.type[type].name) +const computeText = ({ type }: tt4b.site.SiteInfo): string => t(msg => msg.siteManage.type[type].name) -function computeType({ type }: timer.site.SiteInfo): TagProps["type"] | undefined { +function computeType({ type }: tt4b.site.SiteInfo): TagProps["type"] | undefined { switch (type) { case 'merged': return 'info' case 'virtual': return 'success' @@ -35,7 +34,7 @@ const TypeColumn: FunctionalComponent = () => ( }} /> ), - default: ({ row }: ElTableRowScope<timer.site.SiteInfo>) => ( + default: ({ row }: RenderRowData<tt4b.site.SiteInfo>) => ( <ElTag size="small" type={computeType(row)}> {computeText(row)} </ElTag> diff --git a/src/pages/app/components/SiteManage/SiteManageTable/index.tsx b/src/pages/app/components/SiteManage/Table/index.tsx similarity index 53% rename from src/pages/app/components/SiteManage/SiteManageTable/index.tsx rename to src/pages/app/components/SiteManage/Table/index.tsx index 1dcebc3f0..c8a9933e5 100644 --- a/src/pages/app/components/SiteManage/SiteManageTable/index.tsx +++ b/src/pages/app/components/SiteManage/Table/index.tsx @@ -4,54 +4,36 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import HostAlert from "@app/components/common/HostAlert" -import { t } from "@app/locale" +import { changeSiteRun, deleteSiteIcon } from '@api/sw/site' +import Category from '@app/components/common/Category' +import HostAlert from '@app/components/common/HostAlert' +import { t } from '@app/locale' import Flex from "@pages/components/Flex" -import { type ElTableRowScope } from "@pages/element-ui/table" -import siteService from "@service/site-service" -import { SiteMap } from "@util/site" -import { ElMessage, ElSwitch, ElTable, ElTableColumn } from "element-plus" +import Img from '@pages/components/Img' +import { ElSwitch, ElTable, ElTableColumn, type RenderRowData } from "element-plus" import { defineComponent } from "vue" -import Category from "../../common/category/CategoryEditable" import { useSiteManageTable } from '../useSiteManage' -import AliasColumn, { genInitialAlias } from "./column/AliasColumn" +import AliasColumn from "./column/AliasColumn" import OperationColumn from "./column/OperationColumn" import TypeColumn from "./column/TypeColumn" const _default = defineComponent<{}>(() => { const { setSelected, refresh, pagination } = useSiteManageTable() - const handleIconError = async (row: timer.site.SiteInfo) => { - await siteService.removeIconUrl(row) + const handleIconError = async (row: tt4b.site.SiteInfo) => { + await deleteSiteIcon(row) row.iconUrl = undefined } - const handleRunChange = async (val: boolean, row: timer.site.SiteInfo) => { - // Save - await siteService.saveRun(row, val) + const handleRunChange = async (val: boolean, row: tt4b.site.SiteInfo) => { + await changeSiteRun(row, val) row.run = val refresh() } - const handleBatchGenerate = async () => { - let data = pagination.value?.list - if (!data?.length) { - return ElMessage.info("No data") - } - const toSave = new SiteMap<string>() - const items = await siteService.batchSelect(data) - items.filter(i => !i.alias).forEach(site => { - const newAlias = genInitialAlias(site) - newAlias && toSave.put(site, newAlias) - }) - await siteService.batchSaveAliasNoRewrite(toSave) - refresh() - ElMessage.success(t(msg => msg.operation.successMsg)) - } - return () => ( <ElTable - data={pagination.value?.list} + data={pagination.value.list} height="100%" highlightCurrentRow border fit onSelection-change={setSelected} @@ -61,7 +43,7 @@ const _default = defineComponent<{}>(() => { label={t(msg => msg.item.host)} minWidth={220} align="center" - v-slots={({ row }: ElTableRowScope<timer.site.SiteInfo>) => ( + v-slots={({ row }: RenderRowData<tt4b.site.SiteInfo>) => ( <div style={{ margin: 'auto', width: 'fit-content' }}> <HostAlert value={row} /> </div> @@ -72,12 +54,12 @@ const _default = defineComponent<{}>(() => { label={t(msg => msg.siteManage.column.icon)} minWidth={100} align="center" - v-slots={({ row }: ElTableRowScope<timer.site.SiteInfo>) => { + v-slots={({ row }: RenderRowData<tt4b.site.SiteInfo>) => { const { iconUrl } = row || {} if (!iconUrl) return '' return ( <Flex align="center" justify="center"> - <img width={12} height={12} src={iconUrl} onError={() => handleIconError(row)} /> + <Img size={12} src={iconUrl} onError={() => handleIconError(row)} /> </Flex> ) }} @@ -87,12 +69,8 @@ const _default = defineComponent<{}>(() => { label={t(msg => msg.siteManage.column.cate)} minWidth={140} align="center" - v-slots={({ row }: ElTableRowScope<timer.site.SiteInfo>) => ( - <Category - siteKey={row} - cateId={row?.cate} - onChange={cateId => row.cate = cateId} - /> + v-slots={({ row }: RenderRowData<tt4b.site.SiteInfo>) => ( + <Category.Editable siteKey={row} modelValue={row?.cate} onChange={val => row.cate = val} /> )} /> <ElTableColumn @@ -100,7 +78,7 @@ const _default = defineComponent<{}>(() => { width={100} align="center" > - {({ row }: ElTableRowScope<timer.site.SiteInfo>) => row.type === 'normal' && ( + {({ row }: RenderRowData<tt4b.site.SiteInfo>) => row.type === 'normal' && ( <ElSwitch size="small" modelValue={row.run} diff --git a/src/pages/app/components/SiteManage/common.ts b/src/pages/app/components/SiteManage/common.ts index a3cfed2ca..f9575e095 100644 --- a/src/pages/app/components/SiteManage/common.ts +++ b/src/pages/app/components/SiteManage/common.ts @@ -5,62 +5,4 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" - -const MERGED_FLAG = 'm' -const VIRTUAL_FLAG = 'v' -const NONE_FLAG = '_' - -/** - * site key => option value - */ -export function cvt2OptionValue(siteKey: timer.site.SiteKey | undefined): string { - if (!siteKey) return '' - const { type } = siteKey - let flag = NONE_FLAG - type === 'merged' && (flag = MERGED_FLAG) - type === 'virtual' && (flag = VIRTUAL_FLAG) - return `${flag}${siteKey.host}` -} - -/** - * option value => site key - */ -export function cvt2SiteKey(optionValue: string): timer.site.SiteKey { - const flag = optionValue.substring(0, 1) - const host = optionValue.substring(1) - if (flag === MERGED_FLAG) { - return { host, type: 'merged' } - } else if (flag === VIRTUAL_FLAG) { - return { host, type: 'virtual' } - } else { - return { host, type: 'normal' } - } -} - -export const EXIST_MSG = t(msg => msg.siteManage.msg.existedTag) -export const MERGED_MSG = t(msg => msg.siteManage.type.merged?.name)?.toLocaleUpperCase?.() -export const VIRTUAL_MSG = t(msg => msg.siteManage.type.virtual?.name)?.toLocaleUpperCase?.() - -/** - * Calculate the label of alias key to display - * - * @returns - * 1. www.google.com - * 2. www.google.com[MERGED] - * 4. www.google.com[EXISTED] - * 5. www.github.com/sheepzh/*[VIRTUAL] - * 5. www.github.com/sheepzh/*[VIRTUAL-EXISTED] - * 3. www.google.com[MERGED-EXISTED] - */ -export function labelOf(siteKey: timer.site.SiteKey, exists?: boolean): string { - let { host: label, type } = siteKey || {} - const suffix: string[] = [] - type === 'merged' && suffix.push(MERGED_MSG) - type === 'virtual' && suffix.push(VIRTUAL_MSG) - exists && suffix.push(EXIST_MSG) - suffix.length && (label += `[${suffix.join('-')}]`) - return label -} - -export const ALL_TYPES: timer.site.Type[] = ['normal', 'merged', 'virtual'] \ No newline at end of file +export const ALL_TYPES: tt4b.site.Type[] = ['normal', 'merged', 'virtual'] \ No newline at end of file diff --git a/src/pages/app/components/SiteManage/index.tsx b/src/pages/app/components/SiteManage/index.tsx index fb8c35805..ec1513d15 100644 --- a/src/pages/app/components/SiteManage/index.tsx +++ b/src/pages/app/components/SiteManage/index.tsx @@ -5,20 +5,20 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" +import { changeSitesCate, deleteSites } from "@api/sw/site" +import { t } from '@app/locale' import { Check, Close, WarnTriangleFilled } from "@element-plus/icons-vue" -import { useState, useSwitch } from "@hooks" +import { useState, useSwitch } from '@hooks' import Flex from "@pages/components/Flex" -import siteService from "@service/site-service" import { supportCategory } from "@util/site" import { ElButton, ElDialog, ElForm, ElFormItem, ElMessage, ElMessageBox } from "element-plus" import { computed, defineComponent, markRaw, ref, type VNode } from "vue" -import ContentContainer from "../common/ContentContainer" -import Pagination from "../common/Pagination" -import CategorySelect from "../common/category/CategorySelect" -import SiteManageFilter from "./SiteManageFilter" -import Modify, { type ModifyInstance } from './SiteManageModify' -import SiteManageTable from "./SiteManageTable" +import Category from '../common/Category' +import ContentContainer from '../common/ContentContainer' +import Pagination from '../common/Pagination' +import Modify, { type ModifyInstance } from './Modify' +import Filter from "./SiteManageFilter" +import Table from "./Table" import { initSiteManage } from './useSiteManage' export default defineComponent(() => { @@ -29,15 +29,15 @@ export default defineComponent(() => { } = initSiteManage(() => loadingTarget.value?.el as HTMLElement | undefined) const modify = ref<ModifyInstance>() - const cateSupported = computed(() => selected?.value?.filter(supportCategory) || []) + const cateSupported = computed(() => selected.value.filter(supportCategory)) const [showCateChange, openCateChange, closeCateChange] = useSwitch(false) const [batchCate, setBatchCate] = useState<number>() const handleChangeCate = () => { - if (!selected.value?.length) { + if (!selected.value.length) { return ElMessage.info(t(msg => msg.siteManage.msg.noSelected)) } - if (!cateSupported.value?.length) { + if (!cateSupported.value.length) { return ElMessage.info(t(msg => msg.siteManage.msg.noSupported)) } setBatchCate() @@ -46,17 +46,16 @@ export default defineComponent(() => { const onCateChangeConfirm = async () => { const cateId = batchCate.value - if (!cateId) { - return ElMessage.warning("Category not selected") - } - await siteService.batchSaveCate(cateId, cateSupported.value) + if (!cateId) return ElMessage.warning("Category not selected") + + await changeSitesCate(cateId, ...cateSupported.value) ElMessage.success(t(msg => msg.operation.successMsg)) closeCateChange() refresh() } const handleDisassociate = () => { - if (!selected.value?.length) { + if (!selected.value.length) { return ElMessage.info(t(msg => msg.siteManage.msg.noSelected)) } ElMessageBox.confirm( @@ -67,15 +66,15 @@ export default defineComponent(() => { closeOnClickModal: true, } ).then(async () => { - const need2Clear = cateSupported.value?.filter(s => s.cate) - need2Clear?.length && await siteService.batchSaveCate(undefined, need2Clear) + const need2Clear = cateSupported.value.filter(s => s.cate) + need2Clear.length && await changeSitesCate(undefined, ...need2Clear) ElMessage.success(t(msg => msg.operation.successMsg)) refresh() }).catch(() => { }) } const handleBatchDelete = () => { - if (!selected.value?.length) { + if (!selected.value.length) { return ElMessage.info(t(msg => msg.siteManage.msg.noSelected)) } ElMessageBox.confirm( @@ -87,7 +86,7 @@ export default defineComponent(() => { icon: markRaw(WarnTriangleFilled), } ).then(async () => { - await siteService.remove(...(selected.value ?? [])) + await deleteSites(...(selected.value ?? [])) ElMessage.success(t(msg => msg.operation.successMsg)) refresh() }).catch(() => { }) @@ -95,7 +94,7 @@ export default defineComponent(() => { return () => <ContentContainer v-slots={{ filter: () => ( - <SiteManageFilter + <Filter onCreate={() => modify.value?.add?.()} onBatchChangeCate={handleChangeCate} onBatchDelete={handleBatchDelete} @@ -105,13 +104,13 @@ export default defineComponent(() => { content: () => <> <Flex ref={loadingTarget} column width="100%" height="100%" gap={23}> <Flex flex={1} height={0}> - <SiteManageTable /> + <Table /> </Flex> <Flex justify="center"> <Pagination disabled={loading.value} defaultValue={page} - total={pagination.value?.total || 0} + total={pagination.value.total} onChange={val => { page.num = val.num, page.size = val.size }} /> </Flex> @@ -126,7 +125,7 @@ export default defineComponent(() => { default: () => <> <ElForm> <ElFormItem label={t(msg => msg.siteManage.cate.name)} required> - <CategorySelect modelValue={batchCate.value} onChange={setBatchCate} /> + <Category.Select modelValue={batchCate.value} onChange={setBatchCate} /> </ElFormItem> </ElForm> </>, diff --git a/src/pages/app/components/SiteManage/useSiteManage.ts b/src/pages/app/components/SiteManage/useSiteManage.ts index 68a39cbbb..abc279462 100644 --- a/src/pages/app/components/SiteManage/useSiteManage.ts +++ b/src/pages/app/components/SiteManage/useSiteManage.ts @@ -1,10 +1,12 @@ -import { RequestOption, useLocalStorage, useProvide, useProvider, useRequest, useState } from '@hooks' -import siteService, { type SiteQueryParam } from '@service/site-service' -import { type Reactive, reactive, type ShallowRef, watch } from 'vue' +import { getSitePage } from '@api/sw/site' +import { isOptionalIntArray } from '@app/util/limit/types' +import { type RequestOption, useLocalStorage, useProvide, useProvider, useRequest, useState } from '@hooks' +import { createObjectGuard } from 'typescript-guard' +import { reactive, type ShallowRef, watch } from 'vue' type FilterOption = { query?: string - types?: timer.site.Type[] + types?: tt4b.site.Type[] cateIds?: number[] } @@ -12,30 +14,37 @@ type CacheValue = { cateIds?: number[] } +const isCacheValue = createObjectGuard<CacheValue>({ + cateIds: isOptionalIntArray, +}) + type Context = { - pagination: ShallowRef<timer.common.PageResult<timer.site.SiteInfo> | undefined> - filter: Reactive<FilterOption> - selected: ShallowRef<timer.site.SiteInfo[]> - setSelected: ArgCallback<timer.site.SiteInfo[]> + pagination: ShallowRef<tt4b.common.PageResult<tt4b.site.SiteInfo>> + filter: FilterOption + selected: ShallowRef<tt4b.site.SiteInfo[]> + setSelected: ArgCallback<tt4b.site.SiteInfo[]> refresh: NoArgCallback } const NAMESPACE = 'site-manage' export const initSiteManage = (loadingTarget: RequestOption<unknown, unknown[]>['loadingTarget']) => { - const [cache, setCache] = useLocalStorage<CacheValue>('site-manage-filter') + const [cache, setCache] = useLocalStorage<CacheValue>('site-manage-filter', isCacheValue) const filter = reactive<FilterOption>({ cateIds: cache?.cateIds }) watch(() => filter.cateIds, cateIds => setCache({ cateIds })) - const page = reactive<timer.common.PageQuery>({ num: 1, size: 20 }) - const [selected, setSelected] = useState<timer.site.SiteInfo[]>([]) + const page = reactive<tt4b.common.PageQuery>({ num: 1, size: 20 }) + const [selected, setSelected] = useState<tt4b.site.SiteInfo[]>([]) const { data: pagination, refresh, loading } = useRequest(() => { const { query: fuzzyQuery, cateIds, types } = filter - const param: SiteQueryParam = { fuzzyQuery, cateIds, types } - return siteService.selectByPage(param, page) - }, { loadingTarget, deps: [() => filter, () => page] }) + return getSitePage({ fuzzyQuery, cateIds, types }, page) + }, { + defaultValue: { list: [], total: 0 }, + loadingTarget, + deps: [() => filter, () => page], + }) useProvide<Context>(NAMESPACE, { pagination, filter, selected, setSelected, refresh }) diff --git a/src/pages/app/components/Whitelist/WhitePanel/AddButton.tsx b/src/pages/app/components/Whitelist/WhitePanel/AddButton.tsx deleted file mode 100644 index 310520863..000000000 --- a/src/pages/app/components/Whitelist/WhitePanel/AddButton.tsx +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { t } from "@app/locale" -import { useState, useSwitch } from "@hooks" -import { ElButton } from "element-plus" -import { defineComponent, StyleValue } from "vue" -import WhiteInput from './WhiteInput' - -type Props = { - onSave: (white: string) => Promise<boolean | undefined> -} - -const _default = defineComponent<Props>(({ onSave }) => { - const [editing, openEdit, closeEdit] = useSwitch(false) - const [white, _setWhite, resetWhite] = useState('') - - const handleAdd = () => { - resetWhite() - openEdit() - } - - return () => editing.value ? ( - <WhiteInput - defaultValue={white.value} - onSave={val => onSave(white.value = val).then(succ => succ && closeEdit())} - onCancel={closeEdit} - end - /> - ) : ( - <ElButton onClick={handleAdd} style={{ marginInlineEnd: 'auto' } satisfies StyleValue} > - {`+ ${t(msg => msg.button.create)}`} - </ElButton> - ) -}, { props: ['onSave'] }) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Whitelist/WhitePanel/WhiteInput.tsx b/src/pages/app/components/Whitelist/WhitePanel/WhiteInput.tsx deleted file mode 100644 index 8f5809940..000000000 --- a/src/pages/app/components/Whitelist/WhitePanel/WhiteInput.tsx +++ /dev/null @@ -1,106 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { t } from "@app/locale" -import { Check, CirclePlus, Close } from "@element-plus/icons-vue" -import { useRequest, useShadow } from "@hooks" -import Box from "@pages/components/Box" -import Flex from '@pages/components/Flex' -import siteService from "@service/site-service" -import { EXCLUDING_PREFIX, isRemainHost } from "@util/constant/remain-host" -import { isValidHost, judgeVirtualFast } from "@util/pattern" -import { ElButton, ElIcon, ElMessage, ElOption, ElSelect, ElTag } from "element-plus" -import { defineComponent, StyleValue } from "vue" - -type SearchItem = timer.site.SiteKey & { - exclude?: boolean -} - -async function remoteSearch(query: string): Promise<SearchItem[]> { - let exclude = false - if (query?.startsWith(EXCLUDING_PREFIX)) { - exclude = true - query = query.slice(1) - } - if (!query) return [] - - let sites: SearchItem[] = await siteService.selectAll({ fuzzyQuery: query }) - const idx = sites.findIndex(s => s.host === query) - - const target = idx >= 0 - // Move found item to the front - ? sites.splice(idx, 1)[0] - // Or create a new one if not found - : { host: query, type: judgeVirtualFast(query) ? 'virtual' : 'normal' } satisfies SearchItem - const result = [target, ...sites] - - result.forEach(s => s.exclude = exclude) - return result -} - -type Props = { - defaultValue?: string - onSave?: (white: string) => void - onCancel?: () => void - end?: boolean -} - -const _default = defineComponent<Props>(props => { - const [white, setWhite, resetWhite] = useShadow(() => props.defaultValue) - const { data: sites, refresh: search, loading: searching } = useRequest(remoteSearch) - - const handleSubmit = () => { - const val = white.value - if (!val) return - const host = val?.startsWith(EXCLUDING_PREFIX) ? val.substring(1) : val - if (isRemainHost(host) || isValidHost(host) || judgeVirtualFast(host)) { - props.onSave?.(val) - } else { - ElMessage.warning(t(msg => msg.whitelist.errorInput)) - } - } - const handleCancel = () => { - resetWhite() - props.onCancel?.() - } - - return () => ( - <Box style={{ marginInlineEnd: props.end ? 'auto' : undefined }}> - <ElSelect - style={{ width: '160px' }} - modelValue={white.value} - onChange={setWhite} - placeholder={t(msg => msg.item.host)} - clearable - onClear={() => setWhite(undefined)} - filterable - remote - loading={searching.value} - remoteMethod={search} - > - {sites.value?.map(({ host, type, exclude }) => <ElOption - key={`${exclude}${host}`} - value={exclude ? `${EXCLUDING_PREFIX}${host}` : host} - > - <Flex gap={2} align='center'> - <ElTag v-show={exclude} size="small" type='info'> - <ElIcon><CirclePlus /></ElIcon> - </ElTag> - <span>{host}</span> - <ElTag v-show={type === 'virtual'} size="small"> - {t(msg => msg.siteManage.type.virtual?.name)?.toLocaleUpperCase?.()} - </ElTag> - </Flex> - </ElOption>)} - </ElSelect> - <ElButton icon={Close} onClick={handleCancel} /> - <ElButton icon={Check} onClick={handleSubmit} style={{ marginInlineStart: 0 } satisfies StyleValue} /> - </Box> - ) -}, { props: ['defaultValue', 'onCancel', 'onSave', 'end'] }) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Whitelist/WhitePanel/WhiteItem.tsx b/src/pages/app/components/Whitelist/WhitePanel/WhiteItem.tsx deleted file mode 100644 index 26db89160..000000000 --- a/src/pages/app/components/Whitelist/WhitePanel/WhiteItem.tsx +++ /dev/null @@ -1,57 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import EditableTag, { type EditableTagProps } from "@app/components/common/EditableTag" -import { useShadow, useSwitch } from "@hooks" -import { EXCLUDING_PREFIX } from '@util/constant/remain-host' -import { judgeVirtualFast } from "@util/pattern" -import { computed, defineComponent } from "vue" -import WhiteInput from "./WhiteInput" - -type Props = { - white: string - onChange: (white: string) => Promise<boolean> - onDelete: (white: string) => void -} - -function computeType(white: string): EditableTagProps['type'] { - if (white.startsWith(EXCLUDING_PREFIX)) { - return 'info' - } else if (judgeVirtualFast(white)) { - return 'warning' - } else { - return 'primary' - } -} - -const _default = defineComponent<Props>(props => { - const [white, , resetWhite] = useShadow(() => props.white) - const type = computed(() => computeType(white.value)) - const [editing, openEditing, closeEditing] = useSwitch() - - const handleCancel = () => { - resetWhite() - closeEditing() - } - - return () => editing.value ? ( - <WhiteInput - defaultValue={white.value} - onSave={val => props.onChange?.(white.value = val)?.then(succ => succ && closeEditing())} - onCancel={handleCancel} - /> - ) : ( - <EditableTag - text={white.value} - onEdit={openEditing} - onClose={() => white.value && props.onDelete(white.value)} - type={type.value} - /> - ) -}, { props: ['white', 'onChange', 'onDelete'] }) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Whitelist/WhitePanel/index.tsx b/src/pages/app/components/Whitelist/WhitePanel/index.tsx deleted file mode 100644 index ac665afbf..000000000 --- a/src/pages/app/components/Whitelist/WhitePanel/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -import { t } from "@app/locale" -import Flex from "@pages/components/Flex" -import whitelistService from "@service/whitelist/service" -import { ElMessage, ElMessageBox } from "element-plus" -import { defineComponent, onBeforeMount, reactive } from "vue" -import AddButton from './AddButton' -import WhiteItem from './WhiteItem' - -const _default = defineComponent(() => { - const whitelist = reactive<string[]>([]) - onBeforeMount(() => whitelistService.listAll().then(l => whitelist.push(...l))) - - const handleChanged = async (val: string, index: number): Promise<boolean> => { - const duplicate = whitelist.find((white, i) => white === val && i !== index) - if (duplicate) { - ElMessage.warning(t(msg => msg.whitelist.duplicateMsg)) - // Reopen - return false - } - await whitelistService.remove(whitelist[index]) - await whitelistService.add(val) - whitelist[index] = val - ElMessage.success(t(msg => msg.operation.successMsg)) - return true - } - - const handleAdd = async (val: string): Promise<boolean> => { - const exists = whitelist.some(item => item === val) - if (exists) { - ElMessage.warning(t(msg => msg.whitelist.duplicateMsg)) - return false - } - - const msg = t(msg => msg.whitelist.addConfirmMsg, { url: val }) - const title = t(msg => msg.operation.confirmTitle) - return ElMessageBox.confirm(msg, title, { dangerouslyUseHTMLString: true }) - .then(async () => { - await whitelistService.add(val) - whitelist.push(val) - ElMessage.success(t(msg => msg.operation.successMsg)) - return true - }) - .catch(() => false) - } - - const handleClose = (whiteItem: string) => { - const confirmMsg = t(msg => msg.whitelist.removeConfirmMsg, { url: whiteItem }) - const confirmTitle = t(msg => msg.operation.confirmTitle) - ElMessageBox - .confirm(confirmMsg, confirmTitle, { dangerouslyUseHTMLString: true }) - .then(() => whitelistService.remove(whiteItem)) - .then(() => { - ElMessage.success(t(msg => msg.operation.successMsg)) - const index = whitelist.indexOf(whiteItem) - index !== -1 && whitelist.splice(index, 1) - }) - .catch(() => { }) - } - - return () => ( - <Flex gap={10} wrap justify="space-between"> - {whitelist.map((white, index) => ( - <WhiteItem - white={white} - onChange={val => handleChanged(val, index)} - onDelete={handleClose} - /> - ))} - <AddButton onSave={handleAdd} /> - </Flex> - ) -}) - -export default _default \ No newline at end of file diff --git a/src/pages/app/components/Whitelist/index.tsx b/src/pages/app/components/Whitelist/index.tsx deleted file mode 100644 index ba16cd5d0..000000000 --- a/src/pages/app/components/Whitelist/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import AlertLines from '@app/components/common/AlertLines' -import Flex from "@pages/components/Flex" -import { ElCard } from "element-plus" -import { type FunctionalComponent } from "vue" -import ContentContainer from "../common/ContentContainer" -import WhitePanel from "./WhitePanel" - -const Whitelist: FunctionalComponent = () => ( - <ContentContainer> - <ElCard> - <Flex gap={20} column> - <AlertLines - title={msg => msg.whitelist.infoAlertTitle} - lines={[ - msg => msg.whitelist.infoAlert0, - msg => msg.whitelist.infoAlert1, - msg => msg.whitelist.infoAlert2, - ]} - /> - <WhitePanel /> - </Flex> - </ElCard> - </ContentContainer> -) -Whitelist.displayName = 'Whitelist' - -export default Whitelist diff --git a/src/pages/app/components/common/AlertLines.tsx b/src/pages/app/components/common/AlertLines.tsx index bcb195419..a2597104b 100644 --- a/src/pages/app/components/common/AlertLines.tsx +++ b/src/pages/app/components/common/AlertLines.tsx @@ -4,6 +4,7 @@ import type { FunctionalComponent, StyleValue } from 'vue' const STYLE: StyleValue = { padding: "15px 25px", + lineHeight: "20px", } export type AlertLinesProps = { @@ -14,19 +15,19 @@ export type AlertLinesProps = { const AlertLines: FunctionalComponent<AlertLinesProps> = ({ lines, title, type }) => ( <ElAlert + key={type} type={type} title={typeof title === 'string' ? title : t(title)} closable={false} style={STYLE} > - {lines?.map(l => <li>{ - Array.isArray(l) - ? tN(l[0], l[1]) - : (typeof l === 'string' ? l : t(l)) - }</li>)} + {lines?.map((l, i) => ( + <li key={i}> + {Array.isArray(l) ? tN(l[0], l[1]) : (typeof l === 'string' ? l : t(l))} + </li> + ))} </ElAlert> ) - AlertLines.displayName = 'AlertLines' export default AlertLines \ No newline at end of file diff --git a/src/pages/app/components/common/Category/Editable.tsx b/src/pages/app/components/common/Category/Editable.tsx new file mode 100644 index 000000000..e1fc31ccd --- /dev/null +++ b/src/pages/app/components/common/Category/Editable.tsx @@ -0,0 +1,78 @@ +import { changeSitesCate } from '@api/sw/site' +import { useCategory } from "@app/context" +import { Edit } from "@element-plus/icons-vue" +import { useManualRequest, useSwitch } from "@hooks" +import Flex from "@pages/components/Flex" +import { supportCategory } from "@util/site" +import { ElIcon, ElTag } from "element-plus" +import { computed, defineComponent, nextTick, ref } from "vue" +import Select, { type Instance } from "./Select" + +type Props = ModelValue<number | undefined> & { + siteKey: tt4b.site.SiteKey +} + +const CategoryEditable = defineComponent<Props>(props => { + const cate = useCategory() + const [editing, openEditing, closeEditing] = useSwitch() + + const current = computed(() => { + const id = props.modelValue + const categories = cate.all + if (!id || !categories.length) return undefined + return categories.find(c => c.id == id) + }) + + const { refresh: doSave } = useManualRequest(async (cateId: number | string | undefined) => { + const realCateId = typeof cateId === 'string' ? parseInt(cateId) : cateId + await changeSitesCate(realCateId, props.siteKey) + return realCateId + }, { + onSuccess(realCateId) { + closeEditing() + props.onChange?.(realCateId) + }, + }) + + const handleEditClick = (ev: MouseEvent) => { + ev.stopImmediatePropagation() + openEditing() + nextTick(() => selectRef.value?.openOptions?.()) + } + + const selectRef = ref<Instance>() + + return () => supportCategory(props.siteKey) ? + <Flex width="100%" height="100%" justify="center"> + {editing.value ? + <Select + ref={selectRef} + size="small" + width="100px" + modelValue={props.modelValue} + onChange={doSave} + onVisibleChange={visible => !visible && closeEditing()} + /> + : + <Flex align="center" gap={5} height="100%"> + {current.value && + <ElTag + size="small" + closable + onClose={() => doSave(undefined)} + > + {current.value.name} + </ElTag> + } + <Flex align="center" onClick={handleEditClick}> + <ElIcon style={{ cursor: 'pointer' }}> + <Edit /> + </ElIcon> + </Flex> + </Flex> + } + </Flex> + : false +}, { props: ['modelValue', 'onChange', 'siteKey'] }) + +export default CategoryEditable \ No newline at end of file diff --git a/src/pages/app/components/common/category/CategorySelect/OptionItem.tsx b/src/pages/app/components/common/Category/Select/OptionItem.tsx similarity index 83% rename from src/pages/app/components/common/category/CategorySelect/OptionItem.tsx rename to src/pages/app/components/common/Category/Select/OptionItem.tsx index 58aa3b172..eb8f95916 100644 --- a/src/pages/app/components/common/category/CategorySelect/OptionItem.tsx +++ b/src/pages/app/components/common/Category/Select/OptionItem.tsx @@ -1,40 +1,43 @@ -import { useCategories } from "@app/context" +import { sendMsg2Runtime } from '@api/sw/common' +import { listSites } from "@api/sw/site" +import { useCategory } from "@app/context" import { t } from "@app/locale" import { Check, Close, Delete, Edit } from "@element-plus/icons-vue" import { useManualRequest, useRequest, useState, useSwitch } from "@hooks" import Flex from "@pages/components/Flex" -import cateService from "@service/cate-service" -import siteService from "@service/site-service" import { stopPropagationAfter } from "@util/document" import { ElButton, ElInput, ElMessage, ElMessageBox } from "element-plus" import { defineComponent, nextTick, ref } from "vue" -const OptionItem = defineComponent<{ value: timer.site.Cate }>(props => { - const { refreshCategories } = useCategories() +const OptionItem = defineComponent<{ value: tt4b.site.Cate }>(props => { + const cate = useCategory() const [editing, openEditing, closeEditing] = useSwitch(false) const [editingName, setEditingName] = useState(props.value.name) const inputRef = ref<HTMLInputElement>() - const { refresh: saveCate } = useManualRequest((name: string) => cateService.saveName(props.value.id, name), { - onSuccess: () => { - refreshCategories() - closeEditing() - } - }) + const { refresh: saveCate } = useManualRequest( + (name: string) => sendMsg2Runtime('cate.change', { id: props.value.id, name }), + { + onSuccess: () => { + cate.refresh() + closeEditing() + } + }, + ) const onSaveClick = () => { const name = editingName.value?.trim?.() name ? saveCate(name) : ElMessage.warning("Name is blank") } - const { refresh: removeCate } = useManualRequest(() => cateService.remove(props.value.id), { + const { refresh: doRemoveCate } = useManualRequest(() => sendMsg2Runtime('cate.delete', props.value.id), { onSuccess: () => { - refreshCategories() + cate.refresh() ElMessage.success(t(msg => msg.operation.successMsg)) } }) - const { data: relatedSites, loading: queryingSites } = useRequest(() => siteService.selectAll({ cateIds: props.value?.id })) + const { data: relatedSites, loading: queryingSites } = useRequest(() => listSites({ cateIds: props.value?.id })) const onRemoveClick = (e: MouseEvent) => { e.stopPropagation() @@ -48,7 +51,7 @@ const OptionItem = defineComponent<{ value: timer.site.Cate }>(props => { message: t(msg => msg.siteManage.cate.removeConfirm, { category: props.value?.name }), type: 'warning', closeOnClickModal: false, - }).then(removeCate).catch(() => { }) + }).then(doRemoveCate).catch(() => { }) } const onEditClick = () => { diff --git a/src/pages/app/components/common/category/CategorySelect/SelectFooter.tsx b/src/pages/app/components/common/Category/Select/SelectFooter.tsx similarity index 93% rename from src/pages/app/components/common/category/CategorySelect/SelectFooter.tsx rename to src/pages/app/components/common/Category/Select/SelectFooter.tsx index c2a7bc26e..621a1ea97 100644 --- a/src/pages/app/components/common/category/CategorySelect/SelectFooter.tsx +++ b/src/pages/app/components/common/Category/Select/SelectFooter.tsx @@ -1,23 +1,23 @@ -import { useCategories } from "@app/context" +import { sendMsg2Runtime } from '@api/sw/common' +import { useCategory } from "@app/context" import { t } from "@app/locale" import { Check, Close, Plus } from "@element-plus/icons-vue" import { useManualRequest, useState, useSwitch } from "@hooks" import Flex from "@pages/components/Flex" -import cateService from "@service/cate-service" import { stopPropagationAfter } from "@util/document" import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from "element-plus" import { defineComponent, nextTick, ref } from "vue" const SelectFooter = defineComponent(() => { - const { refreshCategories } = useCategories() + const cate = useCategory() const [editing, openEditing, closeEditing] = useSwitch(false) const [name, setName] = useState<string>() const { refresh: saveCate, loading } = useManualRequest( - (name: string) => cateService.add(name), + (name: string) => sendMsg2Runtime('cate.add', name), { onSuccess() { - refreshCategories?.() + cate.refresh() closeEditing() setName() } diff --git a/src/pages/app/components/common/category/CategorySelect/index.tsx b/src/pages/app/components/common/Category/Select/index.tsx similarity index 67% rename from src/pages/app/components/common/category/CategorySelect/index.tsx rename to src/pages/app/components/common/Category/Select/index.tsx index f229a9159..47f2476c2 100644 --- a/src/pages/app/components/common/category/CategorySelect/index.tsx +++ b/src/pages/app/components/common/Category/Select/index.tsx @@ -1,11 +1,11 @@ -import { useCategories } from "@app/context" +import { useCategory } from "@app/context" import { CATE_NOT_SET_ID } from '@util/site' import { ElOption, ElSelect, type SelectInstance } from "element-plus" import { defineComponent, ref } from "vue" import OptionItem from "./OptionItem" import SelectFooter from "./SelectFooter" -export type CategorySelectInstance = { +export type Instance = { openOptions: () => void } @@ -18,29 +18,29 @@ type Props = { onChange?: ArgCallback<number | undefined> } -const CategorySelect = defineComponent<Props>((props, ctx) => { - const { categories } = useCategories() +const Select = defineComponent<Props>((props, ctx) => { + const cate = useCategory() const selectRef = ref<SelectInstance>() ctx.expose({ openOptions: () => selectRef.value?.selectOption?.() - } satisfies CategorySelectInstance) + } satisfies Instance) return () => ( <ElSelect ref={selectRef} size={props.size} modelValue={props.modelValue} - onChange={val => ctx.emit('change', val)} - onVisible-change={visible => ctx.emit('visibleChange', visible)} + onChange={val => props.onChange?.(val)} + onVisible-change={visible => props.onVisibleChange?.(visible)} style={{ width: props.width || '100%' }} clearable={props.clearable} - onClear={() => ctx.emit('change', undefined)} + onClear={() => props.onChange?.(undefined)} emptyValues={[CATE_NOT_SET_ID, undefined]} v-slots={{ footer: () => <SelectFooter /> }} > - {categories.value?.map(c => ( - <ElOption value={c?.id} label={c?.name}> + {cate.all.map(c => ( + <ElOption value={c.id} label={c.name}> <OptionItem value={c} /> </ElOption> ))} @@ -48,4 +48,4 @@ const CategorySelect = defineComponent<Props>((props, ctx) => { ) }, { props: ['clearable', 'modelValue', 'size', 'width', 'onVisibleChange', 'onChange'] }) -export default CategorySelect \ No newline at end of file +export default Select diff --git a/src/pages/app/components/common/Category/index.ts b/src/pages/app/components/common/Category/index.ts new file mode 100644 index 000000000..bd0b45662 --- /dev/null +++ b/src/pages/app/components/common/Category/index.ts @@ -0,0 +1,9 @@ +import Editable from './Editable' +import Select from './Select' + +const Category = { + Select: Select, + Editable: Editable, +} + +export default Category diff --git a/src/pages/app/components/common/ContentContainer.tsx b/src/pages/app/components/common/ContentContainer.tsx index da72b3bbd..9100b7c40 100644 --- a/src/pages/app/components/common/ContentContainer.tsx +++ b/src/pages/app/components/common/ContentContainer.tsx @@ -5,35 +5,27 @@ * https://opensource.org/licenses/MIT */ +import { css } from '@emotion/css' import Flex from "@pages/components/Flex" -import { ElCard } from "element-plus" -import { type FunctionalComponent, h, type StyleValue } from "vue" +import { ElCard, useNamespace } from "element-plus" +import type { FunctionalComponent } from "vue" import ContentCard from "./ContentCard" -const FILTER_CONTAINER_STYLE: StyleValue = { - display: 'flex', - alignItems: 'center', - userSelect: 'none', -} +export const FilterContainer: FunctionalComponent = (_, ctx) => { + const btnNs = useNamespace('button') + const clz = css` + padding-block: 18px; + user-select: none; -const FILTER_BODY_STYLE: StyleValue = { - paddingBottom: '18px', - paddingTop: '18px', - boxSizing: 'border-box', - width: '100%', + & .${btnNs.b()}+.${btnNs.b()} { + margin-inline-start: 0px; + } + ` + return <ElCard bodyClass={clz} v-slots={ctx.slots} /> } -export const FilterContainer: FunctionalComponent = (_, ctx) => ( - <ElCard - class="filter-container" - style={FILTER_CONTAINER_STYLE} - bodyStyle={FILTER_BODY_STYLE} - v-slots={ctx.slots} - /> -) - const _default: FunctionalComponent<{ class?: string }> = (props, ctx) => { - const { default: default_, filter, content } = ctx.slots + const { default: children, filter, content } = ctx.slots return ( <Flex @@ -45,9 +37,9 @@ const _default: FunctionalComponent<{ class?: string }> = (props, ctx) => { boxSizing="border-box" gap={15} > - {filter && <FilterContainer>{h(filter)}</FilterContainer>} - {!!default_ && <Flex column gap={15} flex={1} height={0} width="100%">{h(default_)}</Flex>} - {!default_ && content && <ContentCard v-slots={content} />} + {filter && <FilterContainer>{filter()}</FilterContainer>} + {!!children && <Flex column gap={15} flex={1} height={0} width="100%">{children()}</Flex>} + {!children && content && <ContentCard>{content()}</ContentCard>} </Flex> ) } diff --git a/src/pages/app/components/common/DialogSop.tsx b/src/pages/app/components/common/DialogSop.tsx deleted file mode 100644 index da2e33fa1..000000000 --- a/src/pages/app/components/common/DialogSop.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { t } from "@app/locale" -import { Back, Check, Close, Right } from "@element-plus/icons-vue" -import Box from "@pages/components/Box" -import Flex from "@pages/components/Flex" -import { ElButton } from "element-plus" -import { defineComponent, h, useSlots } from "vue" -import "./dialog-sop.sass" - -export type SopStepInstance<T> = { parseData: Getter<T> } - -export type SopInstance = { init: NoArgCallback } - -const FLAGS = ['first', 'last', 'nextLoading', 'finishLoading'] as const -const EMITS = ['onBack', 'onNext', 'onCancel', 'onFinish'] as const - -type Props = { - [F in typeof FLAGS[number]]?: boolean -} & { - [C in typeof EMITS[number]]?: NoArgCallback -} - -const DialogSop = defineComponent<Props>(props => { - const { steps, content } = useSlots() - - return () => ( - <Flex column align="center" gap={40} marginTop={25}> - <div class="dialog-sop-step-container"> - {!!steps && h(steps)} - </div> - <Box padding="0 20px" boxSizing="border-box" width="100%"> - {!!content && h(content)} - </Box> - <Flex> - <Flex> - {props.first ? ( - <ElButton type="info" icon={Close} onClick={props.onCancel}> - {t(msg => msg.button.cancel)} - </ElButton> - ) : ( - <ElButton type="info" icon={Back} onClick={props.onBack}> - {t(msg => msg.button.previous)} - </ElButton> - )}{ - props.last ? ( - <ElButton type='success' icon={Check} onClick={props.onFinish} loading={props.finishLoading}> - {t(msg => msg.button.save)} - </ElButton> - ) : ( - <ElButton type="primary" icon={Right} onClick={props.onNext} loading={props.nextLoading}> - {t(msg => msg.button.next)} - </ElButton> - ) - } - </Flex> - </Flex> - </Flex> - ) -}, { props: [...FLAGS, ...EMITS] }) - -export default DialogSop \ No newline at end of file diff --git a/src/pages/app/components/common/DialogSop/context.ts b/src/pages/app/components/common/DialogSop/context.ts new file mode 100644 index 000000000..157477cea --- /dev/null +++ b/src/pages/app/components/common/DialogSop/context.ts @@ -0,0 +1,98 @@ +import { t } from '@app/locale' +import { useManualRequest, useProvide, useProvider } from "@hooks" +import { mergeObject } from '@util/lang' +import { ElMessage } from "element-plus" +import { computed, nextTick, reactive, ref, ShallowRef, type Reactive, type Ref } from "vue" + +type DialogSopContext<TForm extends Record<string, unknown>> = { + visible: ShallowRef<boolean> + step: Ref<number> + form: Reactive<TForm> + isFirst: ShallowRef<boolean> + isLast: ShallowRef<boolean> + doNext: NoArgCallback + nextLoading: ShallowRef<boolean> + doPrevious: NoArgCallback + hide: NoArgCallback +} + +const NAMESPACE = "dialogSop" + +type TransmitParam<TForm extends Record<string, unknown>> = { + form: Reactive<TForm> + current: number + target: number +} + +type DialogSopInitOptions<TForm extends Record<string, unknown>> = { + stepCount: number + init: () => TForm + onNext?: (p: TransmitParam<TForm>) => Awaitable<void> + onFinish?: (p: Omit<TransmitParam<TForm>, 'target'>) => Awaitable<void> + onBack?: (p: TransmitParam<TForm>) => Awaitable<void> +} + +export function initDialogSopContext<TForm extends Record<string, unknown>>(options: DialogSopInitOptions<TForm>) { + const { + stepCount, + init, onNext, onFinish, onBack, + } = options + if (!Number.isInteger(stepCount) || stepCount < 1) throw new Error("Invalid step count, must be positive integer") + const lastIdx = stepCount - 1 + + const visible = ref(false) + const step = ref(0) + const isLast = computed(() => step.value === lastIdx) + const isFirst = computed(() => step.value === 0) + const form = reactive<TForm>(init()) + const hide = () => visible.value = false + const open = (val?: TForm) => { + visible.value = true + step.value = 0 + nextTick(() => mergeObject(form as TForm, val ?? init())) + } + + const { loading: nextLoading, refresh: doNext } = useManualRequest(async () => { + const current = step.value + if (isLast.value) { + await onFinish?.({ form, current }) + visible.value = false + ElMessage.success(t(msg => msg.operation.successMsg)) + } else { + const target = current + 1 + await onNext?.({ form, current, target }) + step.value = target + } + }, { + onError: e => ElMessage.error(e instanceof Error ? e.message : String(e)), + }) + + const doPrevious = async () => { + if (isFirst.value) { + hide() + } else { + try { + const current = step.value + const target = current - 1 + await onBack?.({ current, target, form }) + step.value = target + } catch (e) { + ElMessage.warning(e instanceof Error ? e.message : String(e)) + } + } + } + + useProvide<DialogSopContext<TForm>>(NAMESPACE, { + visible, form, isFirst, isLast, + step, doNext, doPrevious, nextLoading, hide + }) + + return { open, step, form } +} + +export const useDialogSop = <TForm extends Record<string, unknown>>() => useProvider< + DialogSopContext<TForm>, + 'form' | 'isLast' | 'isFirst' | 'step' | 'doPrevious' | 'doNext' | 'nextLoading' | 'hide' | 'visible' +>( + NAMESPACE, 'form', 'doPrevious', 'doNext', 'isFirst', 'isLast', 'step', 'nextLoading', 'hide', 'visible' +) \ No newline at end of file diff --git a/src/pages/app/components/common/DialogSop/index.tsx b/src/pages/app/components/common/DialogSop/index.tsx new file mode 100644 index 000000000..d1e773195 --- /dev/null +++ b/src/pages/app/components/common/DialogSop/index.tsx @@ -0,0 +1,76 @@ +import { t } from "@app/locale" +import { Back, Check, Close } from "@element-plus/icons-vue" +import { css } from '@emotion/css' +import { useXsState } from '@hooks' +import Box from "@pages/components/Box" +import Flex from "@pages/components/Flex" +import { type ButtonProps, DialogProps, ElButton, ElDialog, ElDivider, ElStep, ElSteps, ElText, useNamespace } from "element-plus" +import { defineComponent, type StyleValue, useSlots } from "vue" +import { useDialogSop } from './context' + +type Props = { + stepTitles: string[] + finishButton?: { + text?: string + type?: ButtonProps['type'] + } +} & Pick<DialogProps, 'width' | 'top' | 'title'> + +const DialogSop = defineComponent<Props>(props => { + const { + step, visible, + isFirst, isLast, nextLoading, + doNext, doPrevious, hide, + } = useDialogSop() + + const isXs = useXsState() + + const stepWrapperCls = css` + & .${useNamespace('step').b()} { + width: 200px; + } + ` + + return () => ( + <ElDialog + width={props.width} top={props.top} + fullscreen={isXs.value} appendToBody + title={props.title} + modelValue={visible.value} onClose={hide} + closeOnClickModal + > + <Flex column align="center" gap={40} marginTop={25}> + <div class={stepWrapperCls}> + {isXs.value ? ( + <Flex column align='center'> + <ElText size='large'>{props.stepTitles[step.value]}</ElText> + <ElDivider style={{ marginBlockStart: '5px' } satisfies StyleValue} /> + </Flex> + ) : ( + <ElSteps finishStatus="success" active={step.value} alignCenter> + {props.stepTitles.map(stepTitle => <ElStep title={stepTitle} />)} + </ElSteps> + )} + </div> + <Box padding="0 20px" boxSizing="border-box" width="100%"> + {useSlots().default?.()} + </Box> + <Flex> + <ElButton type='info' icon={isFirst.value ? Close : Back} onClick={doPrevious}> + {t(msg => msg.button[isFirst.value ? 'cancel' : 'previous'])} + </ElButton> + <ElButton + icon={Check} + type={isLast.value ? props.finishButton?.type ?? 'success' : 'primary'} + onClick={doNext} + loading={nextLoading.value} + > + {isLast.value ? props.finishButton?.text ?? t(msg => msg.button.save) : t(msg => msg.button.next)} + </ElButton> + </Flex> + </Flex> + </ElDialog> + ) +}, { props: ['title', 'stepTitles', 'finishButton', 'width', 'top'] }) + +export default DialogSop diff --git a/src/pages/app/components/common/Editable.tsx b/src/pages/app/components/common/Editable.tsx index 76dcf141d..a3788a246 100644 --- a/src/pages/app/components/common/Editable.tsx +++ b/src/pages/app/components/common/Editable.tsx @@ -13,7 +13,7 @@ import { defineComponent, nextTick, ref, type StyleValue, toRef, useSlots } from type Props = { modelValue: string | undefined - initialValue?: string + initialValue?: string | (() => (Awaitable<string | undefined>)) onChange?: (newVal: string | undefined) => void } @@ -37,10 +37,20 @@ const Editable = defineComponent<Props>(props => { closeEditing() props.onChange?.(inputVal.value?.trim()) } + + const resetWithInitial = async () => { + const initial = props.initialValue + if (typeof initial === 'string') { + setInputVal(initial) + } else if (typeof initial === 'function') { + const initialValue = await initial() + setInputVal(initialValue) + } + } + const handleEdit = () => { openEditing() - const initial = props.initialValue - !input.value && initial && setInputVal(initial) + resetWithInitial() nextTick(() => input.value?.focus?.()) } const { label: labelSlot } = useSlots() diff --git a/src/pages/app/components/common/EditableTag.tsx b/src/pages/app/components/common/EditableTag.tsx deleted file mode 100644 index 59a9fdbb2..000000000 --- a/src/pages/app/components/common/EditableTag.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Edit } from "@element-plus/icons-vue" -import Flex from "@pages/components/Flex" -import { ElTag, type TagProps } from "element-plus" -import { defineComponent, h, useSlots, type StyleValue } from "vue" - -export type EditableTagProps = PartialPick<TagProps, 'type'> & { - text?: string - onEdit?: () => void - closable?: boolean - onClose?: () => void -} - -const EDIT_ICON_STYLE: StyleValue = { - height: '14px', - width: '14px', - cursor: 'pointer', -} - -const EditableTag = defineComponent<EditableTagProps>(props => { - const { default: textSlot } = useSlots() - return () => ( - <ElTag - size="large" - closable={props.closable ?? true} - onClose={props.onClose} - type={props.type} - > - <Flex align="center" gap={7} style={{ marginInlineEnd: '-3px' }}> - {textSlot ? h(textSlot) : props.text ?? ''} - <Flex onClick={props.onEdit} > - <Edit style={EDIT_ICON_STYLE} /> - </Flex> - </Flex> - </ElTag> - ) -}, { props: ['closable', 'onClose', 'onEdit', 'text', 'type'] }) - -export default EditableTag \ No newline at end of file diff --git a/src/pages/app/components/common/HostAlert.tsx b/src/pages/app/components/common/HostAlert.tsx index 4f3b9c925..a1c7e2146 100644 --- a/src/pages/app/components/common/HostAlert.tsx +++ b/src/pages/app/components/common/HostAlert.tsx @@ -6,13 +6,14 @@ */ import Flex from "@pages/components/Flex" +import Img from '@pages/components/Img' import { IS_SAFARI } from "@util/constant/environment" import { isRemainHost } from "@util/constant/remain-host" import { ElLink } from "element-plus" import { computed, defineComponent, type StyleValue } from "vue" type Props = { - value: timer.site.SiteKey + value: tt4b.site.SiteKey iconUrl?: string clickable?: boolean } @@ -45,14 +46,12 @@ const HostAlert = defineComponent<Props>(props => { > {props.value?.host} </ElLink> - {props.iconUrl && - <Flex align="center"> - <img src={props.iconUrl} width={12} height={12} /> - </Flex> - } + <Flex align="center"> + <Img src={props.iconUrl} size={12} /> + </Flex> </Flex> )} - </div > + </div> }, { props: ['clickable', 'iconUrl', 'value'] }) export default HostAlert \ No newline at end of file diff --git a/src/pages/app/components/common/NumberGrow.tsx b/src/pages/app/components/common/NumberGrow.tsx deleted file mode 100644 index f87f092e4..000000000 --- a/src/pages/app/components/common/NumberGrow.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { getNumberSeparator } from "@i18n" -import { CountUp } from "countup.js" -import { defineComponent, onMounted, ref, watch } from "vue" - -type Props = { - value: number - duration?: number - fontSize?: number -} - -const NumberGrow = defineComponent<Props>(props => { - const el = ref<HTMLElement>() - const countUp = ref<CountUp>() - - onMounted(() => { - const countEl = el.value - if (!countEl) return - countUp.value = new CountUp(countEl, props.value, { - startVal: 0, - duration: props.duration || 1.5, - separator: getNumberSeparator(), - }) - if (countUp.value.error) { - console.warn(countUp.value.error) - } - countUp.value.start() - }) - - watch(() => props.value, newVal => countUp.value?.update(newVal)) - - return () => <a - ref={el} - style={{ textDecoration: 'underline', fontSize: props.fontSize ? `${props.fontSize}px` : undefined }} - /> -}, { props: ['value', 'duration', 'fontSize'] }) - - -export default NumberGrow \ No newline at end of file diff --git a/src/pages/app/components/common/Pagination.tsx b/src/pages/app/components/common/Pagination.tsx index 762e0dfc8..6c5647129 100644 --- a/src/pages/app/components/common/Pagination.tsx +++ b/src/pages/app/components/common/Pagination.tsx @@ -12,9 +12,9 @@ import { defineComponent } from "vue" type Props = { disabled?: boolean - defaultValue?: timer.common.PageQuery + defaultValue?: tt4b.common.PageQuery total?: number - onChange?: (val: timer.common.PageQuery) => void + onChange?: (val: tt4b.common.PageQuery) => void } const Pagination = defineComponent<Props>(props => { @@ -22,10 +22,10 @@ const Pagination = defineComponent<Props>(props => { <Flex justify="center" align="center"> <ElPagination disabled={props.disabled} - {...getPaginationIconProps() || {}} + {...getPaginationIconProps()} pageSizes={[10, 20, 50]} - defaultCurrentPage={(props.defaultValue as timer.common.PageQuery)?.num} - defaultPageSize={(props.defaultValue as timer.common.PageQuery)?.size} + defaultCurrentPage={(props.defaultValue as tt4b.common.PageQuery)?.num} + defaultPageSize={(props.defaultValue as tt4b.common.PageQuery)?.size} layout="total, sizes, prev, pager, next, jumper" total={props.total} onChange={(currentPage, pageSize) => props.onChange?.({ num: currentPage, size: pageSize })} diff --git a/src/pages/app/components/common/PopupConfirmButton.tsx b/src/pages/app/components/common/PopupConfirmButton.tsx index 104de3648..5a96f479f 100644 --- a/src/pages/app/components/common/PopupConfirmButton.tsx +++ b/src/pages/app/components/common/PopupConfirmButton.tsx @@ -7,7 +7,7 @@ import { t } from "@app/locale" import { type ButtonType, ElButton, ElPopconfirm } from "element-plus" -import type { Component, FunctionalComponent } from "vue" +import type { Component, FunctionalComponent, StyleValue } from "vue" type Props = { confirmText?: string @@ -15,12 +15,13 @@ type Props = { text?: boolean buttonType?: ButtonType buttonIcon?: Component - onConfirm?: () => void + buttonStyle?: StyleValue + onConfirm?: NoArgCallback } const PopupConfirmButton: FunctionalComponent<Props> = props => ( <ElPopconfirm - confirmButtonText={t(msg => msg.button.okey)} + confirmButtonText={t(msg => msg.button.okay)} cancelButtonText={t(msg => msg.button.dont)} title={props.confirmText} width={300} @@ -32,6 +33,7 @@ const PopupConfirmButton: FunctionalComponent<Props> = props => ( text={props.text} type={props.buttonType} icon={props.buttonIcon} + style={props.buttonStyle} > {props.buttonText} </ElButton> @@ -39,7 +41,6 @@ const PopupConfirmButton: FunctionalComponent<Props> = props => ( }} /> ) - PopupConfirmButton.displayName = "PopupConfirmButton" export default PopupConfirmButton diff --git a/src/pages/app/components/common/category/CategoryEditable.tsx b/src/pages/app/components/common/category/CategoryEditable.tsx deleted file mode 100644 index d5a19f69f..000000000 --- a/src/pages/app/components/common/category/CategoryEditable.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { useCategories } from "@app/context" -import { Edit } from "@element-plus/icons-vue" -import { useManualRequest, useSwitch } from "@hooks" -import Flex from "@pages/components/Flex" -import siteService from "@service/site-service" -import { supportCategory } from "@util/site" -import { ElIcon, ElTag } from "element-plus" -import { computed, defineComponent, nextTick, type PropType, ref } from "vue" -import CategorySelect, { CategorySelectInstance } from "./CategorySelect" - -const CategoryEditable = defineComponent({ - props: { - siteKey: { - type: Object as PropType<timer.site.SiteKey>, - required: true, - }, - cateId: Number, - }, - emits: { - change: (_val: number | undefined) => true, - }, - setup(props, ctx) { - const { categories } = useCategories() - const [editing, openEditing, closeEditing] = useSwitch() - - const current = computed(() => { - const id = props.cateId - if (!id || !categories.value?.length) return null - return categories.value?.find(c => c.id == id) - }) - - const { refresh: saveSiteCate } = useManualRequest(async (cateId: number | string | undefined) => { - const realCateId = typeof cateId === 'string' ? parseInt(cateId) : cateId - await siteService.saveCate(props.siteKey, realCateId) - return realCateId - }, { - onSuccess(realCateId) { - closeEditing() - ctx.emit('change', realCateId) - }, - }) - - const handleEditClick = () => { - openEditing() - nextTick(() => selectRef.value?.openOptions?.()) - } - - const selectRef = ref<CategorySelectInstance>() - - return () => supportCategory(props.siteKey) ? - <Flex width="100%" height="100%" justify="center"> - {editing.value ? - <CategorySelect - ref={selectRef} - size="small" - width="100px" - modelValue={props.cateId} - onChange={saveSiteCate} - onVisibleChange={visible => !visible && closeEditing()} - /> - : - <Flex align="center" gap={5} height="100%"> - {current.value && - <ElTag - size="small" - closable - onClose={() => saveSiteCate(undefined)} - > - {current.value.name} - </ElTag> - } - <Flex align="center" onClick={handleEditClick}> - <ElIcon style={{ cursor: 'pointer' }}> - <Edit /> - </ElIcon> - </Flex> - </Flex > - } - </Flex> - : false - }, -}) - -export default CategoryEditable \ No newline at end of file diff --git a/src/pages/app/components/common/dialog-sop.sass b/src/pages/app/components/common/dialog-sop.sass deleted file mode 100644 index 581637566..000000000 --- a/src/pages/app/components/common/dialog-sop.sass +++ /dev/null @@ -1,4 +0,0 @@ - -.dialog-sop-step-container - .el-step - width: 200px diff --git a/src/pages/app/components/common/filter/ButtonFilterItem.tsx b/src/pages/app/components/common/filter/ButtonFilterItem.tsx index 19a7613c4..665c63894 100644 --- a/src/pages/app/components/common/filter/ButtonFilterItem.tsx +++ b/src/pages/app/components/common/filter/ButtonFilterItem.tsx @@ -4,35 +4,34 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { type ButtonType, ElButton } from "element-plus" -import { type Component, defineComponent, type PropType } from "vue" -import { type JSX } from "vue/jsx-runtime" +import { useXsState } from '@hooks' +import { type I18nKey, t } from '@app/locale' +import { type ButtonProps, ElButton } from "element-plus" +import { defineComponent } from "vue" -const _default = defineComponent({ - props: { - type: String as PropType<ButtonType>, - text: String, - icon: Object as PropType<JSX.Element | Component>, - right: { - type: Boolean, - default: true - } - }, - emits: { - click: () => true - }, - setup(props, ctx) { - return () => ( +type Props = { + icon: ButtonProps['icon'] + text: I18nKey + type?: ButtonProps['type'] + onClick?: NoArgCallback +} + +const ButtonFilterItem = defineComponent<Props>(props => { + const isXs = useXsState() + return () => isXs.value + ? ( <ElButton - class='filter-item' - type={props.type} + circle + size='small' + type={props.type ?? 'primary'} icon={props.icon} - onClick={() => ctx.emit("click")} - > - {props.text} + onClick={props.onClick} + /> + ) : ( + <ElButton type={props.type ?? 'primary'} icon={props.icon} onClick={props.onClick}> + {t(props.text)} </ElButton> ) - } -}) +}, { props: ['icon', 'onClick', 'text', 'type'] }) -export default _default \ No newline at end of file +export default ButtonFilterItem \ No newline at end of file diff --git a/src/pages/app/components/common/filter/CategoryFilter.tsx b/src/pages/app/components/common/filter/CategoryFilter.tsx index d5242c8af..438cfc3ce 100644 --- a/src/pages/app/components/common/filter/CategoryFilter.tsx +++ b/src/pages/app/components/common/filter/CategoryFilter.tsx @@ -1,45 +1,37 @@ -import { useCategories } from "@app/context" +import { useCategory } from "@app/context" import { t } from "@app/locale" import { CATE_NOT_SET_ID } from "@util/site" -import { ElOption, ElSelect } from "element-plus" -import { computed, defineComponent, type PropType, type StyleValue } from "vue" +import { ElSelect } from "element-plus" +import { computed, defineComponent, type StyleValue } from "vue" -const CategoryFilter = defineComponent({ - props: { - modelValue: Array as PropType<number[]>, - disabled: Boolean, - useCache: Boolean, - }, - emits: { - change: (_val?: number[]) => true, - }, - setup(props, ctx) { - const { categories } = useCategories() +type Props = ModelValue<number[] | undefined> & { + disabled?: boolean + useCache?: boolean +} - const displayCategories = computed(() => [ - { id: CATE_NOT_SET_ID, name: t(msg => msg.shared.cate.notSet) } satisfies timer.site.Cate, - ...categories.value || [], - ]) +const CategoryFilter = defineComponent<Props>(props => { + const cate = useCategory() - const emitChange = (val?: number[]) => ctx.emit('change', val) + const options = computed(() => [ + ...cate.all.map(c => ({ value: c.id, label: c.name })), + { value: CATE_NOT_SET_ID, label: t(msg => msg.shared.cate.notSet) }, + ]) - return () => ( - <ElSelect - modelValue={props.modelValue} - onChange={(val: number[]) => emitChange(val)} - multiple - clearable - filterable - collapseTags - disabled={props.disabled} - onClear={() => emitChange()} - placeholder={t(msg => msg.siteManage.column.cate)} - style={{ width: '200px' } satisfies StyleValue} - > - {displayCategories.value?.map(cate => <ElOption value={cate.id} label={cate.name} />)} - </ElSelect> - ) - }, -}) + return () => cate.enabled ? ( + <ElSelect + modelValue={props.modelValue} + onChange={(val: number[]) => props.onChange?.(val)} + multiple + clearable + filterable + collapseTags + disabled={props.disabled} + onClear={() => props.onChange?.(undefined)} + placeholder={t(msg => msg.siteManage.column.cate)} + style={{ width: '200px' } satisfies StyleValue} + options={options.value} + /> + ) : null +}, { props: ['modelValue', 'onChange', 'disabled', 'useCache'] }) export default CategoryFilter \ No newline at end of file diff --git a/src/pages/app/components/common/filter/DateRangeFilterItem.tsx b/src/pages/app/components/common/filter/DateRangeFilterItem.tsx index 28d2d7f9c..ecea9924b 100644 --- a/src/pages/app/components/common/filter/DateRangeFilterItem.tsx +++ b/src/pages/app/components/common/filter/DateRangeFilterItem.tsx @@ -5,34 +5,51 @@ * https://opensource.org/licenses/MIT */ +import { useXsState } from '@hooks' import { t } from "@app/locale" import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue' -import { dateFormat } from "@i18n/element" +import { css } from '@emotion/css' import Flex from '@pages/components/Flex' -import { type ElementDatePickerShortcut } from "@pages/element-ui/date" -import { getDatePickerIconSlots } from "@pages/element-ui/rtl" +import { getDatePickerIconSlots } from '@pages/element-ui/rtl' +import { ElDatePickerShortcut } from '@pages/element-ui/types' +import { dateFormat } from "@i18n/element" import { isRtl } from '@util/document' import { MILL_PER_DAY } from '@util/time' -import { ElButton, ElDatePicker } from "element-plus" -import { computed, defineComponent, type StyleValue, toRaw, toRef } from "vue" +import { type DatePickerProps, ElButton, ElDatePicker, ElText, useNamespace } from "element-plus" +import { computed, defineComponent, type FunctionalComponent, type StyleValue, toRaw, toRef } from "vue" -const clearShortcut = (): ElementDatePickerShortcut => ({ +const clearShortcut = (): ElDatePickerShortcut => ({ text: t(msg => msg.button.clear), value: [new Date(0), new Date(0)], }) -type Props = { - modelValue: [Date, Date] | undefined +type Props = ModelValue<[Date?, Date?]> & { disabledDate?: (date: Date) => boolean startPlaceholder?: string endPlaceholder?: string - shortcuts?: ElementDatePickerShortcut[] + shortcuts?: ElDatePickerShortcut[] clearable?: boolean - onChange: (val: [Date, Date] | undefined) => void } +const ALL_PROPS: (keyof Props)[] = ["clearable", "disabledDate", "endPlaceholder", "modelValue", "onChange", "shortcuts", "startPlaceholder"] + const ARROW_BTN_STYLE: StyleValue = { - padding: '8px 1px', + padding: '8px 5px', +} + +const usePopperStyle = () => { + const pickerPanelNs = useNamespace('picker-panel') + return css` + & { + .${pickerPanelNs.e('sidebar')} { + width: 130px !important; + } + .${pickerPanelNs.b()} [slot="sidebar"] + .${pickerPanelNs.e('body')}, + .${pickerPanelNs.e('sidebar')} + .${pickerPanelNs.e('body')} { + margin-inline-start: 130px !important + } + } + ` } const useRange = (props: Props) => { @@ -79,7 +96,7 @@ const useRange = (props: Props) => { } } -const DateRangeFilterItem = defineComponent<Props>(props => { +const DefaultRange = defineComponent<Props>(props => { const rtl = isRtl() const { backwardDisabled, @@ -88,61 +105,131 @@ const DateRangeFilterItem = defineComponent<Props>(props => { shortcuts, clearable, } = useRange(props) + const innerVal = computed(() => { + const [start, end] = props.modelValue ?? [] + return start && end ? [start, end] : undefined + }) + + const handleUpdate = (innerVal: [Date, Date] | undefined) => { + let value = innerVal ?? [undefined, undefined] + if (innerVal?.[0].getTime() === 0 && innerVal[1].getTime() === 0) { + // clear shortcuts + value = [undefined, undefined] + } + props.onChange?.(value) + } + return () => ( - <span class="filter-item"> - <Flex gap={1} width="fit-content"> - <ElButton - disabled={backwardDisabled.value} - icon={rtl ? ArrowRight : ArrowLeft} - onClick={() => shift(-1)} - style={{ - ...ARROW_BTN_STYLE, - ...rtl ? { - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - } satisfies StyleValue : { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - } satisfies StyleValue, - }} - /> - <ElDatePicker - modelValue={props.modelValue} - format={dateFormat()} - type="daterange" - rangeSeparator="-" - disabledDate={props.disabledDate} - shortcuts={shortcuts.value} - onUpdate:modelValue={newVal => props.onChange?.(toRaw(newVal) ?? undefined)} - startPlaceholder={props.startPlaceholder} - endPlaceholder={props.endPlaceholder} - clearable={clearable.value} - style={{ - "--el-date-editor-width": "240px", - "--el-border-radius-base": 0, - } satisfies StyleValue} - v-slots={getDatePickerIconSlots()} - /> - <ElButton - disabled={forwardDisabled.value} - icon={rtl ? ArrowLeft : ArrowRight} - onClick={() => shift(1)} - style={{ - ...ARROW_BTN_STYLE, - ...rtl ? { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - } satisfies StyleValue : { - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - } satisfies StyleValue, - }} - /> - </Flex> - </span> + <Flex gap={1} width="fit-content"> + <ElButton + disabled={backwardDisabled.value} + icon={rtl ? ArrowRight : ArrowLeft} + onClick={() => shift(-1)} + style={{ + ...ARROW_BTN_STYLE, + ...rtl ? { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + } satisfies StyleValue : { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + } satisfies StyleValue, + }} + /> + <ElDatePicker + modelValue={innerVal.value} + format={dateFormat()} + type="daterange" + rangeSeparator="-" + disabledDate={props.disabledDate} + shortcuts={shortcuts.value} + onUpdate:modelValue={newVal => handleUpdate(toRaw(newVal))} + startPlaceholder={props.startPlaceholder} + endPlaceholder={props.endPlaceholder} + clearable={clearable.value} + style={{ + "--el-date-editor-width": "240px", + "--el-border-radius-base": 0, + } satisfies StyleValue} + popperClass={usePopperStyle()} + v-slots={getDatePickerIconSlots()} + /> + <ElButton + disabled={forwardDisabled.value} + icon={rtl ? ArrowLeft : ArrowRight} + onClick={() => shift(1)} + style={{ + ...ARROW_BTN_STYLE, + ...rtl ? { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + } satisfies StyleValue : { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + } satisfies StyleValue, + }} + /> + </Flex> ) -}, { - props: ["clearable", "disabledDate", "endPlaceholder", "modelValue", "onChange", "shortcuts", "startPlaceholder"], -}) +}, { props: ALL_PROPS }) + +type XsDatePickerProps = + & ModelValue<Date | undefined> + & Partial<Pick<DatePickerProps, 'placeholder' | 'disabledDate' | 'clearable'>> + +const XsDatePicker: FunctionalComponent<XsDatePickerProps> = props => { + const inputNs = useNamespace('input') + const cls = css` + --el-date-editor-width: 120px; + + & .${inputNs.e('prefix')} { + display: none; + } + ` + return ( + <ElDatePicker + class={cls} + modelValue={props.modelValue} + onUpdate:modelValue={val => props.onChange?.(val)} + placeholder={props.placeholder} + disabledDate={props.disabledDate} + clearable={props.clearable} + format={dateFormat()} + /> + ) +} + +const XsRange = defineComponent<Props>(props => { + const handleChange = (start: Date | undefined, end: Date | undefined) => { + const needReverse = start && end && start >= end + const arr: [Date?, Date?] = needReverse ? [end, start] : [start, end] + props.onChange?.(arr) + } + + return () => ( + <Flex align='center' gap={2}> + <XsDatePicker + modelValue={props.modelValue[0]} + onChange={val => handleChange(val, props.modelValue[1])} + placeholder={props.startPlaceholder} + disabledDate={props.disabledDate} + clearable={props.clearable} + /> + <ElText>-</ElText> + <XsDatePicker + modelValue={props.modelValue[1]} + onChange={val => handleChange(props.modelValue[0], val)} + placeholder={props.endPlaceholder} + disabledDate={props.disabledDate} + clearable={props.clearable} + /> + </Flex> + ) +}, { props: ALL_PROPS }) + +const DateRangeFilterItem = defineComponent<Props>(props => { + const isXs = useXsState() + return () => isXs.value ? <XsRange {...props} /> : <DefaultRange {...props} /> +}, { props: ALL_PROPS }) export default DateRangeFilterItem \ No newline at end of file diff --git a/src/pages/app/components/common/filter/InputFilterItem.tsx b/src/pages/app/components/common/filter/InputFilterItem.tsx index 14d2003af..6ef8cb36e 100644 --- a/src/pages/app/components/common/filter/InputFilterItem.tsx +++ b/src/pages/app/components/common/filter/InputFilterItem.tsx @@ -7,30 +7,19 @@ import { Search } from "@element-plus/icons-vue" import { useState } from "@hooks" +import { Enter } from '@pages/icons' import { ElIcon, ElInput } from "element-plus" -import { computed, defineComponent, ref, toRef, type StyleValue } from "vue" - -const EnterIcon = defineComponent<{ focused?: boolean }>(props => { - return () => ( - <ElIcon color={props.focused ? 'var(--el-color-primary)' : undefined}> - <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5645" width="200" height="200"> - <path d="M417 1c-48.602 0-88 39.399-88 88v346H89c-48.6 0-88 39.399-88 88v412c0 48.6 39.4 88 88 88h314.69c4.341 0.658 8.786 1 13.31 1h517c24.555 0 46.761-10.057 62.724-26.277C1012.943 981.761 1023 959.555 1023 935V523c0-4.524-0.341-8.968-1-13.31V89c0-48.601-39.398-88-88-88H417z m250.036 645.739V389.131c0-27.134 21.977-49.131 49.087-49.131 27.11 0 49.088 21.997 49.088 49.131V745H453.699l31.657 31.657c19.174 19.173 19.167 50.263-0.012 69.441-19.178 19.179-50.268 19.185-69.441 0.013L266 696.207l149.956-149.955c19.179-19.179 50.269-19.185 69.441-0.013 19.172 19.173 19.167 50.263-0.012 69.441l-31.059 31.059h212.71z" /> - </svg> - </ElIcon> - ) -}, { props: ['focused'] }) +import { computed, defineComponent, ref, type StyleValue } from "vue" type Props = { defaultValue?: string placeholder?: string - enter?: boolean width?: number | string onSearch?: ArgCallback<string> } const InputFilterItem = defineComponent<Props>(props => { const modelValue = ref(props.defaultValue ?? '') - const enter = toRef(props, 'enter', true) const width = computed(() => { const w = props.width @@ -43,21 +32,30 @@ const InputFilterItem = defineComponent<Props>(props => { setFocused(false) props.onSearch?.(modelValue.value) } + + const handleKeydown = (ev: Event | KeyboardEvent) => { + if (ev instanceof KeyboardEvent && ev.key === 'Enter') { + props.onSearch?.(modelValue.value) + } + } + return () => ( <ElInput modelValue={modelValue.value} placeholder={props.placeholder} - clearable={!enter.value} - onClear={() => props.onSearch?.(modelValue.value = '')} onInput={val => modelValue.value = val.trim()} - onKeydown={ev => (ev as KeyboardEvent).key === 'Enter' && enter.value && props.onSearch?.(modelValue.value)} - onBlur={() => handleBlur()} + onKeydown={handleKeydown} + onBlur={handleBlur} onFocus={() => setFocused(true)} style={{ width: width.value } satisfies StyleValue} - suffixIcon={enter.value ? <EnterIcon focused={focused.value} /> : undefined} + suffixIcon={( + <ElIcon color={focused.value ? 'var(--el-color-primary)' : undefined}> + <Enter /> + </ElIcon> + )} prefixIcon={Search} /> ) -}, { props: ['defaultValue', 'enter', 'placeholder', 'width', 'onSearch'] }) +}, { props: ['defaultValue', 'placeholder', 'width', 'onSearch'] }) export default InputFilterItem \ No newline at end of file diff --git a/src/pages/app/components/common/filter/MultiSelectFilterItem.tsx b/src/pages/app/components/common/filter/MultiSelectFilterItem.tsx index 138404aea..57028d6ee 100644 --- a/src/pages/app/components/common/filter/MultiSelectFilterItem.tsx +++ b/src/pages/app/components/common/filter/MultiSelectFilterItem.tsx @@ -1,44 +1,30 @@ -import { useCached } from "@hooks" -import { ElOption, ElSelect } from "element-plus" -import { defineComponent, type PropType, watch } from "vue" -import { useRoute } from "vue-router" -import { SELECT_WRAPPER_STYLE } from "./common" +import { ElSelect } from "element-plus" +import { defineComponent } from "vue" +import { ALL_BASE_FILTER_PROPS, type BaseFilterProps, SELECT_WRAPPER_STYLE, useFilterState } from "./common" -const MultiSelectFilterItem = defineComponent({ - props: { - defaultValue: Array as PropType<(string | number)[]>, - /** - * Whether to save the value in the localStorage with {@param historyName} - */ - historyName: String, - placeholder: String, - disabled: Boolean, - options: Array as PropType<{ value: string | number, label?: string }[]>, - }, - emits: { - change: (_val: (string | number)[]) => true, - }, - setup(props, ctx) { - const cacheKey = props.historyName && `__filter_item_multi_select_${useRoute().path}_${props.historyName}` - const { data, setter } = useCached(cacheKey, props.defaultValue) - watch(data, () => ctx.emit('change', data.value ?? [])) +type Data = string | number - return () => ( - <ElSelect - modelValue={data.value} - onChange={setter} - multiple - clearable - collapseTags - disabled={props.disabled} - onClear={() => setter([])} - placeholder={props.placeholder} - style={SELECT_WRAPPER_STYLE} - > - {props.options?.map(({ value, label }) => <ElOption value={value} label={label ?? value} />)} - </ElSelect> - ) - } -}) +type Props = BaseFilterProps<Data[]> & { + placeholder?: string + options?: { value: Data, label?: string }[] +} + +const MultiSelectFilterItem = defineComponent<Props>(props => { + const [data, setter] = useFilterState('multi_select', props) + + return () => ( + <ElSelect + modelValue={data.value} + onChange={setter} + multiple + clearable + collapseTags + onClear={() => setter([])} + placeholder={props.placeholder} + style={SELECT_WRAPPER_STYLE} + options={props.options} + /> + ) +}, { props: [...ALL_BASE_FILTER_PROPS, 'placeholder', 'options'] }) export default MultiSelectFilterItem \ No newline at end of file diff --git a/src/pages/app/components/common/filter/SelectFilterItem.tsx b/src/pages/app/components/common/filter/SelectFilterItem.tsx index edf39cdea..a1d9c1669 100644 --- a/src/pages/app/components/common/filter/SelectFilterItem.tsx +++ b/src/pages/app/components/common/filter/SelectFilterItem.tsx @@ -5,38 +5,26 @@ * https://opensource.org/licenses/MIT */ -import { useCached } from "@hooks" -import { ElOption, ElSelect } from "element-plus" -import { defineComponent, watch, type PropType } from "vue" -import { useRoute } from "vue-router" -import { SELECT_WRAPPER_STYLE } from "./common" +import { ElSelect, SelectProps } from "element-plus" +import { defineComponent } from "vue" +import { ALL_BASE_FILTER_PROPS, type BaseFilterProps, SELECT_WRAPPER_STYLE, useFilterState } from "./common" -const _default = defineComponent({ - props: { - defaultValue: String, - /** - * Whether to save the value in the localStorage with {@param historyName} - */ - historyName: String, - options: Object as PropType<Record<string | number, string>> - }, - emits: { - select: (_val: string | undefined) => true - }, - setup(props, ctx) { - const cacheKey = props.historyName && `__filter_item_select_${useRoute().path}_${props.historyName}` - const { data, setter } = useCached(cacheKey, props.defaultValue) - watch(data, () => ctx.emit('select', data.value)) - return () => ( - <ElSelect - modelValue={data.value} - onChange={setter} - style={SELECT_WRAPPER_STYLE} - > - {Object.entries(props.options || {}).map(([value, label]) => <ElOption label={label} value={value} />)} - </ElSelect> - ) - } -}) +type Props = BaseFilterProps<string | undefined> & Pick<SelectProps, "placeholder"> & { + options: Record<string, string> +} -export default _default \ No newline at end of file +const SelectFilterItem = defineComponent<Props>(props => { + const [data, setter] = useFilterState('select', props) + + return () => ( + <ElSelect + placeholder={props.placeholder} + modelValue={data.value} + onChange={setter} + style={SELECT_WRAPPER_STYLE} + options={Object.entries(props.options).map(([value, label]) => ({ label, value }))} + /> + ) +}, { props: [...ALL_BASE_FILTER_PROPS, 'options', 'placeholder'] }) + +export default SelectFilterItem \ No newline at end of file diff --git a/src/pages/app/components/common/filter/SwitchFilterItem.tsx b/src/pages/app/components/common/filter/SwitchFilterItem.tsx index b59a7a9c6..f1b46e7bc 100644 --- a/src/pages/app/components/common/filter/SwitchFilterItem.tsx +++ b/src/pages/app/components/common/filter/SwitchFilterItem.tsx @@ -5,33 +5,24 @@ * https://opensource.org/licenses/MIT */ -import { useCached } from "@hooks" import Flex from "@pages/components/Flex" import { ElSwitch, ElText } from "element-plus" -import { defineComponent, watch } from "vue" -import { useRoute } from "vue-router" +import { defineComponent } from "vue" +import { ALL_BASE_FILTER_PROPS, type BaseFilterProps, useFilterState } from './common' -const _default = defineComponent({ - emits: { - change: (_val: boolean) => true - }, - props: { - label: String, - defaultValue: Boolean, - historyName: String, - }, - setup(props, ctx) { - const cacheKey = props.historyName ? `__filter_item_switch_${useRoute().path}_${props.historyName}` : undefined - const { data, setter } = useCached(cacheKey, props.defaultValue) - watch(data, () => ctx.emit("change", !!data.value)) +type Props = BaseFilterProps<boolean> & { + label: string +} - return () => ( - <Flex gap={5} align="center"> - <ElText tag="b" type="info">{props.label}</ElText> - <ElSwitch modelValue={data.value} onChange={val => setter(val as boolean)} /> - </Flex> - ) - } -}) +const _default = defineComponent<Props>(props => { + const [data, setter] = useFilterState('switch', props) + + return () => ( + <Flex gap={5} align="center"> + <ElText tag="b" type="info">{props.label}</ElText> + <ElSwitch modelValue={data.value} onChange={val => setter(val as boolean)} /> + </Flex> + ) +}, { props: [...ALL_BASE_FILTER_PROPS, 'label'] }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/common/filter/TimeFormatFilterItem.tsx b/src/pages/app/components/common/filter/TimeFormatFilterItem.tsx index c690e142d..583ac07fc 100644 --- a/src/pages/app/components/common/filter/TimeFormatFilterItem.tsx +++ b/src/pages/app/components/common/filter/TimeFormatFilterItem.tsx @@ -9,25 +9,20 @@ import { t } from "@app/locale" import { defineComponent } from "vue" import SelectFilterItem from "./SelectFilterItem" -const TIME_FORMAT_LABELS: { [key in timer.app.TimeFormat]: string } = { +const TIME_FORMAT_LABELS: { [key in tt4b.ui.TimeFormat]: string } = { default: t(msg => msg.timeFormat.default), second: t(msg => msg.timeFormat.second), minute: t(msg => msg.timeFormat.minute), hour: t(msg => msg.timeFormat.hour) } -type Props = { - modelValue: timer.app.TimeFormat - onChange: (val: timer.app.TimeFormat) => void -} - -const _default = defineComponent<Props>(props => { +const _default = defineComponent<ModelValue<tt4b.ui.TimeFormat>>(props => { return () => ( <SelectFilterItem historyName="timeFormat" defaultValue={props.modelValue} options={TIME_FORMAT_LABELS} - onSelect={val => props.onChange(val as timer.app.TimeFormat)} + onChange={val => val && props.onChange?.(val as tt4b.ui.TimeFormat)} /> ) }, { props: ['modelValue', 'onChange'] }) diff --git a/src/pages/app/components/common/filter/common.ts b/src/pages/app/components/common/filter/common.ts index db050fa68..c8bcbf430 100644 --- a/src/pages/app/components/common/filter/common.ts +++ b/src/pages/app/components/common/filter/common.ts @@ -1,5 +1,24 @@ -import { StyleValue } from "vue" +import { useCached, useState } from '@hooks' +import { watch, type StyleValue } from "vue" +import { useRoute } from 'vue-router' export const SELECT_WRAPPER_STYLE: StyleValue = { width: '200px', -} \ No newline at end of file +} + +export type BaseFilterProps<T> = { + defaultValue: T + historyName?: string + onChange?: ArgCallback<T> +} + +export const useFilterState = <T>(item: string, props: BaseFilterProps<T>) => { + const [data, setter] = props.historyName + ? useCached(`__filter_item_${item}_${useRoute().path}_${props.historyName}`, props.defaultValue) + : useState(props.defaultValue) + props.onChange && watch(data, props.onChange, { immediate: true }) + + return [data, setter] as const +} + +export const ALL_BASE_FILTER_PROPS: readonly (keyof BaseFilterProps<unknown>)[] = ['defaultValue', 'historyName', 'onChange'] \ No newline at end of file diff --git a/src/pages/app/components/common/imported/CompareTable.tsx b/src/pages/app/components/common/imported/CompareTable.tsx index ba9715064..8c2b90efc 100644 --- a/src/pages/app/components/common/imported/CompareTable.tsx +++ b/src/pages/app/components/common/imported/CompareTable.tsx @@ -5,24 +5,24 @@ * https://opensource.org/licenses/MIT */ -import HostAlert from "@app/components/common/HostAlert" -import { t } from "@app/locale" -import { cvt2LocaleTime, periodFormatter } from "@app/util/time" +import { type I18nKey, t } from "@app/locale" +import { cvt2LocaleTime, periodFormatter } from '@app/util/time' import { useState } from "@hooks" import Box from "@pages/components/Box" import { type Column, ElAutoResizer, ElTableV2, type SortBy, TableV2SortOrder } from "element-plus" import { computed, defineComponent, toRef } from "vue" +import HostAlert from "../HostAlert" type SortInfo = SortBy & { - key: keyof timer.imported.Row + key: keyof tt4b.imported.Row } -function computeList(sort: SortInfo, originRows: timer.imported.Row[]): timer.imported.Row[] { +function computeList(sort: SortInfo, originRows: tt4b.imported.Row[]): tt4b.imported.Row[] { const { key, order } = sort if (!key) { return originRows } - const comparator = (a: timer.imported.Row, b: timer.imported.Row): number => { + const comparator = (a: tt4b.imported.Row, b: tt4b.imported.Row): number => { const av = a[key] ?? 0, bv = b[key] ?? 0 if (av == bv) return 0 if (order === TableV2SortOrder.DESC) { @@ -34,37 +34,37 @@ function computeList(sort: SortInfo, originRows: timer.imported.Row[]): timer.im return originRows.sort(comparator) } -const focusCol = (comparedColName: string): Column[] => [ +const focusCol = (comparedCol: I18nKey): Column[] => [ { width: 150, align: 'center', - title: comparedColName, - cellRenderer: ({ rowData }) => <span>{periodFormatter((rowData as timer.imported.Row).focus)}</span>, + title: t(comparedCol), + cellRenderer: ({ rowData }) => <span>{periodFormatter((rowData as tt4b.imported.Row).focus)}</span>, }, { width: 150, align: 'center', title: t(msg => msg.dataManage.importOther.local), - cellRenderer: ({ rowData }) => <span>{periodFormatter((rowData as timer.imported.Row).exist?.focus)}</span>, + cellRenderer: ({ rowData }) => <span>{periodFormatter((rowData as tt4b.imported.Row).exist?.focus)}</span>, } ] -const timeCol = (comparedColName: string): Column[] => [ +const timeCol = (comparedCol: I18nKey): Column[] => [ { width: 150, align: 'center', - title: comparedColName, - cellRenderer: ({ rowData }) => <span>{(rowData as timer.imported.Row).time ?? 0}</span>, + title: t(comparedCol), + cellRenderer: ({ rowData }) => <span>{(rowData as tt4b.imported.Row).time ?? 0}</span>, }, { width: 150, align: 'center', title: t(msg => msg.dataManage.importOther.local), - cellRenderer: ({ rowData }) => <span>{(rowData as timer.imported.Row).exist?.time ?? '-'}</span>, + cellRenderer: ({ rowData }) => <span>{(rowData as tt4b.imported.Row).exist?.time ?? '-'}</span>, } ] type Props = { - data: timer.imported.Data - comparedColName: string + data: tt4b.imported.Data + comparedCol: I18nKey } const BASE_COLUMNS: Column[] = [ @@ -78,7 +78,7 @@ const BASE_COLUMNS: Column[] = [ sortable: true, align: 'center', title: t(msg => msg.item.date), - cellRenderer: ({ rowData }) => <span>{cvt2LocaleTime((rowData as timer.imported.Row).date)}</span>, + cellRenderer: ({ rowData }) => <span>{cvt2LocaleTime((rowData as tt4b.imported.Row).date)}</span>, }, { width: 300, dataKey: 'host' satisfies SortInfo['key'], @@ -86,7 +86,7 @@ const BASE_COLUMNS: Column[] = [ align: 'center', title: t(msg => msg.item.host), cellRenderer: ({ rowData }) => { - const { host } = rowData as timer.imported.Row + const { host } = rowData as tt4b.imported.Row return host ? <HostAlert value={{ host, type: 'normal' }} clickable={false} /> : <></> }, } @@ -95,12 +95,12 @@ const BASE_COLUMNS: Column[] = [ const _default = defineComponent<Props>((props) => { const data = toRef(props, 'data') const [sort, setSort] = useState<SortInfo>({ order: TableV2SortOrder.ASC, key: 'date' }) - const list = computed(() => computeList(sort.value, data.value?.rows)) + const list = computed(() => computeList(sort.value, data.value.rows)) const columns = computed(() => { const value = [...BASE_COLUMNS] const { focus, time } = data.value - focus && value.push(...focusCol(props.comparedColName)) - time && value.push(...timeCol(props.comparedColName)) + focus && value.push(...focusCol(props.comparedCol)) + time && value.push(...timeCol(props.comparedCol)) return value }) @@ -120,6 +120,6 @@ const _default = defineComponent<Props>((props) => { } /> </Box> ) -}, { props: ['data', 'comparedColName'] }) +}, { props: ['data', 'comparedCol'] }) export default _default \ No newline at end of file diff --git a/src/pages/app/components/common/imported/ResolutionRadio.tsx b/src/pages/app/components/common/imported/ResolutionRadio.tsx index 7c079072c..61a5d5f05 100644 --- a/src/pages/app/components/common/imported/ResolutionRadio.tsx +++ b/src/pages/app/components/common/imported/ResolutionRadio.tsx @@ -11,9 +11,9 @@ import Flex from "@pages/components/Flex" import { ElForm, ElFormItem, ElIcon, ElRadio, ElRadioGroup, ElTooltip } from "element-plus" import { defineComponent } from "vue" -export const ALL_RESOLUTIONS: timer.imported.ConflictResolution[] = ['overwrite', 'accumulate'] +const ALL_RESOLUTIONS: tt4b.imported.ConflictResolution[] = ['overwrite', 'accumulate'] -type Value = timer.imported.ConflictResolution | undefined +type Value = tt4b.imported.ConflictResolution | undefined type Props = { modelValue: Value diff --git a/src/pages/app/components/common/kanban/Card.tsx b/src/pages/app/components/common/kanban/Card.tsx index a18c58b72..25228dd8a 100644 --- a/src/pages/app/components/common/kanban/Card.tsx +++ b/src/pages/app/components/common/kanban/Card.tsx @@ -5,9 +5,11 @@ * https://opensource.org/licenses/MIT */ -import { CLZ_HIDDEN_XS_ONLY } from "@pages/element-ui/style" +import { t, type I18nKey } from '@app/locale' +import { useXsState } from '@hooks' +import Box from '@pages/components/Box' import { ElCard } from "element-plus" -import { defineComponent, h, useSlots, type StyleValue } from "vue" +import { defineComponent, useSlots, type StyleValue } from "vue" const TITLE_STYLE: StyleValue = { position: 'absolute', @@ -18,23 +20,23 @@ const TITLE_STYLE: StyleValue = { zIndex: 1000, } -const _default = defineComponent<{ title: string }>(props => { +const FILTER_CONTAINER_STYLE: StyleValue = { + borderBottom: '1px var(--el-border-color) var(--el-border-style)', +} + +const _default = defineComponent<{ title: I18nKey }>(props => { const { default: default_, filter } = useSlots() + const isXs = useXsState() + return () => ( <ElCard bodyStyle={{ position: 'relative' }}> - <div style={TITLE_STYLE}>{props.title}</div> - {!!filter && ( - <div - class={CLZ_HIDDEN_XS_ONLY} - style={{ - paddingTop: '10px', paddingBottom: '14px', - borderBottom: '1px var(--el-border-color) var(--el-border-style)', - }} - > - {h(filter)} - </div> + <div style={TITLE_STYLE}>{t(props.title)}</div> + {!!filter && !isXs.value && ( + <Box paddingBlock="10px 14px" style={FILTER_CONTAINER_STYLE}> + {filter()} + </Box> )} - {!!default_ && h(default_)} + {default_?.()} </ElCard> ) }, { props: ['title'] }) diff --git a/src/pages/app/components/common/kanban/IndicatorCell.tsx b/src/pages/app/components/common/kanban/IndicatorCell.tsx index ab785e77b..6765767f4 100644 --- a/src/pages/app/components/common/kanban/IndicatorCell.tsx +++ b/src/pages/app/components/common/kanban/IndicatorCell.tsx @@ -5,38 +5,28 @@ * https://opensource.org/licenses/MIT */ -import { computeRingText, RingValue, ValueFormatter } from "@app/components/Analysis/util" import { tN, type I18nKey } from "@app/locale" import { BottomRight, InfoFilled, TopRight } from "@element-plus/icons-vue" +import { useXsState } from '@hooks' import Box from "@pages/components/Box" import Flex from "@pages/components/Flex" -import { range } from "@util/array" +import { colorVariant, getCssVariable } from '@pages/util/style' import { ElIcon, ElTooltip } from "element-plus" -import { defineComponent, type CSSProperties, type PropType, type VNode } from "vue" -import type { JSX } from "vue/jsx-runtime" -import "./indicator-cell.sass" +import { defineComponent, type CSSProperties, type FunctionalComponent } from "vue" +import type { RingValue, ValueFormatter } from './types' -export type SubProps = { - subTips?: I18nKey - subValue?: string - subInfo?: string - subRing?: RingValue - valueFormatter?: ValueFormatter -} +const SubVal: FunctionalComponent<{ value: string }> = ({ value }) => ( + <Flex as='span' color='text-primary' margin='0 3px'> + {value} + </Flex> +) -function renderSubVal(valText: string) { - return <span class="kanban-indicator-cell-sub-val">{valText}</span> -} - -function renderComparisonIcons(ring: RingValue): VNode | null { - const [current = 0, last = 0] = ring - if (current === last) return null - const clz = [ - 'icon-wrapper', - current > last && 'increase', - current < last && 'decrease', - ] - const icon = current > last ? <TopRight /> : <BottomRight /> +const computeComparison = (value: RingValue) => { + const [current = 0, last = 0] = value + if (current === last) return false + const colorVar = current > last ? colorVariant('danger') : colorVariant('success', 'light', 3) + const color = getCssVariable(colorVar) + const Icon = current > last ? TopRight : BottomRight let count = 0 if (current === 0 || last === 0) { count = 3 @@ -46,77 +36,99 @@ function renderComparisonIcons(ring: RingValue): VNode | null { const rate = current / last count = Math.min(Math.ceil(Math.abs(Math.log2(rate))), 3) } - if (!count) return null - const icons = range(count).map(() => <ElIcon>{icon}</ElIcon>) - return <div class={clz}>{icons}</div> + return count ? { color, Icon, count } : false } -function renderSub(props: SubProps): VNode | null { - const { subTips, subValue, subInfo, subRing, valueFormatter } = props - if (!subTips && !subValue && !subRing) { - return null - } +const ComparisonIcon: FunctionalComponent<{ value: RingValue }> = props => { + const comp = computeComparison(props.value) + if (!comp) return null + const { color, count, Icon } = comp + return ( + <Flex color={color}> + {Array.from({ length: count }).map((_, idx) => <ElIcon key={idx}><Icon /></ElIcon>)} + </Flex> + ) +} - const subTipsLine: (JSX.Element | string)[] = [] - if (subRing) { - const ringText = computeRingText(subRing, valueFormatter) - if (ringText) { - const subValueSpan = renderSubVal(ringText) - subTipsLine.push(subValueSpan) - const icons = renderComparisonIcons(subRing) - icons && subTipsLine.push(icons) - } else { - const subValueSpan = renderSubVal('-') - subTipsLine.push(subValueSpan) - } - } else { - const subValueSpan = renderSubVal(subValue ?? '-') - if (subTips) { - subTipsLine.push(...tN(subTips, { value: subValueSpan })) - } else { - subTipsLine.push(subValueSpan) - } - subInfo && subTipsLine.push( - <Flex inline align="center" height="100%" marginInline='2px 0px'> - <ElTooltip content={subInfo} placement="bottom"> - <ElIcon><InfoFilled /></ElIcon> - </ElTooltip> - </Flex> - ) - } - return <div class="kanban-indicator-cell-sub-tip">{subTipsLine}</div> +const RingLine: FunctionalComponent<{ value: RingValue, formatter?: ValueFormatter }> = props => { + const { value, formatter } = props + const [current, last] = value + + if (current === undefined && last === undefined) return <SubVal value='-' /> + + const delta = (current ?? 0) - (last ?? 0) + const deltaText = formatter?.(delta) ?? delta?.toString() + const text = delta >= 0 ? `+${deltaText}` : deltaText + return <> + <SubVal value={text} /> + <ComparisonIcon value={props.value} /> + </> } -const _default = defineComponent({ - props: { - mainName: String, - mainValue: String, - subTips: Function as PropType<I18nKey>, - subValue: String, - subInfo: String, - subRing: [Object, Object] as PropType<RingValue>, - valueFormatter: Function as PropType<ValueFormatter>, - containerStyle: Object as PropType<CSSProperties>, - }, - setup(props) { - return () => ( - <Flex - column justify="center" - minHeight={140} - boxSizing="border-box" - position="relative" - paddingBlock={10} - paddingInline="40px 20px" - style={props.containerStyle} - > - <Box fontSize={14} color="text-secondary">{props.mainName}</Box> - <Box fontSize={24} marginBlock='.25em .6em'> - {props.mainValue ?? '-'} - </Box> - {renderSub(props)} - </Flex> - ) - } -}) +type SubProps = { + value?: string + ring?: RingValue + formatter?: ValueFormatter + tips?: I18nKey + info?: string +} + +const SubLine = defineComponent<SubProps>(props => { + const isXs = useXsState() + return () => ( + <Flex + wrap align='center' height={17} + color='text-secondary' fontSize={12} + style={{ wordBreak: 'break-word', margin: isXs.value ? '0 auto' : undefined }} + > + {props.ring + ? <RingLine value={props.ring} formatter={props.formatter} /> : + <> + {props.tips && tN(props.tips, { value: <SubVal value={props.value ?? '-'} /> })} + {!props.tips && props.value && <SubVal value={props.value} />} + {props.info && <Flex inline align="center" height="100%" marginInline='2px 0px'> + <ElTooltip content={props.info} placement="bottom"> + <ElIcon><InfoFilled /></ElIcon> + </ElTooltip> + </Flex>} + </>} + </Flex> + ) +}, { props: ['info', 'ring', 'tips', 'value', 'formatter'] }) + +type Props = { + subTips?: I18nKey + subValue?: string + subInfo?: string + subRing?: RingValue + valueFormatter?: ValueFormatter + mainName: string + mainValue: string + containerStyle?: CSSProperties +} + +const IndicatorCell: FunctionalComponent<Props> = props => { + return ( + <Flex + column justify="center" + minHeight={140} + boxSizing="border-box" + position="relative" + paddingBlock={10} + paddingInline="40px 20px" + style={props.containerStyle} + > + <Box fontSize={14} color="text-secondary">{props.mainName}</Box> + <Box fontSize={24} marginBlock='.25em .6em'> + {props.mainValue ?? '-'} + </Box> + <SubLine + ring={props.subRing} value={props.subValue} formatter={props.valueFormatter} + tips={props.subTips} info={props.subInfo} + /> + </Flex> + ) +} +IndicatorCell.displayName = 'IndicatorCell' -export default _default \ No newline at end of file +export default IndicatorCell \ No newline at end of file diff --git a/src/pages/app/components/common/kanban/index.ts b/src/pages/app/components/common/kanban/index.ts index 36f80fdc4..fe8d5f4d3 100644 --- a/src/pages/app/components/common/kanban/index.ts +++ b/src/pages/app/components/common/kanban/index.ts @@ -5,8 +5,5 @@ * https://opensource.org/licenses/MIT */ -import Card from "./Card" -import IndicatorCell from "./IndicatorCell" - -export const KanbanIndicatorCell = IndicatorCell -export const KanbanCard = Card \ No newline at end of file +export { default as KanbanCard } from "./Card" +export { default as KanbanIndicatorCell } from "./IndicatorCell" diff --git a/src/pages/app/components/common/kanban/indicator-cell.sass b/src/pages/app/components/common/kanban/indicator-cell.sass deleted file mode 100644 index 62093f536..000000000 --- a/src/pages/app/components/common/kanban/indicator-cell.sass +++ /dev/null @@ -1,19 +0,0 @@ - -.kanban-indicator-cell-sub-tip - display: flex - flex-wrap: wrap - align-items: center - height: 17px - line-height: 17px - font-size: 12px - word-break: break-word - color: var(--el-text-color-secondary) - .icon-wrapper - display: flex - .icon-wrapper.increase - color: var(--timer-chart-increase-color) - .icon-wrapper.decrease - color: var(--timer-chart-decrease-color) -.kanban-indicator-cell-sub-val,.indicator-ring-growth-value - color: var(--el-text-color-primary) - margin: 0 3px diff --git a/src/pages/app/components/common/kanban/types.d.ts b/src/pages/app/components/common/kanban/types.d.ts new file mode 100644 index 000000000..6b5412c6b --- /dev/null +++ b/src/pages/app/components/common/kanban/types.d.ts @@ -0,0 +1,6 @@ +export type RingValue = [ + current?: number, + last?: number, +] + +export type ValueFormatter = (val: number | undefined) => string \ No newline at end of file diff --git a/src/pages/app/context.ts b/src/pages/app/context.ts index d99327997..a724a678a 100644 --- a/src/pages/app/context.ts +++ b/src/pages/app/context.ts @@ -1,28 +1,46 @@ -import { useProvide, useProvider, useRequest } from "@hooks" -import cateService from "@service/cate-service" +import { listAllCategories } from "@api/sw/cate" +import { MediaSize, useMediaSize, useProvide, useProvider, useRequest } from "@hooks" import { toMap } from '@util/array' import { CATE_NOT_SET_ID } from '@util/site' -import { computed, type Ref } from "vue" +import { computed, reactive, watch } from "vue" import { t } from './locale' +type MenuLayout = 'nav' | 'sidebar' + +interface CategoryInstance { + enabled: boolean + all: tt4b.site.Cate[] + nameMap: Record<number, string> + refresh(): void +} + type AppContextValue = { - categories: Ref<timer.site.Cate[]> - refreshCategories: () => void - cateNameMap: Ref<Record<number, string>> + category: Readonly<CategoryInstance> } const NAMESPACE = '_' export const initAppContext = () => { - const { data: categories, refresh: refreshCategories } = useRequest(() => cateService.listAll(), { defaultValue: [] }) - const cateNameMap = computed(() => { - const map = toMap(categories.value, c => c.id, c => c.name) - map[CATE_NOT_SET_ID] = t(msg => msg.shared.cate.notSet) - return map + const { refresh: refreshCategories } = useRequest(listAllCategories, { + onSuccess: categories => { + category.all = categories + const map = toMap(categories, c => c.id, c => c.name) + map[CATE_NOT_SET_ID] = t(msg => msg.shared.cate.notSet) + category.nameMap = map + } }) - useProvide<AppContextValue>(NAMESPACE, { categories, refreshCategories, cateNameMap }) + const mediaSize = useMediaSize() + const layout = computed<MenuLayout>(() => mediaSize.value > MediaSize.sm ? 'sidebar' : 'nav') + watch(layout, v => category.enabled = v === 'sidebar') + const category: CategoryInstance = reactive({ + enabled: layout.value === 'sidebar', + all: [], + nameMap: {}, + refresh: refreshCategories, + }) + useProvide<AppContextValue>(NAMESPACE, { category }) + + return { layout } } -export const useCategories = () => useProvider<AppContextValue, "categories" | "refreshCategories" | "cateNameMap">( - NAMESPACE, "categories", "refreshCategories", "cateNameMap" -) +export const useCategory = () => useProvider<AppContextValue, "category">(NAMESPACE, "category").category \ No newline at end of file diff --git a/src/pages/app/echarts.ts b/src/pages/app/echarts.ts deleted file mode 100644 index adaea40a2..000000000 --- a/src/pages/app/echarts.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { BarChart, CustomChart, EffectScatterChart, HeatmapChart, LineChart, PieChart, ScatterChart } from "echarts/charts" -import { - AriaComponent, - DataZoomComponent, - GridComponent, - LegendComponent, - TitleComponent, - TooltipComponent, - VisualMapComponent, -} from "echarts/components" -import { use } from "echarts/core" -import { CanvasRenderer } from "echarts/renderers" - -export const initEcharts = () => { - use([ - CanvasRenderer, - AriaComponent, GridComponent, TooltipComponent, TitleComponent, VisualMapComponent, LegendComponent, DataZoomComponent, - BarChart, PieChart, LineChart, HeatmapChart, ScatterChart, EffectScatterChart, CustomChart, - ]) -} \ No newline at end of file diff --git a/src/pages/app/index.ts b/src/pages/app/index.ts index 5aaf1be17..b53d83526 100644 --- a/src/pages/app/index.ts +++ b/src/pages/app/index.ts @@ -7,34 +7,26 @@ import { listenMediaSizeChange } from "@hooks" import { initLocale } from "@i18n" -import { initElementLocale } from "@i18n/element" -import optionService from "@service/option-service" -import { init as initTheme, toggle } from "@util/dark-mode" -import 'element-plus/theme-chalk/index.css' -import { createApp, type App } from "vue" -import '../../common/timer' -import { initEcharts } from "./echarts" +import { createElApp } from "@pages/element-ui/app" +import { initDarkTheme } from "@pages/util/dark-mode" +import { initEcharts } from "../util/echarts" import Main from "./Layout" import installRouter from "./router" -import './styles/index.sass' +import { injectAppCss } from './styles/index' async function main() { - // Init theme with cache first - initTheme() + injectAppCss() + initDarkTheme() listenMediaSizeChange() - // Calculate the latest mode - optionService.isDarkMode().then(toggle) - await initLocale() + initLocale() initEcharts() - const app: App = createApp(Main) + const app = await createElApp(Main) installRouter(app) const el = document.createElement('div') document.body.append(el) el.id = 'app' app.mount(el) - - await initElementLocale(app) } main() \ No newline at end of file diff --git a/src/pages/app/locale.ts b/src/pages/app/locale.ts index 64a5d7f16..e5dbedb70 100644 --- a/src/pages/app/locale.ts +++ b/src/pages/app/locale.ts @@ -19,7 +19,7 @@ export function t(key: I18nKey, param?: any) { /** * @since 0.8.8 */ -export function tWith(key: I18nKey, specLocale: timer.Locale, param?: any) { +export function tWith(key: I18nKey, specLocale: tt4b.Locale, param?: any) { const props = { key, param } return _t<AppMessage>(messages, props, specLocale) } diff --git a/src/pages/app/router/constants.ts b/src/pages/app/router/constants.ts index ff96e795c..f903d2818 100644 --- a/src/pages/app/router/constants.ts +++ b/src/pages/app/router/constants.ts @@ -7,23 +7,12 @@ export const DASHBOARD_ROUTE = '/data/dashboard' -export const ANALYSIS_ROUTE = '/data/analysis' - -export const OPTION_ROUTE = '/additional/option' - /** - * Use on the app page and background script - * * @since 0.2.2 */ -export const LIMIT_ROUTE = '/behavior/limit' - -/** - * @since 0.9.1 - */ -export const REPORT_ROUTE = '/data/report' +export { + APP_ANALYSIS_ROUTE as ANALYSIS_ROUTE, APP_LIMIT_ROUTE as LIMIT_ROUTE, APP_OPTION_ROUTE as OPTION_ROUTE, + APP_RECORD_ROUTE as RECORD_ROUTE, type AppLimitQuery as LimitQuery, type AppRecordQuery as RecordQuery +} from "@/shared/route" -/** - * @since 1.8.0 - */ -export const MERGE_ROUTE = '/additional/rule-merge' \ No newline at end of file +export const RULE_ROUTE = '/additional/rule' \ No newline at end of file diff --git a/src/pages/app/router/index.ts b/src/pages/app/router/index.ts index ccea273d5..ae14c4fd4 100644 --- a/src/pages/app/router/index.ts +++ b/src/pages/app/router/index.ts @@ -5,10 +5,9 @@ * https://opensource.org/licenses/MIT */ -import metaService from "@service/meta-service" import { type App } from "vue" import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router" -import { ANALYSIS_ROUTE, DASHBOARD_ROUTE, LIMIT_ROUTE, MERGE_ROUTE, OPTION_ROUTE, REPORT_ROUTE } from "./constants" +import { ANALYSIS_ROUTE, DASHBOARD_ROUTE, LIMIT_ROUTE, OPTION_ROUTE, RECORD_ROUTE, RULE_ROUTE } from "./constants" const dataRoutes: RouteRecordRaw[] = [ { @@ -21,14 +20,14 @@ const dataRoutes: RouteRecordRaw[] = [ component: () => import('../components/Dashboard') }, { - path: REPORT_ROUTE, - component: () => import('../components/Report') + path: RECORD_ROUTE, + component: () => import('../components/Record') }, { path: ANALYSIS_ROUTE, component: () => import('../components/Analysis') }, { path: '/data/manage', - component: () => import('../components/DataManage') + component: () => import('../components/Migration') } ] @@ -48,16 +47,13 @@ const behaviorRoutes: RouteRecordRaw[] = [ const additionalRoutes: RouteRecordRaw[] = [ { path: '/additional', - redirect: '/additional/whitelist' + redirect: RULE_ROUTE, + }, { + path: RULE_ROUTE, + component: () => import('../components/Rule') }, { path: '/additional/site-manage', component: () => import('../components/SiteManage') - }, { - path: '/additional/whitelist', - component: () => import('../components/Whitelist') - }, { - path: MERGE_ROUTE, - component: () => import('../components/RuleMerge') }, { path: OPTION_ROUTE, component: () => import('../components/Option') @@ -91,17 +87,4 @@ const router = createRouter({ routes, }) -async function handleChange() { - await router.isReady() - const current = router.currentRoute.value.fullPath - current && metaService.increaseApp(current) - router.afterEach((to, from, failure: Error | void) => { - if (failure || to.fullPath === from.fullPath) return - metaService.increaseApp(to.fullPath) - }) -} - -export default (app: App) => { - app.use(router) - handleChange() -} +export default (app: App) => app.use(router) diff --git a/src/pages/app/styles/echarts.sass b/src/pages/app/styles/echarts.sass deleted file mode 100644 index 22881641c..000000000 --- a/src/pages/app/styles/echarts.sass +++ /dev/null @@ -1,18 +0,0 @@ -\:root - --echarts-series-color-1: #00C5C9 - --echarts-series-color-2: #F72585 - --echarts-series-color-3: #FFD600 - --echarts-series-color-4: #3A0CA3 - - --echarts-step-color-1: #4361EE - --echarts-step-color-2: var(--echarts-series-color-2) - - --echarts-compare-color-1: var(--echarts-series-color-2) - --echarts-compare-color-2: #7209B7 - - --echarts-increase-color: #00FF29 - --echarts-decrease-color: #E80054 - --echarts-pie-border-color: #ffffff - -html[data-theme='dark']:root - --echarts-pie-border-color: var(--el-border-color-light) diff --git a/src/pages/app/styles/echarts.ts b/src/pages/app/styles/echarts.ts new file mode 100644 index 000000000..2f57eefff --- /dev/null +++ b/src/pages/app/styles/echarts.ts @@ -0,0 +1,26 @@ +import { injectGlobal } from '@emotion/css' + +export const injectEchartsCss = () => { + injectGlobal` + :root { + --echarts-series-color-1: #00C5C9; + --echarts-series-color-2: #F72585; + --echarts-series-color-3: #FFD600; + --echarts-series-color-4: #3A0CA3; + + --echarts-step-color-1: #4361EE; + --echarts-step-color-2: var(--echarts-series-color-2); + + --echarts-compare-color-1: var(--echarts-series-color-2); + --echarts-compare-color-2: #7209B7; + + --echarts-increase-color: #00FF29; + --echarts-decrease-color: #E80054; + --echarts-pie-border-color: #ffffff; + } + + html[data-theme='dark']:root { + --echarts-pie-border-color: var(--el-border-color-light); + } + ` +} \ No newline at end of file diff --git a/src/pages/app/styles/element.sass b/src/pages/app/styles/element.sass deleted file mode 100644 index 9553b0045..000000000 --- a/src/pages/app/styles/element.sass +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -@import "element-plus/theme-chalk/display.css" - -html[data-locale='uk']:root, html[data-locale='pt_PT']:root, html[data-locale='es']:root - .el-date-range-picker - width: 781px - .el-picker-panel__sidebar - width: 135px - .el-picker-panel__body - margin-inline-start: 135px -html[data-locale='de']:root - .el-date-range-picker - width: 761px - .el-picker-panel__sidebar - width: 115px - .el-picker-panel__body - margin-inline-start: 115px - -html[data-locale='fr']:root, html[data-locale='ru']:root - .el-date-range-picker - width: 821px - .el-picker-panel__sidebar - width: 175px - .el-picker-panel__body - margin-inline-start: 175px - -// Fix header icon not align -.el-table__header - tr - .cell - display: flex - align-items: center - justify-content: center - -.el-table__cell .cell - .el-input - height: 28px - .el-input-group__append - padding: 0 4px - .el-input-group--append - .el-input__wrapper - height: 28px - .el-input__inner - padding-inline: 5px - .el-button [class*="el-icon-"] + span - margin-inline-start: 5px !important diff --git a/src/pages/app/styles/element.ts b/src/pages/app/styles/element.ts new file mode 100644 index 000000000..271693410 --- /dev/null +++ b/src/pages/app/styles/element.ts @@ -0,0 +1,37 @@ +import { injectGlobal } from '@emotion/css' + +export const injectElementCss = () => { + injectGlobal` + // Fix select-v2 + .el-vl__window.el-select-dropdown__list { + direction: unset !important; + } + + // Fix header icon not align + .el-table__header tr .cell { + display: flex; + align-items: center; + justify-content: center; + } + + .el-table__cell .cell { + .el-input { + height: 28px; + } + .el-input-group__append { + padding: 0 4px; + } + .el-input-group--append { + .el-input__wrapper { + height: 28px; + } + .el-input__inner { + padding-inline: 5px; + } + } + .el-button [class*="el-icon-"] + span { + margin-inline-start: 5px !important; + } + } + ` +} \ No newline at end of file diff --git a/src/pages/app/styles/index.sass b/src/pages/app/styles/index.sass deleted file mode 100644 index 517b2dbaf..000000000 --- a/src/pages/app/styles/index.sass +++ /dev/null @@ -1,93 +0,0 @@ -/** - * Copyright (c) 2021-present Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -@use "../../element-ui/dark-theme" -@use "echarts" -@use "element" - -body - height: 100vh - margin: 0 - -moz-osx-font-smoothing: grayscale - -webkit-font-smoothing: antialiased - text-rendering: optimizeLegibility - font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif - -h2 - font-size: 27px - -h3 - font-size: 22px - -p, -a - font-size: 15px - line-height: 20px - -.el-main - padding-top: 0 !important - padding-inline-start: 45px !important - -.app-container - width: 100% - background: var(--timer-app-container-bg-color) - margin: auto - -#app - height: 100% - -.el-container - height: 100% - overflow-y: auto - -.filter-container - .el-card__body - .filter-item - .el-picker-panel__sidebar - width: 130px !important - .el-picker-panel [slot="sidebar"] + .el-picker-panel__body, - .el-picker-panel__sidebar + .el-picker-panel__body - margin-inline-start: 130px !important - .el-button+.el-button - margin-inline-start: 0px - -.container-card - min-height: 640px - .el-card__body - height: 100% - -.collapse-card.collapse - .el-card__body - display: none - -\:root - --el-menu-item-height: 48px - --el-menu-active-color: var(--el-menu-text-color) - --el-menu-bg-color: #1d222d - --el-menu-text-color: #c1c6c8 - --el-menu-hover-bg-color: #262f3e - --el-alert-description-font-size: 75% !important - --timer-kanban-border: 1px var(--el-border-color) var(--el-border-style) - --timer-app-container-bg-color: var(--el-fill-color-blank) - --timer-chart-increase-color: var(--el-color-danger) - --timer-chart-decrease-color: var(--el-color-success-light-3) - -html[data-theme='dark']:root - // timer - --timer-app-container-bg-color: var(--el-fill-color-lighter) - -@media (max-width: 600px) - .filter-container .el-card__body - flex-direction: column - gap: 10px - .filter-item - margin-bottom: 0px - width: 100% - margin-bottom: 0px !important - .el-date-editor - .el-range-input - width: 39% diff --git a/src/pages/app/styles/index.ts b/src/pages/app/styles/index.ts new file mode 100644 index 000000000..0c2075ad2 --- /dev/null +++ b/src/pages/app/styles/index.ts @@ -0,0 +1,26 @@ +import { injectGlobal } from '@emotion/css' +import '@pages/element-ui/dark-theme.css' +import { injectEchartsCss } from './echarts' +import { injectElementCss } from './element' + +export const injectAppCss = () => { + injectEchartsCss() + injectElementCss() + + injectGlobal` + :root { + --el-menu-item-height: 48px; + --el-menu-active-color: var(--el-menu-text-color); + --el-menu-bg-color: #1d222d; + --el-menu-text-color: #c1c6c8; + --el-menu-hover-bg-color: #262f3e; + } + + body { + height: 100vh; + margin: 0; + text-rendering: optimizeLegibility; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; + } + ` +} \ No newline at end of file diff --git a/src/pages/app/util/echarts.ts b/src/pages/app/util/echarts.ts index 090c823d4..d1b08dddf 100644 --- a/src/pages/app/util/echarts.ts +++ b/src/pages/app/util/echarts.ts @@ -2,33 +2,34 @@ import { getCssVariable } from "@pages/util/style" import { range } from "@util/array" import { addVector, multiTuple, subVector } from "@util/tuple" import { type LinearGradientObject } from "echarts" +import type { TopLevelFormatterParams } from "echarts/types/dist/shared" -const splitVectors = (vectorRange: Tuple<Vector<number>, 2>, count: number, gradientFactor?: number): Vector<number>[] => { - gradientFactor = gradientFactor ?? 1.3 - const segmentCount = count - 1 +const splitColorVectors = (vectorRange: Tuple<Vector<3>, 2>, count: number, gradientFactor?: number): Vector<3>[] => { + gradientFactor ??= 1.3 const [v1, v2] = vectorRange + if (count === 1) return [v1] + const delta = subVector(v2, v1) - const allVectors = range(segmentCount).map(idx => { - const growth = Math.pow(idx / count, gradientFactor) - return addVector(v1, multiTuple(delta, growth)) + const last = count - 1 + + return range(count).map(i => { + const t = Math.pow(i / last, gradientFactor) + return addVector(v1, multiTuple(delta, t)) }) - allVectors.push(v2) - return allVectors } export const getStepColors = (count: number, gradientFactor?: number): string[] => { const p1 = getCssVariable('--echarts-step-color-1') ?? '' const p2 = getCssVariable('--echarts-step-color-2') ?? '' - if (!p1 || !p2) return [p1, p2].filter(s => !!s) + if (!p1 || !p2) return [p1, p2].filter(Boolean) if (count <= 0) return [] - if (count === 1) return [p1] - if (count === 2) return [p1, p2] const c1 = cvtColor2Vector(p1) const c2 = cvtColor2Vector(p2) - const allVectors = splitVectors([c1, c2], count, gradientFactor) - return allVectors.map(([r, g, b]) => `rgb(${r.toFixed(1)}, ${g.toFixed(1)}, ${b.toFixed(1)})`) + + return splitColorVectors([c1, c2], count, gradientFactor) + .map(v => `rgb(${v[0].toFixed(1)}, ${v[1].toFixed(1)}, ${v[2].toFixed(1)})`) } /** @@ -103,4 +104,14 @@ export const tooltipSpaceLine = (height?: number): string => { export const getPieBorderColor = (): string | undefined => { return getCssVariable('--echarts-pie-border-color') +} + +export function parseValueOfFormatter(params: TopLevelFormatterParams) { + const param = Array.isArray(params) ? params[0] : params + if (!param) return undefined + const { data } = param + if (typeof data === 'object' && data !== null && 'value' in data) { + return data.value + } + return undefined } \ No newline at end of file diff --git a/src/pages/app/util/limit.tsx b/src/pages/app/util/limit.tsx deleted file mode 100644 index 141070b6b..000000000 --- a/src/pages/app/util/limit.tsx +++ /dev/null @@ -1,190 +0,0 @@ -import { sendMsg2Runtime } from "@api/chrome/runtime" -import { t, tN } from "@app/locale" -import { I18nResultItem, locale } from "@i18n" -import { getCssVariable } from "@pages/util/style" -import verificationProcessor from "@service/limit-service/verification/processor" -import { dateMinute2Idx, hasLimited, isEnabledAndEffective } from "@util/limit" -import { ElMessage, ElMessageBox, type ElMessageBoxOptions, useId } from "element-plus" -import { defineComponent, onMounted, ref, type VNode } from "vue" - -/** - * Judge wether verification is required - * - * @returns T/F - */ -export async function judgeVerificationRequired(item: timer.limit.Item): Promise<boolean> { - if (item.locked) return true - if (!isEnabledAndEffective(item)) return false - - const { visitTime, periods } = item - // Daily or weekly - if (hasLimited(item)) return true - // Period - if (periods?.length) { - const idx = dateMinute2Idx(new Date()) - const hitPeriod = periods?.some(([s, e]) => s <= idx && e >= idx) - if (hitPeriod) return true - } - // Visit - if (visitTime) { - let hitVisit = false - try { - hitVisit = !!await sendMsg2Runtime("askHitVisit", item) - } catch (e) { - // If error occurs, regarded as not hitting - // ignored - } - if (hitVisit) return true - } - return false -} - - -const ANSWER_CANVAS_FONT_SIZE = 24 - -const AnswerCanvas = defineComponent(((props: { text: string }) => { - const dom = ref<HTMLCanvasElement>() - const wrapper = ref<HTMLDivElement>() - const { text } = props - - onMounted(() => { - const ele = dom.value - if (!ele) return - const ctx = ele.getContext("2d") - const height = Math.floor(ANSWER_CANVAS_FONT_SIZE * 1.3) - ele.height = height - const wrapperEl = wrapper.value - if (!wrapperEl || !ctx) return - const font = getComputedStyle(wrapperEl).font - // Set font to measure width - ctx.font = font - const { width } = ctx.measureText(text) - ele.width = width - // Need set font again after width changed - ctx.font = font - const color = getCssVariable("--el-text-color-primary") - color && (ctx.fillStyle = color) - ctx.fillText(text, 0, ANSWER_CANVAS_FONT_SIZE) - }) - - return () => ( - <div - style={{ - fontSize: `${ANSWER_CANVAS_FONT_SIZE}px`, - textAlign: 'center' - }} - ref={wrapper} - > - <canvas ref={dom} /> - </div> - ) -}), { props: ['text'] }) - -const useCountdown = (option: { countdown: number, onComplete: NoArgCallback, onTick: ArgCallback<number> }): NoArgCallback => { - const { countdown, onComplete, onTick } = option - - const start = Date.now() - let left = countdown * 1000 - - const timer = setInterval(() => { - left = Math.max(start + countdown * 1000 - Date.now(), 0) - onTick(left) - if (!left) { - onComplete() - clearInterval(timer) - } - }, 100) - - return () => clearInterval(timer) -} - -/** - * NOT TO return Promise.resolve() - * - * NOT TO use async - * - * @returns null if verification not required, - * or promise with resolve invoked only if verification code or password correct - */ -export function processVerification(option: timer.option.LimitOption, context?: { appendTo: Exclude<ElMessageBoxOptions['appendTo'], string> }): Promise<void> { - const { limitLevel, limitPassword, limitVerifyDifficulty } = option - const { appendTo } = context || {} - if (limitLevel === "strict") { - return new Promise(() => ElMessageBox({ - appendTo, - boxType: 'alert', - type: 'warning', - title: '', - message: <div>{t(msg => msg.limit.verification.strictTip)}</div>, - }).catch(() => { })) - } - let answerValue: string | undefined - let messageNode: I18nResultItem<VNode>[] | undefined | I18nResultItem<VNode> - let incorrectMessage: string - let countdown: number | undefined - if (limitLevel === 'password' && limitPassword) { - answerValue = limitPassword - messageNode = t(msg => msg.limit.verification.pswInputTip) - incorrectMessage = t(msg => msg.limit.verification.incorrectPsw) - } else if (limitLevel === 'verification') { - const pair = verificationProcessor.generate(limitVerifyDifficulty ?? 'easy', locale) - const { prompt, promptParam, answer, second = 60 } = pair || {} - countdown = second - answerValue = typeof answer === 'function' ? t(msg => answer(msg.limit.verification)) : answer - incorrectMessage = t(msg => msg.limit.verification.incorrectAnswer) - if (prompt) { - const promptTxt = typeof prompt === 'function' - ? t(msg => prompt(msg.limit.verification), { ...promptParam, answer: answerValue }) - : prompt - messageNode = tN(msg => msg.limit.verification.inputTip, { prompt: <b>{promptTxt}</b>, second }) - } else if (answerValue) { - messageNode = tN(msg => msg.limit.verification.inputTip2, { answer: <AnswerCanvas text={answerValue} />, second }) - } - } - if (!messageNode || !answerValue) return Promise.resolve() - - const okBtnClz = `limit-confirm-btn-${useId().value}` - const btnText = (leftSec: number) => `${okBtnTxt} (${leftSec})` - - const okBtnTxt = t(msg => msg.button.okey) - const msgData = ElMessageBox({ - appendTo, - autofocus: true, - boxType: 'prompt', - type: 'warning', - title: '', - message: <div style={{ userSelect: 'none' }}>{messageNode}</div>, - showInput: true, - showCancelButton: true, - showClose: false, - confirmButtonText: countdown ? btnText(countdown) : okBtnTxt, - confirmButtonClass: okBtnClz, - buttonSize: "small", - }) - - let cleanCountdown = countdown ? useCountdown({ - countdown, - onComplete: () => { - const btn = (appendTo ?? document).querySelector(`.${okBtnClz}`) - if (!btn) return - ElMessage.warning(t(msg => msg.limit.message.timeout)) - btn.remove() - }, - onTick: (val: number) => { - const btnSpan = (appendTo ?? document).querySelector(`.${okBtnClz} span`) - if (!btnSpan) return - btnSpan.innerHTML = btnText(Math.floor(val / 1000)) - }, - }) : undefined - - return new Promise(resolve => { - msgData.then(data => { - // Double check - const btn = (appendTo ?? document).querySelector(`.${okBtnClz}`) - if (!btn) return - const { value } = data - if (value === answerValue) return resolve() - ElMessage.error({ appendTo, message: incorrectMessage }) - }).catch(() => cleanCountdown?.()) - }) -} diff --git a/src/service/limit-service/verification/generator/confession.ts b/src/pages/app/util/limit/generator/confession.ts similarity index 83% rename from src/service/limit-service/verification/generator/confession.ts rename to src/pages/app/util/limit/generator/confession.ts index bc39c5fd9..1715dbb99 100644 --- a/src/service/limit-service/verification/generator/confession.ts +++ b/src/pages/app/util/limit/generator/confession.ts @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { type VerificationContext, type VerificationGenerator, type VerificationPair } from "../common" +import type { VerificationContext, VerificationGenerator, VerificationPair } from "../types" /** * Generator of confession diff --git a/src/service/limit-service/verification/generator/index.ts b/src/pages/app/util/limit/generator/index.ts similarity index 89% rename from src/service/limit-service/verification/generator/index.ts rename to src/pages/app/util/limit/generator/index.ts index a57bb658d..dc3425ce0 100644 --- a/src/service/limit-service/verification/generator/index.ts +++ b/src/pages/app/util/limit/generator/index.ts @@ -4,7 +4,7 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { type VerificationGenerator } from "../common" +import type { VerificationGenerator } from "../types" import ConfessionGenerator from "./confession" import PiGenerator from "./pi" import UglyGenerator from "./ugly" diff --git a/src/service/limit-service/verification/generator/pi.ts b/src/pages/app/util/limit/generator/pi.ts similarity index 91% rename from src/service/limit-service/verification/generator/pi.ts rename to src/pages/app/util/limit/generator/pi.ts index 5c673d7f4..b7b5a67ae 100644 --- a/src/service/limit-service/verification/generator/pi.ts +++ b/src/pages/app/util/limit/generator/pi.ts @@ -6,7 +6,7 @@ */ import { randomIntBetween } from "@util/number" -import { type VerificationContext, type VerificationGenerator, type VerificationPair } from "../common" +import type { VerificationContext, VerificationGenerator, VerificationPair } from "../types" const MIN_START_IDX = 10 const MAX_START_IDX = 25 diff --git a/src/service/limit-service/verification/generator/ugly.ts b/src/pages/app/util/limit/generator/ugly.ts similarity index 90% rename from src/service/limit-service/verification/generator/ugly.ts rename to src/pages/app/util/limit/generator/ugly.ts index 15cb8458d..d4e94ef41 100644 --- a/src/service/limit-service/verification/generator/ugly.ts +++ b/src/pages/app/util/limit/generator/ugly.ts @@ -7,9 +7,9 @@ import { range } from "@util/array" import { randomIntBetween } from "@util/number" -import type { VerificationContext, VerificationGenerator, VerificationPair } from "../common" +import type { VerificationContext, VerificationGenerator, VerificationPair } from "../types" -const BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\`-=[]/.,:\"<>?!@#$%^&*()_+;'".replaceAll(/[01IlLOo]/g, "") +const BASE = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz\`-=[]/.,:\"<>?!@#$%^&*()_+;'/i18n".replaceAll(/[01IlLOo]/g, "") const BASE_LEN = BASE.length class UglyGenerator implements VerificationGenerator { diff --git a/src/service/limit-service/verification/generator/uncommon-chinese.ts b/src/pages/app/util/limit/generator/uncommon-chinese.ts similarity index 78% rename from src/service/limit-service/verification/generator/uncommon-chinese.ts rename to src/pages/app/util/limit/generator/uncommon-chinese.ts index 4c19eea71..066353ee7 100644 --- a/src/service/limit-service/verification/generator/uncommon-chinese.ts +++ b/src/pages/app/util/limit/generator/uncommon-chinese.ts @@ -6,14 +6,14 @@ */ import { randomIntBetween } from "@util/number" -import type { VerificationContext, VerificationGenerator, VerificationPair } from "../common" +import type { VerificationContext, VerificationGenerator, VerificationPair } from "../types" const UNCOMMON_WORDS = '龘靐齉齾爩鱻麤龗灪吁龖厵滟爨癵籱饢驫鲡鹂鸾麣纞虋讟钃骊郁鸜麷鞻韽韾响顟顠饙饙騳騱饐' const LENGTH = UNCOMMON_WORDS.length class UncommonChinese implements VerificationGenerator { - supports(context: VerificationContext): boolean { - return context.difficulty === 'disgusting' && context.locale === 'zh_CN' + supports({ difficulty, locale }: VerificationContext): boolean { + return difficulty === 'disgusting' && (locale === 'zh_CN' || locale === 'zh_TW') } generate(_: VerificationContext): VerificationPair { @@ -21,7 +21,7 @@ class UncommonChinese implements VerificationGenerator { while (answer.length < 3) { const idx = randomIntBetween(0, LENGTH) const ch = UNCOMMON_WORDS[idx] - if (!answer.includes(ch)) { + if (ch && !answer.includes(ch)) { answer += ch } } diff --git a/src/pages/app/util/limit/index.tsx b/src/pages/app/util/limit/index.tsx new file mode 100644 index 000000000..42e51a511 --- /dev/null +++ b/src/pages/app/util/limit/index.tsx @@ -0,0 +1,217 @@ +import { sendMsg2Runtime, trySendMsg2Runtime } from '@api/sw/common' +import { css } from '@emotion/css' +import { useCountDown } from "@hooks" +import { type I18nKey, type I18nResultItem, locale, t as t_, tN as tN_ } from "@i18n" +import limitMessages, { type LimitMessage } from "@i18n/message/app/limit" +import buttonMessages from "@i18n/message/common/button" +import { getCssVariable } from "@pages/util/style" +import { dateMinute2Idx, hasLimited, isEffective } from "@util/limit" +import { ElMessage, ElMessageBox, type InputType, useId, useNamespace } from "element-plus" +import { defineComponent, onMounted, ref, type VNode } from "vue" +import verificationProcessor from './processor' + +const t = (key: I18nKey<LimitMessage>, param?: any) => t_(limitMessages, { key, param }) + +const tN = (key: I18nKey<LimitMessage>, param?: any) => tN_<LimitMessage, VNode>(limitMessages, { key, param }) + +/** + * Judge wether verification is required + * + * @returns T/F + */ +export async function judgeVerificationRequired(item: tt4b.limit.Item, delayDuration: number): Promise<boolean> { + if (!item.enabled || !isEffective(item.weekdays)) return false + + const { visitTime, periods } = item + // Daily or weekly + if (hasLimited(item, delayDuration)) return true + // Period + if (periods?.length) { + const idx = dateMinute2Idx(new Date()) + const hitPeriod = periods?.some(([s, e]) => s <= idx && e >= idx) + if (hitPeriod) return true + } + // Visit + if (visitTime) { + // If error occurs, regarded as not hitting + const hitVisit = await trySendMsg2Runtime('limit.hitVisit', item) ?? false + if (hitVisit) return true + } + return false +} + + +const ANSWER_CANVAS_FONT_SIZE = 24 + +const AnswerCanvas = defineComponent(((props: { text: string }) => { + const dom = ref<HTMLCanvasElement>() + const wrapper = ref<HTMLDivElement>() + const { text } = props + + onMounted(() => { + const ele = dom.value + if (!ele) return + const ctx = ele.getContext("2d") + const height = Math.floor(ANSWER_CANVAS_FONT_SIZE * 1.3) + ele.height = height + const wrapperEl = wrapper.value + if (!wrapperEl || !ctx) return + const font = getComputedStyle(wrapperEl).font + // Set font to measure width + ctx.font = font + const { width } = ctx.measureText(text) + ele.width = width + // Need set font again after width changed + ctx.font = font + const color = getCssVariable("--el-text-color-primary") + color && (ctx.fillStyle = color) + ctx.fillText(text, 0, ANSWER_CANVAS_FONT_SIZE) + }) + + return () => ( + <div + style={{ + fontSize: `${ANSWER_CANVAS_FONT_SIZE}px`, + textAlign: 'center' + }} + ref={wrapper} + > + <canvas ref={dom} /> + </div> + ) +}), { props: ['text'] }) + +// Fix some style missing in limit modal with postcss processor +const INPUT_NS = useNamespace('input') +const MODAL_CLS = css` + & .${INPUT_NS.e('inner')} { + background: 0; + } +` +const MSG_CLS = css` + left: 50%; + transform: translate(-50%); +` +const okBtnTxt = t_(buttonMessages, { key: msg => msg.okay }) + +const errMsg = (message: string) => ElMessage.error({ message, customClass: MSG_CLS }) + +/** + * NOT TO return Promise.resolve() + * + * NOT TO use async + * + * @returns null if verification not required, + * or promise with resolve invoked only if verification code or password correct + */ +export function processVerification(option: tt4b.option.LimitOption): Promise<void> { + const { limitLevel, limitPassword, limitVerifyDifficulty } = option + if (limitLevel === 'strict') { + return new Promise(() => ElMessageBox({ + boxType: 'alert', + type: 'warning', + title: '', + message: <div>{t(msg => msg.verification.strictTip)}</div>, + }).catch(() => { })) + } else if (limitLevel === '2fa') { + return process2faVerification() + } + let inputType: InputType | undefined + let answerValue: string | undefined + let messageNode: I18nResultItem<VNode>[] | undefined | I18nResultItem<VNode> + let incorrectMessage: string + let countdown: number | undefined + if (limitLevel === 'password' && limitPassword) { + answerValue = limitPassword + messageNode = t(msg => msg.verification.pswInputTip) + incorrectMessage = t(msg => msg.verification.incorrectPsw) + inputType = 'password' + } else if (limitLevel === 'verification') { + const pair = verificationProcessor.generate(limitVerifyDifficulty ?? 'easy', locale) + const { prompt, promptParam, answer, second = 60 } = pair ?? {} + countdown = second + answerValue = typeof answer === 'function' ? t(msg => (answer as (msg: any) => string)(msg.verification)) : answer + incorrectMessage = t(msg => msg.verification.incorrectAnswer) + if (prompt) { + const promptTxt = typeof prompt === 'function' + ? t(msg => prompt(msg.verification), { ...promptParam, answer: answerValue }) + : prompt + messageNode = tN(msg => msg.verification.inputTip, { prompt: <b>{promptTxt}</b>, second }) + } else if (answerValue) { + messageNode = tN(msg => msg.verification.inputTip2, { answer: <AnswerCanvas text={answerValue} />, second }) + } + } + if (!messageNode || !answerValue) return Promise.resolve() + + const okBtnClz = `limit-confirm-btn-${useId().value}` + const btnText = (leftSec: number) => `${okBtnTxt} (${leftSec})` + + const msgData = ElMessageBox({ + autofocus: true, + boxType: 'prompt', + type: 'warning', + message: <div style={{ userSelect: 'none' }}>{messageNode}</div>, + showInput: true, + inputType, + showCancelButton: true, + showClose: false, + confirmButtonText: countdown ? btnText(countdown) : okBtnTxt, + confirmButtonClass: okBtnClz, + buttonSize: "small", + modalClass: MODAL_CLS, + }) + + const cleanCountdown = countdown ? useCountDown({ + countdown, + onComplete: () => { + const btn = document.querySelector(`.${okBtnClz}`) + if (!btn) return + ElMessage.warning(t(msg => msg.message.timeout)) + btn.remove() + }, + onTick: (val: number) => { + const btnSpan = document.querySelector(`.${okBtnClz} span`) + if (!btnSpan) return + btnSpan.textContent = btnText(Math.floor(val / 1000)) + }, + }) : undefined + + return new Promise(resolve => { + msgData.then(data => { + // Double check + const btn = document.querySelector(`.${okBtnClz}`) + if (!btn) return + if (typeof data === 'string') return + const { value } = data + if (value === answerValue) return resolve() + errMsg(incorrectMessage) + }).catch(() => cleanCountdown?.()) + }) +} + +function process2faVerification(): Promise<void> { + return new Promise(resolve => ElMessageBox({ + autofocus: true, + boxType: 'prompt', + type: 'warning', + message: t(msg => msg.verification.twoFaInputTip), + showInput: true, + showCancelButton: true, + showClose: false, + confirmButtonText: okBtnTxt, + buttonSize: 'small', + modalClass: MODAL_CLS, + beforeClose: (act, instance, done) => { + if (act !== 'confirm') return done() + const code = instance.inputValue.replace(/\s/g, '') + if (!/^\d{6}$/.test(code)) return errMsg('Invalid code format') + sendMsg2Runtime('meta.check2fa', code) + .then(ok => { if (!ok) throw new Error('Incorrect code') }) + .then(() => { + resolve() + done() + }) + .catch(e => errMsg(e instanceof Error ? e.message : e ?? 'Unknown error')) + }, + })) +} diff --git a/src/pages/app/util/limit/processor.ts b/src/pages/app/util/limit/processor.ts new file mode 100644 index 000000000..dcfe49ad7 --- /dev/null +++ b/src/pages/app/util/limit/processor.ts @@ -0,0 +1,32 @@ +/** + * Copyright (c) 2023 Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { randomIntBetween } from "@util/number" +import { ALL_GENERATORS } from "./generator" +import type { VerificationContext, VerificationGenerator, VerificationPair } from "./types" + +class VerificationProcessor { + generators: VerificationGenerator[] + + constructor() { + this.generators = ALL_GENERATORS + } + + generate(difficulty: tt4b.limit.VerificationDifficulty, locale: tt4b.Locale): VerificationPair | undefined { + const context: VerificationContext = { difficulty, locale } + const supported = this.generators.filter(g => g.supports(context)) + + if (!supported.length) return undefined + + const generator = supported[randomIntBetween(0, supported.length)] + return generator?.generate(context) + } +} + +const verificationProcessor = new VerificationProcessor() + +export default verificationProcessor \ No newline at end of file diff --git a/src/service/limit-service/verification/common.ts b/src/pages/app/util/limit/types.ts similarity index 60% rename from src/service/limit-service/verification/common.ts rename to src/pages/app/util/limit/types.ts index 22cf89669..f3908a74b 100644 --- a/src/service/limit-service/verification/common.ts +++ b/src/pages/app/util/limit/types.ts @@ -4,15 +4,15 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ - -import { type I18nKey } from "@i18n" -import { type LimitMessage } from "@i18n/message/app/limit" +import type { I18nKey } from "@i18n" +import type { LimitMessage } from "@i18n/message/app/limit" +import { createArrayGuard, createOptionalGuard, createStringUnionGuard, isInt } from 'typescript-guard' type LimitVerificationMessage = LimitMessage['verification'] export type VerificationContext = { - difficulty: timer.limit.VerificationDifficulty - locale: timer.Locale + difficulty: tt4b.limit.VerificationDifficulty + locale: tt4b.Locale } export type VerificationPair = { @@ -35,4 +35,8 @@ export interface VerificationGenerator { * Render the prompt */ generate(context: VerificationContext): VerificationPair -} \ No newline at end of file +} + +export const isTimeFormat = createStringUnionGuard<tt4b.ui.TimeFormat>('default', 'hour', 'minute', 'second') + +export const isOptionalIntArray = createOptionalGuard(createArrayGuard(isInt)) diff --git a/src/pages/app/util/time.ts b/src/pages/app/util/time.ts index 68b47191a..b86a1a47f 100644 --- a/src/pages/app/util/time.ts +++ b/src/pages/app/util/time.ts @@ -5,8 +5,8 @@ * https://opensource.org/licenses/MIT */ -import { t } from "@app/locale" import { formatPeriodCommon, MILL_PER_MINUTE, MILL_PER_SECOND } from "@util/time" +import { t } from "../locale" /** * Convert {yyyy}{mm}{dd} to locale time @@ -25,14 +25,14 @@ export function cvt2LocaleTime(date: string | undefined): string { } type PeriodFormatOption = { - format?: timer.app.TimeFormat + format?: tt4b.ui.TimeFormat hideUnit?: boolean } -const UNIT_MAP: { [unit in Exclude<timer.app.TimeFormat, 'default'>]: string } = { - second: ' s', - minute: ' m', - hour: ' h', +const UNIT_MAP: { [unit in Exclude<tt4b.ui.TimeFormat, 'default'>]: string } = { + second: 's', + minute: 'm', + hour: 'h', } /** @@ -59,4 +59,4 @@ export function periodFormatter(milliseconds: number | undefined | null, option? if (hideUnit) return val let unit = UNIT_MAP[format] return val + unit -} +} \ No newline at end of file diff --git a/src/pages/components/Box.tsx b/src/pages/components/Box.tsx index 64be2126e..037e92d5b 100644 --- a/src/pages/components/Box.tsx +++ b/src/pages/components/Box.tsx @@ -1,22 +1,19 @@ -import { defineComponent, h, useSlots } from "vue" -import { ALL_BASE_PROPS, type BaseProps, cvt2BaseStyle } from "./common" +import type { FunctionalComponent } from "vue" +import { type BaseProps, cvt2BaseStyle } from "./common" -const Box = defineComponent<BaseProps>(props => { - const { default: defaultSlots } = useSlots() - - return () => ( - <div - id={props.id} - class={props.class} - onClick={props.onClick} - style={{ - display: props.inline ? 'inline-block' : 'block', - ...cvt2BaseStyle(props), - }} - > - {defaultSlots && h(defaultSlots)} - </div> - ) -}, { props: ALL_BASE_PROPS }) +const Box: FunctionalComponent<BaseProps> = (props, { slots }) => ( + <div + id={props.id} + class={props.class} + onClick={props.onClick} + style={{ + display: props.inline ? 'inline-block' : 'block', + ...cvt2BaseStyle(props), + }} + > + {slots.default?.()} + </div> +) +Box.displayName = 'Box' export default Box \ No newline at end of file diff --git a/src/pages/components/CondEditor.tsx b/src/pages/components/CondEditor.tsx new file mode 100644 index 000000000..fe35bb200 --- /dev/null +++ b/src/pages/components/CondEditor.tsx @@ -0,0 +1,170 @@ +import { listSites } from '@api/sw/site' +import { useRequest } from '@hooks' +import Flex from '@pages/components/Flex' +import { EXCLUDING_PREFIX } from '@util/constant/remain-host' +import { judgeVirtualFast } from '@util/pattern' +import { ElAutocomplete, ElMessage, ElScrollbar, ElTag, ElText, type AutocompleteInstance, type TagProps } from 'element-plus' +import { computed, defineComponent, nextTick, ref, type FunctionalComponent, type StyleValue } from 'vue' +import { cvtPxScale } from './common' + +const judgeExclude = (url: string): [isExcluding: boolean, cleanUrl: string] => { + const isExcluding = url.startsWith(EXCLUDING_PREFIX) + const cleanUrl = isExcluding ? url.substring(EXCLUDING_PREFIX.length) : url + return [isExcluding, cleanUrl] +} + +export function cleanCond(origin: string): string +export function cleanCond(origin: undefined): undefined +export function cleanCond(origin: string | undefined): string | undefined { + if (!origin) return undefined + + const [isExcluding, clean] = judgeExclude(origin) + + const startIdx = clean.indexOf('//') + const endIdx = clean.indexOf('?') + let res = clean.substring(startIdx === -1 ? 0 : startIdx + 2, endIdx === -1 ? undefined : endIdx) + while (res.endsWith('/')) { + res = res.substring(0, res.length - 1) + } + if (!res) return undefined + return isExcluding ? `${EXCLUDING_PREFIX}${res}` : res +} + +const useSuggestion = () => { + const { data: allHosts } = useRequest(async () => { + const sites = await listSites({ types: ['normal', 'virtual'] }) + return sites.map(s => s.host) + }, { defaultValue: [] }) + + const fetchSuggestions = (query: string, callback: (results: { value: string }[]) => void) => { + const clean = cleanCond(query) ?? query.trim() + if (!clean) { + callback(allHosts.value.slice(0, 10).map(value => ({ value }))) + return + } + const result: string[] = [clean] + const slashIdx = clean.indexOf('/') + if (slashIdx !== -1) { + const domain = clean.substring(0, slashIdx) + if (domain !== clean) result.push(domain) + } + allHosts.value.forEach(host => { + if (host.includes(clean) && !result.includes(host)) result.push(host) + }) + callback(result.slice(0, 10).map(value => ({ value }))) + } + return { fetchSuggestions } +} + +const tagType = (url: string): TagProps['type'] => { + if (url.startsWith(EXCLUDING_PREFIX)) return 'info' + if (judgeVirtualFast(url)) return 'warning' + return 'primary' +} + +const CONTAINER_STYLE: StyleValue = { + borderRadius: 'var(--el-border-radius-base)', + border: '1px solid var(--el-border-color)', + backgroundColor: 'var(--el-fill-color-blank)', +} + +const AUTOCOMPLETE_STYLE: StyleValue = { + '--el-input-border-color': 'transparent', + '--el-input-bg-color': 'transparent', + '--el-input-hover-border-color': 'transparent', + '--el-input-focus-border-color': 'transparent', +} + + +const TagList: FunctionalComponent<{ list: string[], onRemove: ArgCallback<string> }> = ({ list, onRemove }) => ( + <div v-show={list.length} style={{ minHeight: 0, overflow: 'hidden' }}> + <ElScrollbar height="100%"> + <Flex width="100%" wrap gap={4}> + {list.map(url => ( + <ElTag + type={tagType(url)} + disableTransitions + closable + onClose={() => onRemove(url)} + > + {url} + </ElTag> + ))} + </Flex> + </ElScrollbar> + </div> +) + +type CondEditorProps = ModelValue<string[]> & { + tip?: string + height?: string | number + placeholder?: string +} + +export interface CondEditorInstance { + focus(): void +} + +const sortUrl = (a: string, b: string) => { + const [aExcluding, aClean] = judgeExclude(a) + const [bExcluding, bClean] = judgeExclude(b) + if (aClean === bClean) { + if (aExcluding && !bExcluding) return 1 + if (!aExcluding && bExcluding) return -1 + return 0 + } + return aClean.localeCompare(bClean) +} + +const CondEditor = defineComponent<CondEditorProps>((props, ctx) => { + const list = computed(() => [...props.modelValue].sort(sortUrl)) + const inputValue = ref('') + const { fetchSuggestions } = useSuggestion() + + const autocomplete = ref<AutocompleteInstance>() + const focus = () => autocomplete.value?.focus() + + const handleAdd = (url: string) => { + const cleaned = cleanCond(url) ?? url.trim() + if (!cleaned) return + if (list.value.includes(cleaned)) { + ElMessage.warning('URL added already') + return + } + props.onChange?.([...list.value, cleaned]) + inputValue.value = '' + nextTick(focus) + } + + const handleRemove = (url: string) => props.onChange?.(list.value.filter(u => u !== url)) + + ctx.expose({ focus } satisfies CondEditorInstance) + + return () => ( + <Flex + class="cond-editor" + column width="100%" gap={10} + style={{ height: cvtPxScale(props.height) }} + > + <Flex column gap={8} padding={12} style={CONTAINER_STYLE} flex={1}> + <TagList list={list.value} onRemove={handleRemove} /> + <ElAutocomplete + ref={autocomplete} + modelValue={inputValue.value} + onUpdate:modelValue={val => inputValue.value = String(val)} + fetchSuggestions={fetchSuggestions} + onSelect={item => typeof item.value === 'string' && handleAdd(item.value)} + {...{ + onKeydown: (ev: Event) => ev instanceof KeyboardEvent && ev.key === 'Enter' && handleAdd(inputValue.value) + }} + placeholder={props.placeholder} + style={AUTOCOMPLETE_STYLE} + v-slots={{ prefix: () => <ElText type="info">></ElText> }} + /> + </Flex> + {props.tip && <ElText type="info" size="small" style={{ marginTop: '4px' }}>{props.tip}</ElText>} + </Flex> + ) +}, { props: ['modelValue', 'onChange', 'tip', 'height', 'placeholder'] }) + +export default CondEditor \ No newline at end of file diff --git a/src/pages/components/Flex.tsx b/src/pages/components/Flex.tsx index 6721e84bd..d19102124 100644 --- a/src/pages/components/Flex.tsx +++ b/src/pages/components/Flex.tsx @@ -1,5 +1,5 @@ -import { type CSSProperties, defineComponent, h, useSlots } from "vue" -import { ALL_BASE_PROPS, type BaseProps, cvt2BaseStyle } from "./common" +import type { CSSProperties, FunctionalComponent } from "vue" +import { type BaseProps, cvt2BaseStyle, cvtPxScale } from "./common" const cvtFlexWrap = (wrap: boolean | CSSProperties['flexWrap']): CSSProperties['flexWrap'] => { if (typeof wrap === 'string') return wrap @@ -8,20 +8,25 @@ const cvtFlexWrap = (wrap: boolean | CSSProperties['flexWrap']): CSSProperties[' } type Props = { + as?: keyof HTMLElementTagNameMap direction?: CSSProperties['flexDirection'] column?: boolean flex?: number align?: CSSProperties['alignItems'] justify?: CSSProperties['justifyContent'] gap?: string | number + columnGap?: string | number + rowGap?: string | number wrap?: CSSProperties['flexWrap'] | boolean + href?: string + target?: HTMLAnchorElement['target'] } & BaseProps -const Flex = defineComponent<Props>(props => { - const { default: defaultSlots } = useSlots() +const Flex: FunctionalComponent<Props> = (props, { slots }) => { + const Comp = props.as ?? 'div' - return () => ( - <div + return ( + <Comp id={props.id} class={props.class} onClick={props.onClick} @@ -32,13 +37,18 @@ const Flex = defineComponent<Props>(props => { alignItems: props.align, justifyContent: props.justify, flexWrap: cvtFlexWrap(props.wrap), - gap: typeof props.gap === 'number' ? `${props.gap}px` : props.gap, + columnGap: cvtPxScale(props.columnGap), + rowGap: cvtPxScale(props.rowGap), + gap: cvtPxScale(props.gap), ...cvt2BaseStyle(props), }} + href={props.href} + target={props.target} > - {defaultSlots && h(defaultSlots)} - </div> + {slots.default?.()} + </Comp> ) -}, { props: [...ALL_BASE_PROPS, 'direction', 'column', 'flex', 'align', 'justify', 'gap', 'wrap'] }) +} +Flex.displayName = 'Flex' export default Flex \ No newline at end of file diff --git a/src/pages/components/Grid.tsx b/src/pages/components/Grid.tsx new file mode 100644 index 000000000..af3ce655e --- /dev/null +++ b/src/pages/components/Grid.tsx @@ -0,0 +1,104 @@ +import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref, toRef, useSlots } from 'vue' +import { ALL_BASE_PROPS, cvt2BaseStyle, cvtPxScale, type BaseProps } from './common' + +function useGridPlaceholder() { + const containerRef = ref<HTMLElement>() + const columnCount = ref(0) + const childCount = ref(0) + + const measure = () => { + if (!containerRef.value) return + + const columns = getComputedStyle(containerRef.value) + .gridTemplateColumns + .split(' ') + .filter(Boolean).length + columnCount.value = columns + + childCount.value = containerRef.value + .querySelectorAll(':scope > *:not([data-grid-placeholder])') + .length + } + + let observer: ResizeObserver | null = null + let mutationObserver: MutationObserver | null = null + + onMounted(() => { + nextTick(measure) + + observer = new ResizeObserver(measure) + if (containerRef.value) observer.observe(containerRef.value) + + mutationObserver = new MutationObserver(measure) + if (containerRef.value) mutationObserver.observe(containerRef.value, { childList: true }) + }) + + onUnmounted(() => { + observer?.disconnect() + mutationObserver?.disconnect() + }) + + const placeholderCount = computed(() => { + if (!columnCount.value || !childCount.value) return 0 + const remainder = childCount.value % columnCount.value + return remainder === 0 ? 0 : columnCount.value - remainder + }) + + return { + containerRef, + columnCount, + placeholderCount, + } +} + +type Gap = number | string + +type Props = { + columnGap?: Gap | [Gap, Gap] + rowGap?: number | string + minColumnWidth?: number | string + maxColumnWidth?: number | string +} & BaseProps + +const calcGridGap = (val: Gap | [Gap, Gap] | undefined): string | undefined => { + if (!val) return undefined + return Array.isArray(val) + ? `clamp(${cvtPxScale(val[0])}, 2vw, ${cvtPxScale(val[1])})` + : cvtPxScale(val) +} + +const Grid = defineComponent<Props>(props => { + const { default: defaultSlots } = useSlots() + const minColumnWidth = toRef(props, 'minColumnWidth', 200) + const maxColumnWidth = toRef(props, 'maxColumnWidth', '1fr') + const columnGap = computed(() => calcGridGap(props.columnGap)) + const rowGap = toRef(props, 'rowGap', 16) + + const { containerRef, placeholderCount } = useGridPlaceholder() + + return () => ( + <div + ref={containerRef} + id={props.id} + class={props.class} + onClick={props.onClick} + style={{ + display: 'grid', + gridTemplateColumns: `repeat(auto-fill, minmax(${cvtPxScale(minColumnWidth.value)}, ${cvtPxScale(maxColumnWidth.value)}))`, + columnGap: columnGap.value, + rowGap: cvtPxScale(rowGap.value), + width: '100%', + ...cvt2BaseStyle(props), + }} + > + {defaultSlots?.()} + {Array.from({ length: placeholderCount.value }, (_, idx) => ( + <i key={idx} data-grid-placeholder aria-hidden="true" style={{ height: 0, overflow: 'hidden' }} /> + ))} + </div> + ) +}, { + props: [...ALL_BASE_PROPS, 'columnGap', 'rowGap', 'minColumnWidth', 'maxColumnWidth'] +}) + +export default Grid \ No newline at end of file diff --git a/src/pages/components/IconRadioGroup.tsx b/src/pages/components/IconRadioGroup.tsx new file mode 100644 index 000000000..488998bb7 --- /dev/null +++ b/src/pages/components/IconRadioGroup.tsx @@ -0,0 +1,42 @@ +import { css } from '@emotion/css' +import { ElIcon, ElRadioButton, ElRadioGroup, type RadioGroupProps, useNamespace } from 'element-plus' +import { type Component, type FunctionalComponent, h } from 'vue' + +const useRadioStyle = () => { + const radioNs = useNamespace('radio') + return css` + & .${radioNs.be('button', 'inner')} { + padding: 3px 5px; + } + ` +} + +const RADIO_CLS = useRadioStyle() + +type Option = { + value: string + icon: Component +} + +type Props = ModelValue<string> & Pick<RadioGroupProps, 'size'> & { + iconSize?: number + options: Option[] +} + +const IconRadioGroup: FunctionalComponent<Props> = ({ size, modelValue, onChange, options, iconSize = 15 }) => ( + <ElRadioGroup + size={size} + modelValue={modelValue} + onChange={val => onChange?.(val as string)} + > + {options.map(({ value, icon }) => ( + <ElRadioButton value={value} class={RADIO_CLS} > + <ElIcon size={iconSize}>{h(icon)}</ElIcon> + </ElRadioButton> + ))} + </ElRadioGroup> +) + +IconRadioGroup.displayName = 'IconRadioGroup' + +export default IconRadioGroup \ No newline at end of file diff --git a/src/pages/components/Img.tsx b/src/pages/components/Img.tsx new file mode 100644 index 000000000..811509d5d --- /dev/null +++ b/src/pages/components/Img.tsx @@ -0,0 +1,31 @@ +import { useState } from '@hooks' +import { type CSSProperties, defineComponent, toRef } from 'vue' + +type Props = Partial<Pick<HTMLImageElement, 'src' | 'alt' | 'title'>> & { + style?: CSSProperties + onError?: ArgCallback<Event> + size?: number +} + +const Img = defineComponent<Props>(props => { + const src = toRef(props, 'src') + const [imgErr, setImgErr] = useState(false) + const handleError = (event: Event) => { + setImgErr(true) + props?.onError?.(event) + } + + return () => !src.value || imgErr.value ? null : ( + <img + src={src.value} + alt={props.alt} + title={props.title} + onError={handleError} + width={props.size} + height={props.size} + style={props.style} + /> + ) +}, { props: ['src', 'alt', 'size', 'style', 'title', 'onError'] }) + +export default Img \ No newline at end of file diff --git a/src/pages/components/TimeInput.tsx b/src/pages/components/TimeInput.tsx new file mode 100644 index 000000000..56525f7ec --- /dev/null +++ b/src/pages/components/TimeInput.tsx @@ -0,0 +1,257 @@ +import { CircleClose, Clock } from "@element-plus/icons-vue" +import { useDebounceFn, useState, useXsState } from '@hooks' +import { getStyle } from '@pages/util/style' +import { range } from "@util/array" +import { + Effect, ElIcon, ElInput, ElPopover, ElScrollbar, InputProps, type ScrollbarInstance, type TimePickerDefaultProps, + useLocale, useNamespace, +} from "element-plus" +import { computed, CSSProperties, defineComponent, nextTick, onMounted, ref, Transition, watch } from "vue" + +function computeSecond2LimitInfo(time: number): [number, number, number] { + time = time || 0 + const second = time % 60 + const totalMinutes = (time - second) / 60 + const minute = totalMinutes % 60 + const hour = (totalMinutes - minute) / 60 + return [hour, minute, second] +} + +const formatTimeVal = (val: number): string => { + return val?.toString?.()?.padStart?.(2, '0') ?? 'NaN' +} + +type TimeSpinnerProps = ModelValue<number> & { + max: number + visible: boolean +} + +const TimeSpinner = defineComponent<TimeSpinnerProps>(props => { + const ns = useNamespace('time') + const scrollbar = ref<ScrollbarInstance>() + const scrolling = ref(false) + + const debounceChangeValue = useDebounceFn((val: number) => { + scrolling.value = false + props.onChange?.(val) + }, 200) + + const getScrollbarElement = () => { + const el = scrollbar.value?.$el + return el?.querySelector(`.${ns.namespace.value}-scrollbar__wrap`) as HTMLElement + } + + const adjustSpinner = (value: number) => { + let scrollbarEl = getScrollbarElement() + if (!scrollbarEl) return + + scrollbarEl.scrollTop = Math.max(0, value * typeItemHeight()) + } + + watch(() => props.modelValue, () => adjustSpinner(props.modelValue)) + watch(() => props.visible, () => props.visible && nextTick(() => adjustSpinner(props.modelValue))) + + const typeItemHeight = (): number => { + const listItem = scrollbar.value?.$el.querySelector('li') as HTMLLinkElement + if (listItem) { + return Number.parseFloat(getStyle(listItem, 'height')) || 0 + } + return 0 + } + + const bindScroll = () => { + let scrollbarEl = getScrollbarElement() + if (!scrollbarEl) return + + scrollbarEl.addEventListener('scroll', () => { + scrolling.value = true + const scrollTop = getScrollbarElement()?.scrollTop ?? 0 + const scrollbarH = (scrollbar.value?.$el as HTMLUListElement)!.offsetHeight ?? 0 + const itemH = typeItemHeight() + const estimatedIdx = Math.round((scrollTop - (scrollbarH * 0.5 - 10) / itemH + 3) / itemH) + const value = Math.min(estimatedIdx, props.max - 1) + debounceChangeValue(value) + }, { passive: true }) + } + + onMounted(() => { + bindScroll() + adjustSpinner(props.modelValue) + }) + + return () => ( + <ElScrollbar + ref={scrollbar} + class={ns.be('spinner', 'wrapper')} + viewClass={ns.be('spinner', 'list')} + noresize + wrapStyle={{ maxHeight: 'inherit' }} + tag="ul" + > + {range(props.max).map(idx => ( + <li + onClick={() => props.onChange?.(idx)} + class={[ + ns.be('spinner', 'item'), + ns.is('active', idx === props.modelValue), + ]} + > + {idx.toString().padStart(2, '0')} + </li> + ))} + </ElScrollbar> + ) +}, { props: ['max', 'modelValue', 'visible', 'onChange'] }) + +const useTimeInput = (source: () => number | undefined) => { + const [initialHour, initialMin, initialSec] = computeSecond2LimitInfo(source?.() ?? 0) + const [hour, setHour] = useState(initialHour) + const [minute, setMinute] = useState(initialMin) + const [second, setSecond] = useState(initialSec) + + const reset = () => { + const [hour, min, sec] = computeSecond2LimitInfo(source() ?? 0) + setHour(hour) + setMinute(min) + setSecond(sec) + } + + watch(source, reset) + + const getTotalSecond = () => { + let time = 0 + time += (hour.value ?? 0) * 3600 + time += (minute.value ?? 0) * 60 + time += (second.value ?? 0) + return time + } + + return { + hour, minute, second, + setHour, setMinute, setSecond, + reset, getTotalSecond, + } +} + +type TimeInputProps = Pick<TimePickerDefaultProps, 'size'> & ModelValue<number | undefined> & { + hourMax?: number + placeholder?: string + style?: CSSProperties + hideSeconds?: boolean + width?: string +} + +/** + * Rewrite + */ +const TimeInput = defineComponent<TimeInputProps>(props => { + const [popoverVisible, setPopoverVisible] = useState(false) + const { + hour, minute, second, + setHour, setMinute, setSecond, + reset, getTotalSecond, + } = useTimeInput(() => props.modelValue) + + const inputAttr = computed<Pick<InputProps, 'modelValue' | 'clearable'>>(() => { + const { modelValue, hideSeconds } = props + // Not support 0 as valid time, treat it as unlimited + if (!modelValue) return { modelValue: undefined, clearable: false } + const text = hideSeconds + ? `${formatTimeVal(hour.value)} h ${formatTimeVal(minute.value)} m` + : `${formatTimeVal(hour.value)} h ${formatTimeVal(minute.value)} m ${formatTimeVal(second.value)} s` + return { modelValue: text, clearable: true } + }) + + const ns = useNamespace('time') + const nsDate = useNamespace('date') + const nsInput = useNamespace('input') + + const { t: tEle } = useLocale() + + const transitionName = computed(() => popoverVisible.value ? '' : `${ns.namespace.value}-zoom-in-top`) + + const handleCancel = () => { + reset() + setPopoverVisible(false) + } + + const handleConfirm = () => { + props.onChange?.(getTotalSecond()) + setPopoverVisible(false) + } + + const handleVisibleChange = (newVal: boolean) => { + setPopoverVisible(newVal) + !newVal && handleCancel() + } + + const handleClear = (ev: MouseEvent) => { + props.onChange?.(undefined) + ev.stopPropagation() + } + + const isXs = useXsState() + + return () => ( + <ElPopover + trigger='click' + effect={Effect.LIGHT} + visible={popoverVisible.value} + transition={`${nsDate.namespace.value}-zoom-in-top`} + popperClass={`${nsDate.namespace.value}-picker__popper`} + onUpdate:visible={handleVisibleChange} + v-slots={{ + reference: () => ( + <ElInput + class={[nsDate.b('editor'), nsDate.bm('editor', 'time')]} + prefixIcon={Clock} + placeholder={props.placeholder} + modelValue={inputAttr.value.modelValue} + inputStyle={{ cursor: 'pointer' }} + style={{ ...props.style, '--el-date-editor-width': props.width ?? '170px' }} + size={props.size ?? (isXs.value ? 'small' : undefined)} + readonly + v-slots={{ + suffix: () => inputAttr.value.clearable && ( + <div onClick={handleClear}> + <ElIcon class={[nsInput.e('icon'), 'clear-icon']}> + <CircleClose /> + </ElIcon> + </div> + ) + }} + /> + ) + }}> + <Transition name={transitionName.value}> + <div class={ns.b('panel')} style={{ width: '100%' }}> + <div class={[ns.be('panel', 'content'), !props.hideSeconds && 'has-seconds']}> + <div class={[ns.b('spinner'), !props.hideSeconds && 'has-seconds']}> + <TimeSpinner max={props.hourMax ?? 24} modelValue={hour.value} onChange={setHour} visible={popoverVisible.value} /> + <TimeSpinner max={60} modelValue={minute.value} onChange={setMinute} visible={popoverVisible.value} /> + {!props.hideSeconds && <TimeSpinner max={60} modelValue={second.value} onChange={setSecond} visible={popoverVisible.value} />} + </div> + </div> + <div class={[ns.be('panel', 'footer')]}> + <button + type="button" + class={[ns.be('panel', 'btn'), 'cancel']} + onClick={handleCancel} + > + {tEle('el.datepicker.cancel')} + </button> + <button + type="button" + class={[ns.be('panel', 'btn'), 'confirm']} + onClick={handleConfirm} + > + {tEle('el.datepicker.confirm')} + </button> + </div> + </div> + </Transition> + </ElPopover> + ) +}, { props: ['style', 'size', 'placeholder', 'hourMax', 'modelValue', 'onChange', 'hideSeconds', 'width'] }) + +export default TimeInput \ No newline at end of file diff --git a/src/pages/app/components/common/TooltipWrapper.tsx b/src/pages/components/TooltipWrapper.tsx similarity index 79% rename from src/pages/app/components/common/TooltipWrapper.tsx rename to src/pages/components/TooltipWrapper.tsx index 3d502c141..e4f15b184 100644 --- a/src/pages/app/components/common/TooltipWrapper.tsx +++ b/src/pages/components/TooltipWrapper.tsx @@ -1,7 +1,7 @@ -import { ElTooltip, ElTooltipProps } from "element-plus" +import { ElTooltip, type UseTooltipProps } from "element-plus" import { defineComponent, ref, useSlots } from "vue" -type Props = PartialPick<ElTooltipProps, 'placement' | 'effect' | 'trigger' | 'offset'> & { +type Props = PartialPick<UseTooltipProps, 'placement' | 'effect' | 'trigger' | 'offset'> & { usePopover?: boolean } diff --git a/src/pages/components/common.ts b/src/pages/components/common.ts index dcb6ef121..0a1749f34 100644 --- a/src/pages/components/common.ts +++ b/src/pages/components/common.ts @@ -1,35 +1,35 @@ -import { type CSSProperties } from "vue" +import type { CSSProperties, HTMLAttributes } from "vue" export type BaseProps = Pick< CSSProperties, | 'position' - | 'width' | 'height' | 'minHeight' | 'maxWidth' + | 'width' | 'height' | 'minHeight' | 'maxWidth' | 'lineHeight' | 'boxSizing' | 'cursor' | 'padding' | 'paddingBlock' | 'paddingInline' - | 'margin' | 'marginTop' | 'marginBlock' | 'marginInline' - | 'fontSize' -> & { - id?: string - inline?: boolean - color?: 'text-primary' | 'text-secondary' | 'text-regular' | CSSProperties['color'] - bgColor?: CSSProperties['backgroundColor'] - class?: string | string[] - style?: CSSProperties - onClick?: (ev: MouseEvent) => void -} + | 'margin' | 'marginTop' | 'marginBottom' | 'marginBlock' | 'marginInline' + | 'fontSize' | 'fontWeight' +> + & Pick<HTMLAttributes, 'class' | 'id'> + & { + inline?: boolean + color?: 'text-primary' | 'text-secondary' | 'text-regular' | CSSProperties['color'] + bgColor?: CSSProperties['backgroundColor'] + style?: CSSProperties + onClick?: (ev: MouseEvent) => void + } export const ALL_BASE_PROPS: (keyof BaseProps)[] = [ - 'margin', 'marginTop', 'marginBlock', 'marginInline', - 'maxWidth', 'minHeight', 'width', 'height', + 'margin', 'marginTop', 'marginBottom', 'marginBlock', 'marginInline', + 'maxWidth', 'minHeight', 'width', 'height', 'lineHeight', 'padding', 'paddingBlock', 'paddingInline', 'position', 'boxSizing', 'cursor', - 'color', 'fontSize', 'bgColor', + 'color', 'fontSize', 'fontWeight', 'bgColor', 'id', 'class', 'style', 'inline', 'onClick', ] -const cvtPxScale = (val: number | string | undefined): string | undefined => typeof val === 'number' ? `${val}px` : val +export const cvtPxScale = (val: number | string | undefined): string | undefined => typeof val === 'number' ? `${val}px` : val const cvtColor = (color: BaseProps['color']): CSSProperties['color'] => { if (color === 'text-primary') return 'var(--el-text-color-primary)' @@ -42,6 +42,7 @@ export const cvt2BaseStyle = (props: BaseProps): CSSProperties => ({ position: props.position, width: cvtPxScale(props.width), height: cvtPxScale(props.height), + lineHeight: cvtPxScale(props.lineHeight), minHeight: cvtPxScale(props.minHeight), boxSizing: props.boxSizing, cursor: props.cursor, @@ -49,6 +50,7 @@ export const cvt2BaseStyle = (props: BaseProps): CSSProperties => ({ marginInline: cvtPxScale(props.marginInline), marginBlock: cvtPxScale(props.marginBlock), marginTop: cvtPxScale(props.marginTop), + marginBottom: cvtPxScale(props.marginBottom), maxWidth: cvtPxScale(props.maxWidth), padding: cvtPxScale(props.padding), paddingBlock: cvtPxScale(props.paddingBlock), @@ -56,5 +58,6 @@ export const cvt2BaseStyle = (props: BaseProps): CSSProperties => ({ color: cvtColor(props.color), backgroundColor: props.bgColor, fontSize: cvtPxScale(props.fontSize), - ...props.style ?? {}, + fontWeight: props.fontWeight, + ...props.style, }) \ No newline at end of file diff --git a/src/pages/element-ui/app.ts b/src/pages/element-ui/app.ts new file mode 100644 index 000000000..f33fb7fa0 --- /dev/null +++ b/src/pages/element-ui/app.ts @@ -0,0 +1,12 @@ +import { initElementLocale } from "@i18n/element" +import { ElConfigProvider, ElLoadingDirective } from "element-plus" +import { createApp, h, type App, type Component } from "vue" + +export async function createElApp(root: Component): Promise<App> { + const locale = await initElementLocale() + const app = createApp({ + render: () => h(ElConfigProvider, { locale }, () => h(root)), + }) + app.directive("loading", ElLoadingDirective) + return app +} diff --git a/src/pages/element-ui/dark-theme.css b/src/pages/element-ui/dark-theme.css new file mode 100644 index 000000000..e5d5ff1eb --- /dev/null +++ b/src/pages/element-ui/dark-theme.css @@ -0,0 +1,89 @@ +html[data-theme='dark'] { + --el-color-primary: #409eff; + --el-color-primary-light-3: #3375b9; + --el-color-primary-light-5: #2a598a; + --el-color-primary-light-7: #213d5b; + --el-color-primary-light-8: #1d3043; + --el-color-primary-light-9: #18222c; + --el-color-primary-dark-2: #66b1ff; + --el-color-success: #67c23a; + --el-color-success-light-3: #4e8e2f; + --el-color-success-light-5: #3e6b27; + --el-color-success-light-7: #2d481f; + --el-color-success-light-8: #25371c; + --el-color-success-light-9: #1c2518; + --el-color-success-dark-2: #85ce61; + --el-color-warning: #e6a23c; + --el-color-warning-light-3: #a77730; + --el-color-warning-light-5: #7d5b28; + --el-color-warning-light-7: #533f20; + --el-color-warning-light-8: #3e301c; + --el-color-warning-light-9: #292218; + --el-color-warning-dark-2: #ebb563; + --el-color-danger: #f56c6c; + --el-color-danger-light-3: #b25252; + --el-color-danger-light-5: #854040; + --el-color-danger-light-7: #582e2e; + --el-color-danger-light-8: #412626; + --el-color-danger-light-9: #2b1d1d; + --el-color-danger-dark-2: #f78989; + --el-color-error: #f56c6c; + --el-color-error-light-3: #b25252; + --el-color-error-light-5: #854040; + --el-color-error-light-7: #582e2e; + --el-color-error-light-8: #412626; + --el-color-error-light-9: #2b1d1d; + --el-color-error-dark-2: #f78989; + --el-color-info: #909399; + --el-color-info-light-3: #6b6d71; + --el-color-info-light-5: #525457; + --el-color-info-light-7: #393a3c; + --el-color-info-light-8: #2d2d2f; + --el-color-info-light-9: #202121; + --el-color-info-dark-2: #a6a9ad; + --el-box-shadow: 0px 12px 32px 4px rgba(0 0 0 .36) 0px 8px 20px rgba(0 0 0 .72); + --el-box-shadow-light: 0px 0px 12px rgba(0 0 0 .72); + --el-box-shadow-lighter: 0px 0px 6px rgba(0 0 0 .72); + --el-box-shadow-dark: 0px 16px 48px 16px rgba(0 0 0 .72) 0px 12px 32px #000000 0px 8px 16px -8px #000000; + --el-bg-color-page: #0a0a0a; + --el-bg-color: #141414; + --el-bg-color-overlay: #1d1e1f; + --el-text-color-primary: #E5EAF3; + --el-text-color-regular: #CFD3DC; + --el-text-color-secondary: #A3A6AD; + --el-text-color-placeholder: #8D9095; + --el-text-color-disabled: #6C6E72; + --el-border-color-darker: #636466; + --el-border-color-dark: #58585B; + --el-border-color: #4C4D4F; + --el-border-color-light: #414243; + --el-border-color-lighter: #363637; + --el-border-color-extra-light: #2B2B2C; + --el-fill-color-darker: #424243; + --el-fill-color-dark: #39393A; + --el-fill-color: #303030; + --el-fill-color-light: #262727; + --el-fill-color-lighter: #1D1D1D; + --el-fill-color-extra-light: #191919; + --el-fill-color-blank: var(--el-fill-color-light); + --el-mask-color: rgba(0 0 0 .8); + --el-mask-color-extra-light: rgba(0 0 0 .05); + --el-menu-bg-color: var(--el-fill-color-extra-light); +} + +html[data-theme='dark'] .el-card { + border: none; +} + +html[data-theme='dark'] .el-empty { + --el-empty-fill-color-0: var(--el-color-black); + --el-empty-fill-color-1: #4b4b52; + --el-empty-fill-color-2: #36383d; + --el-empty-fill-color-3: #1e1e20; + --el-empty-fill-color-4: #262629; + --el-empty-fill-color-5: #202124; + --el-empty-fill-color-6: #212224; + --el-empty-fill-color-7: #1b1c1f; + --el-empty-fill-color-8: #1c1d1f; + --el-empty-fill-color-9: #18181a; +} \ No newline at end of file diff --git a/src/pages/element-ui/dark-theme.sass b/src/pages/element-ui/dark-theme.sass deleted file mode 100644 index 01df6c1c7..000000000 --- a/src/pages/element-ui/dark-theme.sass +++ /dev/null @@ -1,84 +0,0 @@ -html[data-theme='dark'] - --el-color-primary: #409eff - --el-color-primary-light-3: #3375b9 - --el-color-primary-light-5: #2a598a - --el-color-primary-light-7: #213d5b - --el-color-primary-light-8: #1d3043 - --el-color-primary-light-9: #18222c - --el-color-primary-dark-2: #66b1ff - --el-color-success: #67c23a - --el-color-success-light-3: #4e8e2f - --el-color-success-light-5: #3e6b27 - --el-color-success-light-7: #2d481f - --el-color-success-light-8: #25371c - --el-color-success-light-9: #1c2518 - --el-color-success-dark-2: #85ce61 - --el-color-warning: #e6a23c - --el-color-warning-light-3: #a77730 - --el-color-warning-light-5: #7d5b28 - --el-color-warning-light-7: #533f20 - --el-color-warning-light-8: #3e301c - --el-color-warning-light-9: #292218 - --el-color-warning-dark-2: #ebb563 - --el-color-danger: #f56c6c - --el-color-danger-light-3: #b25252 - --el-color-danger-light-5: #854040 - --el-color-danger-light-7: #582e2e - --el-color-danger-light-8: #412626 - --el-color-danger-light-9: #2b1d1d - --el-color-danger-dark-2: #f78989 - --el-color-error: #f56c6c - --el-color-error-light-3: #b25252 - --el-color-error-light-5: #854040 - --el-color-error-light-7: #582e2e - --el-color-error-light-8: #412626 - --el-color-error-light-9: #2b1d1d - --el-color-error-dark-2: #f78989 - --el-color-info: #909399 - --el-color-info-light-3: #6b6d71 - --el-color-info-light-5: #525457 - --el-color-info-light-7: #393a3c - --el-color-info-light-8: #2d2d2f - --el-color-info-light-9: #202121 - --el-color-info-dark-2: #a6a9ad - --el-box-shadow: 0px 12px 32px 4px rgba(0 0 0 .36) 0px 8px 20px rgba(0 0 0 .72) - --el-box-shadow-light: 0px 0px 12px rgba(0 0 0 .72) - --el-box-shadow-lighter: 0px 0px 6px rgba(0 0 0 .72) - --el-box-shadow-dark: 0px 16px 48px 16px rgba(0 0 0 .72) 0px 12px 32px #000000 0px 8px 16px -8px #000000 - --el-bg-color-page: #0a0a0a - --el-bg-color: #141414 - --el-bg-color-overlay: #1d1e1f - --el-text-color-primary: #E5EAF3 - --el-text-color-regular: #CFD3DC - --el-text-color-secondary: #A3A6AD - --el-text-color-placeholder: #8D9095 - --el-text-color-disabled: #6C6E72 - --el-border-color-darker: #636466 - --el-border-color-dark: #58585B - --el-border-color: #4C4D4F - --el-border-color-light: #414243 - --el-border-color-lighter: #363637 - --el-border-color-extra-light: #2B2B2C - --el-fill-color-darker: #424243 - --el-fill-color-dark: #39393A - --el-fill-color: #303030 - --el-fill-color-light: #262727 - --el-fill-color-lighter: #1D1D1D - --el-fill-color-extra-light: #191919 - --el-fill-color-blank: var(--el-fill-color-light) - --el-mask-color: rgba(0 0 0 .8) - --el-mask-color-extra-light: rgba(0 0 0 .05) - --el-menu-bg-color: var(--el-fill-color-extra-light) - .el-card - border: none - .el-empty - --el-empty-fill-color-0: var(--el-color-black) - --el-empty-fill-color-1: #4b4b52 - --el-empty-fill-color-2: #36383d - --el-empty-fill-color-3: #1e1e20 - --el-empty-fill-color-4: #262629 - --el-empty-fill-color-5: #202124 - --el-empty-fill-color-6: #212224 - --el-empty-fill-color-7: #1b1c1f - --el-empty-fill-color-8: #1c1d1f - --el-empty-fill-color-9: #18181a diff --git a/src/pages/element-ui/date.ts b/src/pages/element-ui/date.ts deleted file mode 100644 index 60bdd772a..000000000 --- a/src/pages/element-ui/date.ts +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -export type ElementDatePickerShortcut = { - text: string, - value: [Date, Date] -} \ No newline at end of file diff --git a/src/pages/element-ui/style.ts b/src/pages/element-ui/style.ts deleted file mode 100644 index 5f6b8b7a3..000000000 --- a/src/pages/element-ui/style.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * xs (0, 768) - * sm [768, 992) - * md [992, 1200) - * lg [1200, 1920) - * xl [1920, ...) - * @see https://element-plus.org/zh-CN/component/layout.html - */ -/** - * <1200px - */ -export const CLZ_HIDDEN_MD_AND_DOWN = "hidden-md-and-down" - -/** - * >=992px - */ -export const CLZ_HIDDEN_MD_AND_UP = "hidden-md-and-up" - -/** - * <992px - */ -export const CLZ_HIDDEN_SM_AND_DOWN = "hidden-sm-and-down" - -/** - * <768px - */ -export const CLZ_HIDDEN_XS_ONLY = "hidden-xs-only" \ No newline at end of file diff --git a/src/pages/element-ui/table.ts b/src/pages/element-ui/table.ts deleted file mode 100644 index c394d517d..000000000 --- a/src/pages/element-ui/table.ts +++ /dev/null @@ -1,10 +0,0 @@ -/** - * Copyright (c) 2023-present Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -export type ElTableRowScope<T> = { - row: T -} diff --git a/src/pages/element-ui/types.d.ts b/src/pages/element-ui/types.d.ts new file mode 100644 index 000000000..2c7287855 --- /dev/null +++ b/src/pages/element-ui/types.d.ts @@ -0,0 +1,4 @@ +export type ElDatePickerShortcut = { + text: string + value: [Date, Date] +} \ No newline at end of file diff --git a/src/pages/hooks/index.ts b/src/pages/hooks/index.ts index ccc3c2aa0..058e62ccc 100644 --- a/src/pages/hooks/index.ts +++ b/src/pages/hooks/index.ts @@ -1,6 +1,9 @@ export * from "./useCached" +export * from "./useCount" export * from "./useDebounce" export * from "./useDocumentVisibility" +export * from "./useEcharts" +export * from "./useElementSize" export * from "./useLocalStorage" export * from "./useManualRequest" export * from "./useMediaSize" @@ -8,8 +11,9 @@ export * from "./useProvider" export * from "./useRequest" export * from "./useScrollRequest" export * from "./useShadow" +export * from "./useSiteMerge" export * from "./useState" export * from "./useSwitch" -export * from "./useWindowFocus" +export * from "./useTabGroups" +export * from "./useWindowListener" export * from "./useWindowSize" - diff --git a/src/pages/hooks/useCached.ts b/src/pages/hooks/useCached.ts index cd75bcc2e..6c40d2fc7 100644 --- a/src/pages/hooks/useCached.ts +++ b/src/pages/hooks/useCached.ts @@ -5,13 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { onBeforeMount, ref, type Ref, watch } from "vue" -import { useState } from "." - -type Result<T> = { - data: Ref<T | undefined> - setter: (val: T) => void -} +import { ref, type Ref, watch } from "vue" const getInitialValue = <T>(key: string, defaultValue?: T): T | undefined => { if (!key) return defaultValue @@ -33,29 +27,13 @@ const saveCache = <T>(key: string, val: T) => { } } -export function useCached<T>(key: string, defaultValue: T, defaultFirst?: boolean): { data: Ref<T>, setter: (val: T) => void } -export function useCached<T>( - key: string | undefined, - defaultValue?: T, - defaultFirst?: boolean, -): { data: Ref<T | undefined>, setter: (val: T | undefined) => void } - -export function useCached<T>( - key: string | undefined, - defaultValue?: T, - defaultFirst?: boolean, -): Result<T> { - if (!key) { - const [data, setter] = useState(defaultValue) - return { data, setter } - } - const data: Ref<T | undefined> = ref<T>() +export function useCached<T>(key: string, defaultValue: T): [data: Ref<T>, setter: ArgCallback<T>] +export function useCached<T>(key: string, defaultValue?: T): [data: Ref<T | undefined>, setter: ArgCallback<T | undefined>] +export function useCached<T>(key: string, defaultValue?: T) { + let cachedValue = getInitialValue(key, defaultValue) + let initial = cachedValue ?? defaultValue + const data = initial === undefined ? ref<T>() : ref<T>(initial) const setter = (val: T | undefined) => data.value = val - onBeforeMount(() => { - let cachedValue = getInitialValue(key, defaultValue) - let initial = defaultFirst ? defaultValue || cachedValue : cachedValue - setter(initial) - }) - watch(data, () => saveCache(key, data.value)) - return { data, setter } + watch(data, () => saveCache(key, data.value), { immediate: true }) + return [data, setter] } diff --git a/src/pages/hooks/useCount.ts b/src/pages/hooks/useCount.ts new file mode 100644 index 000000000..e118904f8 --- /dev/null +++ b/src/pages/hooks/useCount.ts @@ -0,0 +1,84 @@ +import { onScopeDispose, ref, Ref, watch } from 'vue' + +type CountDownOptions = { + countdown: number + onComplete?: NoArgCallback + onTick?: ArgCallback<number> +} + +export const useCountDown = (option: CountDownOptions): NoArgCallback => { + const { countdown, onComplete, onTick } = option + + const start = Date.now() + let left = countdown * 1000 + + const timer = setInterval(() => { + left = Math.max(start + countdown * 1000 - Date.now(), 0) + onTick?.(left) + if (!left) { + onComplete?.() + clearInterval(timer) + } + }, 100) + + return () => clearInterval(timer) +} + +type CountUpOptions = { + value: Ref<number> + duration?: number + onFinish?: NoArgCallback +} + +export const useCountUp = (options: CountUpOptions) => { + const { value, duration = 2, onFinish } = options + const current = ref(0) + let raf: number | null = null + let startTime: number | null = null + let lastUpdate = 0 + + const clear = (): void => { + if (!raf) return + cancelAnimationFrame(raf) + raf = null + } + + const animate = (ts: number): void => { + if (!raf) return + + if (ts - lastUpdate < 50) { + raf = requestAnimationFrame(animate) + return + } + lastUpdate = ts + + if (startTime === null) startTime = ts + + const elapsed = ts - startTime + const progress = Math.min(elapsed / (duration * 1000), 1) + const ease = 1 - (1 - progress) ** 3 + + const target = Math.round(value.value) + const start = Math.round(current.value) + current.value = Math.round(start + (target - start) * ease) + + if (progress >= 1) { + current.value = target + onFinish?.() + raf = null + return + } + + raf = requestAnimationFrame(animate) + } + + watch(value, () => { + clear() + lastUpdate = 0 + raf = requestAnimationFrame(animate) + }, { immediate: true }) + + onScopeDispose(clear) + + return { current, clear } +} \ No newline at end of file diff --git a/src/pages/hooks/useDebounce.ts b/src/pages/hooks/useDebounce.ts index dd13b4da2..85abecc7e 100644 --- a/src/pages/hooks/useDebounce.ts +++ b/src/pages/hooks/useDebounce.ts @@ -1,8 +1,9 @@ import { shallowRef, watch, type MaybeRefOrGetter, type Ref } from 'vue' +import { useState } from './useState' type FunctionArgs = (...args: any[]) => any -const DEFAULT_TIMEOUT = 200 +const DEFAULT_TIMEOUT = 100 export function useDebounceFn<T extends FunctionArgs>( fn: T, @@ -10,25 +11,24 @@ export function useDebounceFn<T extends FunctionArgs>( ): T { let timeoutId: ReturnType<typeof setTimeout> | undefined - const resolveValue = (value: MaybeRefOrGetter<number>): number => { - if (typeof value === 'function') { - return value() - } else if (value && typeof value === 'object' && 'value' in value) { - return value.value + const resolveDelay = (ms: MaybeRefOrGetter<number> | undefined): number => { + if (typeof ms === 'function') { + return ms() + } else if (typeof ms === 'object' && 'value' in ms) { + return ms.value + } else if (typeof ms === 'number') { + return ms + } else { + return DEFAULT_TIMEOUT } - return value } const debounced = ((...args: Parameters<T>) => { - if (timeoutId) { - clearTimeout(timeoutId) - } - - const delay = ms !== undefined ? resolveValue(ms) : DEFAULT_TIMEOUT + timeoutId && clearTimeout(timeoutId) timeoutId = setTimeout(() => { fn(...args) - }, delay) + }, resolveDelay(ms)) }) as T return debounced @@ -41,4 +41,12 @@ export function useDebounce<T>(original: Ref<T>, ms?: MaybeRefOrGetter<number>): watch(original, newVal => debouncedFn(newVal)) return inner +} + +export function useDebounceState<T>(defaultValue: T, ms?: MaybeRefOrGetter<number>): [Ref<T>, ArgCallback<T>] { + const [inner, setInner] = useState<T>(defaultValue) + + const debouncedSet = useDebounceFn(setInner, ms) + + return [inner, debouncedSet] } \ No newline at end of file diff --git a/src/pages/hooks/useEcharts.ts b/src/pages/hooks/useEcharts.ts index 6afc2ddf3..aa47a1956 100644 --- a/src/pages/hooks/useEcharts.ts +++ b/src/pages/hooks/useEcharts.ts @@ -5,15 +5,20 @@ * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -import { useWindowSize } from "@hooks/useWindowSize" -import optionHolder from "@service/components/option-holder" -import { processAnimation, processAria, processRtl } from "@util/echarts" -import { type AriaComponentOption, type ComposeOption } from "echarts" +import { getOption } from "@api/sw/option" +import { processAnimation, processAria, processFont, processRtl } from "@util/echarts" +import type { AriaComponentOption, ComposeOption, SeriesOption, TitleComponentOption } from "echarts" import { type ECharts, init } from "echarts/core" import { ElLoading } from "element-plus" -import { type Ref, isRef, onMounted, ref, watch } from "vue" +import { type Ref, type WatchSource, isRef, onMounted, ref, watch } from "vue" +import { useElementSize } from './useElementSize' +import { useWindowSize } from "./useWindowSize" -type BaseEchartsOption = ComposeOption<AriaComponentOption> +type BaseEchartsOption = ComposeOption< + | AriaComponentOption + | TitleComponentOption + | SeriesOption +> export abstract class EchartsWrapper<BizOption, EchartsOption> { public instance: ECharts | undefined @@ -25,10 +30,16 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> { * true if need to clear all the before series when setOption */ protected replaceSeries: boolean = false - private lastBizOption: BizOption | undefined + protected lastBizOption: BizOption | undefined + /** + * Fix the font family + * @see https://github.com/sheepzh/time-tracker-4-browser/issues/623 + */ + private textFontFamily: string | undefined init(container: HTMLDivElement) { this.instance = init(container) + this.textFontFamily = getComputedStyle(container).fontFamily } async render(biz: BizOption) { @@ -39,7 +50,7 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> { private async innerRender() { const biz = this.lastBizOption - const option = biz && await this.generateOption(biz) as (EchartsOption & BaseEchartsOption) + const option = biz && await this.generateOption(biz) if (!option) return await this.postChartOption(option) @@ -49,10 +60,11 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> { } protected async postChartOption(option: EchartsOption & BaseEchartsOption) { - const { chartDecal, chartAnimationDuration } = await optionHolder.get() || {} + const { chartDecal, chartAnimationDuration } = await getOption() processAnimation(option, chartAnimationDuration) processAria(option, chartDecal) processRtl(option) + this.textFontFamily && processFont(option, this.textFontFamily) } async resize() { @@ -65,7 +77,7 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> { return this.instance!.getDom() } - protected abstract generateOption(biz: BizOption): Promise<EchartsOption> | EchartsOption + protected abstract generateOption(biz: BizOption): Awaitable<EchartsOption> protected getDomWidth(): number { return this.getDom()?.clientWidth ?? 0 @@ -74,7 +86,6 @@ export abstract class EchartsWrapper<BizOption, EchartsOption> { type WrapperResult<BizOption, EchartsOption, EW extends EchartsWrapper<BizOption, EchartsOption>> = { - refresh: () => Promise<void> elRef: Ref<HTMLDivElement | undefined> wrapper: EW } @@ -85,7 +96,8 @@ export const useEcharts = <BizOption, EchartsOption, EW extends EchartsWrapper<B option?: { hideLoading?: boolean manual?: boolean - afterInit?: (ew: EW) => void + afterInit?: ArgCallback<EW>, + deps?: WatchSource | WatchSource[], }): WrapperResult<BizOption, EchartsOption, EW> => { const elRef = ref<HTMLDivElement>() const wrapperInstance = new Wrapper() @@ -93,7 +105,8 @@ export const useEcharts = <BizOption, EchartsOption, EW extends EchartsWrapper<B hideLoading = false, manual = false, afterInit, - } = option || {} + deps, + } = option ?? {} let refresh = async () => { const loading = hideLoading ? null : ElLoading.service({ target: elRef.value }) @@ -110,14 +123,16 @@ export const useEcharts = <BizOption, EchartsOption, EW extends EchartsWrapper<B afterInit?.(wrapperInstance) !manual && refresh() isRef(fetch) && watch(fetch, refresh) + + // The element reference perhaps change + watch(elRef, () => elRef.value && wrapperInstance.init(elRef.value)) }) - const { width, height } = useWindowSize() - watch([width, height], () => wrapperInstance?.resize?.()) + deps && watch(deps, refresh) - return { - refresh, - elRef, - wrapper: wrapperInstance, - } + const { width: winW, height: winH } = useWindowSize() + const { width: elW, height: elH } = useElementSize(elRef, { debounce: 50 }) + watch([winW, winH, elW, elH], () => wrapperInstance?.resize?.()) + + return { elRef, wrapper: wrapperInstance } } \ No newline at end of file diff --git a/src/pages/hooks/useElementSize.ts b/src/pages/hooks/useElementSize.ts new file mode 100644 index 000000000..a5d41dc2a --- /dev/null +++ b/src/pages/hooks/useElementSize.ts @@ -0,0 +1,99 @@ +import { isRef, type MaybeRef, onMounted, onUnmounted, ref, unref, watch } from 'vue' +import { useDebounceFn } from './useDebounce' + +type Options = { + debounce?: number +} + +type Target = MaybeRef<Element | null | undefined> | string + +export function useElementSize(target: Target, options?: Options) { + const { debounce = 0 } = options ?? {} + + const width = ref(0) + const height = ref(0) + + let observer: ResizeObserver | undefined + + const getTargetElement = (): Element | null => { + const el = unref(target) ?? null + + if (typeof el === 'string') { + return document.querySelector(el) + } + + return el + } + + const updateSize = (entry: ResizeObserverEntry) => { + if (entry.contentBoxSize?.[0]) { + width.value = entry.contentBoxSize[0].inlineSize + height.value = entry.contentBoxSize[0].blockSize + } else { + // fallback + width.value = entry.contentRect.width + height.value = entry.contentRect.height + } + } + + const debouncedUpdateSize = useDebounceFn( + (entry: ResizeObserverEntry) => updateSize(entry), + debounce + ) + + const handleResize: ResizeObserverCallback = (entries: ResizeObserverEntry[]) => { + const entry = entries[0] + if (!entry) return + + if (debounce > 0) { + debouncedUpdateSize(entry) + } else { + updateSize(entry) + } + } + + const start = () => { + if (observer) return + + const element = getTargetElement() + if (!element) { + console.warn('useElementSize: target element not found') + return + } + + try { + observer = new ResizeObserver(handleResize) + observer.observe(element, { box: 'content-box' }) + } catch (error) { + console.error('useElementSize: filed to create observer', error) + } + } + + const stop = () => { + if (!observer) return + + observer.disconnect() + observer = undefined + } + + onMounted(() => { + if (!isRef(target)) { + return start() + } + + watch( + () => getTargetElement(), + (newEl, oldEl) => { + if (newEl && newEl !== oldEl) { + stop() + start() + } + }, + { immediate: true } + ) + }) + + onUnmounted(stop) + + return { width, height } +} diff --git a/src/pages/hooks/useLocalStorage.ts b/src/pages/hooks/useLocalStorage.ts index 2617886a8..2ddc0c87c 100644 --- a/src/pages/hooks/useLocalStorage.ts +++ b/src/pages/hooks/useLocalStorage.ts @@ -1,4 +1,3 @@ - type StoragePrimitive = string | boolean | number | undefined type StorageArray = Array<StorageValue> type StorageObject = { [key: string]: StorageValue } @@ -7,34 +6,30 @@ type StorageValue = | StorageArray | StorageObject -export function useLocalStorage<T>(key: string, defaultValue: T): [T, (val: T | undefined) => void] -export function useLocalStorage<T>(key: string): [T | undefined, (val: T | undefined) => void] +type Guard<T> = (val: unknown) => val is T -export function useLocalStorage<T = StorageValue>(key: string, defaultVal?: T): [data: T | undefined, setter: (val: T | undefined) => void] { - const value = deserialize(localStorage.getItem(key), defaultVal) ?? defaultVal +export function useLocalStorage<T>(key: string, guard: Guard<T>, defaultValue: T): [T, ArgCallback<T>] +export function useLocalStorage<T>(key: string, guard: Guard<T>): [T | undefined, (val: T | undefined) => void] +export function useLocalStorage<T = StorageValue>(key: string, guard: Guard<T>, defaultVal?: T): [data: T | undefined, setter: ArgCallback<T | undefined>] { + const value = deserialize(localStorage.getItem(key), guard) ?? defaultVal const setter = (val: T | undefined) => { if (val === undefined) { - localStorage?.removeItem(key) + localStorage.removeItem(key) } else { - localStorage?.setItem(key, JSON.stringify(val)) + localStorage.setItem(key, JSON.stringify(val)) } } return [value, setter] } -function deserialize<T>(json: string | null, defaultVal?: T): T | undefined { +function deserialize<T>(json: string | null, guard: Guard<T>): T | undefined { if (!json) return undefined try { - const stored = JSON.parse(json) || {} - Object.entries(defaultVal || {}).forEach(([k, v]) => { - if (stored[k] === undefined || stored[k] === null) { - stored[k] = v - } - }) - return stored + const parsed = JSON.parse(json) + return guard(parsed) ? parsed : undefined } catch { return undefined } diff --git a/src/pages/hooks/useMediaSize.ts b/src/pages/hooks/useMediaSize.ts index d659fa971..b1e378270 100644 --- a/src/pages/hooks/useMediaSize.ts +++ b/src/pages/hooks/useMediaSize.ts @@ -1,5 +1,5 @@ -import { useWindowSize } from "@hooks" import { computed } from "vue" +import { useWindowSize } from "./useWindowSize" export enum MediaSize { xs, @@ -48,5 +48,10 @@ export const listenMediaSizeChange = () => { } processMediaSize() window.addEventListener('resize', processMediaSize) - window.addEventListener('unload', () => window.removeEventListener('resize', processMediaSize)) + window.addEventListener('pagehide', () => window.removeEventListener('resize', processMediaSize)) + window.addEventListener('pageshow', () => { + window.removeEventListener('resize', processMediaSize) + window.addEventListener('resize', processMediaSize) + processMediaSize() + }) } \ No newline at end of file diff --git a/src/pages/hooks/useRequest.ts b/src/pages/hooks/useRequest.ts index fc0b9f429..c36c81ecd 100644 --- a/src/pages/hooks/useRequest.ts +++ b/src/pages/hooks/useRequest.ts @@ -1,4 +1,4 @@ -import { ElLoadingService } from "element-plus" +import { ElLoadingService, type LoadingOptions } from "element-plus" import { onBeforeMount, onMounted, ref, shallowRef, watch, type Ref, type ShallowRef, type WatchSource, @@ -9,9 +9,10 @@ export type RequestOption<T, P extends any[]> = { defaultValue?: T loadingTarget?: string | Ref<HTMLElement | undefined> | Getter<HTMLElement | undefined> loadingText?: string + loadingOptions?: LoadingOptions defaultParam?: P deps?: WatchSource<unknown> | WatchSource<unknown>[] - onSuccess?: (result: T) => void, + onSuccess?: (result: T, ...p: P) => void, onError?: (e: unknown) => void } @@ -30,14 +31,11 @@ const findLoadingEl = async (target: RequestOption<unknown, unknown[]>['loadingT if (typeof target === 'string') { return target } else if (typeof target === 'function') { - const res = await target?.() - if (res instanceof HTMLElement) { - return res - } + const res = await target() + return res instanceof HTMLElement ? res : undefined } else { return target.value } - return undefined } export function useRequest<P extends any[], T>( @@ -48,7 +46,6 @@ export function useRequest<P extends any[], T>( getter: (...p: P) => Awaitable<T | undefined>, option?: RequestOption<T, P>, ): RequestResult<T | undefined, P> - export function useRequest<P extends any[], T>( getter: (...p: P) => Promise<T> | T, option?: RequestOption<T, P>, @@ -56,29 +53,27 @@ export function useRequest<P extends any[], T>( const { manual = false, defaultValue, defaultParam = ([] as any[] as P), - loadingTarget, loadingText, deps, onSuccess, onError, - } = option || {} + } = option ?? {} const data = shallowRef(defaultValue) as ShallowRef<T> const loading = ref(false) const param = ref<P>() const ts = ref<number>(Date.now()) + const createLoading = useLoading(option) + const refreshAsync = async (...p: P) => { loading.value = true - let loadingEl = await findLoadingEl(loadingTarget) - // fallback use document - !loadingEl && loadingText && (loadingEl = document.body) - const loadingInstance = loadingEl ? ElLoadingService({ target: loadingEl, text: loadingText }) : null + const loadingInstance = await createLoading?.() try { param.value = p const value = await getter?.(...p) data.value = value ts.value = Date.now() - onSuccess?.(value) + onSuccess?.(value, ...p) } catch (e) { - console.warn("Errored when requesting", e) + console.log("Errored when requesting", e) onError?.(e) } finally { loading.value = false @@ -88,7 +83,7 @@ export function useRequest<P extends any[], T>( const refresh = (...p: P) => { refreshAsync(...p) } if (!manual) { // If loading target specified, do first query after mounted - const hook = loadingTarget ? onMounted : onBeforeMount + const hook = option?.loadingTarget ? onMounted : onBeforeMount hook(() => refresh(...defaultParam)) } if (deps && (!Array.isArray(deps) || deps?.length)) { @@ -96,4 +91,19 @@ export function useRequest<P extends any[], T>( } const refreshAgain = () => param.value && refresh(...param.value) return { data, ts, refresh, refreshAsync, refreshAgain, loading, param } +} + +const useLoading = <T, P extends any[]>(option?: RequestOption<T, P>) => { + const { loadingTarget, loadingText, loadingOptions } = option ?? {} + + if (loadingOptions) return () => ElLoadingService(loadingOptions) + if (loadingTarget || loadingText) { + return async () => { + let loadingEl = await findLoadingEl(loadingTarget) + // fallback use document + !loadingEl && loadingText && (loadingEl = document.body) + return loadingEl ? ElLoadingService({ target: loadingEl, text: loadingText }) : null + } + } + return null } \ No newline at end of file diff --git a/src/pages/hooks/useScrollRequest.ts b/src/pages/hooks/useScrollRequest.ts index bf1cf4a96..d0bec63ac 100644 --- a/src/pages/hooks/useScrollRequest.ts +++ b/src/pages/hooks/useScrollRequest.ts @@ -1,8 +1,7 @@ -import { onBeforeMount, ref, type Ref, watch, type WatchSource } from "vue" +import { ref, type Ref, watch, type WatchSource } from "vue" +import { useRequest } from './useRequest' -type Option<T> = { - manual?: boolean - defaultValue?: T[] +type Option = { pageSize?: number resetDeps?: WatchSource<unknown> | WatchSource<unknown>[] } @@ -11,59 +10,42 @@ type Result<T> = { data: Ref<T[]> end: Ref<boolean> loading: Ref<boolean> - loadMore: () => void - loadMoreAsync: () => Promise<void> - reset: () => void + loadMore: () => Promise<void> + reset: NoArgCallback } -export const useScrollRequest = <T>(getter: (pageNo: number, pageSize: number) => Promise<T[]>, option?: Option<T>): Result<T> => { - const { - defaultValue, - manual, - pageSize: outerPageSize, - resetDeps, - } = option || {} - const data = ref<T[]>(defaultValue ?? []) as Ref<T[]> +export const useScrollRequest = <T>(getter: (pageNo: number, pageSize: number) => Promise<T[]>, option?: Option): Result<T> => { + const { pageSize = 10, resetDeps } = option ?? {} const end = ref(false) - const loading = ref(false) - const pageNo = ref(0) - const pageSize = outerPageSize || 10 - - const loadMoreAsync = async () => { - if (end.value) return - try { - loading.value = true - const no = pageNo.value = (pageNo.value + 1) - const newData = await getter?.(no, pageSize) || [] - data.value = [...(data.value || []), ...(newData || [])] - const newLen = newData?.length ?? 0 - if (!newLen || newLen < pageSize) { - end.value = true - } - } finally { - loading.value = false - } + const queriedPage = ref(0) + const data: Ref<T[]> = ref([]) + + const { refreshAsync, loading } = useRequest( + (pageNo: number) => getter(pageNo, pageSize), + { + defaultParam: [1], + onSuccess: (list, pageNo) => { + list.length && (data.value = [...data.value, ...list]) + end.value = list.length < pageSize + list.length && (queriedPage.value = pageNo) + }, + }, + ) + + const loadMore = async () => { + if (loading.value || end.value) return + return refreshAsync(queriedPage.value + 1) } const reset = async () => { + if (loading.value) return end.value = false - pageNo.value = 0 data.value = [] - await loadMoreAsync() + queriedPage.value = 0 + await refreshAsync(1) } - !manual && onBeforeMount(loadMoreAsync) - - if (resetDeps && (!Array.isArray(resetDeps) || resetDeps?.length)) { - watch(resetDeps, reset) - } + resetDeps && watch(resetDeps, reset) - return { - data, - end, - loading, - loadMore: () => loadMoreAsync(), - loadMoreAsync, - reset, - } + return { data, end, loading, loadMore, reset } } \ No newline at end of file diff --git a/src/pages/hooks/useSiteMerge.ts b/src/pages/hooks/useSiteMerge.ts new file mode 100644 index 000000000..d3b799e0c --- /dev/null +++ b/src/pages/hooks/useSiteMerge.ts @@ -0,0 +1,22 @@ +import { getOption } from '@api/sw/option' +import { computed } from 'vue' +import { useRequest } from './useRequest' + +type Options = { + onGroupDisabled?: NoArgCallback +} + +export const useSiteMerge = ({ onGroupDisabled }: Options) => { + const { data: countTabGroup } = useRequest(() => getOption().then(o => o?.countTabGroup ?? false), { + defaultValue: false, + onSuccess: v => !v && onGroupDisabled?.() + }) + + const mergeItems = computed(() => { + const res: (Exclude<tt4b.stat.MergeMethod, 'date'>)[] = ['cate', 'domain'] + countTabGroup.value && res.push('group') + return res + }) + + return { mergeItems, countTabGroup } +} \ No newline at end of file diff --git a/src/pages/hooks/useTabGroups.ts b/src/pages/hooks/useTabGroups.ts index 8907f250f..a1a0ffad3 100644 --- a/src/pages/hooks/useTabGroups.ts +++ b/src/pages/hooks/useTabGroups.ts @@ -1,6 +1,6 @@ import { listAllGroups, onChanged, removeChangedHandler } from "@api/chrome/tabGroups" import { computed, onMounted } from "vue" -import { useRequest } from "." +import { useRequest } from "./useRequest" export const useTabGroups = () => { const { data: groups, refresh } = useRequest(listAllGroups, { defaultValue: [] }) diff --git a/src/pages/hooks/useWindowFocus.ts b/src/pages/hooks/useWindowFocus.ts deleted file mode 100644 index bbc77d95a..000000000 --- a/src/pages/hooks/useWindowFocus.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { shallowRef, type ShallowRef } from 'vue' -import { useWindowListener } from './useWindowListener' - -export function useWindowFocus(): ShallowRef<boolean> { - if (typeof window === 'undefined') return shallowRef(false) - - const focused = shallowRef(window.document.hasFocus()) - - const options: AddEventListenerOptions = { passive: true } - - useWindowListener('focus', () => focused.value = true, options) - useWindowListener('blur', () => focused.value = false, options) - - return focused -} \ No newline at end of file diff --git a/src/pages/icons.tsx b/src/pages/icons.tsx new file mode 100644 index 000000000..cb31c1b86 --- /dev/null +++ b/src/pages/icons.tsx @@ -0,0 +1,100 @@ +import type { FunctionalComponent } from 'vue' + +type Icon = FunctionalComponent<{}> + +export const Coffee: Icon = () => ( + <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M247.68 933.12a66.88 66.88 0 0 0 64 58.88h399.68a66.88 66.88 0 0 0 64-58.88L864 320H160zM512 480a128 128 0 1 1-128 128 128 128 0 0 1 128-128zM923.2 160a64 64 0 0 1-56.64-32l-32-58.88A65.92 65.92 0 0 0 777.6 32H246.72a64 64 0 0 0-57.28 35.52L160 126.4A68.16 68.16 0 0 1 100.8 160 36.48 36.48 0 0 0 64 192v32c0 17.6 23.68 32 41.28 32h813.44C936.32 256 960 241.6 960 224V192a36.48 36.48 0 0 0-36.8-32z" /> + </svg> +) + +export const GitHub: Icon = () => ( + <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'> + <path d='M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z' /> + </svg> +) + +export const Discord: Icon = () => ( + <svg viewBox="0 0 1280 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M1049.062 139.672a3 3 0 0 0-1.528-1.4A970.13 970.13 0 0 0 808.162 64.06a3.632 3.632 0 0 0-3.846 1.82 674.922 674.922 0 0 0-29.8 61.2 895.696 895.696 0 0 0-268.852 0 619.082 619.082 0 0 0-30.27-61.2 3.78 3.78 0 0 0-3.848-1.82 967.378 967.378 0 0 0-239.376 74.214 3.424 3.424 0 0 0-1.576 1.352C78.136 367.302 36.372 589.38 56.86 808.708a4.032 4.032 0 0 0 1.53 2.75 975.332 975.332 0 0 0 293.65 148.378 3.8 3.8 0 0 0 4.126-1.352A696.4 696.4 0 0 0 416.24 860.8a3.72 3.72 0 0 0-2.038-5.176 642.346 642.346 0 0 1-91.736-43.706 3.77 3.77 0 0 1-0.37-6.252 502.094 502.094 0 0 0 18.218-14.274 3.638 3.638 0 0 1 3.8-0.512c192.458 87.834 400.82 87.834 591 0a3.624 3.624 0 0 1 3.848 0.466 469.066 469.066 0 0 0 18.264 14.32 3.768 3.768 0 0 1-0.324 6.252 602.814 602.814 0 0 1-91.78 43.66 3.75 3.75 0 0 0-2 5.222 782.11 782.11 0 0 0 60.028 97.63 3.728 3.728 0 0 0 4.126 1.4A972.096 972.096 0 0 0 1221.4 811.458a3.764 3.764 0 0 0 1.53-2.704c24.528-253.566-41.064-473.824-173.868-669.082zM444.982 675.16c-57.944 0-105.688-53.174-105.688-118.478s46.818-118.482 105.688-118.482c59.33 0 106.612 53.64 105.686 118.478 0 65.308-46.82 118.482-105.686 118.482z m390.76 0c-57.942 0-105.686-53.174-105.686-118.478s46.818-118.482 105.686-118.482c59.334 0 106.614 53.64 105.688 118.478 0 65.308-46.354 118.482-105.688 118.482z" /> + </svg> +) + +export const Heart: Icon = () => ( + <svg viewBox="0 0 1024 1024"> + <path d="M1000 248Q976.992 192 933.984 148.992 849.984 64 732.992 64q-64 0-121.504 28T512 171.008q-42.016-51.008-99.488-79.008T291.008 64Q174.016 64 90.016 150.016 47.008 193.024 24 249.024-0.992 308.032 0 371.04q0.992 68.992 28.992 130.496t79.008 104.512q4.992 4 8.992 8 14.016 12 112.992 102.016 208 191.008 256.992 235.008 11.008 8.992 24.992 8.992t24.992-8.992q32.992-30.016 180.992-164.992 158.016-144 196-179.008 52-43.008 80.992-104.992t28.992-132q0-64-24-122.016z" /> + </svg> +) + +export const RoseChart: Icon = () => ( + <svg viewBox="0 0 1024 1024"> + <path d="M512 256a256 256 0 1 0 256 256 256 256 0 0 0-256-256z m0 384a128 128 0 1 1 128-128 128 128 0 0 1-128 128z" /> + <path d="M768 320l-153.6 115.84A128 128 0 0 1 640 512a128 128 0 0 1-37.44 90.56l135.68 135.68A320 320 0 0 0 768 320z" /> + <path d="M602.56 602.56a128 128 0 0 1-181.12 0l-181.12 181.12a384 384 0 0 0 544 0z" /> + <path d="M384 512a128 128 0 0 1 128-128V64a448 448 0 0 0-316.8 764.8l226.24-226.24A128 128 0 0 1 384 512z" /> + </svg> +) + +export const Trend: Icon = () => ( + <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> + <path d="M99.760075 885.579417c-16.231683 0-29.42824-13.196557-29.42824-29.42824L70.331835 148.761092c0-16.238846 13.196557-29.441543 29.42824-29.441543 16.237823 0 29.440519 13.20372 29.440519 29.441543l0 677.955706 807.702746 0c16.23066 0 29.427216 13.202697 29.427216 29.434379s-13.196557 29.42824-29.427216 29.42824L99.760075 885.579417 99.760075 885.579417zM195.092303 726.586286c-6.382361 0-12.472056-2.029216-17.60803-5.867638-12.993942-9.730619-15.657608-28.214599-5.932106-41.208541l193.054901-257.921257c5.619998-7.498788 14.214746-11.799744 23.594371-11.799744 5.867638 0 11.544941 1.729387 16.413831 5.012154l173.612083 116.910687 305.917388-243.700371c5.266957-4.196579 11.597129-6.41613 18.313088-6.41613 9.025561 0 17.418718 4.040013 23.038716 11.095709 4.901637 6.141884 7.107885 13.829983 6.233981 21.648043-0.88209 7.806803-4.758374 14.809287-10.906397 19.717064l-322.80194 257.149685c-5.175883 4.13825-11.689227 6.40999-18.339694 6.40999-5.879917 0-11.565407-1.729387-16.439414-5.012154l-168.280658-113.320928L218.687698 714.77938C213.074863 722.285331 204.471928 726.586286 195.092303 726.586286L195.092303 726.586286z" /> + </svg> +) + +export const BarChart: Icon = () => ( + <svg viewBox="0 0 1024 1024"> + <g transform="matrix(-1 0 0 -1 1024 1024)"> + <g transform="matrix(0 1 -1 0 1024 -0)"> + <path d="M213.312 213.312v597.376h597.376V213.312H213.312z m0-85.312h597.376A85.312 85.312 0 0 1 896 213.312v597.376A85.376 85.376 0 0 1 810.688 896H213.312A85.376 85.376 0 0 1 128 810.688V213.312A85.312 85.312 0 0 1 213.312 128z m128 170.688h85.376a42.688 42.688 0 0 1 42.624 42.624v341.376a42.688 42.688 0 0 1-42.624 42.624H341.312a42.688 42.688 0 0 1-42.624-42.624V341.312a42.688 42.688 0 0 1 42.624-42.624z m256 0h85.376a42.688 42.688 0 0 1 42.624 42.624V512a42.688 42.688 0 0 1-42.624 42.688H597.312A42.688 42.688 0 0 1 554.688 512V341.312a42.688 42.688 0 0 1 42.624-42.624z" /> + </g> + </g> + </svg> +) + +export const HalfPieChart: Icon = () => ( + <svg viewBox="0 0 1365 1024"> + <path d="M1365.055916 682.737408A682.525185 682.525185 0 1 0 91.549237 1024h1181.962989A679.005914 679.005914 0 0 0 1365.055916 682.737408z" /> + </svg> +) + +export const Enter: Icon = () => ( + <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="M417 1c-48.602 0-88 39.399-88 88v346H89c-48.6 0-88 39.399-88 88v412c0 48.6 39.4 88 88 88h314.69c4.341 0.658 8.786 1 13.31 1h517c24.555 0 46.761-10.057 62.724-26.277C1012.943 981.761 1023 959.555 1023 935V523c0-4.524-0.341-8.968-1-13.31V89c0-48.601-39.398-88-88-88H417z m250.036 645.739V389.131c0-27.134 21.977-49.131 49.087-49.131 27.11 0 49.088 21.997 49.088 49.131V745H453.699l31.657 31.657c19.174 19.173 19.167 50.263-0.012 69.441-19.178 19.179-50.268 19.185-69.441 0.013L266 696.207l149.956-149.955c19.179-19.179 50.269-19.185 69.441-0.013 19.172 19.173 19.167 50.263-0.012 69.441l-31.059 31.059h212.71z" /> + </svg> +) + +export const Rule: Icon = () => ( + <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> + <path d="M796.444444 967.111111H227.555556c-62.577778 0-113.777778-51.2-113.777778-113.777778V170.666667c0-62.577778 51.2-113.777778 113.777778-113.777778h568.888888c62.577778 0 113.777778 51.2 113.777778 113.777778v682.666666c0 62.577778-51.2 113.777778-113.777778 113.777778zM227.555556 113.777778c-34.133333 0-56.888889 22.755556-56.888889 56.888889v682.666666c0 34.133333 22.755556 56.888889 56.888889 56.888889h568.888888c34.133333 0 56.888889-22.755556 56.888889-56.888889V170.666667c0-34.133333-22.755556-56.888889-56.888889-56.888889H227.555556z" /> + <path d="M711.111111 682.666667h-398.222222c-17.066667 0-28.444444 11.377778-28.444445 28.444444s11.377778 28.444444 28.444445 28.444445h398.222222c17.066667 0 28.444444-11.377778 28.444445-28.444445s-11.377778-28.444444-28.444445-28.444444zM705.422222 290.133333c-5.688889 0-17.066667-5.688889-22.755555-5.688889-5.688889 0-17.066667 5.688889-22.755556 5.688889L455.111111 500.622222 364.088889 403.911111c-5.688889 0-17.066667-5.688889-22.755556-5.688889-5.688889 0-17.066667 5.688889-22.755555 5.688889 0 0-5.688889 5.688889-5.688889 11.377778v22.755555c0 5.688889 5.688889 5.688889 5.688889 11.377778l113.777778 113.777778c5.688889 0 17.066667 5.688889 22.755555 5.688889 5.688889 0 17.066667-5.688889 22.755556-5.688889l227.555555-227.555556s5.688889-5.688889 5.688889-11.377777v-11.377778-11.377778c-5.688889-5.688889-5.688889-5.688889-5.688889-11.377778z" /> + </svg> +) + +export const Database: Icon = () => ( + <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> + <path d="M731 808.3a32.8 32.9 0 1 0 65.6 0 32.8 32.9 0 1 0-65.6 0Z" p-id="6186" /> + <path d="M763.8 654.7c18.1 0 32.8-14.7 32.8-32.9s-14.7-32.9-32.8-32.9c-18.1 0-32.8 14.7-32.8 32.9-0.1 18.1 14.6 32.9 32.8 32.9z" /> + <path d="M883.3 165.2c-20.7-20.8-49.8-39-87.2-54.6C718.6 78.2 623.9 62 512 62c-111.9 0-206.6 16.2-284.1 48.5-37.4 15.6-66.5 33.9-87.2 54.6-22.5 22.6-33.7 46.7-33.7 72.4v548.8c0 25.7 11.2 49.9 33.7 72.4 20.7 20.8 49.8 39 87.2 54.6C305.4 945.8 400.1 962 512 962c111.9 0 206.6-16.2 284.1-48.5 37.4-15.6 66.5-33.9 87.2-54.6 22.5-22.6 33.7-46.7 33.7-72.4V237.6c0-25.7-11.2-49.9-33.7-72.4z m-27.6 621.2c0 11.8-7.4 24.3-22.3 37.3-16.4 14.4-39.6 27.5-69.7 39.2-69.2 27-153.1 40.6-251.7 40.6S329.5 890 260.3 862.9c-30.1-11.7-53.3-24.8-69.7-39.2-14.9-13-22.3-25.5-22.3-37.3v-88c32.1 22.5 74.7 40.8 127.9 54.9 65 17.2 136.9 25.8 215.8 25.8s150.8-8.6 215.8-25.8c53.2-14.1 95.9-32.4 127.9-54.9v88z m0-182.9c0 11.8-7.4 24.3-22.3 37.3-16.4 14.4-39.6 27.5-69.7 39.2-69.2 27-153.1 40.6-251.7 40.6S329.5 707 260.3 680c-30.1-11.7-53.3-24.8-69.7-39.2-14.9-13-22.3-25.5-22.3-37.3v-88c32 22.5 74.7 40.8 127.9 54.9 65 17.2 136.9 25.8 215.8 25.8s150.8-8.6 215.8-25.8c53.2-14.1 95.9-32.4 127.9-54.9v88z m0-183c0 11.8-7.4 24.3-22.3 37.3-16.4 14.4-39.6 27.5-69.7 39.2-69.2 27-153.1 40.6-251.7 40.6S329.5 524.1 260.3 497c-30.1-11.7-53.3-24.8-69.7-39.2-14.9-13-22.3-25.5-22.3-37.3v-88c32.1 22.5 74.7 40.8 127.9 54.9 65 17.2 136.9 25.8 215.8 25.8s150.8-8.6 215.8-25.8c53.2-14.1 95.9-32.4 127.9-54.9v88z m-22.3-145.6c-16.4 14.4-39.6 27.5-69.7 39.2-69.2 27-153.1 40.6-251.7 40.6s-182.5-13.5-251.7-40.6c-30.1-11.7-53.3-24.8-69.7-39.2-14.9-13-22.3-25.5-22.3-37.3 0-11.8 7.4-24.3 22.3-37.3 16.4-14.4 39.6-27.5 69.7-39.2 69.2-27 153.1-40.6 251.7-40.6s182.5 13.5 251.7 40.6c30.1 11.7 53.3 24.8 69.7 39.2 14.9 13 22.3 25.5 22.3 37.3 0 11.8-7.4 24.3-22.3 37.3z" p-id="6188" /> + <path d="M731 435.2a32.8 32.9 0 1 0 65.6 0 32.8 32.9 0 1 0-65.6 0Z" p-id="6189" /> + </svg> +) + +export const About: Icon = () => ( + <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> + <path d="M512 165c191.6 0 347 155.3 347 347S703.6 859 512 859 165 703.6 165 512s155.4-347 347-347m0-100.4C265.3 64.6 64.6 265.3 64.6 512S265.3 959.4 512 959.4 959.4 758.7 959.4 512 758.7 64.6 512 64.6z" /> + <path d="M512 709.1c-34.4 0-66.7-10.2-90.7-28.6-22-16.9-26.2-48.4-9.3-70.4 16.9-22 48.5-26.1 70.4-9.3 5 3.8 15.4 7.9 29.6 7.9 14.2 0 24.6-4.1 29.6-7.9 22-16.9 53.5-12.7 70.4 9.3 16.9 22 12.7 53.5-9.3 70.4-24.1 18.4-56.3 28.6-90.7 28.6z" /> + <path d="M346.8 352.3c-27.7 0-50.2 22.5-50.2 50.2v47.2c0 27.7 22.5 50.2 50.2 50.2s50.2-22.5 50.2-50.2v-47.2c0.1-27.7-22.4-50.2-50.2-50.2zM677.2 352.3c-27.7 0-50.2 22.5-50.2 50.2v47.2c0 27.7 22.5 50.2 50.2 50.2s50.2-22.5 50.2-50.2v-47.2c0-27.7-22.5-50.2-50.2-50.2z" /> + </svg> +) + +export const Table: Icon = () => ( + <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> + <path d="M324.576 786.272l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM324.576 566.848l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM617.152 786.272l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM324.576 347.424l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM617.152 566.848l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM909.728 786.272l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM617.152 347.424l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM909.728 566.848l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM909.728 347.424l0-109.728q0-8-5.152-13.152t-13.152-5.152l-182.848 0q-8 0-13.152 5.152t-5.152 13.152l0 109.728q0 8 5.152 13.152t13.152 5.152l182.848 0q8 0 13.152-5.152t5.152-13.152zM982.848 164.576l0 621.728q0 37.728-26.848 64.576t-64.576 26.848l-768 0q-37.728 0-64.576-26.848t-26.848-64.576l0-621.728q0-37.728 26.848-64.576t64.576-26.848l768 0q37.728 0 64.576 26.848t26.848 64.576z" /> + </svg> +) + +export const Website: Icon = () => ( + <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"> + <path d="M53.312 512a458.688 458.688 0 1 1 917.376 0A458.688 458.688 0 0 1 53.312 512z m339.52-376.32a394.048 394.048 0 0 0-138.88 77.632c25.6 22.08 53.952 40.96 84.48 55.936 6.784-25.408 14.528-49.152 23.168-70.848 9.216-22.912 19.584-44.16 31.232-62.72zM209.024 258.944A392.896 392.896 0 0 0 118.592 480h191.232c1.472-51.584 6.528-100.992 14.656-146.688a459.136 459.136 0 0 1-115.456-74.24z m422.144 629.376a394.176 394.176 0 0 0 138.88-77.696 395.328 395.328 0 0 0-84.48-55.936 610.752 610.752 0 0 1-23.168 70.848c-9.152 22.912-19.584 44.096-31.232 62.72z m183.808-123.456A392.832 392.832 0 0 0 905.408 544H714.24a1008.704 1008.704 0 0 1-14.72 146.624c42.24 19.008 81.152 44.16 115.456 74.304zM905.408 480a392.96 392.96 0 0 0-90.432-220.928 459.2 459.2 0 0 1-115.392 74.24c8.064 45.696 13.12 95.104 14.656 146.688h191.168zM769.92 213.312a394.112 394.112 0 0 0-138.88-77.696c11.712 18.688 22.144 39.872 31.296 62.784 8.704 21.76 16.448 45.44 23.104 70.848a395.328 395.328 0 0 0 84.48-55.936zM392.832 888.384a399.04 399.04 0 0 1-31.232-62.784 610.624 610.624 0 0 1-23.104-70.848 395.264 395.264 0 0 0-84.48 55.936 394.048 394.048 0 0 0 138.88 77.696z m-183.744-123.456a459.136 459.136 0 0 1 115.392-74.24A1008.448 1008.448 0 0 1 309.76 544H118.656a392.896 392.896 0 0 0 90.496 220.928zM512 117.312c-11.904 0-26.496 5.952-43.2 23.552-16.64 17.664-33.216 44.928-47.744 81.28-8.448 21.12-16 44.8-22.528 70.656A394.752 394.752 0 0 0 512 309.312c39.488 0 77.568-5.76 113.536-16.512a557.824 557.824 0 0 0-22.528-70.592c-14.592-36.416-31.104-63.68-47.808-81.344-16.64-17.6-31.232-23.552-43.2-23.552zM373.824 480h276.352a953.28 953.28 0 0 0-11.712-124.352A458.88 458.88 0 0 1 512 373.312a458.88 458.88 0 0 1-126.4-17.664A953.216 953.216 0 0 0 373.76 480z m11.776 188.352A458.944 458.944 0 0 1 512 650.688c43.84 0 86.272 6.144 126.464 17.664 6.272-38.656 10.368-80.448 11.712-124.352H373.824c1.344 43.904 5.44 85.76 11.776 124.352zM512 714.688c-39.424 0-77.568 5.76-113.472 16.512 6.464 25.792 14.08 49.472 22.528 70.592 14.528 36.416 31.04 63.68 47.744 81.344 16.64 17.6 31.296 23.552 43.2 23.552 11.968 0 26.56-5.952 43.2-23.552 16.704-17.664 33.28-44.928 47.808-81.28 8.448-21.184 16-44.8 22.464-70.656A394.752 394.752 0 0 0 512 714.688z" /> + </svg> +) \ No newline at end of file diff --git a/src/pages/popup/common.tsx b/src/pages/popup/common.tsx index 1c76ffc42..3fd944cb6 100644 --- a/src/pages/popup/common.tsx +++ b/src/pages/popup/common.tsx @@ -1,22 +1,19 @@ -import type { ReportQueryParam } from "@app/components/Report/types" -import { REPORT_ROUTE } from "@app/router/constants" -import weekHelper from "@service/components/week-helper" -import statService from "@service/stat-service" +import { getWeekStartTime } from "@api/sw/option" +import { listCateStats, listGroupStats, listSiteStats } from '@api/sw/stat' +import { RECORD_ROUTE, type RecordQuery } from "@app/router/constants" +import type { PopupDuration, PopupQuery } from "@popup/types" import { isRemainHost } from "@util/constant/remain-host" import { getAppPageUrl } from "@util/constant/url" import { isSite } from "@util/stat" -import { getMonthTime, MILL_PER_DAY } from "@util/time" -import { type PopupQuery } from "./context" +import { cvtDateRange2Str, getMonthTime, MILL_PER_DAY, type DateRange } from "@util/time" -type DateRange = Date | [Date, Date] | undefined +type DateRangeCalculator = (now: Date, num?: number) => Awaitable<[Date, Date] | Date | undefined> -type DateRangeCalculator = (now: Date, num?: number) => Awaitable<DateRange> - -const DATE_RANGE_CALCULATORS: { [duration in timer.option.PopupDuration]: DateRangeCalculator } = { +const DATE_RANGE_CALCULATORS: { [duration in PopupDuration]: DateRangeCalculator } = { today: now => now, yesterday: now => new Date(now.getTime() - MILL_PER_DAY), thisWeek: async now => { - const [start] = await weekHelper.getWeekDate(now) + const start = await getWeekStartTime(now) return [start, now] }, thisMonth: now => [getMonthTime(now)[0], now], @@ -24,27 +21,28 @@ const DATE_RANGE_CALCULATORS: { [duration in timer.option.PopupDuration]: DateRa allTime: () => undefined, } -export const queryRows = async (param: PopupQuery): Promise<[rows: timer.stat.Row[], date: DateRange]> => { +export const queryRows = async (param: PopupQuery): Promise<[rows: tt4b.stat.Row[], date: [Date, Date] | Date | undefined]> => { const { duration, durationNum, mergeMethod, dimension: sortKey } = param - const date = await DATE_RANGE_CALCULATORS[duration]?.(new Date(), durationNum) - const sortDirection: timer.common.SortDirection = 'DESC' - let rows: timer.stat.Row[] + const dateRange = await DATE_RANGE_CALCULATORS[duration]?.(new Date(), durationNum) + const date = cvtDateRange2Str(dateRange) + const sortDirection: tt4b.common.SortDirection = 'DESC' + let rows: tt4b.stat.Row[] if (mergeMethod === 'cate') { - rows = await statService.selectCate({ date, mergeDate: true, sortKey, sortDirection }) + rows = await listCateStats({ date, mergeDate: true, sortKey, sortDirection }) } else if (mergeMethod === 'group') { - rows = await statService.selectGroup({ date, mergeDate: true, sortKey, sortDirection }) + rows = await listGroupStats({ date, mergeDate: true, sortKey, sortDirection }) } else { - rows = await statService.selectSite({ + rows = await listSiteStats({ date, mergeDate: true, mergeHost: mergeMethod === 'domain', sortKey, sortDirection, }) } - return [rows, date] + return [rows, dateRange] } -function buildReportQuery(siteType: timer.site.Type, date: Date | [Date, Date?] | undefined, type: timer.core.Dimension): ReportQueryParam { - const query: ReportQueryParam = {} +function buildRecordQuery(siteType: tt4b.site.Type, date: DateRange | undefined, type: tt4b.core.Dimension): RecordQuery { + const query: RecordQuery = {} // Merge host siteType === 'merged' && (query.mm = 'domain') // Date @@ -66,7 +64,11 @@ function buildReportQuery(siteType: timer.site.Type, date: Date | [Date, Date?] return query } -export function calJumpUrl(row: timer.stat.Row | undefined, date: Date | [Date, Date?] | undefined, type: timer.core.Dimension): string | undefined { +export function calJumpUrl( + row: tt4b.stat.Row | undefined, + date: DateRange | undefined, + type: tt4b.core.Dimension, +): string | undefined { if (!row) return if (isSite(row)) { const { siteKey: { host, type: siteType } } = row @@ -75,8 +77,8 @@ export function calJumpUrl(row: timer.stat.Row | undefined, date: Date | [Date, return `http://${host}` } - const query = buildReportQuery(siteType, date, type) + const query = buildRecordQuery(siteType, date, type) query.q = host - return getAppPageUrl(REPORT_ROUTE, query) + return getAppPageUrl(RECORD_ROUTE, query) } -} +} \ No newline at end of file diff --git a/src/pages/popup/components/Footer/DataToolbar.tsx b/src/pages/popup/components/Footer/DataToolbar.tsx new file mode 100644 index 000000000..6492a7a74 --- /dev/null +++ b/src/pages/popup/components/Footer/DataToolbar.tsx @@ -0,0 +1,51 @@ +import { useSiteMerge } from '@hooks' +import Flex from '@pages/components/Flex' +import { useQuery } from '@popup/context' +import { t } from '@popup/locale' +import { ALL_DIMENSIONS } from '@util/stat' +import { ElSelect, ElText } from 'element-plus' +import { defineComponent } from 'vue' +import DurationSelect from './DurationSelect' + +const DataToolbar = defineComponent(() => { + const query = useQuery() + + const { mergeItems } = useSiteMerge({ + onGroupDisabled: () => query.mergeMethod === 'group' && (query.mergeMethod = undefined) + }) + + return () => ( + <Flex gap={8}> + <Flex gap={4}> + <ElText>{t(msg => msg.shared.merge.mergeBy)}</ElText> + <ElSelect + modelValue={query.mergeMethod} + onChange={v => query.mergeMethod = v ?? undefined} + placeholder={t(msg => msg.shared.merge.mergeMethod.notMerge)} + popperOptions={{ placement: 'top' }} + style={{ width: '90px' }} + options={[ + { value: '', label: t(msg => msg.shared.merge.mergeMethod.notMerge) }, + ...mergeItems.value.map(value => ({ value, label: t(msg => msg.shared.merge.mergeMethod[value]) })), + ]} + /> + </Flex> + <DurationSelect + modelValue={[query.duration, query.durationNum]} + onChange={([duration, durationNum]) => { + query.duration = duration + query.durationNum = durationNum + }} + /> + <ElSelect + modelValue={query.dimension} + onChange={v => query.dimension = v} + popperOptions={{ placement: 'top' }} + style={{ width: '120px' }} + options={ALL_DIMENSIONS.map(value => ({ value, label: t(msg => msg.item[value]) }))} + /> + </Flex> + ) +}) + +export default DataToolbar \ No newline at end of file diff --git a/src/pages/popup/components/Footer/DurationSelect.tsx b/src/pages/popup/components/Footer/DurationSelect.tsx new file mode 100644 index 000000000..853c6c356 --- /dev/null +++ b/src/pages/popup/components/Footer/DurationSelect.tsx @@ -0,0 +1,71 @@ +import { css } from '@emotion/css' +import { t } from "@i18n" +import calendarMessages from "@i18n/message/common/calendar" +import { type PopupDuration } from '@popup/types' +import { type CascaderNode, type CascaderOption, ElCascader, useNamespace } from "element-plus" +import { computed, defineComponent } from "vue" + +const rangeLabel = (duration: PopupDuration, n?: string | number): string => t(calendarMessages, { + key: msg => msg.range[duration], + param: n ? { n } : undefined, +}) + +const BUILTIN_DAY_NUM = [7, 30, 90, 180, 365] + +const cvt2Opt = (value: PopupDuration, n?: string | number): CascaderOption => ({ + value, label: rangeLabel(value, n), +}) + +const options = (): CascaderOption[] => [ + cvt2Opt('allTime'), + { + ...cvt2Opt('lastDays', 'X'), + children: [ + ...BUILTIN_DAY_NUM.map(value => ({ + value, + label: rangeLabel('lastDays', value), + })), + ], + }, + ...(['thisMonth', 'thisWeek', 'yesterday', 'today'] satisfies PopupDuration[]).map(cvt2Opt), +] + +type DurationValue = [PopupDuration, number?] + +type Props = ModelValue<DurationValue> + +const DurationSelect = defineComponent<Props>(props => { + const casVal = computed(() => { + const [type, num] = props.modelValue + return type === 'lastDays' ? num ?? 30 : type + }) + + const cascaderNs = useNamespace('cascader') + + const popoverCls = css` + & .${cascaderNs.b('panel')} { + & .${cascaderNs.b('menu')}:nth-child(2) { + width: 100px; + min-width: 0; + } + } + ` + + return () => ( + <ElCascader + modelValue={casVal.value} + onChange={val => props.onChange?.(val as [PopupDuration, number?])} + options={options()} + show-all-levels={false} + style={{ width: '130px' }} + popperClass={popoverCls} + > + {(param: any) => { + const { label, value, level } = param?.node as CascaderNode || {} + return level === 2 ? value : label + }} + </ElCascader> + ) +}, { props: ['modelValue', 'onChange'] }) + +export default DurationSelect \ No newline at end of file diff --git a/src/pages/popup/components/Footer/DurationSelect/index.tsx b/src/pages/popup/components/Footer/DurationSelect/index.tsx deleted file mode 100644 index 2e01cf47f..000000000 --- a/src/pages/popup/components/Footer/DurationSelect/index.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { t } from "@i18n" -import calendarMessages from "@i18n/message/common/calendar" -import { type CascaderNode, type CascaderOption, ElCascader, ExpandTrigger } from "element-plus" -import { computed, type CSSProperties, defineComponent, type PropType } from "vue" -import "./style.sass" - -export const rangeLabel = (duration: timer.option.PopupDuration, n?: string | number): string => { - return t(calendarMessages, { - key: msg => msg.range[duration], - param: n ? { n } : undefined, - }) -} - -const BUILTIN_DAY_NUM = [7, 30, 90, 180, 365] - -const cvt2Opt = (value: timer.option.PopupDuration, n?: string | number): CascaderOption => ({ - value, label: rangeLabel(value, n), -}) - -const options = (reverse?: boolean): CascaderOption[] => { - const result: CascaderOption[] = [ - ...(['today', 'thisWeek', 'thisMonth', 'yesterday'] satisfies timer.option.PopupDuration[]).map(cvt2Opt), - { - ...cvt2Opt('lastDays', 'X'), - children: [ - ...BUILTIN_DAY_NUM.map(value => ({ - value, - label: rangeLabel('lastDays', value), - })), - ], - }, - cvt2Opt('allTime'), - ] - return reverse ? result.reverse() : result -} - -export type DurationValue = [timer.option.PopupDuration, number?] - -const DurationSelect = defineComponent({ - props: { - modelValue: Array as unknown as PropType<DurationValue>, - size: String as PropType<"" | "small" | "default" | "large">, - expandTrigger: String as PropType<ExpandTrigger>, - reverse: Boolean, - style: Object as PropType<CSSProperties>, - }, - emits: { - change: (_val: DurationValue) => true, - }, - setup(props, ctx) { - const casVal = computed(() => { - const [type, num] = props.modelValue || [] - return type === 'lastDays' ? num || 30 : type || 'today' - }) - - return () => ( - <ElCascader - modelValue={casVal.value} - onChange={val => ctx.emit('change', val as [timer.option.PopupDuration, number?])} - options={options(props.reverse)} - props={{ expandTrigger: props.expandTrigger }} - show-all-levels={false} - style={{ width: '130px', ...props.style || {} }} - popperClass="duration-select-popover" - size={props.size} - > - {(param: any) => { - const { label, value, level } = param?.node as CascaderNode || {} - return level === 2 ? value : label - }} - </ElCascader > - ) - } -}) - -export default DurationSelect \ No newline at end of file diff --git a/src/pages/popup/components/Footer/DurationSelect/style.sass b/src/pages/popup/components/Footer/DurationSelect/style.sass deleted file mode 100644 index 44c2ab342..000000000 --- a/src/pages/popup/components/Footer/DurationSelect/style.sass +++ /dev/null @@ -1,5 +0,0 @@ -.duration-select-popover - .el-cascader-panel - .el-cascader-menu:nth-child(2) - width: 100px - min-width: 0 diff --git a/src/pages/popup/components/Footer/LimitToolbar.tsx b/src/pages/popup/components/Footer/LimitToolbar.tsx new file mode 100644 index 000000000..653796af5 --- /dev/null +++ b/src/pages/popup/components/Footer/LimitToolbar.tsx @@ -0,0 +1,66 @@ +import { APP_LIMIT_ROUTE, AppLimitQuery } from '@/shared/route' +import { createTab } from '@api/chrome/tab' +import { Edit, Plus } from '@element-plus/icons-vue' +import Flex from '@pages/components/Flex' +import { useLimitSummary } from '@popup/context' +import { t } from '@popup/locale' +import { getAppPageUrl } from '@util/constant/url' +import { isBrowserUrl } from '@util/pattern' +import { ElButton, ElSelect } from 'element-plus' +import { computed, defineComponent, type StyleValue } from 'vue' + +const findHost = (url: string) => { + try { + return new URL(url).host + } catch { + return url + } +} + +const LimitToolbar = defineComponent(() => { + const { summary, selected, loading } = useLimitSummary() + const items = computed(() => summary.value?.items || []) + + const handleNew = async () => { + let url = summary.value?.url + const query: AppLimitQuery = { action: 'create' } + if (url && !isBrowserUrl(url)) { + const host = findHost(url) + query.url = encodeURIComponent(host) + } + await createTab(getAppPageUrl(APP_LIMIT_ROUTE, query)) + } + + const handleEdit = async () => { + if (!selected.value) return + const query: AppLimitQuery = { action: 'modify', id: String(selected.value) } + await createTab(getAppPageUrl(APP_LIMIT_ROUTE, query)) + } + + return () => ( + <Flex gap={8} justify='end'> + {!!items.value.length && ( + <Flex gap={4}> + <ElSelect + modelValue={selected.value} + onChange={val => typeof val === 'number' && (selected.value = val)} + options={items.value.map(i => ({ value: i.id, label: i.name }))} + style={{ width: '140px' } satisfies StyleValue} + /> + <ElButton + icon={Edit} + onClick={handleEdit} + style={{ width: '40px' } satisfies StyleValue} + /> + </Flex> + )} + {!loading.value && !items.value.length && ( + <ElButton type='primary' icon={Plus} onClick={handleNew}> + {t(msg => msg.content.limit.newOne)} + </ElButton> + )} + </Flex> + ) +}) + +export default LimitToolbar \ No newline at end of file diff --git a/src/pages/popup/components/Footer/Menu.tsx b/src/pages/popup/components/Footer/Menu.tsx index c37e83c22..b4916718d 100644 --- a/src/pages/popup/components/Footer/Menu.tsx +++ b/src/pages/popup/components/Footer/Menu.tsx @@ -1,23 +1,42 @@ -import { t } from "@popup/locale" -import { POPUP_ROUTES } from "@popup/router" -import { ElRadioButton, ElRadioGroup } from "element-plus" -import { computed, defineComponent } from "vue" -import { useRoute, useRouter } from "vue-router" +import { Histogram, PieChart, Timer } from '@element-plus/icons-vue' +import { useMenu } from '@popup/context' +import { t } from '@popup/locale' +import { isMenu } from '@popup/router' +import { ElIcon, ElRadioButton, ElRadioGroup, ElTooltip } from "element-plus" +import { type Component, defineComponent, h } from "vue" -const Menu = defineComponent(() => { - const route = useRoute() +type MenuItem = { + icon: Component + route: tt4b.ui.PopupMenu + label: string +} + +const createItems = (): MenuItem[] => [ + { + route: 'percentage', + label: t(msg => msg.footer.route.percentage), + icon: PieChart, + }, { + route: 'ranking', + label: t(msg => msg.footer.route.ranking), + icon: Histogram, + }, { + route: 'limit', + label: t(msg => msg.base.limit), + icon: Timer, + } +] as const - const current = computed(() => route.path?.substring?.(1)) +const Menu = defineComponent(() => { + const { menu, setMenu } = useMenu() - const router = useRouter() return () => ( - <ElRadioGroup - modelValue={current.value} - onChange={val => router.push('/' + val)} - > - {POPUP_ROUTES.map(route => ( + <ElRadioGroup modelValue={menu.value} onChange={v => isMenu(v) && setMenu(v)}> + {createItems().map(({ route, label, icon }) => ( <ElRadioButton value={route}> - {t(msg => msg.footer.route[route])} + <ElTooltip content={label}> + <ElIcon>{h(icon)}</ElIcon> + </ElTooltip> </ElRadioButton> ))} </ElRadioGroup> diff --git a/src/pages/popup/components/Footer/index.tsx b/src/pages/popup/components/Footer/index.tsx index b782ba603..36c643b81 100644 --- a/src/pages/popup/components/Footer/index.tsx +++ b/src/pages/popup/components/Footer/index.tsx @@ -1,54 +1,20 @@ import Flex from "@pages/components/Flex" -import DurationSelect from "@popup/components/Footer/DurationSelect" -import { useQuery } from "@popup/context" -import { t } from "@popup/locale" -import { ALL_DIMENSIONS } from "@util/stat" -import { ElOption, ElSelect, ElText } from "element-plus" -import { defineComponent } from "vue" +import { useMenu } from "@popup/context" +import { defineComponent, Transition } from "vue" +import DataToolbar from './DataToolbar' +import LimitToolbar from './LimitToolbar' import Menu from "./Menu" const Footer = defineComponent(() => { - const query = useQuery() + const { menu } = useMenu() return () => ( - <Flex justify="space-between" width="100%"> - <Flex> - <Menu /> - </Flex> - <Flex gap={8}> - <Flex gap={4}> - <ElText>{t(msg => msg.shared.merge.mergeBy)}</ElText> - <ElSelect - modelValue={query.mergeMethod} - onChange={v => query.mergeMethod = v ?? undefined} - placeholder={t(msg => msg.shared.merge.mergeMethod.notMerge)} - popperOptions={{ placement: 'top' }} - style={{ width: '90px' }} - > - <ElOption value='' label={t(msg => msg.shared.merge.mergeMethod.notMerge)} /> - {(['domain', 'cate', 'group'] satisfies timer.stat.MergeMethod[]).map(method => ( - <ElOption value={method} label={t(msg => msg.shared.merge.mergeMethod[method])} /> - ))} - </ElSelect> - </Flex> - <DurationSelect - reverse - modelValue={[query.duration, query.durationNum]} - onChange={([duration, durationNum]) => { - query.duration = duration - query.durationNum = durationNum - }} - /> - <ElSelect - modelValue={query.dimension} - onChange={v => query.dimension = v} - popperOptions={{ placement: 'top' }} - style={{ width: '120px' }} - > - {ALL_DIMENSIONS.map(item => <ElOption value={item} label={t(msg => msg.item[item])} />)} - </ElSelect> - </Flex> - </Flex > + <Flex justify="space-between" marginBottom={2} marginInline={1}> + <Menu /> + <Transition name="el-fade-in" mode="out-in"> + {menu.value === 'limit' ? <LimitToolbar /> : <DataToolbar />} + </Transition> + </Flex> ) }) diff --git a/src/pages/popup/components/Header/DarkSwitch.tsx b/src/pages/popup/components/Header/DarkSwitch.tsx index ba9a26733..b0491a580 100644 --- a/src/pages/popup/components/Header/DarkSwitch.tsx +++ b/src/pages/popup/components/Header/DarkSwitch.tsx @@ -1,5 +1,5 @@ -import Flex from "@pages/components/Flex" import { usePopupContext } from "@popup/context" +import Flex from "@pages/components/Flex" import { ElIcon } from "element-plus" import { defineComponent } from "vue" diff --git a/src/pages/popup/components/Header/Donation.tsx b/src/pages/popup/components/Header/Donation.tsx new file mode 100644 index 000000000..796b481be --- /dev/null +++ b/src/pages/popup/components/Header/Donation.tsx @@ -0,0 +1,25 @@ +import { createTab } from '@api/chrome/tab' +import { locale } from '@i18n' +import Flex from '@pages/components/Flex' +import { Coffee } from '@pages/icons' +import { BUY_ME_A_COFFEE_PAGE, DONATION_PAGE } from '@util/constant/url' +import { ElIcon, ElTooltip } from 'element-plus' +import { FunctionalComponent } from 'vue' + +const Donation: FunctionalComponent<{}> = () => { + const [content, url] = locale === 'zh_CN' + ? ['请他喝杯咖啡~', DONATION_PAGE] + : ['Buy me a coffee', BUY_ME_A_COFFEE_PAGE] + + return ( + <ElTooltip content={content} placement="bottom"> + <Flex onClick={() => createTab(url)} cursor='pointer'> + <ElIcon size="large" color="var(--el-text-color-primary)"> + <Coffee /> + </ElIcon> + </Flex> + </ElTooltip> + ) +} + +export default Donation \ No newline at end of file diff --git a/src/pages/popup/components/Header/Extra.tsx b/src/pages/popup/components/Header/Extra.tsx deleted file mode 100644 index 20957c6fb..000000000 --- a/src/pages/popup/components/Header/Extra.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { createTab } from "@api/chrome/tab" -import { getLatestVersion } from "@api/version" -import { Download } from "@element-plus/icons-vue" -import { useRequest } from "@hooks/useRequest" -import { t } from "@popup/locale" -import metaService from "@service/meta-service" -import packageInfo from "@src/package" -import { IS_FIREFOX, IS_FROM_STORE } from "@util/constant/environment" -import { REVIEW_PAGE, UPDATE_PAGE } from "@util/constant/url" -import { ElLink, ElPopover } from "element-plus" -import { defineComponent } from "vue" - -const HeartIcon = ( - <svg viewBox="0 0 1024 1024"> - <path - fill="currentColor" - d="M1000 248Q976.992 192 933.984 148.992 849.984 64 732.992 64q-64 0-121.504 28T512 171.008q-42.016-51.008-99.488-79.008T291.008 64Q174.016 64 90.016 150.016 47.008 193.024 24 249.024-0.992 308.032 0 371.04q0.992 68.992 28.992 130.496t79.008 104.512q4.992 4 8.992 8 14.016 12 112.992 102.016 208 191.008 256.992 235.008 11.008 8.992 24.992 8.992t24.992-8.992q32.992-30.016 180.992-164.992 158.016-144 196-179.008 52-43.008 80.992-104.992t28.992-132q0-64-24-122.016z"> - </path> - </svg> -) - -const computeUpdateText = (version: string) => { - return IS_FIREFOX - ? t(msg => msg.header.updateVersionInfo4Firefox, { version }) - : t(msg => msg.header.updateVersionInfo, { version }) -} - -const Extra = defineComponent(() => { - const { data: latestVersion } = useRequest(getLatestVersion) - const { data: rateVisible } = useRequest(() => metaService.recommendRate()) - - const handleRateClick = async () => { - await metaService.saveFlag("rateOpen") - createTab(REVIEW_PAGE) - } - - const handleUpgradeClick = () => { - if (IS_FIREFOX) return - createTab(UPDATE_PAGE) - } - - return () => { - if (latestVersion.value && packageInfo.version !== latestVersion.value && IS_FROM_STORE) { - return ( - <ElPopover - content={computeUpdateText(latestVersion.value)} - effect="dark" - width="auto" - v-slots={{ - reference: () => ( - <ElLink - type="success" - underline={IS_FIREFOX ? "never" : "hover"} - icon={Download} - onClick={handleUpgradeClick} - > - {t(msg => msg.header.updateVersion)} - </ElLink> - ) - }} - />) - } else if (rateVisible.value) { - return ( - <ElLink - type="danger" - underline="never" - onClick={handleRateClick} - style={{ gap: '3px' }} - icon={HeartIcon} - > - {t(msg => msg.header.rate)} - </ElLink> - ) - } - } -}) - -export default Extra \ No newline at end of file diff --git a/src/pages/popup/components/Header/Github.tsx b/src/pages/popup/components/Header/Github.tsx deleted file mode 100644 index 819bf31e3..000000000 --- a/src/pages/popup/components/Header/Github.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { createTab } from "@api/chrome/tab" -import Flex from "@pages/components/Flex" -import { SOURCE_CODE_PAGE } from "@util/constant/url" -import { ElIcon } from "element-plus" -import { defineComponent } from "vue" - -const Github = defineComponent(() => { - const handleClick = () => createTab({ url: SOURCE_CODE_PAGE }) - - return () => ( - <Flex onClick={handleClick}> - <ElIcon - size="large" - color="var(--el-text-color-primary)" - style={{ cursor: 'pointer' }} - > - <svg viewBox="0 0 24 24"> - <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" /> - </svg> - </ElIcon> - </Flex> - ) -}) - -export default Github \ No newline at end of file diff --git a/src/pages/popup/components/Header/LangSelect.tsx b/src/pages/popup/components/Header/LangSelect.tsx index 8521f5c26..38642f5cf 100644 --- a/src/pages/popup/components/Header/LangSelect.tsx +++ b/src/pages/popup/components/Header/LangSelect.tsx @@ -1,20 +1,19 @@ import { createTab } from "@api/chrome/tab" -import { useManualRequest } from "@hooks/useManualRequest" -import { useRequest } from "@hooks/useRequest" +import { sendMsg2Runtime } from '@api/sw/common' +import { getOption } from "@api/sw/option" +import { useManualRequest, useRequest } from "@hooks" import { ALL_LOCALES, handleLocaleOption, localeSameAsBrowser, t } from "@i18n" import optionMessages from "@i18n/message/app/option" import localeMessages from "@i18n/message/common/locale" import Flex from "@pages/components/Flex" import { usePopupContext } from "@popup/context" -import { t as tPopup } from "@popup/locale" -import optionHolder from "@service/components/option-holder" -import optionService from "@service/option-service" +import { t as tPopup } from '@popup/locale' import { CROWDIN_HOMEPAGE } from "@util/constant/url" import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElText } from "element-plus" import { defineComponent, type StyleValue } from "vue" // Keep the locale same as this browser first position -const SORTED_LOCALES: timer.Locale[] = ALL_LOCALES.sort((a, _b) => a === localeSameAsBrowser ? -1 : 0) +const SORTED_LOCALES: tt4b.Locale[] = ALL_LOCALES.sort((a, _b) => a === localeSameAsBrowser ? -1 : 0) const SELECTED_STYLES: StyleValue = { color: 'var(--el-color-primary)', @@ -23,15 +22,15 @@ const SELECTED_STYLES: StyleValue = { const LangSelect = defineComponent(() => { const { data: current } = useRequest(async () => { - const option = await optionHolder.get() + const option = await getOption() return option?.locale }) const { reload: reloadPopup } = usePopupContext() const { refresh: saveLocale } = useManualRequest( - async opt => { - await optionService.setLocale(opt) + async (opt: tt4b.option.LocaleOption) => { + await sendMsg2Runtime('option.set', { locale: opt }) handleLocaleOption(opt) }, { onSuccess: reloadPopup }, @@ -79,7 +78,7 @@ const LangSelect = defineComponent(() => { onClick={() => createTab(CROWDIN_HOMEPAGE)} divided > - {tPopup(msg => msg.menu.helpUs)} + {tPopup(msg => msg.base.helpUs)} </ElDropdownItem> </ElDropdownMenu> ) diff --git a/src/pages/popup/components/Header/Logo.tsx b/src/pages/popup/components/Header/Logo.tsx index f158a30a1..56e46377b 100644 --- a/src/pages/popup/components/Header/Logo.tsx +++ b/src/pages/popup/components/Header/Logo.tsx @@ -1,13 +1,15 @@ +import packageInfo from "@/package" +import { getIconUrl } from '@api/chrome/runtime' import Flex from "@pages/components/Flex" -import { t } from "@popup/locale" -import packageInfo from "@src/package" +import Img from '@pages/components/Img' +import { t } from '@popup/locale' import { ElText } from "element-plus" import type { FunctionalComponent } from "vue" const Logo: FunctionalComponent = () => ( <Flex height={30} gap={10}> <Flex gap={10} height="100%" align="center"> - <img src="/static/images/icon.png" style={{ height: '100%' }} /> + <Img src={getIconUrl()} style={{ height: '100%' }} /> <ElText size="large" tag="b" style={{ color: 'var(--el-text-color-primary)' }}> {t(msg => msg.meta.name)} </ElText> diff --git a/src/pages/popup/components/Header/MoreInfo.tsx b/src/pages/popup/components/Header/MoreInfo.tsx new file mode 100644 index 000000000..7bacaa96d --- /dev/null +++ b/src/pages/popup/components/Header/MoreInfo.tsx @@ -0,0 +1,71 @@ +import { createTab } from "@api/chrome/tab" +import { Collection, MoreFilled } from '@element-plus/icons-vue' +import Flex from '@pages/components/Flex' +import { Discord, GitHub, Heart } from '@pages/icons' +import { rateClicked } from '@pages/util/rate' +import { getColor, type ColorVariant } from '@pages/util/style' +import { t } from '@popup/locale' +import { CHANGE_LOG_PAGE, REVIEW_PAGE, SOURCE_CODE_PAGE } from "@util/constant/url" +import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon } from "element-plus" +import { createStringUnionGuard } from 'typescript-guard' +import { defineComponent, type FunctionalComponent, type StyleValue } from "vue" +import { type JSX } from 'vue/jsx-runtime' + +type Command = 'github' | 'changelog' | 'rate' | 'discord' + +const isCommand = createStringUnionGuard<Command>('github', 'changelog', 'rate', 'discord') + +type ItemLinkProps = { + icon: JSX.Element + text: string + iconColor?: ColorVariant +} +const ItemLink: FunctionalComponent<ItemLinkProps> = ({ icon, text, iconColor }) => ( + <Flex gap={2} align='center'> + <ElIcon color={iconColor ? getColor(iconColor) : undefined}>{icon}</ElIcon> + {text} + </Flex> +) + +const HANDLERS: Record<Command, NoArgCallback> = { + github: () => createTab(SOURCE_CODE_PAGE), + changelog: () => createTab(CHANGE_LOG_PAGE), + rate: () => { + rateClicked() + createTab(REVIEW_PAGE) + }, + discord: () => createTab('https://discord.gg/yXCngD8pKS'), +} + +const MoreInfo = defineComponent<{}>(() => { + + return () => ( + <ElDropdown + size='small' + trigger='click' + onCommand={val => isCommand(val) && HANDLERS[val]()} + style={{ cursor: 'pointer' } satisfies StyleValue} + v-slots={{ + default: () => <ElIcon><MoreFilled /></ElIcon>, + dropdown: () => ( + <ElDropdownMenu> + <ElDropdownItem command={'github' satisfies Command}> + <ItemLink icon={<GitHub />} text={t(msg => msg.base.sourceCode)} /> + </ElDropdownItem> + <ElDropdownItem command={'changelog' satisfies Command}> + <ItemLink icon={<Collection />} text={t(msg => msg.base.changeLog)} /> + </ElDropdownItem> + <ElDropdownItem command={'discord' satisfies Command} divided> + <ItemLink icon={<Discord />} text={t(msg => msg.header.discord)} /> + </ElDropdownItem> + <ElDropdownItem command={'rate' satisfies Command}> + <ItemLink icon={<Heart />} text={t(msg => msg.header.rating)} iconColor="danger" /> + </ElDropdownItem> + </ElDropdownMenu> + ) + }}> + </ElDropdown> + ) +}) + +export default MoreInfo \ No newline at end of file diff --git a/src/pages/popup/components/Header/Option.tsx b/src/pages/popup/components/Header/Option.tsx index 835087c73..53d97f53f 100644 --- a/src/pages/popup/components/Header/Option.tsx +++ b/src/pages/popup/components/Header/Option.tsx @@ -1,25 +1,94 @@ -import { createTab } from "@api/chrome/tab" -import { OPTION_ROUTE } from "@app/router/constants" -import Flex from "@pages/components/Flex" -import { getAppPageUrl } from "@util/constant/url" -import { ElIcon } from "element-plus" -import { defineComponent } from "vue" +import { APP_LIMIT_ROUTE } from '@/shared/route' +import { css } from '@emotion/css' +import { useSwitch } from '@hooks' +import Flex from '@pages/components/Flex' +import { useMenu, useOption } from '@popup/context' +import { t, tN } from '@popup/locale' +import { getAppPageUrl } from '@util/constant/url' +import { ElCheckbox, ElIcon, ElInputNumber, ElLink, ElPopover, ElText, useNamespace } from "element-plus" +import { computed, defineComponent, type StyleValue } from "vue" + +const reference = () => ( + <ElIcon size="large" style={{ cursor: 'pointer' } satisfies StyleValue}> + <svg viewBox="0 0 1024 1024"> + <path d="M800 32H224a192 192 0 0 0-192 192v576a192 192 0 0 0 192 192h576a192 192 0 0 0 192-192V224a192 192 0 0 0-192-192zM189.76 367.04A128 128 0 0 1 436.8 320h315.2a48 48 0 0 1 0 96h-315.84a128 128 0 0 1-246.08-48.96z m516.16 417.92A128 128 0 0 1 587.2 704H272a48 48 0 0 1 0-96h315.84a128 128 0 1 1 118.08 176.96z" /> + </svg> + </ElIcon> +) const Option = defineComponent(() => { - const handleClick = () => createTab(getAppPageUrl(OPTION_ROUTE, { i: 'popup' })) - - return () => ( - <Flex onClick={handleClick}> - <ElIcon - size="large" - color="var(--el-text-color-primary)" - style={{ cursor: 'pointer' }} - > - <svg viewBox="0 0 1024 1024"> - <path d="M800 32H224a192 192 0 0 0-192 192v576a192 192 0 0 0 192 192h576a192 192 0 0 0 192-192V224a192 192 0 0 0-192-192zM189.76 367.04A128 128 0 0 1 436.8 320h315.2a48 48 0 0 1 0 96h-315.84a128 128 0 0 1-246.08-48.96z m516.16 417.92A128 128 0 0 1 587.2 704H272a48 48 0 0 1 0-96h315.84a128 128 0 1 1 118.08 176.96z" /> - </svg> - </ElIcon> - </Flex> + const option = useOption() + const { menu } = useMenu() + const isPercentage = computed(() => menu.value === 'percentage') + + const toggleName = () => { + option.showName = !option.showName + close() + } + const toggleDonutChart = () => { + option.donutChart = !option.donutChart + close() + } + const handleSiteChange = (v: number | undefined) => { + if (!v) return + option.topN = v + close() + } + + const [visible, , close] = useSwitch() + + const inputNs = useNamespace('input') + + const topNInput = css` + width: 70px; + + & .${inputNs.e('wrapper')} { + padding-inline-start: 5px !important; + } + ` + + return () => menu.value === 'limit' ? ( + <ElLink + href={getAppPageUrl(APP_LIMIT_ROUTE)} + target='_blank' + style={{ '--el-link-text-color': 'unset', '--el-link-hover-text-color': 'unset' }} + > + {reference()} + </ElLink> + ) : ( + <ElPopover + visible={visible.value} + placement='auto-end' + onUpdate:visible={v => visible.value = v} + trigger='click' + popperStyle={{ width: 'fit-content' }} + v-slots={{ reference }} + > + <Flex column gap={5}> + <Flex gap={4} align='center' cursor="pointer" onClick={toggleName}> + {/* Not to handle change event, bcz processed by the parent element already */} + <ElCheckbox size='small' modelValue={option.showName} /> + <ElText size='small'>{t(msg => msg.header.showSiteName)}</ElText> + </Flex> + <Flex v-show={isPercentage.value} gap={4} align='center' cursor="pointer" onClick={toggleDonutChart}> + <ElCheckbox size='small' modelValue={!!option.donutChart} /> + <ElText size='small'>{t(msg => msg.header.donutChart)}</ElText> + </Flex> + <Flex v-show={isPercentage.value}> + <ElText size='small'> + {tN(msg => msg.header.showTopN, { + n: <ElInputNumber + class={topNInput} + size="small" controlsPosition='right' + step={5} min={5} max={100} + modelValue={option.topN} + onChange={handleSiteChange} + /> + })} + </ElText> + </Flex> + </Flex> + </ElPopover> ) }) diff --git a/src/pages/popup/components/Header/index.tsx b/src/pages/popup/components/Header/index.tsx index c4b381267..49cc14f46 100644 --- a/src/pages/popup/components/Header/index.tsx +++ b/src/pages/popup/components/Header/index.tsx @@ -1,53 +1,53 @@ -import { createTab } from "@api/chrome/tab" +import { createTab, listTabs, updateTab } from '@api/chrome/tab' import { View } from "@element-plus/icons-vue" import Flex from "@pages/components/Flex" -import LangSelect from "@popup/components/Header/LangSelect" -import { t } from "@popup/locale" +import { t } from '@popup/locale' import { IS_ANDROID } from "@util/constant/environment" import { getAppPageUrl } from "@util/constant/url" import { ElLink } from "element-plus" -import { defineComponent } from "vue" +import type { FunctionalComponent } from "vue" import DarkSwitch from "./DarkSwitch" -import Extra from "./Extra" -import Github from "./Github" +import Donation from './Donation' +import LangSelect from "./LangSelect" import Logo from "./Logo" +import MoreInfo from './MoreInfo' import Option from "./Option" -const Header = defineComponent(() => { - - const handleAllFuncClick = () => { - const appPageUrl = getAppPageUrl() - if (IS_ANDROID) { - location.replace(appPageUrl) - } else { - createTab(appPageUrl) +const openAppPage = async () => { + const appPageUrl = getAppPageUrl() + if (IS_ANDROID) return location.replace(appPageUrl) + try { + const tabs = await listTabs({ currentWindow: true }) + // If there are non-highlighted app page tab, jump to it + const tabId2Jump = tabs.find(tab => !!tab.url?.startsWith(appPageUrl) && !tab.highlighted)?.id + if (tabId2Jump) { + await updateTab(tabId2Jump, { highlighted: true, active: true }) + return } + } catch (ignored) { } + // fall back to open new tab + await createTab(appPageUrl) +} - return () => ( - <Flex justify="space-between" style={{ padding: '0 10px', color: 'var(--el-text-color-primary)' }}> - <Logo /> - <Flex gap={10}> - <Flex gap={10}> - <Extra /> - <ElLink - underline="never" - onClick={handleAllFuncClick} - icon={View} - style={{ gap: '3px' }} - > - {t(msg => msg.base.allFunction)} - </ElLink> - </Flex> - <Flex align="center" gap={8} style={{ fontSize: '30px' }}> - <LangSelect /> - <DarkSwitch /> - <Option /> - <Github /> - </Flex> +const Header: FunctionalComponent<{}> = () => ( + <Flex justify="space-between" padding='0 10px' color='text-primary'> + <Logo /> + <Flex gap={10}> + <ElLink underline="never" onClick={openAppPage} icon={View} style={{ gap: '3px' }}> + {t(msg => msg.base.allFunction)} + </ElLink> + <Flex align="center" gap={8} fontSize={30}> + <LangSelect /> + <DarkSwitch /> + <Option /> + <Donation /> + <MoreInfo /> </Flex> - </Flex > - ) -}) + </Flex> + </Flex> +) + +Header.displayName = "PopupHeader" export default Header \ No newline at end of file diff --git a/src/pages/popup/components/Limit/Content/Chart.tsx b/src/pages/popup/components/Limit/Content/Chart.tsx new file mode 100644 index 000000000..3d562d580 --- /dev/null +++ b/src/pages/popup/components/Limit/Content/Chart.tsx @@ -0,0 +1,10 @@ +import { useEcharts } from '@hooks' +import { defineComponent, toRef } from 'vue' +import Wrapper from './Wrapper' + +const Chart = defineComponent<{ item: tt4b.limit.Item }>(props => { + const { elRef } = useEcharts(Wrapper, toRef(props, 'item')) + return () => <div ref={elRef} style={{ width: '100%', flex: 1 }} /> +}, { props: ['item'] }) + +export default Chart \ No newline at end of file diff --git a/src/pages/popup/components/Limit/Content/Wrapper.ts b/src/pages/popup/components/Limit/Content/Wrapper.ts new file mode 100644 index 000000000..d07199634 --- /dev/null +++ b/src/pages/popup/components/Limit/Content/Wrapper.ts @@ -0,0 +1,324 @@ +import { EchartsWrapper } from '@hooks' +import { getColor, getInfoColor, getRegularTextColor, getSecondaryTextColor } from '@pages/util/style' +import { t } from '@popup/locale' +import { clamp } from '@util/number' +import { formatPeriodCommon, MILL_PER_SECOND } from '@util/time' +import type { ComposeOption, GaugeSeriesOption, LegendComponentOption, PieSeriesOption, TitleComponentOption, TooltipComponentOption } from 'echarts' + +type EcOption = ComposeOption< + | LegendComponentOption + | TitleComponentOption + | GaugeSeriesOption + | PieSeriesOption + | TooltipComponentOption +> + +const MINUTES_PER_DAY = 24 * 60 +const GAUGE_BG_COLOR = 'rgba(0, 0, 0, 0.12)' + +const timeGaugeColor = () => getColor('primary') ?? '#409eff' +const visitGaugeColor = () => getColor('success') ?? '#67c23a' +const clockPointerColor = () => getColor('warning') ?? '#e6a23c' +const blockedPeriodColor = () => getColor('danger') ?? '#f56c6c' + +type LimitDimension = 'time' | 'visit' + +type ChartPart = { + titles: TitleComponentOption[] + series: (PieSeriesOption | GaugeSeriesOption)[] +} + +const createTitle = (text: string, left: string): TitleComponentOption => { + const textPrimary = getRegularTextColor() + return { + text, + left, + top: '13%', + textAlign: 'center', + width: 100, + textStyle: { color: textPrimary, fontSize: 16, fontWeight: 'bold' }, + } +} + +const createInfo = (text: string, left: string): TitleComponentOption => { + const textSecondary = getSecondaryTextColor() + return { + text, + left, + bottom: '20%', + textAlign: 'center', + subtext: '', + padding: 0, + itemGap: 0, + textStyle: { color: textSecondary, fontSize: 14, overflow: 'break', width: 140 }, + } +} + +type GaugeOptions = { + name: LimitDimension + center: string + usage: { + used: number + limit: number + } + color: string +} + +const createGauge = (options: GaugeOptions): GaugeSeriesOption => { + const { name, center, usage: { used, limit }, color } = options + + const percent = limit ? clamp((used * 100) / limit, 0, 100) : 40 + const percentText = `${percent.toFixed(1)}%` + const usedText = name === 'time' + ? formatPeriodCommon(used, true) + : t(msg => msg.shared.limit.visits, { n: used }) + const progressText = name === 'time' + ? `${usedText}/${formatPeriodCommon(limit, true)}` + : t(msg => msg.shared.limit.visits, { n: `${used}/${limit}` }) + + return { + name, + type: 'gauge', + radius: '45%', + center: [center, '50%'], + startAngle: 210, + endAngle: -30, + min: 0, + max: 100, + splitLine: { show: false }, + axisTick: { show: false }, + axisLabel: { show: false }, + pointer: { show: false }, + detail: { + show: true, + offsetCenter: [0, 0], + fontSize: 13, + color: getSecondaryTextColor(), + width: 100, + overflow: 'break', + formatter: () => limit ? percentText : usedText, + }, + tooltip: { + formatter: () => `${percentText}<br/>${progressText}`, + }, + silent: false, + axisLine: { lineStyle: { width: 8, color: [[1, GAUGE_BG_COLOR]] } }, + progress: { show: limit > 0, width: 8, itemStyle: { color, borderCap: 'round' } }, + data: [{ value: percent }], + } +} + +class Wrapper extends EchartsWrapper<tt4b.limit.Item, EcOption> { + private dimension: LimitDimension = 'time' + protected replaceSeries = true + + init(container: HTMLDivElement): void { + super.init(container) + this.instance?.on('legendselectchanged', params => { + const name = typeof params === 'object' && params && 'name' in params + ? String((params as { name?: string }).name ?? '') + : '' + const next = name === 'visit' ? 'visit' : 'time' + this.switchDimension(next) + }) + } + + async render(biz: tt4b.limit.Item) { + const firstRender = !this.lastBizOption + if (firstRender) { + const hasTimeLimit = !!biz.time || !!biz.weekly + const hasVisitLimit = !!biz.count || !!biz.weeklyCount + if (!hasTimeLimit && hasVisitLimit) this.dimension = 'visit' + } + await super.render(biz) + } + + private switchDimension(next: LimitDimension) { + if (this.dimension === next) return + this.dimension = next + this.lastBizOption && void this.render(this.lastBizOption) + } + + private builtLimitPart(time: [number, number | undefined], visit: [number, number | undefined], leftPos: string): ChartPart { + const noLimitText = t(msg => msg.content.limit.noLimit) + + const [timeUsed, timeLimit] = time + const timeMax = timeLimit ? timeLimit * MILL_PER_SECOND : 0 + const timeLabel = timeMax + ? t(msg => msg.content.limit.remain, { remaining: formatPeriodCommon(Math.max(0, timeMax - timeUsed), true) }) + : noLimitText + const timeOpts: GaugeOptions = { + name: 'time', center: leftPos, + usage: { limit: timeMax, used: timeUsed }, + color: timeGaugeColor(), + } + + const [visitUsed, visitLimit] = visit + const visitLabel = visitLimit + ? t(msg => msg.shared.limit.visits, { n: `${visitUsed}/${visitLimit}` }) + : noLimitText + const visitOpts: GaugeOptions = { + name: 'visit', center: leftPos, + usage: { limit: visitLimit ?? 0, used: visitUsed ?? 0 }, + color: visitGaugeColor(), + } + + return { + titles: [ + createInfo(this.dimension === 'visit' ? visitLabel : timeLabel, leftPos), + ], + series: [createGauge(timeOpts), createGauge(visitOpts)], + } + } + + private buildDailyPart(biz: tt4b.limit.Item, leftPos: string): ChartPart { + const { time, waste, visit, count } = biz + const basePart = this.builtLimitPart([waste, time], [visit, count], leftPos) + basePart.titles.push(createTitle(t(msg => msg.shared.limit.daily), leftPos)) + return basePart + } + + private buildWeeklyPart(biz: tt4b.limit.Item, rightPos: string): ChartPart { + const { weekly = 0, weeklyWaste, weeklyVisit: weeklyVisitCount, weeklyCount = 0 } = biz + const basePart = this.builtLimitPart([weeklyWaste, weekly], [weeklyVisitCount, weeklyCount], rightPos) + basePart.titles.push(createTitle(t(msg => msg.shared.limit.weekly), rightPos)) + return basePart + } + + private buildPeriodPart(periods: tt4b.limit.Period[] | undefined, leftPos: string): ChartPart { + if (!periods?.length) return { titles: [], series: [] } + const now = new Date() + const nowMinutes = now.getHours() * 60 + now.getMinutes() + + const blocked = [...periods] + .map(([s, e]) => ({ start: clamp(s, 0, MINUTES_PER_DAY), end: clamp(e, 0, MINUTES_PER_DAY) })) + .filter(({ start, end }) => start < end) + .sort((a, b) => a.start - b.start) + + const fmt = (m: number) => + `${String(Math.floor(m / 60)).padStart(2, '0')}:${String(m % 60).padStart(2, '0')}` + + // Gauge axisLine color segments (cumulative ratios 0→1) + const gaugeColors: [number, string][] = [] + let last = 0 + for (const { start, end } of blocked) { + if (start > last) gaugeColors.push([start / MINUTES_PER_DAY, GAUGE_BG_COLOR]) + gaugeColors.push([end / MINUTES_PER_DAY, blockedPeriodColor()]) + last = end + } + if (last < MINUTES_PER_DAY) gaugeColors.push([1, GAUGE_BG_COLOR]) + + // Transparent pie as tooltip event layer (invisible, same ring area) + type PieItem = { value: number; name: string; itemStyle: { color: string } } + const firstStart = blocked[0]?.start ?? 0 + const lastEnd = blocked[blocked.length - 1]?.end ?? 0 + const startAngle = 90 - (lastEnd / MINUTES_PER_DAY) * 360 + const pieData: PieItem[] = [ + { value: MINUTES_PER_DAY - lastEnd + firstStart, name: '', itemStyle: { color: 'rgba(0,0,0,0)' } }, + ] + for (let i = 0; i < blocked.length; i++) { + const item = blocked[i] + if (!item) continue + const { start, end } = item + pieData.push({ value: end - start, name: `${fmt(start)} - ${fmt(end)}`, itemStyle: { color: 'rgba(0,0,0,0)' } }) + const nextStart = blocked[i + 1]?.start + if (nextStart !== undefined && nextStart > end) { + pieData.push({ value: nextStart - end, name: '', itemStyle: { color: 'rgba(0,0,0,0)' } }) + } + } + + const hitPeriod = blocked.find(({ start, end }) => nowMinutes >= start && nowMinutes < end) + const infoText = hitPeriod + ? `${fmt(hitPeriod.start)} - ${fmt(hitPeriod.end)}` + : t(msg => msg.content.limit.notHit) + + return { + titles: [ + createTitle(t(msg => msg.shared.limit.period), leftPos), + createInfo(infoText, leftPos), + ], + series: [ + { + type: 'gauge', + center: [leftPos, '50%'], + radius: '45%', + startAngle: 90, + endAngle: -270, + min: 0, + max: MINUTES_PER_DAY, + splitNumber: 4, + axisTick: { + splitNumber: 6, + length: 3, + lineStyle: { color: getSecondaryTextColor(), width: 1 }, + }, + axisLabel: { + distance: 10, + fontSize: 11, + color: getSecondaryTextColor(), + formatter: (val: number) => val === MINUTES_PER_DAY ? '' : String(val / 60), + }, + axisLine: { lineStyle: { width: 8, color: gaugeColors } }, + pointer: { + length: '50%', + width: 2, + itemStyle: { color: clockPointerColor() }, + }, + detail: { show: false }, + data: [{ value: nowMinutes }], + silent: true, + } as GaugeSeriesOption, + { + type: 'pie', + center: [leftPos, '50%'], + radius: ['37%', '45%'], + startAngle, + label: { show: false }, + emphasis: { scale: false }, + itemStyle: { borderWidth: 0 }, + tooltip: { formatter: ({ name }) => name }, + data: pieData.filter(d => d.value > 0), + } as PieSeriesOption, + ], + } + } + + protected generateOption(biz: tt4b.limit.Item): Awaitable<EcOption> { + const hasPeriods = !!biz.periods?.length + const leftPos = hasPeriods ? '17.5%' : '32%' + const centerPos = hasPeriods ? '50%' : undefined + const rightPos = hasPeriods ? '82.5%' : '68%' + + const period = this.buildPeriodPart(biz.periods, leftPos) + const daily = this.buildDailyPart(biz, centerPos ?? leftPos) + const weekly = this.buildWeeklyPart(biz, rightPos) + + const inactiveColor = getInfoColor() + + return { + title: [...period.titles, ...daily.titles, ...weekly.titles], + tooltip: { show: true }, + legend: { + orient: 'horizontal', + bottom: '2%', + left: 'center', + icon: 'roundRect', + itemWidth: 20, + itemHeight: 12, + itemGap: 16, + selectedMode: 'single', + inactiveColor, + formatter: () => '', + tooltip: { show: false }, + selected: { time: this.dimension === 'time', visit: this.dimension === 'visit' }, + data: [ + { name: 'time' satisfies LimitDimension, itemStyle: { color: timeGaugeColor() } }, + { name: 'visit' satisfies LimitDimension, itemStyle: { color: visitGaugeColor() } }, + ], + }, + series: [...period.series, ...daily.series, ...weekly.series], + } + } +} + +export default Wrapper \ No newline at end of file diff --git a/src/pages/popup/components/Limit/Content/index.tsx b/src/pages/popup/components/Limit/Content/index.tsx new file mode 100644 index 000000000..3667d82e0 --- /dev/null +++ b/src/pages/popup/components/Limit/Content/index.tsx @@ -0,0 +1,24 @@ +import Flex from '@pages/components/Flex' +import { useLimitSummary } from '@popup/context' +import { t } from '@popup/locale' +import { ElResult } from 'element-plus' +import { computed, defineComponent, type FunctionalComponent } from 'vue' +import Chart from './Chart' + +const Empty: FunctionalComponent<{}> = () => ( + <Flex column align="center" justify="center" height='100%' gap={20}> + <ElResult + icon='info' + title={t(msg => msg.content.limit.noData)} + /> + </Flex> +) + +const Content = defineComponent<{}>(() => { + const { summary, selected } = useLimitSummary() + const item = computed(() => summary.value?.items.find(i => i.id === selected.value)) + + return () => item.value ? <Chart item={item.value} /> : <Empty /> +}) + +export default Content \ No newline at end of file diff --git a/src/pages/popup/components/Limit/Summary.tsx b/src/pages/popup/components/Limit/Summary.tsx new file mode 100644 index 000000000..9c3abad3c --- /dev/null +++ b/src/pages/popup/components/Limit/Summary.tsx @@ -0,0 +1,54 @@ +import Flex from '@pages/components/Flex' +import Img from '@pages/components/Img' +import { useLimitSummary } from '@popup/context' +import { ElText } from 'element-plus' +import { computed, defineComponent, StyleValue } from 'vue' + +const TITLE_SIZE = 24 + +const Summary = defineComponent<{}>(() => { + const { summary } = useLimitSummary() + const site = computed(() => { + const site = summary.value?.site + if (!site) return '' + const { alias, host } = site + return alias ? `${alias} (${host})` : host + }) + + const withoutSearch = computed(() => { + const original = summary.value?.url + if (!original) return undefined + try { + const u = new URL(original) + return u.origin + u.pathname + } catch { + return original + } + }) + + return () => ( + <Flex + column justify='center' align='center' gap={10} + style={{ marginTop: '20px', marginBottom: '20px' }} + > + <Flex align='center' justify='center' gap={12}> + <Img src={summary.value?.site.iconUrl} size={TITLE_SIZE} /> + <ElText style={{ fontSize: `${TITLE_SIZE}px` } satisfies StyleValue} > + {site.value} + </ElText> + </Flex> + <ElText + size='large' + style={{ + wordBreak: 'break-all', + textAlign: 'center', + lineHeight: '1.4em', + } satisfies StyleValue} + > + {withoutSearch.value} + </ElText> + </Flex> + ) +}) + +export default Summary \ No newline at end of file diff --git a/src/pages/popup/components/Limit/index.tsx b/src/pages/popup/components/Limit/index.tsx new file mode 100644 index 000000000..7949e4f2b --- /dev/null +++ b/src/pages/popup/components/Limit/index.tsx @@ -0,0 +1,18 @@ +import Flex from '@pages/components/Flex' +import { ElCard } from 'element-plus' +import type { FunctionalComponent, StyleValue } from 'vue' +import Content from './Content' +import Summary from './Summary' + +const Limit: FunctionalComponent<{}> = () => ( + <ElCard shadow='never' style={{ width: '100%' } satisfies StyleValue}> + <Flex column width='100%' height='100%'> + <Summary /> + <Content /> + </Flex> + </ElCard> +) + +Limit.displayName = 'Limit' + +export default Limit diff --git a/src/pages/popup/components/Percentage/Cate/Wrapper.ts b/src/pages/popup/components/Percentage/Cate/Wrapper.ts index c683e3dae..989ca941c 100644 --- a/src/pages/popup/components/Percentage/Cate/Wrapper.ts +++ b/src/pages/popup/components/Percentage/Cate/Wrapper.ts @@ -1,22 +1,18 @@ -import { EchartsWrapper } from "@hooks/useEcharts" +import { listAllCategories } from "@api/sw/cate" +import { EchartsWrapper } from '@hooks' import { getInfoColor, getPrimaryTextColor } from "@pages/util/style" -import { t } from "@popup/locale" -import cateService from "@service/cate-service" -import { mergeDate } from "@service/stat-service/merge/date" +import { t } from '@popup/locale' import { toMap } from "@util/array" import { CATE_NOT_SET_ID } from "@util/site" import { isCate } from "@util/stat" -import { type PieSeriesOption } from "echarts/charts" +import type { + ComposeOption, LegendComponentOption, PieSeriesOption, TitleComponentOption, ToolboxComponentOption, + TooltipComponentOption, +} from "echarts" +import type { ECElementEvent } from "echarts/core" import { - type LegendComponentOption, - type TitleComponentOption, - type ToolboxComponentOption, - type TooltipComponentOption, -} from "echarts/components" -import { type ComposeOption, type ECElementEvent } from "echarts/core" -import { - formatTooltip, generateSiteSeriesOption, generateTitleOption, generateToolboxOption, handleClick, isOther, - type PieSeriesItemOption, + adaptDonutSeries, formatTooltip, generateSiteSeriesOption, generateTitleOption, generateToolbox, + handleClick, isOther, type PieSeriesItemOption, } from "../chart" import { type PercentageResult } from "../query" @@ -85,16 +81,16 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti if (!result) return {} - const { rows, query } = result + const { rows, query, donutChart } = result const { dimension } = query - const selected: timer.stat.Row | undefined = this.selectedCache + const selected: tt4b.stat.Row | undefined = this.selectedCache ? rows.filter(isCate).filter(r => r.cateKey === this.selectedCache)[0] : undefined const textColor = getPrimaryTextColor() const inactiveColor = getInfoColor() - const cates = await cateService.listAll() + const cates = await listAllCategories() const cateNameMap = toMap(cates, c => c.id, c => c.name) cateNameMap[CATE_NOT_SET_ID] = t(msg => msg.shared.cate.notSet) @@ -107,19 +103,19 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti textStyle: { color: textColor }, pageTextStyle: { color: textColor }, inactiveColor, - data: rows.filter(isCate).map(({ cateKey }) => ({ name: cateNameMap[cateKey] ?? `${cateKey}`, cateKey })), + data: rows.filter(isCate).map(({ cateKey }) => ({ name: String(cateNameMap[cateKey] ?? cateKey), cateKey })), } const series: PieSeriesOption[] = [{ type: "pie", center: selected ? ['15%', '28%'] : ['58%', '56%'], - radius: selected ? '30%' : '55%', selectedMode: 'single', + selectedOffset: 5, startAngle: 180, data: rows.filter(isCate).map(row => ({ value: row[dimension], row, selected: row.cateKey === selected?.cateKey, - name: cateNameMap[row.cateKey ?? ''], + name: String(cateNameMap[row.cateKey ?? ''] ?? ''), } satisfies PieSeriesItemOption)), emphasis: { itemStyle: { @@ -135,10 +131,11 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti position: selected ? 'inner' : 'outer', fontSize: selected ? 10 : undefined, }, + // not display as donut chart if selected + ...adaptDonutSeries(donutChart, selected ? '30%' : '55%', selected ? 0.3 : undefined), }] if (selected) { - let mergedRows = (selected?.mergedRows || []).sort((a, b) => (b[dimension] ?? 0) - (a[dimension] ?? 0)) - mergedRows = mergeDate(mergedRows) + let mergedRows = (selected.mergedRows ?? []).sort((a, b) => b[dimension] - a[dimension]) const siteSeries = generateSiteSeriesOption(mergedRows, result, { center: ['60%', '58%'], @@ -161,7 +158,7 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti series.push(siteSeries) } - const titleSuffix = this.selectedCache && this.selectedCache !== CATE_NOT_SET_ID ? cateNameMap[this.selectedCache] : undefined + const titleSuffix: string | undefined = this.selectedCache && this.selectedCache !== CATE_NOT_SET_ID ? cateNameMap[this.selectedCache] : undefined const option: EcOption = { title: generateTitleOption(result, titleSuffix), legend, @@ -170,7 +167,7 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti formatter: (params: any) => formatTooltip(result, params), }, series, - toolbox: generateToolboxOption(), + toolbox: generateToolbox(() => this.instance), } return option } diff --git a/src/pages/popup/components/Percentage/Cate/index.tsx b/src/pages/popup/components/Percentage/Cate/index.tsx index 0f3d59d56..b03a78dc5 100644 --- a/src/pages/popup/components/Percentage/Cate/index.tsx +++ b/src/pages/popup/components/Percentage/Cate/index.tsx @@ -1,6 +1,6 @@ -import { useEcharts } from "@hooks/useEcharts" import { usePopupContext } from "@popup/context" -import { defineComponent, toRef, watch } from "vue" +import { useEcharts } from '@hooks' +import { defineComponent, toRef } from "vue" import { type PercentageResult } from "../query" import Wrapper from "./Wrapper" @@ -11,8 +11,7 @@ type Props = { const Cate = defineComponent<Props>(props => { const { darkMode } = usePopupContext() const data = toRef(props, 'value') - const { elRef, refresh } = useEcharts(Wrapper, data) - watch(darkMode, refresh) + const { elRef } = useEcharts(Wrapper, data, { deps: darkMode }) return () => <div ref={elRef} style={{ width: '100%', height: '100%' }} /> }, { props: ['value'] }) diff --git a/src/pages/popup/components/Percentage/Site/Wrapper.ts b/src/pages/popup/components/Percentage/Site/Wrapper.ts index c7676efed..7a20a246c 100644 --- a/src/pages/popup/components/Percentage/Site/Wrapper.ts +++ b/src/pages/popup/components/Percentage/Site/Wrapper.ts @@ -1,16 +1,13 @@ -import { EchartsWrapper } from "@hooks/useEcharts" +import { EchartsWrapper } from '@hooks' import { getInfoColor, getPrimaryTextColor } from "@pages/util/style" -import { type PieSeriesOption } from "echarts/charts" -import { - type LegendComponentOption, - type TitleComponentOption, - type ToolboxComponentOption, - type TooltipComponentOption, -} from "echarts/components" -import { type ComposeOption, type ECElementEvent } from "echarts/core" +import type { + ComposeOption, LegendComponentOption, PieSeriesOption, TitleComponentOption, ToolboxComponentOption, + TooltipComponentOption, +} from "echarts" +import type { ECElementEvent } from "echarts/core" import type { TopLevelFormatterParams } from "echarts/types/dist/shared" import { - formatTooltip, generateSiteSeriesOption, generateTitleOption, generateToolboxOption, handleClick, + formatTooltip, generateSiteSeriesOption, generateTitleOption, generateToolbox, handleClick, type PieSeriesItemOption, } from "../chart" import { type PercentageResult } from "../query" @@ -26,7 +23,7 @@ type EcOption = ComposeOption< const maxWidth = 750 function calcPositionOfTooltip(container: HTMLElement, point: (number | string)[]) { - let p: number | string = point[0] + const p = point[0] ?? 0 const pN: number = typeof p === 'number' ? p : Number.parseFloat(p) const tooltip = container.children.item(1) as HTMLDivElement let tooltipWidth = 0 @@ -58,7 +55,7 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti }) } - protected generateOption(result: PercentageResult): EcOption | Promise<EcOption> { + protected generateOption(result: PercentageResult): Awaitable<EcOption> { this.resultCache = result if (!result) return {} @@ -92,7 +89,7 @@ export default class SiteWrapper extends EchartsWrapper<PercentageResult, EcOpti inactiveColor, }, series, - toolbox: generateToolboxOption(), + toolbox: generateToolbox(() => this.instance), } return options } diff --git a/src/pages/popup/components/Percentage/Site/index.tsx b/src/pages/popup/components/Percentage/Site/index.tsx index 7d8788416..5db032974 100644 --- a/src/pages/popup/components/Percentage/Site/index.tsx +++ b/src/pages/popup/components/Percentage/Site/index.tsx @@ -1,6 +1,6 @@ -import { useEcharts } from "@hooks/useEcharts" import { usePopupContext } from "@popup/context" -import { defineComponent, toRef, watch } from "vue" +import { useEcharts } from '@hooks' +import { defineComponent, toRef } from "vue" import { type PercentageResult } from "../query" import Wrapper from "./Wrapper" @@ -11,8 +11,7 @@ type Props = { const Site = defineComponent<Props>(props => { const { darkMode } = usePopupContext() const data = toRef(props, 'value') - const { elRef, refresh } = useEcharts(Wrapper, data) - watch(darkMode, refresh) + const { elRef } = useEcharts(Wrapper, data, { deps: darkMode }) return () => <div ref={elRef} style={{ width: '100%', height: '100%' }} /> }, { props: ['value'] }) diff --git a/src/pages/popup/components/Percentage/chart.ts b/src/pages/popup/components/Percentage/chart.ts index 672ce0dfe..d845451d5 100644 --- a/src/pages/popup/components/Percentage/chart.ts +++ b/src/pages/popup/components/Percentage/chart.ts @@ -1,16 +1,20 @@ +import { getIconUrl, getRuntimeName } from "@api/chrome/runtime" import { createTab } from "@api/chrome/tab" +import { generateQrCanvas } from "@pages/util/qrcode" import { getCssVariable, getInfoColor, getPrimaryTextColor, getSecondaryTextColor } from "@pages/util/style" import { calJumpUrl } from "@popup/common" -import { t } from "@popup/locale" +import { t } from '@popup/locale' import { sum, toMap } from "@util/array" import { IS_SAFARI } from "@util/constant/environment" +import { INSTALL_PAGE } from "@util/constant/url" import { isRtl } from "@util/document" import { generateSiteLabel } from "@util/site" import { getGroupName, isGroup, isSite } from "@util/stat" import { formatPeriodCommon, formatTime, parseTime } from "@util/time" -import { type PieSeriesOption } from "echarts/charts" -import { type TitleComponentOption, type ToolboxComponentOption } from "echarts/components" -import { type CallbackDataParams, type TopLevelFormatterParams } from "echarts/types/dist/shared" +import type { PieSeriesOption, TitleComponentOption, ToolboxComponentOption } from "echarts" +import type { ECharts } from "echarts/core" +import type { CallbackDataParams, TopLevelFormatterParams } from "echarts/types/dist/shared" +import { ElMessage } from "element-plus" import { type PercentageResult } from "./query" function combineDate(start: Date, end: Date, format: string): string { @@ -23,10 +27,7 @@ function combineDate(start: Date, end: Date, format: string): string { const sy = start.getFullYear() const ey = end.getFullYear() - if (sy !== ey) { - // Different years - return normalStr - } + if (sy !== ey) return normalStr // The same years const execRes = /({d}|{m})[^{}]*({d}|{m})/.exec(format) @@ -47,19 +48,19 @@ function formatDateStr(date: Date | [Date, Date?] | undefined, dataDate: [string const format = t(msg => msg.calendar.dateFormat) if (!date) { - date = dataDate?.map(parseTime) as [Date, Date] + const start = parseTime(dataDate[0]) + const end = parseTime(dataDate[1]) + date = start ? [start, end] : undefined } if (!date) return '' - if (!(date instanceof Array)) { - // Single day - return formatTime(date, format) - } + // Single day + if (!Array.isArray(date)) return formatTime(date, format) const [start, end] = date return end ? combineDate(start, end, format) : formatTime(start, format) } -function formatTotalStr(rows: timer.stat.Row[], type: timer.core.Dimension | undefined): string { +function formatTotalStr(rows: tt4b.stat.Row[], type: tt4b.core.Dimension | undefined): string { if (type === 'focus') { const total = sum(rows.map(r => r?.focus ?? 0)) const totalTime = formatPeriodCommon(total) @@ -73,59 +74,210 @@ function formatTotalStr(rows: timer.stat.Row[], type: timer.core.Dimension | und } function calculateSubTitleText(result: PercentageResult): string { - let { date, dataDate, rows, query: { dimension } = {} } = result + let { date, dataDate, rows, query: { dimension, duration } = {}, dateLength } = result const dateStr = dataDate ? formatDateStr(date, dataDate) : '' const totalStr = formatTotalStr(rows, dimension) - let parts = [totalStr, dateStr].filter(str => !!str) - isRtl() && (parts = parts.reverse()) - return parts.join(' @ ') + let firstLineParts = [totalStr, dateStr].filter(s => !!s) + isRtl() && (firstLineParts = firstLineParts.reverse()) + const firstLine = firstLineParts.join(' ') + + // Calculate average per day + let averageStr = '' + // Don't show averages for single-day durations (today/yesterday) + const isSingleDay = duration === 'today' || duration === 'yesterday' + + if (dateLength && dateLength > 0 && !isSingleDay) { + if (dimension === 'focus') { + // Average time per day + const total = sum(rows.map(r => r?.focus ?? 0)) + const averagePerDay = total / dateLength + const averageTime = formatPeriodCommon(averagePerDay) + averageStr = t(msg => msg.content.percentage.averageTime, { value: averageTime }) + } else if (dimension === 'time') { + // Average visits per day + const totalCount = sum(rows.map(r => r.time ?? 0)) + const averagePerDay = totalCount / dateLength + const averageCount = averagePerDay.toFixed(1) + averageStr = t(msg => msg.content.percentage.averageCount, { value: averageCount }) + } + } + + return [firstLine, averageStr].filter(s => !!s).join('\n') } export function generateTitleOption(result: PercentageResult, suffix?: string): TitleComponentOption { return { text: [result?.chartTitle, suffix].filter(v => !!v).join(' - '), subtext: calculateSubTitleText(result), - left: 'center', textStyle: { color: getPrimaryTextColor() }, - subtextStyle: { color: getSecondaryTextColor() }, - top: 15, + subtextStyle: { color: getSecondaryTextColor(), lineHeight: 15, fontSize: 12 }, + left: 'center', + top: 14, } } -export function generateToolboxOption(): ToolboxComponentOption { +function snapshotChart(chart: ECharts, backgroundColor: string, connectedBackgroundColor: string): string { + const pixelRatio = 7 + const isSvg = chart.getZr().painter.getType() === 'svg' + return chart.getConnectedDataURL({ + type: isSvg ? 'svg' : 'png', + pixelRatio, + backgroundColor, + connectedBackgroundColor, + excludeComponents: ['toolbox'], + }) +} + +async function getIconDataUrl(): Promise<string> { + const res = await fetch(getIconUrl()) + if (!res.ok) throw new Error(`Failed to fetch extension icon: ${res.status}`) + const blob = await res.blob() + const type = blob.type || 'image/png' + const bytes = new Uint8Array(await blob.arrayBuffer()) + let binary = '' + for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]!) + return `data:${type};base64,${btoa(binary)}` +} + +async function saveWithWatermark(instance: ECharts) { + const bgColor = getCssVariable('--el-card-bg-color', '.el-card')?.trim() ?? '#fff' + const footerBgColor = getCssVariable('--el-fill-color-light')?.trim() ?? bgColor + const textColor = getPrimaryTextColor()?.trim() ?? '#000' + const subTextColor = getSecondaryTextColor()?.trim() ?? '#888' + + const chartDataUrl = snapshotChart(instance, bgColor, footerBgColor) + + const chartImg = await new Promise<HTMLImageElement>((resolve, reject) => { + const img = new Image() + img.onload = () => resolve(img) + img.onerror = reject + img.src = chartDataUrl + }) + + const w = chartImg.width + const footerHeight = Math.round(w * 0.14) + const padding = Math.round(footerHeight * 0.15) + const qrSize = footerHeight - padding * 2 + const nameFontSize = Math.round(footerHeight * 0.28) + const subFontSize = Math.round(footerHeight * 0.18) + + const canvas = document.createElement('canvas') + canvas.width = w + canvas.height = chartImg.height + footerHeight + const ctx = canvas.getContext('2d') + if (!ctx) throw new Error('2D canvas context unavailable') + + ctx.fillStyle = bgColor + ctx.fillRect(0, 0, canvas.width, canvas.height) + ctx.drawImage(chartImg, 0, 0) + + ctx.fillStyle = footerBgColor + ctx.fillRect(0, chartImg.height, w, footerHeight) + + const footerTop = chartImg.height + + const qrCanvas = generateQrCanvas({ text: INSTALL_PAGE, size: qrSize }) + const qrX = w - padding - qrCanvas.width + const qrY = footerTop + Math.round((footerHeight - qrCanvas.height) / 2) + ctx.drawImage(qrCanvas, qrX, qrY) + + const iconSize = Math.round(footerHeight * 0.5) + const iconY = footerTop + Math.round((footerHeight - iconSize) / 2) + const iconSrc = await getIconDataUrl() + const iconImg = await new Promise<HTMLImageElement>((resolve, reject) => { + const img = new Image() + img.onload = () => resolve(img) + img.onerror = reject + img.src = iconSrc + }) + ctx.drawImage(iconImg, padding, iconY, iconSize, iconSize) + + const textX = padding + iconSize + Math.round(footerHeight * 0.1) + ctx.textBaseline = 'middle' + ctx.fillStyle = textColor + ctx.font = `bold ${nameFontSize}px sans-serif` + ctx.fillText(getRuntimeName(), textX, footerTop + Math.round(footerHeight * 0.35)) + + ctx.font = `${subFontSize}px sans-serif` + ctx.fillStyle = subTextColor + const tipText = t(msg => msg.content.percentage.installTip) + ctx.fillText(tipText, textX, footerTop + Math.round(footerHeight * 0.68)) + + const link = document.createElement('a') + link.hidden = true + link.download = 'Time_Tracker_Percentage.png' + link.href = canvas.toDataURL('image/png') + document.body.appendChild(link) + link.click() + document.body.removeChild(link) +} + +const MY_SAVE_ICON = ` + path://M812.333229 702.996063c-46.845072 0-89.466408 18.430848-119.288544 51.132804 + L319.564027 536.79845a103.801512 103.801512 0 0 0 0-51.132804l373.480658-215.858509 + c29.822136 32.63796 72.443472 52.540716 119.288544 52.540716 90.87432-1.407912 + 159.094057-69.563652 160.501969-160.437972C971.491282 71.03556 903.271546 1.407912 + 812.333229 0c-90.87432 1.407912-160.437973 71.03556-161.90988 161.909881 0 9.91938 + 1.471908 19.83876 2.87982 29.822136L282.638335 404.774702A160.629961 160.629961 0 0 0 + 161.941879 350.698081C71.067558 352.169989 1.43991 420.453722 0.031998 511.328042 + c1.407912 90.87432 71.03556 159.030061 161.909881 160.501969 46.845072 0 90.87432 + -21.310668 120.696456-54.012625l370.664834 214.450597c-1.407912 9.983376-2.815824 + 19.83876-2.815824 31.230048 1.407912 90.87432 71.03556 159.094057 161.90988 160.501969 + 90.87432-1.407912 159.030061-69.563652 160.437973-160.501969-1.407912-90.87432 + -69.563652-159.030061-160.501969-160.437972z +`.replace(/\s+/g, ' ').trim() + +export function generateToolbox(getInstance: () => ECharts | undefined): ToolboxComponentOption { + const toolboxIconColor = getPrimaryTextColor()?.trim() ?? '#5c6b7a' + return { show: true, top: 5, right: 5, + iconStyle: { + color: toolboxIconColor, + borderColor: toolboxIconColor, + borderWidth: 0, + }, + emphasis: { + iconStyle: { + color: toolboxIconColor, + borderColor: toolboxIconColor, + borderWidth: 0, + }, + }, feature: { - saveAsImage: { + mySave: { show: true, - title: t(msg => msg.content.percentage.saveAsImageTitle), - // file name - name: 'Time_Tracker_Percentage', - excludeComponents: ['toolbox'], - pixelRatio: 7, - backgroundColor: getCssVariable('--el-card-bg-color', '.el-card'), + title: t(msg => msg.content.percentage.shareTitle), + icon: MY_SAVE_ICON, + onclick: () => { + const inst = getInstance() + if (!inst) return + inst && void saveWithWatermark(inst).catch(err => { + console.info(err) + ElMessage.error('Could not save the image.') + }) + }, }, - } + }, } } -type OtherRow = Record<Exclude<timer.core.Dimension, 'run'>, number> & { +type OtherRow = Record<Exclude<tt4b.core.Dimension, 'run'>, number> & { other: true count: number } -type ChartRow = timer.stat.Row | OtherRow +type ChartRow = tt4b.stat.Row | OtherRow export const isOther = (row: ChartRow): row is OtherRow => 'other' in row -function cvt2ChartRows(rows: timer.stat.Row[], dimension: Exclude<timer.core.Dimension, 'run'>, itemCount: number): ChartRow[] { - rows = rows.filter(item => !!item[dimension]).sort((a, b) => (b[dimension] ?? 0) - (a[dimension] ?? 0)) +function cvt2ChartRows(rows: tt4b.stat.Row[], dimension: Exclude<tt4b.core.Dimension, 'run'>, itemCount: number): ChartRow[] { + const sorted = rows.filter(item => !!item[dimension]).sort((a, b) => (b[dimension] ?? 0) - (a[dimension] ?? 0)) const popupRows: ChartRow[] = [] const other: OtherRow = { focus: 0, time: 0, count: 0, other: true } - for (let i = 0; i < rows.length; i++) { - const row = rows[i] + sorted.forEach((row, i) => { if (i < itemCount) { popupRows.push(row) } else { @@ -133,8 +285,8 @@ function cvt2ChartRows(rows: timer.stat.Row[], dimension: Exclude<timer.core.Dim other.time += row.time other.count++ } - } - other.count && popupRows.push(other) + }) + if (other.count) popupRows.push(other) return popupRows } @@ -163,17 +315,9 @@ const legend2LabelStyle = (legend: string): string => { return code.join('') } -type CallbackFormat = { - name: string - value: number - data: PieSeriesItemOption - percent: number -} - function formatLabel(params: CallbackDataParams, groupMap: Record<number, chrome.tabGroups.TabGroup>): string { - const format = (Array.isArray(params) ? params[0] : params) as CallbackFormat - const { name, data } = format || {} - const { row } = (data as PieSeriesItemOption) || {} + const { name, data } = params + const { row } = data as PieSeriesItemOption ?? {} if (!row) return 'NaN' if (isOther(row)) { @@ -197,8 +341,12 @@ type CustomOption = Pick< 'center' | 'radius' | 'selectedMode' | 'minShowLabelAngle' > -export function generateSiteSeriesOption(rows: timer.stat.Row[], result: PercentageResult, customOption: CustomOption): PieSeriesOption { - const { displaySiteName, query: { dimension }, itemCount, groups } = result || {} +export function generateSiteSeriesOption( + rows: tt4b.stat.Row[], + result: PercentageResult, + customOption: CustomOption, +): PieSeriesOption { + const { displaySiteName, query: { dimension }, itemCount, groups, donutChart } = result const groupMap = toMap(groups, g => g.id) const chartRows = cvt2ChartRows(rows, dimension, itemCount) @@ -208,12 +356,14 @@ export function generateSiteSeriesOption(rows: timer.stat.Row[], result: Percent if (isOther(row)) { item.itemStyle = { color: getInfoColor() } item.name = t(msg => msg.content.percentage.otherLabel, { count: row.count }) - } else if (isSite(row)) { - const { siteKey, alias, iconUrl } = row - const { host } = siteKey || {} + } else if (!isOther(row) && isSite(row as tt4b.stat.StatKey)) { + const { siteKey, alias, iconUrl } = row as tt4b.stat.SiteRow + const { host, type } = siteKey ?? {} const name = item.name = (displaySiteName ? (alias ?? host) : host) ?? '' const richValue: PieLabelRichValueOption = { ...BASE_LABEL_RICH_VALUE } - iconUrl && (richValue.backgroundColor = { image: iconUrl }) + if (type === 'normal' && iconUrl && !IS_SAFARI) { + richValue.backgroundColor = { image: iconUrl } + } iconRich[legend2LabelStyle(name)] = richValue } else if (isGroup(row)) { item.name = getGroupName(groupMap, row) @@ -245,11 +395,49 @@ export function generateSiteSeriesOption(rows: timer.stat.Row[], result: Percent }, }, avoidLabelOverlap: true, - ...customOption || {}, + ...customOption, + ...adaptDonutSeries(donutChart, customOption.radius), } } -function calculateAverageText(type: timer.core.Dimension, averageValue: number): string | undefined { +export function adaptDonutSeries( + donutChart: boolean, + radius: CustomOption['radius'], + donutRadiusRatio: number = 0.5, +): Pick<PieSeriesOption, 'itemStyle' | 'padAngle' | 'radius' | 'minAngle'> { + return { + ...donutChart ? { + itemStyle: { borderRadius: 5 }, + padAngle: 1, + minAngle: 1.5, + } : { + itemStyle: { borderRadius: 0 }, + padAngle: 0, + minAngle: 0, + }, + radius: calcRealRadius(donutChart, radius, donutRadiusRatio), + } +} + +function calcRealRadius( + donutChart: boolean, + radius: CustomOption['radius'], + donutRadiusRatio: number = 0.5, +): CustomOption['radius'] { + if (!donutChart) return radius + if (!radius) return radius + if (Array.isArray(radius)) return radius + if (typeof radius === 'number') return [radius * donutRadiusRatio, radius] + try { + const percent = parseFloat(radius.replace('%', '')) + const inner = percent * donutRadiusRatio + return [`${inner}%`, radius] + } catch { + return radius + } +} + +function calculateAverageText(type: tt4b.core.Dimension, averageValue: number): string | undefined { if (type === 'focus') { return t(msg => msg.content.percentage.averageTime, { value: formatPeriodCommon(parseInt(averageValue.toFixed(0))) }) } else if (type === 'time') { @@ -265,13 +453,11 @@ export function formatTooltip({ query, dateLength }: PercentageResult, params: T const format = (Array.isArray(params) ? params[0] : params) const { name, value, percent, data } = format ?? {} const { row } = data as PieSeriesItemOption - const { dimension } = query - const itemValue = typeof value === 'number' ? value as number : 0 - + const { dimension, duration } = query + const itemValue = typeof value === 'number' ? value : 0 let valueLine = dimension === 'time' ? itemValue : formatPeriodCommon(itemValue) // Display percent only when query focus time dimension === 'focus' && (valueLine += ` (${percent}%)`) - let nameLine = name let averageLine: string | undefined = undefined if (!isOther(row)) { @@ -279,18 +465,20 @@ export function formatTooltip({ query, dateLength }: PercentageResult, params: T const { siteKey: { host } } = row nameLine = generateSiteLabel(host, name) } - if (dateLength && dateLength > 1) { + // Don't show averages for single-day durations (today/yesterday) + const isSingleDay = duration === 'today' || duration === 'yesterday' + + if (dateLength && dateLength > 1 && !isSingleDay) { averageLine = calculateAverageText(dimension, itemValue / dateLength) } } - return [nameLine, valueLine, averageLine].filter(l => !!l).join('<br />') } /** * Handle click */ -export function handleClick(data: PieSeriesItemOption, date: PercentageResult['date'], type: timer.core.Dimension): void { +export function handleClick(data: PieSeriesItemOption, date: PercentageResult['date'], type: tt4b.core.Dimension): void { const { row } = data if (isOther(row)) { return diff --git a/src/pages/popup/components/Percentage/index.tsx b/src/pages/popup/components/Percentage/index.tsx index e21adb6d7..c2c8edd3a 100644 --- a/src/pages/popup/components/Percentage/index.tsx +++ b/src/pages/popup/components/Percentage/index.tsx @@ -1,26 +1,21 @@ -import { useRequest } from "@hooks/useRequest" -import { useQuery } from "@popup/context" -import { PieChart } from "echarts/charts" -import { AriaComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent } from "echarts/components" -import { use } from "echarts/core" -import { CanvasRenderer } from "echarts/renderers" +import { useRequest } from "@hooks" +import { useOption, useQuery } from "@popup/context" import { ElCard } from "element-plus" import { defineComponent } from "vue" import Cate from "./Cate" import { doQuery } from "./query" import Site from "./Site" -use([CanvasRenderer, PieChart, AriaComponent, LegendComponent, TitleComponent, TooltipComponent, ToolboxComponent]) - const Percentage = defineComponent(() => { const query = useQuery() - const { data } = useRequest(() => doQuery(query), { deps: () => ({ ...query }) }) + const option = useOption() + const { data } = useRequest(() => doQuery(query, option), { deps: () => ({ ...query, ...option }) }) return () => ( <ElCard shadow="never" style={{ width: '100%', height: '100%' }} - bodyStyle={{ height: '100%', boxSizing: 'border-box', padding: 0 }} + bodyStyle={{ height: '100%', boxSizing: 'border-box', padding: 0, overflow: 'hidden' }} > {query.mergeMethod === 'cate' ? <Cate value={data.value} /> diff --git a/src/pages/popup/components/Percentage/query.ts b/src/pages/popup/components/Percentage/query.ts index 6bcea4ca5..e7ad43f48 100644 --- a/src/pages/popup/components/Percentage/query.ts +++ b/src/pages/popup/components/Percentage/query.ts @@ -1,13 +1,12 @@ import { listAllGroups } from "@api/chrome/tabGroups" import { queryRows, } from "@popup/common" -import { type PopupQuery } from "@popup/context" -import { t } from "@popup/locale" -import optionHolder from "@service/components/option-holder" -import { getDayLength } from "@util/time" +import { t } from '@popup/locale' +import type { PopupOption, PopupQuery } from "@popup/types" +import { getBirthday, getDayLength } from "@util/time" export type PercentageResult = { query: PopupQuery - rows: timer.stat.Row[] + rows: tt4b.stat.Row[] // Actually date range according to duration date: Date | [Date, Date?] | undefined displaySiteName: boolean @@ -16,9 +15,10 @@ export type PercentageResult = { itemCount: number dateLength: number groups: chrome.tabGroups.TabGroup[] + donutChart: boolean } -const findAllDates = (row: timer.stat.Row): Set<string> => { +const findAllDates = (row: tt4b.stat.Row): Set<string> => { const set = new Set<string>() const { date, mergedDates } = row date && set.add(date) @@ -30,7 +30,7 @@ const findAllDates = (row: timer.stat.Row): Set<string> => { return set } -const findDateRange = (rows: timer.stat.Row[]): [string, string] | undefined => { +const findDateRange = (rows: tt4b.stat.Row[]): [string, string] | undefined => { const set = new Set<string>() rows?.forEach(row => { const dates = findAllDates(row) @@ -45,19 +45,30 @@ const findDateRange = (rows: timer.stat.Row[]): [string, string] | undefined => return minDate && maxDate ? [minDate, maxDate] : undefined } -export const doQuery = async (query: PopupQuery): Promise<PercentageResult> => { - const option = await optionHolder.get() - const itemCount = option.popupMax +export const doQuery = async (query: PopupQuery, option: PopupOption): Promise<PercentageResult> => { + const { topN: itemCount, showName: displaySiteName } = option const [rows, date] = await queryRows(query) const groups = await listAllGroups() + const dataDate = findDateRange(rows) + + // Count actual unique days with data + const allDatesSet = new Set<string>() + rows?.forEach(row => { + const dates = findAllDates(row) + dates.forEach(d => allDatesSet.add(d)) + }) + const dateLength = allDatesSet.size > 0 ? allDatesSet.size + : (Array.isArray(date) ? getDayLength(date[0] ?? getBirthday(), date[1] ?? new Date()) : 1) + return { query, rows, - date, dataDate: findDateRange(rows), - dateLength: date instanceof Array ? getDayLength(date[0], date[1] ?? new Date()) : 1, - displaySiteName: option.displaySiteName, + date, dataDate, + dateLength, + displaySiteName, chartTitle: t(msg => msg.content.percentage.title[query?.duration], { n: query?.durationNum }), itemCount, groups, + donutChart: !!option.donutChart, } satisfies PercentageResult } diff --git a/src/pages/popup/components/Ranking/Item.tsx b/src/pages/popup/components/Ranking/Item.tsx index 3b9f35c08..d4c4e7a87 100644 --- a/src/pages/popup/components/Ranking/Item.tsx +++ b/src/pages/popup/components/Ranking/Item.tsx @@ -1,15 +1,15 @@ import { createTab } from "@api/chrome/tab" -import { cvtGroupColor } from "@api/chrome/tabGroups" -import TooltipWrapper from "@app/components/common/TooltipWrapper" import { Mouse, Timer } from "@element-plus/icons-vue" -import { useTabGroups } from "@hooks/useTabGroups" +import { useTabGroups } from "@hooks" import Flex from "@pages/components/Flex" +import TooltipWrapper from '@pages/components/TooltipWrapper' +import { cvtGroupColor } from '@pages/util/style' import { calJumpUrl } from "@popup/common" import { useCateNameMap, useQuery } from "@popup/context" -import { t } from "@popup/locale" +import { t } from '@popup/locale' import { isRemainHost } from "@util/constant/remain-host" import { getGroupName, getIconUrl, isCate, isGroup, isNormalSite, isSite } from "@util/stat" -import { formatPeriodCommon } from "@util/time" +import { DateRange, formatPeriodCommon } from "@util/time" import { ElAvatar, ElCard, ElIcon, ElLink, ElProgress, ElTag, ElText } from "element-plus" import { computed, defineComponent, type StyleValue } from "vue" @@ -65,7 +65,7 @@ const Title = defineComponent<TitleProps>(props => { ) }, { props: ['value', 'date', 'displaySiteName'] }) -const renderAvatarText = (row: timer.stat.Row, cateNameMap: Record<number, string>, groupMap: Record<number, chrome.tabGroups.TabGroup>) => { +const renderAvatarText = (row: tt4b.stat.Row, cateNameMap: Record<number, string>, groupMap: Record<number, chrome.tabGroups.TabGroup>) => { let name: string | undefined = undefined if (isGroup(row)) { name = getGroupName(groupMap, row) @@ -79,10 +79,10 @@ const renderAvatarText = (row: timer.stat.Row, cateNameMap: Record<number, strin } type ItemProps = { - value: timer.stat.Row + value: tt4b.stat.Row max?: number total?: number - date?: Date | [start: Date, end?: Date] + date?: DateRange displaySiteName?: boolean onJump?: NoArgCallback } @@ -171,7 +171,7 @@ const Item = defineComponent<ItemProps>(props => { </Flex> </Flex> </Flex> - </ElCard > + </ElCard> ) }, { props: ['date', 'displaySiteName', 'max', 'total', 'value', 'onJump'] }) diff --git a/src/pages/popup/components/Ranking/index.tsx b/src/pages/popup/components/Ranking/index.tsx index 4f5ac8e00..81d734b4e 100644 --- a/src/pages/popup/components/Ranking/index.tsx +++ b/src/pages/popup/components/Ranking/index.tsx @@ -1,5 +1,5 @@ -import { useRequest } from "@hooks/useRequest" -import { useQuery } from "@popup/context" +import { useOption, useQuery } from "@popup/context" +import { useRequest } from "@hooks" import { ElCol, ElRow, ElScrollbar } from "element-plus" import { defineComponent } from "vue" import Item from "./Item" @@ -7,7 +7,8 @@ import { doQuery } from "./query" const Ranking = defineComponent(() => { const query = useQuery() - const { data: result } = useRequest(() => doQuery(query), { deps: () => ({ ...query }) }) + const option = useOption() + const { data: result } = useRequest(() => doQuery(query, option), { deps: () => ({ ...query, ...option }) }) return () => ( <ElScrollbar noresize style={{ width: '100%' }}> diff --git a/src/pages/popup/components/Ranking/query.tsx b/src/pages/popup/components/Ranking/query.tsx index c311b1c92..3a43ca1f0 100644 --- a/src/pages/popup/components/Ranking/query.tsx +++ b/src/pages/popup/components/Ranking/query.tsx @@ -1,22 +1,22 @@ import { queryRows } from "@popup/common" -import { type PopupQuery } from "@popup/context" -import optionHolder from "@service/components/option-holder" +import type { PopupOption, PopupQuery } from "@popup/types" import { sum } from "@util/array" +import { type DateRange } from '@util/time' -export type RankingResult = { - rows: timer.stat.Row[] +type RankingResult = { + rows: tt4b.stat.Row[] max: number total: number displaySiteName: boolean - date: Date | [Date, Date?] | undefined + date: DateRange } -export const doQuery = async (query: PopupQuery): Promise<RankingResult> => { +export const doQuery = async (query: PopupQuery, option: PopupOption): Promise<RankingResult> => { const [rows, date] = await queryRows(query) const { dimension } = query const values = rows?.map(r => r?.[dimension] ?? 0) ?? [] const max = values.sort((a, b) => (b ?? 0) - (a ?? 0))[0] ?? 0 const total = sum(values) - const { displaySiteName } = await optionHolder.get() || {} - return { max, total, rows, date, displaySiteName } + const { showName } = option + return { max, total, rows, date, displaySiteName: showName } } \ No newline at end of file diff --git a/src/pages/popup/context.ts b/src/pages/popup/context.ts index e229cec65..dbba43ecb 100644 --- a/src/pages/popup/context.ts +++ b/src/pages/popup/context.ts @@ -1,57 +1,109 @@ +import { listAllCategories } from '@api/sw/cate' +import { getLimitSummary } from '@api/sw/limit' +import { getOption, setOption } from "@api/sw/option" import { useLocalStorage, useProvide, useProvider, useRequest } from "@hooks" -import cateService from "@service/cate-service" -import optionService from "@service/option-service" +import { isDarkMode, processDarkMode } from "@pages/util/dark-mode" import { toMap } from "@util/array" -import { isDarkMode, toggle } from "@util/dark-mode" import { CATE_NOT_SET_ID } from "@util/site" -import { reactive, type Reactive, ref, type Ref, toRaw, watch } from "vue" +import { createObjectGuard, createOptionalGuard, createStringUnionGuard, isBoolean, isNumber, isOptionalInt } from 'typescript-guard' +import { computed, reactive, Ref, ref, type ShallowRef, toRaw, watch } from "vue" +import { useRoute, useRouter } from 'vue-router' import { t } from "./locale" - -export type PopupQuery = { - mergeMethod: Exclude<timer.stat.MergeMethod, 'date'> | undefined - duration: timer.option.PopupDuration - durationNum?: number - dimension: Exclude<timer.core.Dimension, 'run'> -} +import { isMenu } from './router' +import type { PopupOption, PopupQuery } from './types' type PopupContextValue = { reload: () => void - darkMode: Ref<boolean> - setDarkMode: (val: boolean) => void - query: Reactive<PopupQuery> - cateNameMap: Ref<Record<number, string>> + darkMode: ShallowRef<boolean> + setDarkMode: ArgCallback<boolean> + query: PopupQuery + option: PopupOption + cateNameMap: ShallowRef<Record<number, string>> + menu: ShallowRef<tt4b.ui.PopupMenu | undefined> + setMenu: ArgCallback<tt4b.ui.PopupMenu> + limitSummary: ShallowRef<tt4b.limit.Summary | undefined> + limitSummaryLoading: ShallowRef<boolean> + selectedLimit: Ref<number | undefined> +} + +const initMenu = () => { + const [stored, setStored] = useLocalStorage<tt4b.ui.PopupMenu>('popup_menu', isMenu, 'percentage') + const route = useRoute() + const router = useRouter() + const myRoute = computed(() => { + const menuMaybe = route.path.substring(1) + return isMenu(menuMaybe) ? menuMaybe : stored + }) + const setMyRoute = (val: tt4b.ui.PopupMenu) => { + setStored(val) + router.push('/' + val) + } + return [myRoute, setMyRoute] as const } const NAMESPACE = '_' -export const initPopupContext = (): Ref<number> => { +export const initPopupContext = (): ShallowRef<number> => { const appKey = ref(Date.now()) const reload = () => appKey.value = Date.now() - const { data: darkMode, refresh: refreshDarkMode } = useRequest(() => optionService.isDarkMode(), { defaultValue: isDarkMode() }) + const { data: darkMode, refresh: refreshDarkMode } = useRequest(async () => { + const option = await getOption() + return processDarkMode(option) + }, { defaultValue: isDarkMode() }) const setDarkMode = async (val: boolean) => { - const option: timer.option.DarkMode = val ? 'on' : 'off' - await optionService.setDarkMode(option) - toggle(val) + await setOption({ darkMode: val ? 'on' : 'off' }) refreshDarkMode() } const { data: cateNameMap } = useRequest(async () => { - const categories = await cateService.listAll() - const result = toMap(categories ?? [], c => c.id, c => c.name) + const categories = await listAllCategories() + const result = toMap(categories, c => c.id, c => c.name) result[CATE_NOT_SET_ID] = t(msg => msg.shared.cate.notSet) return result }, { defaultValue: {} }) const query = initQuery() - useProvide<PopupContextValue>(NAMESPACE, { reload, darkMode, setDarkMode, query, cateNameMap }) + const option = initOption() + + const [menu, setMenu] = initMenu() + + const { data: limitSummary, loading: limitSummaryLoading } = useRequest( + () => menu.value === 'limit' ? getLimitSummary() : Promise.resolve(undefined), + { + deps: menu, + onSuccess(newVal) { + const newItems = newVal?.items ?? [] + if (!newItems.some(i => i.id === selectedLimit.value)) { + selectedLimit.value = newItems[0]?.id + } + } + }, + ) + const selectedLimit = ref<number>() + + useProvide<PopupContextValue>(NAMESPACE, { + reload, darkMode, setDarkMode, query, option, + cateNameMap, + menu, setMenu, + limitSummary, limitSummaryLoading, selectedLimit, + }) return appKey } +const isMergeMethod = createStringUnionGuard<Exclude<PopupQuery['mergeMethod'], undefined>>('cate', 'domain', 'group') + +const isQuery = createObjectGuard<PopupQuery>({ + dimension: createStringUnionGuard<PopupQuery['dimension']>('focus', 'time'), + duration: createStringUnionGuard<PopupQuery['duration']>('allTime', 'lastDays', 'thisMonth', 'thisWeek', 'today', 'yesterday'), + durationNum: isOptionalInt, + mergeMethod: createOptionalGuard(isMergeMethod), +}) + const initQuery = () => { - const [queryCache, setQueryCache] = useLocalStorage<PopupQuery>('popup-query', { + const [queryCache, setQueryCache] = useLocalStorage<PopupQuery>('popup-query', isQuery, { dimension: 'focus', duration: 'today', mergeMethod: undefined, @@ -63,10 +115,40 @@ const initQuery = () => { return query } +const isOption = createObjectGuard<PopupOption>({ + showName: isBoolean, + topN: isNumber, + donutChart: isBoolean, +}) + +const initOption = () => { + const [optionCache, setOptionCache] = useLocalStorage<PopupOption>('popup-option', isOption, { + showName: true, + topN: 10, + donutChart: false, + }) + + const option = reactive(optionCache) + watch(option, () => setOptionCache(toRaw(option)), { deep: true }) + + return option +} + export const usePopupContext = () => useProvider<PopupContextValue, 'reload' | 'darkMode' | 'setDarkMode' | 'cateNameMap'>( NAMESPACE, 'reload', 'darkMode', 'setDarkMode', 'cateNameMap' ) export const useQuery = () => useProvider<PopupContextValue, 'query'>(NAMESPACE, 'query').query -export const useCateNameMap = () => useProvider<PopupContextValue, 'cateNameMap'>(NAMESPACE, 'cateNameMap')?.cateNameMap \ No newline at end of file +export const useOption = () => useProvider<PopupContextValue, 'option'>(NAMESPACE, 'option').option + +export const useCateNameMap = () => useProvider<PopupContextValue, 'cateNameMap'>(NAMESPACE, 'cateNameMap')?.cateNameMap + +export const useMenu = () => useProvider<PopupContextValue, 'menu' | 'setMenu'>(NAMESPACE, 'menu', 'setMenu') + +export const useLimitSummary = () => { + const { limitSummary: summary, limitSummaryLoading: loading, selectedLimit: selected } = useProvider<PopupContextValue, 'limitSummary' | 'limitSummaryLoading' | 'selectedLimit'>( + NAMESPACE, 'limitSummary', 'limitSummaryLoading', 'selectedLimit' + ) + return { summary, loading, selected } +} \ No newline at end of file diff --git a/src/pages/popup/index.ts b/src/pages/popup/index.ts index 2c62c3af5..d0cd73333 100644 --- a/src/pages/popup/index.ts +++ b/src/pages/popup/index.ts @@ -5,16 +5,15 @@ * https://opensource.org/licenses/MIT */ +import { getOption } from "@api/sw/option" import { initLocale } from "@i18n" -import metaService from "@service/meta-service" -import optionService from "@service/option-service" -import { toggle } from "@util/dark-mode" -import "element-plus/theme-chalk/index.css" +import { processDarkMode } from '@pages/util/dark-mode' +import { initEcharts } from "@pages/util/echarts" +import type { FrameRequest, FrameResponse } from "@popup/types" import { createApp } from "vue" import Main from "./Main" -import { type FrameRequest, type FrameResponse } from "./message" import initRouter from "./router" -import "./style/index.sass" +import { injectGlobalCss } from "./style" function send2ParentWindow(data: any): Promise<void> { return new Promise(resolve => { @@ -36,10 +35,11 @@ function send2ParentWindow(data: any): Promise<void> { } async function main() { - await initLocale() + initLocale() + initEcharts() + injectGlobalCss() - const isDarkMode = await optionService.isDarkMode() - toggle(isDarkMode) + getOption().then(processDarkMode) await send2ParentWindow('themeInitialized') const el = document.createElement('div') @@ -49,8 +49,6 @@ async function main() { const app = createApp(Main) initRouter(app) app.mount(el) - - metaService.increasePopup() } main() diff --git a/src/pages/popup/locale.ts b/src/pages/popup/locale.ts index 38ae0194d..bc161614e 100644 --- a/src/pages/popup/locale.ts +++ b/src/pages/popup/locale.ts @@ -5,12 +5,12 @@ * https://opensource.org/licenses/MIT */ -import { type I18nKey as _I18nKey, t as _t } from "@i18n" +import { type I18nKey as _I18nKey, t as _t, tN as _tN } from "@i18n" import messages, { type PopupMessage } from "@i18n/message/popup" +import type { VNode } from 'vue' -export type I18nKey = _I18nKey<PopupMessage> +type I18nKey = _I18nKey<PopupMessage> -export const t = (key: I18nKey, param?: any) => { - const props = { key, param } - return _t<PopupMessage>(messages, props) -} +export const t = (key: I18nKey, param?: any) => _t<PopupMessage>(messages, { key, param }) + +export const tN = (key: I18nKey, param?: any) => _tN<PopupMessage, VNode>(messages, { key, param }) \ No newline at end of file diff --git a/src/pages/popup/message.ts b/src/pages/popup/message.ts deleted file mode 100644 index 5c340dade..000000000 --- a/src/pages/popup/message.ts +++ /dev/null @@ -1,8 +0,0 @@ -export type FrameRequest = { - stamp: number - data: any -} - -export type FrameResponse = { - stamp: number -} \ No newline at end of file diff --git a/src/pages/popup/router.ts b/src/pages/popup/router.ts index e71e1bd9e..84f51a1d4 100644 --- a/src/pages/popup/router.ts +++ b/src/pages/popup/router.ts @@ -1,32 +1,36 @@ -import { type App } from "vue" -import { createRouter, createWebHashHistory, type RouteRecordRaw } from "vue-router" +import { useLocalStorage } from '@hooks' +import { createStringUnionGuard } from 'typescript-guard' +import type { App } from "vue" +import { createRouter, createWebHashHistory, type RouteRecordRedirect, type RouteRecordSingleView } from "vue-router" -const ROUTE_PERCENTAGE = 'percentage' -const ROUTE_RANKING = 'ranking' +type Path = `/${tt4b.ui.PopupMenu}` +type MyRoute = + | (Omit<RouteRecordSingleView, 'path'> & { path: Path }) + | (Omit<RouteRecordRedirect, 'redirect'> & { redirect: Path }) -export const POPUP_ROUTES = [ROUTE_PERCENTAGE, ROUTE_RANKING] -export type PopupRoute = typeof POPUP_ROUTES[number] - - -const routes: RouteRecordRaw[] = [ +const createRoutes = (stored: tt4b.ui.PopupMenu | undefined): MyRoute[] => [ { path: '/', - redirect: '/' + ROUTE_PERCENTAGE, + redirect: stored ? `/${stored}` : '/percentage', }, { - path: '/' + ROUTE_PERCENTAGE, + path: '/percentage', component: () => import('./components/Percentage'), }, { - path: '/' + ROUTE_RANKING, + path: '/ranking', component: () => import('./components/Ranking'), - } + }, { + path: '/limit', + component: () => import('./components/Limit'), + }, ] -export default (app: App) => { - const router = createRouter({ - history: createWebHashHistory(), - routes, - }) +export const isMenu = createStringUnionGuard<tt4b.ui.PopupMenu>('limit', 'percentage', 'ranking') +export default (app: App) => { + const [stored] = useLocalStorage<tt4b.ui.PopupMenu>('popup_menu', isMenu) + const routes = createRoutes(stored) + const history = createWebHashHistory() + const router = createRouter({ routes, history }) app.use(router) } \ No newline at end of file diff --git a/src/pages/popup/skeleton.ts b/src/pages/popup/skeleton.ts index 327976e36..4ea302989 100644 --- a/src/pages/popup/skeleton.ts +++ b/src/pages/popup/skeleton.ts @@ -1,6 +1,6 @@ -import { init as initTheme } from "@util/dark-mode" -import { type FrameRequest, type FrameResponse } from "./message" -import './style/skeleton.sass' +import { initDarkTheme } from "@pages/util/dark-mode" +import type { FrameRequest, FrameResponse } from "@popup/types" +import { injectSkeletonCss } from './style/skeleton' function injectFrame() { const iframe: HTMLIFrameElement = document.createElement('iframe') @@ -23,7 +23,8 @@ function injectFrame() { */ async function main() { // Calculate the latest mode - initTheme() + initDarkTheme() + injectSkeletonCss() // Resize after init theme document.body.style.width = '766px' document.body.style.height = '596px' diff --git a/src/pages/popup/style/common.sass b/src/pages/popup/style/common.sass deleted file mode 100644 index 2a88d5369..000000000 --- a/src/pages/popup/style/common.sass +++ /dev/null @@ -1,8 +0,0 @@ -body - margin: 0 - background-color: var(--el-bg-color) - font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif - -html[data-theme='dark']:root - --el-bg-color: var(--el-fill-color-dark) - --el-fill-color-dark: #39393A diff --git a/src/pages/popup/style/common.ts b/src/pages/popup/style/common.ts new file mode 100644 index 000000000..04fe4f65d --- /dev/null +++ b/src/pages/popup/style/common.ts @@ -0,0 +1,14 @@ +import { injectGlobal } from '@emotion/css' + +export const injectCommonCss = () => injectGlobal` + body { + margin: 0; + background-color: var(--el-bg-color); + font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif; + } + + html[data-theme='dark'] { + --el-bg-color: var(--el-fill-color-dark); + --el-fill-color-dark: #39393A; + } +` \ No newline at end of file diff --git a/src/pages/popup/style/dark-theme.sass b/src/pages/popup/style/dark-theme.sass deleted file mode 100644 index bb88acab3..000000000 --- a/src/pages/popup/style/dark-theme.sass +++ /dev/null @@ -1,19 +0,0 @@ -html[data-theme='dark']:root - --el-bg-color-overlay: #1d1e1f - --el-fill-color-darker: #424243 - --el-fill-color-light: #262727 - --el-fill-color-lighter: #1D1D1D - --el-text-color-primary: #E5EAF3 - --el-text-color-regular: #CFD3DC - --el-text-color-secondary: #A3A6AD - --el-text-color-placeholder: #8D9095 - --el-border-color-darker: #636466 - --el-border-color-dark: #58585B - --el-border-color: #4C4D4F - --el-border-color-light: #414243 - --el-border-color-lighter: #363637 - --el-border-color-extra-light: #2B2B2C - --el-fill-color-blank: var(--el-fill-color-darker) - - .el-switch__core .el-switch__action - background-color: var(--el-fill-color-darker) diff --git a/src/pages/popup/style/dark-theme.ts b/src/pages/popup/style/dark-theme.ts new file mode 100644 index 000000000..939cd770a --- /dev/null +++ b/src/pages/popup/style/dark-theme.ts @@ -0,0 +1,21 @@ +import { injectGlobal } from '@emotion/css' + +export const injectDarkTheme = () => injectGlobal` + html[data-theme='dark'] { + --el-bg-color-overlay: #1d1e1f; + --el-fill-color-darker: #424243; + --el-fill-color-light: #262727; + --el-fill-color-lighter: #1D1D1D; + --el-text-color-primary: #E5EAF3; + --el-text-color-regular: #CFD3DC; + --el-text-color-secondary: #A3A6AD; + --el-text-color-placeholder: #8D9095; + --el-border-color-darker: #636466; + --el-border-color-dark: #58585B; + --el-border-color: #4C4D4F; + --el-border-color-light: #414243; + --el-border-color-lighter: #363637; + --el-border-color-extra-light: #2B2B2C; + --el-fill-color-blank: var(--el-fill-color-darker); + } +` \ No newline at end of file diff --git a/src/pages/popup/style/index.sass b/src/pages/popup/style/index.sass deleted file mode 100644 index 8d2f1ad4d..000000000 --- a/src/pages/popup/style/index.sass +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ -@use "sass:meta" -@use "../../element-ui/dark-theme" - -@include meta.load-css("dark-theme") -@include meta.load-css("common") - -body - padding: 10px - box-sizing: border-box - height: 596px - width: 766px - overflow: hidden - -#app - overflow: hidden - width: 100% - height: 100% - -#chart-container - width: 100% - height: 0 - flex: 1 - -#total-info - color: var(--el-text-color-secondary) - font-size: 12px - -.el-popper - // Must greater than z-index of echarts tooltip: 9999999 - z-index: 99999999 diff --git a/src/pages/popup/style/index.ts b/src/pages/popup/style/index.ts new file mode 100644 index 000000000..98bb78188 --- /dev/null +++ b/src/pages/popup/style/index.ts @@ -0,0 +1,25 @@ +import { injectGlobal } from '@emotion/css' +import '@pages/element-ui/dark-theme.css' +import { injectCommonCss } from './common' +import { injectDarkTheme } from './dark-theme' + +export const injectGlobalCss = () => { + injectCommonCss() + injectDarkTheme() + + injectGlobal` + body { + padding: 10px; + box-sizing: border-box; + height: 596px; + width: 766px; + overflow: hidden; + } + + #app { + overflow: hidden; + width: 100%; + height: 100%; + } + ` +} \ No newline at end of file diff --git a/src/pages/popup/style/skeleton.sass b/src/pages/popup/style/skeleton.sass deleted file mode 100644 index ea044f392..000000000 --- a/src/pages/popup/style/skeleton.sass +++ /dev/null @@ -1,14 +0,0 @@ - -@use "sass:meta" -@include meta.load-css("common") - -body - width: 0px - height: 0px - box-sizing: border-box - overflow: hidden - -iframe - border: none - height: 100% - width: 100% diff --git a/src/pages/popup/style/skeleton.ts b/src/pages/popup/style/skeleton.ts new file mode 100644 index 000000000..409beff2c --- /dev/null +++ b/src/pages/popup/style/skeleton.ts @@ -0,0 +1,21 @@ +import { injectGlobal } from '@emotion/css' +import { injectCommonCss } from './common' + +export const injectSkeletonCss = () => { + injectCommonCss() + + injectGlobal` + body { + width: 0px; + height: 0px; + box-sizing: border-box; + overflow: hidden; + } + + iframe { + border: none; + height: 100%; + width: 100%; + } + ` +} \ No newline at end of file diff --git a/src/pages/popup/types.d.ts b/src/pages/popup/types.d.ts new file mode 100644 index 000000000..805b5e6d9 --- /dev/null +++ b/src/pages/popup/types.d.ts @@ -0,0 +1,26 @@ +export type FrameRequest = { + stamp: number + data: any +} + +export type FrameResponse = { + stamp: number +} + +export type PopupDuration = + | "today" | "yesterday" | "thisWeek" | "thisMonth" + | "lastDays" + | "allTime" + +export type PopupQuery = { + mergeMethod: Exclude<tt4b.stat.MergeMethod, 'date'> | undefined + duration: PopupDuration + durationNum?: number + dimension: Exclude<tt4b.core.Dimension, 'run'> +} + +export type PopupOption = { + showName: boolean + topN: number + donutChart: boolean +} diff --git a/src/pages/side/Layout.tsx b/src/pages/side/Layout.tsx index 7eb6193bf..f122c95ce 100644 --- a/src/pages/side/Layout.tsx +++ b/src/pages/side/Layout.tsx @@ -1,26 +1,25 @@ +import { listSiteStats } from "@api/sw/stat" import { useRequest } from "@hooks" -import statService from "@service/stat-service" -import { formatTime } from "@util/time" +import Flex from '@pages/components/Flex' +import { formatTime, formatTimeYMD } from "@util/time" import { ElText } from "element-plus" -import { defineComponent, ref, type StyleValue } from "vue" +import { defineComponent, ref } from "vue" import RowList from "./components/RowList" import Search from "./components/Search" import { t } from "./locale" -const _default = defineComponent(() => { +const _default = defineComponent<{}>(() => { const date = ref(new Date()) const query = ref('') - const { data, refresh, loading } = useRequest(() => { - return statService.selectSite({ - date: date.value ?? new Date(), - query: query.value, - sortKey: 'focus', - sortDirection: 'DESC', - }) - }) + const { data, refresh, loading } = useRequest(() => listSiteStats({ + date: formatTimeYMD(date.value), + query: query.value, + sortKey: 'focus', + sortDirection: 'DESC', + }), { defaultValue: [] }) - return () => <div class="main"> + return () => <Flex column height='100%'> <Search defaultQuery={query.value} defaultDate={date.value} @@ -31,7 +30,7 @@ const _default = defineComponent(() => { refresh() }} /> - <div class="title"> + <Flex height={60} style={{ paddingInlineStart: '5px' }}> <ElText> {t(msg => msg.list.title)} </ElText> @@ -39,13 +38,9 @@ const _default = defineComponent(() => { <ElText size="small"> @{formatTime(date.value, t(msg => msg.calendar.dateFormat))} </ElText> - </div> - <RowList - loading={loading.value} - data={data.value ?? []} - style={{ flex: 1, overflow: "auto" } satisfies StyleValue} - /> - </div> + </Flex> + <RowList loading={loading.value} data={data.value} /> + </Flex> }) export default _default \ No newline at end of file diff --git a/src/pages/side/components/RowList/Item.tsx b/src/pages/side/components/RowList/Item.tsx index cf9063af1..1aea3e6be 100644 --- a/src/pages/side/components/RowList/Item.tsx +++ b/src/pages/side/components/RowList/Item.tsx @@ -1,13 +1,12 @@ import { createTab } from "@api/chrome/tab" -import { useShadow } from "@hooks" import Flex from "@pages/components/Flex" import { isRemainHost } from "@util/constant/remain-host" import { getAlias, getHost, isSite } from "@util/stat" import { formatPeriodCommon } from "@util/time" import { ElAvatar, ElCard, ElLink, ElProgress, ElTag, ElText, ElTooltip } from "element-plus" -import { computed, defineComponent, type PropType } from "vue" +import { computed, defineComponent, toRef } from "vue" -const renderTitle = (siteName: string | undefined, host: string | undefined, handleJump: () => void) => { +const renderTitle = (siteName: string | undefined, host: string | undefined, handleJump: NoArgCallback) => { const text = siteName ?? host ?? '' const tooltip = siteName ? host : null const textNode = <ElLink onClick={handleJump}>{text}</ElLink> @@ -15,93 +14,90 @@ const renderTitle = (siteName: string | undefined, host: string | undefined, han return ( <ElTooltip content={tooltip} placement="top" offset={4}> {textNode} - </ElTooltip > + </ElTooltip> ) } -const renderAvatarText = (row: timer.stat.Row) => { +const renderAvatarText = (row: tt4b.stat.Row) => { const alias = getAlias(row) if (alias) return alias.substring(0, 1)?.toUpperCase?.() return getHost(row)?.substring?.(0, 1)?.toUpperCase?.() } -const _default = defineComponent({ - props: { - value: { - type: Object as PropType<timer.stat.Row>, - required: true, - }, - max: Number, - total: Number, - }, - setup(props) { - const [iconUrl] = useShadow(() => 'iconUrl' in props.value ? props.value?.iconUrl : undefined) - const [host] = useShadow(() => getHost(props.value)) - const [siteName] = useShadow(() => getAlias(props.value)) - const clickable = computed(() => host?.value && !isRemainHost(host.value)) - const [rate] = useShadow(() => { - if (!props.max) return 0 - return (props.value?.focus ?? 0) / props.max * 100 - }, 0) - const [percentage] = useShadow(() => { - if (!props.total) return '0 %' - const val = (props.value?.focus ?? 0) / props.total * 100 - return val.toFixed(2) + ' %' - }) - const handleJump = () => clickable.value && createTab("https://" + host.value) - return () => ( - <ElCard - shadow="hover" - style={{ padding: '0 10px', height: '70px', boxSizing: 'border-box' }} - bodyStyle={{ padding: '5px', display: 'flex', height: 'calc(100% - 10px)' }} +type Props = { + value: tt4b.stat.Row + max?: number + total?: number +} + +const _default = defineComponent<Props>(props => { + const row = toRef(props, 'value') + const iconUrl = computed(() => 'iconUrl' in row.value ? row.value.iconUrl : undefined) + const host = computed(() => getHost(row.value)) + const siteName = computed(() => getAlias(row.value)) + const clickable = computed(() => host.value && !isRemainHost(host.value)) + const rate = computed(() => { + if (!props.max) return 0 + return (row.value?.focus ?? 0) / props.max * 100 + }) + const percentage = computed(() => { + if (!props.total) return '0 %' + const val = (row.value?.focus ?? 0) / props.total * 100 + return val.toFixed(2) + ' %' + }) + const handleJump = () => clickable.value && createTab("https://" + host.value) + return () => ( + <ElCard + shadow="hover" + style={{ padding: '0 10px', height: '70px', boxSizing: 'border-box' }} + bodyStyle={{ padding: '5px', display: 'flex', height: 'calc(100% - 10px)' }} + > + <Flex + width={50} + align="center" + justify="space-around" + boxSizing="content-box" + cursor={clickable.value ? 'pointer' : undefined} + onClick={handleJump} > - <Flex - width={50} - align="center" - justify="space-around" - boxSizing="content-box" - cursor={clickable.value ? 'pointer' : undefined} - onClick={handleJump} + <ElAvatar + src={iconUrl.value} + shape="square" + fit="fill" + style={{ + backgroundColor: isSite(props.value) && props.value.iconUrl ? "transparent" : null, + padding: '2px', + userSelect: 'none', + fontSize: '22px', + }} > - <ElAvatar - src={iconUrl.value} - shape="square" - fit="fill" - style={{ - backgroundColor: isSite(props.value) && props.value.iconUrl ? "transparent" : null, - padding: '2px', - userSelect: 'none', - fontSize: '22px', - }} + {renderAvatarText(props.value)} + </ElAvatar> + </Flex> + <Flex + column flex={1} + style={{ marginInlineStart: '10px', paddingInlineEnd: '10px' }} + > + <Flex align="center" justify="space-between" height={24}> + {renderTitle(siteName.value, host.value, handleJump)} + <ElTag + size="small" + style={{ fontSize: '10px', padding: '0 3px', height: '16px' }} > - {renderAvatarText(props.value)} - </ElAvatar> + {percentage.value} + </ElTag> </Flex> - <Flex - column flex={1} - style={{ marginInlineStart: '10px', paddingInlineEnd: '10px' }} - > - <Flex align="center" justify="space-between" height={24}> - {renderTitle(siteName.value, host.value, handleJump)} - <ElTag - size="small" - style={{ fontSize: '10px', padding: '0 3px', height: '16px' }} - > - {percentage.value} - </ElTag> - </Flex> - <Flex column justify="space-around" flex={1}> - <Flex justify="end" width="100%"> - <ElText size="small"> - {formatPeriodCommon(props.value?.focus ?? 0)} - </ElText> - </Flex> - <ElProgress percentage={rate.value} showText={false} /> + <Flex column justify="space-around" flex={1}> + <Flex justify="end" width="100%"> + <ElText size="small"> + {formatPeriodCommon(props.value?.focus ?? 0)} + </ElText> </Flex> + <ElProgress percentage={rate.value} showText={false} /> </Flex> - </ElCard > - ) - } -}) + </Flex> + </ElCard> + ) +}, { props: ['value', 'max', 'total'] }) export default _default \ No newline at end of file diff --git a/src/pages/side/components/RowList/index.tsx b/src/pages/side/components/RowList/index.tsx index 99f84bf14..f0a409277 100644 --- a/src/pages/side/components/RowList/index.tsx +++ b/src/pages/side/components/RowList/index.tsx @@ -1,36 +1,43 @@ +import { css } from '@emotion/css' import Flex from "@pages/components/Flex" import { sum } from "@util/array" -import { ElEmpty, ElScrollbar, type ScrollbarInstance } from "element-plus" -import { computed, type CSSProperties, defineComponent, type PropType, ref, toRef, watch } from "vue" +import { ElEmpty, ElScrollbar, type ScrollbarInstance, useNamespace } from "element-plus" +import { computed, type CSSProperties, defineComponent, ref, toRef, watch } from "vue" import Item from "./Item" -import "./row-list.sass" -const _default = defineComponent({ - props: { - loading: Boolean, - data: { - type: Array as PropType<timer.stat.Row[]>, - required: true, - }, - style: Object as PropType<CSSProperties>, - }, - setup(props) { - const data = toRef(props, 'data') - const maxFocus = computed(() => data.value.map(r => r.focus).reduce((a, b) => a > b ? a : b, 0) ?? 0) - const totalFocus = computed(() => sum(data.value.map(i => i?.focus ?? 0))) - const scrollbar = ref<ScrollbarInstance>() - watch(data, () => scrollbar.value?.setScrollTop(0)) - return () => ( - <Flex flex={1} style={props.style}> - <ElScrollbar v-loading={props.loading} height="100%" ref={scrollbar} style={{ width: '100%' }}> - <Flex column gap={8}> - {!data.value?.length && !props.loading && <ElEmpty class="row-list-empty" />} - {data.value?.map(item => <Item value={item} max={maxFocus.value} total={totalFocus.value} />)} - </Flex> - </ElScrollbar> - </Flex> - ) - } -}) +type Props = { + data: tt4b.stat.Row[] + loading?: boolean + style?: CSSProperties +} -export default _default \ No newline at end of file +const RowList = defineComponent<Props>(props => { + const data = toRef(props, 'data') + const maxFocus = computed(() => Math.max(0, ...data.value.map(r => r.focus))) + const totalFocus = computed(() => sum(data.value.map(i => i.focus))) + const scrollbar = ref<ScrollbarInstance>() + watch(data, () => scrollbar.value?.setScrollTop(0)) + + const emptyNs = useNamespace('empty') + const emptyCls = css` + & .${emptyNs.e('image')} { + display: none !important; + + & .${emptyNs.e('description')} { + margin-top: 0; + } + } + ` + return () => ( + <Flex flex={1} style={{ overflow: 'hidden' }}> + <ElScrollbar v-loading={props.loading} height="100%" ref={scrollbar} style={{ width: '100%' }}> + <Flex column gap={8}> + {!data.value.length && !props.loading && <ElEmpty class={emptyCls} />} + {data.value.map(item => <Item value={item} max={maxFocus.value} total={totalFocus.value} />)} + </Flex> + </ElScrollbar> + </Flex> + ) +}, { props: ['data', 'loading', 'style'] }) + +export default RowList \ No newline at end of file diff --git a/src/pages/side/components/RowList/row-list.sass b/src/pages/side/components/RowList/row-list.sass deleted file mode 100644 index 02e8b81b7..000000000 --- a/src/pages/side/components/RowList/row-list.sass +++ /dev/null @@ -1,5 +0,0 @@ -.row-list-empty - .el-empty__image - display: none !important - .el-empty__description - margin-top: 0 diff --git a/src/pages/side/components/Search/Cell.tsx b/src/pages/side/components/Search/Cell.tsx new file mode 100644 index 000000000..113133854 --- /dev/null +++ b/src/pages/side/components/Search/Cell.tsx @@ -0,0 +1,41 @@ +import { formatTimeYMD } from '@util/time' +import { type DateCell, useNamespace } from "element-plus" +import { computed, defineComponent } from 'vue' + +const DOT_SIZE = '3px' +const DATE_SIZE = '22px' + +const Cell = defineComponent<{ cell: DateCell, dataDates: string[] }>(props => { + const text = computed(() => { + const { renderText, text } = props.cell + return renderText ?? text + }) + const hasData = computed(() => { + const { date } = props.cell + if (!date) return false + const dateStr = formatTimeYMD(date) + return props.dataDates.includes(dateStr) + }) + const ns = useNamespace('date-table-cell') + + return () => ( + <div class={ns.b()}> + <span + class={ns.e('text')} + style={{ width: DATE_SIZE, height: DATE_SIZE, lineHeight: DATE_SIZE }} + >{text.value}</span> + {hasData.value && <span style={{ + position: 'absolute', + width: DOT_SIZE, + height: DOT_SIZE, + background: 'var(--el-color-primary)', + borderRadius: '50%', + bottom: '1px', + left: '50%', + transform: 'translateX(-50%)', + }} />} + </div> + ) +}, { props: ['cell', 'dataDates'] }) + +export default Cell diff --git a/src/pages/side/components/Search/index.tsx b/src/pages/side/components/Search/index.tsx index 18d272cdc..d80780590 100644 --- a/src/pages/side/components/Search/index.tsx +++ b/src/pages/side/components/Search/index.tsx @@ -1,11 +1,47 @@ -import { Search } from "@element-plus/icons-vue" import { useState } from "@hooks" +import { t } from '@side/locale' +import { Search } from "@element-plus/icons-vue" +import { css } from '@emotion/css' import Flex from "@pages/components/Flex" -import { getDatePickerIconSlots } from "@pages/element-ui/rtl" -import { t } from "@side/locale" -import { ElDatePicker, ElInput } from "element-plus" -import { defineComponent, watch } from "vue" -import "./search.sass" +import { getDatePickerIconSlots } from '@pages/element-ui/rtl' +import { type DateCell, ElDatePicker, ElInput, useNamespace } from "element-plus" +import { defineComponent, h } from "vue" +import Cell from './Cell' +import { useDatePicker } from './useDatePicker' + +const useCalendarStyle = () => { + const inputNs = useNamespace('input') + + const triggerCls = css` + width: fit-content !important; + + & .${inputNs.e('wrapper')} { + cursor: pointer; + background: none !important; + padding: 1px 0 !important; + + & .${inputNs.e('inner')} { + display: none; + } + + & .${inputNs.e('icon')} { + width: fit-content; + padding: 0px 8px; + margin-inline-end: 0 !important; + height: 100%; + } + } + ` + + const dateTableNs = useNamespace('date-table') + const popoverCls = css` + & .${dateTableNs.be('cell', 'text')} { + text-align: center; + } + ` + + return [triggerCls, popoverCls] +} type Props = { defaultDate: Date @@ -14,18 +50,18 @@ type Props = { } const _default = defineComponent<Props>(props => { - const now = Date.now() - const [query, setQuery] = useState(props.defaultQuery) - const [date, setDate] = useState(props.defaultDate) const handleSearch = () => props.onSearch?.(query.value.trim(), date.value) + const { + date, setDate, dataDates, + disabledDate, onPanelChange, + } = useDatePicker({ onChange: handleSearch }) - watch(date, handleSearch) + const [calendarCls, popoverCls] = useCalendarStyle() return () => ( - <Flex> + <Flex gap={4}> <ElInput - class="search" placeholder={t(msg => msg.list.searchPlaceholder)} prefixIcon={Search} modelValue={query.value} @@ -37,14 +73,19 @@ const _default = defineComponent<Props>(props => { }} onKeydown={kv => (kv as KeyboardEvent).code === 'Enter' && handleSearch()} /> - <ElDatePicker - clearable={false} - disabledDate={(date: Date) => date.getTime() > now} - modelValue={date.value} - onUpdate:modelValue={setDate} - class="search-calendar" - v-slots={getDatePickerIconSlots()} - /> + {/* The events of date picker is not compatible with typescript, so use h() to workaround */} + {h(ElDatePicker, { + clearable: false, + disabledDate, + modelValue: date.value, + 'onUpdate:modelValue': setDate, + class: calendarCls, + popperClass: popoverCls, + onPanelChange, + }, { + ...getDatePickerIconSlots(), + default: (cell: DateCell) => <Cell cell={cell} dataDates={dataDates.value} />, + })} </Flex> ) }, { props: ['defaultDate', 'defaultQuery', 'onSearch'] }) diff --git a/src/pages/side/components/Search/search.sass b/src/pages/side/components/Search/search.sass deleted file mode 100644 index f16244cb1..000000000 --- a/src/pages/side/components/Search/search.sass +++ /dev/null @@ -1,13 +0,0 @@ -.search-calendar - width: fit-content !important - margin-inline-start: 4px - .el-input__wrapper - cursor: pointer - background: none !important - padding: 1px 0 !important - .el-input__inner - display: none - .el-input__icon - padding: 0px 8px - margin-inline-end: 0 !important - height: 100% diff --git a/src/pages/side/components/Search/useDatePicker.ts b/src/pages/side/components/Search/useDatePicker.ts new file mode 100644 index 000000000..a7d7747cf --- /dev/null +++ b/src/pages/side/components/Search/useDatePicker.ts @@ -0,0 +1,37 @@ +import { listSiteStats } from '@api/sw/stat' +import { useRequest, useState } from '@hooks' +import { formatTimeYMD, getMonthTime, MILL_PER_WEEK } from '@util/time' +import { watch } from 'vue' + +export const useDatePicker = (options: { onChange: ArgCallback<Date> }) => { + const { onChange } = options + const [date, setDate] = useState(new Date()) + + watch(date, val => onChange(val)) + + const { data: dataDates, refresh: refreshDates } = useRequest(async (dateInMonth: Date) => { + const [ms, me] = getMonthTime(dateInMonth) + const start = formatTimeYMD(new Date(ms.getTime() - ms.getDay() * MILL_PER_WEEK)) + const end = formatTimeYMD(new Date(me.getTime() + (6 - me.getDay()) * MILL_PER_WEEK)) + + const stats = await listSiteStats({ date: [start, end] }) + const dateSet = new Set<string>() + stats.forEach(({ date }) => date && dateSet.add(date)) + return Array.from(dateSet) + }, { defaultValue: [], defaultParam: [new Date()] }) + + const onPanelChange = (val: Date | Date[], mode: 'year' | 'month') => { + if (mode !== 'month') return + const date = Array.isArray(val) ? val[0] : val + if (!date) return + refreshDates(date) + } + + const disabledDate = (date: Date) => date.getTime() > Date.now() + + return { + dataDates, date, setDate, + onPanelChange, + disabledDate, + } +} \ No newline at end of file diff --git a/src/pages/side/index.ts b/src/pages/side/index.ts index 8eed4bbea..e78096549 100644 --- a/src/pages/side/index.ts +++ b/src/pages/side/index.ts @@ -5,29 +5,22 @@ * https://opensource.org/licenses/MIT */ import { initLocale } from "@i18n" -import { initElementLocale } from "@i18n/element" -import optionService from "@service/option-service" -import { init as initTheme, toggle } from "@util/dark-mode" -import { ElLoadingDirective } from 'element-plus' -import 'element-plus/theme-chalk/index.css' -import { type App, createApp } from "vue" -import '../../common/timer' +import { createElApp } from "@pages/element-ui/app" +import { initDarkTheme } from "@pages/util/dark-mode" import Main from "./Layout" -import "./style.sass" +import { injectGlobalCss } from './style' async function main() { - // Init theme with cache first - initTheme() - // Calculate the latest mode - optionService.isDarkMode().then(toggle) - await initLocale() - const app: App = createApp(Main) - await initElementLocale(app) - app.directive("loading", ElLoadingDirective) + initDarkTheme() + injectGlobalCss() + initLocale() + const app = await createElApp(Main) const el = document.createElement('div') document.body.append(el) el.id = 'app' + el.style.height = '100%' + el.style.overflow = 'hidden' app.mount(el) } diff --git a/src/pages/side/locale.ts b/src/pages/side/locale.ts index ebf117f66..77c45c81a 100644 --- a/src/pages/side/locale.ts +++ b/src/pages/side/locale.ts @@ -8,7 +8,7 @@ import { type I18nKey as _I18nKey, t as _t } from "@i18n" import messages, { type SideMessage } from "@i18n/message/side" -export type I18nKey = _I18nKey<SideMessage> +type I18nKey = _I18nKey<SideMessage> export const t = (key: I18nKey, param?: any) => { const props = { key, param } diff --git a/src/pages/side/style.sass b/src/pages/side/style.sass deleted file mode 100644 index 7126e5550..000000000 --- a/src/pages/side/style.sass +++ /dev/null @@ -1,24 +0,0 @@ -@use '../element-ui/dark-theme' - -body - padding: 18px - margin: 0px - height: 100vh - box-sizing: border-box - text-align: unset !important - background-color: var(--el-fill-color-dark) -#app - height: 100% - overflow: hidden - .main - display: flex - flex-direction: column - height: 100% - .title - display: flex - height: 60px - padding-inline-start: 5px - .el-text - display: flex - align-items: center - height: 100% diff --git a/src/pages/side/style.ts b/src/pages/side/style.ts new file mode 100644 index 000000000..c95e9f11e --- /dev/null +++ b/src/pages/side/style.ts @@ -0,0 +1,15 @@ +import { injectGlobal } from '@emotion/css' +import '@pages/element-ui/dark-theme.css' + +export const injectGlobalCss = () => { + injectGlobal` + body { + padding: 18px; + margin: 0px; + height: 100vh; + box-sizing: border-box; + text-align: unset !important; + background-color: var(--el-fill-color-dark); + } + ` +} diff --git a/src/pages/util/dark-mode.ts b/src/pages/util/dark-mode.ts new file mode 100644 index 000000000..ccbb8b55f --- /dev/null +++ b/src/pages/util/dark-mode.ts @@ -0,0 +1,66 @@ +/** + * Copyright (c) 2022-present Hengyang Zhang + * + * This software is released under the MIT License. + * https://opensource.org/licenses/MIT + */ + +import { getOption } from '@api/sw/option' + +const THEME_ATTR = "data-theme" +const DARK_VAL = "dark" +const STORAGE_KEY = "isDark" +const STORAGE_FLAG = "1" + +function toggle0(isDarkMode: boolean, el?: Element) { + el ??= document.getElementsByTagName("html")?.[0] + el?.setAttribute(THEME_ATTR, isDarkMode ? DARK_VAL : "") + localStorage.setItem(STORAGE_KEY, isDarkMode ? STORAGE_FLAG : '') +} + +/** + * Init from local storage + */ +export function initDarkTheme(el?: Element) { + const val = isDarkMode() + toggle0(val, el) + // Calculate the latest mode + getOption().then(processDarkMode) +} + +function calcDarkMode(option: tt4b.option.AppearanceOption): boolean { + const { darkMode, darkModeTimeStart: start, darkModeTimeEnd: end } = option + if (darkMode === "default") { + if (typeof window === 'undefined') return false + return !!window.matchMedia('(prefers-color-scheme: dark)')?.matches + } else if (darkMode === "on") { + return true + } else if (darkMode === "off") { + return false + } else if (darkMode === "timed") { + if (start === undefined || end === undefined) { + return false + } + const now = new Date() + const currentSecs = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() + if (start > end) { + // Mostly + return start <= currentSecs || currentSecs <= end + } else if (start < end) { + return start <= currentSecs && currentSecs <= end + } else { + return currentSecs === start + } + } + return false +} + +export function processDarkMode(option: tt4b.option.AppearanceOption): boolean { + const val = calcDarkMode(option) + toggle0(val) + return val +} + +export function isDarkMode() { + return localStorage.getItem(STORAGE_KEY) === STORAGE_FLAG +} \ No newline at end of file diff --git a/src/pages/util/echarts.ts b/src/pages/util/echarts.ts new file mode 100644 index 000000000..f25218690 --- /dev/null +++ b/src/pages/util/echarts.ts @@ -0,0 +1,18 @@ +import { + BarChart, CustomChart, EffectScatterChart, GaugeChart, LineChart, PieChart, ScatterChart, +} from "echarts/charts" +import { + AriaComponent, DataZoomComponent, GridComponent, LegendComponent, MarkLineComponent, TitleComponent, ToolboxComponent, + TooltipComponent, VisualMapComponent, +} from "echarts/components" +import { use } from "echarts/core" +import { CanvasRenderer } from "echarts/renderers" + +export const initEcharts = () => { + use([ + CanvasRenderer, + ToolboxComponent, AriaComponent, GridComponent, TooltipComponent, TitleComponent, VisualMapComponent, LegendComponent, + DataZoomComponent, MarkLineComponent, + BarChart, PieChart, LineChart, ScatterChart, EffectScatterChart, CustomChart, GaugeChart, + ]) +} \ No newline at end of file diff --git a/src/pages/util/qrcode.ts b/src/pages/util/qrcode.ts new file mode 100644 index 000000000..4c5492fdf --- /dev/null +++ b/src/pages/util/qrcode.ts @@ -0,0 +1,43 @@ +import qrcode from 'qrcode-generator' + +type GenerateQrCanvasOption = { + text: string + size: number + margin?: number + errorCorrectionLevel?: 'L' | 'M' | 'Q' | 'H' +} + +export function generateQrCanvas(option: GenerateQrCanvasOption): HTMLCanvasElement { + const { text, size, margin = 1, errorCorrectionLevel = 'M' } = option + const qr = qrcode(0, errorCorrectionLevel) + qr.addData(text) + qr.make() + + const moduleCount = qr.getModuleCount() + const totalModules = moduleCount + margin * 2 + const scale = Math.max(1, Math.floor(size / totalModules)) + const canvasSize = totalModules * scale + + const canvas = document.createElement('canvas') + canvas.width = canvasSize + canvas.height = canvasSize + const ctx = canvas.getContext('2d') + if (!ctx) throw new Error('Failed to create QR canvas context') + + ctx.fillStyle = '#fff' + ctx.fillRect(0, 0, canvasSize, canvasSize) + ctx.fillStyle = '#000' + + for (let row = 0; row < moduleCount; row++) { + for (let col = 0; col < moduleCount; col++) { + if (!qr.isDark(row, col)) continue + ctx.fillRect((col + margin) * scale, (row + margin) * scale, scale, scale) + } + } + + return canvas +} + +export function generateQrDataUrl(option: GenerateQrCanvasOption): string { + return generateQrCanvas(option).toDataURL('image/png') +} diff --git a/src/pages/util/rate.ts b/src/pages/util/rate.ts new file mode 100644 index 000000000..ec3f519cc --- /dev/null +++ b/src/pages/util/rate.ts @@ -0,0 +1,20 @@ +import { trySendMsg2Runtime } from '@api/sw/common' +import { REVIEW_PAGE } from '@util/constant/url' +import { getDayLength } from '@util/time' + +const INSTALL_DAY_MIN_LIMIT = 14 + +const FLAG = 'rateOpen' + +export async function recommendRate(): Promise<boolean> { + if (!REVIEW_PAGE) return false + const installTime = await trySendMsg2Runtime('meta.installTs') + if (!installTime) return false + const installedDays = getDayLength(new Date(installTime), new Date()) + if (installedDays < INSTALL_DAY_MIN_LIMIT) return false + return !localStorage.getItem(FLAG) +} + +export function rateClicked() { + localStorage.setItem(FLAG, '1') +} \ No newline at end of file diff --git a/src/pages/util/style.ts b/src/pages/util/style.ts index 54bdd7d6e..f53312a61 100644 --- a/src/pages/util/style.ts +++ b/src/pages/util/style.ts @@ -6,6 +6,29 @@ */ import { camelize, type CSSProperties } from "vue" +type Variant = "primary" | "success" | "warning" | "info" | "danger" + +export type ColorVariant = Variant + +type TextVariant = "primary" | "regular" | "secondary" + +type ColorUsage = 'fill' + +export const colorVariant = (variant: Variant, effect?: 'dark' | 'light', level?: number) => { + let res = `--el-color-${variant}` + if (effect) { + res += `-${effect}` + if (level !== undefined) { + res += `-${level}` + } + } + return res +} + +export const colorUsage = (usage: ColorUsage) => `--el-${usage}-color` + +const textColor = (variant: TextVariant) => `--el-text-color-${variant}` + export const getStyle = ( element: HTMLElement, styleName: keyof CSSProperties @@ -34,17 +57,36 @@ export function getCssVariable(varName: string, eleOrSelector?: HTMLElement | st } export function getPrimaryTextColor(): string | undefined { - return getCssVariable("--el-text-color-primary") + return getCssVariable(textColor("primary")) } export function getRegularTextColor(): string | undefined { - return getCssVariable("--el-text-color-regular") + return getCssVariable(textColor("regular")) } export function getSecondaryTextColor(): string | undefined { - return getCssVariable("--el-text-color-secondary") + return getCssVariable(textColor("secondary")) } export function getInfoColor(): string | undefined { - return getCssVariable("--el-color-info") + return getColor('info') +} + +export function getColor(variant: Variant): string | undefined { + return getCssVariable(colorVariant(variant)) +} + +export const cvtGroupColor = (color?: `${chrome.tabGroups.Color}`): string => { + switch (color) { + case 'grey': return '#5F6369' + case 'blue': return '#1974E8' + case 'yellow': return '#F9AB03' + case 'red': return '#DA3025' + case 'green': return '#198139' + case 'pink': return '#D01984' + case 'purple': return '#A143F5' + case 'cyan': return '#027B84' + case 'orange': return '#FA913E' + case undefined: return '#000' + } } diff --git a/src/service/backup/processor.ts b/src/service/backup/processor.ts deleted file mode 100644 index 63df59955..000000000 --- a/src/service/backup/processor.ts +++ /dev/null @@ -1,271 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import syncDb from "@db/backup-database" -import optionHolder from "@service/components/option-holder" -import itemService from "@service/item-service" -import metaService from "@service/meta-service" -import { formatTimeYMD, getBirthday } from "@util/time" -import GistCoordinator from "./gist/coordinator" -import ObsidianCoordinator from "./obsidian/coordinator" -import WebDAVCoordinator from "./web-dav/coordinator" - -export type AuthCheckResult = { - option: timer.option.BackupOption - auth: timer.backup.Auth - ext: timer.backup.TypeExt - type: timer.backup.Type - coordinator: timer.backup.Coordinator<unknown> - errorMsg?: string -} - -class CoordinatorContextWrapper<Cache> implements timer.backup.CoordinatorContext<Cache> { - auth: timer.backup.Auth - ext?: timer.backup.TypeExt - cache: Cache = {} as unknown as Cache - type: timer.backup.Type - cid: string - - constructor(cid: string, auth: timer.backup.Auth, ext: timer.backup.TypeExt, type: timer.backup.Type) { - this.cid = cid - this.auth = auth - this.ext = ext - this.type = type - } - - async init(): Promise<timer.backup.CoordinatorContext<Cache>> { - this.cache = await syncDb.getCache(this.type) as Cache - return this - } - - handleCacheChanged(): Promise<void> { - return syncDb.updateCache(this.type, this.cache) - } -} - -/** - * Declare type of NavigatorUAData - */ -type NavigatorUAData = { - brands?: { - brand?: string - version?: string - }[] - platform?: string -} - -type Result<T> = { - success: boolean - errorMsg?: string - data?: T -} - -function error<T>(msg: string): Result<T> { - return { success: false, errorMsg: msg, } -} - -function success<T>(data?: T): Result<T> { - return { success: true, data } -} - -function generateCid() { - const uaData = (navigator as any)?.userAgentData as NavigatorUAData - let prefix = 'unknown' - if (uaData) { - const brand = uaData.brands - ?.map(e => e.brand) - ?.filter(brand => brand && brand !== "Chromium" && !brand.includes("Not")) - ?.[0] - ?.replace(' ', '-') - const platform = uaData.platform - brand && platform && (prefix = `${platform.toLowerCase()}-${brand.toLowerCase()}`) - } - return prefix + '-' + new Date().getTime() -} - -/** - * Get client id or generate it lazily - */ -async function lazyGetCid(): Promise<string> { - let cid = await metaService.getCid() - if (!cid) { - cid = generateCid() - await metaService.updateCid(cid) - } - return cid -} - -async function syncFull( - context: timer.backup.CoordinatorContext<unknown>, - coordinator: timer.backup.Coordinator<unknown>, - client: timer.backup.Client -): Promise<timer.backup.Snapshot> { - // 1. select rows - let start = getBirthday() - let end = new Date() - const rows = await itemService.selectItems({ date: [start, end] }) - const allDates = rows.map(r => r.date).sort((a, b) => a == b ? 0 : a > b ? 1 : -1) - client.maxDate = allDates[allDates.length - 1] - client.minDate = allDates[0] - // 2. upload - await coordinator.upload(context, rows) - return { - ts: end.getTime(), - date: formatTimeYMD(end), - } -} - -function filterClient(c: timer.backup.Client, excludeLocal: boolean, localClientId: string, start?: string, end?: string) { - // Exclude local client - if (excludeLocal && c.id === localClientId) return false - // Judge range - if (start && c.maxDate && c.maxDate < start) return false - if (end && c.minDate && c.minDate > end) return false - return true -} - -function prepareAuth(option: timer.option.BackupOption): timer.backup.Auth { - const type = option?.backupType || 'none' - const token = option?.backupAuths?.[type] - const login = option.backupLogin?.[type] - return { token, login } -} - -export type RemoteQueryParam = { - start: Date - end: Date - specCid?: string - excludeLocal?: boolean -} - -class Processor { - coordinators: { - [type in timer.backup.Type]: timer.backup.Coordinator<unknown> - } - - constructor() { - this.coordinators = { - none: null as unknown as timer.backup.Coordinator<never>, - gist: new GistCoordinator(), - obsidian_local_rest_api: new ObsidianCoordinator(), - web_dav: new WebDAVCoordinator(), - } - } - - async syncData(): Promise<Result<number>> { - const { option, auth, ext, type, coordinator, errorMsg } = await this.checkAuth() - if (errorMsg) return error(errorMsg) - - const cid = await lazyGetCid() - const context: timer.backup.CoordinatorContext<unknown> = await new CoordinatorContextWrapper<unknown>(cid, auth, ext, type).init() - const client: timer.backup.Client = { - id: cid, - name: option.clientName, - minDate: undefined, - maxDate: undefined - } - try { - let snapshot: timer.backup.Snapshot = await syncFull(context, coordinator, client) - await syncDb.updateSnapshot(type, snapshot) - const clients: timer.backup.Client[] = (await coordinator.listAllClients(context)).filter(a => a.id !== cid) || [] - clients.push(client) - await coordinator.updateClients(context, clients) - // Update time - const now = Date.now() - metaService.updateBackUpTime(type, now) - return success(now) - } catch (e) { - console.error("Error to sync data", e) - const msg = (e as Error)?.message ?? e?.toString?.() - return error(msg) - } - } - - async listClients(): Promise<Result<timer.backup.Client[]>> { - const { auth, ext, type, coordinator, errorMsg } = await this.checkAuth() - if (errorMsg) return error(errorMsg) - const cid = await lazyGetCid() - const context: timer.backup.CoordinatorContext<unknown> = await new CoordinatorContextWrapper<unknown>(cid, auth, ext, type).init() - const clients = await coordinator.listAllClients(context) - return success(clients) - } - - async checkAuth(): Promise<AuthCheckResult> { - const option = await optionHolder.get() - const { backupType: type, backupExts } = option - const ext = backupExts?.[type] ?? {} - const auth = prepareAuth(option) - - const coordinator: timer.backup.Coordinator<unknown> = type && this.coordinators[type] - if (!coordinator) { - // no coordinator, do nothing - return { option, auth, ext, type, coordinator, errorMsg: "Invalid type" } - } - let errorMsg - try { - errorMsg = await coordinator.testAuth(auth, ext) - } catch (e) { - errorMsg = (e as Error)?.message || 'Unknown error' - } - return { option, auth, ext, type, coordinator, errorMsg } - } - - async query(param: RemoteQueryParam): Promise<timer.backup.Row[]> { - const { type, coordinator, auth, ext, errorMsg } = await this.checkAuth() - if (errorMsg || !coordinator) { - return [] - } - - const { start = getBirthday(), end, specCid, excludeLocal } = param - let localCid = await lazyGetCid() - // 1. init context - const context: timer.backup.CoordinatorContext<unknown> = await new CoordinatorContextWrapper<unknown>(localCid, auth, ext, type).init() - // 2. query all clients, and filter them - let startStr = start ? formatTimeYMD(start) : undefined - let endStr = end ? formatTimeYMD(end) : undefined - const allClients = (await coordinator.listAllClients(context)) - .filter(c => filterClient(c, !!excludeLocal, localCid, startStr, endStr)) - .filter(c => !specCid || c.id === specCid) - // 3. iterate clients - const result: timer.backup.Row[] = [] - await Promise.all( - allClients.map(async client => { - const { id, name } = client - const rows = await coordinator.download(context, start, end, id) - rows.forEach(row => result.push({ - ...row, - cid: id, - cname: name, - })) - }) - ) - console.log(`Queried ${result.length} remote items`) - return result - } - - async clear(cid: string): Promise<Result<void>> { - const { auth, ext, type, coordinator, errorMsg } = await this.checkAuth() - if (errorMsg) return error(errorMsg) - let localCid = await lazyGetCid() - const context: timer.backup.CoordinatorContext<unknown> = await new CoordinatorContextWrapper<unknown>(localCid, auth, ext, type).init() - // 1. Find the client - const allClients = await coordinator.listAllClients(context) - const client = allClients?.filter(c => c?.id === cid)?.[0] - if (!client) { - return success() - } - // 2. clear - await coordinator.clear(context, client) - // 3. remove client - const newClients = allClients.filter(c => c?.id !== cid) - await coordinator.updateClients(context, newClients) - - return success() - } -} - -export default new Processor() \ No newline at end of file diff --git a/src/service/cate-service.ts b/src/service/cate-service.ts deleted file mode 100644 index 569509e58..000000000 --- a/src/service/cate-service.ts +++ /dev/null @@ -1,22 +0,0 @@ -import siteCateDatabase from "@db/site-cate-database" - -class CateService { - - listAll(): Promise<timer.site.Cate[]> { - return siteCateDatabase.listAll() - } - - add(name: string): Promise<timer.site.Cate> { - return siteCateDatabase.add(name) - } - - saveName(id: number, name: string): Promise<void> { - return siteCateDatabase.update(id, name) - } - - remove(id: number): Promise<void> { - return siteCateDatabase.delete(id) - } -} - -export default new CateService() \ No newline at end of file diff --git a/src/service/components/immigration.ts b/src/service/components/immigration.ts deleted file mode 100644 index cc74ad70e..000000000 --- a/src/service/components/immigration.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import BaseDatabase from "@db/common/base-database" -import StoragePromise from "@db/common/storage-promise" -import limitDatabase from "@db/limit-database" -import mergeRuleDatabase from "@db/merge-rule-database" -import periodDatabase from "@db/period-database" -import siteCateDatabase from "@db/site-cate-database" -import statDatabase from "@db/stat-database" -import whitelistDatabase from "@db/whitelist-database" -import packageInfo from "@src/package" - -type MetaInfo = { - version: string - ts: number -} - -export type BackupData = { - __meta__: MetaInfo -} & any - -function initDatabase(): BaseDatabase[] { - const result: BaseDatabase[] = [ - statDatabase, - periodDatabase, - limitDatabase, - mergeRuleDatabase, - whitelistDatabase, - siteCateDatabase, - ] - - return result -} - -/** - * Data is citizens - * - * @since 0.2.5 - */ -class Immigration { - private storage: StoragePromise - private databaseArray: BaseDatabase[] - - constructor() { - const localStorage = chrome.storage.local - this.storage = new StoragePromise(localStorage) - this.databaseArray = initDatabase() - } - - async getExportingData(): Promise<BackupData> { - const data = await this.storage.get() as BackupData - const meta: MetaInfo = { version: packageInfo.version, ts: Date.now() } - data.__meta__ = meta - return data - } - - async importData(data: any): Promise<void> { - for (const db of this.databaseArray) await db.importData(data) - } -} - -export default Immigration \ No newline at end of file diff --git a/src/service/components/import-processor.ts b/src/service/components/import-processor.ts deleted file mode 100644 index e76d49546..000000000 --- a/src/service/components/import-processor.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import statDatabase from "@db/stat-database" -import { isNotZeroResult } from "@util/stat" - -/** - * Process imported data from other extensions of remote - * - * @since 1.9.2 - */ -export async function processImportedData(data: timer.imported.Data, resolution: timer.imported.ConflictResolution): Promise<void> { - if (resolution === 'overwrite') { - return processOverwrite(data) - } else { - return processAcc(data) - } -} - -async function processOverwrite(data: timer.imported.Data): Promise<void> { - const { rows, focus, time } = data - await Promise.all(rows.map(async row => { - const { host, date } = row - const exist = await statDatabase.get(host, date) - focus && (exist.focus = row.focus || 0) - time && (exist.time = row.time || 0) - await statDatabase.forceUpdate({ host, date, ...exist }) - })) -} - -async function processAcc(data: timer.imported.Data): Promise<void> { - const { rows } = data - await Promise.all(rows.map(async row => { - const { host, date, focus = 0, time = 0 } = row - await statDatabase.accumulate(host, date, { focus, time }) - })) -} - -export async function fillExist(rows: timer.imported.Row[]): Promise<void> { - await Promise.all(rows.map(async row => { - const { host, date } = row - const exist = await statDatabase.get(host, date) - isNotZeroResult(exist) && (row.exist = exist) - })) -} \ No newline at end of file diff --git a/src/service/components/option-holder.ts b/src/service/components/option-holder.ts deleted file mode 100644 index b5e542d8c..000000000 --- a/src/service/components/option-holder.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { onPermRemoved } from "@api/chrome/permission" -import db from "@db/option-database" -import { type DefaultOption, defaultOption } from "@util/constant/option" - -type ChangeListener = (option: timer.option.AllOption) => void - -class OptionHolder { - private option: DefaultOption | undefined - private listeners: ChangeListener[] = [] - - constructor() { - db.addOptionChangeListener(async () => { - const option = await this.reset() - this.listeners.forEach(listener => listener?.(option)) - }) - onPermRemoved(perm => { - perm.permissions?.includes('tabGroups') && this.set({ countTabGroup: false }) - }) - } - - listenPermChange() { - onPermRemoved(perm => { - perm.permissions?.includes('tabGroups') && this.set({ countTabGroup: false }) - }) - } - - private async reset(): Promise<DefaultOption> { - const exist: Partial<timer.option.AllOption> = await db.getOption() - const result = defaultOption() - Object.entries(exist).forEach(([key, val]) => (result as any)[key] = val) - this.option = result - return result - } - - async get(): Promise<DefaultOption> { - return this.option ?? await this.reset() - } - - async set(option: Partial<timer.option.AllOption>): Promise<void> { - const exist: Partial<timer.option.AllOption> = await db.getOption() - const toSet = defaultOption() - Object.entries(exist).forEach(([key, val]) => (toSet as any)[key] = val) - Object.entries(option).forEach(([key, val]) => (toSet as any)[key] = val) - await db.setOption(toSet) - } - - addChangeListener(listener: ChangeListener) { - listener && this.listeners.push(listener) - } -} - -export default new OptionHolder() \ No newline at end of file diff --git a/src/service/components/virtual-site-holder.ts b/src/service/components/virtual-site-holder.ts deleted file mode 100644 index 835bb61eb..000000000 --- a/src/service/components/virtual-site-holder.ts +++ /dev/null @@ -1,45 +0,0 @@ -import siteDatabase from "@db/site-database" -import { compileAntPattern } from '@util/pattern' - -/** - * The singleton implementation of virtual sites holder - * - * @since 1.6.0 - */ -class VirtualSiteHolder { - hostSiteRegMap: Record<string, RegExp> = {} - - constructor() { - siteDatabase.select().then(sitesInfos => sitesInfos - .filter(s => s.type === 'virtual') - .forEach(site => this.updateRegularExp(site)) - ) - siteDatabase.addChangeListener(oldAndNew => oldAndNew.forEach(([oldVal, newVal]) => { - if (!newVal) { - // deleted - delete this.hostSiteRegMap[oldVal.host] - } else { - this.updateRegularExp(newVal) - } - })) - } - - private updateRegularExp(siteInfo: timer.site.SiteInfo) { - const { host } = siteInfo - this.hostSiteRegMap[host] = compileAntPattern(host) - } - - /** - * Find the virtual sites which matches the target url - * - * @param url - * @returns virtual sites - */ - findMatched(url: string): string[] { - return Object.entries(this.hostSiteRegMap) - .filter(([_, reg]) => reg.test(url)) - .map(([k]) => k) - } -} - -export default new VirtualSiteHolder() \ No newline at end of file diff --git a/src/service/components/week-helper.ts b/src/service/components/week-helper.ts deleted file mode 100644 index e42567566..000000000 --- a/src/service/components/week-helper.ts +++ /dev/null @@ -1,77 +0,0 @@ -import optionDatabase from "@db/option-database" -import { locale } from "@i18n" -import { formatTimeYMD, getWeekDay, MILL_PER_DAY } from "@util/time" - -function getRealWeekStart(weekStart: timer.option.WeekStartOption | undefined, locale: timer.Locale): number { - weekStart = weekStart ?? 'default' - if (weekStart === 'default') { - return locale === 'zh_CN' ? 0 : 6 - } else { - return weekStart - 1 - } -} - -/** - * Get the start time and end time of this week - * @param now the specific time - * @param weekStart 0-6 - * @returns [startTime, endTime] - * - * @since 0.6.0 - */ -function getWeekTime(now: Date, weekStart: number): [Date, Date] { - // Returns 0 - 6 means Monday to Sunday - const weekDayNow = getWeekDay(now) - let start: Date | undefined = undefined - if (weekDayNow === weekStart) { - start = now - } else if (weekDayNow < weekStart) { - const millDelta = (weekDayNow + 7 - weekStart) * MILL_PER_DAY - start = new Date(now.getTime() - millDelta) - } else { - const millDelta = (weekDayNow - weekStart) * MILL_PER_DAY - start = new Date(now.getTime() - millDelta) - } - return [start, now] -} - -class WeekHelper { - private weekStart: timer.option.WeekStartOption | undefined - private initialized: boolean = false - - private async init(): Promise<void> { - const option = await optionDatabase.getOption() - this.weekStart = option?.weekStart - optionDatabase.addOptionChangeListener(val => this.weekStart = val?.weekStart) - this.initialized = true - } - - async getWeekDateRange(now: Date): Promise<[startDate: string, endDateOrToday: string]> { - const [start, end] = await this.getWeekDate(now) - return [formatTimeYMD(start), formatTimeYMD(end)] - } - - async getWeekDate(now: Date | number): Promise<[start: Date, end: Date]> { - const weekStart = await this.getRealWeekStart() - return getWeekTime(typeof now === 'number' ? new Date(now) : now, weekStart) - } - - private async getWeekStartOpt(): Promise<timer.option.WeekStartOption | undefined> { - if (!this.initialized) { - await this.init() - } - return this.weekStart - } - - /** - * Week start - * - * @returns 0-6 - */ - async getRealWeekStart(): Promise<number> { - const weekStart = await this.getWeekStartOpt() - return getRealWeekStart(weekStart, locale) - } -} - -export default new WeekHelper() \ No newline at end of file diff --git a/src/service/limit-service/index.ts b/src/service/limit-service/index.ts deleted file mode 100644 index 09d81b4ce..000000000 --- a/src/service/limit-service/index.ts +++ /dev/null @@ -1,233 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { listTabs, sendMsg2Tab } from "@api/chrome/tab" -import db from "@db/limit-database" -import optionHolder from "@service/components/option-holder" -import weekHelper from "@service/components/week-helper" -import whitelistHolder from "@service/whitelist/holder" -import { sum } from "@util/array" -import { calcTimeState, hasLimited, isEnabledAndEffective, matches } from "@util/limit" -import { formatTimeYMD, MILL_PER_MINUTE } from "@util/time" - -export type QueryParam = { - filterDisabled: boolean - id?: number - url?: string -} - -async function select(cond?: QueryParam): Promise<timer.limit.Item[]> { - const { filterDisabled, url, id } = cond || {} - const now = new Date() - const today = formatTimeYMD(now) - const [startDate, endDate] = await weekHelper.getWeekDateRange(now) - - return (await db.all()) - .filter(item => !filterDisabled || item.enabled) - .filter(item => !id || id === item?.id) - // If use url, then test it - .filter(item => !url || matches(item?.cond, url)) - .map(({ records, ...others }) => { - const todayRec = records[today] - const thisWeekRec = Object.entries(records) - .filter(([k]) => k >= startDate && k <= endDate) - .map(([, v]) => v) - const weeklyWaste = sum(thisWeekRec.map(r => r.mill ?? 0)) - const weeklyDelayCount = sum(thisWeekRec.map(r => r.delay ?? 0)) - const weeklyVisit = sum(thisWeekRec.map(r => r.visit ?? 0)) - return { - ...others, - waste: todayRec?.mill ?? 0, - visit: todayRec?.visit ?? 0, - delayCount: todayRec?.delay ?? 0, - weeklyWaste, - weeklyDelayCount, - weeklyVisit, - } satisfies timer.limit.Item - }) -} - -async function selectEffective(url?: string) { - const enabledItems: timer.limit.Item[] = await select({ filterDisabled: true, url }) - return enabledItems?.filter(isEnabledAndEffective) || [] -} - -/** - * Fired if the item is removed or disabled - * - * @param item - */ -async function noticeLimitChanged() { - const effectiveItems = await selectEffective() - const tabs = await listTabs() - tabs.forEach(({ id, url }) => { - if (!id || !url) return - const limitedItems = effectiveItems.filter(item => matches(item?.cond, url)) - sendMsg2Tab(id, 'limitChanged', limitedItems).catch(err => console.warn(err.message)) - }) -} - -async function updateEnabled(...items: timer.limit.Rule[]): Promise<void> { - if (!items?.length) return - for (const item of items) { - await db.updateEnabled(item.id, !!item.enabled) - } - await noticeLimitChanged() -} - -async function updateLocked(...items: timer.limit.Rule[]): Promise<void> { - if (!items?.length) return - for (const item of items) { - await db.updateLocked(item.id, item.locked) - } -} - -async function updateDelay(...items: timer.limit.Rule[]) { - if (!items?.length) return - for (const item of items) { - await db.updateDelay(item.id, !!item.allowDelay) - } - await noticeLimitChanged() -} - -async function remove(...items: timer.limit.Rule[]): Promise<void> { - if (!items?.length) return - for (const item of items) { - await db.remove(item.id) - } - await noticeLimitChanged() -} - -async function getLimited(url: string): Promise<timer.limit.Item[]> { - const list: timer.limit.Item[] = await getRelated(url) - return list.filter(item => hasLimited(item)) -} - -async function getRelated(url: string): Promise<timer.limit.Item[]> { - const effectiveItems = await selectEffective() - return effectiveItems.filter(item => matches(item?.cond, url)) -} - -type IncreaseResult = { - limited?: timer.limit.Item[] - reminder?: timer.limit.ReminderInfo -} - -/** - * Add time - * - * @param url url - * @param focusTime time, milliseconds - * @returns the rules is limit cause of this operation - */ -async function addFocusTime(host: string, url: string, focusTime: number): Promise<IncreaseResult> { - if (whitelistHolder.contains(host, url)) return {} - - const allEffective = await selectEffective(url) - - const toUpdate: { [cond: string]: number } = {} - const limited: timer.limit.Item[] = [] - const needReminder: timer.limit.Item[] = [] - - const { limitReminder, limitReminderDuration = 0 } = await optionHolder.get() - const durationMill = limitReminder ? limitReminderDuration * MILL_PER_MINUTE : 0 - allEffective.forEach(item => { - const [met, reminder] = addFocusForEach(item, focusTime, durationMill) - met && limited.push(item) - reminder && needReminder.push(item) - toUpdate[item.id] = item.waste - }) - const result: IncreaseResult = { limited } - if (needReminder?.length) { - result.reminder = { - items: needReminder, - duration: limitReminderDuration, - } - } - await db.updateWaste(formatTimeYMD(new Date()), toUpdate) - return result -} - -function addFocusForEach(item: timer.limit.Item, focusTime: number, durationMill: number): [met: boolean, reminder: boolean] { - const before = calcTimeState(item, durationMill) - item.waste += focusTime - // Fast increase - item.weeklyWaste += focusTime - const after = calcTimeState(item, durationMill) - const met = (before.daily !== 'LIMITED' && after.daily === 'LIMITED') || (before.weekly !== 'LIMITED' && after.weekly === 'LIMITED') - const reminder = (before.daily === 'NORMAL' && after.daily === 'REMINDER') || (before.weekly === 'NORMAL' && after.weekly === 'REMINDER') - return [met, reminder] -} - -/** - * Increase visit count - * @returns the rules is limited - */ -async function incVisit(host: string, url: string): Promise<timer.limit.Item[]> { - if (whitelistHolder.contains(host, url)) return [] - - const allEnabled: timer.limit.Item[] = await select({ filterDisabled: true, url }) - const result: timer.limit.Item[] = [] - await db.increaseVisit(formatTimeYMD(new Date()), allEnabled.map(item => item.id)) - allEnabled.forEach(item => { - // Fast increase - item.visit++ - item.weeklyVisit++ - - hasLimited(item) && result.push(item) - }) - return result -} - -/** - * @returns Rules to wake - */ -async function moreMinutes(url: string): Promise<timer.limit.Item[]> { - const rules = (await select({ url: url, filterDisabled: true })) - .filter(item => hasLimited(item) && item.allowDelay) - rules.forEach(rule => { - rule.delayCount = (rule.delayCount ?? 0) + 1 - // Fast increase - rule.weeklyDelayCount = (rule.weeklyDelayCount ?? 0) + 1 - }) - - const date = formatTimeYMD(new Date()) - await db.updateDelayCount(date, rules) - return rules.filter(r => !hasLimited(r)) -} - -async function update(...rules: timer.limit.Rule[]) { - if (!rules?.length) return - for (const rule of rules) { - await db.save(rule, true) - } - await noticeLimitChanged() -} - -async function create(rule: MakeOptional<timer.limit.Rule, 'id'>): Promise<number> { - const id = await db.save(rule, false) - await noticeLimitChanged() - return id -} - -class LimitService { - moreMinutes = moreMinutes - getLimited = getLimited - getRelated = getRelated - updateEnabled = updateEnabled - updateDelay = updateDelay - updateLocked = updateLocked - select = select - remove = remove - update = update - create = create - broadcastRules = noticeLimitChanged - addFocusTime = addFocusTime - incVisit = incVisit -} - -export default new LimitService() diff --git a/src/service/limit-service/verification/processor.ts b/src/service/limit-service/verification/processor.ts deleted file mode 100644 index d2561e726..000000000 --- a/src/service/limit-service/verification/processor.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright (c) 2023 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { type VerificationContext, type VerificationGenerator, type VerificationPair } from "./common" -import { ALL_GENERATORS } from "./generator" - -class VerificationProcessor { - generators: VerificationGenerator[] - - constructor() { - this.generators = ALL_GENERATORS - } - - generate(difficulty: timer.limit.VerificationDifficulty, locale: timer.Locale): VerificationPair | null { - const context: VerificationContext = { difficulty, locale } - const supported = this.generators.filter(g => g.supports(context)) - const len = supported?.length - if (!len) { - return null - } - let generator = supported[0] - if (len > 1) { - const idx = Math.floor(Math.random() * supported.length) - generator = supported[idx] - } - return generator.generate(context) - } -} - -export default new VerificationProcessor() \ No newline at end of file diff --git a/src/service/meta-service.ts b/src/service/meta-service.ts deleted file mode 100644 index 334b71cbf..000000000 --- a/src/service/meta-service.ts +++ /dev/null @@ -1,126 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import db from "@db/meta-database" -import { REVIEW_PAGE } from "@util/constant/url" -import { getDayLength } from "@util/time" - -async function getInstallTime() { - const meta: timer.ExtensionMeta = await db.getMeta() - return meta && meta.installTime ? new Date(meta.installTime) : undefined -} - -async function updateInstallTime(installTime: Date) { - const meta: timer.ExtensionMeta = await db.getMeta() - if (meta?.installTime) { - // Must not rewrite - return - } - meta.installTime = installTime.getTime() - await db.update(meta) -} - -function increaseApp(routePath: string): void { - db.getMeta().then(meta => { - const appCounter = meta.appCounter || {} - appCounter[routePath] = (appCounter[routePath] || 0) + 1 - meta.appCounter = appCounter - db.update(meta) - }) -} - -function increasePopup(): void { - db.getMeta().then(meta => { - const popupCounter = meta.popupCounter || {} - popupCounter._total = (popupCounter._total || 0) + 1 - meta.popupCounter = popupCounter - db.update(meta) - }) -} - -async function getCid(): Promise<string | undefined> { - const meta: timer.ExtensionMeta = await db.getMeta() - return meta?.cid -} - -async function updateCid(newCid: string) { - const meta = await db.getMeta() - if (meta.cid) { - return - } - meta.cid = newCid - await db.update(meta) -} - -async function updateBackUpTime(type: timer.backup.Type, time: number) { - const meta = await db.getMeta() - if (!meta.backup) { - meta.backup = {} - } - meta.backup[type] = { ts: time } - await db.update(meta) -} - -async function getLastBackUp(type: timer.backup.Type): Promise<{ ts: number, msg?: string } | undefined> { - const meta = await db.getMeta() - return meta?.backup?.[type] -} - -async function saveFlag(flag: timer.ExtensionMetaFlag) { - if (!flag) return - const meta = await db.getMeta() - if (!meta.flag) meta.flag = {} - meta.flag[flag] = true - await db.update(meta) -} - -async function getFlag(flag: timer.ExtensionMetaFlag) { - if (!flag) return false - const meta = await db.getMeta() - return !!meta?.flag?.[flag] -} - -const INSTALL_DAY_MIN_LIMIT = 14 - -class MetaService { - getInstallTime = getInstallTime - updateInstallTime = updateInstallTime - /** - * @since 1.2.0 - */ - getCid = getCid - /** - * @since 1.2.0 - */ - updateCid = updateCid - increaseApp = increaseApp - increasePopup = increasePopup - /** - * @since 1.4.7 - */ - updateBackUpTime = updateBackUpTime - /** - * @since 1.4.7 - */ - getLastBackUp = getLastBackUp - /** - * @since 2.2.0 - */ - saveFlag = saveFlag - - async recommendRate(): Promise<boolean> { - if (!REVIEW_PAGE) return false - const installTime = await getInstallTime() - if (!installTime) return false - const installedDays = getDayLength(installTime, new Date()) - if (installedDays < INSTALL_DAY_MIN_LIMIT) return false - const rateOpen = await getFlag("rateOpen") - return !rateOpen - } -} - -export default new MetaService() diff --git a/src/service/option-service.ts b/src/service/option-service.ts deleted file mode 100644 index 87595220d..000000000 --- a/src/service/option-service.ts +++ /dev/null @@ -1,94 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import optionHolder from "./components/option-holder" - -async function setLocale(locale: timer.option.LocaleOption): Promise<void> { - const exist: Partial<timer.option.AllOption> = await optionHolder.get() - exist.locale = locale - await optionHolder.set(exist) -} - -async function setBackupOption(option: Partial<timer.option.BackupOption>): Promise<void> { - // Rewrite auths - const existOption = await optionHolder.get() - const existAuths = existOption.backupAuths || {} - const existExts = existOption.backupExts || {} - Object.entries(option.backupAuths || {}).forEach(([key, auth]) => existAuths[key as timer.backup.Type] = auth) - Object.entries(option.backupExts || {}).forEach(([key, ext]) => { - if (!ext) return - const type = key as timer.backup.Type - const existExt = existExts[type] || {} - Object.entries(ext).forEach(([extKey, val]) => existExt[extKey as keyof timer.backup.TypeExt] = val) - existExts[type] = existExt - }) - option.backupAuths = existAuths - option.backupExts = existExts - await optionHolder.set(option) -} - -async function isDarkMode(targetVal?: timer.option.AppearanceOption): Promise<boolean> { - const option = targetVal || await optionHolder.get() - const darkMode = option.darkMode - if (darkMode === "default") { - if (typeof window === 'undefined') return false - return !!window.matchMedia('(prefers-color-scheme: dark)')?.matches - } else if (darkMode === "on") { - return true - } else if (darkMode === "off") { - return false - } else if (darkMode === "timed") { - const start = option.darkModeTimeStart - const end = option.darkModeTimeEnd - if (start === undefined || end === undefined) { - return false - } - const now = new Date() - const currentSecs = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() - if (start > end) { - // Mostly - return start <= currentSecs || currentSecs <= end - } else if (start < end) { - return start <= currentSecs && currentSecs <= end - } else { - return currentSecs === start - } - } - return false -} - -async function setDarkMode(mode: timer.option.DarkMode, period?: [number, number]): Promise<void> { - const exist: timer.option.AllOption = await optionHolder.get() - exist.darkMode = mode - if (mode === 'timed') { - const [start, end] = period || [] - exist.darkModeTimeStart = start - exist.darkModeTimeEnd = end - } - await optionHolder.set(exist) -} - -class OptionService { - /** - * @since 1.2.0 - */ - setBackupOption = setBackupOption - /** - * @since 3.0.0 - */ - setLocale = setLocale - /** - * @since 1.1.0 - */ - isDarkMode = isDarkMode - /** - * @since 3.0.0 - */ - setDarkMode = setDarkMode -} - -export default new OptionService() diff --git a/src/service/period-service.ts b/src/service/period-service.ts deleted file mode 100644 index f1446ac4d..000000000 --- a/src/service/period-service.ts +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import periodDatabase from "@db/period-database" -import { after, compare, getDateString } from "@util/period" -import { calculate } from "./components/period-calculator" - -export type PeriodQueryParam = { - /** - * Required - */ - periodRange: timer.period.KeyRange -} - -function add(timestamp: number, milliseconds: number): Promise<void> { - const results = calculate(timestamp, milliseconds) - return periodDatabase.accumulate(results) -} - -function dateStrBetween(startDate: timer.period.Key, endDate: timer.period.Key): string[] { - const result: string[] = [] - while (compare(startDate, endDate) <= 0) { - result.push(getDateString(startDate)) - startDate = after(startDate, 1) - } - return result -} - -async function listBetween(param: PeriodQueryParam): Promise<timer.period.Result[]> { - const [start, end] = param.periodRange - const allDates = dateStrBetween(start, end) - return periodDatabase.getBatch(allDates) -} - -async function batchDeleteBetween(param: PeriodQueryParam): Promise<void> { - const [start, end] = param.periodRange - if (!start || !end) return - const allDates = dateStrBetween(start, end) - await periodDatabase.batchDelete(allDates) -} - -class PeriodService { - add = add - listBetween = listBetween - batchDeleteBetween = batchDeleteBetween - listAll = () => periodDatabase.getAll() -} - -export default new PeriodService() diff --git a/src/service/site-service.ts b/src/service/site-service.ts deleted file mode 100644 index 35d06c3eb..000000000 --- a/src/service/site-service.ts +++ /dev/null @@ -1,157 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { listTabs, sendMsg2Tab } from "@api/chrome/tab" -import siteDatabase, { type SiteCondition } from "@db/site-database" -import { toMap } from "@util/array" -import { identifySiteKey, SiteMap, supportCategory } from "@util/site" -import { slicePageResult } from "./components/page-info" - -export type SiteQueryParam = SiteCondition - -async function removeAlias(key: timer.site.SiteKey) { - const exist = await siteDatabase.get(key) - if (!exist) return - delete exist.alias - await siteDatabase.save(exist) -} - -async function saveAlias(key: timer.site.SiteKey, alias: string, noRewrite?: boolean) { - const exist = await siteDatabase.get(key) - let toUpdate: timer.site.SiteInfo - if (exist) { - // Can't overwrite if alias is already existed - if (exist.alias && noRewrite) return - toUpdate = exist - toUpdate.alias = alias - } else { - toUpdate = { ...key, alias } - } - await siteDatabase.save(toUpdate) -} - -async function batchSaveAliasNoRewrite(siteMap: SiteMap<string>): Promise<void> { - if (!siteMap?.count?.()) return - const allSites = await siteDatabase.getBatch(siteMap.keys()) - const existMap = new SiteMap<timer.site.SiteInfo>() - allSites.forEach(exist => existMap.put(exist, exist)) - - const toSave: timer.site.SiteInfo[] = [] - siteMap.forEach((k, alias) => { - const exist = existMap.get(k) - if (exist?.alias || !alias) return - toSave.push({ ...exist || k, alias }) - }) - await siteDatabase.save(...toSave) -} - -async function removeIconUrl(key: timer.site.SiteKey) { - const exist = await siteDatabase.get(key) - if (!exist) return - delete exist.iconUrl - await siteDatabase.save(exist) -} - -async function saveIconUrl(key: timer.site.SiteKey, iconUrl: string) { - const exist = await siteDatabase.get(key) - let toUpdate: timer.site.SiteInfo - if (exist) { - toUpdate = { ...exist } - toUpdate.iconUrl = iconUrl - } else { - toUpdate = { ...key, iconUrl } - } - await siteDatabase.save(toUpdate) -} - -async function saveRun(key: timer.site.SiteKey, run: boolean) { - const exist = await siteDatabase.get(key) - if (!exist) return - exist.run = run - await siteDatabase.save(exist) - // send msg to tabs - const tabs = await listTabs() - for (const { id } of tabs) { - try { - id && await sendMsg2Tab(id, 'siteRunChange') - } catch { } - } -} - -class SiteService { - async add(siteInfo: timer.site.SiteInfo): Promise<void> { - if (await siteDatabase.exist(siteInfo)) { - return - } - if (!supportCategory(siteInfo)) siteInfo.cate = undefined - await siteDatabase.save(siteInfo) - } - - async selectByPage(param?: SiteQueryParam, page?: timer.common.PageQuery): Promise<timer.common.PageResult<timer.site.SiteInfo>> { - const origin: timer.site.SiteInfo[] = await siteDatabase.select(param) - const result: timer.common.PageResult<timer.site.SiteInfo> = slicePageResult(origin, page) - return result - } - - selectAll(param?: SiteQueryParam): Promise<timer.site.SiteInfo[]> { - return siteDatabase.select(param) - } - - async batchSelect(keys: timer.site.SiteKey[]): Promise<timer.site.SiteInfo[]> { - return siteDatabase.getBatch(keys) - } - - async remove(...sites: timer.site.SiteKey[]): Promise<void> { - await siteDatabase.remove(...sites) - } - - saveAlias = saveAlias - batchSaveAliasNoRewrite = batchSaveAliasNoRewrite - removeAlias = removeAlias - saveIconUrl = saveIconUrl - removeIconUrl = removeIconUrl - saveRun = saveRun - - async saveCate(key: timer.site.SiteKey, cateId: number | undefined): Promise<void> { - if (!supportCategory(key)) return - - const exist = await siteDatabase.get(key) - await siteDatabase.save({ ...exist || key, cate: cateId }) - } - - async batchSaveCate(cateId: number | undefined, keys: timer.site.SiteKey[]): Promise<void> { - keys = keys?.filter(supportCategory) - if (!keys?.length) return - - const allSites = await siteDatabase.getBatch(keys) - const siteMap = toMap(allSites, identifySiteKey) - - const toSave = keys.map(k => { - const s = siteMap[identifySiteKey(k)] - return ({ ...s || k, cate: cateId }) - }) - await siteDatabase.save(...toSave) - } - - exist(host: timer.site.SiteKey): Promise<boolean> { - return siteDatabase.exist(host) - } - - existBatch(hosts: timer.site.SiteKey[]): Promise<timer.site.SiteKey[]> { - return siteDatabase.existBatch(hosts) - } - - /** - * @since 0.9.0 - */ - async get(siteKey: timer.site.SiteKey): Promise<timer.site.SiteInfo | undefined> { - const info = await siteDatabase.get(siteKey) - return info ?? siteKey - } -} - -export default new SiteService() diff --git a/src/service/stat-service/index.ts b/src/service/stat-service/index.ts deleted file mode 100644 index 32e7cc27c..000000000 --- a/src/service/stat-service/index.ts +++ /dev/null @@ -1,339 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { listAllGroups } from "@api/chrome/tabGroups" -import mergeRuleDatabase from "@db/merge-rule-database" -import cateDatabase from "@db/site-cate-database" -import siteDatabase from "@db/site-database" -import statDatabase, { type StatCondition } from "@db/stat-database" -import { toMap } from "@util/array" -import { judgeVirtualFast } from "@util/pattern" -import { CATE_NOT_SET_ID, distinctSites, SiteMap } from "@util/site" -import { isGroup, isNormalSite, isSite } from "@util/stat" -import { log } from "../../common/logger" -import CustomizedHostMergeRuler from "../components/host-merge-ruler" -import { slicePageResult } from "../components/page-info" -import { cvt2SiteRow } from "./common" -import { mergeCate } from "./merge/cate" -import { mergeDate } from "./merge/date" -import { mergeHost } from "./merge/host" -import { canReadRemote, processRemote } from "./remote" - -function extractAllSiteKeys(rows: timer.stat.SiteRow[], container: timer.site.SiteKey[]) { - rows.forEach(row => { - const { mergedRows } = row - container.push(row.siteKey) - mergedRows?.length && extractAllSiteKeys(mergedRows, container) - }) -} - -function fillRowWithSiteInfo(row: timer.stat.SiteRow, siteMap: SiteMap<timer.site.SiteInfo>): void { - if (!isSite(row)) return - const { siteKey, mergedRows } = row - - mergedRows?.map(m => fillRowWithSiteInfo(m, siteMap)) - const siteInfo = siteMap.get(siteKey) - if (siteInfo) { - const { cate, iconUrl, alias } = siteInfo - row.cateId = cate - row.alias = alias - row.iconUrl = iconUrl - } -} - -function compareSortVal(a: string | number, b: string | number, direction?: timer.common.SortDirection): number { - if (a === b) return 0 - const val = a > b ? 1 : -1 - return direction === 'DESC' ? -val : val -} - -export type SiteQuery = Pick<StatCondition, 'date' | 'focusRange' | 'timeRange' | 'virtual'> - & timer.common.SortBy<'date' | 'host' | timer.core.Dimension> - & { - query?: string - host?: string - mergeDate?: boolean - mergeHost?: boolean - /** - * Inclusive remote data - * - * If true the date range MUST NOT be unlimited - * - * @since 1.2.0 - */ - inclusiveRemote?: boolean - /** - * Categories - * - * @since 3.0.0 - */ - cateIds?: number[] - ignoreSite?: boolean - } - -export type CateQuery = Pick<StatCondition, 'date'> - & timer.common.SortBy<'date' | 'focus' | 'time'> - & { - query?: string - mergeDate?: boolean - inclusiveRemote?: boolean - cateIds?: number[] - } - -export type GroupQuery = Pick<StatCondition, 'date'> - & timer.common.SortBy<'date' | 'title' | 'focus' | 'time'> - & { - query?: string - mergeDate?: boolean - } - -export type CountQuery = Pick<StatCondition, 'date'> & { - keys: timer.stat.TargetKey -} - -interface StatService { - selectSite(query?: SiteQuery): Promise<timer.stat.SiteRow[]> - selectSitePage(query?: SiteQuery, page?: timer.common.PageQuery): Promise<timer.common.PageResult<timer.stat.SiteRow>> - countSiteByHosts(hosts: string[], dateRange: StatCondition['date']): Promise<number> - - selectCate(query?: CateQuery): Promise<timer.stat.CateRow[]> - selectCatePage(query?: CateQuery, page?: timer.common.PageQuery): Promise<timer.common.PageResult<timer.stat.CateRow>> - - selectGroup(query?: GroupQuery): Promise<timer.stat.GroupRow[]> - selectGroupPage(query?: GroupQuery, page?: timer.common.PageQuery): Promise<timer.common.PageResult<timer.stat.GroupRow>> - countGroupByIds(groupIds: number[], dateRange: StatCondition['date']): Promise<number> - - listHosts(fuzzyQuery?: string): Promise<Record<timer.site.Type, string[]>> - batchDelete(rows: timer.stat.Row[]): Promise<void> - canReadRemote(): Promise<boolean> -} - -function filterByCateId(itemCateId: number | undefined, cateIds: number[] | undefined): boolean { - if (!cateIds?.length) return true - return cateIds.includes(itemCateId ?? CATE_NOT_SET_ID) -} - -/** - * Service of timer - * @since 0.0.5 - */ -class StatServiceImpl implements StatService { - /** - * Query hosts - * - * @param fuzzyQuery the part of host - * @since 0.0.8 - */ - async listHosts(fuzzyQuery?: string): Promise<Record<timer.site.Type, string[]>> { - const rows = await statDatabase.select() - const allHosts: Set<string> = new Set(rows.map(row => row.host)) - // Generate ruler - const mergeRuleItems: timer.merge.Rule[] = await mergeRuleDatabase.selectAll() - const mergeRuler = new CustomizedHostMergeRuler(mergeRuleItems) - - const normalSet: Set<string> = new Set() - const mergedSet: Set<string> = new Set() - const virtualSet: Set<string> = new Set() - - const allHostArr = Array.from(allHosts) - - allHostArr.forEach(host => { - if (judgeVirtualFast(host)) { - virtualSet.add(host) - return - } - normalSet.add(host) - const mergedHost = mergeRuler.merge(host) - mergedSet.add(mergedHost) - }) - - let normal = Array.from(normalSet) - let merged = Array.from(mergedSet) - let virtual = Array.from(virtualSet) - if (fuzzyQuery) { - normal = normal.filter(host => host?.includes(fuzzyQuery)) - merged = merged.filter(host => host?.includes(fuzzyQuery)) - virtual = virtual.filter(host => host?.includes(fuzzyQuery)) - } - - return { normal, merged, virtual } - } - - async countSiteByHosts(hosts: string[], dateRange: StatCondition['date']): Promise<number> { - log("service: countSiteByHosts: {hosts}, {dateRange}", hosts, dateRange) - const rows = await statDatabase.select({ keys: hosts, date: dateRange }) - const result = rows.length - log("service: countSiteByHosts: {result}", result) - return result - } - - async selectSite(param?: SiteQuery): Promise<timer.stat.SiteRow[]> { - log("service: select:{param}", param) - const { - mergeHost: needMerge, mergeDate: needMergeDate, - date, query, host, cateIds, - timeRange, focusRange, - virtual, ignoreSite, inclusiveRemote, - sortKey, sortDirection, - } = param ?? {} - - const condition: StatCondition = { - date, timeRange, focusRange, virtual, - keys: host && !needMerge ? host : undefined, - } - let origin = await statDatabase.select(condition) - - let siteRows = origin.map(cvt2SiteRow) - inclusiveRemote && (siteRows = await processRemote(siteRows, param)) - - // Merge with rules - needMerge && (siteRows = await mergeHost(siteRows)) - // Fill site info - if (!ignoreSite || query) await this.fillSite(siteRows) - // Filter - siteRows = siteRows - .filter(({ siteKey: { host: siteHost } }) => !host || host === siteHost) - .filter(({ siteKey: { host: siteHost }, alias }) => !query || siteHost.includes(query) || !!alias?.includes(query)) - .filter(({ cateId }) => filterByCateId(cateId, cateIds)) - // Merge by date - needMergeDate && (siteRows = mergeDate(siteRows)) - // Sort - if (sortKey) { - const sortVal = (a: timer.stat.SiteRow) => sortKey === 'host' ? a.siteKey.host : a[sortKey] ?? 0 - siteRows.sort((a, b) => compareSortVal(sortVal(a), sortVal(b), sortDirection)) - } - return siteRows - } - - async selectSitePage( - param?: SiteQuery, - page?: timer.common.PageQuery, - ): Promise<timer.common.PageResult<timer.stat.SiteRow>> { - log("selectByPage:{param},{page}", param, page) - const rows = await this.selectSite(param) - let result = slicePageResult(rows, page) - log("result of selectByPage:{param}, {page}, {result}", param, page, result) - return result - } - - async selectCate(param?: CateQuery): Promise<timer.stat.CateRow[]> { - const { - mergeDate: needMergeDate, - date, query, cateIds, - inclusiveRemote, - sortKey, sortDirection, - } = param ?? {} - - let origin = await statDatabase.select({ date }) - - let siteRows = origin.map(cvt2SiteRow) - inclusiveRemote && (siteRows = await processRemote(siteRows, param)) - - // Fill site info - await this.fillSite(siteRows) - const categories = await cateDatabase.listAll() - let cateRows = mergeCate(siteRows, categories) - // Filter - cateRows = cateRows - .filter(({ cateKey }) => !cateIds?.length || cateIds.includes(cateKey)) - .filter(({ cateName }) => !query || cateName?.includes(query)) - // Merge by date - needMergeDate && (cateRows = mergeDate(cateRows)) - // Sort - if (sortKey) { - cateRows.sort((a, b) => compareSortVal(a[sortKey] ?? 0, b[sortKey] ?? 0, sortDirection)) - } - return cateRows - } - - async selectCatePage(query?: CateQuery, page?: timer.common.PageQuery): Promise<timer.common.PageResult<timer.stat.CateRow>> { - const rows = await this.selectCate(query) - return slicePageResult(rows, page) - } - - private async fillSite(rows: timer.stat.SiteRow[]): Promise<true> { - let keys: timer.site.SiteKey[] = [] - extractAllSiteKeys(rows, keys) - keys = distinctSites(keys) - - const siteInfos = await siteDatabase.getBatch(keys) - const siteInfoMap = new SiteMap<timer.site.SiteInfo>() - siteInfos.forEach(siteInfo => siteInfoMap.put(siteInfo, siteInfo)) - - rows.forEach(item => fillRowWithSiteInfo(item, siteInfoMap)) - return true - } - - async selectGroup(param?: GroupQuery): Promise<timer.stat.GroupRow[]> { - const { - date, query, mergeDate: needMergeDate, - sortKey, sortDirection, - } = param ?? {} - const list = await statDatabase.selectGroup({ date }) - const groups = await listAllGroups() - const groupMap = toMap(groups, g => g.id) - let rows: timer.stat.GroupRow[] = list.map(({ date, time, focus, run, host }) => { - const groupKey = parseInt(host) - const { title, color } = groupMap[groupKey] ?? {} - return ({ date, groupKey, title, color, run, focus, time }) - }) - rows = rows.filter(({ title }) => !query || title?.includes(query)) - needMergeDate && (rows = mergeDate(rows)) - if (sortKey) { - rows.sort((a, b) => compareSortVal(a[sortKey] ?? 0, b[sortKey] ?? 0, sortDirection)) - } - return rows - } - - async selectGroupPage( - param?: GroupQuery, - page?: timer.common.PageQuery, - ) { - const rows = await this.selectGroup(param) - return slicePageResult(rows, page) - } - - async countGroupByIds(groupIds: number[], dateRange: StatCondition["date"]): Promise<number> { - log("service: countGroupByIds: {groupIds}, {dateRange}", groupIds, dateRange) - const keys = groupIds.map(gid => `${gid}`) - const rows = await statDatabase.selectGroup({ keys, date: dateRange }) - const result = rows.length - log("service: countGroupByIds: {result}", result) - return result - } - - /** - * Enable to read remote backup data - * - * @since 1.2.0 - * @returns T/F - */ - canReadRemote = canReadRemote - - async batchDelete(targets: timer.stat.Row[]) { - if (!targets?.length) return - const siteKeys: timer.core.RowKey[] = [] - const groupKeys: [groupId: number, date: string][] = [] - targets.forEach(row => { - const { date } = row - if (!date) return - isNormalSite(row) && siteKeys.push({ host: row.siteKey.host, date }) - isGroup(row) && groupKeys.push([row.groupKey, date]) - }) - await statDatabase.delete(siteKeys) - await statDatabase.deleteGroup(groupKeys) - } - - async selectGroupByPage(param?: GroupQuery, page?: timer.common.PageQuery): Promise<timer.common.PageResult<timer.stat.Row>> { - const rows = await this.selectGroup(param) - return slicePageResult(rows, page) - } -} - -const statService: StatService = new StatServiceImpl() - -export default statService \ No newline at end of file diff --git a/src/service/stat-service/merge/date.ts b/src/service/stat-service/merge/date.ts deleted file mode 100644 index 9c4e01088..000000000 --- a/src/service/stat-service/merge/date.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { identifyTargetKey, isCate, isGroup, isNormalSite, isSite } from "@util/stat" -import { mergeResult } from "./common" - -export function mergeDate<T extends timer.stat.Row>(origin: T[]): T[] { - const map: Record< - string, - | MakeRequired<timer.stat.SiteRow | timer.stat.CateRow, 'mergedDates' | 'mergedRows'> - | MakeRequired<timer.stat.GroupRow, 'mergedDates'> - > = {} - origin.forEach(ele => { - const { date } = ele - const key = identifyTargetKey(ele) - let exist = map[key] - if (!exist) { - exist = map[key] = { - ...ele, - focus: 0, - time: 0, - mergedRows: [], - mergedDates: [], - composition: { focus: [], time: [], run: [] }, - } satisfies timer.stat.Row - } - mergeResult(exist, ele) - isSite(ele) && isSite(exist) && exist.mergedRows.push(...ele.mergedRows ?? []) - isCate(ele) && isCate(exist) && exist.mergedRows.push(...ele.mergedRows ?? []) - date && exist.mergedDates.push(date) - if (isNormalSite(ele) && !isGroup(exist)) { - const { mergedRows, ...toMerge } = ele - exist.mergedRows.push(toMerge) - } - }) - const newRows = Object.values(map) - return newRows as T[] -} \ No newline at end of file diff --git a/src/service/whitelist/holder.ts b/src/service/whitelist/holder.ts deleted file mode 100644 index 3661fbff1..000000000 --- a/src/service/whitelist/holder.ts +++ /dev/null @@ -1,36 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import whitelistDatabase from "@db/whitelist-database" -import WhitelistProcessor from './processor' - -/** - * The singleton implementation of whitelist holder - */ -class WhitelistHolder { - private processor = new WhitelistProcessor() - private postHandlers: NoArgCallback[] - - constructor() { - whitelistDatabase.selectAll().then(list => this.processor.setWhitelist(list)) - whitelistDatabase.addChangeListener(whitelist => { - this.processor.setWhitelist(whitelist) - this.postHandlers.forEach(handler => handler()) - }) - this.postHandlers = [] - } - - addPostHandler(handler: () => void) { - this.postHandlers.push(handler) - } - - contains(host: string, url: string): boolean { - return this.processor.contains(host, url) - } -} - -export default new WhitelistHolder() \ No newline at end of file diff --git a/src/service/whitelist/service.ts b/src/service/whitelist/service.ts deleted file mode 100644 index b9d267378..000000000 --- a/src/service/whitelist/service.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright (c) 2021 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import whitelistDatabase from "@db/whitelist-database" -import { log } from '@src/common/logger' - -/** - * Service of whitelist - * - * @since 0.0.5 - */ -class WhitelistService { - - add(white: string): Promise<void> { - log('add to whitelist: ' + white) - // Just add to the white list, not to delete records since v0.1.1 - return whitelistDatabase.add(white) - } - - listAll(): Promise<string[]> { - return whitelistDatabase.selectAll() - } - - remove(white: string): Promise<void> { - log('remove whitelist: ' + white) - return whitelistDatabase.remove(white) - } -} - -export default new WhitelistService() \ No newline at end of file diff --git a/src/shared/route.ts b/src/shared/route.ts new file mode 100644 index 000000000..2ec584852 --- /dev/null +++ b/src/shared/route.ts @@ -0,0 +1,44 @@ +export const APP_LIMIT_ROUTE = '/behavior/limit' +export type AppLimitQuery = { + action?: 'create' | 'modify' + url?: string + id?: string +} + +export const APP_ANALYSIS_ROUTE = '/data/analysis' +export type AppAnalysisQuery = Partial<tt4b.site.SiteKey> & { + cateId?: string + url?: string +} + +export const APP_OPTION_ROUTE = '/additional/option' +export const APP_RECORD_ROUTE = '/data/record' +/** + * The query param of record page + */ +export type AppRecordQuery = { + /** + * Query + */ + q?: string + /** + * Merge method + */ + mm?: Exclude<tt4b.stat.MergeMethod, 'date'> + /** + * Merge date + */ + md?: string + /** + * Date start + */ + ds?: string + /** + * Date end + */ + de?: string + /** + * Sorted column + */ + sc?: tt4b.core.Dimension +} \ No newline at end of file diff --git a/src/util/array.ts b/src/util/array.ts index 21686c068..1f0688eee 100644 --- a/src/util/array.ts +++ b/src/util/array.ts @@ -5,6 +5,18 @@ * https://opensource.org/licenses/MIT */ +export function groupBy<T, R>( + arr: T[], + keyFunc: (e: T, idx: number) => string | undefined | null, + downstream: (grouped: T[], key: string) => R +): Record<string, R> + +export function groupBy<T, R>( + arr: T[], + keyFunc: (e: T, idx: number) => number, + downstream: (grouped: T[], key: string) => R +): Record<number, R> + /** * Group by * @@ -107,15 +119,6 @@ export function sum(arr: number[]): number { return arr?.reduce?.((a, b) => (a ?? 0) + (b ?? 0), 0) ?? 0 } -/** - * @since 2.1.0 - * @returns null if arr is empty or null - */ -export function average(arr: number[]): number | null { - if (!arr?.length) return null - return sum(arr) / arr.length -} - export function allMatch<T>(arr: T[], predicate: (t: T) => boolean): boolean { return !arr?.filter?.(e => !predicate?.(e))?.length } @@ -131,22 +134,3 @@ export function range(len: number): number[] { } return arr } - -export function containsAny<T>(arr1: T[], arr2: T[]): boolean { - if (!arr1?.length || !arr2?.length) return false - - return !!arr1.find(e => arr2.includes(e)) -} - -export function joinAny<T = any>(arr: T[], separator: T): T[] { - if (!arr.length) return [separator] - - return arr.reduce<T[]>( - (arr, e) => { - arr.length && arr.push(separator) - arr.push(e) - return arr - }, - [], - ) -} \ No newline at end of file diff --git a/src/util/constant/option.ts b/src/util/constant/option.ts index 186ae2e10..2c243ea9e 100644 --- a/src/util/constant/option.ts +++ b/src/util/constant/option.ts @@ -5,91 +5,67 @@ * https://opensource.org/licenses/MIT */ -export function defaultPopup(): timer.option.PopupOption { - // Use template - return { - popupMax: 10, - /** - * Change the default value to 'true' since v0.5.4 - */ - displaySiteName: true, - } -} +export const DEFAULT_APPEARANCE: tt4b.option.AppearanceRequired = { + displayWhitelistMenu: false, + // Change false to true @since 0.8.4 + displayBadgeText: true, + locale: "default", + printInConsole: true, + darkMode: "default", + // 6 PM - 6 AM + // 18*60*60 + darkModeTimeStart: 64800, + // 6*60*60 + darkModeTimeEnd: 21600, + // 1s + chartAnimationDuration: 1000, +} as const -type AppearanceRequired = MakeRequired<timer.option.AppearanceOption, 'darkModeTimeStart' | 'darkModeTimeEnd'> +export const DEFAULT_TRACKING: tt4b.option.TrackingRequired = { + autoPauseTracking: false, + // 10 minutes + autoPauseInterval: 600, + countLocalFiles: false, + // Additional permission required, so default to false + countTabGroup: false, + weekStart: 'default', + storage: 'classic', +} as const -export function defaultAppearance(): AppearanceRequired { - return { - displayWhitelistMenu: true, - // Change false to true @since 0.8.4 - displayBadgeText: true, - locale: "default", - printInConsole: true, - darkMode: "default", - // 6 PM - 6 AM - // 18*60*60 - darkModeTimeStart: 64800, - // 6*60*60 - darkModeTimeEnd: 21600, - // 1s - chartAnimationDuration: 1000, - } -} +export const DEFAULT_LIMIT: tt4b.option.LimitRequired = { + limitDelayDuration: 5, + limitLevel: 'nothing', + limitPassword: '', + limitVerifyDifficulty: 'easy', + limitReminder: false, + limitReminderDuration: 5, +} as const -type StatisticsRequired = MakeRequired<timer.option.StatisticsOption, 'weekStart'> +export const DEFAULT_BACKUP: tt4b.option.BackupOption = { + backupType: 'none', + clientName: 'unknown', + backupAuths: {}, + backupLogin: {}, + backupExts: {}, + autoBackUp: false, + autoBackUpInterval: 30, +} as const -export function defaultStatistics(): StatisticsRequired { - return { - autoPauseTracking: false, - // 10 minutes - autoPauseInterval: 600, - countLocalFiles: true, - countTabGroup: false, - weekStart: 'default', - } -} +export const DEFAULT_ACCESSIBILITY: tt4b.option.AccessibilityOption = { + chartDecal: false +} as const -type DailyLimitRequired = MakeRequired<timer.option.LimitOption, 'limitPassword' | 'limitVerifyDifficulty' | 'limitReminderDuration'> +export const DEFAULT_NOTIFICATION: tt4b.option.NotificationOption = { + notificationCycle: 'none', + notificationMethod: 'browser', + notificationOffset: 0, +} as const -export function defaultDailyLimit(): DailyLimitRequired { - return { - limitLevel: 'nothing', - limitPassword: '', - limitVerifyDifficulty: 'easy', - limitReminder: false, - limitReminderDuration: 5, - } -} - -export function defaultBackup(): timer.option.BackupOption { - return { - backupType: 'none', - clientName: 'unknown', - backupAuths: {}, - backupLogin: {}, - backupExts: {}, - autoBackUp: false, - autoBackUpInterval: 30, - } -} - -export function defaultAccessibility(): timer.option.AccessibilityOption { - return { - chartDecal: false, - } -} - -export type DefaultOption = - & timer.option.PopupOption & AppearanceRequired & StatisticsRequired & DailyLimitRequired - & timer.option.BackupOption & timer.option.AccessibilityOption - -export function defaultOption(): DefaultOption { - return { - ...defaultPopup(), - ...defaultAppearance(), - ...defaultStatistics(), - ...defaultBackup(), - ...defaultDailyLimit(), - ...defaultAccessibility(), - } -} \ No newline at end of file +export const defaultOption = () => structuredClone({ + ...DEFAULT_APPEARANCE, + ...DEFAULT_TRACKING, + ...DEFAULT_BACKUP, + ...DEFAULT_LIMIT, + ...DEFAULT_ACCESSIBILITY, + ...DEFAULT_NOTIFICATION, +}) satisfies tt4b.option.DefaultOption \ No newline at end of file diff --git a/src/util/constant/url.ts b/src/util/constant/url.ts index 6ad6393d2..bd8083612 100644 --- a/src/util/constant/url.ts +++ b/src/util/constant/url.ts @@ -5,35 +5,29 @@ * https://opensource.org/licenses/MIT */ -import { getRuntimeId, getUrl, getVersion } from "@api/chrome/runtime" +import { getUrl, getVersion } from "@api/chrome/runtime" import { locale } from "@i18n" -import { BROWSER_MAJOR_VERSION, BROWSER_NAME, IS_CHROME, IS_EDGE } from "./environment" +import { BROWSER_MAJOR_VERSION, BROWSER_NAME } from "./environment" export const FIREFOX_HOMEPAGE = 'https://addons.mozilla.org/firefox/addon/besttimetracker' export const CHROME_HOMEPAGE = 'https://chromewebstore.google.com/detail/time-tracker/dkdhhcbjijekmneelocdllcldcpmekmm' export const EDGE_HOMEPAGE = 'https://microsoftedge.microsoft.com/addons/detail/timer-the-web-time-is-e/fepjgblalcnepokjblgbgmapmlkgfahc' +export const INSTALL_PAGE = 'https://www.wfhg.cc/en/install' /** * @since 0.4.0 */ -export const SOURCE_CODE_PAGE = 'https://github.com/sheepzh/timer' +export const SOURCE_CODE_PAGE = 'https://github.com/sheepzh/time-tracker-4-browser' /** * @since 1.9.4 */ -export const CHANGE_LOG_PAGE = 'https://github.com/sheepzh/timer/blob/main/CHANGELOG.md' +export const CHANGE_LOG_PAGE = 'https://github.com/sheepzh/time-tracker-4-browser/blob/main/CHANGELOG.md' /** * @since 0.0.6 */ -export const GITHUB_ISSUE_ADD = 'https://github.com/sheepzh/timer/issues/new/choose' - -/** - * Feedback powered by www.wjx.cn - * - * @since 0.1.6 - */ -export const ZH_FEEDBACK_PAGE = 'https://www.wjx.cn/vj/YFWwHUy.aspx' +export const GITHUB_ISSUE_ADD = 'https://github.com/sheepzh/time-tracker-4-browser/issues/new/choose' /** * Feedback powered by support.qq.com @@ -44,12 +38,12 @@ export const TU_CAO_PAGE = `https://support.qq.com/products/402895?os=${BROWSER_ export const PRIVACY_PAGE = 'https://www.wfhg.cc/en/privacy.html' -export const LICENSE_PAGE = 'https://github.com/sheepzh/timer/blob/main/LICENSE' +export const LICENSE_PAGE = 'https://github.com/sheepzh/time-tracker-4-browser/blob/main/LICENSE' /** * @since 0.9.6 */ -export const FEEDBACK_QUESTIONNAIRE: Record<timer.RequiredLocale, string> & Partial<Record<timer.OptionalLocale, string>> = { +export const FEEDBACK_QUESTIONNAIRE: Record<tt4b.RequiredLocale, string> & Partial<Record<tt4b.OptionalLocale, string>> = { zh_CN: TU_CAO_PAGE, zh_TW: 'https://docs.google.com/forms/d/e/1FAIpQLSdfvG6ExLj331YOLZIKO3x98k3kMxpkkLW1RgFuRGmUnZCGRQ/viewform?usp=sf_link', en: 'https://docs.google.com/forms/d/e/1FAIpQLSdNq4gnSY7uxYkyqOPqyYF3Bqlc3ZnWCLDi5DI5xGjPeVCNiw/viewform?usp=sf_link', @@ -59,28 +53,13 @@ const UNINSTALL_QUESTIONNAIRE_EN = 'https://docs.google.com/forms/d/e/1FAIpQLSfl /** * @since 0.9.6 */ -export const UNINSTALL_QUESTIONNAIRE: { [locale in timer.RequiredLocale]: string } & { [locale in timer.OptionalLocale]?: string } = { +export const UNINSTALL_QUESTIONNAIRE: { [locale in tt4b.RequiredLocale]: string } & { [locale in tt4b.OptionalLocale]?: string } = { zh_CN: 'https://www.wjx.cn/vj/YDgY9Yz.aspx', zh_TW: 'https://docs.google.com/forms/d/e/1FAIpQLSdK93q-548dK-2naoS3DaArdc7tEGoUY9JQvaXP5Kpov8h6-A/viewform?usp=sf_link', ja: 'https://docs.google.com/forms/d/e/1FAIpQLSdsB3onZuleNf6j7KJJLbcote647WV6yeUr-9m7Db5QXakfpg/viewform?usp=sf_link', en: UNINSTALL_QUESTIONNAIRE_EN, } -/** - * The page of extension detail - * @since 0.1.8 - */ -let updatePage = SOURCE_CODE_PAGE - -if (IS_CHROME) { - updatePage = `chrome://extensions/?id=${getRuntimeId()}` -} else if (IS_EDGE) { - // on the management page with developing-mode open - updatePage = 'edge://extensions' -} - -export const UPDATE_PAGE = updatePage - /** * @since 0.2.2 */ @@ -93,10 +72,14 @@ export function getAppPageUrl(route?: string, query?: any): string { } export const HOMEPAGE = "https://www.wfhg.cc" -const HOMEPAGE_LOCALES: timer.Locale[] = ["zh_CN", "zh_TW", "en"] +const HOMEPAGE_LOCALES: tt4b.Locale[] = [ + "zh_CN", "zh_TW", "en", + "ja", "de", "ru", + "fr", "es", "pt_PT", +] export function getHomepageWithLocale(): string { - const homepageLocale: timer.Locale = HOMEPAGE_LOCALES.includes(locale) ? locale : "en" + const homepageLocale: tt4b.Locale = HOMEPAGE_LOCALES.includes(locale) ? locale : "en" return `${HOMEPAGE}/${homepageLocale}/` } @@ -126,20 +109,25 @@ export const CROWDIN_PROJECT_ID = 516822 */ export const CROWDIN_HOMEPAGE = 'https://crowdin.com/project/timer-chrome-edge-firefox' -const webstorePages: Partial<Record<typeof BROWSER_NAME, [storePage: string, reviewPage: string]>> = { - firefox: [FIREFOX_HOMEPAGE, FIREFOX_HOMEPAGE + "/reviews"], - chrome: [CHROME_HOMEPAGE, CHROME_HOMEPAGE + "/reviews"], - edge: [EDGE_HOMEPAGE, EDGE_HOMEPAGE], +const REVIEW_PAGES: Partial<Record<typeof BROWSER_NAME, string>> = { + firefox: FIREFOX_HOMEPAGE + "/reviews", + chrome: CHROME_HOMEPAGE + "/reviews", + edge: EDGE_HOMEPAGE, } -const [webstorePage, reviewPage] = webstorePages[BROWSER_NAME] ?? [HOMEPAGE, CHROME_HOMEPAGE + "/reviews"] +/** + * @since 2.2.4 + */ +export const REVIEW_PAGE = REVIEW_PAGES[BROWSER_NAME] ?? CHROME_HOMEPAGE + "/reviews" /** - * @since 0.0.5 + * @since 3.7.13 */ -export const WEBSTORE_PAGE = webstorePage +export const BUY_ME_A_COFFEE_PAGE = 'https://buymeacoffee.com/sheepysheep' /** - * @since 2.2.4 + * Only available for simplified chinese users + * + * @since 4.0.0 */ -export const REVIEW_PAGE = reviewPage +export const DONATION_PAGE = 'https://github.com/sheepzh/sheepzh?tab=contributing-ov-file' \ No newline at end of file diff --git a/src/util/dark-mode.ts b/src/util/dark-mode.ts deleted file mode 100644 index 3f694f446..000000000 --- a/src/util/dark-mode.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * Copyright (c) 2022-present Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -/** - * Dark mode - * - * @since 1.1.0 - */ - -const THEME_ATTR = "data-theme" -const DARK_VAL = "dark" -const STORAGE_KEY = "isDark" -const STORAGE_FLAG = "1" - -function toggle0(isDarkMode: boolean, el?: Element) { - el = el || document.getElementsByTagName("html")?.[0] - el.setAttribute(THEME_ATTR, isDarkMode ? DARK_VAL : "") -} - -/** - * Init from local storage - */ -export function init(el?: Element) { - const val = isDarkMode() - toggle0(val, el) - return val -} - -export function toggle(isDarkMode: boolean, el?: Element) { - toggle0(isDarkMode, el) - localStorage.setItem(STORAGE_KEY, isDarkMode ? STORAGE_FLAG : '') -} - -export function isDarkMode() { - return localStorage.getItem(STORAGE_KEY) === STORAGE_FLAG -} \ No newline at end of file diff --git a/src/util/document.ts b/src/util/document.ts index 35afd48a4..7ec75f374 100644 --- a/src/util/document.ts +++ b/src/util/document.ts @@ -4,7 +4,7 @@ export const setDir = (direction: 'ltr' | 'rtl') => { htmlEl?.setAttribute('dir', direction) } -export const setLocale = (locale: timer.Locale) => { +export const setLocale = (locale: tt4b.Locale) => { if (isNotExtensionPage()) return const htmlEl = document.getElementsByTagName("html")?.[0] htmlEl?.setAttribute('data-locale', locale) diff --git a/src/util/echarts.ts b/src/util/echarts.ts index 6a95230d7..110d01bf5 100644 --- a/src/util/echarts.ts +++ b/src/util/echarts.ts @@ -1,16 +1,10 @@ -import { - type AriaComponentOption, - type BarSeriesOption, - type ComposeOption, - type GridComponentOption, - type LegendComponentOption, - type LineSeriesOption, - type PieSeriesOption, - type ScatterSeriesOption, - type ToolboxComponentOption, - type VisualMapComponentOption, +import type { + AriaComponentOption, BarSeriesOption, ComposeOption, GaugeSeriesOption, GridComponentOption, LegendComponentOption, LineSeriesOption, + PieSeriesOption, ScatterSeriesOption, TitleComponentOption, ToolboxComponentOption, VisualMapComponentOption, } from "echarts" +import type { AxisBaseOption } from 'echarts/types/src/coord/axisCommonTypes.js' import { isRtl } from "./document" +import { isTuple } from './tuple' export const processAria = (option: ComposeOption<AriaComponentOption>, chartDecal: boolean) => { if (!option) return @@ -63,13 +57,50 @@ const generateAriaOption = (chartDecal: boolean): AriaComponentOption => { } } -type SupportedSeriesOption = PieSeriesOption | LineSeriesOption | BarSeriesOption | ScatterSeriesOption +type SupportedSeriesOption = PieSeriesOption | LineSeriesOption | BarSeriesOption | ScatterSeriesOption | GaugeSeriesOption type GlobalEcOption = ComposeOption< - | GridComponentOption | LegendComponentOption | ToolboxComponentOption | VisualMapComponentOption + | TitleComponentOption | GridComponentOption | LegendComponentOption | ToolboxComponentOption | VisualMapComponentOption | SupportedSeriesOption > +export const processFont = (toProcess: unknown, elFont: string) => { + const options = toProcess as GlobalEcOption + const { series, title, legend, xAxis, yAxis } = options + processArrayLike(title, t => { + t.textStyle = { + ...t.textStyle, + fontFamily: t.textStyle?.fontFamily ?? elFont, + } + t.subtextStyle = { + ...t.subtextStyle, + fontFamily: t.subtextStyle?.fontFamily ?? elFont, + } + }) + processArrayLike(series, s => { + if (!('label' in s)) return + s.label = { + ...s.label, + fontFamily: s.label?.fontFamily ?? elFont, + } + }) + processArrayLike(legend, l => { + l.textStyle = { + ...l.textStyle, + fontFamily: l.textStyle?.fontFamily ?? elFont, + } + }) + processArrayLike(xAxis, a => processAxisFont(a, elFont)) + processArrayLike(yAxis, a => processAxisFont(a, elFont)) +} + +const processAxisFont = (a: AxisBaseOption, elFont: string) => { + a.axisLabel = { + ...a.axisLabel, + fontFamily: a.axisLabel?.fontFamily ?? elFont, + } +} + export const processRtl = (toProcess: unknown) => { if (!isRtl() || !toProcess) return const option = toProcess as GlobalEcOption @@ -89,6 +120,9 @@ export const processAnimation = (toProcess: unknown, duration: number) => { if (duration > 0) { s.animation = true s.animationDuration = duration + s.animationDurationUpdate = duration + s.animationEasing ??= 'cubicInOut' + s.animationEasingUpdate ??= 'cubicInOut' } else { s.animation = false } @@ -198,7 +232,7 @@ const swapPosition = (option: { left?: string | number, right?: string | number } const swapBorderRadius = (option: number[]) => { - if (option?.length !== 4) return + if (!isTuple(option, 4)) return let t = option[0] option[0] = option[1] diff --git a/src/util/encode.ts b/src/util/encode.ts new file mode 100644 index 000000000..f43fb5f70 --- /dev/null +++ b/src/util/encode.ts @@ -0,0 +1,89 @@ +const BASE64_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/' +const BASE32_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567' + +export function encodeBase64(str: string | Uint8Array<ArrayBuffer>): string { + const bytes = typeof str === 'string' ? new TextEncoder().encode(str) : str + let result = '' + + for (let i = 0; i < bytes.length; i += 3) { + const byte1 = bytes[i] ?? 0 + const byte2 = bytes[i + 1] ?? 0 + const byte3 = bytes[i + 2] ?? 0 + + const char1 = byte1 >> 2 + const char2 = ((byte1 & 0x03) << 4) | (byte2 >> 4) + const char3 = ((byte2 & 0x0F) << 2) | (byte3 >> 6) + const char4 = byte3 & 0x3F + + result += BASE64_CHARS.charAt(char1) + BASE64_CHARS.charAt(char2) + + (i + 1 < bytes.length ? BASE64_CHARS.charAt(char3) : '=') + + (i + 2 < bytes.length ? BASE64_CHARS.charAt(char4) : '=') + } + + return result +} + +export function decodeBase64(base64: string): Uint8Array<ArrayBuffer> { + const chars = BASE64_CHARS + const len = base64.length + + let validLen = len + while (validLen > 0 && base64[validLen - 1] === '=') validLen-- + + const bytesLength = Math.floor(validLen * 3 / 4) + const bytes = new Uint8Array(bytesLength) + let byteIdx = 0 + let buffer = 0 + let bitsCollected = 0 + + for (let i = 0; i < len; i++) { + const c = base64[i] + if (c === '=' || !c) break + const idx = chars.indexOf(c) + if (idx === -1) throw new Error('Invalid Base64 character') + + buffer = (buffer << 6) | idx + bitsCollected += 6 + + if (bitsCollected >= 8) { + bitsCollected -= 8 + bytes[byteIdx++] = (buffer >> bitsCollected) & 0xff + } + } + return bytes +} + +export function encodeBase32(buffer: Uint8Array<ArrayBuffer>) { + let result = '' + let bits = 0 + let value = 0 + + for (const byte of buffer) { + value = (value << 8) | byte + bits += 8 + while (bits >= 5) { + bits -= 5 + result += BASE32_CHARS[(value >>> bits) & 0x1f] + } + } + + if (bits > 0) { + result += BASE32_CHARS[(value << (5 - bits)) & 0x1f] + } + + return result +} + +export function decodeBase32(base32: string): Uint8Array<ArrayBuffer> { + const str = base32.toUpperCase().replace(/=+$/, '') + const bytes = new Uint8Array(Math.floor(str.length * 5 / 8)) + let buf = 0, bits = 0, idx = 0 + for (const c of str) { + const v = BASE32_CHARS.indexOf(c) + if (v === -1) continue + buf = (buf << 5) | v + bits += 5 + if (bits >= 8) { bits -= 8; bytes[idx++] = (buf >> bits) & 0xff } + } + return bytes +} \ No newline at end of file diff --git a/src/util/fifo-cache.ts b/src/util/fifo-cache.ts index 44052f2e2..2a8756c02 100644 --- a/src/util/fifo-cache.ts +++ b/src/util/fifo-cache.ts @@ -41,6 +41,10 @@ class FIFOCache<T> { } } + get(origin: string): T | undefined { + return this.map[origin] + } + async getOrSupply(key: string, supplier: () => PromiseLike<T>): Promise<T> { const exist = this.map[key] if (exist) { diff --git a/src/util/guard.ts b/src/util/guard.ts new file mode 100644 index 000000000..13477380e --- /dev/null +++ b/src/util/guard.ts @@ -0,0 +1,5 @@ +import { isInt } from 'typescript-guard' + +export const isRecord = (unk: unknown): unk is Record<string, unknown> => typeof unk === 'object' && unk !== null + +export const isVector2 = (unk: unknown): unk is Vector<2> => Array.isArray(unk) && unk.length === 2 && unk.every(isInt) \ No newline at end of file diff --git a/src/util/lang.ts b/src/util/lang.ts index 96656669a..76cd6a2e6 100644 --- a/src/util/lang.ts +++ b/src/util/lang.ts @@ -1,36 +1,12 @@ -/** - * @since 2.1.7 - */ -export const deepCopy = <T = any | null | undefined>(obj: T): T => { - if (!obj) return obj - if (typeof obj !== 'object') return obj +export const mergeObject = <T extends Record<string, any>>(defaults: T, newVal: Partial<T> | undefined): T => { + if (newVal === undefined) return defaults - let deep: Record<string, any> = {} - Object.entries(obj).forEach(([k, v]) => { - if (typeof v !== "object" || v === null) { - deep[k] = v - } else if (Array.isArray(v)) { - deep[k] = v.map(e => deepCopy(e)) - } else if (v instanceof Set) { - deep[k] = new Set(v) - } else if (v instanceof Map) { - deep[k] = new Map(v) - } else if (v instanceof Date) { - deep[k] = new Date(v.getTime()) - } else { - // Ignored type - deep[k] = deepCopy(v) - } - }) - return deep as T -} - -export const mergeObject = <T extends Record<string, any>>(defaults: T, newVal: Partial<T>): T => { Object.entries(newVal).forEach(([k, v]) => { - if (typeof v === 'object' && !!v && !Array.isArray(v)) { + if (typeof v === 'object' && !!v && !Array.isArray(v) && typeof defaults[k] === 'object' && !!defaults[k]) { (defaults as any)[k] = mergeObject(defaults[k], v as Record<string, any>) + } else { + (defaults as any)[k] = v } - (defaults as any)[k] = v }) return defaults } \ No newline at end of file diff --git a/src/util/limit.ts b/src/util/limit.ts index 67ff57b46..25b0b702d 100644 --- a/src/util/limit.ts +++ b/src/util/limit.ts @@ -1,22 +1,15 @@ import { EXCLUDING_PREFIX } from './constant/remain-host' import { getWeekDay, MILL_PER_MINUTE, MILL_PER_SECOND } from "./time" -export const DELAY_MILL = 5 * MILL_PER_MINUTE - -export const cleanCond = (origin: string | undefined): string | undefined => { - if (!origin) return undefined - - const startIdx = origin?.indexOf('//') - const endIdx = origin?.indexOf('?') - let res = origin.substring(startIdx === -1 ? 0 : startIdx + 2, endIdx === -1 ? undefined : endIdx) - while (res.endsWith('/')) { - res = res.substring(0, res.length - 1) - } - return res || undefined -} +const GLOBSTAR_TOKEN = `__GLOBSTAR${Math.random().toString(36).slice(2, 6)}__` const matchUrl = (cond: string, url: string): boolean => { - return new RegExp(`^.*//${cond.split('*').join('.*')}`).test(url) + const pattern = cond + .replace(/\*\*/g, GLOBSTAR_TOKEN) + .split('*') + .join('.*') + .replaceAll(GLOBSTAR_TOKEN, '.+') + return new RegExp(`^.*//${pattern}`).test(url) } /** @@ -24,10 +17,11 @@ const matchUrl = (cond: string, url: string): boolean => { * @param cond * @param url */ -export function matches(cond: timer.limit.Item['cond'], url: string): boolean { +export function matches(cond: tt4b.limit.Item['cond'], url: string): boolean { let hit = false for (let i = cond.length - 1; i >= 0; i--) { const rule = cond[i] + if (rule === undefined) continue if (rule.startsWith(EXCLUDING_PREFIX)) { if (matchUrl(rule.slice(1), url)) return false } else { @@ -42,10 +36,11 @@ export function matches(cond: timer.limit.Item['cond'], url: string): boolean { * @param cond * @param url */ -export function matchCond(cond: timer.limit.Item['cond'], url: string): string[] { +export function matchCond(cond: tt4b.limit.Item['cond'], url: string): string[] { const matchedNormalRules: string[] = [] for (let i = cond.length - 1; i >= 0; i--) { const rule = cond[i] + if (rule === undefined) continue if (rule.startsWith(EXCLUDING_PREFIX)) { // Immediately return an empty array if an exclusion rule is hit if (matchUrl(rule.slice(1), url)) return [] @@ -60,78 +55,38 @@ export const meetLimit = (limit: number | undefined, value: number | undefined): return !!limit && !!value && value > limit } -export const meetTimeLimit = ( - limitSec: number | undefined, wastedMill: number | undefined, - allowDelay: boolean | undefined, delayCount: number | undefined -): boolean => { - let realLimit = (limitSec ?? 0) * MILL_PER_SECOND - allowDelay && realLimit && (realLimit += DELAY_MILL * (delayCount ?? 0)) - return meetLimit(realLimit, wastedMill) -} - -type TimeLimitState = 'NORMAL' | 'REMINDER' | 'LIMITED' - -type LimitStateResult = { - daily: TimeLimitState - weekly: TimeLimitState -} - -export function calcTimeState(item: timer.limit.Item, reminderMills: number): LimitStateResult { - let res: LimitStateResult = { - daily: "NORMAL", - weekly: "NORMAL", - } - const { - time, waste, delayCount, - weekly, weeklyWaste, weeklyDelayCount, - allowDelay, - } = item || {} - // 1. daily states - if (meetTimeLimit(time, waste, allowDelay, delayCount)) { - res.daily = 'LIMITED' - } else if (reminderMills && meetTimeLimit(time, waste + reminderMills, allowDelay, delayCount)) { - res.daily = 'REMINDER' - } - - // 2. weekly states - if (meetTimeLimit(weekly, weeklyWaste, allowDelay, weeklyDelayCount)) { - res.weekly = 'LIMITED' - } else if (reminderMills && meetTimeLimit(weekly, weeklyWaste + reminderMills, allowDelay, weeklyDelayCount)) { - res.weekly = 'REMINDER' - } - - return res -} +type LimitInfo = { wasted: number, maxLimit: number | undefined } +type DelayInfo = { count: number, duration: number, allow: boolean } -export function hasLimited(item: timer.limit.Item): boolean { - return hasDailyLimited(item) || hasWeeklyLimited(item) +export const meetTimeLimit = (limit: LimitInfo, delay: DelayInfo) => { + const { wasted, maxLimit = 0 } = limit + const { count, duration, allow } = delay + const realLimit = allow ? maxLimit + duration * MILL_PER_MINUTE * (count ?? 0) : maxLimit + return meetLimit(realLimit, wasted) } -export function hasDailyLimited(item: timer.limit.Item): boolean { - const { time, count = 0, waste = 0, visit = 0, delayCount = 0, allowDelay = false } = item || {} - const timeMeet = meetTimeLimit(time, waste, allowDelay, delayCount) - const countMeet = meetLimit(count, visit) - return timeMeet || countMeet +export function hasDailyLimited(item: tt4b.limit.Item, delayDuration: number): boolean { + const { time, count, waste, visit, delayCount, allowDelay } = item + const delay = { count: delayCount, duration: delayDuration, allow: allowDelay } + const limit = { wasted: waste, maxLimit: (time ?? 0) * MILL_PER_SECOND } + return meetTimeLimit(limit, delay) || meetLimit(count, visit) } -export function hasWeeklyLimited(item: timer.limit.Item): boolean { - const { weekly = 0, weeklyCount = 0, weeklyWaste = 0, weeklyVisit = 0, weeklyDelayCount = 0, allowDelay = false } = item || {} - const timeMeet = meetTimeLimit(weekly, weeklyWaste, allowDelay, weeklyDelayCount) - const countMeet = meetLimit(weeklyCount, weeklyVisit) - return timeMeet || countMeet +export function hasWeeklyLimited(item: tt4b.limit.Item, delayDuration: number): boolean { + const { weekly, weeklyCount, weeklyWaste, weeklyVisit, weeklyDelayCount, allowDelay } = item + const delay = { count: weeklyDelayCount, duration: delayDuration, allow: allowDelay } + const limit = { wasted: weeklyWaste, maxLimit: (weekly ?? 0) * MILL_PER_SECOND } + return meetTimeLimit(limit, delay) || meetLimit(weeklyCount, weeklyVisit) } -export function isEnabledAndEffective(rule: timer.limit.Rule): boolean { - return !!rule?.enabled && isEffective(rule.weekdays) +export function hasLimited(item: tt4b.limit.Item, delayDuration: number): boolean { + return hasDailyLimited(item, delayDuration) || hasWeeklyLimited(item, delayDuration) } -export function isEffective(weekdays: timer.limit.Rule['weekdays']): boolean { +export function isEffective(weekdays: tt4b.limit.Rule['weekdays'], weekday?: number): boolean { const weekdayLen = weekdays?.length - if (!weekdayLen || weekdayLen <= 0 || weekdayLen >= 7) { - return true - } - const weekday = getWeekDay(new Date()) - return weekdays.includes(weekday) + if (!weekdayLen || weekdayLen <= 0 || weekdayLen >= 7) return true + return weekdays.includes(weekday ?? getWeekDay(new Date())) } const idx2Str = (time: number | undefined): string => { @@ -151,7 +106,7 @@ export const dateMinute2Idx = (date: Date): number => { return hour * 60 + min } -export const period2Str = (p: timer.limit.Period | undefined): string => { - const [start, end] = p || [] +export const period2Str = (p: tt4b.limit.Period | undefined): string => { + const [start, end] = p ?? [] return `${idx2Str(start)}-${idx2Str(end)}` } diff --git a/src/util/merge.ts b/src/util/merge.ts deleted file mode 100644 index 1a05783c0..000000000 --- a/src/util/merge.ts +++ /dev/null @@ -1,20 +0,0 @@ -type Method = timer.stat.MergeMethod - -export const ALL_MERGE_METHODS: Method[] = ['date', 'domain', 'cate', 'group'] - -function judgeAdded(target: Method, newVal: Method[], oldVal: Method[]): boolean { - return newVal?.includes?.(target) && !oldVal?.includes?.(target) -} - -export function processNewMethod(oldVal: Method[] | undefined, newVal: Method[]): Method[] { - oldVal = oldVal || [] - if (judgeAdded('cate', newVal, oldVal)) { - // Add cate, so remove domain - return newVal.filter?.(v => v !== 'domain') - } - if (judgeAdded('domain', newVal, oldVal)) { - // Add domain, so remove cate - return newVal.filter?.(v => v !== 'cate') - } - return newVal -} \ No newline at end of file diff --git a/src/util/number.ts b/src/util/number.ts index 262eec576..8d89ece39 100644 --- a/src/util/number.ts +++ b/src/util/number.ts @@ -5,22 +5,14 @@ * https://opensource.org/licenses/MIT */ -/** - * @since 0.6.0 - * @returns T/F - */ -export function isInteger(str: string): boolean { - return tryParseInteger(str)[0] -} - /** * @since 0.6.0 * @returns [true, intValue] if str is an integer, or [false, str] */ -export function tryParseInteger(str: string): [boolean, number | string] { +export function tryParseInteger(str: string): [true, number] | [false, string] { const num: number = Number.parseInt(str) const isInteger: boolean = !isNaN(num) && num.toString().length === str.length - return [isInteger, isInteger ? num : str] + return isInteger ? [true, num] : [false, str] } /** @@ -28,4 +20,6 @@ export function tryParseInteger(str: string): [boolean, number | string] { */ export function randomIntBetween(lowerInclusive: number, upperExclusive: number): number { return Math.floor(Math.random() * (upperExclusive - lowerInclusive)) + lowerInclusive -} \ No newline at end of file +} + +export const clamp = (v: number, min: number, max: number): number => Math.min(max, Math.max(min, v)) \ No newline at end of file diff --git a/src/util/pattern.ts b/src/util/pattern.ts index 655515fae..d8f0e1c23 100644 --- a/src/util/pattern.ts +++ b/src/util/pattern.ts @@ -47,10 +47,6 @@ export function isIpAndPort(host: string) { return reg.test(host) } -export function isLocalhost(host: string) { - return host?.startsWith?.('localhost') -} - /** * Test whether the host is a valid host * @@ -95,8 +91,8 @@ export function isValidVirtualHost(host: string) { const segments = host.split('/') // Can't be normal host if (segments.length === 1) return false - if (!isValidHost(segments[0])) return false - return true + const [seg] = segments + return seg && isValidHost(seg) } /** @@ -109,7 +105,7 @@ export function judgeVirtualFast(host: string): boolean { return host?.includes('/') || host?.includes('*') } -export type HostInfo = { +type HostInfo = { /** * Including port */ @@ -123,34 +119,36 @@ export function extractHostname(url: string): HostInfo { return { host: fileHost, protocol: 'file' } } - let host: string - let protocol: string + let host: string | undefined + let protocol: string | undefined const indexOfDoubleSlashes = url.indexOf("//") if (indexOfDoubleSlashes > -1) { const splits = url.split('/') host = splits[2] protocol = splits[0] - protocol = protocol.substring(0, protocol.length - 1) + protocol = protocol?.substring(0, protocol.length - 1) } else { host = url.split('/')[0] protocol = '' } - host = host.split('?')[0] + host = host?.split('?')[0] + + return { host: host ?? '', protocol: protocol ?? '' } +} + +const FILE_PREFIX = "file://" - return { host, protocol } +export function isFileUrl(url: string): boolean { + return url.startsWith(FILE_PREFIX) } /** * @since 0.7.0 */ export function extractFileHost(url: string): string | undefined { - url = url?.trim?.() - if (!url) { - return - } - if (!url.startsWith("file://")) { - return - } + url = url.trim() + if (!isFileUrl(url)) return + const dotIdx = url.lastIndexOf(".") if (dotIdx < 0) { return @@ -202,5 +200,5 @@ export function compileAntPattern(antPattern: string): RegExp { patternStr = patternStr.substring(0, patternStr.length - 3) + ".*" } - return new RegExp("^(.+://)?" + patternStr + "/?(\\?.*)?$") -} \ No newline at end of file + return new RegExp("^(.+://)?" + patternStr + "/?([\\?#].*)?$") +} diff --git a/src/util/period.ts b/src/util/period.ts index 920000c44..47b246182 100644 --- a/src/util/period.ts +++ b/src/util/period.ts @@ -5,15 +5,14 @@ * https://opensource.org/licenses/MIT */ -import { groupBy } from "./array" import { MILL_PER_DAY, MILL_PER_MINUTE } from "./time" export const MINUTE_PER_PERIOD = 15 -export const PERIOD_PER_DATE = 24 * 60 / MINUTE_PER_PERIOD +const PERIOD_PER_DATE = 24 * 60 / MINUTE_PER_PERIOD export const MAX_PERIOD_ORDER = PERIOD_PER_DATE - 1 -export const MILL_PER_PERIOD = MINUTE_PER_PERIOD * MILL_PER_MINUTE +const MILL_PER_PERIOD = MINUTE_PER_PERIOD * MILL_PER_MINUTE -export function keyOf(time: Date | number, order?: number): timer.period.Key { +export function keyOf(time: Date | number, order?: number): tt4b.period.Key { time = time instanceof Date ? time : new Date(time) const year = time.getFullYear() const month = time.getMonth() + 1 @@ -24,13 +23,7 @@ export function keyOf(time: Date | number, order?: number): timer.period.Key { return { year, month, date, order } } -export function copyKeyWith(old: timer.period.Key, newOrder: number): timer.period.Key { - const { year, month, date } = old - return { year, month, date, order: newOrder } -} - -export function indexOf(key: timer.period.Key): number { - if (!key) return 0 +export function indexOf(key: tt4b.period.Key): number { const { year, month, date, order } = key return (year << 18) | (month << 14) @@ -38,90 +31,34 @@ export function indexOf(key: timer.period.Key): number { | order } -export function compare(a: timer.period.Key, b: timer.period.Key): number { +export function compare(a: tt4b.period.Key, b: tt4b.period.Key): number { return indexOf(a) - indexOf(b) } -export function keyBefore(key: timer.period.Key, orderCount: number): timer.period.Key { - let order = key.order - let decomposition = 0 - - while (order < orderCount) { - decomposition++ - order += PERIOD_PER_DATE - } - order = order - orderCount - if (decomposition) { - const newDate = new Date(startOfKey(key).getTime() - MILL_PER_DAY * decomposition) - return keyOf(newDate, order) - } else { - return copyKeyWith(key, order) - } -} - -export function after(key: timer.period.Key, orderCount: number): timer.period.Key { +export function after(key: tt4b.period.Key, orderCount: number): tt4b.period.Key { const date = new Date(key.year, key.month - 1, key.date, 0, (key.order + orderCount) * MINUTE_PER_PERIOD, 1) return keyOf(date) } -export function startOfKey(key: timer.period.Key): Date { +export function startOfKey(key: tt4b.period.Key): Date { return new Date(key.year, key.month - 1, key.date, 0, MINUTE_PER_PERIOD * key.order) } -export function lastKeyOfLastDate(key: timer.period.Key): timer.period.Key { - return keyBefore(key, key.order + 1) -} - -export function getDateString(key: timer.period.Key) { +export function getDateString(key: tt4b.period.Key) { return `${key.year}${key.month < 10 ? '0' : ''}${key.month}${key.date < 10 ? '0' : ''}${key.date}` } -export function rowOf(endKey: timer.period.Key, duration?: number, milliseconds?: number): timer.period.Row { +export function rowOf(endKey: tt4b.period.Key, duration?: number, milliseconds?: number): tt4b.period.Row { duration = duration || 1 milliseconds = milliseconds || 0 const date = getDateString(endKey) const endStart = startOfKey(endKey) - const endTime = new Date(endStart.getTime() + MILL_PER_PERIOD) - const startTime = duration === 1 ? endStart : new Date(endStart.getTime() - (duration - 1) * MILL_PER_PERIOD) + const endTime = endStart.getTime() + MILL_PER_PERIOD + const startTime = duration === 1 ? endStart.getTime() : endStart.getTime() - (duration - 1) * MILL_PER_PERIOD return { startTime, endTime, milliseconds, date } } -export function startOrderOfRow(row: timer.period.Row): number { - return (row.startTime.getHours() * 60 + row.startTime.getMinutes()) / MINUTE_PER_PERIOD -} - -/** - * @param rows period rows - * @returns [0, 12) - */ -export function calcMostPeriodOf2Hours(rows: timer.period.Result[]): number { - const periodCount = rows?.length ?? 0 - // Order [0, 95] - const averageTimePerPeriod: { [order: number]: number } = groupBy(rows, - p => p.order, - (grouped: timer.period.Result[]) => { - const periodMills = grouped.map(p => p.milliseconds) - if (!periodCount) { - return 0 - } - return Math.floor(periodMills.reduce((a, b) => a + b, 0) / periodCount) - } - ) - // Merged per 2 hours - const averageTimePer2Hours: { [idx: number]: number } = groupBy(Object.entries(averageTimePerPeriod), - ([order]) => Math.floor(parseInt(order) / 8), - averages => averages.map(a => a[1]).reduce((a, b) => a + b, 0) - ) - // The two most frequent online hours - const most2Hour: number = parseInt( - Object.entries(averageTimePer2Hours) - .sort((a, b) => a[1] - b[1]) - .reverse()[0]?.[0] - ) - return most2Hour -} - -function generateOrderMap(data: timer.period.Row[], periodSize: number): Map<number, number> { +function generateOrderMap(data: tt4b.period.Row[], periodSize: number): Map<number, number> { const map: Map<number, number> = new Map() data.forEach(item => { const key = Math.floor(startOrderOfRow(item) / periodSize) @@ -131,8 +68,13 @@ function generateOrderMap(data: timer.period.Row[], periodSize: number): Map<num return map } -function cvt2AverageResult(map: Map<number, number>, periodSize: number, dateNum: number): timer.period.Row[] { - const result: timer.period.Row[] = [] +function startOrderOfRow(row: tt4b.period.Row): number { + const d = new Date(row.startTime) + return (d.getHours() * 60 + d.getMinutes()) / MINUTE_PER_PERIOD +} + +function cvt2AverageResult(map: Map<number, number>, periodSize: number, dateNum: number): tt4b.period.Row[] { + const result: tt4b.period.Row[] = [] let period = keyOf(new Date(), 0) for (let i = 0; i < PERIOD_PER_DATE / periodSize; i++) { const key = period.order / periodSize @@ -144,11 +86,12 @@ function cvt2AverageResult(map: Map<number, number>, periodSize: number, dateNum return result } -export function averageByDay(data: timer.period.Row[], periodSize: number): timer.period.Row[] { +export function averageByDay(data: tt4b.period.Row[], periodSize: number): tt4b.period.Row[] { if (!data?.length) return [] const rangeStart = data[0]?.startTime const rangeEnd = data[data.length - 1]?.endTime - const dateNum = (rangeEnd.getTime() - rangeStart.getTime()) / MILL_PER_DAY + if (!rangeStart || !rangeEnd) return [] + const dateNum = (rangeEnd - rangeStart) / MILL_PER_DAY const map = generateOrderMap(data, periodSize) return cvt2AverageResult(map, periodSize, dateNum) } diff --git a/src/util/site.ts b/src/util/site.ts index a188d5aa4..28524c248 100644 --- a/src/util/site.ts +++ b/src/util/site.ts @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -const SEPARATORS = /[-\|–_:：，]/ +const SEPARATORS = /[-|–_:：，]/ const INVALID_SITE_NAME = /(登录)|(我的)|(个人)|(主页)|(首页)|(Welcome)/ @@ -54,12 +54,12 @@ export function generateSiteLabel(host: string, name?: string): string { * * @since 3.0.0 */ -export function supportCategory(siteKey: timer.site.SiteKey | undefined): boolean { +export function supportCategory(siteKey: tt4b.site.SiteKey | undefined): boolean { const { type } = siteKey || {} return type === 'normal' } -export function siteEqual(a: timer.site.SiteKey | undefined, b: timer.site.SiteKey | undefined) { +export function siteEqual(a: tt4b.site.SiteKey | undefined, b: tt4b.site.SiteKey | undefined) { if (!a && !b) return true if (a === b) return true return a?.host === b?.host && a?.type === b?.type @@ -72,39 +72,40 @@ export const CATE_NOT_SET_ID = -1 type SiteIdentityPrefix = 'n' | 'm' | 'v' -const TYPE_PREFIX_MAP: { [type in timer.site.Type]: SiteIdentityPrefix } = { +const TYPE_PREFIX_MAP: { [type in tt4b.site.Type]: SiteIdentityPrefix } = { normal: "n", merged: "m", virtual: "v", } -const PREFIX_TYPE_MAP: { [prefix in SiteIdentityPrefix]: timer.site.Type } = { +const PREFIX_TYPE_MAP: { [prefix in SiteIdentityPrefix]: tt4b.site.Type } = { n: 'normal', m: 'merged', v: 'virtual', } -export function identifySiteKey(site: timer.site.SiteKey | undefined): string { +export function identifySiteKey(site: tt4b.site.SiteKey | undefined): string { if (!site) return '' const { host, type } = site || {} return (TYPE_PREFIX_MAP[type] ?? ' ') + (host || '') } -export function parseSiteKeyFromIdentity(keyIdentity: string): timer.site.SiteKey | undefined { - const type = PREFIX_TYPE_MAP[keyIdentity?.charAt?.(0) as SiteIdentityPrefix] +export function parseSiteIdentity(identity: string | undefined): tt4b.site.SiteKey | undefined { + if (!identity) return + const type = PREFIX_TYPE_MAP[identity.charAt(0) as SiteIdentityPrefix] if (!type) return - const host = keyIdentity?.substring(1)?.trim?.() + const host = identity.substring(1).trim() if (!host) return return { type, host } } -function cloneSiteKey(origin: timer.site.SiteKey | undefined): timer.site.SiteKey | undefined { +function cloneSiteKey(origin: tt4b.site.SiteKey | undefined): tt4b.site.SiteKey | undefined { if (!origin) return return { host: origin.host, type: origin.type } } -export function distinctSites(list: timer.site.SiteKey[]): timer.site.SiteKey[] { - const map: Record<string, timer.site.SiteKey> = {} +export function distinctSites(list: tt4b.site.SiteKey[]): tt4b.site.SiteKey[] { + const map: Record<string, tt4b.site.SiteKey> = {} list?.forEach(ele => { const key = identifySiteKey(ele) if (map[key]) return @@ -115,23 +116,29 @@ export function distinctSites(list: timer.site.SiteKey[]): timer.site.SiteKey[] } export class SiteMap<T> { - private innerMap: Record<string, [timer.site.SiteKey, T | undefined]> + private innerMap: Record<string, [tt4b.site.SiteKey, T]> constructor() { this.innerMap = {} } - public put(site: timer.site.SiteKey, t: T | undefined): void { + static identify<T extends tt4b.site.SiteKey>(data: T[]): SiteMap<T> { + const map = new SiteMap<T>() + data.forEach(item => map.put(item, item)) + return map + } + + public put(site: tt4b.site.SiteKey, t: T): void { const key = identifySiteKey(site) this.innerMap[key] = [site, t] } - public get(site: timer.site.SiteKey): T | undefined { + public get(site: tt4b.site.SiteKey): T | null { const key = identifySiteKey(site) - return this.innerMap[key]?.[1] + return this.innerMap[key]?.[1] ?? null } - public map<R>(mapper: (key: timer.site.SiteKey, value: T | undefined) => R): R[] { + public map<R>(mapper: (key: tt4b.site.SiteKey, value: T) => R): R[] { return Object.values(this.innerMap).map(([site, val]) => mapper?.(site, val)) } @@ -139,11 +146,11 @@ export class SiteMap<T> { return Object.keys(this.innerMap).length } - public keys(): timer.site.SiteKey[] { + public keys(): tt4b.site.SiteKey[] { return Object.values(this.innerMap).map(v => v[0]) } - public forEach(func: (k: timer.site.SiteKey, v: T | undefined, idx: number) => void) { + public forEach(func: (k: tt4b.site.SiteKey, v: T, idx: number) => void) { if (!func) return Object.values(this.innerMap).forEach(([k, v], idx) => func(k, v, idx)) } diff --git a/src/util/stat.ts b/src/util/stat.ts index 7904d2616..1fa609773 100644 --- a/src/util/stat.ts +++ b/src/util/stat.ts @@ -1,3 +1,4 @@ +import { toMap } from './array' import { identifySiteKey } from "./site" /** @@ -6,17 +7,17 @@ import { identifySiteKey } from "./site" * This software is released under the MIT License. * https://opensource.org/licenses/MIT */ -export function isNotZeroResult(target: timer.core.Result): boolean { +export function isNotZeroResult(target: tt4b.core.Result): boolean { return !!target.focus || !!target.time } -export function resultOf(focus: number, time: number): timer.core.Result { +export function resultOf(focus: number, time: number): tt4b.core.Result { return { focus, time } } -export const ALL_DIMENSIONS: timer.core.Dimension[] = ['focus', 'time'] +export const ALL_DIMENSIONS: tt4b.core.Dimension[] = ['focus', 'time'] -export function identifyTargetKey(targetKey: timer.stat.TargetKey): string { +export function identifyTargetKey(targetKey: tt4b.stat.TargetKey): string { if ('cateKey' in targetKey) { return `cate_${targetKey.cateKey}` } else if ('siteKey' in targetKey) { @@ -26,56 +27,63 @@ export function identifyTargetKey(targetKey: timer.stat.TargetKey): string { } } -export function identifyStatKey(rowKey: timer.stat.StatKey) { +export function identifyStatKey(rowKey: tt4b.stat.StatKey) { const { date } = rowKey || {} return [identifyTargetKey(rowKey), date ?? ''].join('_') } -export const isNormalSite = (row: timer.stat.Row): row is timer.stat.SiteRow => { +export const isNormalSite = (row: tt4b.stat.Row): row is tt4b.stat.SiteRow => { return 'siteKey' in row && row.siteKey.type === 'normal' } -export const isMergedSite = (row: timer.stat.Row): row is timer.stat.SiteRow => { - return 'siteKey' in row && row.siteKey.type === 'merged' -} - -export const isGroup = (row: timer.stat.Row): row is timer.stat.GroupRow => { +export const isGroup = (row: tt4b.stat.StatKey): row is tt4b.stat.GroupRow => { return 'groupKey' in row } -export const isSite = (row: timer.stat.Row): row is timer.stat.SiteRow => { +export const isSite = (row: tt4b.stat.StatKey): row is tt4b.stat.SiteRow => { return 'siteKey' in row } -export const isCate = (row: timer.stat.Row): row is timer.stat.CateRow => { +export const isCate = (row: tt4b.stat.StatKey): row is tt4b.stat.CateRow => { return 'cateKey' in row } -export const getHost = (row: timer.stat.Row): string | undefined => { +export const getHost = (row: tt4b.stat.Row): string | undefined => { return 'siteKey' in row ? row.siteKey.host : undefined } -export const getAlias = (row: timer.stat.Row): string | undefined => { +export const getAlias = (row: tt4b.stat.Row): string | undefined => { return 'alias' in row ? row.alias : undefined } -export const getIconUrl = (row: timer.stat.Row): string | undefined => { +export const getIconUrl = (row: tt4b.stat.Row): string | undefined => { return 'iconUrl' in row ? row.iconUrl : undefined } -export const getRelatedCateId = (row: timer.stat.Row): number | undefined => { +export const getRelatedCateId = (row: tt4b.stat.Row): number | undefined => { if ('cateId' in row) return row.cateId if ('cateKey' in row) return row.cateKey return undefined } -export const getComposition = (row: timer.stat.Row, dimension: timer.core.Dimension): timer.stat.RemoteCompositionVal[] => { +export const getComposition = (row: tt4b.stat.Row, dimension: tt4b.core.Dimension): tt4b.stat.RemoteCompositionVal[] => { return 'composition' in row ? row.composition?.[dimension] ?? [] : [] } -export const getGroupName = (groupMap: Record<string, chrome.tabGroups.TabGroup>, row: timer.stat.GroupRow): string => { +export const getGroupName = (groupMap: Record<string, chrome.tabGroups.TabGroup>, row: tt4b.stat.GroupRow): string => { const { groupKey } = row const title = groupMap[groupKey]?.title return title ?? `ID: ${groupKey}` +} + +export const mergeWith = async <T extends tt4b.core.RowKey,>( + original: T[], exist: tt4b.core.Row[], + mergeFunc: (o: T, e: tt4b.core.Row | undefined) => Awaitable<void>, +) => { + const keyOf = ({ date, host }: tt4b.core.RowKey) => `${date}${host}` + const existMap = toMap(exist, keyOf) + for (const o of original) { + await mergeFunc(o, existMap[keyOf(o)]) + } } \ No newline at end of file diff --git a/src/util/time.ts b/src/util/time.ts index 2a0f06996..13656e862 100644 --- a/src/util/time.ts +++ b/src/util/time.ts @@ -18,26 +18,13 @@ import { isRtl } from "./document" * * Parse the time to string */ -export function formatTime(time: Date | string | number, cFormat?: string) { - const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}' +export function formatTime(time: Date | number, format?: string) { + format ??= '{y}-{m}-{d} {h}:{i}:{s}' let date: Date if (time instanceof Date) { date = time } else { - if ((typeof time === 'string')) { - if ((/^[0-9]+$/.test(time))) { - // support "1548221490638" - time = parseInt(time) - } else { - // support safari - time = time.replace(new RegExp(/-/gm), '/') - } - } - - if ((typeof time === 'number') && (time.toString().length === 10)) { - time = time * 1000 - } - date = new Date(time) + date = new Date(time.toString().length === 10 ? time * 1000 : time) } const formatObj: Record<string, number> = { y: date.getFullYear(), @@ -50,6 +37,7 @@ export function formatTime(time: Date | string | number, cFormat?: string) { } const timeStr = format.replace(/{([ymdhisa])+}/g, (_result, key) => { const value = formatObj[key] + if (value === undefined) return key // Note: getDay() returns 0 on Sunday if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] } return value.toString().padStart(2, '0') @@ -57,14 +45,16 @@ export function formatTime(time: Date | string | number, cFormat?: string) { return timeStr } -export function formatTimeYMD(time: Date | string | number) { +export function formatTimeYMD(time: Date | number): string { return formatTime(time, '{y}{m}{d}') } +type PeriodMsgFormat = Record<'dayMsg' | 'hourMsg' | 'minuteMsg' | 'secondMsg', string> + /** * Format milliseconds for display */ -export function formatPeriod(milliseconds: number, message: Record<'dayMsg' | 'hourMsg' | 'minuteMsg' | 'secondMsg', string>): string { +function formatPeriod(milliseconds: number, message: PeriodMsgFormat): string { const prefix = milliseconds < 0 ? '-' : '' milliseconds = Math.abs(milliseconds) const { dayMsg, hourMsg, minuteMsg, secondMsg } = message @@ -92,29 +82,45 @@ export function formatPeriod(milliseconds: number, message: Record<'dayMsg' | 'h return prefix + result } +const PERIOD_RTL: PeriodMsgFormat = { + dayMsg: 's{second} m{minute} h{hour} d{day}', + hourMsg: 's{second} m{minute} h{hour}', + minuteMsg: 's{second} m{minute}', + secondMsg: 's{second}', +} +const PERIOD_RTL_SIMPLIFIED: PeriodMsgFormat = { + dayMsg: 's{second}m{minute}h{hour}d{day}', + hourMsg: 's{second}m{minute}h{hour}', + minuteMsg: 's{second}m{minute}', + secondMsg: 's{second}', +} +const PERIOD_LTR: PeriodMsgFormat = { + dayMsg: '{day}d {hour}h {minute}m {second}s', + hourMsg: '{hour}h {minute}m {second}s', + minuteMsg: '{minute}m {second}s', + secondMsg: '{second}s', +} +const PERIOD_LTR_SIMPLIFIED: PeriodMsgFormat = { + dayMsg: '{day}d{hour}h{minute}m{second}s', + hourMsg: '{hour}h{minute}m{second}s', + minuteMsg: '{minute}m{second}s', + secondMsg: '{second}s', +} + /** * e.g. * - * 100h0m0s - * 20h10m59s - * 20h0m1s - * 10m20s + * 2d 10h 0m 0s + * 20h 0m 1s + * 10m 20s * 30s * * @return (xx+h)(xx+m)xx+s */ -export function formatPeriodCommon(milliseconds: number): string { - const defaultMessage = isRtl() ? { - dayMsg: 's {second} m {minute} h {hour} d', - hourMsg: 's {second} m {minute} h {hour}', - minuteMsg: 's {second} m {minute}', - secondMsg: 's {second}', - } : { - dayMsg: '{day} d {hour} h {minute} m {second} s', - hourMsg: '{hour} h {minute} m {second} s', - minuteMsg: '{minute} m {second} s', - secondMsg: '{second} s', - } +export function formatPeriodCommon(milliseconds: number, simplified?: boolean): string { + const defaultMessage = isRtl() + ? (simplified ? PERIOD_RTL_SIMPLIFIED : PERIOD_RTL) + : (simplified ? PERIOD_LTR_SIMPLIFIED : PERIOD_LTR) return formatPeriod(milliseconds, defaultMessage) } @@ -175,13 +181,13 @@ export function getMonthTime(target: Date): [Date, Date] { * Get the start time of this day * * @param target the specific time - * @returns the start of this day + * @returns the start of this day, in milliseconds * @since 1.0.0 */ -export function getStartOfDay(target: Date | number) { +export function getStartOfDay(target: Date | number): number { const date = new Date(target) date.setHours(0, 0, 0, 0) - return date + return date.getTime() } /** @@ -198,6 +204,7 @@ export function getBirthday(): Date { date.setHours(0, 0, 0, 0) return date } + export const BIRTHDAY = '20220303' /** @@ -252,3 +259,16 @@ export function parseTime(dateStr: string | undefined): Date | undefined { result.setDate(date) return result } + +export type DateRange = Date | [Date?, Date?] | undefined + +export const cvtDateRange2Str = (range: DateRange): [string?, string?] | undefined => { + if (range === undefined) return undefined + if (range instanceof Date) { + // The same day + const date = formatTimeYMD(range) + return [date, date] + } + const [start, end] = range + return [start && formatTimeYMD(start), end && formatTimeYMD(end)] +} \ No newline at end of file diff --git a/src/util/tuple.ts b/src/util/tuple.ts index 7d114d701..a6d190b76 100644 --- a/src/util/tuple.ts +++ b/src/util/tuple.ts @@ -1,22 +1,19 @@ -import { range } from "./array" -const isTuple = (arg: unknown): arg is Tuple<any, never> => { - if (Array.isArray(arg)) return true - if (!(arg as Object).hasOwnProperty?.("get")) return false - const predicate = arg as Tuple<any, never> - const len = predicate?.length - return typeof len === 'number' && !isNaN(len) && isFinite(len) && len >= 0 && Number.isInteger(len) +export function isTuple<T, N extends number>(arr: T[], len: N): arr is Tuple<T, N> { + return arr.length === len } /** * Add tuple */ export const addVector = <L extends number>(a: Vector<L>, toAdd: Vector<L> | number): Vector<L> => { - const l: L = a.length ?? 0 as L - if (isTuple(toAdd)) { - return range(l).map(idx => (a?.[idx] ?? 0) + (toAdd?.[idx] ?? 0)) as unknown as Vector<L> + const arr = a as number[] + + if (typeof toAdd === 'number') { + return arr.map(v => v + toAdd) as Vector<L> } else { - return a?.map(v => (v ?? 0) + ((toAdd as number) ?? 0)) as unknown as Vector<L> + const b = toAdd as number[] + return arr.map((v, i) => v + (b[i] ?? 0)) as Vector<L> } } @@ -24,11 +21,13 @@ export const addVector = <L extends number>(a: Vector<L>, toAdd: Vector<L> | num * Subtract tuple */ export const subVector = <L extends number>(a: Vector<L>, toSub: Vector<L> | number): Vector<L> => { - const l: L = a.length ?? 0 as L - if (isTuple(toSub)) { - return range(l).map(idx => (a?.[idx] ?? 0) - (toSub?.[idx] ?? 0)) as unknown as Vector<L> + const arr = a as number[] + + if (typeof toSub === 'number') { + return arr.map(v => v - toSub) as Vector<L> } else { - return a?.map(v => (v ?? 0) + ((toSub as number) ?? 0)) as unknown as Vector<L> + const b = toSub as number[] + return arr.map((v, i) => v - (b[i] ?? 0)) as Vector<L> } } @@ -36,12 +35,6 @@ export const subVector = <L extends number>(a: Vector<L>, toSub: Vector<L> | num * Multiple tuple */ export const multiTuple = <L extends number>(a: Vector<L>, multiFactor: number): Vector<L> => { - return a?.map(v => (v ?? 0) * (multiFactor ?? 0)) as unknown as Vector<L> -} - -/** - * Divide tuple - */ -export const divideTuple = <L extends number>(a: Vector<L>, divideFactor: number): Vector<L> => { - return a?.map(v => (v ?? 0) / (divideFactor ?? 0)) as unknown as Vector<L> + const arr = a as number[] + return arr.map(v => v * multiFactor) as Vector<L> } diff --git a/test-e2e/backup/common.ts b/test-e2e/backup/common.ts new file mode 100644 index 000000000..5a64e932f --- /dev/null +++ b/test-e2e/backup/common.ts @@ -0,0 +1,206 @@ +import type { ElementHandle, Page } from 'puppeteer' +import { type LaunchContext } from '../common/base' +import { waitForMessage, waitForSuccMessage } from '../common/message' +import { sleep } from '../common/util' + +const typeNames: Record<tt4b.backup.Type, string> = { + gist: 'gist', + web_dav: 'dav', + obsidian_local_rest_api: 'obsidian', + none: 'none', +} + +const OPTION_TAB_ID = 'pane-backup' + +async function waitClientReady(page: Page): Promise<ElementHandle<Element> | null> { + await page.waitForFunction(() => { + const emptyBody = document.querySelector('.el-dialog .el-table__empty-block') + const rows = document.querySelectorAll('.el-dialog .el-table .el-table__row') + return !!emptyBody || !!rows.length + }, { timeout: 1000 }) + + const nextBtn = await page.waitForSelector( + '.el-overlay:not([style*="display: none"]) .el-dialog .el-button.el-button--primary:not([disabled])', + { timeout: 1000 }, + ) + return nextBtn +} + +async function findCurrentClientRow(page: Page): Promise<ElementHandle<Element> | null> { + const table = await page.waitForSelector( + '.el-overlay:not([style*="display: none"]) .el-dialog .el-table', + { timeout: 2000 }, + ) + const rows = await table!.$$('.el-table__row') + + for (const row of rows) { + const currVisible = await row.evaluate(el => { + const tag = el.querySelector('.el-table__cell .el-tag') + if (!tag) return false + const text = tag.textContent + if (!text.toLowerCase().includes('current')) return false + const style = window.getComputedStyle(tag) + return style && style.display !== 'none' + }) + if (currVisible) return row + } + return null +} + +async function selectCurrentClient(page: Page): Promise<void> { + const currRow = await findCurrentClientRow(page) + expect(currRow).toBeTruthy() + await currRow!.click() + await sleep(.1) +} + +export class BackupOptionWrapper { + private _page: Page | undefined + + constructor(private context: LaunchContext) { } + + private async page() { + if (this._page) { + await this._page.bringToFront() + return this._page + } + this._page = await this.context.openAppPage('/additional/option?i=backup') + return this._page + } + + async $(selector: string) { + const page = await this.page() + return await page.$(`#${OPTION_TAB_ID} ${selector}`) + } + + async changeType(type: tt4b.backup.Type) { + const page = await this.page() + const pane = await page.$(`#${OPTION_TAB_ID} .el-select`) + await pane?.click() + await sleep(.1) + + const backupOptions = await page.$$('.el-popper[data-popper-reference-hidden="false"] .el-select-dropdown__item') + + const labelPart = typeNames[type] + for (const option of backupOptions) { + const text = await option.evaluate(el => el.textContent) + if (text?.toLowerCase().includes(labelPart)) { + await option.click() + break + } + } + await sleep(.1) + + return page + } + + async assertTestInvalid() { + const page = await this.clickButton('test') + // The same as mock server + await waitForMessage(page, 'Unauthorized') + } + + async assertTestValid() { + const page = await this.clickButton('test') + await waitForMessage(page, 'Valid!') + } + + async assertBackupSuccess() { + const page = await this.clickButton('backup') + + // Wait for the success message + await waitForSuccMessage(page) + + const lastSyncTime = await this.findLastSyncTime() + expect(lastSyncTime).toBeTruthy() + // Less than 2 seconds + expect(Date.now() - lastSyncTime!.getTime()).toBeLessThan(2 * 1000) + } + + private async clickButton(textPart: string): Promise<Page> { + const page = await this.page() + const buttons = await page.$$(`#${OPTION_TAB_ID} .el-button`) + for (const button of buttons) { + const text = await button.evaluate(el => el.textContent) + if (text?.toLowerCase().includes(textPart.toLowerCase())) { + await button.click() + return page + } + } + throw new Error(`Button with text "${textPart}" not found`) + } + + private async findLastSyncTime() { + const page = await this.page() + const texts = await page.$$(`#${OPTION_TAB_ID} .el-text`) + for (const textEl of texts) { + const text = await textEl.evaluate(el => el.textContent) + const matchRes = /(?<M>\d{2})\/(?<d>\d{2})\/(?<y>\d{4}) (?<h>\d{2}):(?<m>\d{2}):(?<s>\d{2})/.exec(text ?? '') + if (!matchRes) continue + const groups = matchRes.groups + if (!groups) continue + const { M, d, y, h, m, s } = groups + if (!y || !M || !d || !h || !m || !s) continue + return new Date( + Number.parseInt(y), Number.parseInt(M) - 1, Number.parseInt(d), + Number.parseInt(h), Number.parseInt(m), Number.parseInt(s), + ) + } + return undefined + } + + async downloadCurrentWithAcc() { + // Open dialog + const page = await this.clickButton('download') + + const nextBtn = await waitClientReady(page) + + // Select current client row + await selectCurrentClient(page) + + // Next step + await nextBtn!.click() + + // Wait for download enabled + const downloadBtn = await page.waitForSelector('.el-dialog .el-button.el-button--success:not([disabled])', { timeout: 1000 }) + + // Choose the solution + const solutionRadio = await page.waitForSelector('.el-dialog .el-radio-group > label:nth-child(2)', { timeout: 1000 }) + await solutionRadio!.click() + + // Do downloading + await downloadBtn!.click() + + await waitForSuccMessage(page) + } + + async clearData() { + const page = await this.clickButton('clear') + + const nextBtn = await waitClientReady(page) + + // Select current client row + await selectCurrentClient(page) + + // Next step + await nextBtn!.click() + + // Wait for clear enabled + const clearBtn = await page.waitForSelector('.el-dialog .el-button.el-button--danger:not([disabled])', { timeout: 1000 }) + + await clearBtn!.click() + + await waitForSuccMessage(page) + } + + async assertCantDownloadCurr() { + // Open dialog + const page = await this.clickButton('download') + + await waitClientReady(page) + + // Select current client row + const currRow = await findCurrentClientRow(page) + expect(currRow).toBeFalsy() + } +} \ No newline at end of file diff --git a/test-e2e/backup/gist.test.ts b/test-e2e/backup/gist.test.ts new file mode 100644 index 000000000..42a451f5f --- /dev/null +++ b/test-e2e/backup/gist.test.ts @@ -0,0 +1,67 @@ +import { useLaunchContext } from '../common/base' +import { readRecordsOfFirstPage } from '../common/record' +import { MOCK_URL, sleep } from '../common/util' +import { BackupOptionWrapper } from './common' + +const GIST_MOCK_ORIGIN = 'http://127.0.0.1:12347' +const GIST_MOCK_TOKEN = 'github_gist_mock_token' + +const describeOptional = process.env.GITHUB_ACTIONS ? describe.skip : describe + +describeOptional('Backup with gist', () => { + const context = useLaunchContext({ bgProxies: [{ host: 'api.github.com', target: GIST_MOCK_ORIGIN }] }) + + test('create and update gist', async () => { + // Fill in gist parameters + const option = new BackupOptionWrapper(context) + await option.changeType('gist') + + const tokenInput = await option.$('input[name="token"]') + expect(tokenInput).toBeTruthy() + + // Assert test invalid with invalid token + await tokenInput!.type('foobar' + Date.now()) + await sleep(.5) + await option.assertTestInvalid() + + // Assert token is valid + await tokenInput!.focus() + await tokenInput!.evaluate(el => { + if (!(el instanceof HTMLInputElement)) return + el.value = '' + el.dispatchEvent(new Event('input', { bubbles: true })) + }) + await tokenInput!.type(GIST_MOCK_TOKEN) + await sleep(.5) + await option.assertTestValid() + + + // Visit site + const sitePage = await context.newPageAndWaitCsInjected(MOCK_URL) + await sleep(2) + await sitePage.close() + let originalRecords = await readRecordsOfFirstPage(context) + expect(originalRecords.length).toEqual(1) + const original = originalRecords[0] + + // Upload the data to gist + await option.assertBackupSuccess() + + // Check download content + await sleep(1) + await option.downloadCurrentWithAcc() + + const twiceRecords = await readRecordsOfFirstPage(context) + expect(twiceRecords.length).toEqual(1) + const after = twiceRecords[0] + expect(after?.url).toEqual(original?.url) + expect(after?.visit).toEqual('2') + + // Clear data + await option.clearData() + + // Assert can't download current + await sleep(1) + await option.assertCantDownloadCurr() + }, 50000) +}) \ No newline at end of file diff --git a/test-e2e/common/base.ts b/test-e2e/common/base.ts index 81d044910..2bc5fa04f 100644 --- a/test-e2e/common/base.ts +++ b/test-e2e/common/base.ts @@ -1,93 +1,150 @@ -import { type Browser, launch, type Page } from "puppeteer" +import { type Browser, type CDPSession, launch, type Page, type Target } from "puppeteer" import { E2E_OUTPUT_PATH } from "../../rspack/constant" import { removeAllWhitelist } from './whitelist' const USE_HEADLESS_PUPPETEER = !!process.env['USE_HEADLESS_PUPPETEER'] -export interface LaunchContext { - browser: Browser - extensionId: string - - close(): Promise<void> - - openAppPage(route: string): Promise<Page> +type HostProxy = { + host: string + target: string +} - newPage(url?: string): Promise<Page> +async function setupBgProxies(serviceWorker: Target, proxies: HostProxy[]): Promise<CDPSession | undefined> { + let session: CDPSession | undefined + try { + session = await serviceWorker.createCDPSession() + await session.send('Fetch.enable', { + patterns: proxies.map(p => ({ urlPattern: `*://${p.host}/*`, requestStage: 'Request' as const })), + }) + } catch { + // Target may have been closed before the session was ready + return + } + session.on('Fetch.requestPaused', async event => { + const { requestId, request: { url: originUrl } } = event + try { + const url = new URL(originUrl) + const proxy = proxies.find(p => url.hostname === p.host || url.host === p.host) + if (!proxy) { + await session.send('Fetch.continueRequest', { requestId }) + return + } + const targetUrl = new URL(proxy.target) + url.protocol = targetUrl.protocol + url.hostname = targetUrl.hostname + url.port = targetUrl.port + await session.send('Fetch.continueRequest', { requestId, url: String(url) }) + } catch { + await session.send('Fetch.continueRequest', { requestId }) + } + }) + return session +} - newPageAndWaitCsInjected(url: string): Promise<Page> +async function waitForNetworkIdleShortly(page: Page): Promise<void> { + await page.waitForNetworkIdle({ idleTime: 20 }) } -class LaunchContextWrapper implements LaunchContext { - browser: Browser - extensionId: string +export class LaunchContext { + #b: Browser | null = null + #eid: string | null = null + #cdp: CDPSession | null = null + + constructor(private readonly options?: BrowserOptions) { } - constructor(browser: Browser, extensionId: string) { - this.browser = browser - this.extensionId = extensionId + async launch(): Promise<void> { + const { browser, extensionId, cdpSession } = await launchBrowser(this.options) + this.#b = browser + this.#cdp = cdpSession ?? null + this.#eid = extensionId + // remove whitelist added by service_worker + await removeAllWhitelist(this) } - close(): Promise<void> { - return this.browser.close() + async close(): Promise<void> { + this.#cdp?.detach().catch(() => { }) + await this.#b?.close() + this.#b = null + this.#eid = null + this.#cdp = null } async openAppPage(route: string): Promise<Page> { const page = await this.browser.newPage() - await page.goto(`chrome-extension://${this.extensionId}/static/app.html#${route}`) + await page.goto(`chrome-extension://${this.#eid}/static/app.html#${route}`) + await waitForNetworkIdleShortly(page) return page } async newPage(url?: string): Promise<Page> { const page = await this.browser.newPage() - if (url) { - await page.goto(url, { waitUntil: 'domcontentloaded' }) - } + url && await page.goto(url, { waitUntil: 'domcontentloaded' }) return page } async newPageAndWaitCsInjected(url: string): Promise<Page> { const page = await this.browser.newPage() await page.goto(url) - await page.waitForSelector(`#__TIMER_INJECTION_FLAG__${this.extensionId}`) + await page.waitForSelector(`#__TIMER_INJECTION_FLAG__${this.#eid}`) return page } -} -export async function launchBrowser(dirPath?: string): Promise<LaunchContext> { - dirPath = dirPath ?? E2E_OUTPUT_PATH - - const browser = await launch({ - defaultViewport: null, - headless: USE_HEADLESS_PUPPETEER, - args: [ - `--disable-extensions-except=${dirPath}`, - `--load-extension=${dirPath}`, - '--start-maximized', - '--no-sandbox', - ], - }) - const serviceWorker = await browser.waitForTarget(target => target.type() === 'service_worker') - const url = serviceWorker.url() - let extensionId: string | undefined = url.split('/')[2] - if (!extensionId) { - throw new Error('Failed to detect extension id') + get browser(): Browser { + if (!this.#b) throw new Error('Browser not initialized') + return this.#b } - const context = new LaunchContextWrapper(browser, extensionId) - - // remove whitelist added by service_worker - await removeAllWhitelist(context) + get extensionId(): string { + if (!this.#eid) throw new Error('Extension id not detected') + return this.#eid + } +} - return context +type BrowserOptions = { + dirPath?: string + bgProxies?: HostProxy[] } -export function sleep(seconds: number): Promise<void> { - return new Promise(resolve => setTimeout(resolve, seconds * 1000)) +type LaunchResult = { + browser: Browser + extensionId: string + cdpSession?: CDPSession } -export const MOCK_HOST = "127.0.0.1:12345" +async function launchBrowser(options?: BrowserOptions): Promise<LaunchResult> { + const { dirPath = E2E_OUTPUT_PATH, bgProxies } = options ?? {} + const args = [ + `--disable-extensions-except=${dirPath}`, + `--load-extension=${dirPath}`, + '--start-maximized', + '--no-sandbox', + '--lang=en', + ] + // GitHub-hosted runners use a small /dev/shm; Chrome can crash or hang without this flag. + if (process.env['GITHUB_ACTIONS'] === 'true') { + args.push('--disable-gpu', '--disable-dev-shm-usage') + } + // Test with large screen + USE_HEADLESS_PUPPETEER && args.push('--window-size=1880,1000') -export const MOCK_URL = "http://" + MOCK_HOST + const browser = await launch({ + defaultViewport: null, + headless: USE_HEADLESS_PUPPETEER, + enableExtensions: true, + args, + }) + const sw = await browser.waitForTarget(target => target.type() === 'service_worker') + const url = sw.url() + let extensionId = url.split('/')[2] + if (!extensionId) throw new Error('Failed to detect extension id') -export const MOCK_HOST_2 = "127.0.0.1:12346" + const cdpSession = bgProxies?.length ? await setupBgProxies(sw, bgProxies) : undefined + return { browser, extensionId, cdpSession } +} -export const MOCK_URL_2 = "http://" + MOCK_HOST_2 +export function useLaunchContext(options?: BrowserOptions): LaunchContext { + const context = new LaunchContext(options) + beforeEach(() => context.launch()) + afterEach(() => context.close()) + return context +} \ No newline at end of file diff --git a/test-e2e/common/cond-editor.ts b/test-e2e/common/cond-editor.ts new file mode 100644 index 000000000..7a47ae76e --- /dev/null +++ b/test-e2e/common/cond-editor.ts @@ -0,0 +1,21 @@ +import type { Page } from 'puppeteer' +import { sleep } from './util' + +/** + * Fill URLs into a CondEditor component on the page. + * + * @param page - Puppeteer page instance + * @param urls - URLs to add + * @param ancestor - Optional ancestor selector to scope the CondEditor (e.g. '.el-dialog') + */ +export async function fillCondEditor(page: Page, urls: string[], ancestor?: string) { + const selector = ancestor ? `${ancestor} .cond-editor input` : '.cond-editor input' + const input = await page.waitForSelector(selector, { visible: true }) + for (const url of urls) { + await input!.click() + await page.keyboard.type(url) + await sleep(.2) + await page.keyboard.press('Enter') + await sleep(.2) + } +} diff --git a/test-e2e/common/message.ts b/test-e2e/common/message.ts new file mode 100644 index 000000000..6d8e1a1ac --- /dev/null +++ b/test-e2e/common/message.ts @@ -0,0 +1,16 @@ +import { type Page } from 'puppeteer' + +export async function waitForMessage(page: Page, msg: string): Promise<void> { + await page.waitForFunction( + (msg: string) => { + const messages = document.querySelectorAll('.el-message') + return Array.from(messages).some(el => el.textContent === msg) + }, + { timeout: 5000 }, + msg, + ) +} + +export async function waitForSuccMessage(page: Page) { + return waitForMessage(page, 'Successfully!') +} \ No newline at end of file diff --git a/test-e2e/common/record.ts b/test-e2e/common/record.ts index 5fbd7469d..107a8de8c 100644 --- a/test-e2e/common/record.ts +++ b/test-e2e/common/record.ts @@ -1,4 +1,4 @@ -import { LaunchContext } from "./base" +import type { LaunchContext } from "./base" type RecordRow = { date: string @@ -14,18 +14,18 @@ function readRecords(): RecordRow[] { const rows = document.querySelectorAll('.el-table .el-table__body-wrapper table tbody tr') return Array.from(rows).map(row => { const cells = row.querySelectorAll('td') - const date = cells[1].textContent ?? '' - const url = cells[2].textContent ?? '' - const name = cells[3].textContent ?? '' - const category = cells[4].textContent ?? '' - const time = cells[5].textContent ?? '' + const date = cells[1]?.textContent ?? '' + const url = cells[2]?.textContent ?? '' + const name = cells[3]?.textContent ?? '' + const category = cells[4]?.textContent ?? '' + const time = cells[5]?.textContent ?? '' let runTime: string | undefined = undefined, visit = '' if (cells?.length === 9) { // Including run time - runTime = cells[6].textContent ?? undefined - visit = cells[7].textContent ?? '' + runTime = cells[6]?.textContent ?? undefined + visit = cells[7]?.textContent ?? '' } else { - visit = cells[6].textContent ?? '' + visit = cells[6]?.textContent ?? '' } return { date, url, name, category, time, runTime, visit } }) @@ -43,7 +43,7 @@ export function parseTime2Sec(timeStr: string | undefined): number | undefined { } export async function readRecordsOfFirstPage(context: LaunchContext) { - const recordPage = await context.openAppPage('/data/report') + const recordPage = await context.openAppPage('/data/record') // At least one record await recordPage.waitForSelector('.el-table .el-table__body-wrapper table tbody tr td') let records = await recordPage.evaluate(readRecords) diff --git a/test-e2e/common/util.ts b/test-e2e/common/util.ts new file mode 100644 index 000000000..0911dcf0e --- /dev/null +++ b/test-e2e/common/util.ts @@ -0,0 +1,11 @@ +export function sleep(seconds: number): Promise<void> { + return new Promise(resolve => setTimeout(resolve, seconds * 1000)) +} + +export const MOCK_HOST = "127.0.0.1:12345" + +export const MOCK_URL = "http://" + MOCK_HOST + +const MOCK_HOST_2 = "127.0.0.1:12346" + +export const MOCK_URL_2 = "http://" + MOCK_HOST_2 diff --git a/test-e2e/common/whitelist-skip.test.ts b/test-e2e/common/whitelist-skip.test.ts new file mode 100644 index 000000000..ea92ce978 --- /dev/null +++ b/test-e2e/common/whitelist-skip.test.ts @@ -0,0 +1,9 @@ +import { LaunchContext } from './base' +import { createWhitelist } from './whitelist' + +// Run to test the function, but skip it in normal test runs +test.skip('create whitelist', async () => { + const context = new LaunchContext() + await context.launch() + await createWhitelist(context, 'example.com') +}) \ No newline at end of file diff --git a/test-e2e/common/whitelist.ts b/test-e2e/common/whitelist.ts index 357e7afc5..37c036a4d 100644 --- a/test-e2e/common/whitelist.ts +++ b/test-e2e/common/whitelist.ts @@ -1,26 +1,18 @@ -import { type LaunchContext, sleep } from "./base" +import { type LaunchContext } from "./base" +import { fillCondEditor } from './cond-editor' +import { sleep } from './util' export async function createWhitelist(context: LaunchContext, white: string) { - const whitePage = await context.openAppPage('/additional/whitelist') + const whitePage = await context.openAppPage('/additional/rule?i=white') - const btn = await whitePage.waitForSelector('.el-button') - await btn?.click() + await fillCondEditor(whitePage, [white]) await sleep(.2) - const input = await whitePage.$('.el-select__input') - await input?.focus() - await whitePage.keyboard.type(white) - await sleep(.4) - const selectItem = await whitePage.waitForSelector('.el-popper .el-select-dropdown li:nth-child(1)') - await selectItem?.click() - await whitePage.click('.el-button:nth-child(3)') - const checkBtn = await whitePage.waitForSelector('.el-overlay.is-message-box .el-button.el-button--primary') - await checkBtn?.click() setTimeout(() => whitePage.close(), 200) } export async function removeAllWhitelist(context: LaunchContext) { - const whitePage = await context.openAppPage('/additional/whitelist') + const whitePage = await context.openAppPage('/additional/rule?i=white') await whitePage.evaluate(async () => { await chrome.storage.local.remove('__timer__WHITELIST') }) diff --git a/test-e2e/example/index.html b/test-e2e/example/index.html deleted file mode 100644 index b1dc95fad..000000000 --- a/test-e2e/example/index.html +++ /dev/null @@ -1,6 +0,0 @@ -<!DOCTYPE html> -<html> - <body> - <div>Time Tracker test page</div> - </body> -</html> \ No newline at end of file diff --git a/test-e2e/install.test.ts b/test-e2e/install.test.ts deleted file mode 100644 index bb774d355..000000000 --- a/test-e2e/install.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { join } from "path" -import { launchBrowser, type LaunchContext } from "./common/base" - -let context: LaunchContext - -describe('After installed', () => { - beforeEach(async () => { - const path = join(__dirname, '..', 'dist_prod') - context = await launchBrowser(path) - }) - - afterEach(async () => context.close()) - - test('Open the official page', async () => { - const { browser } = context - await browser.waitForTarget(target => target.url().includes('wfhg.cc')) - }, 5000) -}) - diff --git a/test-e2e/limit/common.ts b/test-e2e/limit/common.ts index e8a34a321..dc1c97aff 100644 --- a/test-e2e/limit/common.ts +++ b/test-e2e/limit/common.ts @@ -1,36 +1,49 @@ -import { ElementHandle, type Page } from "puppeteer" -import { sleep } from "../common/base" +import type { ElementHandle, Frame, Page } from "puppeteer" +import { fillCondEditor } from "../common/cond-editor" +import { sleep } from "../common/util" -export async function createLimitRule(rule: timer.limit.Rule, page: Page) { +export async function waitForLimitFrame(page: Page, timeout = 5000): Promise<Frame> { + return page.waitForFrame(f => f.url().includes('limit.html'), { timeout }) +} + +export async function isLimitModalVisible(page: Page): Promise<boolean> { + await page.waitForSelector('extension-time-tracker-overlay', { timeout: 3000 }) + return await page.evaluate(async () => { + const overlay = document.querySelector('extension-time-tracker-overlay') + if (!overlay) return false + const iframe = overlay.shadowRoot?.firstElementChild + return iframe instanceof HTMLIFrameElement + && iframe.style.visibility !== 'hidden' + && iframe.style.display !== 'none' + }) +} + +export async function createLimitRule(rule: tt4b.limit.Rule, page: Page) { const createButton = await page.$('.el-card:first-child .el-button:last-child') await createButton!.click() // 1 Fill the name await page.waitForSelector('.el-dialog .el-input input') const nameInput = await page.$('.el-dialog .el-input input') await nameInput!.focus() + await nameInput?.click({ count: 3 }) + await sleep(.1) page.keyboard.type(rule.name) await new Promise(resolve => setTimeout(resolve, 400)) await page.click('.el-dialog .el-button.el-button--primary') // 2. Fill the condition - const configInput = await page.$('.el-dialog .el-input.el-input-group input') - for (const url of rule.cond || []) { - await configInput!.focus() - await page.keyboard.type(url) - await sleep(.1) - await page.keyboard.press('Enter') - } + await fillCondEditor(page, rule.cond || [], '.el-dialog') await sleep(.1) await page.click('.el-dialog .el-button.el-button--primary') // 3. Fill the rule await sleep(.1) const { time, weekly, visitTime, count, weeklyCount } = rule || {} - const timeInputs = await page.$$('.el-dialog .el-date-editor input') - await fillTimeLimit(time, timeInputs[0], page) - await fillTimeLimit(weekly, timeInputs[1], page) - await fillTimeLimit(visitTime, timeInputs[2], page) - const visitInputs = await page.$$('.el-dialog .el-input-number input') - await fillVisitLimit(count!, visitInputs[0], page) - await fillVisitLimit(weeklyCount!, visitInputs[1], page) + const [fstTime, secTime, trdTime] = await page.$$('.el-dialog .el-date-editor input') + fstTime && await fillTimeLimit(time, fstTime, page) + secTime && await fillTimeLimit(weekly, secTime, page) + trdTime && await fillTimeLimit(visitTime, trdTime, page) + const [fstVisit, secVisit] = await page.$$('.el-dialog .el-input-number input') + fstVisit && await fillVisitLimit(count!, fstVisit, page) + secVisit && await fillVisitLimit(weeklyCount!, secVisit, page) // 4. Save await sleep(.3) @@ -68,8 +81,15 @@ export async function fillTimeLimit(value: number | undefined, input: ElementHan await sleep(.2) } -export async function fillVisitLimit(value: number, input: ElementHandle<HTMLInputElement>, page: Page) { +async function fillVisitLimit(value: number, input: ElementHandle<HTMLInputElement>, page: Page) { await input.focus() await page.keyboard.press('Delete') await page.keyboard.type(`${value ?? 0}`) +} + +export async function clickDelay(testPage: Page) { + const limitFrame = await waitForLimitFrame(testPage) + const moreBtn = await limitFrame.waitForSelector('.el-button--primary') + await moreBtn!.click() + await sleep(.8) } \ No newline at end of file diff --git a/test-e2e/limit/daily-limit.test.ts b/test-e2e/limit/daily-limit.test.ts new file mode 100644 index 000000000..b0bbe0da5 --- /dev/null +++ b/test-e2e/limit/daily-limit.test.ts @@ -0,0 +1,153 @@ +import { useLaunchContext } from '../common/base' +import { MOCK_URL, sleep } from '../common/util' +import { createLimitRule, fillTimeLimit, isLimitModalVisible, waitForLimitFrame } from "./common" + +describe('Daily limit', () => { + const context = useLaunchContext() + + test('basic time limit', async () => { + const limitTime = 2 + const limitPage = await context.openAppPage('/behavior/limit') + const demoRule: tt4b.limit.Rule = { + id: 1, name: 'TEST DAILY LIMIT', + cond: [MOCK_URL], + time: limitTime, + enabled: true, allowDelay: false, locked: false, + } + + // 1. Insert limit rule + await createLimitRule(demoRule, limitPage) + + // 2. Open test page + const testPage = await context.newPageAndWaitCsInjected(MOCK_URL) + await sleep(1.1) + + // Assert not limited + await limitPage.bringToFront() + // Wait refreshing the table + await sleep(.1) + let wastedTime = await limitPage.evaluate(() => { + const timeTag = document.querySelector('.el-table .el-table__body-wrapper table tbody tr td:nth-child(6) .el-tag:first-child') + const timeStr = timeTag?.textContent + return parseInt(timeStr?.replace('s', '')?.trim() ?? '0') + }) + expect(wastedTime).toBeGreaterThanOrEqual(1) + + // 3. Switch to test page again + await testPage.bringToFront() + await sleep(2.1) + + // 4. Limited + const limitFrame = await waitForLimitFrame(testPage) + await limitFrame.waitForFunction(() => { + const td = document.querySelector('#app .el-descriptions:not([style*="display: none"]) tr td:nth-child(2)') + return td?.textContent && td.textContent !== '-' + }, { timeout: 5000 }) + const { name, time } = await limitFrame.evaluate(() => { + const descEl = document.querySelector('#app .el-descriptions:not([style*="display: none"])') + const trs = descEl?.querySelectorAll('tr') + const name = trs?.[0]?.querySelector('td:nth-child(2)')?.textContent + const timeStr = trs?.[3]?.querySelector('td:nth-child(2) .el-tag--danger')?.textContent + return { name, time: parseInt(timeStr?.replace('s', '').trim() ?? '0') } + }) + expect(name).toEqual(demoRule.name) + expect(time).toBeGreaterThanOrEqual(limitTime) + + // 5. Check limit page + await limitPage.bringToFront() + await sleep(.1) + wastedTime = await limitPage.evaluate(() => { + const timeTag = document.querySelector('.el-table .el-table__body-wrapper table tbody tr td:nth-child(6) .el-tag--danger') + const timeStr = timeTag?.textContent + return parseInt(timeStr?.replace('s', '').trim() ?? '') + }) + expect(wastedTime).toBeGreaterThanOrEqual(limitTime) + + // 6. Change daily limit time + await limitPage.click('.el-card__body .el-table tr td .el-button--primary') + + await sleep(.1) + await limitPage.click('.el-dialog .el-button.el-button--primary') + + await sleep(.1) + await limitPage.click('.el-dialog .el-button.el-button--primary') + + await sleep(.1) + const timeInput = await limitPage.$('.el-dialog .el-date-editor:first-child input') + await fillTimeLimit(10, timeInput!, limitPage) + await limitPage.click('.el-dialog .el-button.el-button--success') + + // 7. Modal disappear + await testPage.bringToFront() + await sleep(.5) + const modalExist = await isLimitModalVisible(testPage) + expect(modalExist).toBeFalsy() + }, 60000) + + test("Daily visit limit", async () => { + const limitPage = await context.openAppPage('/behavior/limit') + const demoRule: tt4b.limit.Rule = { + id: 1, name: 'TEST DAILY VISIT LIMIT', + cond: [MOCK_URL], + time: 0, count: 1, + enabled: true, allowDelay: false, locked: false, + } + + // 1. Insert limit rule + await createLimitRule(demoRule, limitPage) + + // 2. Open test page + const testPage = await context.newPageAndWaitCsInjected(MOCK_URL) + + // Assert not limited + await limitPage.bringToFront() + // Wait refreshing the table + await sleep(.1) + const infoTag = await limitPage.$$('.el-table .el-table__body-wrapper table tbody tr td:nth-child(6) .el-tag.el-tag--info') + expect(infoTag.length).toEqual(2) + + // 3. Reload page + await testPage.bringToFront() + await testPage.reload({ waitUntil: 'domcontentloaded' }) + + // Waiting for limit message handling + await sleep(2) + const limitFrame = await waitForLimitFrame(testPage) + await limitFrame.waitForFunction(() => { + const td = document.querySelector('#app .el-descriptions:not([style*="display: none"]) tr td:nth-child(2)') + return td?.textContent && td.textContent !== '-' + }, { timeout: 5000 }) + const { name, count } = await limitFrame.evaluate(() => { + const descEl = document.querySelector('#app .el-descriptions:not([style*="display: none"])') + const trs = descEl?.querySelectorAll('tr') + const name = trs?.[0]?.querySelector('td:nth-child(2)')?.textContent + const count = trs?.[3]?.querySelector('td:nth-child(2) .el-tag--danger')?.textContent + return { name, count } + }) + + expect(name).toBe(demoRule.name) + expect(count!.split?.(' ')[0]).toBe('2') + + // 4. Change visit limit + await limitPage.bringToFront() + await limitPage.click('.el-card__body .el-table tr td .el-button--primary') + + await sleep(.1) + await limitPage.click('.el-dialog .el-button.el-button--primary') + + await sleep(.1) + await limitPage.click('.el-dialog .el-button.el-button--primary') + + await sleep(.1) + const visitInput = await limitPage.$('.el-dialog .el-input-number input') + await visitInput!.focus() + await limitPage.keyboard.type('2') + await limitPage.click('.el-dialog .el-button.el-button--success') + + // 5. The modal disappear + await testPage.bringToFront() + await sleep(.5) + const modalExist = await isLimitModalVisible(testPage) + expect(modalExist).toBeFalsy() + }, 60000) +}) \ No newline at end of file diff --git a/test-e2e/limit/daily-time.test.ts b/test-e2e/limit/daily-time.test.ts deleted file mode 100644 index a7d6513ff..000000000 --- a/test-e2e/limit/daily-time.test.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { launchBrowser, type LaunchContext, MOCK_URL, sleep } from "../common/base" -import { createLimitRule, fillTimeLimit } from "./common" - -let context: LaunchContext - -describe('Daily time limit', () => { - beforeEach(async () => context = await launchBrowser()) - - afterEach(() => context.close()) - - test('basic', async () => { - const limitTime = 2 - const limitPage = await context.openAppPage('/behavior/limit') - const demoRule: timer.limit.Rule = { - id: 1, name: 'TEST DAILY LIMIT', - cond: [MOCK_URL], - time: limitTime, - enabled: true, allowDelay: false, locked: false, - } - - // 1. Insert limit rule - await createLimitRule(demoRule, limitPage) - - // 2. Open test page - const testPage = await context.newPageAndWaitCsInjected(MOCK_URL) - await sleep(1.1) - - // Assert not limited - await limitPage.bringToFront() - // Wait refreshing the table - await sleep(.1) - let wastedTime = await limitPage.evaluate(() => { - const timeTag = document.querySelector('.el-table .el-table__body-wrapper table tbody tr td:nth-child(6) .el-tag:first-child') - const timeStr = timeTag?.textContent - return parseInt(timeStr?.replace('s', '')?.trim() ?? '0') - }) - expect(wastedTime).toBeGreaterThanOrEqual(1) - - // 3. Switch to test page again - await testPage.bringToFront() - await sleep(2.1) - - // 4. Limited - const { name, time } = await testPage.evaluate(async () => { - const shadow = document.querySelector('extension-time-tracker-overlay') - const descEl = shadow?.shadowRoot?.querySelector('#app .el-descriptions:not([style*="display: none"])') - const trs = descEl?.querySelectorAll('tr') - const name = trs?.[0]?.querySelector('td:nth-child(2)')?.textContent - const timeStr = trs?.[3]?.querySelector('td:nth-child(2) .el-tag--danger')?.textContent - return { name, time: parseInt(timeStr?.replace('s', '').trim() ?? '0') } - }) - expect(name).toEqual(demoRule.name) - expect(time).toBeGreaterThanOrEqual(limitTime) - - // 5. Check limit page - await limitPage.bringToFront() - await sleep(.1) - wastedTime = await limitPage.evaluate(() => { - const timeTag = document.querySelector('.el-table .el-table__body-wrapper table tbody tr td:nth-child(6) .el-tag--danger') - const timeStr = timeTag?.textContent - return parseInt(timeStr?.replace('s', '').trim() ?? '') - }) - expect(wastedTime).toBeGreaterThanOrEqual(limitTime) - - // 6. Change daily limit time - await limitPage.click('.el-card__body .el-table tr td .el-button--primary') - - await sleep(.1) - await limitPage.click('.el-dialog .el-button.el-button--primary') - - await sleep(.1) - await limitPage.click('.el-dialog .el-button.el-button--primary') - - await sleep(.1) - const timeInput = await limitPage.$('.el-dialog .el-date-editor:first-child input') - await fillTimeLimit(10, timeInput!, limitPage) - await limitPage.click('.el-dialog .el-button.el-button--success') - - // 7. Modal disappear - await testPage.bringToFront() - await sleep(.5) - const modalExist = await testPage.evaluate(() => { - const shadow = document.querySelector('extension-time-tracker-overlay') - if (!shadow) return false - return !!shadow.shadowRoot!.querySelector('body:not([style*="display: none"])') - }) - expect(modalExist).toBeFalsy() - }, 60000) -}) \ No newline at end of file diff --git a/test-e2e/limit/daily-visit.test.ts b/test-e2e/limit/daily-visit.test.ts deleted file mode 100644 index f7a33b1e1..000000000 --- a/test-e2e/limit/daily-visit.test.ts +++ /dev/null @@ -1,78 +0,0 @@ -import { launchBrowser, type LaunchContext, MOCK_URL, sleep } from "../common/base" -import { createLimitRule } from "./common" - -let context: LaunchContext - -describe('Daily time limit', () => { - beforeEach(async () => context = await launchBrowser()) - - afterEach(() => context.close()) - - test("Daily visit limit", async () => { - const limitPage = await context.openAppPage('/behavior/limit') - const demoRule: timer.limit.Rule = { - id: 1, name: 'TEST DAILY LIMIT', - cond: [MOCK_URL], - time: 0, count: 1, - enabled: true, allowDelay: false, locked: false, - } - - // 1. Insert limit rule - await createLimitRule(demoRule, limitPage) - - // 2. Open test page - const testPage = await context.newPageAndWaitCsInjected(MOCK_URL) - - // Assert not limited - await limitPage.bringToFront() - // Wait refreshing the table - await sleep(.1) - const infoTag = await limitPage.$$('.el-table .el-table__body-wrapper table tbody tr td:nth-child(6) .el-tag.el-tag--info') - expect(infoTag.length).toEqual(2) - - // 3. Reload page - await testPage.bringToFront() - await testPage.reload({ waitUntil: 'domcontentloaded' }) - - // Waiting for limit message handling - await sleep(2) - const { name, count } = await testPage.evaluate(async () => { - const shadow = document.querySelector('extension-time-tracker-overlay') - if (!shadow) return {} - const descEl = shadow!.shadowRoot!.querySelector('#app .el-descriptions:not([style*="display: none"])') - const trs = descEl!.querySelectorAll('tr') - const name = trs[0].querySelector('td:nth-child(2)')!.textContent - const count = trs[3].querySelector('td:nth-child(2) .el-tag--danger')!.textContent - return { name, count } - }) - - expect(name).toBe(demoRule.name) - expect(count!.split?.(' ')[0]).toBe('2') - - // 4. Change visit limit - await limitPage.bringToFront() - await limitPage.click('.el-card__body .el-table tr td .el-button--primary') - - await sleep(.1) - await limitPage.click('.el-dialog .el-button.el-button--primary') - - await sleep(.1) - await limitPage.click('.el-dialog .el-button.el-button--primary') - - await sleep(.1) - const visitInput = await limitPage.$('.el-dialog .el-input-number input') - await visitInput!.focus() - await limitPage.keyboard.type('2') - await limitPage.click('.el-dialog .el-button.el-button--success') - - // 5. The modal disappear - await testPage.bringToFront() - await sleep(.5) - const modalExist = await testPage.evaluate(() => { - const shadow = document.querySelector('extension-time-tracker-overlay') - if (!shadow) return false - return !!shadow!.shadowRoot!.querySelector('body:not([style*="display: none"])') - }) - expect(modalExist).toBeFalsy() - }, 60000) -}) \ No newline at end of file diff --git a/test-e2e/limit/delay-duration.test.ts b/test-e2e/limit/delay-duration.test.ts new file mode 100644 index 000000000..765d3de0c --- /dev/null +++ b/test-e2e/limit/delay-duration.test.ts @@ -0,0 +1,89 @@ +import { formatTimeYMD, MILL_PER_SECOND } from '@util/time' +import type { Page } from 'puppeteer' +import { useLaunchContext } from '../common/base' +import { MOCK_URL, sleep } from '../common/util' +import { clickDelay, createLimitRule, isLimitModalVisible } from './common' + +async function setDelayDuration(page: Page, value: number) { + const delayInput = await page.waitForSelector('.el-input-number input') + await delayInput!.click({ count: 3 }) + await page.keyboard.press('Backspace') + await page.keyboard.type(`${value}`) + await page.keyboard.press('Enter') + await sleep(.2) +} + +async function findRuleId(page: Page): Promise<number> { + return page.evaluate( + ruleName => new Promise<number>((resolve, reject) => { + chrome.runtime.sendMessage({ code: 'limit.list', data: undefined }, (res: { + code?: string + data?: tt4b.limit.Item[] + msg?: string + }) => { + if (res?.code !== 'success') return reject(new Error(res?.msg ?? 'limit.list failed')) + const id = res.data?.find(r => r.name === ruleName)?.id + typeof id === 'number' ? resolve(id) : reject(new Error('rule id not found')) + }) + }), + DEMO_RULE.name, + ) +} + +async function setTodayWaste(page: Page, ruleId: number, mill: number) { + const today = formatTimeYMD(new Date()) + await page.evaluate( + async (id, m, date) => { + const key = '__timer__LIMIT' + const bag = await chrome.storage.local.get(key) + const items = (bag[key] ?? {}) as Record<string, { r?: Record<string, { m?: number; c?: number; d?: number }> }> + const row = items[String(id)] + if (!row) throw new Error('limit row missing in storage') + const prev = row.r?.[date] ?? { m: 0, c: 0 } + row.r = row.r ?? {} + row.r[date] = { ...prev, m } + await chrome.storage.local.set({ [key]: items }) + }, + ruleId, mill, today, + ) +} + +const DEMO_RULE = { + id: 1, + name: 'DELAY DURATION', + cond: [MOCK_URL], + time: 1, + enabled: true, + allowDelay: true, + locked: false, +} as const satisfies tt4b.limit.Rule + +describe('Limit delay duration', () => { + const context = useLaunchContext() + + test('Delay with customized duration', async () => { + const optionPage = await context.openAppPage('/additional/option?i=limit') + await setDelayDuration(optionPage, 1) + + const limitPage = await context.openAppPage('/behavior/limit') + await createLimitRule(DEMO_RULE, limitPage) + + const ruleId = await findRuleId(limitPage) + // 61 seconds, more than 1 minute delay + await setTodayWaste(limitPage, ruleId, 61 * MILL_PER_SECOND) + + const testPage = await context.newPageAndWaitCsInjected(MOCK_URL) + await sleep(1) + + expect(await isLimitModalVisible(testPage)).toBeTruthy() + + await clickDelay(testPage) + + // Not disappear if only delay once (1 minute delay) + expect(await isLimitModalVisible(testPage)).toBeTruthy() + + // Disappear if delay twice (2 minutes delay) + await clickDelay(testPage) + expect(await isLimitModalVisible(testPage)).toBeFalsy() + }, 45000) +}) diff --git a/test-e2e/limit/visit-limit.test.ts b/test-e2e/limit/visit-limit.test.ts index 8585cce86..c5e586661 100644 --- a/test-e2e/limit/visit-limit.test.ts +++ b/test-e2e/limit/visit-limit.test.ts @@ -1,16 +1,13 @@ -import { launchBrowser, LaunchContext, MOCK_URL, sleep } from '../common/base' -import { createLimitRule } from './common' +import { useLaunchContext } from '../common/base' +import { MOCK_URL, sleep } from '../common/util' +import { createLimitRule, isLimitModalVisible, waitForLimitFrame } from './common' describe('Time limit per visit', () => { - let context: LaunchContext + const context = useLaunchContext() - beforeEach(async () => context = await launchBrowser()) - - afterEach(() => context.close()) - - test("More 5 minutes", async () => { + test("Delay", async () => { const limitPage = await context.openAppPage('/behavior/limit') - const demoRule: timer.limit.Rule = { + const demoRule: tt4b.limit.Rule = { id: 1, name: 'TEST DAILY LIMIT', cond: [MOCK_URL], visitTime: 1, @@ -25,23 +22,15 @@ describe('Time limit per visit', () => { await sleep(2) // 3. Modal exist and then click more 5 minutes - const clicked = await testPage.evaluate(() => { - const shadow = document.querySelector('extension-time-tracker-overlay') - if (!shadow) return false - const button = shadow.shadowRoot?.querySelector<HTMLButtonElement>('.el-button--primary') - button?.click() - return !!button - }) - expect(clicked).toBeTruthy() + const limitFrame = await waitForLimitFrame(testPage) + const button = await limitFrame.waitForSelector('.el-button--primary') + expect(button).toBeTruthy() + await button!.click() // 4. Modal disappear await sleep(.5) - const modalExist = await testPage.evaluate(() => { - const shadow = document.querySelector('extension-time-tracker-overlay') - if (!shadow) return false - return !!shadow.shadowRoot!.querySelector('body:not([style*="display: none"])') - }) + const modalExist = await isLimitModalVisible(testPage) expect(modalExist).toBeFalsy() - }, 10000) + }, 1000000000) }) \ No newline at end of file diff --git a/test-e2e/rstest.config.mts b/test-e2e/rstest.config.mts new file mode 100644 index 000000000..d7ebd599c --- /dev/null +++ b/test-e2e/rstest.config.mts @@ -0,0 +1,13 @@ +import { defineConfig } from '@rstest/core' + +export default defineConfig({ + include: ['test-e2e/**/*.test.ts'], + testEnvironment: 'node', + globals: true, + isolate: false, + hookTimeout: 120_000, + testTimeout: 60_000, + pool: { + maxWorkers: 1, + }, +}) diff --git a/test-e2e/tracker/base.test.ts b/test-e2e/tracker/base.test.ts index aeb4fccf8..9fc983597 100644 --- a/test-e2e/tracker/base.test.ts +++ b/test-e2e/tracker/base.test.ts @@ -1,13 +1,10 @@ -import { launchBrowser, type LaunchContext, MOCK_HOST, MOCK_URL, MOCK_URL_2, sleep } from "../common/base" +import { useLaunchContext } from '../common/base' import { readRecordsOfFirstPage } from "../common/record" +import { MOCK_HOST, MOCK_URL, MOCK_URL_2, sleep } from '../common/util' import { createWhitelist } from "../common/whitelist" -let context: LaunchContext - describe('Tracking', () => { - beforeEach(async () => context = await launchBrowser()) - - afterEach(() => context.close()) + const context = useLaunchContext() test('basic tracking', async () => { const page = await context.newPageAndWaitCsInjected(MOCK_URL) @@ -15,11 +12,11 @@ describe('Tracking', () => { let records = await readRecordsOfFirstPage(context) expect(records.length).toEqual(1) - const { visit: visitStr, time: timeStr } = records[0] + const { visit: visitStr, time: timeStr } = records[0] ?? {} // 1 visit expect(visitStr).toEqual("1") // >= 2 s - const time = parseInt(timeStr.replace('s', '').trim()) + const time = timeStr ? parseInt(timeStr.replace('s', '').trim()) : NaN expect(time >= 2) // Another page @@ -38,11 +35,11 @@ describe('Tracking', () => { let records = await readRecordsOfFirstPage(context) expect(records.length).toEqual(1) - const { visit: visitStr, time: timeStr } = records[0] + const { visit: visitStr, time: timeStr } = records[0] ?? {} // 1 visit expect(visitStr).toEqual("1") // >= 2 s - const time = parseInt(timeStr.replace('s', '').trim()) + const time = timeStr ? parseInt(timeStr.replace('s', '').trim()) : NaN expect(time >= 2) await createWhitelist(context, MOCK_HOST) @@ -51,7 +48,7 @@ describe('Tracking', () => { await sleep(2) records = await readRecordsOfFirstPage(context) expect(records.length).toEqual(1) - expect(records[0].time).toEqual(timeStr) - expect(records[0].visit).toEqual("1") + expect(records[0]?.time).toEqual(timeStr) + expect(records[0]?.visit).toEqual("1") }, 60000) }) \ No newline at end of file diff --git a/test-e2e/tracker/run-time.test.ts b/test-e2e/tracker/run-time.test.ts index f3b22b4ba..2f4633d26 100644 --- a/test-e2e/tracker/run-time.test.ts +++ b/test-e2e/tracker/run-time.test.ts @@ -1,34 +1,30 @@ -import { launchBrowser, MOCK_HOST, MOCK_URL, sleep, type LaunchContext } from "../common/base" +import { useLaunchContext } from '../common/base' import { parseTime2Sec, readRecordsOfFirstPage } from "../common/record" +import { MOCK_HOST, MOCK_URL, sleep } from '../common/util' import { createWhitelist } from "../common/whitelist" -let context: LaunchContext - -async function clickRunTimeChange(siteHost: string): Promise<void> { - const sitePage = await context.openAppPage("/additional/site-manage") - await sitePage.focus('.filter-container input') - await sitePage.keyboard.type(siteHost) - await sitePage.keyboard.press('Enter') - await sleep(.1) - await sitePage.evaluate(() => { - const runTimeSwitch = document.querySelector<HTMLDivElement>('table > tbody > tr > td.el-table_1_column_7 .el-switch') - runTimeSwitch?.click() - }) - setTimeout(() => sitePage.close(), 200) -} - describe('Run time tracking', () => { - beforeEach(async () => context = await launchBrowser()) - - afterEach(() => context.close()) + const context = useLaunchContext() + + async function clickRunTimeChange(siteHost: string): Promise<void> { + const sitePage = await context.openAppPage("/additional/site-manage") + await sitePage.focus('input[placeholder]') + await sitePage.keyboard.type(siteHost) + await sitePage.keyboard.press('Enter') + await sleep(.1) + await sitePage.evaluate(() => { + const runTimeSwitch = document.querySelector<HTMLDivElement>('table > tbody > tr > td.el-table_1_column_7 .el-switch') + runTimeSwitch?.click() + }) + } test('Basically track', async () => { await context.newPageAndWaitCsInjected(MOCK_URL) await sleep(1.1) let records = await readRecordsOfFirstPage(context) let record = records[0] - expect(parseTime2Sec(record.time)).toBeGreaterThanOrEqual(1) - expect(record.runTime).toBeFalsy() + expect(parseTime2Sec(record?.time)).toBeGreaterThanOrEqual(1) + expect(record?.runTime).toBeFalsy() // 1. Enable run time tracking const enableTs = Date.now() @@ -49,7 +45,7 @@ describe('Run time tracking', () => { await sleep(1) records = await readRecordsOfFirstPage(context) - const runTime2 = parseTime2Sec(records[0].runTime) + const runTime2 = parseTime2Sec(records[0]?.runTime) expect(runTime2).toBeGreaterThanOrEqual(runTime1 + 1) expect(runTime2).toBeLessThan((Date.now() - enableTs) / 1000) @@ -59,7 +55,7 @@ describe('Run time tracking', () => { await emptyPage.bringToFront() await sleep(4) records = await readRecordsOfFirstPage(context) - const runTime3 = parseTime2Sec(records[0].runTime) + const runTime3 = parseTime2Sec(records[0]?.runTime) expect(runTime3).toBeLessThanOrEqual(Math.round((disableTs - enableTs) / 1000)) }, 60000) @@ -72,9 +68,9 @@ describe('Run time tracking', () => { await sleep(4) let records = await readRecordsOfFirstPage(context) - const runTime = parseTime2Sec(records[0].runTime) + const runTime = parseTime2Sec(records[0]?.runTime) expect(runTime).toBeTruthy() - expect(runTime).toBeLessThanOrEqual((Date.now() - enableTs + 500) / 1000) + expect(runTime).toBeLessThanOrEqual((Date.now() - enableTs) / 1000 + 1) // 2. Add whitelist await createWhitelist(context, MOCK_HOST) @@ -83,7 +79,7 @@ describe('Run time tracking', () => { await sleep(2) records = await readRecordsOfFirstPage(context) - const runTime1 = parseTime2Sec(records[0].runTime) - expect(runTime1).toBeLessThan((disableTs - enableTs) / 1000) + const runTime1 = parseTime2Sec(records[0]?.runTime) + expect(runTime1).toBeLessThan((disableTs - enableTs) / 1000 + 1) }, 60000) }) diff --git a/test/__mock__/runtime.ts b/test/__mock__/runtime.ts new file mode 100644 index 000000000..81db493de --- /dev/null +++ b/test/__mock__/runtime.ts @@ -0,0 +1,7 @@ +export const mockRuntime = () => { + global.chrome = { + runtime: { + id: 'mock_runtime_id', + } satisfies Pick<typeof chrome.runtime, 'id'> + } as unknown as typeof global.chrome +} \ No newline at end of file diff --git a/test/__mock__/storage.ts b/test/__mock__/storage.ts index 4e909e3b5..b715e9432 100644 --- a/test/__mock__/storage.ts +++ b/test/__mock__/storage.ts @@ -1,4 +1,4 @@ -import StoragePromise from "@db/common/storage-promise" +import { rstest } from '@rstest/core' let store: Record<string, any> = {} @@ -28,7 +28,7 @@ function resolveKey(key: string | Object | string[] | null) { } const sync = { - get: jest.fn((...args) => { + get: rstest.fn((...args) => { let id: string | string[] | Object let cb: (result: {}) => void let result: {} = {} @@ -42,18 +42,18 @@ const sync = { } cb?.(result) }), - getBytesInUse: jest.fn(cb => cb && cb(0)), - set: jest.fn((payload, cb) => { + getBytesInUse: rstest.fn(cb => cb && cb(0)), + set: rstest.fn((payload, cb) => { Object.keys(payload).forEach((key) => (store[key] = payload[key])) cb?.() }), - remove: jest.fn((id, cb) => { + remove: rstest.fn((id, cb) => { const idType = typeof id const keys: string[] = idType === 'string' ? [id] : (Array.isArray(id) ? id : Object.keys(id)) keys.forEach((key: string) => delete store[key]) cb?.() }), - clear: jest.fn(cb => { + clear: rstest.fn(cb => { store = {} cb?.() }) @@ -64,10 +64,10 @@ const local = { ...sync, QUOTA_BYTES: 5 * 1024 * 1024 } as chrome.storage.LocalS const managed = sync const onChanged = { - addListener: jest.fn(), - removeListener: jest.fn(), - hasListener: jest.fn() -} as unknown as chrome.storage.StorageChangedEvent + addListener: rstest.fn(), + removeListener: rstest.fn(), + hasListener: rstest.fn() +} as unknown as typeof chrome.storage.onChanged export const mockStorage = () => { global.chrome = { @@ -80,6 +80,4 @@ export const mockStorage = () => { }, } } as unknown as typeof global.chrome -} - -export const localPromise = new StoragePromise(local) \ No newline at end of file +} \ No newline at end of file diff --git a/test/background/backup/gist/compressor.test.ts b/test/background/backup/gist/compressor.test.ts index 8346fef0f..cb2d32d4c 100644 --- a/test/background/backup/gist/compressor.test.ts +++ b/test/background/backup/gist/compressor.test.ts @@ -1,7 +1,7 @@ -import { divide2Buckets, GistData, gistData2Rows } from "@service/backup/gist/compressor" +import { divide2Buckets, type GistData, gistData2Rows } from "@service/backup/gist/compressor" test('divide 1', () => { - const rows: timer.core.Row[] = [{ + const rows: tt4b.core.Row[] = [{ host: 'www.baidu.com', date: '20220801', focus: 0, @@ -15,7 +15,7 @@ test('divide 1', () => { }] const divided = divide2Buckets(rows) expect(divided.length).toEqual(1) - const [bucket, gistData] = divided[0] + const [bucket, gistData] = divided[0] ?? [] expect(bucket).toEqual('202208') const expectData: GistData = { "01": { @@ -39,11 +39,11 @@ test('gistData2Rows', () => { rows.sort((a, b) => a.date > b.date ? 1 : -1) const row0 = rows[0] const row1 = rows[1] - expect(row0.date).toEqual('20220901') - expect(row0.time).toEqual(0) - expect(row0.focus).toEqual(1) + expect(row0?.date).toEqual('20220901') + expect(row0?.time).toEqual(0) + expect(row0?.focus).toEqual(1) - expect(row1.date).toEqual('20220908') - expect(row1.time).toEqual(1) - expect(row1.focus).toEqual(1) + expect(row1?.date).toEqual('20220908') + expect(row1?.time).toEqual(1) + expect(row1?.focus).toEqual(1) }) \ No newline at end of file diff --git a/test/database/limit-database.test.ts b/test/background/database/limit-database.test.ts similarity index 52% rename from test/database/limit-database.test.ts rename to test/background/database/limit-database.test.ts index 49d3244c3..9c4a651b3 100644 --- a/test/database/limit-database.test.ts +++ b/test/background/database/limit-database.test.ts @@ -1,13 +1,14 @@ import db from "@db/limit-database" import { formatTimeYMD } from "@util/time" -import { mockStorage } from "../__mock__/storage" +import { mockStorage } from "../../__mock__/storage" +import { mockLegacyData } from './migratable' describe('limit-database', () => { beforeAll(() => mockStorage()) beforeEach(async () => chrome.storage.local.clear()) - test('test1', async () => { - const toAdd: timer.limit.Rule = { + test('save, all, remove', async () => { + const toAdd: tt4b.limit.Rule = { id: 1, name: "foobar", cond: ['123'], @@ -16,42 +17,28 @@ describe('limit-database', () => { allowDelay: false, locked: false, } - const id = await db.save(toAdd) - let all: timer.limit.Rule[] = await db.all() + const id = await db.add(toAdd) + let all: tt4b.limit.Rule[] = await db.all() expect(all.length).toEqual(1) - let saved = all[0] - expect(saved.cond).toEqual(toAdd.cond) - expect(saved.time).toEqual(toAdd.time) - expect(saved.name).toEqual(toAdd.name) - expect(saved.enabled).toEqual(toAdd.enabled) - expect(saved.allowDelay).toEqual(toAdd.allowDelay) - const toRewrite = { - id, - name: 'hahah', - cond: ['123'], - time: 21, - enabled: true, - allowDelay: false, - locked: false, - } - // Not rewrite - await db.save(toRewrite) - all = await db.all() - saved = all[0] - expect(saved.cond).toEqual(toAdd.cond) - expect(saved.time).toEqual(toAdd.time) - expect(saved.name).toEqual(toAdd.name) - expect(saved.enabled).toEqual(toAdd.enabled) - expect(saved.allowDelay).toEqual(toAdd.allowDelay) + let { cond, time, name, enabled, allowDelay } = all[0] ?? {} + expect(cond).toEqual(toAdd.cond) + expect(time).toEqual(toAdd.time) + expect(name).toEqual(toAdd.name) + expect(enabled).toEqual(toAdd.enabled) + expect(allowDelay).toEqual(toAdd.allowDelay) - await db.remove(id) + await db.batchRemove([id + 1]) // Not exist, no error throws + all = await db.all() + expect(all.length).toEqual(1) - expect((await db.all()).length).toEqual(0) + await db.batchRemove([id]) + all = await db.all() + expect(all.length).toEqual(0) }) test("update waste", async () => { const date = formatTimeYMD(new Date()) - const id1 = await db.save({ + const id1 = await db.add({ name: "foobar", cond: ["a.*.com"], time: 21, @@ -59,7 +46,7 @@ describe('limit-database', () => { allowDelay: false, locked: false, }) - await db.save({ + await db.add({ name: "foobar", cond: ["*.b.com"], time: 20, @@ -75,11 +62,11 @@ describe('limit-database', () => { const all = await db.all() const used = all.find(a => a.cond?.includes("a.*.com")) expect(used?.records?.[date]).toBeTruthy() - expect(used?.records?.[date].mill).toEqual(10) + expect(used?.records?.[date]?.mill).toEqual(10) }) test("import data", async () => { - const cond1: MakeOptional<timer.limit.Rule, 'id'> = { + const cond1: MakeOptional<tt4b.limit.Rule, 'id'> = { name: 'foobar1', cond: ["cond1"], time: 20, @@ -87,7 +74,7 @@ describe('limit-database', () => { enabled: true, locked: false, } - const cond2: MakeOptional<timer.limit.Rule, 'id'> = { + const cond2: MakeOptional<tt4b.limit.Rule, 'id'> = { name: 'foobar2', cond: ["cond2"], time: 20, @@ -95,15 +82,15 @@ describe('limit-database', () => { enabled: false, locked: false, } - await db.save(cond1) - await db.save(cond2) + await db.add(cond1) + await db.add(cond2) const data2Import = await db.storage.get() // clear chrome.storage.local.clear() expect(await db.all()).toEqual([]) - await db.importData(data2Import) + await db.importData(mockLegacyData(data2Import)) const imported = await db.all() const cond2After = imported.find(a => a.cond?.includes("cond2")) @@ -115,29 +102,10 @@ describe('limit-database', () => { test("import data2", async () => { const importData: Record<string, any> = {} // Invalid data, no error throws - await db.importData(importData) + await db.importData(mockLegacyData(importData)) // Valid data importData["__timer__LIMIT"] = {} - await db.importData(importData) + await db.importData(mockLegacyData(importData)) expect(await db.all()).toEqual([]) }) - - test("update delay", async () => { - const data: MakeOptional<timer.limit.Rule, 'id'> = { - name: 'foobar', - cond: ["cond1"], - time: 20, - allowDelay: false, - enabled: true, - locked: false, - } - const id = await db.save(data) - await db.updateDelay(id, true) - await db.updateDelay(Number.MAX_VALUE, true) - const all = await db.all() - expect(all.length).toEqual(1) - const item = all[0] - expect(item.allowDelay).toBeTruthy() - expect(item.cond).toEqual(["cond1"]) - }) }) \ No newline at end of file diff --git a/test/database/merge-rule-database.test.ts b/test/background/database/merge-rule-database.test.ts similarity index 76% rename from test/database/merge-rule-database.test.ts rename to test/background/database/merge-rule-database.test.ts index 318e7a8f1..009a6fd10 100644 --- a/test/database/merge-rule-database.test.ts +++ b/test/background/database/merge-rule-database.test.ts @@ -1,17 +1,18 @@ import db from "@db/merge-rule-database" -import { mockStorage } from "../__mock__/storage" +import { mockStorage } from "../../__mock__/storage" +import { mockLegacyData } from './migratable' -function of(origin: string, merged?: string | number): timer.merge.Rule { +function of(origin: string, merged?: string | number): tt4b.merge.Rule { return { origin, merged: merged || '' } } -describe('merge-rule-database.test', () => { +describe('merge-rule-database', () => { beforeAll(mockStorage) beforeEach(async () => chrome.storage.local.clear()) - test('1', async () => { - let toAdd: timer.merge.Rule[] = [of('4', 2)] + test('add, selectAll, remove', async () => { + let toAdd: tt4b.merge.Rule[] = [of('4', 2)] await db.add(...toAdd) expect((await db.selectAll())).toEqual(expect.arrayContaining(toAdd)) toAdd = [ @@ -40,8 +41,8 @@ describe('merge-rule-database.test', () => { await chrome.storage.local.clear() expect(await db.selectAll()).toEqual([]) - await db.importData(data2Import) - const imported: timer.merge.Rule[] = await db.selectAll() + await db.importData(mockLegacyData(data2Import)) + const imported: tt4b.merge.Rule[] = await db.selectAll() expect(imported).toEqual([ { origin: "www.baidu.com", merged: 2 }, { origin: "www.google.com", merged: "google.com" } diff --git a/test/background/database/migratable.ts b/test/background/database/migratable.ts new file mode 100644 index 000000000..0f944250f --- /dev/null +++ b/test/background/database/migratable.ts @@ -0,0 +1,10 @@ +export function mockLegacyData(data: Record<string, unknown>): tt4b.backup.ExportData { + const withMeta: tt4b.backup.ExportData = { + ...data, + __meta__: { + version: "3.8.15", + ts: Date.now(), + }, + } + return withMeta +} \ No newline at end of file diff --git a/test/background/database/period-database.test.ts b/test/background/database/period-database.test.ts new file mode 100644 index 000000000..e4edff40d --- /dev/null +++ b/test/background/database/period-database.test.ts @@ -0,0 +1,53 @@ +import db from "@db/period-database" +import { keyOf } from '@util/period' +import { formatTimeYMD } from "@util/time" +import { mockStorage } from "../../__mock__/storage" + +function resultOf(date: Date, orderNum: number, milliseconds: number): tt4b.period.Result { + return { ...keyOf(date, orderNum), milliseconds } +} + +describe('period-database', () => { + beforeAll(mockStorage) + + beforeEach(async () => chrome.storage.local.clear()) + + test('get empty, accumulate and get by date', async () => { + const date = new Date(2021, 5, 7) + const dateStr = formatTimeYMD(date) + const yesterday = new Date(2021, 5, 6) + + expect((await db.get(dateStr))).toEqual({}) + + const toAdd: tt4b.period.Result[] = [ + resultOf(date, 0, 56999), + resultOf(date, 1, 2), + resultOf(yesterday, 95, 2) + ] + await db.accumulate(toAdd) + await db.accumulate([ + resultOf(date, 1, 20) + ]) + const data = await db.get(dateStr) + expect(data).toEqual({ 0: 56999, 1: 22 }) + const yesterdayStr = formatTimeYMD(yesterday) + const yesterdayData = await db.get(yesterdayStr) + expect(yesterdayData).toEqual({ 95: 2 }) + }) + + test('getBatch', async () => { + const date = new Date(2021, 5, 7) + const yesterday = new Date(2021, 5, 6) + const toAdd: tt4b.period.Result[] = [ + resultOf(date, 0, 56999), + resultOf(date, 1, 2), + resultOf(yesterday, 95, 2) + ] + await db.accumulate(toAdd) + + let list = await db.getBatch(['20210607', '20210606']) + expect(list.length).toEqual(3) + let all = await db.getAll() + expect(all).toEqual(toAdd) + }) +}) diff --git a/test/database/stat-database.test.ts b/test/background/database/stat-database/classic.test.ts similarity index 54% rename from test/database/stat-database.test.ts rename to test/background/database/stat-database/classic.test.ts index 20006923c..ff6067ccc 100644 --- a/test/database/stat-database.test.ts +++ b/test/background/database/stat-database/classic.test.ts @@ -1,38 +1,43 @@ -import db, { type StatCondition } from "@db/stat-database" +import { ClassicStatDatabase, parseImportData } from "@db/stat-database/classic" +import type { StatCondition } from '@db/stat-database/types' import { resultOf } from "@util/stat" import { formatTimeYMD, MILL_PER_DAY } from "@util/time" -import { mockStorage } from "../__mock__/storage" +import { mockStorage } from '../../../__mock__/storage' -const now = new Date() -const nowStr = formatTimeYMD(now) -const yesterday = new Date(now.getTime() - MILL_PER_DAY) -const beforeYesterday = new Date(now.getTime() - MILL_PER_DAY * 2) +let db: ClassicStatDatabase +const nowTs = Date.now() +const now = formatTimeYMD(nowTs) +const yesterday = formatTimeYMD(new Date(nowTs - MILL_PER_DAY)) +const beforeYesterday = formatTimeYMD(new Date(nowTs - MILL_PER_DAY * 2)) const baidu = 'www.baidu.com' const google = 'www.google.com.hk' -describe('stat-database', () => { - beforeAll(mockStorage) +describe('stat-database/classic', () => { + beforeAll(() => { + mockStorage() + db = new ClassicStatDatabase(chrome.storage.local) + }) beforeEach(async () => chrome.storage.local.clear()) - test('1', async () => { - await db.accumulate(baidu, nowStr, resultOf(100, 0)) - const data: timer.core.Result = await db.get(baidu, now) - expect(data).toEqual(resultOf(100, 0)) + test('accumulate and get single host result', async () => { + await db.accumulate(baidu, now, resultOf(100, 0)) + const data: tt4b.core.Result = await db.get(baidu, now) + expect(data).toMatchObject(resultOf(100, 0)) }) - test('2', async () => { - await db.accumulate(baidu, nowStr, resultOf(200, 0)) - await db.accumulate(baidu, nowStr, resultOf(200, 0)) + test('accumulate merges focus and time', async () => { + await db.accumulate(baidu, now, resultOf(200, 0)) + await db.accumulate(baidu, now, resultOf(200, 0)) let data = await db.get(baidu, now) - expect(data).toEqual(resultOf(400, 0)) - await db.accumulate(baidu, nowStr, resultOf(0, 1)) + expect(data).toEqual({ host: baidu, date: now, focus: 400, time: 0 } satisfies tt4b.core.Row) + await db.accumulate(baidu, now, resultOf(0, 1)) data = await db.get(baidu, now) - expect(data).toEqual(resultOf(400, 1)) + expect(data).toEqual({ host: baidu, date: now, focus: 400, time: 1 } satisfies tt4b.core.Row) }) - test('3', async () => { - await db.accumulateBatch( + test('batchAccumulate and select with condition/date range', async () => { + await db.batchAccumulate( { [google]: resultOf(11, 0), [baidu]: resultOf(1, 0) @@ -40,7 +45,7 @@ describe('stat-database', () => { ) expect((await db.select()).length).toEqual(2) - await db.accumulateBatch( + await db.batchAccumulate( { [google]: resultOf(12, 1), [baidu]: resultOf(2, 1) @@ -48,7 +53,7 @@ describe('stat-database', () => { ) expect((await db.select()).length).toEqual(4) - await db.accumulateBatch( + await db.batchAccumulate( { [google]: resultOf(13, 2), [baidu]: resultOf(3, 2) @@ -62,9 +67,9 @@ describe('stat-database', () => { // By date range cond = { date: [now, now] } - const expectedResult: timer.core.Row[] = [ - { date: nowStr, focus: 11, host: google, time: 0 }, - { date: nowStr, focus: 1, host: baidu, time: 0 }, + const expectedResult: tt4b.core.Row[] = [ + { date: now, focus: 11, host: google, time: 0 }, + { date: now, focus: 1, host: baidu, time: 0 }, ] expect(await db.select(cond)).toEqual(expectedResult) // Only use start @@ -91,22 +96,22 @@ describe('stat-database', () => { expect((await db.select(cond)).length).toEqual(2) }) - test('5', async () => { - await db.accumulate(baidu, nowStr, resultOf(10, 0)) - await db.accumulate(baidu, formatTimeYMD(yesterday), resultOf(12, 0)) + test('accumulate and delete by key/date', async () => { + await db.accumulate(baidu, now, resultOf(10, 0)) + await db.accumulate(baidu, yesterday, resultOf(12, 0)) expect((await db.select()).length).toEqual(2) // Delete yesterday's data - await db.deleteByUrlAndDate(baidu, yesterday) + await db.delete({ host: baidu, date: yesterday }) expect((await db.select()).length).toEqual(1) // Delete yesterday's data again, nothing changed - await db.deleteByUrlAndDate(baidu, yesterday) + await db.delete({ host: baidu, date: yesterday }) expect((await db.get(baidu, now)).focus).toEqual(10) // Add one again, and another - await db.accumulate(baidu, formatTimeYMD(beforeYesterday), resultOf(1, 1)) - await db.accumulate(google, nowStr, resultOf(0, 0)) + await db.accumulate(baidu, beforeYesterday, resultOf(1, 1)) + await db.accumulate(google, now, resultOf(0, 0)) expect((await db.select()).length).toEqual(3) // Delete all the baidu - await db.deleteByUrl(baidu) + await db.deleteByHost(baidu) const cond: StatCondition = { keys: baidu } // Nothing of baidu remained expect((await db.select(cond)).length).toEqual(0) @@ -115,52 +120,50 @@ describe('stat-database', () => { const list = await db.select(cond) expect(list.length).toEqual(1) // Add one item of baidu again again - await db.accumulate(baidu, nowStr, resultOf(1, 1)) + await db.accumulate(baidu, now, resultOf(1, 1)) // But delete google - await db.delete(list) + await db.delete(...list) // Then only one item of baidu expect((await db.select()).length).toEqual(1) }) - test('6', async () => { - await db.accumulateBatch({}, now) + test('batchAccumulate empty returns zero and get returns zero result', async () => { + await db.batchAccumulate({}, now) expect((await db.select()).length).toEqual(0) - // Return zero instance const result = await db.get(baidu, now) expect([result.focus, result.time]).toEqual([0, 0]) }) - test('7', async () => { + test('delete by key and deleteByHost date range', async () => { const foo = resultOf(1, 1) - await db.accumulate(baidu, nowStr, foo) - await db.accumulate(baidu, formatTimeYMD(yesterday), foo) - await db.accumulate(baidu, formatTimeYMD(beforeYesterday), foo) - await db.deleteByUrlBetween(baidu, now, now) + await db.accumulate(baidu, now, foo) + await db.accumulate(baidu, yesterday, foo) + await db.accumulate(baidu, beforeYesterday, foo) + await db.delete({ host: baidu, date: now }) expect((await db.select()).length).toEqual(2) - await db.deleteByUrlBetween(baidu, now, beforeYesterday) // Invalid + await db.deleteByHost(baidu, [now, beforeYesterday]) // Invalid expect((await db.select()).length).toEqual(2) }) - test("importData", async () => { + test("parseImportData", async () => { const foo = resultOf(1, 1) - await db.accumulate(baidu, nowStr, foo) + await db.accumulate(baidu, now, foo) const data2Import = await db.storage.get() chrome.storage.local.clear() data2Import.foo = "bar" - await db.importData(data2Import) - const data = await db.select({}) + const data = parseImportData(data2Import) expect(data.length).toEqual(1) const item = data[0] - expect(item.date).toEqual(nowStr) - expect(item.host).toEqual(baidu) - expect(item.focus).toEqual(1) - expect(item.time).toEqual(1) + expect(item?.date).toEqual(now) + expect(item?.host).toEqual(baidu) + expect(item?.focus).toEqual(1) + expect(item?.time).toEqual(1) }) - test("importData2", async () => { - await db.importData({ + test("parseImportData2", async () => { + const data = parseImportData({ // Valid "20210910github.com": { focus: 1, @@ -177,16 +180,6 @@ describe('stat-database', () => { // Ignored with zero info "20210914github.com": {} }) - const imported = await db.select() - expect(imported.length).toEqual(2) - }) - - test("importData3", async () => { - await db.importData([]) - expect(await db.select()).toEqual([]) - await db.importData({ foo: "bar" }) - expect(await db.select()).toEqual([]) - await db.importData(false) - expect(await db.select()).toEqual([]) + expect(data.length).toEqual(2) }) }) \ No newline at end of file diff --git a/test/background/database/stat-database/idb.test.ts b/test/background/database/stat-database/idb.test.ts new file mode 100644 index 000000000..8ed585dc6 --- /dev/null +++ b/test/background/database/stat-database/idb.test.ts @@ -0,0 +1,226 @@ +import { zeroResult, zeroRow } from '@db/stat-database/common' +import { IDBStatDatabase } from '@db/stat-database/idb' +import 'fake-indexeddb/auto' +import { mockRuntime } from '../../../__mock__/runtime' + +const GOOGLE = 'www.google.com' +const GITHUB = 'www.github.com' +const GITHUB_VIRTUAL = 'www.github.com/sheepzh/**' +const GROUP_1 = 1 +const GROUP_2 = 2 +const MAYBE_GROUP_1 = '1' + +let db: IDBStatDatabase + +describe('stat-database/idb', () => { + beforeAll(async () => { + mockRuntime() + db = new IDBStatDatabase() + await db.upgrade() + }) + + beforeEach(() => db.clear()) + + test('accumulate', async () => { + await db.accumulate(GITHUB, '20240601', { focus: 10, time: 20 }) + await db.accumulate(GOOGLE, new Date(2025, 10, 1), { focus: 1, time: 0 }) + await db.accumulateGroup(GROUP_1, '20240601', { focus: 5, time: 10 }) + + // Hosts + const github = await db.get(GITHUB, '20240601') + expect(github).toEqual({ host: GITHUB, date: '20240601', focus: 10, time: 20 } satisfies tt4b.core.Row) + + const google = await db.get(GOOGLE, new Date(2025, 10, 1)) + expect(google).toEqual({ host: GOOGLE, date: '20251101', focus: 1, time: 0 } satisfies tt4b.core.Row) + + // Date not exist + const notExist = await db.get(GOOGLE, '20240601') + expect(notExist).toEqual(zeroRow(GOOGLE, '20240601')) + + // list + const list = await db.select() + expect(list).toEqual([ + { host: GITHUB, date: '20240601', focus: 10, time: 20 }, + { host: GOOGLE, date: '20251101', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + + // Groups + const byGroupId = await db.get(`${GROUP_1}`, '20240601') + expect(byGroupId).toMatchObject(zeroResult()) + + const groups = await db.selectGroup({ date: '20240601' }) + expect(groups).toEqual([{ host: `${GROUP_1}`, date: '20240601', focus: 5, time: 10 } satisfies tt4b.core.Row]) + }) + + test('batchAccumulate', async () => { + // Noise data + await db.accumulateGroup(GROUP_1, '20240602', { focus: 5, time: 10 }) + + await db.batchAccumulate({ + [GOOGLE]: { focus: 1, time: 0 }, + [GITHUB]: { focus: 10, time: 20 }, + [MAYBE_GROUP_1]: { focus: 5, time: 10 }, + }, '20240602') + + expect(await db.get(GITHUB, '20240602')) + .toEqual({ host: GITHUB, date: '20240602', focus: 10, time: 20 } satisfies tt4b.core.Row) + expect(await db.get(GOOGLE, '20240602')) + .toEqual({ host: GOOGLE, date: '20240602', focus: 1, time: 0 } satisfies tt4b.core.Row) + expect(await db.get(MAYBE_GROUP_1, '20240602')) + .toEqual({ host: MAYBE_GROUP_1, date: '20240602', focus: 5, time: 10 } satisfies tt4b.core.Row) + + await db.batchAccumulate({ [GOOGLE]: { focus: 0, time: 1 } }, '20240602') + + expect(await db.get(GOOGLE, '20240602')).toEqual({ host: GOOGLE, date: '20240602', focus: 1, time: 1 } satisfies tt4b.core.Row) + }) + + test('multiple indexes', async () => { + // Insert noise data + await db.accumulateGroup(GROUP_1, '20240603', { focus: 30, time: 20 }) + + await db.batchAccumulate({ + [GOOGLE]: { focus: 1, time: 0 }, + [GITHUB]: { focus: 10, time: 20 }, + [GITHUB_VIRTUAL]: { focus: 5, time: 10 }, + }, '20240603') + + await db.batchAccumulate({ + [GOOGLE]: { focus: 1, time: 0 }, + [GITHUB]: { focus: 10, time: 20 }, + }, '20240602') + + await db.accumulateGroup(GROUP_1, '20240603', { focus: 5, time: 10 }) + await db.accumulateGroup(GROUP_1, '20240602', { focus: 1, time: 1 }) + + // Query by date index + expect(await db.select({ date: [, '20240602'] })).toEqual([ + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GOOGLE, date: '20240602', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ date: '20240603' })).toEqual([ + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + { host: GOOGLE, date: '20240603', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ date: ['20240602', '20240603'] })).toEqual([ + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GOOGLE, date: '20240602', focus: 1, time: 0 }, + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + { host: GOOGLE, date: '20240603', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + // Same as above, but reversed order + expect(await db.select({ date: ['20240603', '20240602'] })).toEqual([ + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GOOGLE, date: '20240602', focus: 1, time: 0 }, + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + { host: GOOGLE, date: '20240603', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + // Including virtual + expect(await db.select({ date: '20240603', virtual: true })).toEqual([ + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + { host: GITHUB_VIRTUAL, date: '20240603', focus: 5, time: 10 }, + { host: GOOGLE, date: '20240603', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + + // Query by host + expect(await db.select({ keys: GOOGLE })).toEqual([ + { host: GOOGLE, date: '20240602', focus: 1, time: 0 }, + { host: GOOGLE, date: '20240603', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ keys: GITHUB })).toEqual([ + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ keys: GITHUB_VIRTUAL })).toEqual([] satisfies tt4b.core.Row[]) + expect(await db.select({ keys: GITHUB_VIRTUAL, virtual: true })).toEqual([ + { host: GITHUB_VIRTUAL, date: '20240603', focus: 5, time: 10 }, + ] satisfies tt4b.core.Row[]) + + // Query by date and host index + expect(await db.select({ date: '20240603', keys: GOOGLE })).toEqual([ + { host: GOOGLE, date: '20240603', focus: 1, time: 0 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ date: '20240603', keys: GITHUB_VIRTUAL })).toEqual([] satisfies tt4b.core.Row[]) + expect(await db.select({ date: '20240603', keys: GITHUB_VIRTUAL, virtual: true })).toEqual([ + { host: GITHUB_VIRTUAL, date: '20240603', focus: 5, time: 10 }, + ] satisfies tt4b.core.Row[]) + + // Query by time index + expect(await db.select({ timeRange: [10, 20] })).toEqual([ + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ timeRange: [10, 20], virtual: true })).toEqual([ + { host: GITHUB_VIRTUAL, date: '20240603', focus: 5, time: 10 }, + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ timeRange: [10, 20], date: '20240603', virtual: true })).toEqual([ + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + { host: GITHUB_VIRTUAL, date: '20240603', focus: 5, time: 10 }, + ] satisfies tt4b.core.Row[]) + + // Query by focus index + expect(await db.select({ focusRange: [5, 10] })).toEqual([ + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ focusRange: [5, 10], virtual: true })).toEqual([ + { host: GITHUB_VIRTUAL, date: '20240603', focus: 5, time: 10 }, + { host: GITHUB, date: '20240602', focus: 10, time: 20 }, + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + ] satisfies tt4b.core.Row[]) + expect(await db.select({ focusRange: [5, 10], date: '20240603', virtual: true })).toEqual([ + { host: GITHUB, date: '20240603', focus: 10, time: 20 }, + { host: GITHUB_VIRTUAL, date: '20240603', focus: 5, time: 10 }, + ] satisfies tt4b.core.Row[]) + }) + + test('delete', async () => { + await db.batchAccumulate({ + [GOOGLE]: { focus: 1, time: 0 }, + [GITHUB]: { focus: 10, time: 20 }, + [GITHUB_VIRTUAL]: { focus: 5, time: 10 }, + [MAYBE_GROUP_1]: { focus: 222, time: 222 }, + }, '20240603') + + expect((await db.select({ virtual: true })).length).toEqual(4) + + await db.delete({ host: GOOGLE, date: '20240603' }) + expect(await db.get(GOOGLE, '20240603')).toEqual(zeroRow(GOOGLE, '20240603')) + + await db.deleteByHost(GITHUB) + expect(await db.get(GITHUB, '20240603')).toEqual(zeroRow(GITHUB, '20240603')) + + await db.deleteByGroup(GROUP_1) + expect(await db.get(MAYBE_GROUP_1, '20240603')) + .toEqual({ host: MAYBE_GROUP_1, date: '20240603', focus: 222, time: 222 } satisfies tt4b.core.Row) + + await db.delete({ host: MAYBE_GROUP_1, date: '20240603' }, { host: GITHUB_VIRTUAL, date: '20240603' }) + expect(await db.select({ virtual: true })).toEqual([] satisfies tt4b.core.Row[]) + }) + + test('multiple select groups', async () => { + // Insert noise data + await db.batchAccumulate({ + [GOOGLE]: { focus: 1, time: 0 }, + [GITHUB]: { focus: 10, time: 20 }, + [GITHUB_VIRTUAL]: { focus: 5, time: 10 }, + [MAYBE_GROUP_1]: { focus: 222, time: 222 }, + }, '20240603') + + await db.accumulateGroup(GROUP_1, '20240602', { focus: 1, time: 1 }) + await db.accumulateGroup(GROUP_2, '20240602', { focus: 2, time: 2 }) + await db.accumulateGroup(GROUP_1, '20240603', { focus: 3, time: 3 }) + await db.accumulateGroup(GROUP_2, '20240603', { focus: 4, time: 4 }) + + expect(await db.selectGroup({ date: '20240603' })).toEqual([ + { date: '20240603', host: `${GROUP_1}`, focus: 3, time: 3 }, + { date: '20240603', host: `${GROUP_2}`, focus: 4, time: 4 }, + ] satisfies tt4b.core.Row[]) + + expect(await db.selectGroup({ date: ['20240602', '20240603'], keys: GROUP_1.toString() })).toEqual([ + { date: '20240602', host: `${GROUP_1}`, focus: 1, time: 1 }, + { date: '20240603', host: `${GROUP_1}`, focus: 3, time: 3 }, + ] satisfies tt4b.core.Row[]) + }) +}) \ No newline at end of file diff --git a/test/database/whitelist-database.test.ts b/test/background/database/whitelist-database.test.ts similarity index 85% rename from test/database/whitelist-database.test.ts rename to test/background/database/whitelist-database.test.ts index 13aeb280f..68d2ea1c9 100644 --- a/test/database/whitelist-database.test.ts +++ b/test/background/database/whitelist-database.test.ts @@ -1,12 +1,12 @@ import db from "@db/whitelist-database" -import { mockStorage } from "../__mock__/storage" +import { mockStorage } from "../../__mock__/storage" describe('timer-database', () => { beforeAll(mockStorage) beforeEach(async () => chrome.storage.local.clear()) - test('1', async () => { + test('add, selectAll, exist, remove work correctly', async () => { await db.add('www.baidu.com') await db.add('google.com') const list = await db.selectAll() diff --git a/test/service/components/host-merge-ruler.test.ts b/test/background/service/components/host-merge-ruler.test.ts similarity index 100% rename from test/service/components/host-merge-ruler.test.ts rename to test/background/service/components/host-merge-ruler.test.ts diff --git a/test/service/components/period-calculator.test.ts b/test/background/service/components/period-calculator.test.ts similarity index 57% rename from test/service/components/period-calculator.test.ts rename to test/background/service/components/period-calculator.test.ts index be9a6eeea..267c20cb6 100644 --- a/test/service/components/period-calculator.test.ts +++ b/test/background/service/components/period-calculator.test.ts @@ -1,8 +1,10 @@ -import { calculate, getMaxDivisiblePeriod, merge } from "@service/components/period-calculator" -import { keyOf, PERIOD_PER_DATE } from "@util/period" +import { calculate, merge } from "@service/components/period-calculator" +import { keyOf, MINUTE_PER_PERIOD } from '@util/period' import { MILL_PER_DAY } from "@util/time" -function resultOf(date: Date | number, orderNum: number, milliseconds: number): timer.period.Result { +const PERIOD_PER_DATE = 24 * 60 / MINUTE_PER_PERIOD + +function resultOf(date: Date | number, orderNum: number, milliseconds: number): tt4b.period.Result { return { ...keyOf(date, orderNum), milliseconds } } @@ -25,13 +27,13 @@ test('', () => { let result = calculate(ts1, 877) expect(result.length).toEqual(1) let current = result[0] - let realCurrent: timer.period.Result = resultOf(base, 1 + 13 * 4, 877) + let realCurrent: tt4b.period.Result = resultOf(base, 1 + 13 * 4, 877) expect(current).toEqual(realCurrent) result = calculate(ts1, (7 * 60 + 56) * 1000 + 877) expect(result.length).toEqual(2) const last = result[0] - const realLast: timer.period.Result = resultOf(base, 13 * 4, 1) + const realLast: tt4b.period.Result = resultOf(base, 13 * 4, 1) expect(last).toEqual(realLast) current = result[1] realCurrent.milliseconds = (7 * 60 + 56) * 1000 + 876 @@ -52,52 +54,30 @@ test('', () => { expect(result.length).toEqual(2) const last = result[0] - const realLast: timer.period.Result = resultOf(yesterday, 95, 3000 - 2876) + const realLast = resultOf(yesterday, 95, 3000 - 2876) expect(last).toEqual(realLast) const current = result[1] - const realCurrent: timer.period.Result = resultOf(base, 0, 2876) + const realCurrent = resultOf(base, 0, 2876) expect(current).toEqual(realCurrent) }) -test('', () => { - const dateArr = [2020, 6, 6] - - const key = keyOf(new Date(2020, 5, 6)) - key.order = 4 - let result = getMaxDivisiblePeriod(key, 1) - expect([result.year, result.month, result.date, result.order]).toEqual([...dateArr, 4]) - - key.order = 3 - result = getMaxDivisiblePeriod(key, 1) - expect([result.year, result.month, result.date, result.order]).toEqual([...dateArr, 3]) - - key.order = 0 - result = getMaxDivisiblePeriod(key, 2) - expect([result.year, result.month, result.date, result.order]).toEqual([2020, 6, 5, 95]) -}) - -test('merge', () => { - // 20200501 - const start = new Date(2020, 4, 1) - // 20200531 - const end = new Date(2020, 4, 31) - +test.skip('merge', () => { const d20200506 = new Date(2020, 4, 6) - const toMerge: timer.period.Result[] = [ + const toMerge: tt4b.period.Result[] = [ resultOf(d20200506, 19, 20), resultOf(d20200506, 18, 20), resultOf(d20200506, 20, 20), resultOf(new Date(2020, 4, 20), 20, 20), ] - let result = merge(toMerge, { periodSize: 1, start: keyOf(start, 0), end: keyOf(end, 3) }) + let result = merge(toMerge, 1) expect(result.length).toEqual(30 * PERIOD_PER_DATE + 4) expect(result.filter(p => p.date === '20200506' && p.milliseconds > 0).length).toEqual(3) let milliseconds = result.filter(p => p.date === '20200506').map(p => p.milliseconds).reduce((a, b) => a + b, 0) expect(milliseconds).toEqual(60) - result = merge(toMerge, { periodSize: 4, start: keyOf(new Date(2020, 4, 11), 0), end: keyOf(end, 3) }) + result = merge(toMerge, 4) expect(result.length).toEqual(20 * PERIOD_PER_DATE / 4 + 4 / 4) - result = merge(toMerge, { periodSize: 2, start: keyOf(start, 0), end: keyOf(end, 3) }) + result = merge(toMerge, 2) expect(result.length).toEqual(30 * PERIOD_PER_DATE / 2 + 4 / 2) }) \ No newline at end of file diff --git a/test/background/service/limit-service.test.ts b/test/background/service/limit-service.test.ts new file mode 100644 index 000000000..68a9aaa21 --- /dev/null +++ b/test/background/service/limit-service.test.ts @@ -0,0 +1,67 @@ +import { mockStorage } from "../../__mock__/storage" + +let calcTimeState: (item: tt4b.limit.Item, reminderMills: number, delayDuration: number) => { + daily: 'NORMAL' | 'REMINDER' | 'LIMITED' + weekly: 'NORMAL' | 'REMINDER' | 'LIMITED' +} + +beforeAll(async () => { + mockStorage() + Object.assign(global.chrome as object, { + runtime: { + id: "test", + getManifest: () => ({ manifest_version: 3 }), + }, + }) + const mod = await import("@bg/service/limit-service") + calcTimeState = mod.calcTimeState +}) + +describe("background/limit-service", () => { + test("calcTimeState", () => { + const item: tt4b.limit.Item = { + id: 1, + name: "foobar", + cond: [], + time: 10, + weekly: 10, + waste: 0, + visit: 0, + delayCount: 0, + weeklyWaste: 0, + weeklyVisit: 0, + weeklyDelayCount: 0, + enabled: true, + allowDelay: false, + locked: false, + } + const duration = 1000 + + type LimitState = "NORMAL" | "REMINDER" | "LIMITED" + + const assert = (daily: LimitState, weekly: LimitState) => { + const res = calcTimeState(item, duration, 5) + expect(res?.daily).toBe(daily) + expect(res?.weekly).toBe(weekly) + } + + item.waste = 9000 + assert("NORMAL", "NORMAL") + + item.waste = 9001 + assert("REMINDER", "NORMAL") + + item.waste = 10001 + assert("LIMITED", "NORMAL") + + item.allowDelay = true + item.delayCount = 1 + + item.weeklyWaste = 9000 + assert("NORMAL", "NORMAL") + item.weeklyWaste = 9001 + assert("NORMAL", "REMINDER") + item.weeklyWaste = 10001 + assert("NORMAL", "LIMITED") + }) +}) diff --git a/test/background/service/whitelist/processor.test.ts b/test/background/service/whitelist/processor.test.ts new file mode 100644 index 000000000..9cd20b307 --- /dev/null +++ b/test/background/service/whitelist/processor.test.ts @@ -0,0 +1,107 @@ +import WhitelistProcessor from '@service/whitelist/processor' + +describe('whitelist-holder', () => { + let processor: WhitelistProcessor + + beforeEach(() => { processor = new WhitelistProcessor() }) + + const verify = (whitelist: string[], cases: Array<[string, string, boolean]>) => { + processor.setWhitelist(whitelist) + cases.forEach(([host, url, expected]) => expect(processor.contains(host, url)).toBe(expected)) + } + + test('setWhitelist basic', () => { + processor.setWhitelist([]) + expect(processor.contains("github.com", "https://github.com/")).toBeFalsy() + + processor.setWhitelist(['', 'github.com', '']) + expect(processor.contains("github.com", "https://github.com/")).toBeTruthy() + + processor.setWhitelist(['google.com']) + expect(processor.contains("github.com", "https://github.com/")).toBeFalsy() + expect(processor.contains("google.com", "https://google.com/")).toBeTruthy() + }) + + test('normal hosts', () => { + verify(["www.google.com", "github.com"], [ + ["github.com", "", true], + ["github.com", "https://unrelated.com/", true], // URL ignored + ["www.google.com", "http://www.google.com/search", true], + ["www.github.com", "https://www.github.com/", false], + ["google.com", "https://google.com/", false], + ]) + }) + + test('virtual hosts with wildcards', () => { + verify(["github.com/*", "*.google.com/**", "*.example.com/path/*"], [ + // Single wildcard: matches one level + ["", "https://github.com/sheepzh", true], + ["", "https://github.com", false], + ["", "https://github.com/sheepzh/timer", false], + // Host wildcard + ["", "http://map.google.com/search", true], + ["", "http://foo.bar.google.com/path", true], + ["", "https://google.com/", false], + // Complex pattern + ["", "https://sub.example.com/path/to", true], + ["", "https://sub.example.com/path/to/nested", false], + ]) + + verify(["gitlab.com/**"], [ + // Double wildcard: matches any depth + ["", "https://gitlab.com/", true], + ["", "https://gitlab.com/group/project/issues", true], + ]) + }) + + test('exclude patterns', () => { + verify( + ["github.com", "*.google.com/**", "+github.com/login", "+www.google.com/**"], + [ + ["github.com", "https://github.com/", true], + ["github.com", "https://github.com/login", false], + ["", "http://map.google.com/search", true], + ["", "https://www.google.com/search", false], + ] + ) + + verify(["example.com/**", "+example.com/admin/**", "+example.com/login"], [ + ["", "https://example.com/page", true], + ["", "https://example.com/login", false], + ["", "https://example.com/admin/dashboard", false], + ]) + }) + + test('mixed patterns', () => { + verify(["example.com", "test.com/**", "github.com", "*.example.com/**"], [ + // Normal host: only checks host param + ["example.com", "https://other.com/", true], + ["other.com", "https://example.com/", false], + // Virtual host: checks URL + ["", "https://test.com/path", true], + ["", "https://other.com/path", false], + // Empty host param: only virtual patterns work + ["", "https://github.com/", false], + ["", "https://sub.example.com/path", true], + ]) + }) + + test('edge cases', () => { + // Trailing slashes, special chars, duplicates, long list + verify(["github.com/**", "example.com/path-with-dash/**"], [ + ["", "https://github.com/", true], + ["", "https://github.com", true], + ["", "https://example.com/path-with-dash/page", true], + ["", "https://example.com/path_with_dash/page", false], + ]) + + processor.setWhitelist(['github.com', 'github.com']) + expect(processor.contains("github.com", "")).toBeTruthy() + + const longList = Array.from({ length: 100 }, (_, i) => `site${i}.com`) + processor.setWhitelist(longList) + expect(processor.contains("site0.com", "")).toBeTruthy() + expect(processor.contains("site99.com", "")).toBeTruthy() + expect(processor.contains("site100.com", "")).toBeFalsy() + }) +}) \ No newline at end of file diff --git a/test/common/logger.test.ts b/test/common/logger.test.ts deleted file mode 100644 index 3c7da6182..000000000 --- a/test/common/logger.test.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Copyright (c) 2022 Hengyang Zhang - * - * This software is released under the MIT License. - * https://opensource.org/licenses/MIT - */ - -import { closeLog, log, openLog } from "@src/common/logger" - -test('test open log', () => { - global.console.log = jest.fn() - openLog() - log("foobar") - expect(console.log).toHaveBeenCalledWith("foobar") -}) - -test('test close log', () => { - global.console.log = jest.fn() - closeLog() - log("foobar") - expect(console.log).toHaveBeenCalledTimes(0) -}) \ No newline at end of file diff --git a/test/database/period-database.test.ts b/test/database/period-database.test.ts deleted file mode 100644 index 8fcffd308..000000000 --- a/test/database/period-database.test.ts +++ /dev/null @@ -1,111 +0,0 @@ -import db from "@db/period-database" -import { keyOf, MILL_PER_PERIOD } from "@util/period" -import { formatTimeYMD } from "@util/time" -import { mockStorage } from "../__mock__/storage" - -function resultOf(date: Date, orderNum: number, milliseconds: number): timer.period.Result { - return { ...keyOf(date, orderNum), milliseconds } -} - -describe('period-database', () => { - beforeAll(mockStorage) - - beforeEach(async () => chrome.storage.local.clear()) - - test('1', async () => { - const date = new Date(2021, 5, 7) - const dateStr = formatTimeYMD(date) - const yesterday = new Date(2021, 5, 6) - - expect((await db.get(dateStr))).toEqual({}) - - const toAdd: timer.period.Result[] = [ - resultOf(date, 0, 56999), - resultOf(date, 1, 2), - resultOf(yesterday, 95, 2) - ] - await db.accumulate(toAdd) - await db.accumulate([ - resultOf(date, 1, 20) - ]) - const data = await db.get(dateStr) - expect(data).toEqual({ 0: 56999, 1: 22 }) - const yesterdayStr = formatTimeYMD(yesterday) - const yesterdayData = await db.get(yesterdayStr) - expect(yesterdayData).toEqual({ 95: 2 }) - }) - - test('getBatch', async () => { - const date = new Date(2021, 5, 7) - const yesterday = new Date(2021, 5, 6) - const toAdd: timer.period.Result[] = [ - resultOf(date, 0, 56999), - resultOf(date, 1, 2), - resultOf(yesterday, 95, 2) - ] - await db.accumulate(toAdd) - - let list = await db.getBatch(['20210607', '20210606']) - expect(list.length).toEqual(3) - let all = await db.getAll() - expect(all).toEqual(toAdd) - }) - - test("importData", async () => { - const date = new Date(2021, 5, 7) - const yesterday = new Date(2021, 5, 6) - const toAdd: timer.period.Result[] = [ - resultOf(date, 0, 56999), - resultOf(date, 1, 2), - resultOf(yesterday, 95, 2) - ] - await db.accumulate(toAdd) - - const data2Import = await db.storage.get() - chrome.storage.local.clear() - expect(await db.getAll()).toEqual([]) - data2Import.foo = "bar" - db.importData(data2Import) - - const imported = await db.getAll() - expect(imported.length).toEqual(3) - }) - - // Invalid data - test("importData2", async () => { - await db.importData(undefined) - expect(await db.getAll()).toEqual([]) - await db.importData({ foo: "bar" }) - expect(await db.getAll()).toEqual([]) - await db.importData([]) - expect(await db.getAll()).toEqual([]) - await db.importData(1) - expect(await db.getAll()).toEqual([]) - await db.importData({ - __timer__PERIOD20210607: { - "-1": 100, - foo: "bar", - 96: 1000, - 85: "???", - 3: undefined, - 4: "", - } - }) - expect(await db.getAll()).toEqual([]) - }) - - test("importData3", async () => { - await db.importData({ - __timer__PERIOD20210607: { - 0: MILL_PER_PERIOD + 1, - 1: 100, - 2: "100", - } - }) - const imported: timer.period.Result[] = await db.getAll() - expect(imported.length).toEqual(3) - const orderMillMap: Record<string, number> = {} - imported.forEach(({ milliseconds, order }) => orderMillMap[order] = milliseconds) - expect(orderMillMap).toEqual({ 0: MILL_PER_PERIOD, 1: 100, 2: 100 }) - }) -}) diff --git a/test/rstest.config.mts b/test/rstest.config.mts new file mode 100644 index 000000000..eaf9b53a3 --- /dev/null +++ b/test/rstest.config.mts @@ -0,0 +1,7 @@ +import { defineConfig } from '@rstest/core' + +export default defineConfig({ + include: ['test/**/*.test.ts'], + testEnvironment: 'jsdom', + globals: true, +}) diff --git a/test/service/whitelist/processor.test.ts b/test/service/whitelist/processor.test.ts deleted file mode 100644 index 4a5de79c6..000000000 --- a/test/service/whitelist/processor.test.ts +++ /dev/null @@ -1,32 +0,0 @@ -import WhitelistProcessor from '@service/whitelist/processor' - -describe('whitelist-holder', () => { - let processor: WhitelistProcessor - - beforeEach(() => processor = new WhitelistProcessor()) - - test('normal', () => { - processor.setWhitelist([ - "www.google.com", - "github.com", - ]) - expect(processor.contains("github.com", "")).toBeTruthy() - expect(processor.contains("www.github.com", "")).toBeFalsy() - expect(processor.contains("www.google.com", "http://www.google.com/search")).toBeTruthy() - }) - - test('wildcards', () => { - processor.setWhitelist([ - "www.github.com", - "*.google.com/**", - "+www.google.com/**", - ]) - expect(processor.contains("google.com", "https://google.com/")).toBeFalsy() - expect(processor.contains("", "http://map.google.com/search")).toBeTruthy() - - // virtual sites only use url - expect(processor.contains("www.google.com", "https://foo.bar.google.com/")).toBeTruthy() - // hit "+www.google.com/**" - expect(processor.contains("www.google.com", "https://www.google.com/")).toBeFalsy() - }) -}) \ No newline at end of file diff --git a/test/util/array.test.ts b/test/util/array.test.ts index 1f7e04f47..28f69589a 100644 --- a/test/util/array.test.ts +++ b/test/util/array.test.ts @@ -5,12 +5,12 @@ * https://opensource.org/licenses/MIT */ -import { allMatch, anyMatch, average, groupBy, rotate, sum, toMap } from "@util/array" +import { allMatch, anyMatch, groupBy, rotate, sum, toMap } from "@util/array" describe("util/array", () => { test('group by', () => { - const arr = [ + const arr: [number, number][] = [ [1, 2], [1, 3], [2, 3], @@ -43,16 +43,10 @@ describe("util/array", () => { test("sum", () => { let arr: number[] = [1, 2, 3, 4] - expect(10).toEqual(sum(arr)) + expect(sum(arr)).toEqual(10) arr = [] - expect(0).toEqual(sum(arr)) - }) - - test("average", () => { - expect(average([10, 1])).toEqual(11 / 2) - expect(average([])).toBeNull() - expect(average([0])).toEqual(0) + expect(sum(arr)).toEqual(0) }) test("allMatch", () => { diff --git a/test/util/chrome/compile.test.ts b/test/util/chrome/compile.test.ts index cce0939b3..c5b825645 100644 --- a/test/util/chrome/compile.test.ts +++ b/test/util/chrome/compile.test.ts @@ -1,8 +1,10 @@ -import compile from "@i18n/chrome/compile" +import compile from "../../../src/i18n/chrome/compile" -test('1', () => { - const messages = { app: '123', foo: { bar: '234' } } - const chromeMessages = compile(messages) - expect(chromeMessages.app.message).toEqual('123') - expect(chromeMessages.foo_bar.message).toEqual('234') +describe('i18n/chrome/compile', () => { + test('flattens nested messages to chrome i18n format', () => { + const messages = { app: '123', foo: { bar: '234' } } + const chromeMessages = compile(messages) + expect(chromeMessages.app.message).toEqual('123') + expect(chromeMessages.foo_bar.message).toEqual('234') + }) }) \ No newline at end of file diff --git a/test/util/limit.test.ts b/test/util/limit.test.ts index 4055013ea..209ab07cd 100644 --- a/test/util/limit.test.ts +++ b/test/util/limit.test.ts @@ -1,32 +1,33 @@ +import { rstest } from '@rstest/core' import { - calcTimeState, cleanCond, dateMinute2Idx, hasLimited, hasWeeklyLimited, isEffective, isEnabledAndEffective, - matchCond, matches, meetLimit, meetTimeLimit, period2Str + dateMinute2Idx, hasLimited, hasWeeklyLimited, isEffective, matchCond, matches, meetLimit, meetTimeLimit, + period2Str, } from "@util/limit" describe('util/limit', () => { - test('cleanCond', () => { - expect(cleanCond('https://github.com?a=2')).toEqual('github.com') - expect(cleanCond('https://github.com/?a=2')).toEqual('github.com') - expect(cleanCond('*://github.com/?a=2')).toEqual('github.com') - expect(cleanCond('www.github.com/sheepzh/?a=2')).toEqual('www.github.com/sheepzh') - expect(cleanCond('https://')).toBeUndefined() - }) - test('matches', () => { - const cond = ['www.baidu.com', '*.google.com', 'github.com/sheepzh', '+github.com/sheepzh/timer','+www.bilibili.com/cheese','*.bilibili.com*'] + const cond = [ + 'www.baidu.com', '+www.baidu.com/**', + '*.google.com', + 'github.com/sheepzh', + '+github.com/sheepzh/time-tracker-4-browser', + '+www.bilibili.com/cheese', + '*.bilibili.com*', + ] expect(matches(cond, 'https://www.baidu.com')).toBe(true) + expect(matches(cond, 'http://www.baidu.com/')).toBe(true) expect(matches(cond, 'http://hk.google.com')).toBe(true) expect(matches(cond, 'http://github.com/sheepzh/poetry')).toBe(true) - expect(matches(cond, 'http://github.com/sheepzh/timer')).toBe(false) - expect(matches(cond, 'http://github.com/sheepzh/timer/test')).toBe(false) + expect(matches(cond, 'http://github.com/sheepzh/time-tracker-4-browser')).toBe(false) + expect(matches(cond, 'http://github.com/sheepzh/time-tracker-4-browser/test')).toBe(false) expect(matches(cond, 'http://www.bilibili.com/cheese/list')).toBe(false) expect(matches(cond, 'http://t.bilibili.com/')).toBe(true) expect(matches(cond, 'https://www.bilibili.com/video/BV3527/')).toBe(true) }) test('matchCond', () => { - const cond = ['www.baidu.com', '*.google.com', 'github.com/sheepzh', 'github.com','+www.bilibili.com/cheese','*.bilibili.com*'] + const cond = ['www.baidu.com', '*.google.com', 'github.com/sheepzh', 'github.com', '+www.bilibili.com/cheese', '*.bilibili.com*'] expect(matchCond(cond, 'http://www.baidu.com')).toEqual(['www.baidu.com']) expect(matchCond(cond, 'https://github.com/sheepzh/time-tracker-for-browser')).toEqual(['github.com', 'github.com/sheepzh']) expect(matchCond(cond, 'https://www.github.com')).toEqual([]) @@ -46,12 +47,14 @@ describe('util/limit', () => { }) test('meetTimeLimit', () => { - expect(meetTimeLimit(undefined, undefined, undefined, undefined)).toBe(false) + const delay5 = { duration: 5, allow: false as boolean, count: 0 } + + expect(meetTimeLimit({ wasted: 0, maxLimit: 0 }, { ...delay5, allow: false })).toBe(false) - expect(meetTimeLimit(1, 1001, undefined, undefined)).toBe(true) - expect(meetTimeLimit(1, 1001, true, undefined)).toBe(true) - expect(meetTimeLimit(1, 1001, true, 1)).toBe(false) - expect(meetTimeLimit(1, (1 + 60 * 5) * 1000 + 1, true, 1)).toBe(true) + expect(meetTimeLimit({ wasted: 1001, maxLimit: 1 }, { ...delay5, allow: false })).toBe(true) + expect(meetTimeLimit({ wasted: 1001, maxLimit: 1 }, { duration: 5, allow: true, count: 0 })).toBe(true) + expect(meetTimeLimit({ wasted: 1001, maxLimit: 1 }, { duration: 5, allow: true, count: 1 })).toBe(false) + expect(meetTimeLimit({ wasted: (1 + 60 * 5) * 1000 + 1, maxLimit: 1 }, { duration: 5, allow: true, count: 1 })).toBe(true) }) test('period2Str', () => { @@ -71,41 +74,20 @@ describe('util/limit', () => { expect(isEffective(undefined)).toBe(true) expect(isEffective([])).toBe(true) - Object.defineProperty(global, 'performance', { writable: true }) - jest.useFakeTimers({ doNotFake: ['performance'] }) + rstest.useFakeTimers({}) const monday = new Date() monday.setFullYear(2025) monday.setMonth(0) monday.setDate(20) - jest.setSystemTime(monday) + rstest.setSystemTime(monday) expect(isEffective([1, 2])).toBe(false) expect(isEffective([0, 1, 2])).toBe(true) - }) - - test('isEffectiveAndEnabled', () => { - Object.defineProperty(global, 'performance', { writable: true }) - jest.useFakeTimers({ doNotFake: ['performance'] }) - const monday = new Date() - monday.setFullYear(2025) - monday.setMonth(0) - monday.setDate(20) - jest.setSystemTime(monday) - - const rule = (weekdays: number[], enabled: boolean): timer.limit.Rule => ({ - id: 1, name: 'foobar', - cond: [], - time: 0, weekdays, - enabled, allowDelay: false, locked: false, - }) - - expect(isEnabledAndEffective(rule([0, 1, 2], true))).toBe(true) - expect(isEnabledAndEffective(rule([0, 1, 2], false))).toBe(false) - expect(isEnabledAndEffective(rule([1, 2], true))).toBe(false) + rstest.useRealTimers() }) test('hasWeeklyLimited', () => { - const item: timer.limit.Item = { + const item: tt4b.limit.Item = { id: 1, name: 'foobar', cond: [], @@ -121,71 +103,24 @@ describe('util/limit', () => { locked: false, } - expect(hasWeeklyLimited(item)).toBe(false) + expect(hasWeeklyLimited(item, 5)).toBe(false) item.weekly = 299 - expect(hasWeeklyLimited(item)).toBe(false) + expect(hasWeeklyLimited(item, 5)).toBe(false) item.weeklyWaste = 299 * 1000 + 1 - expect(hasWeeklyLimited(item)).toBe(true) + expect(hasWeeklyLimited(item, 5)).toBe(true) item.weeklyDelayCount = 1 - expect(hasWeeklyLimited(item)).toBe(true) - - item.allowDelay = true - expect(hasWeeklyLimited(item)).toBe(false) - }) - - test('calcTimeState', () => { - const item: timer.limit.Item = { - id: 1, - name: 'foobar', - cond: [], - time: 10, - weekly: 10, - waste: 0, - visit: 0, - delayCount: 0, - weeklyWaste: 0, - weeklyVisit: 0, - weeklyDelayCount: 0, - enabled: true, - allowDelay: false, - locked: false, - } - const duration = 1000 - - type LimitState = 'NORMAL' | 'REMINDER' | 'LIMITED' - - const assert = (daily: LimitState, weekly: LimitState) => { - const res = calcTimeState(item, duration) - expect(res?.daily).toBe(daily) - expect(res?.weekly).toBe(weekly) - } - - item.waste = 9000 - assert('NORMAL', 'NORMAL') - - item.waste = 9001 - assert('REMINDER', 'NORMAL') - - item.waste = 10001 - assert('LIMITED', 'NORMAL') + expect(hasWeeklyLimited(item, 5)).toBe(true) item.allowDelay = true - item.delayCount = 1 - - item.weeklyWaste = 9000 - assert('NORMAL', 'NORMAL') - item.weeklyWaste = 9001 - assert('NORMAL', 'REMINDER') - item.weeklyWaste = 10001 - assert('NORMAL', 'LIMITED') + expect(hasWeeklyLimited(item, 5)).toBe(false) }) test('hasLimit', () => { - const assert = (setup: (item: timer.limit.Item) => void, limited: boolean) => { - const item: timer.limit.Item = { + const assert = (setup: (item: tt4b.limit.Item) => void, limited: boolean) => { + const item: tt4b.limit.Item = { id: 1, name: 'foobar', cond: [], @@ -202,7 +137,7 @@ describe('util/limit', () => { locked: false, } setup(item) - expect(hasLimited(item)).toBe(limited) + expect(hasLimited(item, 5)).toBe(limited) } assert(item => item.waste = 1000, false) diff --git a/test/util/pattern.test.ts b/test/util/pattern.test.ts index 607f4df41..00c489794 100644 --- a/test/util/pattern.test.ts +++ b/test/util/pattern.test.ts @@ -4,7 +4,7 @@ import { extractFileHost, extractHostname, isBrowserUrl, isHomepage, isIpAndPort test('browser url', () => { // chrome expect(isBrowserUrl('chrome://settings/')).toBeTruthy() - expect(isBrowserUrl('chrome-extension://hkjmfadlepammjmjiihpongliebpcnba/static/app.html#/data/report')).toBeTruthy() + expect(isBrowserUrl('chrome-extension://hkjmfadlepammjmjiihpongliebpcnba/static/app.html#/data/record')).toBeTruthy() // firefox expect(isBrowserUrl('about:addons')).toBeTruthy() // edge diff --git a/test/util/period.test.ts b/test/util/period.test.ts index 9785de8ec..0652bbf2f 100644 --- a/test/util/period.test.ts +++ b/test/util/period.test.ts @@ -1,8 +1,10 @@ -import { copyKeyWith, keyOf, compare } from "@util/period" +// import { compare, copyKeyWith, keyOf } from "@util/period" + +import { compare, keyOf } from '@util/period' test('test1', () => { const key1 = keyOf(new Date(), 0) - const key2 = copyKeyWith(key1, 1) + const key2 = keyOf(new Date(), 1) expect(compare(key1, key2) < 0).toBeTruthy() expect(compare(key1, key1) === 0).toBeTruthy() @@ -12,4 +14,4 @@ test('test2', () => { const a = keyOf(new Date(2020, 4, 20), 15) const b = keyOf(new Date(2020, 4, 20), 19) expect(compare(a, b) < 0).toBeTruthy() -}) \ No newline at end of file +}) diff --git a/test/util/time.test.ts b/test/util/time.test.ts index efab523e7..696a985b9 100644 --- a/test/util/time.test.ts +++ b/test/util/time.test.ts @@ -5,7 +5,7 @@ * https://opensource.org/licenses/MIT */ -import { daysAgo, formatPeriod, formatPeriodCommon, formatTime, getMonthTime, getStartOfDay, isSameDay } from "@util/time" +import { daysAgo, formatPeriodCommon, formatTime, getMonthTime, getStartOfDay, isSameDay } from "../../src/util/time" test('time', () => { const dateStr = '2020/05/01 00:00:01' @@ -14,33 +14,17 @@ test('time', () => { const result = '20200501 000001五' // default format - expect(formatTime(dateStr)).toEqual('2020-05-01 00:00:01') - - expect(formatTime(dateStr, format)).toEqual(result) - expect(formatTime(date, format)).toEqual(result) // use seconds expect(formatTime(Math.floor(date / 1000), format)).toEqual(result) - // use string - expect(formatTime(date.toString(), format)).toEqual(result) - expect(formatTime(Math.floor(date / 1000).toString(), format)).toEqual(result) - expect(formatTime(new Date(date), format)).toEqual(result) }) test('format', () => { - const msg = { - dayMsg: '{day}天{hour}时{minute}分{second}秒', - hourMsg: '{hour}时{minute}分{second}秒', - minuteMsg: '{minute}分{second}秒', - secondMsg: '{second}秒' - } - expect(formatPeriod(86400 * 1000, msg)).toEqual('1天0时0分0秒') - expect(formatPeriod(3666 * 1000, msg)).toEqual('1时1分6秒') - expect(formatPeriodCommon(86400 * 1000)).toEqual('1 d 0 h 0 m 0 s') - expect(formatPeriodCommon(3666 * 1000)).toEqual('1 h 1 m 6 s') - expect(formatPeriodCommon(1)).toEqual('0 s') + expect(formatPeriodCommon(86400 * 1000)).toEqual('1d 0h 0m 0s') + expect(formatPeriodCommon(3666 * 1000)).toEqual('1h 1m 6s') + expect(formatPeriodCommon(1)).toEqual('0s') }) test('days ago', () => { @@ -83,10 +67,5 @@ test("get start of day", () => { const now = new Date(2022, 4, 2) now.setHours(11, 30, 29, 999) const start = getStartOfDay(now) - expect(start.getMonth()).toEqual(4) - expect(start.getDate()).toEqual(2) - expect(start.getHours()).toEqual(0) - expect(start.getMinutes()).toEqual(0) - expect(start.getSeconds()).toEqual(0) - expect(start.getMilliseconds()).toEqual(0) + expect(start).toEqual(new Date(2022, 4, 2).getTime()) }) \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e743153aa..e29660786 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,7 +3,13 @@ "module": "esnext", "target": "esnext", "lib": [ - "ES2023" + "ESNext", + "DOM" + ], + "types": [ + "chrome", + "firefox-webext-browser", + "@rstest/core/globals" ], "jsx": "preserve", "jsxFactory": "h", @@ -13,9 +19,13 @@ "sourceMap": true, "strict": true, "resolveJsonModule": true, - "importHelpers": true, - "skipLibCheck": true, "moduleResolution": "bundler", + "isolatedModules": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitAny": true, + "noUncheckedIndexedAccess": true, + "skipLibCheck": true, "paths": { "@api/*": [ "./src/api/*" @@ -32,9 +42,6 @@ "@side/*": [ "./src/pages/side/*" ], - "@hooks/*": [ - "./src/pages/hooks/*" - ], "@hooks": [ "./src/pages/hooks/index" ], @@ -42,31 +49,28 @@ "./src/pages/*" ], "@db/*": [ - "./src/database/*" + "./src/background/database/*" ], "@service/*": [ - "./src/service/*" + "./src/background/service/*" + ], + "@bg/*": [ + "./src/background/*" ], "@util/*": [ "./src/util/*" ], - "@i18n/*": [ - "./src/i18n/*" - ], "@i18n": [ "./src/i18n/index" ], - "@src/*": [ - "./src/*" + "@i18n/*": [ + "./src/i18n/*" ], - "*": [ - "./types/*" + "@/*": [ + "./src/*" ] } }, - "lib": [ - "dom" - ], "exclude": [ "node_modules", "dist" diff --git a/types/chrome.d.ts b/types/chrome.d.ts index 19701adde..215a1a055 100644 --- a/types/chrome.d.ts +++ b/types/chrome.d.ts @@ -3,8 +3,8 @@ */ // chrome.tabs declare type ChromeTab = chrome.tabs.Tab -declare type ChromeTabActiveInfo = chrome.tabs.TabActiveInfo -declare type ChromeTabChangeInfo = chrome.tabs.TabChangeInfo +declare type ChromeTabActiveInfo = chrome.tabs.OnActivatedInfo +declare type ChromeTabUpdatedInfo = chrome.tabs.OnUpdatedInfo // chrome.windows declare type ChromeWindow = chrome.windows.Window // chrome.contextMenus @@ -15,37 +15,5 @@ declare type ChromeAlarm = chrome.alarms.Alarm // chrome.runtime declare type ChromeOnInstalledReason = `${chrome.runtime.OnInstalledReason}` declare type ChromeMessageSender = chrome.runtime.MessageSender -declare type ChromeMessageHandler<T = any, R = any> = (req: timer.mq.Request<T>, sender: ChromeMessageSender) => Promise<timer.mq.Response<R>> - -declare namespace chrome { - namespace runtime { - type ManifestFirefox = Pick< - ManifestV2, - | 'name' | 'description' | 'version' | 'manifest_version' - | 'icons' | 'background' | 'content_scripts' | 'permissions' | 'optional_permissions' | 'browser_action' - | 'default_locale' | 'homepage_url' | 'key' - > & { - // "author" must be string for Firefox - author?: string - browser_specific_settings?: { - gecko?: { - id?: string - } - } - // see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/sidebar_action - sidebar_action?: Pick<ManifestAction, 'default_icon' | 'default_title'> & { - default_panel?: string - open_at_install?: boolean - } - } - } -} - -/** - * Firefox-specific APIs - */ -declare namespace browser { - namespace sidebarAction { - export function open(): Promise<void> - } -} \ No newline at end of file +declare type ChromeMessageHandler = (req: tt4b.mq.Request<tt4b.mq.ReqCode>, sender: ChromeMessageSender) => Promise<tt4b.mq.Response<tt4b.mq.ReqCode>> +declare type ChromeTabMessageHandler = (req: tt4b.tab.Request<tt4b.tab.ReqCode>, sender: ChromeMessageSender) => Promise<tt4b.tab.Response<tt4b.tab.ReqCode>> \ No newline at end of file diff --git a/types/common.d.ts b/types/common.d.ts index 4fc1aef74..81c768d1b 100644 --- a/types/common.d.ts +++ b/types/common.d.ts @@ -20,18 +20,17 @@ type PartialPick<T, K extends keyof T> = Partial<Pick<T, K>> type RequiredPick<T, K extends keyof T> = Required<Pick<T, K>> +type Exactly<T, U> = T & Record<Exclude<keyof U, keyof T>, never> + /** * Tuple with length * * @param E element * @param L length of tuple */ -declare type Tuple<E, L extends number, Arr = [E, ...Array<E>]> = - Pick<Arr, Exclude<keyof Arr, 'splice' | 'push' | 'pop' | 'shift' | 'unshift'>> - & { - readonly length: L - [I: number]: E - } +declare type Tuple<E, L extends number, _Acc extends E[] = []> = + & (_Acc['length'] extends L ? _Acc : Tuple<E, L, [..._Acc, E]>) + & { readonly length: L } /** * Vector @@ -44,10 +43,17 @@ declare type CompareFn<T> = (a: T, b: T) => number declare type Awaitable<T> = T | Promise<T> +declare type Arrayable<T> = T | T[] + declare type Getter<T> = () => T | Promise<T> declare type NoArgCallback = () => void declare type ArgCallback<T> = (val: T) => void -declare type Converter<T, R> = (val: T) => R \ No newline at end of file +declare type Converter<T, R> = (val: T) => R + +declare type ModelValue<T> = { + modelValue: T + onChange?: ArgCallback<T> +} \ No newline at end of file diff --git a/types/qrcode-generator.d.ts b/types/qrcode-generator.d.ts new file mode 100644 index 000000000..ecd36a506 --- /dev/null +++ b/types/qrcode-generator.d.ts @@ -0,0 +1,15 @@ +declare module 'qrcode-generator' { + type ErrorCorrectionLevel = 'L' | 'M' | 'Q' | 'H' + + type QrCode = { + addData(data: string): void + make(): void + getModuleCount(): number + isDark(row: number, col: number): boolean + } + + type QrCodeGenerator = (typeNumber: number, errorCorrectionLevel: ErrorCorrectionLevel) => QrCode + + const qrcode: QrCodeGenerator + export default qrcode +} diff --git a/types/styles.d.ts b/types/styles.d.ts index 4d2aba51b..c71b9922b 100644 --- a/types/styles.d.ts +++ b/types/styles.d.ts @@ -2,9 +2,3 @@ declare module '*.css' { const classes: { [key: string]: string } export default classes } - -declare module '*.sass' { - const classes: { [key: string]: string } - export default classes -} - diff --git a/types/timer/app.d.ts b/types/timer/app.d.ts deleted file mode 100644 index f7b85c721..000000000 --- a/types/timer/app.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -declare namespace timer.app { - /** - * @since 1.1.7 - */ - type TimeFormat = - | "default" - | "second" - | "minute" - | "hour" -} \ No newline at end of file diff --git a/types/timer/backup.d.ts b/types/timer/backup.d.ts deleted file mode 100644 index 28ea41ce7..000000000 --- a/types/timer/backup.d.ts +++ /dev/null @@ -1,126 +0,0 @@ -/** - * @since 1.2.0 - */ -declare namespace timer.backup { - - type Client = { - id: string - name: string - minDate?: string - maxDate?: string - } - - type LoginInfo = { - acc?: string - psw?: string - } - - type Auth = { - token?: string - login?: LoginInfo - } - - interface CoordinatorContext<Cache> { - cid: string - auth?: Auth - login?: LoginInfo - ext?: TypeExt - cache: Cache - handleCacheChanged: () => Promise<void> - } - - /** - * timer.backup.Coordinator of data synchronizer - */ - interface Coordinator<Cache> { - /** - * Register for client - */ - updateClients(context: timer.backup.CoordinatorContext<Cache>, clients: Client[]): Promise<void> - /** - * List all clients - */ - listAllClients(context: timer.backup.CoordinatorContext<Cache>): Promise<Client[]> - /** - * Download fragmented data from cloud - * - * @param targetCid The client id, default value is the local one in context - */ - download(context: timer.backup.CoordinatorContext<Cache>, dateStart: Date, dateEnd: Date, targetCid?: string): Promise<timer.core.Row[]> - /** - * Upload fragmented data to cloud - * @param rows - */ - upload(context: timer.backup.CoordinatorContext<Cache>, rows: timer.core.Row[]): Promise<void> - /** - * Test auth - * - * @returns errorMsg or null/undefined - */ - testAuth(auth: Auth, ext: timer.backup.TypeExt): Promise<string | undefined> - /** - * Clear data - */ - clear(context: timer.backup.CoordinatorContext<Cache>, client: timer.backup.Client): Promise<void> - } - - type Type = - | 'none' - | 'gist' - // Sync into Obsidian via its plugin Local REST API - // @since 1.9.4 - | 'obsidian_local_rest_api' - // @since 2.4.5 - | 'web_dav' - - type AuthType = - | 'token' - | 'password' - - type TypeExt = { - /** - * The vault of obsidian - * - * @since 2.4.4 - */ - bucket?: string - endpoint?: string - dirPath?: string - } - - /** - * Snapshot of last backup - */ - type Snapshot = { - /** - * Timestamp - */ - ts: number - /** - * The date of the ts - */ - date: string - } - - /** - * Snapshot cache - */ - type SnapshotCache = Partial<{ - [type in Type]: Snapshot - }> - - type MetaCache = Partial<Record<Type, unknown>> - - type RowExtend = { - /** - * The id of client where the remote data is stored - */ - cid?: string - /** - * The name of client where the remote data is stored - */ - cname?: string - } - - type Row = core.Row & RowExtend -} \ No newline at end of file diff --git a/types/timer/common.d.ts b/types/timer/common.d.ts deleted file mode 100644 index 8f593ca8a..000000000 --- a/types/timer/common.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -declare namespace timer.common { - type PageQuery = { - num?: number - size?: number - } - type PageResult<T> = { - list: T[] - total: number - } - type SortDirection = 'ASC' | 'DESC' - type SortBy<T extends string> = { - sortKey?: T - sortDirection?: SortDirection - } -} \ No newline at end of file diff --git a/types/timer/core.d.ts b/types/timer/core.d.ts deleted file mode 100644 index f2dadc765..000000000 --- a/types/timer/core.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -declare namespace timer.core { - type Event = { - start: number - end: number - url: string - ignoreTabCheck: boolean - /** - * Used for run time tracking - */ - host?: string - } - - /** - * The dimension to statistics - */ - type Dimension = - // Focus time - | 'focus' - // Visit count - | 'time' - // Run time - | 'run' - - /** - * The stat result of host - * - * @since 0.0.1 - */ - type Result = MakeOptional<{ [item in Dimension]: number }, 'run'> - - /** - * The unique key of each data row - */ - type RowKey = { - host: string - date: string - } - - type Row = RowKey & Result -} \ No newline at end of file diff --git a/types/timer/echarts-extend.d.ts b/types/timer/echarts-extend.d.ts deleted file mode 100644 index f606a2138..000000000 --- a/types/timer/echarts-extend.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -interface Cartesian2DCoordSys { - type: 'cartesian2d' - x: number - y: number - width: number - height: number -} \ No newline at end of file diff --git a/types/timer/imported.d.ts b/types/timer/imported.d.ts deleted file mode 100644 index bdeb81bf8..000000000 --- a/types/timer/imported.d.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * @since 1.9.2 - */ -declare namespace timer.imported { - type ConflictResolution = 'overwrite' | 'accumulate' - - type Row = Required<timer.core.RowKey> & timer.core.Result & { - exist?: timer.core.Result - } - - type Data = { - // Whether there is data for this dimension - [dimension in timer.core.Dimension]?: boolean - } & { - rows: Row[] - } -} \ No newline at end of file diff --git a/types/timer/index.d.ts b/types/timer/index.d.ts deleted file mode 100644 index 813b231e2..000000000 --- a/types/timer/index.d.ts +++ /dev/null @@ -1,84 +0,0 @@ -declare namespace timer { - /** - * The source locale - * - * @since 1.4.0 - */ - type SourceLocale = 'en' - /** - * The locale must be translated with code - * - * @since 1.5.3 - */ - type RequiredLocale = SourceLocale | 'zh_CN' - type OptionalLocale = - | 'ja' - // @since 0.9.0 - | 'zh_TW' - // @since 1.8.2 - | 'pt_PT' - // @since 2.1.0 - | 'uk' - // @since 2.1.4 - | 'es' - // @since 2.2.7 - | 'de' - // @since 2.3.6 - | 'fr' - // @since 2.4.6 - | 'ru' - // @since 2.5.0 - | 'ar' - - /** - * @since 0.8.0 - */ - type Locale = RequiredLocale | OptionalLocale - - /** - * Translating locales - * - * @since 1.4.0 - */ - type TranslatingLocale = - | 'ko' - | 'pl' - | 'it' - | 'sv' - | 'fi' - | 'da' - | 'hr' - | 'id' - | 'tr' - | 'cs' - | 'ro' - | 'nl' - | 'vi' - | 'sk' - | 'mn' - | 'hi' - - type ExtensionMetaFlag = "rateOpen" - - type ExtensionMeta = { - installTime?: number - appCounter?: { [routePath: string]: number } - popupCounter?: { - _total?: number - } - /** - * The id of this client - * - * @since 1.2.0 - */ - cid?: string - backup?: { - [key in timer.backup.Type]?: { - ts: number - msg?: string - } - } - // Flags - flag?: Partial<Record<ExtensionMetaFlag, boolean>> - } -} \ No newline at end of file diff --git a/types/timer/limit.d.ts b/types/timer/limit.d.ts deleted file mode 100644 index 5a227860d..000000000 --- a/types/timer/limit.d.ts +++ /dev/null @@ -1,139 +0,0 @@ -declare namespace timer.limit { - /** - * Restricted periods - * [0, 1] means from 00:00 to 00:01 - * [0, 120] means from 00:00 to 02:00 - * @since 2.0.0 - */ - type Period = Vector<2> - /** - * Limit rule in runtime - * - * @since 0.8.4 - */ - type Item = Rule & { - /** - * Waste today, milliseconds - */ - waste: number - /** - * Visit count today - * - * @since 3.1.0 - */ - visit: number - /** - * Number of delays today - */ - delayCount: number - /** - * Waste this week, milliseconds - */ - weeklyWaste: number - /** - * Visit count this week - * - * @since 3.1.0 - */ - weeklyVisit: number - /** - * Delay count of this week - */ - weeklyDelayCount: number - } - type Rule = { - /** - * Id - */ - id: number - /** - * Name - */ - name: string - /** - * Condition, can be regular expression with star signs - */ - cond: string[] - /** - * Time limit per day, seconds - */ - time?: number - /** - * Visit count per day - * - * @since 3.1.0 - */ - count?: number - /** - * Time limit per week, seconds - * - * @since 2.4.1 - */ - weekly?: number - /** - * Visit count per week - * - * @since 3.1.0 - */ - weeklyCount?: number - /** - * Time limit per visit, seconds - * - * @since 2.0.0 - */ - visitTime?: number - enabled: boolean - /** - * Locked - * - * @since 3.4.0 - */ - locked: boolean - /** - * @since 2.3.4 - */ - weekdays?: number[] - /** - * Allow to delay 5 minutes if time over - */ - allowDelay: boolean - periods?: Period[] - } - /** - * @since 1.9.0 - */ - type RestrictionLevel = - // No additional action required to lock - | 'nothing' - // Password required to lock or modify restricted rule - | 'password' - // Verification code input required to lock or modify restricted rule - | 'verification' - // Not allowed to unlock manually - | 'strict' - /** - * @since 1.9.0 - */ - type VerificationDifficulty = - // Easy - | 'easy' - // Need some operations - | 'hard' - // Disgusting - | 'disgusting' - - type ReasonType = - | "DAILY" - | "WEEKLY" - | "VISIT" - | "PERIOD" - - /** - * @since 3.1.0 - */ - type ReminderInfo = { - items: timer.limit.Item[] - // Minutes - duration: number - } -} diff --git a/types/timer/merge.d.ts b/types/timer/merge.d.ts deleted file mode 100644 index 2e800e6c2..000000000 --- a/types/timer/merge.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -declare namespace timer.merge { - type Rule = { - /** - * Origin host, can be regular expression with star signs - */ - origin: string - /** - * The merge result - * - * + Empty string means equals to the origin host - * + Number means the count of kept dots, must be natural number (int & >=0) - */ - merged: string | number - } -} diff --git a/types/timer/mq.d.ts b/types/timer/mq.d.ts deleted file mode 100644 index bee03ef1c..000000000 --- a/types/timer/mq.d.ts +++ /dev/null @@ -1,67 +0,0 @@ -/** -* Message queue -*/ -declare namespace timer.mq { - type ReqCode = - | 'openLimitPage' - | 'limitTimeMeet' - // @since 0.9.0 - | 'limitWaking' - // @since 1.2.3 - | 'limitChanged' - // @since 3.1.0 - | 'limitReminder' - // @since 2.0.0 - | 'askVisitTime' - | 'askHitVisit' - // @since 3.2.0 - | 'siteRunChange' - // @since 3.5.0 - | "enableTabGroup" - // Request by content script - // @since 1.3.0 - | "cs.isInWhitelist" - | "cs.incVisitCount" - | "cs.printTodayInfo" - | "cs.getTodayInfo" - | "cs.moreMinutes" - | "cs.getLimitedRules" - | "cs.getRelatedRules" - | "cs.trackTime" - | "cs.trackRunTime" - | "cs.onInjected" - | "cs.openAnalysis" - | "cs.openLimit" - // @since 2.5.5 - | "cs.idleChange" - // @since 3.2.0 - | "cs.getRunSites" - // @since 3.6.1 - | "cs.timelineEv" - - type ResCode = "success" | "fail" | "ignore" - - /** - * @since 0.2.2 - */ - type Request<T = any> = { - code: ReqCode - data?: T - } - /** - * @since 0.8.4 - */ - type Response<T = any> = { - code: ResCode, - msg?: string - data?: T - } - /** - * @since 1.3.0 - */ - type Handler<Req, Res> = (data: Req, sender: chrome.runtime.MessageSender) => Promise<Res> | Res - /** - * @since 0.8.4 - */ - type Callback<T = any> = (result?: Response<T>) => void -} \ No newline at end of file diff --git a/types/timer/option.d.ts b/types/timer/option.d.ts deleted file mode 100644 index 60e9e9f66..000000000 --- a/types/timer/option.d.ts +++ /dev/null @@ -1,218 +0,0 @@ -/** - * The options - * - * @since 0.3.0 - */ -declare namespace timer.option { - type PopupDuration = - | "today" | "yesterday" | "thisWeek" | "thisMonth" - | "lastDays" - | "allTime" - /** - * Options used for the popup page - */ - type PopupOption = { - /** - * The max count of today's data to display on popup page - */ - popupMax: number - /** - * Replace the host name with site name which is detected automatically from the title of site homepages, - * or modified manually by the user - * - * @since 0.5.0 - */ - displaySiteName: boolean - /** - * Merge method - * - * @since 3.0.0 - */ - defaultMergeMethod?: timer.stat.MergeMethod - } - - /** - * @since 1.2.5 - */ - type WeekStartOption = - | 'default' - | number // Weekday, From 1 to 7 - - type DarkMode = - // Follow the OS, @since 1.3.3 - | "default" - // Always on - | "on" - // Always off - | "off" - // Timed on - | "timed" - - type AppearanceOption = { - /** - * Whether to display the whitelist button in the context menu - * - * @since 0.3.2 - */ - displayWhitelistMenu: boolean - /** - * Whether to display the badge text of focus time - * - * @since 0.3.3 - */ - displayBadgeText: boolean - /** - * The background color of badge text - * - * @since 2.3.0 - */ - badgeBgColor?: string - /** - * The language of this extension - * - * @since 0.8.0 - */ - locale: LocaleOption - /** - * Whether to print the info in the console - * - * @since 0.8.6 - */ - printInConsole: boolean - /** - * The state of dark mode - * - * @since 1.1.0 - */ - darkMode: DarkMode - /** - * The range of seconds to turn on dark mode. Required if {@param darkMode} is 'timed' - * - * @since 1.1.0 - */ - darkModeTimeStart?: number - darkModeTimeEnd?: number - /** - * The animation of charts - * - * @since 3.2.2 - */ - chartAnimationDuration: number - } - - type StatisticsOption = { - /** - * Whether to pause tracking if no activity detected - * - * @since 2.5.4 - */ - autoPauseTracking: boolean - /** - * Check interval of auto pausing, seconds - * - * @since 2.5.4 - */ - autoPauseInterval: number - /** - * Whether to count the local files - * @since 0.7.0 - */ - countLocalFiles: boolean - /** - * Whether to count the tile of tab group - */ - countTabGroup: boolean - /** - * The start of one week - * @since 2.4.1 - */ - weekStart?: WeekStartOption - } - - type LimitOption = { - /** - * Motto displayed when restricted - */ - limitPrompt?: string - /** - * restriction level - */ - limitLevel: limit.RestrictionLevel - /** - * The password to unlock - */ - limitPassword?: string - /** - * The difficulty of verification - */ - limitVerifyDifficulty?: limit.VerificationDifficulty - /** - * Whether to reminder before time will meet - * - * @since 3.1.0 - */ - limitReminder: boolean - /** - * Minutes - * - * @since 3.1.0 - */ - limitReminderDuration?: number - } - - /** - * The options of backup - * - * @since 1.2.0 - */ - type BackupOption = { - /** - * The type 2 backup - */ - backupType: backup.Type - /** - * The auth of types, maybe ak/sk or static token - */ - backupAuths: { [type in backup.Type]?: string } - /** - * Login info of types - */ - backupLogin: { [type in backup.Type]?: backup.LoginInfo } - /** - * The extended information of types, including url, file path, and so on - */ - backupExts?: { - [type in backup.Type]?: backup.TypeExt - } - /** - * The name of this client - */ - clientName: string - /** - * Whether to auto-backup data - */ - autoBackUp: boolean - /** - * Interval to auto-backup data, minutes - */ - autoBackUpInterval: number - } - - type AccessibilityOption = { - /** - * Show decals for charts - */ - chartDecal: boolean - } - - type AllOption = PopupOption - & AppearanceOption - & StatisticsOption - & LimitOption - & AccessibilityOption - & BackupOption - /** - * @since 0.8.0 - */ - type LocaleOption = Locale | "default" -} diff --git a/types/timer/period.d.ts b/types/timer/period.d.ts deleted file mode 100644 index 9cd8b8293..000000000 --- a/types/timer/period.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -declare namespace timer.period { - type Key = { - year: number - month: number - date: number - /** - * 0~95 - * ps. 95 = 60 / 15 * 24 - 1 - */ - order: number - } - type KeyRange = [Key, Key] - type Result = Key & { - /** - * 1~900000 - * ps. 900000 = 15min * 60s/min * 1000ms/s - */ - milliseconds: number - } - type Row = { - /** - * {yyyy}{mm}{dd} - */ - date: string - startTime: Date - endTime: Date - /** - * 1 - 60000 - * ps. 60000 = 60s * 1000ms/s - */ - milliseconds: number - } -} \ No newline at end of file diff --git a/types/timer/site.d.ts b/types/timer/site.d.ts deleted file mode 100644 index 39a7decdf..000000000 --- a/types/timer/site.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -declare namespace timer.site { - type SiteKey = { - host: string - type: timer.site.Type - } - type SiteInfo = SiteKey & { - alias?: string - iconUrl?: string - /** - * Category ID - * - * @since 3.0.0 - */ - cate?: number - /** - * Whether to count the running time - * - * @since 3.2.0 - */ - run?: boolean - } - type Type = 'normal' | 'merged' | 'virtual' - /** - * Site tag - * - * @since 3.0.0 - */ - type Cate = { - id: number - name: string - } -} \ No newline at end of file diff --git a/types/timer/stat.d.ts b/types/timer/stat.d.ts deleted file mode 100644 index e0ef2ca30..000000000 --- a/types/timer/stat.d.ts +++ /dev/null @@ -1,95 +0,0 @@ -declare namespace timer.stat { - type SiteTarget = { - siteKey: timer.site.SiteKey - } - type CateTarget = { - cateKey: number - } - type GroupTarget = { - groupKey: number - } - type TargetKey = SiteTarget | CateTarget | GroupTarget - type DateKey = { date?: string } - type StatKey = TargetKey & DateKey - - type SiteMergeExtend = { - /** - * The merged domains - * Can't be empty if merged - * - * @since 0.1.5 - */ - mergedRows?: Omit<timer.stat.SiteRow, 'mergedRows'>[] - } - - type DateMergeExtend = { - /** - * The merged dates - * - * @since 2.4.7 - */ - mergedDates?: string[] - } - - type RemoteExtend = { - /** - * The composition of data when querying remote - */ - composition?: RemoteComposition - } - - interface SiteRow extends SiteTarget, DateKey, core.Result, backup.RowExtend, SiteMergeExtend, DateMergeExtend, RemoteExtend { - /** - * Icon url - */ - iconUrl?: string - /** - * The alias name of this Site, always is the title of its homepage by detected - */ - alias?: string - /** - * @since 3.0.0 - */ - cateId?: number - } - - interface CateRow extends CateTarget, DateKey, core.Result, backup.RowExtend, SiteMergeExtend, DateMergeExtend, RemoteExtend { - cateName: string | undefined - } - - interface GroupRow extends GroupTarget, DateKey, DateMergeExtend, core.Result { - color: `${chrome.tabGroups.Color}` | undefined - title: string | undefined - } - - /** - * Row of each statistics result - */ - type Row = SiteRow | CateRow | GroupRow - - type RemoteCompositionVal = - // Means local data - number | { - /** - * Client's id - */ - cid: string - /** - * Client's name - */ - cname?: string - value: number - } - - /** - * @since 1.4.7 - */ - type RemoteComposition = { - [item in core.Dimension]: RemoteCompositionVal[] - } - - /** - * @since 3.0.0 - */ - type MergeMethod = 'cate' | 'date' | 'domain' | 'group' -} \ No newline at end of file diff --git a/types/timer/timeline.d.ts b/types/timer/timeline.d.ts deleted file mode 100644 index e2a0a10de..000000000 --- a/types/timer/timeline.d.ts +++ /dev/null @@ -1,13 +0,0 @@ -declare namespace timer.timeline { - type Event = { - start: number - end: number - url: string - } - - type Tick = { - start: number - duration: number - host: string - } -} \ No newline at end of file diff --git a/types/tt4b.d.ts b/types/tt4b.d.ts new file mode 100644 index 000000000..8cfe5c397 --- /dev/null +++ b/types/tt4b.d.ts @@ -0,0 +1,1217 @@ +declare namespace tt4b { + type RequiredLocale = 'en' + type OptionalLocale = + | 'zh_CN' + | 'ja' + // @since 0.9.0 + | 'zh_TW' + // @since 1.8.2 + | 'pt_PT' + // @since 2.1.0 + | 'uk' + // @since 2.1.4 + | 'es' + // @since 2.2.7 + | 'de' + // @since 2.3.6 + | 'fr' + // @since 2.4.6 + | 'ru' + // @since 2.5.0 + | 'ar' + // @since 3.7.3 + | 'tr' + // @since 3.7.3 + | 'pl' + // @since 4.1.2 + | 'it' + + /** + * @since 0.8.0 + */ + type Locale = RequiredLocale | OptionalLocale + + /** + * Translating locales + * + * @since 1.4.0 + */ + type TranslatingLocale = + | 'ko' + | 'pl' + | 'it' + | 'sv' + | 'fi' + | 'da' + | 'hr' + | 'id' + | 'cs' + | 'ro' + | 'nl' + | 'vi' + | 'sk' + | 'mn' + | 'hi' + | 'hu' + | 'nb' + + type ExtensionMeta = { + installTime?: number + /** + * The id of this client + * + * @since 1.2.0 + */ + cid?: string + backup?: { + [key in backup.Type]?: { + ts: number + msg?: string + } + } + notification?: { + [key in notification.Method]?: { + ts: number + endDate: string + msg?: string + } + } + /** + * Two-factor auth + */ + twoFa?: TwoFactorAuth + } + + type TwoFactorAuth = { + secret: string + iv: string + salt: string + } + + namespace ui { + /** + * @since 1.1.7 + */ + type TimeFormat = + | "default" + | "second" + | "minute" + | "hour" + + type PopupMenu = 'percentage' | 'ranking' | 'limit' + } + + namespace common { + type Result<T> = { + success: true + data: T + } | { + success: false + errorMsg: string + } + + type PageQuery = { + num?: number + size?: number + } + + type PageResult<T> = { + list: T[] + total: number + } + + type SortDirection = 'ASC' | 'DESC' + type SortBy<T extends string> = { + sortKey?: T + sortDirection?: SortDirection + } + + /** + * chrome.storage.local usage (mq memory.getUsedStorage). + */ + type StorageUsage = { + used: number + total: number + } + } + + namespace notification { + type Method = 'browser' | 'callback' + type Cycle = 'none' | 'daily' | 'weekly' + } + + namespace core { + type Event = { + start: number + end: number + ignoreTabCheck: boolean + /** + * Used for run time tracking + */ + host?: string + } + + /** + * The dimension to statistics + */ + type Dimension = + // Focus time + | 'focus' + // Visit count + | 'time' + // Run time + | 'run' + + /** + * The stat result of host + * + * @since 0.0.1 + */ + type Result = MakeOptional<{ [item in Dimension]: number }, 'run'> + + /** + * The unique key of each data row + */ + type RowKey = { + host: string + date: string + } + + type Row = RowKey & Result + } + + namespace site { + type SiteKey = { + host: string + type: Type + } + type SiteInfo = SiteKey & { + alias?: string + iconUrl?: string + /** + * Category ID + * + * @since 3.0.0 + */ + cate?: number + /** + * Whether to count the running time + * + * @since 3.2.0 + */ + run?: boolean + } + type Type = 'normal' | 'merged' | 'virtual' + /** + * Site tag + * + * @since 3.0.0 + */ + type Cate = { + id: number + name: string + } + + type Query = { + fuzzyQuery?: string + cateIds?: Arrayable<number> + types?: Arrayable<Type> + } + + type PageQuery = Query & common.PageQuery + + type ChangeCateParam = { + // Undefined means uncategorized + cateId: number | undefined + keys: SiteKey[] + } + + type ChangeAliasParam = { + key: SiteKey + // Undefined means delete alias + alias: string | undefined + } + } + + namespace merge { + type Rule = { + /** + * Origin host, can be regular expression with star signs + */ + origin: string + /** + * The merge result + * + * + Empty string means equals to the origin host + * + Number means the count of kept dots, must be natural number (int & >=0) + */ + merged: string | number + } + } + + namespace limit { + /** + * Restricted periods + * [0, 1] means from 00:00 to 00:01 + * [0, 120] means from 00:00 to 02:00 + * @since 2.0.0 + */ + type Period = Vector<2> + /** + * Limit rule in runtime + * + * @since 0.8.4 + */ + type Item = Rule & { + /** + * Waste today, milliseconds + */ + waste: number + /** + * Visit count today + * + * @since 3.1.0 + */ + visit: number + /** + * Number of delays today + */ + delayCount: number + /** + * Waste this week, milliseconds + */ + weeklyWaste: number + /** + * Visit count this week + * + * @since 3.1.0 + */ + weeklyVisit: number + /** + * Delay count of this week + */ + weeklyDelayCount: number + } + type Rule = { + /** + * Id + */ + id: number + /** + * Name + */ + name: string + /** + * Condition, can be regular expression with star signs + */ + cond: string[] + /** + * Time limit per day, seconds + */ + time?: number + /** + * Visit count per day + * + * @since 3.1.0 + */ + count?: number + /** + * Time limit per week, seconds + * + * @since 2.4.1 + */ + weekly?: number + /** + * Visit count per week + * + * @since 3.1.0 + */ + weeklyCount?: number + /** + * Time limit per visit, seconds + * + * @since 2.0.0 + */ + visitTime?: number + enabled: boolean + /** + * Locked + * + * @since 3.4.0 + */ + locked: boolean + /** + * @since 2.3.4 + */ + weekdays?: number[] + /** + * Allow to delay 5 minutes if time over + */ + allowDelay: boolean + periods?: Period[] + } + /** + * @since 1.9.0 + */ + type RestrictionLevel = + // No additional action required to lock + | 'nothing' + // Password required to lock or modify restricted rule + | 'password' + // Verification code input required to lock or modify restricted rule + | 'verification' + // Not allowed to unlock manually + | 'strict' + // Unlock with 2FA code + | '2fa' + /** + * @since 1.9.0 + */ + type VerificationDifficulty = + // Easy + | 'easy' + // Need some operations + | 'hard' + // Disgusting + | 'disgusting' + + type ReasonType = + | "DAILY" + | "WEEKLY" + | "VISIT" + | "PERIOD" + + /** + * @since 3.1.0 + */ + type ReminderInfo = { + items: Item[] + // Minutes + duration: number + } + + type Query = { + id?: number + url?: string + // Only enabled rules + enabled?: boolean + // Only effective rules (should be enabled and meet effective conditions) + effective?: boolean + // Only effective and limited rules + limited?: boolean + } + + type Summary = { + url: string + site: site.SiteInfo + items: Item[] + } + } + + namespace period { + type Key = { + year: number + month: number + date: number + /** + * 0~95 + * ps. 95 = 60 / 15 * 24 - 1 + */ + order: number + } + type KeyRange = [Key, Key] + + type Result = Key & { + /** + * 1~900000 + * ps. 900000 = 15min * 60s/min * 1000ms/s + */ + milliseconds: number + } + + type Row = { + /** + * {yyyy}{mm}{dd} + */ + date: string + /** Unix timestamp (ms) of row start */ + startTime: number + /** Unix timestamp (ms) of row end */ + endTime: number + /** + * 1 - 60000 + * ps. 60000 = 60s * 1000ms/s + */ + milliseconds: number + } + + type Query = { + range?: KeyRange + size?: number + } + } + + namespace timeline { + type Event = { + start: number + end: number + url: string + } + + type Tick = { + start: number + duration: number + host: string + } + + type MergeMethod = 'cate' | 'domain' | 'none' + + type Activity = { + start: number + duration: number + seriesKey: string + seriesName: string | undefined + } + + type Query = { + host?: string + start?: number + merge: MergeMethod + } + } + + /** + * @since 1.2.0 + */ + namespace backup { + type Client = { + id: string + name: string + minDate?: string + maxDate?: string + } + + type LoginInfo = { + acc?: string + psw?: string + } + + type Auth = { + token?: string + login?: LoginInfo + } + + interface CoordinatorContext<Cache> { + cid: string + auth?: Auth + login?: LoginInfo + ext?: TypeExt + cache: Cache + handleCacheChanged: () => Promise<void> + } + + /** + * backup.Coordinator of data synchronizer + */ + interface Coordinator<Cache> { + /** + * Register for client + */ + updateClients(context: CoordinatorContext<Cache>, clients: Client[]): Promise<void> + /** + * List all clients + */ + listAllClients(context: CoordinatorContext<Cache>): Promise<Client[]> + /** + * Download fragmented data from cloud + * + * @param targetCid The client id, default value is the local one in context + */ + download(context: CoordinatorContext<Cache>, start: string, end: string, targetCid?: string): Promise<core.Row[]> + /** + * Upload fragmented data to cloud + * @param rows + */ + upload(context: CoordinatorContext<Cache>, rows: core.Row[]): Promise<void> + /** + * Test auth + * + * @returns errorMsg or null/undefined + */ + testAuth(auth: Auth, ext: TypeExt): Promise<string | undefined> + /** + * Clear data + */ + clear(context: CoordinatorContext<Cache>, client: Client): Promise<void> + } + + type Type = + | 'none' + | 'gist' + // Sync into Obsidian via its plugin Local REST API + // @since 1.9.4 + | 'obsidian_local_rest_api' + // @since 2.4.5 + | 'web_dav' + + type AuthType = + | 'token' + | 'password' + + type TypeExt = { + /** + * The vault of obsidian + * + * @since 2.4.4 + */ + bucket?: string + endpoint?: string + dirPath?: string + } + + type MetaCache = Partial<Record<Type, unknown>> + + type RowExtend = { + /** + * The id of client where the remote data is stored + */ + cid?: string + /** + * The name of client where the remote data is stored + */ + cname?: string + } + + type RemoteQuery = { + start: string + end: string + specCid?: string + excludeLocal?: boolean + } + + type Row = core.Row & RowExtend + + /** + * The data format for export and import + */ + type ExportMeta = { + version: string + ts: number + } + + type ExportData = { + __meta__: ExportMeta + __stat__?: core.Row[] + __limit__?: limit.Rule[] + __merge__?: merge.Rule[] + __whitelist__?: string[] + __cate__?: site.Cate[] + } + } + + /** + * @since 1.9.2 + */ + namespace imported { + type ConflictResolution = 'overwrite' | 'accumulate' + + type Row = Required<core.RowKey> & core.Result & { + exist?: core.Result + } + + type Data = { + // Whether there is data for this dimension + [dimension in core.Dimension]?: boolean + } & { + rows: Row[] + } + + type ProcessQuery = { + data: Data + resolution: ConflictResolution + } + } + + namespace stat { + type SiteTarget = { + siteKey: site.SiteKey + } + type CateTarget = { + cateKey: number + } + type GroupTarget = { + groupKey: number + } + type TargetKey = SiteTarget | CateTarget | GroupTarget + type DateKey = { date: string } + type StatKey = TargetKey & DateKey + + type DateMergeExtend = { + /** + * The merged dates + * + * @since 2.4.7 + */ + mergedDates?: string[] + } + + type RemoteExtend = { + /** + * The composition of data when querying remote + */ + composition?: RemoteComposition + } + + /** StatCondition.date fields only (mq / stat-database queries). */ + type _BaseQuery = { + date?: string | [string?, string?] + mergeDate?: boolean + } + + type SiteQuery = + & _BaseQuery + & { + focusRange?: Vector<2> + timeRange?: [number, number?] + virtual?: boolean + } + & common.SortBy<'date' | 'host' | core.Dimension> + & { + query?: string + host?: string | string[] + mergeHost?: boolean + inclusiveRemote?: boolean + cateIds?: number[] + ignoreSite?: boolean + } + + type SiteDeleteQuery = ({ + host: string + } | { + groupId: number + }) & { + date?: [start?: string, end?: string] | string + } + + type SitePageQuery = SiteQuery & common.PageQuery + + type SiteRowFlat = SiteTarget & + DateKey & + core.Result & + backup.RowExtend & + DateMergeExtend & + RemoteExtend & { + /** + * Icon url + */ + iconUrl?: string + /** + * The alias name of this Site, always is the title of its homepage by detected + */ + alias?: string + /** + * @since 3.0.0 + */ + cateId?: number + } + + type SiteMergeExtend = { + /** + * The merged domains + * Can't be empty if merged + * + * @since 0.1.5 + */ + mergedRows?: SiteRowFlat[] + } + + type SiteRow = SiteRowFlat & SiteMergeExtend + + type CateQuery = _BaseQuery + & common.SortBy<'date' | 'focus' | 'time'> + & { + query?: string + inclusiveRemote?: boolean + cateIds?: number[] + } + + type CatePageQuery = CateQuery & common.PageQuery + + type CateRowFlat = CateTarget & + DateKey & + core.Result & + backup.RowExtend & + DateMergeExtend & + RemoteExtend & { + cateName: string | undefined + } + + type CateMergeExtend = { + mergedRows?: SiteRowFlat[] + } + + type CateRow = CateRowFlat & CateMergeExtend + + type GroupRowFlat = GroupTarget & + DateKey & + DateMergeExtend & + core.Result & { + color: `${chrome.tabGroups.Color}` | undefined + title: string | undefined + } + + type GroupQuery = _BaseQuery + & { + focusRange?: Vector<2> + timeRange?: [number, number?] + } + & common.SortBy<'date' | 'title' | 'focus' | 'time'> + & { + query?: string + groupIds?: number[] + } + + type GroupPageQuery = GroupQuery & common.PageQuery + + type GroupMergeExtend = { + mergedRows?: GroupRowFlat[] + } + + type GroupRow = GroupRowFlat & GroupMergeExtend + + /** + * Row of each statistics result + */ + type Row = SiteRow | CateRow | GroupRow + + type RemoteCompositionVal = + // Means local data + number | { + /** + * Client's id + */ + cid: string + /** + * Client's name + */ + cname?: string + value: number + } + + /** + * @since 1.4.7 + */ + type RemoteComposition = { + [item in core.Dimension]: RemoteCompositionVal[] + } + + /** + * @since 3.0.0 + */ + type MergeMethod = 'cate' | 'date' | 'domain' | 'group' + } + + /** + * The options + * + * @since 0.3.0 + */ + namespace option { + /** + * @since 1.2.5 + */ + type WeekStartOption = + | 'default' + | number // Weekday, From 1 to 7 + + type DarkMode = + // Follow the OS, @since 1.3.3 + | "default" + // Always on + | "on" + // Always off + | "off" + // Timed on + | "timed" + + type AppearanceOption = { + /** + * Whether to display the whitelist button in the context menu + * + * @since 0.3.2 + */ + displayWhitelistMenu: boolean + /** + * Whether to display the badge text of focus time + * + * @since 0.3.3 + */ + displayBadgeText: boolean + /** + * The background color of badge text + * + * @since 2.3.0 + */ + badgeBgColor?: string + /** + * The language of this extension + * + * @since 0.8.0 + */ + locale: LocaleOption + /** + * Whether to print the info in the console + * + * @since 0.8.6 + */ + printInConsole: boolean + /** + * The state of dark mode + * + * @since 1.1.0 + */ + darkMode: DarkMode + /** + * The range of seconds to turn on dark mode. Required if {@param darkMode} is 'timed' + * + * @since 1.1.0 + */ + darkModeTimeStart?: number + darkModeTimeEnd?: number + /** + * The animation of charts + * + * @since 3.2.2 + */ + chartAnimationDuration: number + } + + type AppearanceRequired = MakeRequired<AppearanceOption, 'darkModeTimeStart' | 'darkModeTimeEnd'> + + type TrackingOption = { + /** + * Whether to pause tracking if no activity detected + * + * @since 2.5.4 + */ + autoPauseTracking: boolean + /** + * Check interval of auto pausing, seconds + * + * @since 2.5.4 + */ + autoPauseInterval: number + /** + * Whether to count the local files + * @since 0.7.0 + */ + countLocalFiles: boolean + /** + * Whether to count the tile of tab group + */ + countTabGroup: boolean + /** + * The start of one week + * @since 2.4.1 + */ + weekStart?: WeekStartOption + /** + * Where to store the tracking data + * + * @since 4.0.0 + */ + storage: StorageType + } + + type TrackingRequired = MakeRequired<TrackingOption, 'weekStart'> + + type LimitOption = { + /** + * Delay duration, minutes + */ + limitDelayDuration: number + /** + * Motto displayed when restricted + */ + limitPrompt?: string + /** + * restriction level + */ + limitLevel: limit.RestrictionLevel + /** + * The password to unlock + */ + limitPassword?: string + /** + * The difficulty of verification + */ + limitVerifyDifficulty?: limit.VerificationDifficulty + /** + * Whether to reminder before time will meet + * + * @since 3.1.0 + */ + limitReminder: boolean + /** + * Minutes + * + * @since 3.1.0 + */ + limitReminderDuration?: number + } + + type LimitRequired = MakeRequired<LimitOption, 'limitPassword' | 'limitVerifyDifficulty' | 'limitReminderDuration'> + + /** + * The options of backup + * + * @since 1.2.0 + */ + type BackupOption = { + /** + * The type 2 backup + */ + backupType: backup.Type + /** + * The auth of types, maybe ak/sk or static token + */ + backupAuths: { [type in backup.Type]?: string } + /** + * Login info of types + */ + backupLogin: { [type in backup.Type]?: backup.LoginInfo } + /** + * The extended information of types, including url, file path, and so on + */ + backupExts?: { + [type in backup.Type]?: backup.TypeExt + } + /** + * The name of this client + */ + clientName: string + /** + * Whether to auto-backup data + */ + autoBackUp: boolean + /** + * Interval to auto-backup data, minutes + */ + autoBackUpInterval: number + } + + type AccessibilityOption = { + /** + * Show decals for charts + */ + chartDecal: boolean + } + + type NotificationOption = { + /** + * Notification cycle: none, daily, or weekly + */ + notificationCycle: notification.Cycle + /** + * Offset time in minutes relative to the start of the cycle + */ + notificationOffset: number + /** + * Notification method: browser or callback + */ + notificationMethod: notification.Method + /** + * HTTP callback endpoint URL + */ + notificationEndpoint?: string + /** + * Auth token for HTTP callback (optional) + */ + notificationAuthToken?: string + } + + export type DefaultOption = + & AppearanceRequired & TrackingRequired & LimitRequired + & BackupOption & AccessibilityOption & NotificationOption + + type AllOption = + & AppearanceOption + & TrackingOption + & LimitOption + & AccessibilityOption + & BackupOption + & NotificationOption + + /** + * @since 0.8.0 + */ + type LocaleOption = Locale | "default" + + /** + * @since 4.0.0 + */ + type StorageType = 'classic' | 'indexed_db' + } + + namespace mq { + type _TransmitValue = + | undefined | string | number | boolean | void + | { readonly [key: string]: _TransmitValue } + | readonly _TransmitValue[] + + type _HandlerIO<Input extends _TransmitValue = undefined, Output extends _TransmitValue = undefined> = [Input, Output] + type _MakeRegistry<Codes extends string, Param extends _TransmitValue = undefined, Result extends _TransmitValue = undefined> = Record<Codes, _HandlerIO<Param, Result>> + + type _MqReqData<R, K extends keyof R> = R[K] extends [infer In, unknown] ? In : never + type _MqResData<R, K extends keyof R> = R[K] extends [unknown, infer Out] ? Out : never + type _MqRequest<R, K extends keyof R = keyof R> = { code: K; data: _MqReqData<R, K> } + type _MqSuccess<R, K extends keyof R> = + _MqResData<R, K> extends undefined ? { code: "success"; data?: undefined } : { code: "success"; data: _MqResData<R, K> } + type _MqResponse<R, K extends keyof R = keyof R> = + | { code: "fail"; msg: string } + | { code: "ignore" } + | (K extends keyof R ? _MqSuccess<R, K> : never) + type _MqHandler<R, C extends keyof R> = _MqResData<R, C> extends undefined + ? (data: _MqReqData<R, C>, sender: chrome.runtime.MessageSender) => Awaitable<void | undefined> + : (data: _MqReqData<R, C>, sender: chrome.runtime.MessageSender) => Awaitable<_MqResData<R, C>> + + type _HandlerRegistry = + // Track event + & _MakeRegistry<'track.time' | 'track.runTime', core.Event> + // Content script events + & _MakeRegistry<'cs.injected'> + & _MakeRegistry<'cs.idleChanged', boolean> + // Content script API + & _MakeRegistry<'cs.getAudible', undefined, boolean> + // Statistics + & _MakeRegistry<'stat.today', string, core.Result | undefined> + & _MakeRegistry<'stat.sites', stat.SiteQuery | undefined, stat.SiteRow[]> + & _MakeRegistry<'stat.sitePage', stat.SitePageQuery | undefined, common.PageResult<stat.SiteRow>> + & _MakeRegistry<'stat.deleteSite', stat.SiteDeleteQuery> + & _MakeRegistry<'stat.countSite', stat.SiteQuery | undefined, number> + & _MakeRegistry<'stat.cates', stat.CateQuery | undefined, stat.CateRow[]> + & _MakeRegistry<'stat.catePage', stat.CatePageQuery | undefined, common.PageResult<stat.CateRow>> + & _MakeRegistry<'stat.groups', stat.GroupQuery | undefined, stat.GroupRow[]> + & _MakeRegistry<'stat.groupPage', stat.GroupPageQuery | undefined, common.PageResult<stat.GroupRow>> + & _MakeRegistry<'stat.countGroup', stat.GroupQuery | undefined, number> + & _MakeRegistry<'stat.batchDelete', stat.StatKey[]> + // Items + & _MakeRegistry<'item.batch', core.RowKey[], core.Row[]> + // Category + & _MakeRegistry<'cate.all', undefined, site.Cate[]> + & _MakeRegistry<'cate.add', string, site.Cate> + & _MakeRegistry<'cate.change', site.Cate> + & _MakeRegistry<'cate.delete', number> + // Option + & _MakeRegistry<'option.get', undefined, option.DefaultOption> + & _MakeRegistry<'option.set', Partial<option.AllOption>> + & _MakeRegistry<'option.changeStorage', option.StorageType> + & _MakeRegistry<'option.testNotification', undefined, string | undefined> + & _MakeRegistry<'option.weekStartDay', undefined, number> + & _MakeRegistry<'option.weekStartTime', number, number> + // Meta + & _MakeRegistry<'meta.installTs', undefined, number> + & _MakeRegistry<'meta.usedStorage', undefined, common.StorageUsage> + & _MakeRegistry<'meta.check2fa', string, boolean> + & _MakeRegistry<'meta.prepare2fa', undefined, string> + // Site + & _MakeRegistry<'site.runEnabled', string, boolean> + & _MakeRegistry<'site.list', site.Query | undefined, site.SiteInfo[]> + & _MakeRegistry<'site.page', site.PageQuery | undefined, common.PageResult<site.SiteInfo>> + & _MakeRegistry<'site.add', site.SiteInfo, string | undefined> + & _MakeRegistry<'site.delete', site.SiteKey[]> + & _MakeRegistry<'site.changeCate', site.ChangeCateParam> + & _MakeRegistry<'site.deleteIcon', site.SiteKey> + & _MakeRegistry<'site.changeAlias', site.ChangeAliasParam> + & _MakeRegistry<'site.fillAlias', site.SiteKey[]> + & _MakeRegistry<'site.initialAlias', string, string | undefined> + & _MakeRegistry<'site.changeRun', { key: site.SiteKey; enabled: boolean }> + & _MakeRegistry<'site.search', string | undefined, site.SiteInfo[]> + // Time Limit + & _MakeRegistry<'limit.list', limit.Query | undefined, limit.Item[]> + & _MakeRegistry<'limit.delete', number[]> + & _MakeRegistry<'limit.update', limit.Rule[]> + & _MakeRegistry<'limit.add', Omit<limit.Rule, 'id'>, number> + & _MakeRegistry<'limit.hitVisit', limit.Item, boolean> + & _MakeRegistry<'limit.delay', string> + & _MakeRegistry<'limit.summary', undefined, limit.Summary | undefined> + // Merge + & _MakeRegistry<'merge.all', undefined, merge.Rule[]> + & _MakeRegistry<'merge.delete', string> + & _MakeRegistry<'merge.add', merge.Rule> + // Whitelist + & _MakeRegistry<'whitelist.all', undefined, string[]> + & _MakeRegistry<'whitelist.add' | 'whitelist.delete', string> + & _MakeRegistry<'whitelist.save', string[]> + & _MakeRegistry<'whitelist.contain', { host: string; url: string }, boolean> + // Backup + & _MakeRegistry<'backup.sync' | 'backup.checkAuth', undefined, string | undefined> + & _MakeRegistry<'backup.clear', string, string | undefined> + & _MakeRegistry<'backup.query', backup.RemoteQuery, backup.Row[]> + & _MakeRegistry<'backup.lastTs', backup.Type, number | undefined> + & _MakeRegistry<'backup.clients', undefined, (backup.Client & { current: boolean })[]> + // Period + & _MakeRegistry<'period.list', period.Query, period.Row[]> + // Timeline + & _MakeRegistry<'timeline.list', timeline.Query, timeline.Activity[]> + & _MakeRegistry<'timeline.tick', timeline.Event> + & _MakeRegistry<'backup.preview', backup.RemoteQuery, imported.Row[]> + & _MakeRegistry<'immigration.importOther', imported.ProcessQuery> + & _MakeRegistry<'immigration.import', any> + & _MakeRegistry<'immigration.export', undefined, backup.ExportData> + + type ReqCode = keyof _HandlerRegistry + + type ReqData<T extends ReqCode> = _MqReqData<_HandlerRegistry, T> + + /** + * @since 0.2.2 + */ + type Request<T extends ReqCode = ReqCode> = _MqRequest<_HandlerRegistry, T> + + type ResData<T extends ReqCode> = _MqResData<_HandlerRegistry, T> + + /** + * When ResData is undefined, success may omit data. + * @since 0.8.4 + */ + type Response<T extends ReqCode = ReqCode> = _MqResponse<_HandlerRegistry, T> + + /** + * @since 1.3.0 + */ + type Handler<C extends ReqCode> = _MqHandler<_HandlerRegistry, C> + /** + * @since 0.8.4 + */ + type Callback<T extends ReqCode = ReqCode> = (result?: Response<T>) => void + } + + /** + * Background → content script via chrome.tabs.sendMessage (see sendMsg2Tab). + */ + namespace tab { + type _HandlerRegistry = + & mq._MakeRegistry<'siteRunChange'> + & mq._MakeRegistry<'syncAudible', boolean> + & mq._MakeRegistry<'limitTimeMeet', limit.Item[]> + & mq._MakeRegistry<'limitChanged'> + & mq._MakeRegistry<'limitReminder', limit.ReminderInfo> + & mq._MakeRegistry<'askVisitHit', number, boolean> + + type ReqCode = keyof _HandlerRegistry + + type ReqData<T extends ReqCode> = mq._MqReqData<_HandlerRegistry, T> + + type ResData<T extends ReqCode> = mq._MqResData<_HandlerRegistry, T> + + type Request<T extends ReqCode = ReqCode> = mq._MqRequest<_HandlerRegistry, T> + + type Response<T extends ReqCode = ReqCode> = mq._MqResponse<_HandlerRegistry, T> + + /** + * @since 0.8.4 + */ + type Callback<T extends ReqCode = ReqCode> = (result?: Response<T>) => void + } +}