fix: the title style of top-k chart

Author: sheepzh

package.json

@@ -31,20 +31,20 @@
         "@crowdin/crowdin-api-client": "^1.52.0",
         "@emotion/babel-plugin": "^11.13.5",
         "@emotion/css": "^11.13.5",
-        "@rsdoctor/rspack-plugin": "^1.5.0",
-        "@rspack/cli": "^1.7.3",
-        "@rspack/core": "^1.7.3",
-        "@swc/core": "^1.15.10",
+        "@rsdoctor/rspack-plugin": "^1.5.2",
+        "@rspack/cli": "^1.7.6",
+        "@rspack/core": "^1.7.6",
+        "@swc/core": "^1.15.11",
         "@swc/jest": "^0.2.39",
-        "@types/chrome": "0.1.35",
+        "@types/chrome": "0.1.36",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^25.0.9",
+        "@types/node": "^25.2.3",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^2.0.1",
         "babel-loader": "^10.0.0",
-        "commitlint": "^20.3.1",
-        "css-loader": "^7.1.2",
+        "commitlint": "^20.4.1",
+        "css-loader": "^7.1.3",
         "decompress": "^4.2.1",
         "husky": "^9.1.7",
         "jest": "^30.2.0",
@@ -54,7 +54,7 @@
         "postcss": "^8.5.6",
         "postcss-loader": "^8.2.0",
         "postcss-rtlcss": "^5.7.1",
-        "puppeteer": "^24.35.0",
+        "puppeteer": "^24.37.2",
         "ts-loader": "^9.5.4",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
@@ -63,10 +63,10 @@
     "dependencies": {
         "@element-plus/icons-vue": "^2.3.2",
         "echarts": "^6.0.0",
-        "element-plus": "2.13.1",
+        "element-plus": "2.13.2",
         "punycode": "^2.3.1",
-        "vue": "^3.5.27",
-        "vue-router": "^4.6.4"
+        "vue": "^3.5.28",
+        "vue-router": "^5.0.2"
     },
     "engines": {
         "node": ">=22"

src/pages/app/Layout/menu/Side.tsx

@@ -103,10 +103,9 @@ const _default = defineComponent(() => {
                 >
                     {collapsed.value
                         ? menus.flatMap(g => g.children).map(item => renderItem(item, router, curr))
-                        : menus.map(({ children, title }) => (
-                            <ElMenuItemGroup title={t(title)}>
-                                {children.map(item => renderItem(item, router, curr))}
-                            </ElMenuItemGroup>
+                        // Not export type of ElMenuItemGroup, so use h() directly
+                        : menus.map(({ children, title }) => h(ElMenuItemGroup, { title: t(title) },
+                            () => children.map(item => renderItem(item, router, curr))
                         ))}
                 </ElMenu>
             </ElScrollbar>

src/pages/app/Layout/menu/item.ts

@@ -10,7 +10,7 @@ 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 { getGuidePageUrl } from "@util/constant/url"
-import { type IconProps } from "element-plus"
+import { type Component } from 'vue'
 import About from "../icons/About"
 import Database from "../icons/Database"
 import Table from "../icons/Table"
@@ -20,7 +20,7 @@ import Whitelist from "../icons/Whitelist"
 
 export type MenuItem = {
     title: I18nKey
-    icon: IconProps | string
+    icon: Component | string
     route?: string
     href?: string
     index?: string

src/pages/app/components/Dashboard/components/TopKVisit/Title/index.tsx

@@ -49,24 +49,26 @@ const Title = defineComponent(() => {
 
     return () => (
         <Flex align="center" justify="space-between">
-            <Flex align="center" wrap columnGap={3}>
+            <Flex align="center" wrap columnGap={3} rowGap={2}>
                 {tN(msg => msg.dashboard.topK.title, {
                     k: <TitleSelect field="topK" values={[6, 8, 10, 12]} />,
                     day: <TitleSelect field="dayNum" values={[7, 30, 90, 180]} />,
                 })}
             </Flex>
-            <ElRadioGroup
-                v-show={!isXs.value}
-                size="small"
-                modelValue={filter.topKChartType}
-                onChange={val => filter.topKChartType = val as TopKChartType}
-            >
-                {Object.entries(CHART_CONFIG).map(([k, v]) => (
-                    <ElRadioButton value={k} class={radioCls}>
-                        <ElIcon size={15}>{v}</ElIcon>
-                    </ElRadioButton>
-                ))}
-            </ElRadioGroup>
+            <Flex width={90} justify='end'>
+                <ElRadioGroup
+                    v-show={!isXs.value}
+                    size="small"
+                    modelValue={filter.topKChartType}
+                    onChange={val => filter.topKChartType = val as TopKChartType}
+                >
+                    {Object.entries(CHART_CONFIG).map(([k, v]) => (
+                        <ElRadioButton value={k} class={radioCls}>
+                            <ElIcon size={15}>{v}</ElIcon>
+                        </ElRadioButton>
+                    ))}
+                </ElRadioGroup>
+            </Flex>
         </Flex>
     )
 })

src/pages/app/util/limit.tsx

@@ -168,6 +168,7 @@ export function processVerification(option: timer.option.LimitOption, context?:
             // Double check
             const btn = (appendTo ?? document).querySelector(`.${okBtnClz}`)
             if (!btn) return
+            if (typeof data === 'string') return
             const { value } = data
             if (value === answerValue) return resolve()
             ElMessage.error({ appendTo, message: incorrectMessage })

src/pages/components/Flex.tsx

@@ -16,6 +16,7 @@ type Props = {
     justify?: CSSProperties['justifyContent']
     gap?: string | number
     columnGap?: string | number
+    rowGap?: string | number
     wrap?: CSSProperties['flexWrap'] | boolean
     href?: string
     target?: HTMLAnchorElement['target']
@@ -38,6 +39,7 @@ const Flex = defineComponent<Props>(props => {
                 justifyContent: props.justify,
                 flexWrap: cvtFlexWrap(props.wrap),
                 columnGap: cvtPxScale(props.columnGap),
+                rowGap: cvtPxScale(props.rowGap),
                 gap: cvtPxScale(props.gap),
                 ...cvt2BaseStyle(props),
             }}
@@ -47,6 +49,6 @@ const Flex = defineComponent<Props>(props => {
             {defaultSlots && h(defaultSlots)}
         </Comp>
     )
-}, { props: [...ALL_BASE_PROPS, 'direction', 'column', 'flex', 'align', 'justify', 'gap', 'columnGap', 'wrap', 'as'] })
+}, { props: [...ALL_BASE_PROPS, 'direction', 'column', 'flex', 'align', 'justify', 'gap', 'columnGap', 'rowGap', 'wrap', 'as'] })
 
 export default Flex

tsconfig.json

@@ -3,7 +3,8 @@
         "module": "esnext",
         "target": "esnext",
         "lib": [
-            "ES2023"
+            "ES2023",
+            "DOM",
         ],
         "jsx": "preserve",
         "jsxFactory": "h",
@@ -64,9 +65,6 @@
             ]
         }
     },
-    "lib": [
-        "dom"
-    ],
     "exclude": [
         "node_modules",
         "dist"