From e81545e0ee59e2ea781ce32f5ca744d2db29f05c Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Fri, 31 May 2024 23:41:28 +0800
Subject: [PATCH] feat(client): enhance typings

---
 packages/client/app/settings/settings.vue     |   2 +-
 .../client/client/components/chat/image.vue   |  17 --
 .../client/client/components/chat/overlay.vue | 212 ------------------
 .../client/client/components/chat/utils.ts    |   5 -
 packages/client/client/components/index.ts    |   3 +-
 packages/client/client/components/slot.ts     |   9 +-
 packages/client/client/context.ts             |   4 +-
 packages/client/client/plugins/router.ts      |   7 -
 8 files changed, 10 insertions(+), 249 deletions(-)
 delete mode 100644 packages/client/client/components/chat/image.vue
 delete mode 100644 packages/client/client/components/chat/overlay.vue
 delete mode 100644 packages/client/client/components/chat/utils.ts

diff --git a/packages/client/app/settings/settings.vue b/packages/client/app/settings/settings.vue
index b4d123e..cc5caac 100644
--- a/packages/client/app/settings/settings.vue
+++ b/packages/client/app/settings/settings.vue
@@ -41,7 +41,7 @@ const ctx = useContext()
 
 interface Tree {
   id: string
-  label: string
+  label?: string
   children?: Tree[]
 }
 
diff --git a/packages/client/client/components/chat/image.vue b/packages/client/client/components/chat/image.vue
deleted file mode 100644
index cf9888a..0000000
--- a/packages/client/client/components/chat/image.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <img class="chat-image" :src="src" @click="handleClick"/>
-</template>
-
-<script lang="ts" setup>
-
-import { shared } from './utils'
-
-const props = defineProps<{ src: string }>()
-
-function handleClick(ev: MouseEvent) {
-  ev.preventDefault()
-  if (ev.metaKey) return window.open(props.src, '_blank')
-  shared.overlayImage = ev.target as HTMLImageElement
-}
-
-</script>
diff --git a/packages/client/client/components/chat/overlay.vue b/packages/client/client/components/chat/overlay.vue
deleted file mode 100644
index a35c598..0000000
--- a/packages/client/client/components/chat/overlay.vue
+++ /dev/null
@@ -1,212 +0,0 @@
-<template>
-  <transition name="overlay">
-    <div class="overlay-image-viewer" v-if="shared.overlayImage" @click="setImage(null)">
-      <span class="button left" :class="{ disabled: !siblings.prev }" @click.stop="setImage(siblings.prev)">
-        <k-icon name="chevron-left"/>
-      </span>
-      <span class="button right" :class="{ disabled: !siblings.next }" @click.stop="setImage(siblings.next)">
-        <k-icon name="chevron-right"/>
-      </span>
-      <span class="button bottom" @click.stop>
-        <el-tooltip placement="top" content="缩小" :offset="20">
-          <k-icon name="search-minus" @click="scale -= 0.2"/>
-        </el-tooltip>
-        <el-tooltip placement="top" content="放大" :offset="20">
-          <k-icon name="search-plus" @click="scale += 0.2"/>
-        </el-tooltip>
-        <el-tooltip placement="top" content="复原" :offset="20">
-          <k-icon name="expand" @click="scale = 1, rotate = 0"/>
-        </el-tooltip>
-        <el-tooltip placement="top" content="逆时针旋转" :offset="20">
-          <k-icon name="undo" @click="rotate -= 90"/>
-        </el-tooltip>
-        <el-tooltip placement="top" content="逆时针旋转" :offset="20">
-          <k-icon name="redo" @click="rotate += 90"/>
-        </el-tooltip>
-      </span>
-      <transition appear :duration="1" @before-appear="moveToOrigin" @after-appear="moveToCenter">
-        <img ref="img" :style="{ transform }" :src="shared.overlayImage.src"/>
-      </transition>
-    </div>
-  </transition>
-</template>
-
-<script lang="ts" setup>
-
-import { shared } from './utils'
-import { computed, watch, ref, onMounted, onBeforeUnmount } from 'vue'
-
-const scale = ref(1)
-const rotate = ref(0)
-const img = ref<HTMLImageElement>(null)
-
-const transform = computed(() => {
-  return `scale(${scale.value}) rotate(${rotate.value}deg)`
-})
-
-const siblings = computed(() => {
-  if (!shared.overlayImage) return
-  const elements = Array.from(document.querySelectorAll<HTMLImageElement>('.chat-image'))
-  const index = elements.indexOf(shared.overlayImage)
-  return {
-    prev: elements[index - 1],
-    next: elements[index + 1],
-  }
-})
-
-const defaultScale = computed(() => {
-  const { naturalHeight, naturalWidth } = shared.overlayImage
-  const maxHeight = innerHeight - paddingVertical * 2
-  const maxWidth = innerWidth - paddingHorizontal * 2
-  return Math.min(1, maxHeight / naturalHeight, maxWidth / naturalWidth)
-})
-
-watch(() => shared.overlayImage, (el, origin) => {
-  scale.value = 1
-  rotate.value = 0
-  if (!el) return moveToOrigin(img.value, origin)
-  if (img.value) {
-    img.value.style.transition = '0.3s transform ease'
-    moveToCenter(img.value)
-  }
-})
-
-function setImage(el: HTMLImageElement) {
-  if (el === undefined) return
-  shared.overlayImage = el
-}
-
-function moveToOrigin(el: HTMLImageElement, origin = shared.overlayImage) {
-  const { height, width } = origin
-  const { left, top } = origin.getBoundingClientRect()
-  el.style.width = width + 'px'
-  el.style.height = height + 'px'
-  el.style.left = left + 'px'
-  el.style.top = top + 'px'
-  el.style.transition = '0.3s ease'
-}
-
-const paddingVertical = 0
-const paddingHorizontal = 0
-
-function moveToCenter(el: HTMLImageElement) {
-  const { naturalHeight, naturalWidth } = shared.overlayImage
-  const scale = defaultScale.value
-  const width = naturalWidth * scale
-  const height = naturalHeight * scale
-  el.style.width = width + 'px'
-  el.style.height = height + 'px'
-  el.style.left = (innerWidth - width) / 2 + 'px'
-  el.style.top = (innerHeight - height) / 2 + 'px'
-}
-
-onMounted(() => {
-  document.addEventListener('keydown', onKeyDown)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keydown', onKeyDown)
-})
-
-function onKeyDown(ev: KeyboardEvent) {
-  if (!shared.overlayImage) return
-  ev.preventDefault()
-  if (ev.key === 'ArrowUp' || ev.key === 'ArrowLeft') {
-    setImage(siblings.value.prev)
-  } else if (ev.key === 'ArrowDown' || ev.key === 'ArrowRight') {
-    setImage(siblings.value.next)
-  } else if (ev.key === 'Escape') {
-    setImage(null)
-  } else if (ev.key === 'Enter') {
-    shared.overlayImage.offsetParent.scrollIntoView({ behavior: 'smooth' })
-    setImage(null)
-  }
-}
-
-</script>
-
-<style lang="scss">
-
-@use "sass:math";
-
-$buttonSize: 3rem;
-$buttonBg: #303133;
-
-.overlay-enter-from, .overlay-leave-to {
-  opacity: 0;
-}
-
-.overlay-enter, .overlay-leave {
-  opacity: 1;
-}
-
-.overlay-image-viewer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  right: 0;
-  z-index: 1000;
-  transition: 0.4s opacity ease;
-  user-select: none;
-  background-color: #0006;
-
-  .button {
-    position: absolute;
-    border-radius: $buttonSize;
-    cursor: pointer;
-    user-select: none;
-    opacity: 0.5;
-    font-size: math.div($buttonSize, 2);
-    height: $buttonSize;
-    background-color: $buttonBg;
-    display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    transition: 0.4s ease;
-
-    .k-icon {
-      transition: 0.4s ease;
-      height: 1.25rem;
-    }
-
-    &:not(.disabled):hover {
-      opacity: 0.8;
-    }
-
-    &:not(.disabled) .k-icon:hover {
-      color: rgba(244, 244, 245, .8);
-    }
-
-    @each $tag in left, right {
-      &.#{$tag} {
-        top: 50%;
-        z-index: 2000;
-        transform: translateY(-50%);
-        width: $buttonSize;
-        #{$tag}: $buttonSize;
-        .k-icon {
-          margin-#{$tag}: -3px;
-        }
-      }
-    }
-
-    &.bottom {
-      z-index: 2000;
-      bottom: $buttonSize;
-      width: $buttonSize * 6;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  img {
-    position: absolute;
-  }
-}
-
-</style>
diff --git a/packages/client/client/components/chat/utils.ts b/packages/client/client/components/chat/utils.ts
deleted file mode 100644
index 57ef49e..0000000
--- a/packages/client/client/components/chat/utils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { reactive } from 'vue'
-
-export const shared = reactive({
-  overlayImage: null as HTMLImageElement,
-})
diff --git a/packages/client/client/components/index.ts b/packages/client/client/components/index.ts
index 1ebaa3d..96cbf19 100644
--- a/packages/client/client/components/index.ts
+++ b/packages/client/client/components/index.ts
@@ -4,7 +4,6 @@ import components from '@cordisjs/components'
 import Element, { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 
 import common from './common'
-import ChatImage from './chat/image.vue'
 import * as icons from './icons'
 import layout from './layout'
 import link from './link'
@@ -24,7 +23,7 @@ export * from './slot'
 export * from 'vue-i18n'
 export * from '@cordisjs/components'
 
-export { icons, ChatImage }
+export { icons }
 
 export default function (app: App) {
   app.use(Element)
diff --git a/packages/client/client/components/slot.ts b/packages/client/client/components/slot.ts
index 643e4c3..5065b86 100644
--- a/packages/client/client/components/slot.ts
+++ b/packages/client/client/components/slot.ts
@@ -1,9 +1,9 @@
 import { useContext } from '../context'
-import { App, Component, defineComponent, h } from 'vue'
+import { App, Component, DefineComponent, defineComponent, h } from 'vue'
 
 export interface SlotItem {
   order?: number
-  component: Component
+  component: Component | DefineComponent
 }
 
 export interface SlotOptions extends SlotItem {
@@ -15,7 +15,10 @@ export interface SlotOptions extends SlotItem {
 
 export const KSlot = defineComponent({
   props: {
-    name: String,
+    name: {
+      type: String,
+      required: true,
+    },
     data: Object,
     single: Boolean,
   },
diff --git a/packages/client/client/context.ts b/packages/client/client/context.ts
index 6c4e1c3..f2576c3 100644
--- a/packages/client/client/context.ts
+++ b/packages/client/client/context.ts
@@ -75,8 +75,8 @@ export class Context extends cordis.Context {
     })
   }
 
-  wrapComponent(component?: Component) {
-    if (!component) return
+  wrapComponent(component: Component) {
+    if (!component) return null!
     const caller = this[Context.current] || this
     if (!caller.$entry) return component
     return defineComponent((props, { slots }) => {
diff --git a/packages/client/client/plugins/router.ts b/packages/client/client/plugins/router.ts
index 0bba183..5ea1b92 100644
--- a/packages/client/client/plugins/router.ts
+++ b/packages/client/client/plugins/router.ts
@@ -1,5 +1,4 @@
 import { createRouter, createWebHistory, START_LOCATION } from 'vue-router'
-import Overlay from '../components/chat/overlay.vue'
 import { Context } from '../context'
 import { insert, Service } from '../utils'
 import { Component, MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
@@ -90,7 +89,6 @@ export class Activity {
 
   disabled() {
     if (this.ctx.bail('activity', this)) return true
-    if (this.when && !this.when()) return true
     if (this.options.disabled?.()) return true
   }
 
@@ -148,11 +146,6 @@ export default class RouterService extends Service {
       if (result === to.fullPath) return
       return result
     })
-
-    this.slot({
-      type: 'global',
-      component: Overlay,
-    })
   }
 
   slot(options: SlotOptions) {