feat(client): enhance createStorage behavior

plugins/frontend/auth/client/login.vue

@@ -11,9 +11,7 @@
     </template>
     <template v-else>
       <h1 v-if="secure">
-        <span :class="{ inactive: config.authType === 1 }" @click="config.authType = 0">平台账户登录</span>
-        /
-        <span :class="{ inactive: config.authType === 0 }" @click="config.authType = 1">用户名密码登录</span>
+        <k-choose :data="['平台账户登录', '用户名密码登录']" v-model="config.authType"></k-choose>
       </h1>
       <h1 v-else><span>平台账户登录</span></h1>
       <template v-if="config.authType === 0">
@@ -106,16 +104,6 @@ section.login {
     font-size: 1.5rem;
     margin: 2.5rem auto;
     cursor: default;
-    span {
-      transition: 0.3s ease;
-    }
-    span.inactive:hover {
-      cursor: pointer;
-      color: rgba(244, 244, 245, .8);
-    }
-    span:not(.inactive) {
-      color: rgba(244, 244, 245);
-    }
   }
 
   .token {

plugins/frontend/auth/client/utils.ts

@@ -9,7 +9,7 @@ interface AuthConfig extends Partial<UserAuth> {
   showPass?: boolean
 }
 
-export const config = createStorage<AuthConfig>('auth', '1.1', () => ({
+export const config = createStorage<AuthConfig>('auth', 1, () => ({
   authType: 0,
 }))
 

plugins/frontend/client/client/components/common/button.vue

@@ -31,6 +31,7 @@ function onClick(event: MouseEvent) {
 </script>
 
 <style lang="scss">
+
 @mixin apply-color($name) {
   &.#{$name} {
     background-color: var(--#{$name}) !important;
@@ -53,7 +54,7 @@ function onClick(event: MouseEvent) {
   border-radius: 0.4em;
   cursor: pointer;
   padding: 0.4em 1em;
-  transition: 0.3s ease;
+  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
   display: inline-block;
   &.round {
     border-radius: 50%;
@@ -115,16 +116,24 @@ function onClick(event: MouseEvent) {
     }
   }
 
-  .k-group > &:not(:first-child) {
+  .k-button-group > &:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .k-group > &:not(:last-child) {
+  .k-button-group > &:not(:last-child) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    &:not(:hover) {
+      border-right-width: 0;
+    }
+  }
+  .k-button-group > &:hover + & {
+    border-left-width: 0;
   }
-  *:not(.k-group) > & + & {
+
+  *:not(.k-button-group) > & + & {
     margin: 0 1rem;
   }
 }
+
 </style>

plugins/frontend/client/client/components/common/choose.vue

@@ -0,0 +1,47 @@
+<template>
+  <span class="k-choose">
+    <span class="k-choose-item"
+      v-for="(label, key) in data" :key="key"
+      :class="{ active: modelValue === key }"
+      @click="$emit('update:modelValue', key)">{{ label }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+
+defineProps<{
+  data: Record<string | number, string>
+  modelValue: string | number
+}>()
+
+defineEmits(['update:modelValue'])
+
+</script>
+
+<style lang="scss">
+
+.k-choose-item {
+  cursor: pointer;
+  position: relative;
+  color: var(--disabled);
+  transition: color 0.3s ease;
+
+  & + & {
+    margin-left: 2rem;
+
+    &::before {
+      content: '|';
+      color: var(--disabled);
+      left: -1rem;
+      position: absolute;
+      transition: color 0.3s ease;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.active {
+    color: var(--fg1);
+  }
+}
+
+</style>

plugins/frontend/client/client/components/common/index.ts

@@ -1,8 +1,10 @@
 import { App } from 'vue'
 import Button from './button.vue'
+import Choose from './choose.vue'
 import Input from './input.vue'
 
 export default function (app: App) {
   app.component('k-button', Button)
+  app.component('k-choose', Choose)
   app.component('k-input', Input)
 }

plugins/frontend/client/client/index.ts

@@ -222,10 +222,18 @@ export class Context {
   }
 }
 
-export function createStorage<T extends object>(key: string, version: string, fallback?: () => T) {
-  const storage = useLocalStorage('koishi.console.' + key, {})
+interface StorageData<T> {
+  version: number
+  data: T
+}
+
+export function createStorage<T extends object>(key: string, version: number, fallback?: () => T) {
+  const storage = useLocalStorage('koishi.console.' + key, {} as StorageData<T>)
+  const initial = fallback ? fallback() : {} as T
   if (storage.value['version'] !== version) {
-    storage.value = { version, data: fallback() }
+    storage.value = { version, data: initial }
+  } else {
+    storage.value.data = { ...initial, ...storage.value.data }
   }
   return reactive<T>(storage.value['data'])
 }

plugins/frontend/logger/client/index.ts

@@ -8,7 +8,7 @@ export default (ctx: Context) => {
     path: '/logs',
     name: '日志',
     icon: 'clipboard-list',
-    order: 400,
+    order: 0,
     authority: 4,
     fields: ['logs'],
     component: Logs,

plugins/frontend/manager/client/bots/index.vue

@@ -46,6 +46,7 @@ watch(() => store.bots, () => {
 section.page-bots {
   > aside {
     width: 20rem;
+
     .add {
       font-size: 1.15rem;
       text-align: center;

plugins/frontend/manager/client/bots/preview.vue

@@ -95,9 +95,7 @@ div.bot {
 
   > div.info {
     flex-grow: 1;
-
     margin-left: 1.25rem;
-
     display: flex;
     flex-direction: column;
     justify-content: space-around;
@@ -109,11 +107,6 @@ div.bot {
       vertical-align: -2px;
     }
   }
-
-  &.large {
-    padding: 10px;
-    width: 600px; height: 360px;
-  }
 }
 
 </style>

plugins/frontend/manager/client/utils.ts

@@ -8,7 +8,7 @@ interface ManagerConfig {
   showDepsOnly?: boolean
 }
 
-export const config = createStorage<ManagerConfig>('manager', '2.0', () => ({
+export const config = createStorage<ManagerConfig>('manager', 1, () => ({
   override: {},
   showInstalled: false,
   showDepsOnly: false,