新增 建站日期显示及配置

.env

@@ -20,6 +20,10 @@ VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关
 ## 请各位大佬行行好，别再让我超量了
 VITE_WEATHER_KEY = "57eaea5833ff1616cfd1ff2c4cf9b58a"
 
+# 建站日期
+## 请按照 YYYY-MM-DD 格式填写
+VITE_SITE_START = "2020-10-24"
+
 # 歌曲 API 地址
 ## 备用：https://api.wuenci.com/meting/api/
 VITE_SONG_API = "https://api-meting.imsyy.top"

dev-dist/sw.js

@@ -1 +1 @@
-if(!self.define){let e,s={};const t=(t,i)=>(t=new URL(t+".js",i).href,s[t]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=t,e.onload=s,document.head.appendChild(e)}else e=t,importScripts(t),s()})).then((()=>{let e=s[t];if(!e)throw new Error(`Module ${t} didn’t register its module`);return e})));self.define=(i,n)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(s[o])return;let r={};const c=e=>t(e,o),l={module:{uri:o},exports:r,require:c};s[o]=Promise.all(i.map((e=>l[e]||c(e)))).then((e=>(n(...e),r)))}}define(["./workbox-082d0e8a"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"3ca0b8505b4bec776b69afdba2768812"},{revision:null,url:"index.html"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"),{allowlist:[/^\/$/]})),e.registerRoute(/(.*?)\.(js|css|woff2|woff|ttf)/,new e.CacheFirst({cacheName:"js-css-cache",plugins:[]}),"GET"),e.registerRoute(/(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/,new e.CacheFirst({cacheName:"image-cache",plugins:[]}),"GET")}));
+if(!self.define){let e,s={};const t=(t,i)=>(t=new URL(t+".js",i).href,s[t]||new Promise((s=>{if("document"in self){const e=document.createElement("script");e.src=t,e.onload=s,document.head.appendChild(e)}else e=t,importScripts(t),s()})).then((()=>{let e=s[t];if(!e)throw new Error(`Module ${t} didn’t register its module`);return e})));self.define=(i,n)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(s[o])return;let r={};const c=e=>t(e,o),l={module:{uri:o},exports:r,require:c};s[o]=Promise.all(i.map((e=>l[e]||c(e)))).then((e=>(n(...e),r)))}}define(["./workbox-082d0e8a"],(function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"3ca0b8505b4bec776b69afdba2768812"},{revision:null,url:"index.html"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("index.html"),{allowlist:[/^index.html$/]})),e.registerRoute(/(.*?)\.(js|css|woff2|woff|ttf)/,new e.CacheFirst({cacheName:"js-css-cache",plugins:[]}),"GET"),e.registerRoute(/(.*?)\.(png|jpe?g|svg|gif|bmp|psd|tiff|tga|eps)/,new e.CacheFirst({cacheName:"image-cache",plugins:[]}),"GET")}));

src/components/Set/index.vue

@@ -12,7 +12,15 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="其他设置" name="2">
-        <div>设置内容待增加</div>
+        <div class="item">
+          <span class="text">建站日期显示</span>
+          <el-switch
+            v-model="siteStartShow"
+            inline-prompt
+            :active-icon="CheckSmall"
+            :inactive-icon="CloseSmall"
+          />
+        </div>
       </el-collapse-item>
       <el-collapse-item title="其他设置" name="3">
         <div>设置内容待增加</div>
@@ -27,7 +35,11 @@
 <script setup>
 import { ref, onMounted, watch } from "vue";
 import { mainStore } from "@/store";
+import { CheckSmall, CloseSmall } from "@icon-park/vue-next";
+import { storeToRefs } from "pinia";
+
 const store = mainStore();
+const { siteStartShow } = storeToRefs(store);
 
 // 默认选中项
 let activeName = ref("1");
@@ -67,7 +79,16 @@ watch(
 
       .el-collapse-item__content {
         padding: 20px;
-
+        .item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          font-size: 14px;
+          .el-switch__core {
+            border-color: transparent;
+            background-color: #ffffff30;
+          }
+        }
         .bg-set {
           .el-radio-group {
             justify-content: space-between;

src/components/TimeCapsule/index.vue

@@ -40,21 +40,37 @@
       :stroke-width="20"
       :percentage="timeData.year.pass"
     />
+    <div v-if="startDateText && store.siteStartShow">
+      <span class="text" v-html="startDateText" />
+      <!-- <el-progress
+        :show-text="false"
+        :indeterminate="true"
+        :stroke-width="6"
+        :percentage="80"
+        :duration="2"
+      /> -->
+    </div>
   </div>
 </template>
 
 <script setup>
 import { onMounted, onBeforeUnmount, ref } from "vue";
 import { HourglassFull } from "@icon-park/vue-next";
-import { getTimeCapsule } from "@/utils/getTime.js";
+import { getTimeCapsule, siteDateStatistics } from "@/utils/getTime.js";
+import { mainStore } from "@/store";
+const store = mainStore();
 
 // 进度条数据
 let timeData = ref(getTimeCapsule());
+let startDate = ref(import.meta.env.VITE_SITE_START);
+let startDateText = ref(null);
 let timeInterval = null;
 
 onMounted(() => {
   timeInterval = setInterval(() => {
     timeData.value = getTimeCapsule();
+    if (startDate.value)
+      startDateText.value = siteDateStatistics(new Date(startDate.value));
   }, 1000);
 });
 

src/store/index.js

@@ -7,6 +7,7 @@ export const mainStore = defineStore("main", {
         return {
             innerWidth: null, // 当前窗口宽度
             coverType: "0", // 壁纸种类
+            siteStartShow: true, // 建站日期显示
             musicIsOk: false, // 音乐是否加载完成
             musicVolume: 0, // 音乐音量;
             musicOpenState: false, // 音乐面板开启状态
@@ -69,6 +70,6 @@ export const mainStore = defineStore("main", {
     persist: {
         key: 'data',
         storage: window.localStorage,
-        paths: ['coverType', 'musicVolume'],
+        paths: ['coverType', 'musicVolume', 'siteStartShow'],
     },
 })

src/utils/getTime.js

@@ -116,3 +116,19 @@ export const checkDays = () => {
         }
     }
 }
+
+// 建站日期统计
+export const siteDateStatistics = (startDate) => {
+    const currentDate = new Date();
+    const differenceInTime = currentDate.getTime() - startDate.getTime();
+    const differenceInDays = differenceInTime / (1000 * 3600 * 24);
+    const differenceInMonths = differenceInDays / 30;
+    const differenceInYears = differenceInMonths / 12;
+    if (differenceInYears >= 1) {
+        return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor(differenceInMonths % 12)} 月 ${Math.round(differenceInDays % 30)} 天`;
+    } else if (differenceInMonths >= 1) {
+        return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round(differenceInDays % 30)} 天`;
+    } else {
+        return `本站已经苟活了 ${Math.round(differenceInDays)} 天`;
+    }
+}