@tencentcloud/ai-desk-customer-vue 0.1.0

package/components/common/Dialog/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div
+    v-if="showDialog"
+    class="dialog"
+    :class="[!isPC ? 'dialog-h5' : '', center ? 'center' : '']"
+    @click.stop.prevent="toggleView(clickType.OUTSIDE)"
+  >
+    <main
+      class="dialog-main"
+      :class="[!backgroundDialog ? 'dialog-main-back' : '']"
+      @click.stop.prevent="toggleView(clickType.INSIDE)"
+    >
+      <header
+        v-if="isHeaderShowDialog"
+        class="dialog-main-header"
+      >
+        <h1 class="dialog-main-title">
+          {{ showTitle }}
+        </h1>
+        <i
+          class="icon icon-close"
+          @click="close"
+        />
+      </header>
+      <div
+        class="dialog-main-content"
+        :class="[isUniFrameWork && isH5 ? 'dialog-main-content-uniapp' : '']"
+      >
+        <slot />
+      </div>
+      <footer
+        v-if="isFooterShowDialog"
+        class="dialog-main-footer"
+      >
+        <button
+          class="btn btn-cancel"
+          @click="close"
+        >
+          {{ TUITranslateService.t("component.取消") }}
+        </button>
+        <button
+          class="btn btn-default"
+          @click="submit"
+        >
+          {{ TUITranslateService.t("component.确定") }}
+        </button>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import vue from '../../../adapter-vue';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isPC, isH5, isUniFrameWork } from '../../../utils/env';
+const { ref, watchEffect } = vue;
+const clickType = {
+  OUTSIDE: 'outside',
+  INSIDE: 'inside',
+};
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  isHeaderShow: {
+    type: Boolean,
+    default: true,
+  },
+  isFooterShow: {
+    type: Boolean,
+    default: true,
+  },
+  background: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  center: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const showDialog = ref(false);
+const isHeaderShowDialog = ref(true);
+const isFooterShowDialog = ref(true);
+const backgroundDialog = ref(true);
+const showTitle = ref('');
+
+watchEffect(() => {
+  showDialog.value = props.show;
+  showTitle.value = props.title;
+  isHeaderShowDialog.value = props.isHeaderShow;
+  isFooterShowDialog.value = props.isFooterShow;
+  backgroundDialog.value = props.background;
+});
+
+const emit = defineEmits(['update:show', 'submit']);
+
+const toggleView = (type: string) => {
+  if (type === clickType.OUTSIDE) {
+    close();
+  }
+};
+
+const close = () => {
+  showDialog.value = !showDialog.value;
+  emit('update:show', showDialog.value);
+};
+
+const submit = () => {
+  emit('submit');
+  close();
+};
+</script>
+<style lang="scss" scoped src="./style/dialog.scss"></style>

package/components/common/Dialog/style/color.scss

@@ -0,0 +1,43 @@
+.dialog {
+  background: rgba(0, 0, 0, .3);
+
+  &-main {
+    background: #FFF;
+
+    &-header {
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-title {
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color: #333;
+    }
+
+    &-back {
+      background: none;
+    }
+
+    &-content {
+      font-weight: 400;
+      color: #333;
+    }
+  }
+}
+
+.btn {
+  font-weight: 400;
+  color: #FFF;
+  letter-spacing: 0;
+
+  &-cancel {
+    border: 1px solid #ddd;
+    color: #666;
+  }
+
+  &-default {
+    background: #006EFF;
+    border: 1px solid #006EFF;
+  }
+}

package/components/common/Dialog/style/dialog.scss

@@ -0,0 +1,4 @@
+@import '../../common';
+@import "./color";
+@import "./web";
+@import "./h5";

package/components/common/Dialog/style/h5.scss

@@ -0,0 +1,56 @@
+.dialog-h5 {
+  height: 100%;
+  top: 0;
+  align-items: inherit;
+
+  .dialog {
+    &-main {
+      border-radius: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      width: 100%;
+      min-height: 80px;
+      min-width: 120px;
+
+      &-content {
+        flex: 1;
+        min-width: 0;
+        min-height: 0;
+        overflow: hidden;
+        text-align: center;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 0;
+
+        &-uniapp {
+          padding: 40px 0;
+        }
+      }
+
+      &-footer {
+        border-top: 1px solid #DDD;
+
+        .btn {
+          flex: 1;
+          margin: 0;
+          background: none;
+          border-right: 1px solid #DDD;
+
+          &-default {
+            color: #FF584C;
+            border: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.center {
+  align-items: center;
+  padding: 20px;
+  box-sizing: border-box;
+}

package/components/common/Dialog/style/web.scss

@@ -0,0 +1,61 @@
+.dialog {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 6;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &-main {
+    min-width: 368px;
+    border-radius: 10px;
+    padding: 20px 30px;
+
+    &-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    &-title {
+      font-size: 16px;
+      line-height: 30px;
+    }
+
+    &-content {
+      font-size: 14px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 20px;
+    }
+
+    &-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.btn {
+  padding: 8px 20px;
+  margin: 0 6px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+  text-align: center;
+  line-height: 20px;
+
+  &:disabled {
+    opacity: 0.3;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+}

package/components/common/Drawer/index.vue

@@ -0,0 +1,164 @@
+<template>
+  <Overlay
+    ref="overlayDomInstanceRef"
+    :visible="props.visible"
+    :useMask="props.useMask"
+    :maskColor="props.overlayColor"
+    :isFullScreen="props.isFullScreen"
+    @onOverlayClick="onOverlayClick"
+  >
+    <div
+      v-if="isDrawerShow"
+      ref="drawerDomRef"
+      :class="{
+        drawer: true,
+        'origin-bottom': props.popDirection === 'bottom',
+        'origin-right': props.popDirection === 'right',
+        'slide-bottom': visible && props.popDirection === 'bottom',
+        'slide-right': visible && props.popDirection === 'right',
+      }"
+      :style="{
+        minHeight: styles.minHeight,
+        maxHeight: styles.maxHeight,
+        borderRadius: styles.borderRadius,
+        boxShadow: styles.boxShadow,
+        width: styles.width,
+      }"
+    >
+      <div class="drawer-container">
+        <slot />
+      </div>
+    </div>
+  </Overlay>
+</template>
+
+<script setup lang="ts">
+import vue from '../../../adapter-vue';
+import Overlay from '../../common/Overlay/index.vue';
+const { ref, watch } = vue;
+
+interface IProps {
+  visible: boolean;
+  popDirection: 'top' | 'right' | 'bottom' | 'left';
+  useMask?: boolean;
+  isFullScreen?: boolean | undefined;
+  overlayColor?: string | undefined;
+  drawerStyle?: {
+    bottom?: Record<string, any> | undefined;
+    right?: Record<string, any> | undefined;
+    left?: Record<string, any> | undefined;
+    top?: Record<string, any> | undefined;
+  };
+}
+
+interface IEmits {
+  (e: 'onOverlayClick', event: Event): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  visible: true,
+  useMask: true,
+  isFullScreen: true,
+  popDirection: 'bottom',
+  drawerStyle: () => ({}),
+});
+
+const drawerDomRef = ref<HTMLElement>();
+const overlayDomInstanceRef = ref<InstanceType<typeof Overlay>>();
+const isDrawerShow = ref<boolean>(false);
+
+const styles = ref(props.drawerStyle[props.popDirection] || {});
+
+watch(
+  () => props.visible,
+  (visible: boolean) => {
+    if (visible) {
+      isDrawerShow.value = true;
+    } else {
+      setTimeout(() => {
+        isDrawerShow.value = false;
+      }, 150);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+function onOverlayClick(e: Event) {
+  emits('onOverlayClick', e);
+}
+
+defineExpose({
+  drawerDomRef,
+  overlayDomRef: overlayDomInstanceRef.value?.overlayDomRef,
+});
+</script>
+
+<style scoped lang="scss">
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.drawer {
+  position: absolute;
+  z-index: 1;
+  background-color: #fff;
+  overflow: hidden;
+  transition: transform 0.15s ease-out;
+
+  .drawer-container {
+    background-color: #fff;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.origin-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  transform: translateY(100%);
+  animation: slide-from-bottom 0.15s ease-out;
+}
+
+.origin-right {
+  top: 0;
+  bottom: 0;
+  right: 0;
+  transform: translateX(100%);
+  animation: slide-from-right 0.15s ease-out;
+}
+
+.slide-bottom {
+  transform: translateY(0);
+}
+
+.slide-right {
+  transform: translateX(0);
+}
+
+@keyframes slide-from-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-from-right {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+</style>

package/components/common/Icon.vue

@@ -0,0 +1,83 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div
+    :class="['common-icon-container', !isPC && 'common-icon-container-mobile']"
+    :style="{
+      padding: iconHotAreaSize,
+    }"
+    @click="handleImgClick"
+  >
+    <image
+      v-if="isApp"
+      class="common-icon"
+      :src="props.file"
+      :style="{ width: iconWidth, height: iconHeight }"
+    />
+    <img
+      v-else
+      class="common-icon"
+      :src="props.file"
+      :style="{ width: iconWidth, height: iconHeight }"
+    >
+  </div>
+</template>
+<script setup lang="ts">
+import vue from '../../adapter-vue';
+import { isApp, isPC } from '../../utils/env';
+const { withDefaults, computed } = vue;
+
+interface IProps {
+  file: string;
+  size?: string;
+  width?: string;
+  height?: string;
+  hotAreaSize?: number | string;
+}
+
+interface IEmits {
+  (key: 'onClick', e: Event): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  file: '',
+  width: '20px',
+  height: '20px',
+});
+
+const iconHotAreaSize = computed<undefined | string>(() => {
+  if (!props.hotAreaSize) {
+    return undefined;
+  }
+  if (isNaN(Number(props.hotAreaSize))) {
+    return String(props.hotAreaSize);
+  }
+  return `${props.hotAreaSize}px`;
+});
+
+const iconWidth = computed(() => {
+  return props.size ? props.size : props.width;
+});
+
+const iconHeight = computed(() => {
+  return props.size ? props.size : props.height;
+});
+
+const handleImgClick = (e: Event) => {
+  emits('onClick', e);
+};
+</script>
+
+<style lang="scss" scoped>
+.common-icon-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.common-icon-container-mobile {
+  cursor: none;
+}
+</style>

package/components/common/ImagePreviewer/image-item-web.vue

@@ -0,0 +1,42 @@
+<template>
+  <img
+    class="image-preview"
+    :style="{
+      transform: `scale(${props.zoom}) rotate(${props.rotate}deg)`,
+    }"
+    :src="props.src"
+  >
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  zoom: {
+    type: Number,
+    default: 1,
+  },
+  rotate: {
+    type: Number,
+    default: 0,
+  },
+  src: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+<style lang="scss">
+.image-item {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.image-preview {
+  max-width: 100%;
+  max-height: 100%;
+  transition: transform 0.1s ease 0s;
+  pointer-events: auto;
+}
+</style>