Electron+Vue3 MAC 版日历开发记录(17)——使用 Naive UI重构黄历页面-一一网

这是我参与更文挑战的第17天，活动详情查看：更文挑战

把昨天的扫尾工作做完，整个 Setting 页面替换了，完整代码如下：

 <template>
  <n-space vertical>
    <h4>显示节假日</h4>
    <n-switch
      v-model:value="inputSwitchFestivalsModel"
      size="large"
      @update-value="updateFestivalsModel"
    />
    <h4>显示天气预报</h4>
    <n-switch
      v-model:value="inputSwitchWeatherModel"
      size="large"
      @update-value="updateWeatherModel"
    />
    <n-space
      v-if="inputSwitchWeatherModel"
      inline
    >
      <n-input-number
        v-model:value="longitude"
        :min="-180"
        :max="180"
        :show-button="false"
        placeholder="经度"
        @update:value="changeLocalLocation"
      />
      <n-input-number
        v-model:value="latitude"
        :min="-90"
        :max="90"
        :show-button="false"
        placeholder="纬度"
        @update:value="changeLocalLocation"
      />
    </n-space>
    <n-divider dashed>
      专注设置
    </n-divider>
    <n-space vertical>
      <n-slider
        v-model:value="focus_time"
        :step="5"
        :min="5"
        :max="120"
      />
      <n-button
        type="primary"
        size="large"
        @click="focus"
      >
        <template #icon>
          <n-icon>
            <caret-right-icon />
          </n-icon>
        </template>
        {{ focusLabel }}
      </n-button>
    </n-space>
  </n-space>
</template>

<script lang="ts">
import { defineComponent} from 'vue';
import { useStore } from '/@/store';
import { NSpace, NSwitch, NInputNumber, NButton, NIcon, NSlider, NDivider } from 'naive-ui';
import { CaretRight as CaretRightIcon } from '@vicons/fa';

export default defineComponent({
  name: 'SettingSub',
  components: {
    NSpace,
    NSwitch,
    NInputNumber,
    NButton,
    NIcon,
    CaretRightIcon,
    NSlider,
    NDivider,
  },
  props: {
    changeShowFestivals: Boolean,
    changeShowWeather: Boolean,
    location: Object,
  },
  emits: [
    'focusClick',
    'update:visibleFullSetting',
    'update:changeShowFestivals',
    'update:changeShowWeather',
    'update:location',
  ],
  setup() {
    const store = useStore();
    return {
      store,
    };
  },
  data() {
    return {
      inputSwitchFestivalsModel: this.changeShowFestivals,
      inputSwitchWeatherModel: this.changeShowWeather,
      longitude: this.location?.longitude,
      latitude: this.location?.latitude,
      focus_time: 40,
    };
  },
  computed: {
    // 计算属性的 getter
    focusLabel(): string {
      return '开始专注' + this.focus_time + '分钟';
    },
  },
  mounted() {
    this.focus_time = this.store.state.focusTime;
  },
  methods: {
    updateFestivalsModel(value: boolean): void {
      this.$emit('update:changeShowFestivals', value);
    },
    updateWeatherModel(value: boolean): void {
      this.$emit('update:changeShowWeather', value);
    },
    changeLocalLocation(): void {
      this.$emit('update:location', {
        'longitude': this.longitude,
        'latitude': this.latitude,
      });
    },
    focus(): void {
      this.store.commit('changeFocusTime', this.focus_time);
      this.$emit('focusClick');
      window.electron.ipcRenderer.send('show-focus-window');
    },
  },
});
</script>
复制代码

这里我用的 NSwitch 想把经纬度的输入框隐藏了，用的 v-show 发现我点「显示农历」也能把这个隐藏去掉，这是个 bug，后来我改为用 v-if：

<n-space
  v-if="inputSwitchWeatherModel"
  inline
>
  ...
</n-space>
复制代码

整体感觉看起来还不错的样子：

其中我用的「抽屉」组件代替之前的 Sidebar 组件，但 NDrawer 组件没有「关闭按钮」功能，只能通过上层点击，所以把这个放在了 Main 主界面。

<n-drawer
  v-model:show="visibleFullSetting"
  :width="drawerWidth"
  placement="left"
>
  <n-drawer-content title="设置">
    <setting-sub
      v-model:changeShowWeather="changeShowWeather"
      v-model:changeShowFestivals="changeShowFestivals"
      v-model:location="location"
      @focusClick="focusClick"
    />
  </n-drawer-content>
</n-drawer>
复制代码

黄历页面

第二个开始调整的「黄历页面」。动 ta 的理由比较简单，因为 ta 使用了布局了。

我先放改好的代码出来：

<template>
  <n-layout has-sider :style="layoutStyle">
    <n-layout-sider bordered :width="150">
      <n-grid x-gap="6" :cols="2" style="height: 100%;">
        <n-gi>
          <div class="nongliString">
            {{ lunarData.nongliString }}
          </div>
        </n-gi>
        <n-gi style="padding: 40px 0;">
          <div
            v-for="item in lunarData.ganzhi"
            :key="item"
            class="onecn"
          >
            {{ item }}
          </div>
        </n-gi>
      </n-grid>
    </n-layout-sider>
    <n-layout :style="layoutStyle">
      <n-layout-header bordered>
        <div>
          <n-tag
            type="success"
          >
            宜
          </n-tag>
          <n-tag
            v-for="item in lunarData.yi"
            :key="item"
            type="success"
          >
            {{ item }}
          </n-tag>
        </div>
      </n-layout-header>
      <n-layout-content content-style="padding: 24px; ">
        {{ lunarData.yangliString }}
      </n-layout-content>
      <n-layout-footer bordered position="absolute">
        <div>
          <n-tag
            type="error"
            round
          >
            忌
          </n-tag>
          <n-tag
            v-for="item in lunarData.ji"
            :key="item"
            type="error"
            round
          >
            {{ item }}
          </n-tag>
        </div>
      </n-layout-footer>
    </n-layout>
  </n-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { NGrid, NGi, NLayout, NLayoutSider, NLayoutHeader, NLayoutContent, NLayoutFooter, NTag } from 'naive-ui';
import LunarService from '../../../services/LunarService';

export default defineComponent({
  name: 'DateViewSub',
  components: {
    NGrid,
    NGi,
    NLayout,
    NLayoutSider,
    NLayoutHeader,
    NLayoutContent,
    NLayoutFooter,
    NTag,
  },
  props: {
    date: Date,
    weather: Object,
  },
  data() {
    return {
      layoutStyle: "height: " + (Number(import.meta.env.VITE_APP_HEIGHT) - 100) + "px;",
    };
  },
  setup(props) {
    const lunarService = ref(new LunarService(props.date));
    const lunarData =  lunarService.value.getDateViewDate();
    return {
      lunarData,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "~/styles/default.scss";

.nongliString {
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  margin: 0 auto;
  height: 100%;
  width: 2.5rem;
  font-size: 2.5em;
  color: #000;
}

.onecn {
  display: flex;
  /*实现垂直居中*/
  align-items: center;
  margin: 0 auto;
  width: 1.4rem;
  height: 33%;
  font-size: 1.4rem;
  color: #000;
}

.n-layout-sider {
  width: 150px;
}
.n-layout-header {
  padding: 24px;
}
.n-layout-footer {
  padding: 24px;
}

</style>
复制代码

这里先主要用的是：NLayout 布局组件，左右结构：