feat(status): initialize login

packages/plugin-status/client/components/button.vue

@@ -0,0 +1,125 @@
+<template>
+  <button
+    :title="disabled ? '' : title"
+    :class="['k-button', type, { solid, round, unframed }]"
+    :disabled="disabled"
+    @click.stop="$emit('click')"
+  >
+    <slot/>
+  </button>
+</template>
+
+<script lang="ts" setup>
+
+import { defineProps } from 'vue'
+
+defineProps({
+  type: {
+    type: String,
+    default: 'default',
+  },
+  solid: Boolean,
+  unframed: Boolean,
+  title: String,
+  round: Boolean,
+  disabled: Boolean,
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+@import '../index.scss';
+
+@mixin active-bg-color($color) {
+  background-color: $color !important;
+  &:hover {
+    background-color: lighten($color, 30%) !important;
+  }
+  &:active {
+    background-color: darken($color, 30%) !important;
+  }
+  &:disabled {
+    background-color: #999 !important;
+  }
+}
+
+button {
+  font-size: 1em;
+  line-height: 1.2em;
+  appearance: none;
+  user-select: none;
+  border: none;
+  border-radius: 0.4em;
+  cursor: pointer;
+  padding: 0.6em 1em;
+  transition: 0.3s ease;
+  display: inline-block;
+  &.round {
+    border-radius: 50%;
+  }
+  &:focus {
+    outline: 0;
+  }
+  &:disabled {
+    cursor: default;
+  }
+  // default: transparent & framed
+  color: $tpFgColor3;
+  border: 1px solid $tpBorderColor2;
+  background-color: $tpBgColor1;
+  &:disabled {
+    color: $tpFgColor1;
+    border-color: $tpBorderColor1;
+    background-color: transparent;
+  }
+  &:hover:not(:disabled) {
+    color: $tpFgColor4;
+    border: 1px solid $tpBorderColor3;
+    background-color: $tpBgColor2;
+  }
+  // dim
+  &.dim {
+    border-color: $tpBorderColor1;
+    background-color: transparent;
+    &:hover:not(:disabled) {
+      border-color: $tpBorderColor2;
+      background-color: $tpBgColor1;
+    }
+  }
+  // solid
+  &.solid {
+    color: #ffffff !important;
+    border-color: transparent !important;
+    &.default {
+      @include active-bg-color($accentColor);
+    }
+    &.danger {
+      @include active-bg-color($warningColor);
+    }
+    &.success {
+      @include active-bg-color($successColor);
+    }
+  }
+  // unframed
+  &.unframed {
+    color: $tpFgColor4;
+    border-color: transparent;
+    background-color: transparent;
+    text-shadow: 1px 2px 3px #000a;
+    &:hover {
+      border-color: $tpBorderColor1;
+      background-color: #ffffff40;
+    }
+    @media (max-width: $bp_xs) {
+      color: $tpFgColor5;
+      background-color: #ffffff40;
+      &:hover {
+        border-color: $tpBorderColor2;
+        background-color: #ffffff60;
+      }
+    }
+  }
+}
+
+</style>

packages/plugin-status/client/components/card.vue

@@ -25,7 +25,7 @@ $paddingY: 1.6rem;
 .k-card {
   margin: 0 auto;
   width: 100%;
-  border-radius: 6px;
+  border-radius: 8px;
   background: rgba(0, 0, 0, .24);
   box-shadow: 0 23px 20px -20px rgb(9 10 18 / 10%), 0 0 15px rgb(9 10 18 / 6%);
 

packages/plugin-status/client/components/input.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="k-input" :class="{ focused, disabled }">
-    <i v-if="prefixIcon" :class="'icon-' + prefixIcon" class="prefix"/>
+    <i v-if="prefixIcon" :class="'fas fa-' + prefixIcon" class="prefix"/>
     <input
       ref="input"
       :value="modelValue"
@@ -21,7 +21,7 @@
       @blur="onBlur"
       @keydown.enter.stop="$emit('enter', $event)"
     />
-    <i v-if="suffixIcon" :class="'icon-' + suffixIcon" class="suffix"/>
+    <i v-if="suffixIcon" :class="'fas fa-' + suffixIcon" class="suffix"/>
   </div>
 </template>
 
@@ -49,7 +49,7 @@ const focused = ref(false)
 const invalid = ref(false)
 
 const inputStyle = computed(() => ({
-  fontSize: props.size + 'rem',
+  fontSize: props.size + 'em',
   paddingLeft: +!!(props.prefixIcon) + 1 + 'em',
   paddingRight: +!!(props.suffixIcon) + 1 + 'em',
 }))
@@ -104,7 +104,7 @@ function onBlur (event) {
     color: white;
     width: 100%;
     outline: none;
-    font-size: 1rem;
+    font-size: 1em;
     height: inherit;
     display: inline-block;
     border-radius: 0.3em;

packages/plugin-status/client/index.scss

@@ -33,10 +33,20 @@ $tpBgColor1: #fff2;
 $tpBgColor2: #fff4;
 $tpBorderColor1: #dcdfe640;
 $tpBorderColor2: #dcdfe680;
+$tpBorderColor3: #dcdfe6;
 $tpInsetColor: #0004;
 
 // breakpoints
 $bp_lg: 1440px;
 $bp_md: 1024px;
 $bp_sm: 768px;
 $bp_xs: 480px;
+
+$navbarHeight: 4rem;
+$sidebarWidth: 16rem;
+$mainPadding: 2rem;
+
+a {
+  color: $default;
+  text-decoration: none;
+}

packages/plugin-status/client/index.ts

@@ -1,12 +1,13 @@
+/* eslint-disable no-undef */
+
 import { ref } from 'vue'
 import type { Payload } from '~/server'
 
 export const status = ref<Payload>(null)
 export const socket = ref<WebSocket>(null)
 
 export function start() {
-  // eslint-disable-next-line no-undef
-  socket.value = new WebSocket(KOISHI_ENDPOINT)
+  socket.value = new WebSocket(KOISHI_ENDPOINT.replace(/^http/, 'ws'))
   receive('update', body => status.value = body)
 }
 
@@ -23,3 +24,19 @@ export function receive<T = any>(event: string, listener: (data: T) => void) {
     }
   }
 }
+
+export namespace Storage {
+  export function get(key: string) {
+    if (typeof localStorage === 'undefined') return
+    const rawData = localStorage.getItem(key)
+    if (!rawData) return
+    try {
+      return JSON.parse(rawData)
+    } catch {}
+  }
+
+  export function set(key: string, value: any) {
+    if (typeof localStorage === 'undefined') return
+    localStorage.setItem(key, JSON.stringify(value))
+  }
+}

packages/plugin-status/client/main.ts

@@ -3,6 +3,7 @@ import { ElButton, ElCollapseTransition } from 'element-plus'
 import { THEME_KEY } from 'vue-echarts'
 import { createRouter, createWebHistory } from 'vue-router'
 import Card from './components/card.vue'
+import Button from './components/button.vue'
 import Input from './components/input.vue'
 import App from './views/layout/index.vue'
 import { start } from '.'
@@ -22,6 +23,8 @@ declare module 'vue-router' {
   interface RouteMeta {
     icon?: string
     status?: boolean
+    auth?: boolean
+    standalone?: boolean
   }
 }
 
@@ -47,12 +50,18 @@ const router = createRouter({
   }, {
     path: '/sandbox',
     name: '沙盒',
-    meta: { icon: 'laptop-code' },
+    meta: { icon: 'laptop-code', auth: true },
     component: () => import('./views/sandbox.vue'),
+  }, {
+    path: '/login',
+    name: '登录',
+    meta: { icon: 'sign-in-alt', standalone: true },
+    component: () => import('./views/login.vue'),
   }],
 })
 
 app.component('k-card', Card)
+app.component('k-button', Button)
 app.component('k-input', Input)
 
 app.provide(THEME_KEY, 'dark-blue')
@@ -62,6 +71,12 @@ app.use(ElCollapseTransition)
 
 app.use(router)
 
+router.afterEach((route) => {
+  if (typeof route.name === 'string') {
+    document.title = route.name + ' | Koishi 控制台'
+  }
+})
+
 start()
 
 app.mount('#app')