feat: 1.UI调整，更适合小屏幕，并且电脑端更紧凑

JuckZ · Sep 14, 2023 · f21570d · f21570d
1 parent a931a80
commit f21570d
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 30 deletions.
diff --git a/src/ui/CalendarView.vue b/src/ui/CalendarView.vue
@@ -51,7 +51,16 @@ const isDateDisabled = (timestamp: number) => {
 </script>
 
 <style scoped lang="scss">
-#calendarContainerInSelf :deep(.n-calendar-header__extra .n-button-group .n-button) {
-    max-width: max-content;
+#calendarContainerInSelf :deep(.n-calendar) {
+    height: 500px;
+    .n-calendar-header__extra .n-button-group .n-button {
+        max-width: max-content;
+    }
+    .n-calendar-dates {
+        grid-template-rows: repeat(5, minmax(4rem, auto));
+        .n-calendar-cell {
+            padding: 0px;
+        }
+    }
 }
 </style>
diff --git a/src/ui/ClockView.vue b/src/ui/ClockView.vue
@@ -14,7 +14,8 @@
             >
                 <div class="radialTimeText">{{ time }}</div>
             </RadialProgress>
-            <n-result v-else status="418" :title="t.info.noDoingTask" :description="t.info.haveABreak"> </n-result>
+            <n-result v-else status="418" size="small" :title="t.info.noDoingTask" :description="t.info.haveABreak">
+            </n-result>
         </n-space>
     </div>
 </template>

diff --git a/src/ui/OverView.vue b/src/ui/OverView.vue
@@ -1,24 +1,16 @@
 <template>
-    <n-grid cols="1 320:2 640:4" responsive="self">
+    <n-grid cols="1 200:2 640:4" responsive="self">
         <n-grid-item>
-            <n-card :title="t.info.todayNum" content-style="font-size: 16px;">{{
-                countPomodoro(allPomodoro, 'todayNum')
-            }}</n-card>
+            <n-card :title="t.info.todayNum" size="small">{{ countPomodoro(allPomodoro, 'todayNum') }}</n-card>
         </n-grid-item>
         <n-grid-item>
-            <n-card :title="t.info.todayTime" content-style="font-size: 16px;">{{
-                countPomodoro(allPomodoro, 'todayTime')
-            }}</n-card>
+            <n-card :title="t.info.todayTime" size="small">{{ countPomodoro(allPomodoro, 'todayTime') }}</n-card>
         </n-grid-item>
         <n-grid-item>
-            <n-card :title="t.info.totalNum" content-style="font-size: 16px;">{{
-                countPomodoro(allPomodoro, 'totalNum')
-            }}</n-card>
+            <n-card :title="t.info.totalNum" size="small">{{ countPomodoro(allPomodoro, 'totalNum') }}</n-card>
         </n-grid-item>
         <n-grid-item>
-            <n-card :title="t.info.totalTime" content-style="font-size: 16px;">{{
-                countPomodoro(allPomodoro, 'totalTime')
-            }}</n-card>
+            <n-card :title="t.info.totalTime" size="small">{{ countPomodoro(allPomodoro, 'totalTime') }}</n-card>
         </n-grid-item>
     </n-grid>
 </template>

diff --git a/src/ui/PomodoroHistory.vue b/src/ui/PomodoroHistory.vue
@@ -8,7 +8,7 @@
     >
         <n-message-provider>
             <n-space vertical>
-                <div id="historyViewContainer">
+                <div class="pa5px">
                     <H1Title></H1Title>
                     <!-- <Title></Title> -->
                     <OverView :all-pomodoro="pomodoroHistory" />
@@ -49,6 +49,9 @@ import {
     NSpace,
     NGrid,
     NGridItem,
+    CardProps,
+    CalendarProps,
+    ResultProps,
     type GlobalThemeOverrides,
 } from 'naive-ui';
 import CalendarView from './CalendarView.vue';
@@ -66,9 +69,39 @@ let theme = ref(darkTheme);
 let locale = ref(zhCN);
 let dateLocale = ref(dateZhCN);
 
-const lightThemeOverrides: GlobalThemeOverrides = {};
+type CardThemeOverrides = NonNullable<CardProps['themeOverrides']>
+type ResultThemeOverrides = NonNullable<ResultProps['themeOverrides']>
+type CalendarThemeOverrides = NonNullable<CalendarProps['themeOverrides']>
+const cardThemeOverrides: CardThemeOverrides = {
+    paddingSmall: '0.5rem',
+    fontSizeSmall: '0.8rem',
+    titleFontSizeSmall: '1rem',
+    titleFontWeight: '700'
+}
 
-const darkThemeOverrides: GlobalThemeOverrides = {};
+const resultThemeOverrides: ResultThemeOverrides = {
+    titleFontWeight: '700',
+    titleFontSizeSmall: '1.2rem',
+    fontSizeSmall: '0.8rem'
+}
+const calendarThemeOverrides: CalendarThemeOverrides = {
+    lineHeight: 1.2,
+    fontSize: '0.8rem',
+    titleFontSize: '1.2rem',
+    titleFontWeight: '700'
+}
+
+const lightThemeOverrides: GlobalThemeOverrides = {
+    Card: cardThemeOverrides,
+    Result: resultThemeOverrides,
+    Calendar: calendarThemeOverrides
+};
+
+const darkThemeOverrides: GlobalThemeOverrides = {
+    Card: cardThemeOverrides,
+    Result: resultThemeOverrides,
+    Calendar: calendarThemeOverrides
+};
 
 const { systemState } = storeToRefs(useSystemStore());
 const { pomodoroHistory } = storeToRefs(usePomodoroStore());
@@ -101,10 +134,4 @@ const focusChangeHandle = ({ year, month, date }: { year: number; month: number;
         date,
     };
 };
-</script>
-
-<style scoped lang="scss">
-#historyViewContainer {
-    padding: 5px 10px;
-}
-</style>
+</script>
diff --git a/src/ui/PomodoroListView.vue b/src/ui/PomodoroListView.vue
@@ -13,7 +13,12 @@
             }"
             :show-divider="false"
         >
-            <NListItem v-for="pomodoro in pomodoroList" :key="pomodoro.timestamp" :style="getRandomStyle()" bordered>
+            <NListItem
+                v-for="pomodoro in pomodoroList"
+                :key="pomodoro.timestamp"
+                :style="getRandomStyle(pomodoro)"
+                bordered
+            >
                 <NEllipsis v-show="activeTime.date !== time.date">
                     {{ pomodoro.task }}
                 </NEllipsis>
@@ -73,8 +78,13 @@ watchEffect(() => {
     );
 });
 
-const getRandomStyle = () => {
-    const color = colorSchema[Math.floor(Math.random() * colorSchema.length)];
+const getRandomStyle = (pomodoro: Pomodoro) => {
+    let seed = 0;
+    for (let i = 0; i < pomodoro.task.length; i++) {
+        seed += pomodoro.task.charCodeAt(i);
+    }
+    let index = seed % colorSchema.length;
+    const color = colorSchema[index];
     return `background-color: ${color.bg};color: ${color.fg};`;
 };
 </script>

diff --git a/src/ui/TimeLine.vue b/src/ui/TimeLine.vue
@@ -15,7 +15,7 @@
                         :to="targetNode"
                     >
                         <template #trigger>
-                            <n-icon size="20" @mouseenter="enterHandler">
+                            <n-icon size="20" class="cursor-pointer" @mouseenter="enterHandler">
                                 <radio-button-off-outline />
                             </n-icon>
                         </template>

diff --git a/src/ui/view/PomodoroHistoryView.ts b/src/ui/view/PomodoroHistoryView.ts
@@ -34,6 +34,8 @@ export class PomodoroHistoryView extends ItemView {
 
     async onOpen(): Promise<void> {
         const container = this.containerEl.children[1];
+        console.log(this.containerEl, container);
+        container.style.padding = '0';
         container.empty();
         container.createEl(
             'div',