kana-bbs/layouts/default.vue

<template lang="pug">
.main
  header.header
    .circumscription
      .logo Kana
      nav.navbar
        NuxtLink.navbar-item(:to="{ path: '/' }") 论坛
        NuxtLink.navbar-item(to="/docs") 文档
        NuxtLink.navbar-item(to="/chat") 聊天室
        //NuxtLink.navbar-item(to="/admin") admin
      .online
        .navbar-user(v-if="account.online")
          NuxtLink.userinfo(to="/account")
            img.avatar(:src="account.avatar" onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'")
            span.name {{ account.name }}
        .navbar-sign(v-else)
          NuxtLink.button(to="/account/signin") Signin
          NuxtLink.button(to="/account/create") Login
      .websocket(:class="{ on: websocket }")
  Nuxt
</template>

<script>
import "@/assets/sass/main.sass";
import "@/assets/sass/default.sass";

import socket from "@/assets/js/socket.js";

export default {
  data: () => ({
    websocket: false,
  }),
  computed: {
    account() {
      return this.$store.state.account;
    },
  },
  beforeMount() {
    // 如果掉线调用变红, 如果上线调用变绿
    socket.onclose = () => {
      this.websocket = false;
    };
    socket.onopen = () => {
      this.websocket = true;
    };
    let protocol = location.protocol === "https:" ? "wss:" : "ws:";
    socket.init(`${protocol}//${location.host}/api/`);
  },
  mounted() {
    console.log(
      "%c こめいじ さとり %c satori.love ",
      "color: white; background: #e9546b; padding:5px 0;",
      "padding:4px;border:1px solid #e9546b;"
    );
    this.$store.dispatch("account/profile");
    console.log(window.devicePixelRatio);
  },
};
</script>

<style lang="sass">
.websocket
  background: red
  border-radius: 50%
  width: 1rem
  height: 1rem
  margin: .25rem .5rem
.websocket.on
  background: #00ee00

.main
  >header.header
    z-index: 100
    position: fixed
    top: 0
    left: 0
    width: 100%
    padding: 1rem 0
    >div
      display: flex
      align-items: flex-end
      >.logo
        font-size: 2rem
        font-weight: 900
        margin-right: 1.5rem
      >nav.navbar
        flex: 1
        display: flex
        align-items: center
        //justify-content: center
        .navbar-item
          margin: 0 .25rem
          padding: 0 .75rem
          height: 2rem
          line-height: 2rem
          text-align: center
          font-weight: 600
          white-space: nowrap
      >.online
        .navbar-user
          .userinfo
            font-weight: 600
            display: flex
            align-items: center
            .avatar
              width: 24px
              height: 24px
              border-radius: 50%
              margin-right: .5rem
              background: rgba(0, 0, 0, .05)
        .navbar-sign
          a.button
            margin-right: .5rem
footer.footer
  text-align: center
  padding: 4rem
  .github
    font-size: 2rem

//.admin
//  position: relative
//.admin::before
//  position: absolute
//  top: 0
//  right: 0
//  content: '演示'
//  width: 4rem
//  height: 2rem
//  background: #ff1414
</style>