Merge pull request #76 from imsyy/dev

Dev
imsyy · Feb 6, 2023 · d41a0b0 · d41a0b0 · vercel · Feb 6, 2023
2 parents 7b7c793 + cee5a05
commit d41a0b0
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 5 deletions.
diff --git a/.env b/.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.wuenci.com/meting/api/"

diff --git a/README.md b/README.md
@@ -31,12 +31,26 @@
 
 ### 部署
 
+* **安装** [node.js](https://nodejs.org/zh-cn/) **环境**
+
+  > node > 16.16.0
+  > npm > 8.15.0
+  
+* 然后以 **管理员权限** 运行 `cmd` 终端，并 `cd` 到 项目根目录
+* 在 `终端` 中输入：
+
 ```bash
+# 安装依赖
 yarn install
+
+# 预览
 yarn dev
+
+# 构建
 yarn build
 ```
-> 构建完成后，可将 `dist` 文件夹下的文件上传至服务器，也可使用 `Vercel` 等托管平台一键导入并自动部署
+> 构建完成后，静态资源会在 **`dist` 目录** 中生成，可将 **`dist` 文件夹下的文件**上传至服务器，也可使用 `Vercel` 等托管平台一键导入并自动部署
+
 ### 天气
 
 天气及地区获取需要 `高德开放平台` 相关 API

diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="Access-Control-Allow-Origin" content="*">
+  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="一个默默无闻的主页" />
   <meta name="keywords" content="無名,个人主页" />

diff --git a/src/components/Set/index.vue b/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;

diff --git a/src/components/TimeCapsule/index.vue b/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);
 });
 

diff --git a/src/store/index.js b/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'],
     },
 })
diff --git a/src/utils/getTime.js b/src/utils/getTime.js
@@ -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)} 天`;
+    }
 }