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

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'

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
+}