From 9aaa9bfea6aef51d2b0ca16d68d40a8d7463474f Mon Sep 17 00:00:00 2001 From: imsyy Date: Thu, 10 Aug 2023 17:48:56 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8E=BB=E9=99=A4=E8=87=AA=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E5=BC=B9=E7=AA=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 8 +- README.md | 62 +++++---- src/App.vue | 2 - src/assets/defaultEngine.json | 2 +- src/components/AllFunc/AllBox.vue | 6 +- src/components/AllFunc/AllFunc.vue | 7 + src/components/AllFunc/AllSet.vue | 83 +++++++++-- src/components/Notification.vue | 169 ----------------------- src/components/SearchInput/SearchInp.vue | 1 - src/components/WeatherTime.vue | 2 +- src/main.js | 3 - src/stores/setData.js | 2 + src/stores/statusData.js | 2 +- src/style/global.scss | 47 +++++++ src/utils/timeTools.js | 4 +- 15 files changed, 172 insertions(+), 228 deletions(-) delete mode 100644 src/components/Notification.vue diff --git a/.env b/.env index 9c5d227..14c4aa2 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ -# 搜索框提示词 -VITE_INPUT_TIP = "想要搜点什么" - # 进入欢迎词 -VITE_WELCOME_TEXT = "欢迎访问本站" \ No newline at end of file +VITE_WELCOME_TEXT = "欢迎访问本站" + +# 搜索框提示词 +VITE_INPUT_TIP = "想要搜点什么" \ No newline at end of file diff --git a/README.md b/README.md index 68f3bfe..954e7a9 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ > 重构中，尚未完成 ### Demo + > 由于 `CDN` 缓存原因，查看最新效果可能需要 `Ctrl` + `F5` 强制刷新浏览器缓存 - [Snavigation](https://nav.imsyy.top) @@ -21,57 +22,62 @@ - [x] 网站背景自定义 - [x] 数据备份及恢复 - [x] 移动端适配 -* [ ] 切换搜索引擎 -* [ ] 设置 -* [ ] 备份 +- [x] 切换搜索引擎 +- [x] 设置 +- [x] 备份 + * [ ] 一言 * [ ] 书签 * [ ] 备忘 +### 配置 + +修改项目的部分默认设置可前往根目录下的 `.env` 文件中修改 + ### 部署 -* **安装** [node.js](https://nodejs.org/zh-cn/) **环境** +- **安装** [node.js](https://nodejs.org/zh-cn/) **环境** > node > 16.16.0 > npm > 8.15.0 - -* 然后以 **管理员权限** 运行 `cmd` 终端，并 `cd` 到 项目根目录 -* 在 `终端` 中输入： -```bash -# 安装 pnpm -npm install -g pnpm +- 然后以 **管理员权限** 运行 `cmd` 终端，并 `cd` 到 项目根目录 +- 在 `终端` 中输入： -# 安装依赖 -pnpm install + ```bash + # 安装 pnpm + npm install -g pnpm -# 开发 -pnpm dev + # 安装依赖 + pnpm install -# 构建 -pnpm build -``` -> 构建完成后，静态资源会在 **`dist` 目录** 中生成，可将 **`dist` 文件夹下的文件**上传至服务器， -> 也可使用 [Vercel](https://vercel.com/) 或 [Cloudflare Pages](https://pages.cloudflare.com/) 等托管平台一键自动部署 + # 开发 + pnpm dev + # 构建 + pnpm build + ``` + + > 构建完成后，静态资源会在 **`dist` 目录** 中生成，可将 **`dist` 文件夹下的文件**上传至服务器， + > 也可使用 [Vercel](https://vercel.com/) 或 [Cloudflare Pages](https://pages.cloudflare.com/) 等托管平台一键自动部署 ### 技术栈 -* [Vue](https://cn.vuejs.org/) -* [Vite](https://vitejs.cn/vite3-cn/) -* [Pinia](https://pinia.vuejs.org/zh/) -* [iconfont](https://www.iconfont.cn/) +- [Vue](https://cn.vuejs.org/) +- [Vite](https://vitejs.cn/vite3-cn/) +- [Pinia](https://pinia.vuejs.org/zh/) +- [iconfont](https://www.iconfont.cn/) ### API -* [小歪 API](https://api.ixiaowai.cn/) -* [缙哥哥 API](https://www.dujin.org/3618.html) -* [Hitokoto 一言](https://hitokoto.cn/) +- [小歪 API](https://api.ixiaowai.cn/) +- [缙哥哥 API](https://www.dujin.org/3618.html) +- [Hitokoto 一言](https://hitokoto.cn/) ### 鸣谢 本站部分样式及功能参考自 -* [青柠起始页](https://limestart.cn/) +- [青柠起始页](https://limestart.cn/) -   +   diff --git a/src/App.vue b/src/App.vue index a62306d..e5175d6 100644 --- a/src/App.vue +++ b/src/App.vue @@ -57,8 +57,6 @@ - -
diff --git a/src/assets/defaultEngine.json b/src/assets/defaultEngine.json index 34269a2..46f46ed 100644 --- a/src/assets/defaultEngine.json +++ b/src/assets/defaultEngine.json @@ -12,7 +12,7 @@ "icon": "bing" }, "google": { - "name": "谷歌", + "name": "Google", "url": "https://www.google.com/search?q=", "translation": "https://translate.google.com/?text=", "icon": "google" diff --git a/src/components/AllFunc/AllBox.vue b/src/components/AllFunc/AllBox.vue index 529e839..7bc9d2d 100644 --- a/src/components/AllFunc/AllBox.vue +++ b/src/components/AllFunc/AllBox.vue @@ -1,11 +1,13 @@ diff --git a/src/components/AllFunc/AllFunc.vue b/src/components/AllFunc/AllFunc.vue index d710077..2b28827 100644 --- a/src/components/AllFunc/AllFunc.vue +++ b/src/components/AllFunc/AllFunc.vue @@ -44,6 +44,13 @@ const status = statusStore(); flex-direction: row; align-items: center; justify-content: space-between; + .desc { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + } .name { display: flex; flex-direction: column; diff --git a/src/components/AllFunc/AllSet.vue b/src/components/AllFunc/AllSet.vue index 3200028..4235681 100644 --- a/src/components/AllFunc/AllSet.vue +++ b/src/components/AllFunc/AllSet.vue @@ -7,9 +7,28 @@ class="set-item cover" :content-style="{ flexDirection: 'column', alignItems: 'flex-start' }" > -
- 壁纸偏好 - 设置站点背景图片 +
+
+ 壁纸偏好 + 除默认以外的其他选项可能会导致页面载入缓慢 +
+ + + + 恢复默认 + + + + 自定义 + +
+ +
+ 时钟显零 + 是否在时钟小于 10 时补 0 +
+ + 搜索框
@@ -143,10 +169,11 @@ - - diff --git a/src/components/SearchInput/SearchInp.vue b/src/components/SearchInput/SearchInp.vue index 17c70fb..cffd4ff 100644 --- a/src/components/SearchInput/SearchInp.vue +++ b/src/components/SearchInput/SearchInp.vue @@ -168,7 +168,6 @@ const pressKeyboard = (event) => { const changeEngine = () => { status.setSiteStatus("focus", false); status.setEngineChangeStatus(!status.engineChangeStatus); - console.log(status.engineChangeStatus); }; diff --git a/src/components/WeatherTime.vue b/src/components/WeatherTime.vue index b960b1f..0de867e 100644 --- a/src/components/WeatherTime.vue +++ b/src/components/WeatherTime.vue @@ -65,7 +65,7 @@ const weatherData = ref({}); // 更新时间 const updateTimeData = () => { - timeData.value = getCurrentTime(); + timeData.value = getCurrentTime(set.showZeroTime); }; // 获取天气数据 diff --git a/src/main.js b/src/main.js index d658ae0..271abca 100644 --- a/src/main.js +++ b/src/main.js @@ -4,8 +4,6 @@ import { createPinia } from "pinia"; import piniaPluginPersistedstate from "pinia-plugin-persistedstate"; // IconFont import SvgIcon from "@/components/SvgIcon.vue"; -// Notification -import Notification from "@/components/Notification.vue"; // 主组件 import App from "@/App.vue"; // 全局样式 @@ -20,6 +18,5 @@ pinia.use(piniaPluginPersistedstate); // 挂载 app.use(pinia); -app.component("Notification", Notification); app.component("SvgIcon", SvgIcon); app.mount("#app"); diff --git a/src/stores/setData.js b/src/stores/setData.js index 6ba798b..a617f46 100644 --- a/src/stores/setData.js +++ b/src/stores/setData.js @@ -23,6 +23,8 @@ const useSetDataStore = defineStore("setData", { timeStyle: "one", // 是否显秒 showSeconds: false, + // 是否显零 + showZeroTime: true, // 是否显示搜索建议 showSuggestions: true, // 跳转方式 diff --git a/src/stores/statusData.js b/src/stores/statusData.js index 89a3e55..a417934 100644 --- a/src/stores/statusData.js +++ b/src/stores/statusData.js @@ -23,7 +23,7 @@ const useStatusDataStore = defineStore("statusData", { }, setSiteStatus(value, alsoChange = true) { this.siteStatus = value; - this.searchInputValue = ""; + if (value !== "focus") this.searchInputValue = ""; if (alsoChange) this.engineChangeStatus = false; }, setEngineChangeStatus(value) { diff --git a/src/style/global.scss b/src/style/global.scss index 67f8a2d..fa36d4c 100644 --- a/src/style/global.scss +++ b/src/style/global.scss @@ -32,6 +32,13 @@ body { height: 100vh; } +// NButton +.n-button { + background-color: var(--main-background-light-color); + border-radius: 8px; + transition: background-color 0.3s; +} + // NMessage .n-message-container { top: 20px !important; @@ -82,6 +89,46 @@ body { } } +// NModal +.n-modal-container { + .n-modal-mask { + backdrop-filter: blur(40px); + } + // n-dialog + .n-dialog { + border-radius: 8px; + --n-icon-color: var(--main-text-color); + --n-color: var(--main-background-light-color); + .n-dialog__title { + font-weight: bold; + font-size: 18px; + .n-dialog__icon { + font-size: 24px; + margin-right: 8px; + } + } + .n-dialog__content { + font-size: 15px; + } + .n-button { + height: auto; + padding: 9px 16px; + transition: background-color 0.3s; + --n-border: none; + --n-border-hover: none; + --n-border-focus: none; + --n-border-pressed: none; + --n-text-color-pressed: var(--main-text-color); + --n-color-pressed: var(--main-background-hover-color); + --n-text-color: var(--main-text-color); + --n-text-color-hover: var(--main-text-color); + --n-color-focus: var(--main-background-hover-color); + --n-text-color-focus: var(--main-text-color); + --n-color-hover: var(--main-background-hover-color); + } + } +} + // Transition 动画 .fade-enter-active, .fade-leave-active { diff --git a/src/utils/timeTools.js b/src/utils/timeTools.js index ab2fbaa..b7b56a0 100644 --- a/src/utils/timeTools.js +++ b/src/utils/timeTools.js @@ -2,7 +2,7 @@ * 获取当前时间 * @returns {Object} 时间对象 */ -export const getCurrentTime = () => { +export const getCurrentTime = (ShowZero = true) => { const time = new Date(); // 格式化 const formatTime = (value) => (value < 10 ? "0" + value : value); @@ -10,7 +10,7 @@ export const getCurrentTime = () => { const year = time.getFullYear(); const month = time.getMonth() + 1; const day = formatTime(time.getDate()); - const hour = formatTime(time.getHours()); + const hour = ShowZero ? formatTime(time.getHours()) : time.getHours(); const minute = formatTime(time.getMinutes()); const second = formatTime(time.getSeconds()); const weekdayArr = ["日", "一", "二", "三", "四", "五", "六"];