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

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 class="tr-feedback__operations-left">
+        <action-group
+          v-if="props.operations?.length"
+          :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 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>
+      <div class="tr-feedback__operations-right">
+        <action-group :max-num="props.actionsLimit" :show-tooltip="true" @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]"></icon-button>
+            <component v-else :is="action.icon"></component>
+          </action-group-item>
+        </action-group>
+      </div>
+    </div>
+    <div
+      v-if="(props.operations?.length && props.sources?.length) || (showSourceList && props.sources)"
+      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'

package/src/history/components/item-tag.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { HistoryItemTagProps } from '../index.type'
+
+const props = withDefaults(defineProps<HistoryItemTagProps>(), {
+  type: 'default',
+})
+</script>
+
+<template>
+  <div :class="['tr-history__item-tag', props.type]" :style="props.style">
+    <span>{{ props.text }}</span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-history__item-tag {
+  padding: 0 4px;
+  font-size: 12px;
+  line-height: 18px;
+  border-radius: 2px;
+
+  &.default {
+    color: rgb(25, 25, 25);
+    background-color: rgb(245, 245, 245);
+  }
+
+  &.success {
+    // TODO 成功
+    color: rgb(25, 25, 25);
+    background-color: rgb(245, 245, 245);
+  }
+
+  &.warning {
+    // TODO 警告
+    color: rgb(25, 25, 25);
+    background-color: rgb(245, 245, 245);
+  }
+
+  &.error {
+    color: rgb(242, 48, 48);
+    background-color: rgb(252, 227, 224);
+  }
+
+  &.info {
+    color: rgb(20, 118, 255);
+    background-color: rgb(222, 236, 255);
+  }
+}
+</style>

package/src/history/components/search-empty.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="tr-history__empty">
+    <span class="tr-history__empty-icon">
+      <IconEmptySearch />
+    </span>
+    <span class="tr-history__empty-text">{{ props.text }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IconEmptySearch } from '@opentiny/tiny-robot-svgs'
+
+const props = withDefaults(defineProps<{ text: string }>(), {
+  text: '暂无内容',
+})
+</script>
+
+<style lang="less" scoped>
+.tr-history__empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 84px;
+  padding-bottom: 0;
+
+  .tr-history__empty-icon {
+    font-size: 16px;
+  }
+
+  .tr-history__empty-text {
+    font-size: 12px;
+    line-height: 24px;
+    color: rgb(25, 25, 25);
+  }
+}
+</style>

package/src/history/composables/index.ts

@@ -0,0 +1 @@
+export * from './useEditItemTitle'

package/src/history/composables/useEditItemTitle.ts

@@ -0,0 +1,75 @@
+import { onClickOutside } from '@vueuse/core'
+import { ComponentPublicInstance, nextTick, ref, watchEffect } from 'vue'
+import { HistoryEvents, HistoryItem } from '../index.type'
+
+export const useEditItemTitle = (emit: HistoryEvents) => {
+  const editingItem = ref<Pick<HistoryItem, 'id' | 'title'> & { rawData: HistoryItem }>()
+
+  const handleEdit = (item: HistoryItem) => {
+    editingItem.value = {
+      id: item.id,
+      title: item.title,
+      rawData: item,
+    }
+  }
+
+  const inputRef = ref<HTMLInputElement | null>(null)
+
+  const handleEditorInputRef = (el: Element | ComponentPublicInstance | null) => {
+    if (!el) {
+      return
+    }
+
+    nextTick(() => {
+      inputRef.value = el as HTMLInputElement
+      inputRef.value.focus()
+    })
+  }
+
+  let stopFn: (() => void) | undefined = undefined
+
+  const handleConfirm = () => {
+    if (editingItem.value) {
+      if (editingItem.value.title !== editingItem.value.rawData.title) {
+        const { title, rawData } = editingItem.value
+        emit('item-title-change', title, rawData)
+      }
+      editingItem.value = undefined
+    }
+
+    stopFn?.()
+    stopFn = undefined
+  }
+
+  const handleCancel = () => {
+    editingItem.value = undefined
+    stopFn?.()
+    stopFn = undefined
+  }
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleConfirm()
+    } else if (e.key === 'Escape') {
+      handleCancel()
+    }
+  }
+
+  watchEffect(() => {
+    if (!inputRef.value) {
+      return
+    }
+
+    stopFn?.()
+    stopFn = onClickOutside(inputRef, () => {
+      handleConfirm()
+    })
+  })
+
+  return {
+    editingItem,
+    handleEdit,
+    handleEditorInputRef,
+    handleKeyDown,
+  }
+}

package/src/history/index.ts

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

package/src/history/index.type.ts

@@ -0,0 +1,50 @@
+import { CSSProperties } from 'vue'
+
+interface BaseHistoryProps {
+  activeTab?: string
+  searchBar?: boolean
+  searchQuery?: string
+  searchPlaceholder?: string
+  searchFn?: (query: string, item: HistoryItem) => boolean
+  selected?: string
+}
+
+export type SingleTabHistoryProps = {
+  tabTitle: string
+  data: HistoryGroup[]
+} & BaseHistoryProps
+
+export type MultiTabHistoryProps = {
+  tabs: {
+    title: string
+    id: string
+  }[]
+  data: Record<string, HistoryGroup[]>
+} & BaseHistoryProps
+
+export type HistoryProps = SingleTabHistoryProps | MultiTabHistoryProps
+
+export interface HistoryGroup<T = Record<string, unknown>> {
+  date: string
+  items: HistoryItem<T>[]
+}
+
+export interface HistoryItemTagProps {
+  text: string
+  type?: 'success' | 'warning' | 'error' | 'info' | 'default'
+  style?: CSSProperties
+}
+
+export interface HistoryItem<T = Record<string, unknown>> {
+  id: string
+  title: string
+  tag?: HistoryItemTagProps
+  data?: T
+}
+
+export interface HistoryEvents {
+  (e: 'close'): void
+  (e: 'item-click', item: HistoryItem): void
+  (e: 'item-title-change', newTitle: string, rawData: HistoryItem): void
+  (e: 'item-delete', item: HistoryItem): void
+}