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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-robot",
-  "version": "0.2.0-alpha.0",
+  "version": "0.2.0-alpha.1",
   "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.1",
     "@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": "3000951723ed8b1caa1361ebac131229bec9c237"
 }

package/src/action-group/ActionGroup.vue

@@ -0,0 +1,232 @@
+<script setup lang="ts">
+import { IconMenu } from '@opentiny/tiny-robot-svgs'
+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">
+    <span
+      v-for="(item, index) in list"
+      :key="index"
+      class="tr-action-group__btn-wrapper"
+      @click="handleItemClick(item.props?.name)"
+    >
+      <component :is="item" />
+    </span>
+    <span v-if="showMore" ref="moreBtnRef" class="tr-action-group__btn-wrapper" @click="handleMoreClick">
+      <slot name="moreBtn">
+        <icon-button :icon="IconMenu" tooltip="更多" />
+      </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>
+  </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,20 @@
+import { VNode } from 'vue'
+
+export interface ActionGroupProps {
+  maxNum?: number
+  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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import markdownit from 'markdown-it'
-import { computed, defineComponent, useSlots } from 'vue'
-import { BubbleActionOptions, BubbleEvents, BubbleProps, BubbleSlots } from './index.type'
+import { computed, useSlots } from 'vue'
 import { CopyAction, RefreshAction } from './components/actions'
+import { BubbleActionOptions, BubbleEvents, BubbleProps, BubbleSlots } from './index.type'
 
 const props = withDefaults(defineProps<BubbleProps>(), {
   content: '',
@@ -26,16 +26,6 @@ const bubbleContent = computed(() => {
 
 const placementStart = computed(() => props.placement === 'start')
 
-const AvatarComp = computed(() => {
-  if (!props.avatar) {
-    return null
-  }
-
-  return defineComponent(() => {
-    return () => props.avatar
-  })
-})
-
 const defaultActionsMap = new Map<string, BubbleActionOptions>([
   [
     'copy',
@@ -99,8 +89,8 @@ const handleActionClick = (name: string, ...args: unknown[]) => {
       },
     ]"
   >
-    <div v-if="AvatarComp" class="tr-bubble__avatar">
-      <component :is="AvatarComp"></component>
+    <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">

package/src/container/index.vue

@@ -117,8 +117,7 @@ const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFull
       }
 
       svg {
-        width: 20px;
-        height: 20px;
+        font-size: 20px;
       }
     }
   }

package/src/feedback/components/SourceList.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { IconArrowUp } from '@opentiny/tiny-robot-svgs'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    sources: { label: string; link: string }[]
+    linesLimit?: number
+  }>(),
+  {
+    linesLimit: Number.MAX_SAFE_INTEGER,
+  },
+)
+
+const showAll = ref(false)
+const pillRefs = ref<(HTMLElement | null)[]>([])
+const morePillIndex = ref<number | null>(null)
+
+const updateMoreIndex = () => {
+  nextTick(() => {
+    const tops = pillRefs.value.map((el) => el?.offsetTop || 0)
+    const uniqueTops = Array.from(new Set(tops))
+
+    if (uniqueTops.length > props.linesLimit) {
+      // 超过 linesLimit 行，找到第 linesLimit 行最后一个的index
+      const lastLineTop = uniqueTops[props.linesLimit - 1]
+      const lastIndex = tops.lastIndexOf(lastLineTop)
+      morePillIndex.value = lastIndex
+    } else {
+      morePillIndex.value = null
+    }
+  })
+}
+
+const leftPillCount = computed(() => {
+  return props.sources.length - (morePillIndex.value || 0)
+})
+
+onMounted(updateMoreIndex)
+
+watch(() => props.sources, updateMoreIndex)
+
+const setPillRef = (el: HTMLElement | null, idx: number) => {
+  if (el) {
+    pillRefs.value[idx] = el
+  }
+}
+</script>
+
+<template>
+  <div class="tr-feedback__source-list">
+    <template v-for="(source, index) in props.sources" :key="index">
+      <a
+        v-if="!morePillIndex || showAll || index < morePillIndex"
+        class="pill"
+        :href="source.link"
+        target="_blank"
+        :ref="(el) => setPillRef(el as HTMLElement, index)"
+      >
+        {{ source.label }}
+      </a>
+      <span v-if="morePillIndex && !showAll && index === morePillIndex" class="pill" @click="showAll = true">
+        {{ leftPillCount }}+
+      </span>
+    </template>
+    <span v-if="showAll" class="pill collapse-pill" @click="showAll = false">
+      <IconArrowUp />
+    </span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-feedback__source-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+
+  .pill {
+    padding: 4px 12px;
+    font-size: 12px;
+    line-height: 20px;
+    border-radius: 999px;
+    border: none;
+    background-color: rgba(20, 118, 255, 0.06);
+    color: rgb(20, 118, 255);
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &.collapse {
+      font-size: 16px;
+    }
+  }
+
+  .collapse-pill {
+    padding: 0;
+    font-size: 16px;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: rgba(20, 118, 255, 0.12);
+    }
+  }
+}
+</style>

package/src/feedback/components/index.ts

@@ -0,0 +1 @@
+export { default as SourceList } from './SourceList.vue'

package/src/feedback/index.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue'
+import Feedback from './index.vue'
+
+Feedback.name = 'TrFeedback'
+
+const install = function <T>(app: App<T>) {
+  app.component(Feedback.name!, Feedback)
+}
+
+Feedback.install = install
+
+export default Feedback as typeof Feedback & { install: typeof install }

package/src/feedback/index.type.ts

@@ -0,0 +1,27 @@
+import { Component, VNode } from 'vue'
+
+export interface FeedbackProps {
+  operations?: {
+    name: string
+    label: string
+    onClick?: () => void
+  }[]
+  operationsLimit?: number
+  actions?: {
+    name: string
+    label: string
+    icon?: 'copy' | 'refresh' | 'like' | 'dislike' | VNode | Component
+    onClick?: () => void
+  }[]
+  actionsLimit?: number
+  sources?: {
+    label: string
+    link: string
+  }[]
+  sourcesLinesLimit?: number
+}
+
+export interface FeedbackEvents {
+  (e: 'operation', name: string): void
+  (e: 'action', name: string): void
+}

package/src/feedback/index.vue

@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+import { IconArrowDown, IconArrowUp, IconCopy, IconDislike, IconLike, IconRefresh } from '@opentiny/tiny-robot-svgs'
+import TinyButton from '@opentiny/vue-button'
+import { ref } from 'vue'
+import ActionGroup, { ActionGroupItem } from '../action-group'
+import IconButton from '../icon-button'
+import { SourceList } from './components'
+import type { FeedbackEvents, FeedbackProps } from './index.type'
+
+const props = withDefaults(defineProps<FeedbackProps>(), {
+  operationsLimit: Number.MAX_SAFE_INTEGER,
+  actionsLimit: Number.MAX_SAFE_INTEGER,
+  sourcesLinesLimit: Number.MAX_SAFE_INTEGER,
+})
+
+const iconMap = {
+  copy: IconCopy,
+  refresh: IconRefresh,
+  like: IconLike,
+  dislike: IconDislike,
+}
+
+const emit = defineEmits<FeedbackEvents>()
+
+const handleOperation = (name: string) => {
+  props.operations?.find((operation) => operation.name === name)?.onClick?.()
+  emit('operation', name)
+}
+
+const handleAction = (name: string) => {
+  props.actions?.find((action) => action.name === name)?.onClick?.()
+  emit('action', name)
+}
+
+const showSourceList = ref(false)
+
+const handleSourceList = () => {
+  showSourceList.value = !showSourceList.value
+}
+</script>
+
+<template>
+  <div class="tr-feedback">
+    <div class="tr-feedback__operations">
+      <div v-if="props.operations?.length" class="tr-feedback__operations-left">
+        <action-group
+          :max-num="props.operationsLimit"
+          :drop-down-show-label-only="true"
+          @item-click="handleOperation"
+          class="tr-feedback__operations-left-action-group"
+        >
+          <action-group-item
+            v-for="operation in props.operations"
+            :key="operation.name"
+            :name="operation.name"
+            :label="operation.label"
+          >
+            <tiny-button round :reset-time="0" size="mini">
+              {{ operation.label }}
+            </tiny-button>
+          </action-group-item>
+          <template #moreBtn>
+            <tiny-button round size="mini" :reset-time="0" class="tr-feedback__operations-more-btn">
+              <span>更多</span>
+              <icon-arrow-down />
+            </tiny-button>
+          </template>
+        </action-group>
+      </div>
+      <div v-else-if="props.sources?.length">
+        <span class="tr-feedback__source" @click="handleSourceList">
+          <span>{{ props.sources?.length }}条来源</span>
+          <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
+        </span>
+      </div>
+      <div class="tr-feedback__operations-right">
+        <action-group :max-num="props.actionsLimit" @item-click="handleAction">
+          <action-group-item
+            v-for="action in props.actions"
+            :key="action.name"
+            :name="action.name"
+            :label="action.label"
+          >
+            <icon-button
+              v-if="typeof action.icon === 'string'"
+              :icon="iconMap[action.icon]"
+              :tooltip="action.label"
+            ></icon-button>
+            <component v-else :is="action.icon"></component>
+          </action-group-item>
+        </action-group>
+      </div>
+    </div>
+    <div class="tr-feedback__footer">
+      <div v-if="props.operations?.length && props.sources?.length">
+        <span class="tr-feedback__source" @click="handleSourceList">
+          <span>{{ props.sources?.length }}条来源</span>
+          <component :is="showSourceList ? IconArrowUp : IconArrowDown" />
+        </span>
+      </div>
+      <source-list
+        v-if="showSourceList && props.sources"
+        :sources="props.sources"
+        :lines-limit="props.sourcesLinesLimit"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-feedback {
+  .tr-feedback__operations {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+
+    .tr-feedback__operations-left {
+      .tr-feedback__operations-left-action-group {
+        gap: 8px;
+      }
+
+      .tr-feedback__operations-more-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+
+        svg {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .tr-feedback__operations-right {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+  }
+  .tr-feedback__footer {
+    margin-top: 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .tr-feedback__source {
+    height: 24px;
+    display: inline-flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 20px;
+    color: rgb(128, 128, 128);
+    cursor: pointer;
+    gap: 2px;
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    svg {
+      font-size: 16px;
+    }
+  }
+}
+</style>

package/src/history/components/index.ts

@@ -0,0 +1,2 @@
+export { default as ItemTag } from './item-tag.vue'
+export { default as SearchEmpty } from './search-empty.vue'