From ae5f63b1ede98146054229ed494f9504746222a7 Mon Sep 17 00:00:00 2001
From: Xwen <929716663@qq.com>
Date: Thu, 11 Jan 2024 23:51:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E6=96=B0=E5=A2=9E=E7=AD=BE=E5=88=B0layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/signIn/components/signBody.vue | 32 +++++++
 Yi.Bbs.Vue3/src/layout/signIn/index.vue       | 83 +++++++++++++++++++
 Yi.Bbs.Vue3/src/router/index.js               | 17 ++++
 Yi.Bbs.Vue3/src/views/home/Index.vue          | 39 ++++++++-
 Yi.Bbs.Vue3/src/views/signIn/index.vue        | 12 +++
 5 files changed, 182 insertions(+), 1 deletion(-)
 create mode 100644 Yi.Bbs.Vue3/src/layout/signIn/components/signBody.vue
 create mode 100644 Yi.Bbs.Vue3/src/layout/signIn/index.vue
 create mode 100644 Yi.Bbs.Vue3/src/views/signIn/index.vue

diff --git a/Yi.Bbs.Vue3/src/layout/signIn/components/signBody.vue b/Yi.Bbs.Vue3/src/layout/signIn/components/signBody.vue
new file mode 100644
index 00000000..ec2c7ce8
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/layout/signIn/components/signBody.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="sign-box">
+    <div class="menuList">菜单栏</div>
+    <div class="page">
+      <RouterView />
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.sign-box {
+  display: flex;
+  justify-content: space-between;
+  width: 1300px;
+  height: 100%;
+  padding: 20px 0 10px;
+  .menuList {
+    width: 25%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+  .page {
+    width: 70%;
+    height: 100%;
+    background-color: #fff;
+    border-radius: 5px;
+  }
+}
+</style>
diff --git a/Yi.Bbs.Vue3/src/layout/signIn/index.vue b/Yi.Bbs.Vue3/src/layout/signIn/index.vue
new file mode 100644
index 00000000..217e2782
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/layout/signIn/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="common-layout">
+    <el-container class="common-container">
+      <el-header
+        class="common-header"
+        ref="header"
+        :class="[isFixed ? 'fixed' : '']"
+      >
+        <AppHeader />
+      </el-header>
+      <el-main class="common-main">
+        <SignBody />
+      </el-main>
+    </el-container>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import AppHeader from "../AppHeader.vue";
+import SignBody from "./components/signBody.vue";
+
+const header = ref(null);
+const isFixed = ref(false);
+
+onMounted(() => {
+  window.addEventListener("scroll", handleScroll);
+});
+
+const handleScroll = () => {
+  const scrollTop =
+    window.scrollY ||
+    document.documentElement.scrollTop ||
+    document.body.scrollTop;
+  const currentEle = header.value.$el;
+  if (scrollTop > currentEle.offsetTop) {
+    isFixed.value = true;
+  } else {
+    isFixed.value = false;
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.common {
+  &-layout {
+    width: 100%;
+    height: 100%;
+  }
+  &-container {
+    width: 100%;
+    height: 100%;
+  }
+  &-header {
+    width: 100%;
+    background-color: #fff;
+    box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
+    height: 60px;
+    display: flex;
+    justify-content: center;
+  }
+  &-main {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: calc(100% - 50px);
+  }
+}
+
+.el-main {
+  margin: 0;
+  padding: 0;
+  min-height: 10rem;
+  background-color: #f0f2f5;
+}
+
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99999;
+}
+</style>
diff --git a/Yi.Bbs.Vue3/src/router/index.js b/Yi.Bbs.Vue3/src/router/index.js
index 5c53afb4..43fdf032 100644
--- a/Yi.Bbs.Vue3/src/router/index.js
+++ b/Yi.Bbs.Vue3/src/router/index.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import Layout from "../layout/Index.vue";
 import NotFound from "../views/error/404.vue";
 import LoginLayout from "../layout/LoginLayout.vue";
+import SignInLayout from "../layout/signIn/index.vue";
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   scrollBehavior(to, from, savedPosition) {
@@ -98,6 +99,22 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: "/sign",
+      name: "signInLayout",
+      component: SignInLayout,
+      redirect: "/sign/everyday",
+      children: [
+        {
+          name: "everyday",
+          path: "everyday",
+          component: () => import("../views/signIn/index.vue"),
+          meta: {
+            title: "每日签到",
+          },
+        },
+      ],
+    },
     { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },
   ],
 });
diff --git a/Yi.Bbs.Vue3/src/views/home/Index.vue b/Yi.Bbs.Vue3/src/views/home/Index.vue
index 3bea4a12..2c1c611f 100644
--- a/Yi.Bbs.Vue3/src/views/home/Index.vue
+++ b/Yi.Bbs.Vue3/src/views/home/Index.vue
@@ -85,6 +85,19 @@
               </div>
             </div>
           </div>
+          <!-- 签到 -->
+          <el-col :span="24">
+            <InfoCard header="签到">
+              <template #content>
+                <div class="signIn">
+                  <div class="left">欢迎来到意社区！</div>
+                  <div class="right">
+                    <div class="signIn-btn" @click="handleToSign">去签到</div>
+                  </div>
+                </div>
+              </template>
+            </InfoCard>
+          </el-col>
 
           <el-col :span="24">
             <InfoCard header="访问统计" class="VisitsLineChart" text="详情">
@@ -176,6 +189,7 @@
 
 <script setup>
 import { onMounted, ref, reactive, computed, nextTick, watch } from "vue";
+import { useRouter } from "vue-router";
 import DisscussCard from "@/components/DisscussCard.vue";
 import InfoCard from "@/components/InfoCard.vue";
 import PlateCard from "@/components/PlateCard.vue";
@@ -202,6 +216,8 @@ import useSocketStore from "@/stores/socket";
 import signalR from "@/utils/signalR";
 import useAuths from "@/hooks/useAuths";
 
+const router = useRouter();
+
 const { getToken } = useAuths();
 const token = getToken();
 
@@ -221,7 +237,6 @@ const isAllDiscussFinished = ref(false);
 const userAnalyseInfo = ref({});
 const onlineNumber = ref(0);
 
-const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
 //主题查询参数
 const query = reactive({
   skipCount: 1,
@@ -281,6 +296,10 @@ const statisOptions = computed(() => {
   };
 });
 
+const handleToSign = () => {
+  router.push("/sign");
+};
+
 // 推送的实时人数获取
 const currentOnlineNum = computed(() => useSocketStore().getOnlineNum());
 watch(
@@ -397,6 +416,24 @@ watch(
       }
     }
   }
+  .signIn {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #8a919f;
+    &-btn {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 74px;
+      height: 36px;
+      border-radius: 4px;
+      border: 1px solid rgba(30, 128, 255, 0.3);
+      background-color: rgba(30, 128, 255, 0.1);
+      color: #1e80ff;
+    }
+  }
 
   .VisitsLineChart >>> .el-card__body {
     padding: 0.5rem;
diff --git a/Yi.Bbs.Vue3/src/views/signIn/index.vue b/Yi.Bbs.Vue3/src/views/signIn/index.vue
new file mode 100644
index 00000000..44bcfb7b
--- /dev/null
+++ b/Yi.Bbs.Vue3/src/views/signIn/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <div class="everyday-box">每日签到页持续coding中~~~</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.everyday-box {
+  width: 100%;
+  height: 100%;
+}
+</style>