feat: 适配天气 API #162 #151

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

1
.env
View File

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

View File

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

View File

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

View File

@ -6,7 +6,7 @@
#loading-box .loading-left-bg, #loading-box .loading-left-bg,
#loading-box .loading-right-bg { #loading-box .loading-right-bg {
position: fixed; position: fixed;
z-index: 999998; z-index: 999;
width: 50%; width: 50%;
height: 100%; height: 100%;
background-color: #515151e0; background-color: #515151e0;
@ -84,21 +84,30 @@
left: 0%; left: 0%;
top: 0%; top: 0%;
animation: rotate-one 1s linear infinite; animation: rotate-one 1s linear infinite;
border-bottom: 3px solid #EFEFFA; border-bottom: 3px solid #efeffa;
} }
.inner.two { .inner.two {
right: 0%; right: 0%;
top: 0%; top: 0%;
animation: rotate-two 1s linear infinite; animation: rotate-two 1s linear infinite;
border-right: 3px solid #EFEFFA; border-right: 3px solid #efeffa;
} }
.inner.three { .inner.three {
right: 0%; right: 0%;
bottom: 0%; bottom: 0%;
animation: rotate-three 1s linear infinite; animation: rotate-three 1s linear infinite;
border-top: 3px solid #EFEFFA; border-top: 3px solid #efeffa;
}
noscript {
z-index: 1000;
position: absolute;
display: flex;
justify-content: center;
width: 100%;
margin-top: 26px;
} }
@keyframes rotate-one { @keyframes rotate-one {

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)}}

View File

@ -83,11 +83,10 @@ onMounted(() => {
window.addEventListener("mousedown", (event) => { window.addEventListener("mousedown", (event) => {
if (event.button == 1) { if (event.button == 1) {
store.backgroundShow = !store.backgroundShow; store.backgroundShow = !store.backgroundShow;
if (store.backgroundShow) { ElMessage({
ElMessage("已开启壁纸展示状态"); message: `${store.backgroundShow ? "开启" : "退出"}壁纸展示状态`,
} else { grouping: true,
ElMessage("已退出壁纸展示状态"); });
}
} }
}); });
@ -96,18 +95,19 @@ onMounted(() => {
window.addEventListener("resize", getWidth); window.addEventListener("resize", getWidth);
// //
let styleTitle1 = "font-size: 20px;font-weight: 600;color: rgb(244,167,89);"; const styleTitle1 =
let styleTitle2 = "font-size:12px;color: rgb(244,167,89);"; "font-size: 20px;font-weight: 600;color: rgb(244,167,89);";
let styleContent = "color: rgb(30,152,255);"; const styleTitle2 = "font-size:12px;color: rgb(244,167,89);";
let title1 = "無名の主页"; const styleContent = "color: rgb(30,152,255);";
let title2 = ` 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( console.info(
`%c${title1} %c${title2} %c${content}`, `%c${title1} %c${title2} %c${content}`,
styleTitle1, styleTitle1,

View File

@ -67,3 +67,10 @@ export const getWeather = async (key, city) => {
); );
return await res.json(); 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();
};

View File

@ -6,7 +6,13 @@
<span>{{ weatherData.adCode.city }}&nbsp;</span> <span>{{ weatherData.adCode.city }}&nbsp;</span>
<span>{{ weatherData.weather.weather }}&nbsp;</span> <span>{{ weatherData.weather.weather }}&nbsp;</span>
<span>{{ weatherData.weather.temperature }}</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> <span class="sm-hidden">{{ weatherData.weather.windpower }}&nbsp;</span>
</div> </div>
<div class="weather" v-else> <div class="weather" v-else>
@ -16,7 +22,7 @@
<script setup> <script setup>
import { onMounted, reactive, h } from "vue"; import { onMounted, reactive, h } from "vue";
import { getAdcode, getWeather } from "@/api"; import { getAdcode, getWeather, getOtherWeather } from "@/api";
import { Error } from "@icon-park/vue-next"; import { Error } from "@icon-park/vue-next";
// Key // Key
@ -39,10 +45,29 @@ const weatherData = reactive({
// //
const getWeatherData = () => { const getWeatherData = () => {
// //
if (!mainKey) return onError("请配置天气 Key"); 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) getAdcode(mainKey)
.then((res) => { .then((res) => {
if (res.status) {
weatherData.adCode = { weatherData.adCode = {
city: res.city, city: res.city,
adcode: res.adcode, adcode: res.adcode,
@ -50,33 +75,29 @@ const getWeatherData = () => {
// //
getWeather(mainKey, weatherData.adCode.adcode) getWeather(mainKey, weatherData.adCode.adcode)
.then((res) => { .then((res) => {
if (res.status) {
weatherData.weather = { weatherData.weather = {
weather: res.lives[0].weather, weather: res.lives[0].weather,
temperature: res.lives[0].temperature, temperature: res.lives[0].temperature,
winddirection: res.lives[0].winddirection, winddirection: res.lives[0].winddirection,
windpower: res.lives[0].windpower, windpower: res.lives[0].windpower,
}; };
} else {
onError("天气信息获取失败");
}
}) })
.catch(() => { .catch((err) => {
console.error("天气信息获取失败:" + err);
onError("天气信息获取失败"); onError("天气信息获取失败");
}); });
} else {
onError("地理位置获取失败");
}
}) })
.catch(() => { .catch((err) => {
console.error("地理位置获取失败:" + err);
onError("地理位置获取失败"); onError("地理位置获取失败");
}); });
}
}; };
// //
const onError = (message) => { const onError = (message) => {
ElMessage({ ElMessage({
message: message, message,
icon: h(Error, { icon: h(Error, {
theme: "filled", theme: "filled",
fill: "#efefef", fill: "#efefef",

View File

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

3515
yarn.lock Normal file

File diff suppressed because it is too large Load Diff