Merge branch 'main' into mv2

.vscode/settings.json

@@ -7,9 +7,17 @@
     "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
     "cSpell.words": [
         "Auths",
+        "clipboardy",
+        "countup",
+        "daterange",
         "echarts",
+        "filemanager",
         "Hengyang",
-        "Kanban"
+        "Kanban",
+        "Popconfirm",
+        "vueuse",
+        "webtime",
+        "zrender"
     ],
     "cSpell.ignorePaths": [
         "package-lock.json",

package.json

@@ -1,71 +1,75 @@
 {
-  "name": "timer",
-  "version": "2.1.1",
-  "description": "Web timer",
-  "homepage": "https://github.com/sheepzh/timer",
-  "scripts": {
-    "dev": "webpack --config=webpack/webpack.dev.ts --watch",
-    "dev:safari": "webpack --config=webpack/webpack.dev.safari.ts --watch",
-    "build": "webpack --config=webpack/webpack.prod.ts",
-    "build:safari": "webpack --config=webpack/webpack.prod.safari.ts",
-    "analyze": "webpack --config=webpack/webpack.analyze.ts",
-    "test": "jest --env=jsdom",
-    "test-c": "jest --coverage --env=jsdom"
-  },
-  "author": {
-    "name": "zhy",
-    "email": "[email protected]",
-    "url": "https://www.github.com/sheepzh"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@crowdin/crowdin-api-client": "^1.28.2",
-    "@types/chrome": "0.0.254",
-    "@types/copy-webpack-plugin": "^8.0.1",
-    "@types/echarts": "^4.9.22",
-    "@types/generate-json-webpack-plugin": "^0.3.7",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
-    "@types/psl": "^1.1.3",
-    "@types/webpack": "^5.28.5",
-    "@types/webpack-bundle-analyzer": "^4.6.3",
-    "babel-loader": "^9.1.3",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.8.1",
-    "eslint": "^8.56.0",
-    "filemanager-webpack-plugin": "^8.0.0",
-    "generate-json-webpack-plugin": "^2.0.0",
-    "html-webpack-plugin": "^5.5.4",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.7.6",
-    "node-sass": "^9.0.0",
-    "sass-loader": "^13.3.2",
-    "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.1",
-    "ts-loader": "^9.5.1",
-    "ts-node": "^10.9.2",
-    "tsconfig-paths": "^4.2.0",
-    "tslib": "^2.6.2",
-    "typescript": "5.3.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^5.1.4"
-  },
-  "dependencies": {
-    "@element-plus/icons-vue": "^2.3.1",
-    "axios": "^1.6.2",
-    "clipboardy": "^4.0.0",
-    "countup.js": "^2.8.0",
-    "echarts": "^5.4.3",
-    "element-plus": "2.4.4",
-    "psl": "^1.9.0",
-    "stream-browserify": "^3.0.0",
-    "vue": "^3.3.12",
-    "vue-router": "^4.2.5"
-  },
-  "engines": {
-    "node": ">=18"
-  }
+    "name": "timer",
+    "version": "2.1.1",
+    "description": "Web timer",
+    "homepage": "https://github.com/sheepzh/timer",
+    "scripts": {
+        "dev": "webpack --config=webpack/webpack.dev.ts --watch",
+        "dev:safari": "webpack --config=webpack/webpack.dev.safari.ts --watch",
+        "build": "webpack --config=webpack/webpack.prod.ts",
+        "build:safari": "webpack --config=webpack/webpack.prod.safari.ts",
+        "analyze": "webpack --config=webpack/webpack.analyze.ts",
+        "test": "jest --env=jsdom",
+        "test-c": "jest --coverage --env=jsdom"
+    },
+    "author": {
+        "name": "zhy",
+        "email": "[email protected]",
+        "url": "https://www.github.com/sheepzh"
+    },
+    "license": "MIT",
+    "devDependencies": {
+        "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+        "@babel/preset-env": "^7.23.8",
+        "@crowdin/crowdin-api-client": "^1.29.5",
+        "@types/chrome": "0.0.256",
+        "@types/copy-webpack-plugin": "^8.0.1",
+        "@types/echarts": "^4.9.22",
+        "@types/generate-json-webpack-plugin": "^0.3.7",
+        "@types/jest": "^29.5.11",
+        "@types/node": "^20.11.3",
+        "@types/psl": "^1.1.3",
+        "@types/webpack": "^5.28.5",
+        "@types/webpack-bundle-analyzer": "^4.6.3",
+        "@vue/babel-plugin-jsx": "^1.1.6",
+        "babel-loader": "^9.1.3",
+        "copy-webpack-plugin": "^12.0.1",
+        "css-loader": "^6.9.0",
+        "eslint": "^8.56.0",
+        "filemanager-webpack-plugin": "^8.0.0",
+        "generate-json-webpack-plugin": "^2.0.0",
+        "html-webpack-plugin": "^5.6.0",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "mini-css-extract-plugin": "^2.7.7",
+        "node-sass": "^9.0.0",
+        "sass-loader": "^14.0.0",
+        "style-loader": "^3.3.4",
+        "ts-jest": "^29.1.1",
+        "ts-loader": "^9.5.1",
+        "ts-node": "^10.9.2",
+        "tsconfig-paths": "^4.2.0",
+        "tslib": "^2.6.2",
+        "typescript": "5.3.3",
+        "url-loader": "^4.1.1",
+        "webpack": "^5.89.0",
+        "webpack-bundle-analyzer": "^4.10.1",
+        "webpack-cli": "^5.1.4"
+    },
+    "dependencies": {
+        "@element-plus/icons-vue": "^2.3.1",
+        "@vueuse/core": "^10.7.2",
+        "axios": "^1.6.5",
+        "clipboardy": "^4.0.0",
+        "countup.js": "^2.8.0",
+        "echarts": "^5.4.3",
+        "element-plus": "2.4.4",
+        "psl": "^1.9.0",
+        "stream-browserify": "^3.0.0",
+        "vue": "^3.4.14",
+        "vue-router": "^4.2.5"
+    },
+    "engines": {
+        "node": ">=18"
+    }
 }

src/api/chrome/runtime.ts

@@ -42,8 +42,8 @@ export function setUninstallURL(url: string): Promise<void> {
 
 /**
  * Get the url of this extension
- * 
- * @param path The path relative to the root directory of this extension 
+ *
+ * @param path The path relative to the root directory of this extension
  */
 export function getUrl(path: string): string {
     return chrome.runtime.getURL(path)

src/api/obsidian.ts

@@ -55,7 +55,7 @@ export function getFileContent(context: ObsidianRequestContext, filePath: string
         }).catch(e => {
             const status = (e as AxiosError)?.response?.status
             if (status !== 404) {
-                console.log("Failed to query file countent of Obsidian", e)
+                console.log("Failed to query file content of Obsidian", e)
             }
             resolve(null)
         })

src/app/components/analysis/components/filter.ts → src/app/components/Analysis/components/AnalysisFilter.tsx

@@ -1,14 +1,14 @@
 /**
  * Copyright (c) 2021 Hengyang Zhang
- * 
+ *
  * This software is released under the MIT License.
  * https://opensource.org/licenses/MIT
  */
 
-import type { Ref, PropType, VNode } from "vue"
+import type { Ref, PropType } from "vue"
 
 import { ElOption, ElSelect, ElTag } from "element-plus"
-import { ref, h, defineComponent } from "vue"
+import { ref, defineComponent } from "vue"
 import statService, { HostSet } from "@service/stat-service"
 import siteService from "@service/site-service"
 import { t } from "@app/locale"
@@ -45,15 +45,15 @@ async function handleRemoteSearch(queryStr: string, trendDomainOptions: Ref<time
 
 const HOST_PLACEHOLDER = t(msg => msg.analysis.common.hostPlaceholder)
 
-function keyOfHostInfo(option: timer.site.SiteKey): string {
+function calcKey(option: timer.site.SiteKey): string {
     const { merged, virtual, host } = option
     let prefix = '_'
     merged && (prefix = 'm')
     virtual && (prefix = 'v')
     return `${prefix}${host || ''}`
 }
 
-function hostInfoOfKey(key: string): timer.site.SiteKey {
+function calcSite(key: string): timer.site.SiteKey {
     if (!key?.length) return undefined
     const prefix = key.charAt(0)
     return { host: key.substring(1), merged: prefix === 'm', virtual: prefix === 'v' }
@@ -62,22 +62,18 @@ function hostInfoOfKey(key: string): timer.site.SiteKey {
 const MERGED_TAG_TXT = t(msg => msg.analysis.common.merged)
 const VIRTUAL_TAG_TXT = t(msg => msg.analysis.common.virtual)
 
-const renderOptionTag = (tagLabel: string) => h('span',
-    { style: { float: "right", height: "34px" } },
-    h(ElTag, { size: 'small' }, () => tagLabel)
-)
-
-function renderHostLabel({ host, merged, virtual, alias }: timer.site.SiteInfo): VNode[] {
-    const result = [
-        h('span', {}, host)
-    ]
-    alias && result.push(
-        h(ElTag, { size: 'small', type: 'info' }, () => alias)
-    )
-    merged && result.push(renderOptionTag(MERGED_TAG_TXT))
-    virtual && result.push(renderOptionTag(VIRTUAL_TAG_TXT))
-    return result
-}
+const SiteOptionTag = defineComponent({
+    props: {
+        text: String,
+    },
+    setup: ({ text }) => {
+        return () => (
+            <span style={{ float: "right", height: "34px" }}>
+                <ElTag size="small">{text}</ElTag>
+            </span>
+        )
+    }
+})
 
 const _default = defineComponent({
     props: {
@@ -91,48 +87,58 @@ const _default = defineComponent({
     setup(props, ctx) {
         const domainKey: Ref<string> = ref('')
         const trendSearching: Ref<boolean> = ref(false)
-        const trendDomainOptions: Ref<timer.site.SiteKey[]> = ref([])
+        const trendDomainOptions: Ref<timer.site.SiteInfo[]> = ref([])
         const defaultSite: timer.site.SiteKey = props.site
         const timeFormat: Ref<timer.app.TimeFormat> = ref(props.timeFormat)
+
         if (defaultSite) {
-            domainKey.value = keyOfHostInfo(defaultSite)
+            domainKey.value = calcKey(defaultSite)
             trendDomainOptions.value.push(defaultSite)
         }
 
-        function handleSiteChange() {
-            const siteInfo: timer.site.SiteInfo = hostInfoOfKey(domainKey.value)
+        const handleSiteChange = () => {
+            const siteInfo: timer.site.SiteInfo = calcSite(domainKey.value)
             ctx.emit('siteChange', siteInfo)
         }
 
-        return () => [
-            h(ElSelect, {
-                placeholder: HOST_PLACEHOLDER,
-                class: 'filter-item',
-                modelValue: domainKey.value,
-                filterable: true,
-                remote: true,
-                loading: trendSearching.value,
-                clearable: true,
-                remoteMethod: (query: string) => handleRemoteSearch(query, trendDomainOptions, trendSearching),
-                onChange: (key: string) => {
+        return () => <>
+            <ElSelect
+                placeholder={HOST_PLACEHOLDER}
+                class="filter-item"
+                modelValue={domainKey.value}
+                filterable
+                remote
+                loading={trendSearching.value}
+                clearable
+                remoteMethod={(query: string) => handleRemoteSearch(query, trendDomainOptions, trendSearching)}
+                onChange={(key: string) => {
                     domainKey.value = key
                     handleSiteChange()
-                },
-                onClear: () => {
+                }}
+                onClear={() => {
                     domainKey.value = undefined
                     handleSiteChange()
-                }
-            }, () => (trendDomainOptions.value || [])?.map(
-                siteInfo => h(ElOption, {
-                    value: keyOfHostInfo(siteInfo),
-                    label: labelOfHostInfo(siteInfo),
-                }, () => renderHostLabel(siteInfo))
-            )),
-            h(TimeFormatFilterItem, {
-                defaultValue: timeFormat.value,
-                onSelect: (newVal: timer.app.TimeFormat) => ctx.emit('timeFormatChange', timeFormat.value = newVal)
-            })
-        ]
+                }}
+            >
+                {(trendDomainOptions.value || [])?.map(
+                    site => (
+                        <ElOption
+                            value={calcKey(site)}
+                            label={labelOfHostInfo(site)}
+                        >
+                            <span>{site.host}</span>
+                            {site.alias && <ElTag size="small" type="info">{site.alias}</ElTag>}
+                            {site.merged && <SiteOptionTag text={MERGED_TAG_TXT} />}
+                            {site.virtual && <SiteOptionTag text={VIRTUAL_TAG_TXT} />}
+                        </ElOption>
+                    )
+                )}
+            </ElSelect>
+            <TimeFormatFilterItem
+                defaultValue={timeFormat.value}
+                onChange={val => ctx.emit("timeFormatChange", timeFormat.value = val)}
+            />
+        </>
     }
 })
 

src/app/components/Analysis/components/Summary/Site.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2023 Hengyang Zhang
+ *
+ * This software is released under the MIT License.
+ * https://opensource.org/licenses/MIT
+ */
+
+import { Ref, defineComponent } from "vue"
+import { computedAsync } from "@vueuse/core"
+import { labelOfHostInfo } from "../../util"
+import { t } from "@app/locale"
+import { useAnalysisSite } from "../../context"
+import siteService from "@service/site-service"
+
+const EMPTY_DESC = t(msg => msg.analysis.common.emptyDesc)
+
+function renderChildren(site: timer.site.SiteInfo) {
+    if (!site) return <h1 class="site-alias">{EMPTY_DESC}</h1>
+
+    const { iconUrl, alias } = site
+    const label = labelOfHostInfo(site)
+    const title: string = alias ? alias : label
+    const subtitle: string = alias ? label : undefined
+    return <>
+        {iconUrl && <img src={iconUrl} width={24} height={24} />}
+        <h1 class="site-alias">{title}</h1>
+        {subtitle && <p class="site-host">{subtitle}</p>}
+    </>
+}
+
+const computedSiteInfo = async (siteKey: timer.site.SiteKey): Promise<timer.site.SiteInfo> => {
+    if (!siteKey) return undefined
+    return await siteService.get(siteKey)
+}
+
+const _default = defineComponent(() => {
+    const site = useAnalysisSite()
+    const siteInfo: Ref<timer.site.SiteInfo> = computedAsync(() => computedSiteInfo(site.value))
+    return () => (
+        <div class="site-container">
+            {renderChildren(siteInfo.value)}
+        </div>
+    )
+})
+
+export default _default