feat: 完善首页内容

src/views/IndexView/IndexView.vue

@@ -1,9 +1,115 @@
 <template>
-  <div class="index-view"></div>
+  <div class="index-view flex-col">
+    <div class="app-view-header">
+      <span>{{ appDesc }}</span>
+    </div>
+    <div class="app-view-content">
+
+      <div class="date-time">
+        <div class="time-info">{{ timeInfo.time }}</div>
+        <div class="date-info">
+          <span>{{ timeInfo.date1 }}</span>
+          <span>{{ timeInfo.week }}</span>
+          <span>{{ timeInfo.date2 }}</span>
+          <span v-show="timeInfo.festival">{{ timeInfo.festival }}</span>
+          <span v-show="timeInfo.solarTerm">{{ timeInfo.solarTerm }}</span>
+        </div>
+      </div>
+
+    </div>
+  </div>
 </template>
 
 <script setup>
+import {
+  description as appDesc,
+} from '@package-json';
+
+import {
+  reactive, ref,
+  onBeforeMount, onBeforeUnmount,
+} from 'vue';
+
+import lunisolar from 'lunisolar';
+
+/** 当前时间信息 */
+const timeInfo = reactive({
+
+  /** 公历 */
+  date1: '',
+
+  /** 阴历 */
+  date2: '',
+
+  /** 节日 */
+  festival: '',
+
+  /** 节气 */
+  solarTerm: '',
+
+  /** 时间 */
+  time: '',
+
+  /** 星期 */
+  week: '',
+
+});
+
+/** 时间更新定时器 */
+const timeUpdater = ref(null);
+
+/** 更新时间信息 */
+function updateTime() {
+
+  let date = lunisolar();
+
+  let { markers, solarTerm } = date;
+
+  // 公历
+  timeInfo.date1 = date.format('YYYY 年 M 月 D 日');
+  // 阴历
+  timeInfo.date2 = date.format('lMlD');
+  // 节日
+  timeInfo.festival = markers.list.map(v => v.name).join(' & ');
+  // 节气
+  timeInfo.solarTerm = solarTerm ? solarTerm.name : '';
+  // 时间
+  timeInfo.time = date.format('HH:mm:ss');
+  // 星期
+  timeInfo.week = date.format('dddd');
+
+}
+
+onBeforeMount(() => {
+  updateTime();
+  timeUpdater.value = setInterval(updateTime, 1000);
+});
+
+onBeforeUnmount(() => {
+  clearInterval(timeUpdater.value);
+});
 </script>
 
 <style lang="less" scoped>
+.app-view-content {
+  display: flex;
+}
+
+.date-time {
+  margin: auto;
+  text-align: center;
+
+  .time-info {
+    font-size: 80px;
+  }
+
+  .date-info {
+    margin-bottom: 160px;
+    font-size: 16px;
+
+    span:not(:first-child)::before {
+      content: " / ";
+    }
+  }
+}
 </style>