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

feat: 适配天气 API #162 #151

Browse Source
This commit is contained in:
imsyy 2023-07-03 17:51:58 +08:00
parent 7048a134be
commit 9d2290d694
10 changed files with 3677 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.env
View File

@ -28,6 +28,7 @@ VITE_DESC_TEXT_OTHER = "哎呀，这都被你发现了（ 再点击一次可关
## 请前往 高德开放平台注册 Web服务 Key
## 请注意不是 Web端 (JS API)，免费申请，每日上限 5000 次
## 此处提供的服务可能会超量从而无法访问，请自行申请！请自行申请！请自行申请！
## 若此处设为空则调用 教书先生 API https://api.oioweb.cn/doc/weather/GetWeather
VITE_WEATHER_KEY = "6c13af6fc30868bee488faf2cc652ab4"
# 建站日期

4
package.json
View File

@ -4,7 +4,7 @@
"github": "https://github.com/imsyy/home",
"home": "https://imsyy.top",
"private": true,
"version": "4.0.4",
"version": "4.0.5",
"type": "module",
"scripts": {
"dev": "vite --host",
@ -33,7 +33,7 @@
"unplugin-auto-import": "^0.11.2",
"unplugin-vue-components": "^0.22.8",
"vite": "^3.1.0",
"vite-plugin-html": "^3.0.6",
"vite-plugin-html": "^3.2.0",
"vite-plugin-pwa": "^0.14.1"
}
}

13
pnpm-lock.yaml
View File

@ -65,8 +65,8 @@ devDependencies:
specifier: ^3.1.0
version: 3.1.0(sass@1.55.0)(terser@5.16.1)
vite-plugin-html:
specifier: ^3.0.6
version: 3.0.6(vite@3.1.0)
specifier: ^3.2.0
version: 3.2.0(vite@3.1.0)
vite-plugin-pwa:
specifier: ^0.14.1
version: 0.14.1(vite@3.1.0)(workbox-build@6.6.0)(workbox-window@6.6.0)
@ -2890,7 +2890,7 @@ packages:
he: 1.2.0
param-case: 3.0.4
relateurl: 0.2.7
terser: 5.16.1
terser: 5.18.1
dev: true
/idb@7.1.1:
@ -3563,7 +3563,7 @@ packages:
jest-worker: 26.6.2
rollup: 2.79.1
serialize-javascript: 4.0.0
terser: 5.16.1
terser: 5.18.1
dev: true
/rollup@2.78.1:
@ -3841,7 +3841,6 @@ packages:
acorn: 8.9.0
commander: 2.20.3
source-map-support: 0.5.21
dev: false
/to-fast-properties@2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
@ -4011,8 +4010,8 @@ packages:
dependencies:
punycode: 2.3.0
/vite-plugin-html@3.0.6(vite@3.1.0):
resolution: {integrity: sha512-B6ZAufvqUqdfPhcV+El8NNI3qV0d3ZntIur2UnP4tcHBV/O2d+6wHF79bJWuqR4WsvmsV7dejCNS3rAYFCisWw==}
/vite-plugin-html@3.2.0(vite@3.1.0):
resolution: {integrity: sha512-2VLCeDiHmV/BqqNn5h2V+4280KRgQzCFN47cst3WiNK848klESPQnzuC3okH5XHtgwHH/6s1Ho/YV6yIO0pgoQ==}
peerDependencies:
vite: '>=2.0.0'
dependencies:

161
public/loading/loading.css
View File

@ -1,132 +1,141 @@
* {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
#loading-box .loading-left-bg,
#loading-box .loading-right-bg {
position: fixed;
z-index: 999998;
width: 50%;
height: 100%;
background-color: #515151e0;
transition: all 0.75s cubic-bezier(0.42, 0, 0, 1.01);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
position: fixed;
z-index: 999;
width: 50%;
height: 100%;
background-color: #515151e0;
transition: all 0.75s cubic-bezier(0.42, 0, 0, 1.01);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
#loading-box .loading-right-bg {
right: 0;
right: 0;
}
#loading-box>.spinner-box {
position: fixed;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
#loading-box > .spinner-box {
position: fixed;
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
#loading-box .spinner-box .loading-word {
position: absolute;
color: #ffffff;
font-size: 0.95rem;
transform: translateY(64px);
text-align: center;
position: absolute;
color: #ffffff;
font-size: 0.95rem;
transform: translateY(64px);
text-align: center;
}
.loading-title {
font-size: 1.25rem;
margin: 20px 10px 4px 10px;
font-size: 1.25rem;
margin: 20px 10px 4px 10px;
}
#loading-box .spinner-box .configure-core {
width: 100%;
height: 100%;
background-color: #37474f;
width: 100%;
height: 100%;
background-color: #37474f;
}
/* 加载完成 */
.loaded .loading-left-bg {
transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
.loaded .loading-right-bg {
transform: translate(100%, 0);
transform: translate(100%, 0);
}
.loaded .spinner-box {
display: none !important;
display: none !important;
}
.loader {
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
position: absolute;
top: calc(50% - 32px);
left: calc(50% - 32px);
width: 64px;
height: 64px;
border-radius: 50%;
perspective: 800px;
transition: all 0.7s cubic-bezier(0.42, 0, 0, 1.01);
}
.inner {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA;
left: 0%;
top: 0%;
animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #efeffa;
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA;
right: 0%;
top: 0%;
animation: rotate-two 1s linear infinite;
border-right: 3px solid #efeffa;
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA;
right: 0%;
bottom: 0%;
animation: rotate-three 1s linear infinite;
border-top: 3px solid #efeffa;
}
noscript {
z-index: 1000;
position: absolute;
display: flex;
justify-content: center;
width: 100%;
margin-top: 26px;
}
@keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}

2
public/loading/loading.min.css vendored
View File

@ -1 +1 @@
*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999998;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}
*{margin:0;padding:0}#loading-box .loading-left-bg,#loading-box .loading-right-bg{position:fixed;z-index:999;width:50%;height:100%;background-color:#515151e0;transition:all .75s cubic-bezier(.42,0,0,1.01);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}#loading-box .loading-right-bg{right:0}#loading-box>.spinner-box{position:fixed;z-index:999999;display:flex;justify-content:center;align-items:center;width:100%;height:100vh}#loading-box .spinner-box .loading-word{position:absolute;color:#fff;font-size:.95rem;transform:translateY(64px);text-align:center}.loading-title{font-size:1.25rem;margin:20px 10px 4px 10px}#loading-box .spinner-box .configure-core{width:100%;height:100%;background-color:#37474f}.loaded .loading-left-bg{transform:translate(-100%,0)}.loaded .loading-right-bg{transform:translate(100%,0)}.loaded .spinner-box{display:none!important}.loader{position:absolute;top:calc(50% - 32px);left:calc(50% - 32px);width:64px;height:64px;border-radius:50%;perspective:800px;transition:all .7s cubic-bezier(.42,0,0,1.01)}.inner{position:absolute;box-sizing:border-box;width:100%;height:100%;border-radius:50%}.inner.one{left:0;top:0;animation:rotate-one 1s linear infinite;border-bottom:3px solid #efeffa}.inner.two{right:0;top:0;animation:rotate-two 1s linear infinite;border-right:3px solid #efeffa}.inner.three{right:0;bottom:0;animation:rotate-three 1s linear infinite;border-top:3px solid #efeffa}noscript{z-index:1000;position:absolute;display:flex;justify-content:center;width:100%;margin-top:26px}@keyframes rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}}@keyframes rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0)}100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}}@keyframes rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0)}100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}}

28
src/App.vue
View File

@ -83,11 +83,10 @@ onMounted(() => {
window.addEventListener("mousedown", (event) => {
if (event.button == 1) {
store.backgroundShow = !store.backgroundShow;
if (store.backgroundShow) {
ElMessage("已开启壁纸展示状态");
} else {
ElMessage("已退出壁纸展示状态");
}
ElMessage({
message: `已${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`,
grouping: true,
});
}
});
@ -96,18 +95,19 @@ onMounted(() => {
window.addEventListener("resize", getWidth);
// 控制台输出
let styleTitle1 = "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
let styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
let styleContent = "color: rgb(30,152,255);";
let title1 = "無名の主页";
let title2 = `
const styleTitle1 =
"font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
const styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
const styleContent = "color: rgb(30,152,255);";
const title1 = "無名の主页";
const title2 = `
_____ __ __ _______ ____ __
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
| | | |\\/| |\\___ \\ \\ / \\ /
_| |_| | | |____) | | | | |
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
| | | |\\/| |\\___ \\ \\ / \\ /
_| |_| | | |____) | | | | |
|_____|_| |_|_____/ |_| |_|`;
let content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
const content = `\n\n版本: ${config.version}\n主页: ${config.home}\nGithub: ${config.github}`;
console.info(
`%c${title1} %c${title2} %c${content}`,
styleTitle1,

7
src/api/index.js
View File

@ -67,3 +67,10 @@ export const getWeather = async (key, city) => {
);
return await res.json();
};
// 获取教书先生天气 API
// https://api.oioweb.cn/doc/weather/GetWeather
export const getOtherWeather = async () => {
const res = await fetch("https://api.oioweb.cn/api/weather/GetWeather");
return await res.json();
};

71
src/components/Weather/index.vue
View File

@ -6,7 +6,13 @@
<span>{{ weatherData.adCode.city }}&nbsp;</span>
<span>{{ weatherData.weather.weather }}&nbsp;</span>
<span>{{ weatherData.weather.temperature }}℃</span>
<span class="sm-hidden">&nbsp;{{ weatherData.weather.winddirection }}风&nbsp;</span>
<span class="sm-hidden">
&nbsp;{{
weatherData.weather.winddirection?.endsWith("风")
? weatherData.weather.winddirection
: weatherData.weather.winddirection + "风"
}}&nbsp;
</span>
<span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;级</span>
</div>
<div class="weather" v-else>
@ -16,7 +22,7 @@
<script setup>
import { onMounted, reactive, h } from "vue";
import { getAdcode, getWeather } from "@/api";
import { getAdcode, getWeather, getOtherWeather } from "@/api";
import { Error } from "@icon-park/vue-next";
// 高德开发者 Key
@ -39,10 +45,29 @@ const weatherData = reactive({
// 获取天气数据
const getWeatherData = () => {
// 获取地理位置信息
if (!mainKey) return onError("请配置天气 Key");
getAdcode(mainKey)
.then((res) => {
if (res.status) {
if (!mainKey) {
getOtherWeather()
.then((res) => {
console.log(res);
const data = res.result;
weatherData.adCode = {
city: data.city.name,
adcode: data.city.cityId,
};
weatherData.weather = {
weather: data.condition.condition,
temperature: data.condition.temp,
winddirection: data.condition.windDir,
windpower: data.condition.windLevel,
};
})
.catch((err) => {
console.error("天气信息获取失败:" + err);
onError("天气信息获取失败");
});
} else {
getAdcode(mainKey)
.then((res) => {
weatherData.adCode = {
city: res.city,
adcode: res.adcode,
@ -50,33 +75,29 @@ const getWeatherData = () => {
// 获取天气信息
getWeather(mainKey, weatherData.adCode.adcode)
.then((res) => {
if (res.status) {
weatherData.weather = {
weather: res.lives[0].weather,
temperature: res.lives[0].temperature,
winddirection: res.lives[0].winddirection,
windpower: res.lives[0].windpower,
};
} else {
onError("天气信息获取失败");
}
weatherData.weather = {
weather: res.lives[0].weather,
temperature: res.lives[0].temperature,
winddirection: res.lives[0].winddirection,
windpower: res.lives[0].windpower,
};
})
.catch(() => {
.catch((err) => {
console.error("天气信息获取失败:" + err);
onError("天气信息获取失败");
});
} else {
})
.catch((err) => {
console.error("地理位置获取失败:" + err);
onError("地理位置获取失败");
}
})
.catch(() => {
onError("地理位置获取失败");
});
});
}
};
// 报错信息
const onError = (message) => {
ElMessage({
message: message,
message,
icon: h(Error, {
theme: "filled",
fill: "#efefef",
@ -89,4 +110,4 @@ onMounted(() => {
// 调用获取天气
getWeatherData();
});
</script>
</script>

1
vite.config.js
View File

@ -32,7 +32,6 @@ export default ({
}),
createHtmlPlugin({
minify: true,
template: 'index.html',
inject: {
data: {
logo: loadEnv(mode, process.cwd()).VITE_SITE_LOGO,

3515
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff