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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/tiny-robot",
-  "version": "0.1.0",
+  "version": "0.2.0-alpha.0",
   "publishConfig": {
     "access": "public"
   },
@@ -16,14 +16,13 @@
     "vue": "^3.3.11"
   },
   "dependencies": {
-    "@opentiny/tiny-robot-svgs": "0.1.0",
+    "@opentiny/tiny-robot-svgs": "0.2.0-alpha.0",
     "@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",
-    "markdown-it": "^14.1.0",
-    "vue": "^3.3.11"
+    "markdown-it": "^14.1.0"
   },
   "devDependencies": {
     "@opentiny/vue-vite-import": "^1.3.0",
@@ -40,5 +39,5 @@
     "vue": "^3.3.11",
     "vue-tsc": "^2.2.8"
   },
-  "gitHead": "ff5f5ae32d52a6298401cbd9c7f70f0b0c5253e3"
+  "gitHead": "3517724651afbbb05b1be20487a9f3341c06133c"
 }

package/src/bubble/bubble-list.vue

@@ -21,9 +21,7 @@ watch([() => props.items.length, () => lastBubble.value?.content], () => {
 
 const getItemProps = (item: BubbleProps): BubbleProps => {
   const defaultConfig = item.role ? props.roles?.[item.role] || {} : {}
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { id, ...rest } = item
-  return { ...defaultConfig, ...rest }
+  return { ...defaultConfig, ...item }
 }
 </script>
 

package/src/bubble/index.type.ts

@@ -16,7 +16,7 @@ export interface BubbleProps {
    * 气泡内容
    */
   content?: string
-  id?: string
+  id?: string | number | symbol
   /**
    * 气泡位置
    */

package/src/container/index.ts

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

package/src/container/index.type.ts

@@ -0,0 +1,17 @@
+export interface ContainerProps {
+  /**
+   * model:show
+   */
+  show: boolean
+  /**
+   * model:fullscreen
+   */
+  fullscreen?: boolean
+}
+
+export interface ContainerSlots {
+  default: () => unknown
+  title: () => unknown
+  operations: () => unknown
+  footer: () => unknown
+}

package/src/container/index.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { IconCancelFullScreen, IconClose, IconFullScreen } from '@opentiny/tiny-robot-svgs'
+import { computed } from 'vue'
+import { ContainerProps, ContainerSlots } from './index.type'
+
+const show = defineModel<ContainerProps['show']>('show', { required: true })
+const fullscreen = defineModel<ContainerProps['fullscreen']>('fullscreen')
+
+defineSlots<ContainerSlots>()
+
+const IconFullScreenSwitcher = computed(() => (fullscreen.value ? IconCancelFullScreen : IconFullScreen))
+</script>
+
+<template>
+  <div class="tr-container">
+    <div class="tr-container__dragging-bar-wrapper">
+      <div class="tr-container__dragging-bar"></div>
+    </div>
+    <div class="tr-container__header">
+      <slot name="title">
+        <h3 class="tr-container__title">OpenTiny NEXT</h3>
+      </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>
+      </div>
+    </div>
+    <div class="tr-container__body">
+      <slot></slot>
+    </div>
+    <div class="tr-container__footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.tr-container {
+  --tr-container-width: 480px;
+
+  background-color: rgb(248, 248, 248);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: v-bind('fullscreen? "0" : "unset"');
+  width: v-bind('fullscreen? "unset" : "var(--tr-container-width)"');
+  z-index: v-bind('show? "100":"-1"');
+  opacity: v-bind('show? "1":"0"');
+  display: flex;
+  flex-direction: column;
+
+  .tr-container__dragging-bar-wrapper {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 6px;
+
+    // TODO 拖拽条的逻辑
+    .tr-container__dragging-bar {
+      width: 40px;
+      height: 4px;
+      background-color: rgb(217, 217, 217);
+      border-radius: 999px;
+      cursor: grab;
+    }
+  }
+
+  .tr-container__header {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 4px 24px;
+  }
+
+  .tr-container__title {
+    margin: 0;
+    padding: 0;
+    color: rgb(25, 25, 25);
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .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 {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .tr-container__footer {
+    flex-shrink: 0;
+  }
+}
+</style>

package/src/index.ts

@@ -1,17 +1,18 @@
 import { App } from 'vue'
 import { Bubble, BubbleList } from './bubble'
+import Container from './container'
 import Conversations from './conversations'
 import { Prompt, Prompts } from './prompts'
+import Question from './question'
 import Sender from './sender'
 import Welcome from './welcome'
-import Question from './question'
 
 export * from './bubble/index.type'
 export * from './prompts/index.type'
 export * from './sender/index.type'
 export * from './welcome/index.type'
 
-const components = [Bubble, BubbleList, Conversations, Prompt, Prompts, Sender, Welcome, Question]
+const components = [Bubble, BubbleList, Container, Conversations, Prompt, Prompts, Question, Sender, Welcome]
 
 export default {
   install<T>(app: App<T>) {
@@ -27,6 +28,8 @@ export {
   Bubble as TrBubble,
   BubbleList,
   BubbleList as TrBubbleList,
+  Container,
+  Container as TrContainer,
   Conversations,
   Conversations as TrConversations,
   Prompt,

package/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}