底层用户
GitHub
commit
d41a0b050b
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.wuenci.com/meting/api/"
|
||||
|
||||
16
README.md
16
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
|
||||
|
||||
@ -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="無名,个人主页" />
|
||||
|
||||
@ -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