caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #76 from imsyy/dev

Browse Source 
Dev
This commit is contained in:
底层用户 2023-02-06 13:37:46 +08:00 committed by GitHub
commit d41a0b050b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 78 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

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

16
README.md
View File

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

1
index.html
View File

@ -4,6 +4,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*"> <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="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="一个默默无闻的主页" /> <meta name="description" content="一个默默无闻的主页" />
<meta name="keywords" content="無名,个人主页" /> <meta name="keywords" content="無名,个人主页" />

25
src/components/Set/index.vue
View File

@ -12,7 +12,15 @@
</div> </div>
</el-collapse-item> </el-collapse-item>
<el-collapse-item title="其他设置" name="2"> <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>
<el-collapse-item title="其他设置" name="3"> <el-collapse-item title="其他设置" name="3">
<div>设置内容待增加</div> <div>设置内容待增加</div>
@ -27,7 +35,11 @@
<script setup> <script setup>
import { ref, onMounted, watch } from "vue"; import { ref, onMounted, watch } from "vue";
import { mainStore } from "@/store"; import { mainStore } from "@/store";
import { CheckSmall, CloseSmall } from "@icon-park/vue-next";
import { storeToRefs } from "pinia";
const store = mainStore(); const store = mainStore();
const { siteStartShow } = storeToRefs(store);
// 默认选中项 // 默认选中项
let activeName = ref("1"); let activeName = ref("1");
@ -67,7 +79,16 @@ watch(
.el-collapse-item__content { .el-collapse-item__content {
padding: 20px; 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 { .bg-set {
.el-radio-group { .el-radio-group {
justify-content: space-between; justify-content: space-between;

18
src/components/TimeCapsule/index.vue
View File

@ -40,21 +40,37 @@
:stroke-width="20" :stroke-width="20"
:percentage="timeData.year.pass" :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> </div>
</template> </template>
<script setup> <script setup>
import { onMounted, onBeforeUnmount, ref } from "vue"; import { onMounted, onBeforeUnmount, ref } from "vue";
import { HourglassFull } from "@icon-park/vue-next"; 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 timeData = ref(getTimeCapsule());
let startDate = ref(import.meta.env.VITE_SITE_START);
let startDateText = ref(null);
let timeInterval = null; let timeInterval = null;
onMounted(() => { onMounted(() => {
timeInterval = setInterval(() => { timeInterval = setInterval(() => {
timeData.value = getTimeCapsule(); timeData.value = getTimeCapsule();
if (startDate.value)
startDateText.value = siteDateStatistics(new Date(startDate.value));
}, 1000); }, 1000);
}); });

3
src/store/index.js
View File

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

16
src/utils/getTime.js
View File

@ -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)} 天`;
}
}