@opentiny/tiny-robot 0.2.0-alpha.0 → 0.2.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-robot",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -16,12 +16,13 @@
     "vue": "^3.3.11"
   },
   "dependencies": {
-    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.0",
+    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.2",
     "@opentiny/vue": "^3.21.0",
     "@opentiny/vue-button": "^3.21.0",
     "@opentiny/vue-icon": "^3.22.0",
     "@opentiny/vue-input": "^3.21.0",
     "@opentiny/vue-tooltip": "^3.22.0",
+    "@vueuse/core": "^13.1.0",
     "markdown-it": "^14.1.0"
   },
   "devDependencies": {
@@ -39,5 +40,5 @@
     "vue": "^3.3.11",
     "vue-tsc": "^2.2.8"
   },
-  "gitHead": "3517724651afbbb05b1be20487a9f3341c06133c"
+  "gitHead": "f334d2ba1772fe0e2859d5f859980257e70f36e1"
 }

package/src/action-group/ActionGroup.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+import { IconMenu } from '@opentiny/tiny-robot-svgs'
+import TinyTooltip from '@opentiny/vue-tooltip'
+import { onClickOutside, useWindowSize } from '@vueuse/core'
+import { computed, nextTick, ref, useTemplateRef, VNode, watch } from 'vue'
+import IconButton from '../icon-button'
+import { ActionGroupEvents, ActionGroupProps, ActionGroupSlots } from './index.type'
+
+const props = defineProps<ActionGroupProps>()
+
+const slots = defineSlots<ActionGroupSlots>()
+
+const emit = defineEmits<ActionGroupEvents>()
+
+const children = computed(() => {
+  const defaultSlot = slots.default()
+
+  if (Array.isArray(defaultSlot)) {
+    if (defaultSlot.length === 1 && defaultSlot[0].type?.toString() === 'Symbol(v-fgt)') {
+      return defaultSlot[0].children as VNode[]
+    }
+
+    return defaultSlot
+  }
+
+  if (defaultSlot.type?.toString() === 'Symbol(v-fgt)') {
+    return defaultSlot.children as VNode[]
+  }
+
+  return [defaultSlot]
+})
+
+const maxNum = computed(() => {
+  const n = props.maxNum ?? Number.MAX_SAFE_INTEGER
+
+  return n > 0 ? n : Number.MAX_SAFE_INTEGER
+})
+
+const showMore = computed(() => {
+  return children.value.length > maxNum.value
+})
+
+const list = computed(() => {
+  if (showMore.value) {
+    return children.value.slice(0, maxNum.value)
+  }
+
+  return children.value
+})
+
+const moreList = computed(() => {
+  if (showMore.value) {
+    return children.value.slice(maxNum.value)
+  }
+
+  return []
+})
+
+const moreBtn = useTemplateRef('moreBtnRef')
+const dropDown = useTemplateRef('dropDownRef')
+const showDropdown = ref(false)
+
+const handleMoreClick = () => {
+  showDropdown.value = !showDropdown.value
+}
+
+onClickOutside(dropDown, (ev) => {
+  if (moreBtn.value?.contains(ev.target as Node)) {
+    return
+  }
+
+  showDropdown.value = false
+})
+
+const handleItemClick = (name: string) => {
+  emit('item-click', name)
+  showDropdown.value = false
+}
+
+const dropDownPlacement = ref('placement-bottom')
+const { height: windowHeight } = useWindowSize()
+
+const updateDropDownPlacement = () => {
+  if (!dropDown.value || !moreBtn.value) {
+    return 'placement-bottom'
+  }
+
+  const dropDownRect = dropDown.value.getBoundingClientRect()
+  const moreBtnRect = moreBtn.value.getBoundingClientRect()
+
+  dropDownPlacement.value =
+    moreBtnRect.bottom + dropDownRect.height + 16 > windowHeight.value ? 'placement-top' : 'placement-bottom'
+}
+
+watch(showDropdown, (show) => {
+  if (show) {
+    nextTick(() => {
+      updateDropDownPlacement()
+    })
+  }
+})
+
+watch(windowHeight, () => {
+  if (showDropdown.value) {
+    updateDropDownPlacement()
+  }
+})
+</script>
+
+<template>
+  <div class="tr-action-group">
+    <tiny-tooltip
+      v-for="(item, index) in list"
+      :key="index"
+      :content="item.props?.label"
+      effect="dark"
+      placement="top"
+      :open-delay="500"
+      :disabled="!props.showTooltip"
+    >
+      <span class="tr-action-group__btn-wrapper" @click="handleItemClick(item.props?.name)">
+        <component :is="item" />
+      </span>
+    </tiny-tooltip>
+    <tiny-tooltip
+      v-if="showMore"
+      content="更多"
+      effect="dark"
+      placement="top"
+      :open-delay="500"
+      :disabled="!props.showTooltip"
+    >
+      <span ref="moreBtnRef" class="tr-action-group__btn-wrapper" @click="handleMoreClick">
+        <slot name="moreBtn">
+          <icon-button :icon="IconMenu" />
+        </slot>
+        <transition name="tr-action-group-dropdown">
+          <ul v-show="showDropdown" ref="dropDownRef" :class="['tr-action-group__dropdown', dropDownPlacement]">
+            <li
+              class="tr-action-group__dropdown-item"
+              v-for="(item, index) in moreList"
+              :key="index"
+              @click.stop="handleItemClick(item.props?.name)"
+            >
+              <component v-if="!props.dropDownShowLabelOnly" :is="item" />
+              <span class="tr-action-group__dropdown-item-text">{{ item.props?.label }}</span>
+            </li>
+          </ul>
+        </transition>
+      </span>
+    </tiny-tooltip>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-action-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+
+  .tr-action-group__btn-wrapper {
+    display: inline-flex;
+    line-height: 0;
+    position: relative;
+  }
+
+  .tr-action-group__dropdown {
+    width: max-content;
+    position: absolute;
+    z-index: 100;
+    right: 0;
+    background-color: white;
+    padding: 4px;
+    border-radius: 12px;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
+
+    &.placement-top {
+      bottom: calc(100% + 8px);
+    }
+
+    &.placement-bottom {
+      top: calc(100% + 8px);
+    }
+
+    .tr-action-group__dropdown-item {
+      border-radius: 8px;
+      cursor: pointer;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 4px 16px 4px 8px;
+      gap: 4px;
+      transition: background-color 0.3s;
+
+      &:not(:first-child) {
+        margin-top: 4px;
+      }
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+
+      &:active {
+        background-color: rgba(0, 0, 0, 0.15);
+      }
+
+      & > * {
+        flex-shrink: 0;
+      }
+
+      &:has(> *:only-child) {
+        padding: 4px 16px;
+      }
+
+      .tr-action-group__dropdown-item-text {
+        font-size: 12px;
+        line-height: 20px;
+        color: rgb(25, 25, 25);
+      }
+
+      :deep(button) {
+        --tr-icon-button-hover-bg: unset;
+        --tr-icon-button-active-bg: unset;
+      }
+    }
+  }
+
+  // 下拉动画
+  .tr-action-group-dropdown {
+    &-enter-active,
+    &-leave-active {
+      transition: opacity 0.3s ease;
+    }
+
+    &-enter-from,
+    &-leave-to {
+      opacity: 0;
+    }
+
+    &-enter-to,
+    &-leave-from {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/src/action-group/ActionGroupItem.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { ActionGroupItemProps } from './index.type'
+
+defineProps<ActionGroupItemProps>()
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/src/action-group/index.ts

@@ -0,0 +1,25 @@
+import { App } from 'vue'
+import ActionGroup from './ActionGroup.vue'
+import ActionGroupItemComp from './ActionGroupItem.vue'
+
+ActionGroup.name = 'TrActionGroup'
+
+const install = function <T>(app: App<T>) {
+  app.component(ActionGroup.name!, ActionGroup)
+}
+
+ActionGroup.install = install
+
+export default ActionGroup as typeof ActionGroup & { install: typeof install }
+
+ActionGroupItemComp.name = 'TrActionGroupItem'
+
+const installActionGroupItem = function <T>(app: App<T>) {
+  app.component(ActionGroupItemComp.name!, ActionGroupItemComp)
+}
+
+ActionGroupItemComp.install = installActionGroupItem
+
+export const ActionGroupItem = ActionGroupItemComp as typeof ActionGroupItemComp & {
+  install: typeof installActionGroupItem
+}

package/src/action-group/index.type.ts

@@ -0,0 +1,21 @@
+import { VNode } from 'vue'
+
+export interface ActionGroupProps {
+  maxNum?: number
+  showTooltip?: boolean
+  dropDownShowLabelOnly?: boolean
+}
+
+export interface ActionGroupEvents {
+  (e: 'item-click', name: string): void
+}
+
+export interface ActionGroupSlots {
+  default: () => VNode | VNode[]
+  moreBtn: () => VNode
+}
+
+export interface ActionGroupItemProps {
+  name: string
+  label: string
+}

package/src/bubble/Bubble.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import markdownit from 'markdown-it'
+import { computed } from 'vue'
+import { BubbleProps, BubbleSlots } from './index.type'
+
+const props = withDefaults(defineProps<BubbleProps>(), {
+  content: '',
+  placement: 'start',
+  type: 'text',
+  maxWidth: '80%',
+})
+
+const slots = defineSlots<BubbleSlots>()
+
+const markdownItInstance = computed(() => {
+  return markdownit(props.mdConfig || {})
+})
+
+const bubbleContent = computed(() => {
+  if (props.type === 'markdown') {
+    return markdownItInstance.value.render(props.content)
+  }
+  return props.content
+})
+
+const placementStart = computed(() => props.placement === 'start')
+</script>
+
+<template>
+  <div
+    :class="[
+      'tr-bubble',
+      {
+        'placement-start': placementStart,
+        'placement-end': !placementStart,
+      },
+    ]"
+  >
+    <div v-if="props.avatar" class="tr-bubble__avatar">
+      <component :is="props.avatar"></component>
+    </div>
+    <div class="tr-bubble__content-wrapper">
+      <slot v-if="props.loading" name="loading" :bubble-props="props">
+        <div class="tr-bubble__loading">
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </slot>
+      <div v-else :class="['tr-bubble__content']">
+        <div class="tr-bubbule__body">
+          <slot :bubble-props="props">
+            <span v-if="props.type === 'markdown'" v-html="bubbleContent"></span>
+            <span v-else>{{ bubbleContent }}</span>
+            <span v-if="props.aborted" class="tr-bubbule__aborted">（用户停止）</span>
+          </slot>
+        </div>
+        <div v-if="slots.footer" class="tr-bubbule__footer">
+          <slot name="footer" :bubble-props="props"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-bubble {
+  display: flex;
+  gap: 16px;
+  max-width: v-bind('props.maxWidth');
+
+  &.placement-start {
+    flex-direction: row;
+  }
+
+  &.placement-end {
+    flex-direction: row-reverse;
+    margin-left: auto;
+  }
+}
+
+.tr-bubble__avatar {
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tr-bubble__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+
+  span {
+    height: 8px;
+    width: 8px;
+    margin: 0 2px;
+    background-color: #bbb;
+    border-radius: 50%;
+    display: inline-block;
+    animation: typing 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: 0s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+
+  @keyframes typing {
+    0%,
+    80%,
+    100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+  }
+}
+
+.tr-bubble__content {
+  background-color: white;
+  padding: 16px 24px;
+  border-radius: 24px;
+  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
+
+  .tr-bubbule__body {
+    color: rgb(25, 25, 25);
+    font-size: 16px;
+    line-height: 26px;
+    word-break: break-word;
+  }
+
+  .tr-bubbule__aborted {
+    color: rgb(128, 128, 128);
+    font-size: 14px;
+  }
+
+  .tr-bubbule__footer {
+    margin-top: 12px;
+  }
+}
+</style>

package/src/bubble/BubbleList.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { useScroll } from '@vueuse/core'
+import { computed, useTemplateRef, watch } from 'vue'
+import Bubble from './Bubble.vue'
+import { BubbleListProps, BubbleProps, BubbleSlots } from './index.type'
+
+const props = withDefaults(defineProps<BubbleListProps>(), {})
+
+const scrollContainerRef = useTemplateRef<HTMLDivElement>('scrollContainer')
+const { y } = useScroll(scrollContainerRef, {
+  behavior: 'smooth',
+  throttle: 100,
+})
+const lastBubble = computed(() => props.items.at(-1))
+
+watch([() => props.items.length, () => lastBubble.value?.content], () => {
+  if (!props.autoScroll || !scrollContainerRef.value) {
+    return
+  }
+
+  y.value = scrollContainerRef.value.scrollHeight
+})
+
+const getItemProps = (item: BubbleProps & { slots?: BubbleSlots }): BubbleProps => {
+  const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
+  const { slots: _roleSlots, ...rest } = defaultConfig
+  const { slots: _itemSlots, ...restItem } = item
+  return { ...rest, ...restItem }
+}
+
+const getItemSlots = (item: BubbleProps & { slots?: BubbleSlots }): BubbleSlots => {
+  const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
+  return { ...defaultConfig.slots, ...item.slots }
+}
+</script>
+
+<template>
+  <div class="tr-bubble-list" ref="scrollContainer">
+    <Bubble v-for="(item, index) in props.items" :key="item.id || index" v-bind="getItemProps(item)">
+      <template v-for="(_, slotName) in getItemSlots(item)" #[slotName]="slotProps" :key="slotName">
+        <component :is="getItemSlots(item)[slotName]" v-bind="slotProps" />
+      </template>
+    </Bubble>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-bubble-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow-y: auto;
+  padding: 16px;
+}
+</style>

package/src/bubble/index.ts

@@ -1,6 +1,6 @@
 import { App } from 'vue'
-import BubbleComp from './bubble.vue'
-import BubbleListComp from './bubble-list.vue'
+import BubbleComp from './Bubble.vue'
+import BubbleListComp from './BubbleList.vue'
 
 BubbleComp.name = 'TrBubble'
 

package/src/bubble/index.type.ts

@@ -1,13 +1,5 @@
 import { Options as MarkdownItOptions } from 'markdown-it'
-import { Component, CSSProperties, VNode } from 'vue'
-
-export interface BubbleActionOptions {
-  name: 'copy' | 'refresh' | string
-  vnode?: VNode | Component
-  show?: boolean | ((props: BubbleProps) => boolean)
-}
-
-export type BubbleAction = 'copy' | 'refresh' | BubbleActionOptions
+import { CSSProperties, VNode } from 'vue'
 
 export type BubblePalcement = 'start' | 'end'
 
@@ -33,28 +25,22 @@ export interface BubbleProps {
    * type 为 'markdown' 时，markdown 的配置项
    */
   mdConfig?: MarkdownItOptions
-
-  actions?: BubbleAction[]
   // 样式相关
   maxWidth?: CSSProperties['maxWidth']
 }
 
 export interface BubbleSlots {
-  default: () => unknown
-  footer: () => unknown
-  loading: () => unknown
+  default?: (slotProps: { bubbleProps: BubbleProps }) => unknown
+  footer?: (slotProps: { bubbleProps: BubbleProps }) => unknown
+  loading?: (slotProps: { bubbleProps: BubbleProps }) => unknown
 }
 
-export interface BubbleEvents {
-  (e: 'copy', result: boolean): void
-  (e: 'refresh'): void
-  (e: 'action', name: string, ...args: unknown[]): void
+export type BubbleRoleConfig = Pick<BubbleProps, 'placement' | 'avatar' | 'type' | 'mdConfig' | 'maxWidth'> & {
+  slots?: BubbleSlots
 }
 
-export type BubbleRoleConfig = Pick<BubbleProps, 'placement' | 'avatar' | 'type' | 'mdConfig' | 'actions' | 'maxWidth'>
-
 export interface BubbleListProps {
-  items: BubbleProps[]
+  items: (BubbleProps & { slots?: BubbleSlots })[]
   /**
    * 每个角色的默认配置项
    */

package/src/container/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { IconCancelFullScreen, IconClose, IconFullScreen } from '@opentiny/tiny-robot-svgs'
 import { computed } from 'vue'
+import IconButton from '../icon-button'
 import { ContainerProps, ContainerSlots } from './index.type'
 
 const show = defineModel<ContainerProps['show']>('show', { required: true })
@@ -22,17 +23,16 @@ const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFull
       </slot>
       <div class="tr-container__header-operations">
         <slot name="operations"></slot>
-        <button class="icon-btn" @click="$emit('update:fullscreen', !fullscreen)">
-          <IconFullScreenSwitcher />
-        </button>
-        <button class="icon-btn" @click="$emit('update:show', false)">
-          <IconClose />
-        </button>
+        <icon-button
+          size="28"
+          svg-size="20"
+          :icon="IconFullScreenSwitcher"
+          @click="$emit('update:fullscreen', !fullscreen)"
+        ></icon-button>
+        <icon-button size="28" svg-size="20" :icon="IconClose" @click="$emit('update:show', false)"></icon-button>
       </div>
     </div>
-    <div class="tr-container__body">
-      <slot></slot>
-    </div>
+    <slot></slot>
     <div class="tr-container__footer">
       <slot name="footer"></slot>
     </div>
@@ -95,35 +95,9 @@ const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFull
   .tr-container__header-operations {
     display: flex;
     gap: 8px;
-
-    button.icon-btn {
-      width: 28px;
-      height: 28px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      border: none;
-      border-radius: 8px;
-      cursor: pointer;
-      padding: 0;
-      transition: background-color 0.3s;
-
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.04);
-      }
-
-      &:active {
-        background-color: rgba(0, 0, 0, 0.15);
-      }
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-    }
   }
 
-  .tr-container__body {
+  .tr-container__header + :slotted(*) {
     flex: 1;
     overflow-y: auto;
   }