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服务 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"
# 建站日期 # 建站日期

4
package.json
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"
} }
} }

13
pnpm-lock.yaml
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:

159
public/loading/loading.css
View File

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

22
src/App.vue
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,

7
src/api/index.js
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();
};

69
src/components/Weather/index.vue
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) {
getAdcode(mainKey) getOtherWeather()
.then((res) => { .then((res) => {
if (res.status) { 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 = { 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 { })
.catch((err) => {
console.error("地理位置获取失败:" + err);
onError("地理位置获取失败"); onError("地理位置获取失败");
} });
}) }
.catch(() => {
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",

1
vite.config.js
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
View File

File diff suppressed because it is too large Load Diff