style: optimize ui

Author: sheepzh

src/pages/app/components/Limit/LimitModify/Sop/Step1.tsx

@@ -1,5 +1,5 @@
 import { t } from "@app/locale"
-import { ElCol, ElForm, ElFormItem, ElInput, ElOption, ElRow, ElSelect, ElSwitch } from "element-plus"
+import { ElCol, ElForm, ElFormItem, ElInput, ElRow, ElSelect, ElSwitch } from "element-plus"
 import { defineComponent } from "vue"
 import { useSopData } from "./context"
 
@@ -31,9 +31,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>

src/pages/app/components/Limit/LimitModify/Sop/Step2/SiteInput.tsx

@@ -30,7 +30,6 @@ const fetchAllHosts = async () => {
 const useUrlSelect = () => {
     const { data: allHosts } = useRequest(fetchAllHosts)
     const [input, onFilter] = useDebounceState('', 50)
-    const selectEl = ref<SelectV2Instance>()
     const inputUrl = computed(() => {
         const inputVal = input.value
         return inputVal ? cleanCond(inputVal) : undefined

src/pages/popup/components/Footer/index.tsx

@@ -4,7 +4,7 @@ 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 { ElSelect, ElText } from "element-plus"
 import { defineComponent } from "vue"
 import Menu from "./Menu"
 
@@ -28,12 +28,11 @@ const Footer = defineComponent(() => {
                         placeholder={t(msg => msg.shared.merge.mergeMethod.notMerge)}
                         popperOptions={{ placement: 'top' }}
                         style={{ width: '90px' }}
-                    >
-                        <ElOption value='' label={t(msg => msg.shared.merge.mergeMethod.notMerge)} />
-                        {mergeItems.value.map(method => (
-                            <ElOption value={method} label={t(msg => msg.shared.merge.mergeMethod[method])} />
-                        ))}
-                    </ElSelect>
+                        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
                     reverse
@@ -48,9 +47,8 @@ const Footer = defineComponent(() => {
                     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>
+                    options={ALL_DIMENSIONS.map(value => ({ value, label: t(msg => msg.item[value]) }))}
+                />
             </Flex>
         </Flex >
     )

src/pages/popup/components/Percentage/chart.ts

@@ -76,6 +76,9 @@ function calculateSubTitleText(result: PercentageResult): string {
     let { date, dataDate, rows, query: { dimension, duration } = {}, dateLength } = result
     const dateStr = dataDate ? formatDateStr(date, dataDate) : ''
     const totalStr = formatTotalStr(rows, dimension)
+    let firstLineParts = [totalStr, dateStr].filter(s => !!s)
+    isRtl() && (firstLineParts = firstLineParts.reverse())
+    const firstLine = firstLineParts.join(' ')
 
     // Calculate average per day
     let averageStr = ''
@@ -88,29 +91,27 @@ function calculateSubTitleText(result: PercentageResult): string {
             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 }) + ')'
+            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 }) + ')'
+            averageStr = t(msg => msg.content.percentage.averageCount, { value: averageCount })
         }
     }
 
-    let parts = [totalStr, dateStr, averageStr].filter(str => !!str)
-    isRtl() && (parts = parts.reverse())
-    return parts.join(' ')
+    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,
     }
 }