新增设置页面

2022-11-27 00:11:51 +08:00 · 2022-11-27 00:11:51 +08:00 · 8c6dc91075
commit 8c6dc91075
parent 48afe35097
12 changed files with 541 additions and 41 deletions
--- a/.env
+++ b/.env
@ -1,5 +1,6 @@
 # 站点名称
 VITE_SITE_NAME = "無名の主页"
+VITE_SITE_URL = "imsyy.top"

 # 简介文本
 VITE_DESC_HELLO = "Hello World !"
--- a/src/App.vue
+++ b/src/App.vue
@ -3,9 +3,18 @@
    <Background />
    <main>
      <div class="container">
-        <MainLeft />
-        <MainRight v-show="!store.boxOpenState" />
-        <Box v-show="store.boxOpenState" />
+        <transition name="el-fade-in-linear">
+          <section class="main" v-show="!store.setOpenState">
+            <MainLeft />
+            <MainRight v-show="!store.boxOpenState" />
+            <Box v-show="store.boxOpenState" />
+          </section>
+        </transition>
+        <transition name="el-fade-in-linear">
+          <section class="more" v-show="store.setOpenState" @click="store.setOpenState = false">
+            <MoreSet />
+          </section>
+        </transition>
      </div>
    </main>
    <Footer />
@ -19,7 +28,9 @@ import MainRight from "@/views/Main/Right.vue";
 import Background from "@/components/Background/index.vue";
 import Footer from "@/components/Footer/index.vue";
 import Box from "@/views/Box/index.vue";
+import MoreSet from "@/views/MoreSet/index.vue";
 import cursorInit from "@/utils/cursor.js";
+import { helloInit, checkDays } from "@/utils/getTime.js";
 import { mainStore } from "@/store";
 const store = mainStore();

@ -31,6 +42,10 @@ const getWidth = () => {
 onMounted(() => {
  // 自定义鼠标
  cursorInit();
+  // 欢迎提示
+  helloInit();
+  // 默哀模式
+  checkDays();
  // 加载完成事件
  window.addEventListener("load", () => {
    console.log("加载完成");
@ -55,14 +70,30 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 main {
  .container {
-    margin: 0 auto;
-    padding: 0 0.75rem;
    width: 100%;
    height: 100vh;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+    margin: 0 auto;
+
+    .main {
+      width: 100%;
+      height: 100%;
+      padding: 0 0.75rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .more {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: #00000080;
+      backdrop-filter: blur(20px);
+      z-index: 2;
+    }
  }
 }

--- a/src/components/Background/index.vue
+++ b/src/components/Background/index.vue
@ -6,20 +6,38 @@
 </template>

 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { mainStore } from "@/store";
 const store = mainStore();

 let bgUrl = ref(null); // 壁纸链接

-onMounted(() => {
-  // 加载壁纸
-  if (store.coverType == 0) {
+const changeBg = (type) => {
+  if (type == 0) {
    bgUrl.value = `/images/background${Math.floor(
      Math.random() * 10 + 1
    )}.webp`;
+  } else if (type == 1) {
+    bgUrl.value = "https://api.dujin.org/bing/1920.php";
+  } else if (type == 2) {
+    bgUrl.value = "https://api.ixiaowai.cn/gqapi/gqapi.php";
+  } else if (type == 3) {
+    bgUrl.value = "https://api.ixiaowai.cn/api/api.php";
  }
+}
+
+onMounted(() => {
+  // 加载壁纸
+  changeBg(store.coverType);
 });
+
+// 监听壁纸种类变化
+watch(
+  () => store.coverType,
+  (value) => {
+    changeBg(value);
+  }
+);
 </script>

 <style lang="scss" scoped>
@ -31,6 +49,7 @@ onMounted(() => {
  height: 100%;
  transition: 0.25s;
  z-index: -1;
+
  .bg {
    transform: scale(1);
    filter: blur(0);
@ -43,6 +62,7 @@ onMounted(() => {
    transition: all 1.5s ease 0s;
    backface-visibility: hidden;
  }
+
  .gray {
    opacity: 1;
    position: absolute;
@ -50,10 +70,8 @@ onMounted(() => {
    top: 0;
    width: 100%;
    height: 100%;
-    background-image: radial-gradient(
-        rgba(0, 0, 0, 0) 0,
-        rgba(0, 0, 0, 0.5) 100%
-      ),
+    background-image: radial-gradient(rgba(0, 0, 0, 0) 0,
+        rgba(0, 0, 0, 0.5) 100%),
      radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);

    transition: 1.5s;
@ -68,6 +86,7 @@ onMounted(() => {
      transform: scale(1.1);
      filter: blur(10px);
    }
+
    .gray {
      transition: 1.5s;
      opacity: 0;
--- a/src/components/Message/index.vue
+++ b/src/components/Message/index.vue
@ -5,8 +5,8 @@
    <div class="logo">
      <img class="logo-img" src="/images/icon/logo.png" alt="logo" />
      <div class="name">
-        <span class="bg">imsyy</span>
-        <span class="sm">.top</span>
+        <span class="bg">{{ siteUrl[0] }}</span>
+        <span class="sm">.{{ siteUrl[1] }}</span>
      </div>
    </div>
    <!-- 简介 -->
@ -35,6 +35,9 @@ import { Error } from "@icon-park/vue-next";
 import { mainStore } from "@/store";
 const store = mainStore();

+// 站点链接
+let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
+
 // 简介区域文字
 let descriptionText = reactive({
  hello: import.meta.env.VITE_DESC_HELLO,
@ -48,6 +51,7 @@ const changeBox = () => {
  } else {
    ElMessage({
      message: "当前页面宽度不足以开启盒子",
+      grouping: true,
      icon: h(Error, {
        theme: "filled",
        fill: "#efefef",
@ -77,41 +81,50 @@ watch(
    display: flex;
    flex-direction: row;
    align-items: center;
+
    .logo-img {
      border-radius: 50%;
      width: 120px;
    }
+
    .name {
      width: 100%;
      margin-left: 12px;
      transform: translateY(-8px);
      font-family: "Pacifico-Regular";
+
      .bg {
        font-size: 5rem;
      }
+
      .sm {
        margin-left: 6px;
        font-size: 2rem;
      }
    }
  }
+
  .description {
    padding: 1rem;
    margin-top: 3.5rem;
    max-width: 460px;
+
    .content {
      display: flex;
      justify-content: space-between;
+
      .text {
        margin: 0.75rem auto;
        line-height: 2rem;
        margin-right: auto;
+
        p {
          &:nth-of-type(1) {
            font-family: "Pacifico-Regular";
          }
        }
      }
+
      .xicon:nth-of-type(2) {
        align-self: flex-end;
      }
--- a/src/components/Set/index.vue
+++ b/src/components/Set/index.vue
@ -0,0 +1,139 @@
+<template>
+    <div class="setting">
+        <el-collapse class="collapse" v-model="activeName" accordion>
+            <el-collapse-item title="壁纸设置" name="1">
+                <div class="bg-set">
+                    <el-radio-group v-model="bgSet" text-color="#ffffff">
+                        <el-radio label="0" size="large" border>默认壁纸</el-radio>
+                        <el-radio label="1" size="large" border>每日一图</el-radio>
+                        <el-radio label="2" size="large" border>随机风景</el-radio>
+                        <el-radio label="3" size="large" border>随机动漫</el-radio>
+                    </el-radio-group>
+                </div>
+            </el-collapse-item>
+            <el-collapse-item title="Feedback" name="2">
+                <div>
+                    Operation feedback: enable the users to clearly perceive their
+                    operations by style updates and interactive effects;
+                </div>
+                <div>
+                    Visual feedback: reflect current state by updating or rearranging
+                    elements of the page.
+                </div>
+            </el-collapse-item>
+            <el-collapse-item title="Efficiency" name="3">
+                <div>
+                    Simplify the process: keep operating process simple and intuitive;
+                </div>
+                <div>
+                    Definite and clear: enunciate your intentions clearly so that the
+                    users can quickly understand and make decisions;
+                </div>
+                <div>
+                    Easy to identify: the interface should be straightforward, which helps
+                    the users to identify and frees them from memorizing and recalling.
+                </div>
+            </el-collapse-item>
+            <el-collapse-item title="Controllability" name="4">
+                <div>
+                    Decision making: giving advices about operations is acceptable, but do
+                    not make decisions for the users;
+                </div>
+                <div>
+                    Controlled consequences: users should be granted the freedom to
+                    operate, including canceling, aborting or terminating current
+                    operation.
+                </div>
+            </el-collapse-item>
+        </el-collapse>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import { mainStore } from "@/store";
+const store = mainStore();
+
+// 默认选中项
+let activeName = ref('1');
+let bgSet = ref("0");
+
+onMounted(() => {
+    bgSet.value = store.coverType.toString();
+})
+
+// 壁纸选中项
+watch(
+    () => bgSet.value,
+    (value) => {
+        store.coverType = value;
+    }
+);
+</script>
+
+<style lang="scss" scoped>
+.setting {
+    .collapse {
+        border-radius: 8px;
+        --el-collapse-content-bg-color: #ffffff10;
+        border-color: transparent;
+        overflow: hidden;
+
+        :deep(.el-collapse-item__header) {
+            background-color: #ffffff30;
+            color: #fff;
+            font-size: 15px;
+            padding-left: 18px;
+            border-color: transparent;
+        }
+
+        :deep(.el-collapse-item__wrap) {
+            border-color: transparent;
+
+            .el-collapse-item__content {
+                padding: 20px;
+
+                .bg-set {
+                    .el-radio-group {
+                        justify-content: center;
+
+
+                        .el-radio {
+                            margin: 10px 16px;
+
+                            .el-radio__label {
+                                color: #fff;
+                            }
+
+                            .el-radio__inner {
+                                background-color: #ffffff60 !important;
+                                border-color: #fff !important;
+                            }
+
+                            &.is-checked {
+                                background-color: #ffffff60;
+                                border-color: #ffffff80;
+                            }
+
+                            .is-checked {
+                                .el-radio__inner {
+                                    background-color: #ffffff30 !important;
+                                    border-color: #fff !important;
+                                }
+
+                                &+.el-radio__label {
+                                    color: #fff !important;
+                                }
+                            }
+
+
+
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+}
+</style>
--- a/src/components/TimeCapsule/index.vue
+++ b/src/components/TimeCapsule/index.vue
@ -70,7 +70,7 @@ onBeforeUnmount(() => {
    display: flex;
    flex-direction: row;
    align-items: center;
-    margin: 0.5rem 0 1.5rem;
+    margin: 0.2rem 0 1.5rem;
    font-size: 1.1rem;
    .i-icon {
      display: flex;
--- a/src/store/index.js
+++ b/src/store/index.js
@ -6,10 +6,11 @@ export const mainStore = defineStore("main", {
    state: () => {
        return {
            innerWidth: null, // 当前窗口宽度
-            coverType: 0, // 壁纸种类
+            coverType: "0", // 壁纸种类
            musicIsOk: false, // 音乐是否加载完成
            musicOpenState: false, // 音乐面板开启状态
            boxOpenState: false, // 盒子开启状态
+            setOpenState: false, // 设置页面开启状态
            playerState: false, // 当前播放状态
            playerTitle: null, // 当前播放歌曲名
            playerArtist: null, // 当前播放歌手名
--- a/src/style/style.scss
+++ b/src/style/style.scss
@ -23,6 +23,7 @@ p {
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
+    -webkit-user-drag: none;
    user-select: none;
    text-decoration: none;
    transition: .3s;
@ -116,6 +117,31 @@ p {

 }

+// Tooltip 样式
+.el-popper.is-dark {
+    background: #ffffff60 !important;
+    border: 1px solid transparent !important;
+}
+
+// 卡片样式
+.el-card {
+    border-radius: 8px !important;
+    border: 1px solid transparent !important;
+    background-color: transparent !important;
+
+    .el-card__header {
+        font-weight: bold;
+        padding: 16px 20px !important;
+        background-color: #ffffff30 !important;
+        border-bottom: 1px solid transparent !important;
+    }
+
+    .el-card__body {
+        padding: 0 !important;
+        background-color: #ffffff10 !important;
+    }
+}
+
 // 渐入动画
 .fade-enter-active {
    animation: fade 0.3s ease-in-out;
@ -157,4 +183,16 @@ p {
        transform: scale(0.5);

    }
+}
+
+// 滚动条样式
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+    background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #eeeeee;
 }
--- a/src/utils/getTime.js
+++ b/src/utils/getTime.js
@ -1,3 +1,10 @@
+import {
+    h
+} from "vue";
+import {
+    SpaCandle
+} from "@icon-park/vue-next";
+
 // 时钟
 export const getCurrentTime = () => {
    let time = new Date();
@ -56,4 +63,56 @@ export const getTimeCapsule = () => {
            pass: parseInt(yearPass),
        }
    }
+}
+
+// 欢迎提示
+export const helloInit = () => {
+    let hour = new Date().getHours();
+    let hello = null;
+    if (hour < 6) {
+        hello = "凌晨好";
+    } else if (hour < 9) {
+        hello = "早上好";
+    } else if (hour < 12) {
+        hello = "上午好";
+    } else if (hour < 14) {
+        hello = "中午好";
+    } else if (hour < 17) {
+        hello = "下午好";
+    } else if (hour < 19) {
+        hello = "傍晚好";
+    } else if (hour < 22) {
+        hello = "晚上好";
+    } else {
+        hello = "夜深了";
+    }
+    ElMessage({
+        dangerouslyUseHTMLString: true,
+        message: `<strong>${hello}</strong> 欢迎来到我的主页`,
+    });
+}
+
+// 默哀模式
+export const checkDays = () => {
+    let myDate = new Date;
+    let mon = myDate.getMonth() + 1;
+    let date = myDate.getDate();
+    let days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
+    for (let day of days) {
+        let d = day.split('.');
+        if (mon == d[0] && date == d[1]) {
+            console.log("今天是纪念日");
+            let gray = document.createElement("style");
+            document.body.appendChild(gray);
+            gray.innerHTML = "html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}";
+            ElMessage({
+                message: "今天是中国国家纪念日",
+                duration: 14000,
+                icon: h(SpaCandle, {
+                    theme: "filled",
+                    fill: "#efefef",
+                }),
+            });
+        }
+    }
 }
--- a/src/views/Box/index.vue
+++ b/src/views/Box/index.vue
@ -1,18 +1,12 @@
 <template>
-  <div
-    class="box cards"
-    @mouseenter="closeShow = true"
-    @mouseleave="closeShow = false"
-  >
+  <div class="box cards" @mouseenter="closeShow = true" @mouseleave="closeShow = false">
    <transition name="el-fade-in-linear">
-      <close-one
-        class="close"
-        theme="filled"
-        size="28"
-        fill="#ffffff60"
-        v-show="closeShow"
-        @click="store.boxOpenState = false"
-      />
+      <close-one class="close" theme="filled" size="28" fill="#ffffff60" v-show="closeShow"
+        @click="store.boxOpenState = false" />
+    </transition>
+    <transition name="el-fade-in-linear">
+      <setting-two class="setting" theme="filled" size="28" fill="#ffffff60" v-show="closeShow"
+        @click="store.setOpenState = true" />
    </transition>
    <div class="content">
      <TimeCapsule />
@ -22,7 +16,7 @@

 <script setup>
 import { ref, watch } from "vue";
-import { CloseOne } from "@icon-park/vue-next";
+import { CloseOne, SettingTwo } from "@icon-park/vue-next";
 import TimeCapsule from "@/components/TimeCapsule/index.vue";
 import { mainStore } from "@/store";
 const store = mainStore();
@ -47,22 +41,32 @@ watch(
  margin-left: 0.75rem;
  height: 80%;
  position: relative;
+
  &:hover {
    transform: scale(1);
  }
-  .close {
+
+  .close,
+  .setting {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
+
    &:hover {
      transform: scale(1.2);
    }
+
    &:active {
      transform: scale(1);
    }
  }
+
+  .setting {
+    right: 56px;
+  }
+
  .content {
    padding: 30px;
    width: 100%;
--- a/src/views/More/index.vue
+++ b/src/views/More/index.vue
@ -1,5 +0,0 @@
-<template>
-  <div class="more">
-    
-  </div>
-</template>
--- a/src/views/MoreSet/index.vue
+++ b/src/views/MoreSet/index.vue
@ -0,0 +1,200 @@
+<template>
+  <div class="set" @mouseenter="closeShow = true" @mouseleave="closeShow = false" @click.stop>
+    <transition name="el-fade-in-linear">
+      <close-one class="close" theme="filled" size="28" fill="#ffffff60" v-show="closeShow"
+        @click="store.setOpenState = false" />
+    </transition>
+    <el-row :gutter="20">
+      <el-col :span="12" class="left">
+        <div class="logo">
+          <span class="bg">{{ siteUrl[0] }}</span>
+          <span class="sm">.{{ siteUrl[1] }}</span>
+        </div>
+        <div class="version">
+          <div class="num">v&nbsp;{{ config.version }}</div>
+          <el-tooltip content="Github 源代码仓库" placement="right" :show-arrow="false">
+            <github-one class="github" theme="outline" size="24" @click="jumpTo" />
+          </el-tooltip>
+        </div>
+        <el-card class="update">
+          <template #header>
+            <div class="card-header">
+              <span>更新日志</span>
+            </div>
+          </template>
+          <div class="upnote">
+            <div v-for="item in upData.new" :key="item" class="uptext">
+              <add-one theme="outline" size="22" />
+              {{ item }}
+            </div>
+            <div v-for="item in upData.fix" :key="item" class="uptext">
+              <bug theme="outline" size="22" />
+              {{ item }}
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="12" class="right">
+        <div class="title">
+          <setting-two theme="filled" size="28" fill="#ffffff60" />
+          <span class="name">全局设置</span>
+        </div>
+        <Set />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+import { CloseOne, SettingTwo, GithubOne, AddOne, Bug } from "@icon-park/vue-next";
+import { mainStore } from "@/store";
+import Set from "@/components/Set/index.vue";
+import config from '@/../package.json';
+const store = mainStore();
+
+let closeShow = ref(false);
+
+// 站点链接
+let siteUrl = import.meta.env.VITE_SITE_URL.split(".");
+
+// 更新日志
+let upData = reactive({
+  new: ["采用 Vue 进行重构", "音乐歌单支持快速自定义", "壁纸支持个性化设置", "音乐播放器支持音量控制"],
+  fix: ["修复天气 API", "时光胶囊显示错误", "移动端动画及细节", "图标更换为 IconPark"],
+})
+
+// 跳转源代码仓库
+const jumpTo = () => {
+  window.open('https://github.com/imsyy/home');
+};
+</script>
+
+<style lang="scss" scoped>
+.set {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  width: 80%;
+  height: 80%;
+  background: rgb(255 255 255 / 40%);
+  border-radius: 6px;
+  padding: 40px;
+
+  .close {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 28px;
+    height: 28px;
+
+    &:hover {
+      transform: scale(1.2);
+    }
+
+    &:active {
+      transform: scale(1);
+    }
+  }
+
+  .el-row {
+    height: 100%;
+    flex-wrap: nowrap;
+
+    .left {
+      height: 100%;
+      margin-left: 20px;
+      padding-bottom: 20px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .logo {
+        transform: translateY(-8%);
+        font-family: "Pacifico-Regular";
+        // line-height: 5rem;
+
+        .bg {
+          font-size: 5rem;
+        }
+
+        .sm {
+          margin-left: 6px;
+          font-size: 2rem;
+        }
+      }
+
+      .version {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .num {
+          font-size: 2rem;
+          font-family: 'Pacifico-Regular';
+        }
+
+        .github {
+          width: 24px;
+          height: 24px;
+          margin-left: 12px;
+          margin-top: 6px;
+
+          &:hover {
+            transform: scale(1.2);
+          }
+        }
+      }
+
+      .update {
+        margin-top: 30px;
+        height: 100%;
+
+        :deep(.el-card__body) {
+          height: 100%;
+
+          .upnote {
+            padding: 20px;
+            height: calc(100% - 56px);
+            overflow-y: auto;
+
+            .uptext {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              padding-bottom: 16px;
+
+              .i-icon {
+                width: 22px;
+                height: 22px;
+                margin-right: 8px;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .right {
+      height: 100%;
+      padding-right: 40px !important;
+
+      .title {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        font-size: 18px;
+        margin-bottom: 16px;
+
+        .i-icon {
+          width: 28px;
+          height: 28px;
+          margin-right: 6px;
+        }
+      }
+    }
+  }
+}
+</style>