Electron+Vue3 MAC 版日历开发记录(8)——专注模式

1,170 阅读2分钟

这是我参与更文挑战的第8天,活动详情查看: 更文挑战

能坚持到第八天,先给自己点个赞。

今天在办公室收拾东西时,无意间看到一本书《番茄工作法》,所以萌生出做一个专注---倒计时功能,开启该功能后,让电脑进入全屏倒计时,也让自己进入不操作电脑,把时间用在其他可专注的地方,如:看书。

先放出效果图来:

添加控制按钮

直接在「设置」页面增加「专注模式」按钮:

// SettingSub.vue
<Button
    type="button"
    label="打开专注模式"
    icon="pi pi-times"
    class="p-d-block p-mx-auto p-button-success"
    @click="focus"
/>

...

focus(): void {
  this.$emit('focusClick');
  this.$emit('update:visibleFullSetting', this.sidebarVisible = false);
  window.electron.ipcRenderer.send('show-focus-window');
},

主要作用:

  1. 向上(FullCalendarMain 组件) emit focusClick 事件,作用是打开「专注倒计时」页面。
  2. 关闭「设置」界面;
  3. 向 Main 进程发送 show-focus-window 事件,作用是提醒界面全屏。

打开专注界面

FullCalendarMain 组件只要将 visibleFocusView 设置为 true 即可。

<focus-view-sub
  v-model:visibleFocusView="visibleFocusView"
/>

具体专注界面如下代码,比较简单。

<template>
  <Sidebar
    v-model:visible="sidebarVisible"
    class="p-grid nested-grid"
    :base-z-index="1000"
    position="full"
    @click="hideFocus"
  >
    <h1>专注模式</h1>
    <Vue3CountdownClock />
  </Sidebar>
</template>

<script lang="ts">
import { defineComponent, ref, provide } from 'vue';
import Sidebar from 'primevue/sidebar';
import Vue3CountdownClock from 'vue3-clock-countdown';
import Moment from 'moment';

export default defineComponent({
  name: 'FocusViewSub',
  components: {
    Sidebar,
    Vue3CountdownClock,
  },
  props: {
    visibleFocusView: Boolean,
  },
  emits: [
    'update:visibleFocusView',
  ],
  setup () {
    const deadLine = ref(Moment().add(40, 'minute').format());
    provide('deadline', deadLine);

    const Title = ref('进入倒计时');
    provide('title', Title);

    const timerStyle = ref({
      'text-align': 'center',
      'font-family': 'sans-serif',
      'font-weight': 100,
    });
    provide('timerStyle', timerStyle);

    const h1Style = ref({
      color: '#396',
      'font-weight': 100,
      'font-size': '40px',
      margin: '40px 0px 20px',
    });
    provide('h1Style', h1Style);

    const clockdiv = ref({
      'font-family': 'sans-serif',
      color: '#fff',
      display: 'inline-block',
      'font-weight': 100,
      'text-align': 'center',
      'font-size': '30px',
    });
    provide('clockdiv', clockdiv);

    const clockdivDiv = ref({
      padding: '10px',
      'border-radius': '3px',
      background: '#00BF96',
      display: 'inline-block',
      margin: '1px',
    });
    provide('clockdivDiv', clockdivDiv);

    const clockdivDivSpan = ref({
      padding: '15px',
      'border-radius': '3px',
      background: '#00816A',
      display: 'inline-block',
    });
    provide('clockdivDivSpan', clockdivDivSpan);

    const styleEndTime = ref({
      color: '#fff',
    });
    provide('styleEndTime', styleEndTime);

    const smalltext = ref({
      'padding-top': '5px',
      'font-size': '16px',
    });
    provide('smalltext', smalltext);

    const titleDays = ref('Days');
    provide('titleDays', titleDays);

    const titleHours = ref('Hours');
    provide('titleHours', titleHours);

    const titleMinutes = ref('Minutes');
    provide('titleMinutes', titleMinutes);

    const titleSeconds = ref('Seconds');
    provide('titleSeconds', titleSeconds);

    const titleEndTime = ref('End Time!');
    provide('titleEndTime', titleEndTime);
  },
  data() {
    return {
      sidebarVisible: false,
    };
  },
  watch: {
    visibleFocusView(): void {
      this.sidebarVisible = this.visibleFocusView;
    },
  },
  methods: {
    hideFocus() {
      this.$emit('update:visibleFocusView', this.sidebarVisible);
      window.electron.ipcRenderer.send('hide-focus-window');
    },
  },
});
</script>

主要还是利用 PrimeVue 控件中的 Sidebar 组件。

还有,就是直接使用了一个第三方插件:Vue3-Countdown-Clock,该插件是目前我临时使用的,包括里面的配置我基本使用它提供的,主要看起来和我的主题毫无违和感。

注:

  1. 这里我临时写死了时间了,下一步肯定把番茄工作时间动态设置;
  2. 需要把插件加入 shims-vue.d.ts 中:
declare module 'vue3-clock-countdown'

有了界面了,剩下的就是全屏放大了。

全屏放大

要达到专注的效果,首先需要让我们的窗口全屏放大,实现我们远离电脑的目标。在 App.ts 类中加入:

setFullScreen(flag: boolean): this {
    this.window.setFullScreen(flag);
    return this;
}

这样就可以在 Main 线程加入代码:

// 打开专注模式界面
ipcMain.on('show-focus-window', () => {
  if (mainApp == null) {
    mainApp = new App();
  }
  mainApp.setFullScreen(true);
});

// 关闭专注模式界面
ipcMain.on('hide-focus-window', () => {
  if (mainApp == null) {
    mainApp = new App();
  }
  mainApp.setFullScreen(false).show();
});

小结

这样,基本就实现了我们专注功能的基本逻辑了,对了在页面上如果触发了关闭按钮,则向 Main 线程发送关闭事件:

hideFocus() {
  this.$emit('update:visibleFocusView', this.sidebarVisible);
  window.electron.ipcRenderer.send('hide-focus-window');
},

这里,其实两个show-focus-windowhide-focus-window 可以写成一个,后续优化了,未完待续。

这个项目的所有记录基本放进专栏里了,欢迎查看: Electron+Vue3 MAC 版日历开发记录