新增 建站日期显示及配置
This commit is contained in:
parent
c4c040402b
commit
854cebff03
4
.env
4
.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"
|
||||
|
@ -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")}));
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
});
|
||||
|
||||
|
@ -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'],
|
||||
},
|
||||
})
|
@ -115,4 +115,20 @@ 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)} 天`;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user