@smartos-lib/components 1.7.0-beta.0

package/src/web-components/smart-file-preview/index.ts

@@ -0,0 +1,29 @@
+import { defineCustomElement } from 'vue';
+import VueComponent from './index.vue';
+import { tag } from './info';
+import type { PreviewFile } from './types';
+import { defineCustomElements } from '@/utils/defineCustomElements';
+import { getCustomElementExposed } from '@/utils/callCustomElementExposed';
+
+// 组件转为 Vue 自定义元素
+const VueCustomElement = defineCustomElement(VueComponent);
+
+// 暴露组件方法
+Object.assign(VueCustomElement.prototype, {
+  previewFile(...args: any[]) {
+    return getCustomElementExposed(this, 'previewFile')(...args);
+  },
+});
+
+// 注册组件
+defineCustomElements(tag, VueCustomElement);
+
+// 暴露组件类型
+export type SmartFilePreviewElement = typeof VueCustomElement & {
+  /**
+   * 预览文件
+   * @param fileName 文件名
+   * @param file 文件 Blob 对象
+   */
+  previewFile: PreviewFile
+};

package/src/web-components/smart-file-preview/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <ElConfigProvider namespace="smart">
+    <div size-full relative>
+      <!-- File / Blob 文件打开 -->
+      <component
+        v-if="file"
+        :is="components[fileCategory] || Code"
+        :file="file" :fileName="fileName" :fileExt="fileExt"
+        v-bind="attrs"
+      />
+    </div>
+  </ElConfigProvider>
+</template>
+
+<script lang="ts" setup>
+  import type { FileExt, PreviewFile } from './types';
+  import { fileCategoryMap } from './types';
+  import { shadowRoot } from './shared/const';
+  import Code from './category/Code.vue';
+  import Image from './category/Image.vue';
+  import Pdf from './category/Pdf.vue';
+  import Video from './category/Video.vue';
+  import { getFileNameAndExt } from '@/utils/getFileNameAndExt';
+
+  const attrs = useAttrs();
+
+  const file = shallowRef<Blob>();
+  const fileName = ref<string>();
+  const fileExt = ref<FileExt>();
+  const fileCategory = computed(() => fileCategoryMap[fileExt.value!]);
+
+  const components = {
+    image: Image,
+    pdf: Pdf,
+    video: Video,
+  };
+
+  const previewFile: PreviewFile = (_fileName, _file) => {
+    const { name, ext } = getFileNameAndExt(_fileName);
+
+    file.value = _file;
+    fileName.value = name;
+    fileExt.value = ext as FileExt;
+  };
+
+  useSmart();
+
+  onMounted(() => {
+    const el = useCurrentElement();
+    shadowRoot.value = el.value!.parentNode! as ShadowRoot;
+  });
+
+  defineExpose({
+    previewFile,
+  });
+</script>

package/src/web-components/smart-file-preview/info.ts

@@ -0,0 +1,2 @@
+export const name = '文件预览';
+export const tag = 'smart-file-preview';

package/src/web-components/smart-file-preview/shared/const.ts

@@ -0,0 +1,4 @@
+/**
+ * 组件 ShadowRoot
+ */
+export const shadowRoot = ref<ShadowRoot>();

package/src/web-components/smart-file-preview/types.ts

@@ -0,0 +1,38 @@
+export interface SmartFilePreviewProps {
+
+}
+
+/** 预览文件方法 */
+export interface PreviewFile {
+  (fileName: string, file: Blob): void
+}
+
+/** 文件后缀对应的分类 */
+export const fileCategoryMap = {
+  // 图片
+  jpg: 'image',
+  jpeg: 'image',
+  png: 'image',
+  bmp: 'image',
+  gif: 'image',
+  svg: 'image',
+  webp: 'image',
+
+  // 视频
+  mp4: 'video',
+  avi: 'video',
+  mov: 'video',
+  wmv: 'video',
+  flv: 'video',
+  mkv: 'video',
+  webm: 'video',
+
+  // PDF
+  pdf: 'pdf',
+} as const;
+
+/** 文件后缀 */
+export type FileExt = keyof typeof fileCategoryMap;
+
+/** 文件分类 */
+export type FileCategory = typeof fileCategoryMap[FileExt];

package/src/web-components/smart-upload/index.ts

@@ -0,0 +1,5 @@
+import VueComponent from './index.vue';
+import { tag } from './info';
+import { defineCustomElements } from '@/utils/defineCustomElements';
+
+defineCustomElements(tag, VueComponent);

package/src/web-components/smart-upload/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <NConfigProvider :cls-prefix="classPrefix" :theme-overrides="commonOverrides" :locale="zhCN" abstract>
+    <NUpload
+      v-bind="props"
+      v-model:file-list="fileList"
+      :custom-request="customRequest"
+      @remove="onRemoved"
+    >
+      <slot>
+        <NButton v-if="[undefined, 'image'].includes(listType)">选择文件</NButton>
+      </slot>
+    </NUpload>
+  </NConfigProvider>
+</template>
+
+<script lang="ts" setup>
+  import type { UploadCustomRequestOptions, UploadFileInfo } from 'naive-ui';
+  import type { UploadFieldValueItem } from '@smartos-lib/utils';
+  import { NButton, NConfigProvider, NUpload, zhCN } from 'naive-ui';
+  import { getConfigProvider } from '@smartos-lib/core';
+  import type { Props } from './types';
+
+  const props = defineProps<Props>();
+  const list = defineModel<UploadFieldValueItem[]>('fileList', {
+    default: () => [],
+  });
+
+  const { classPrefix } = useSmart();
+
+  /** 内部维护的文件列表 */
+  const fileList = ref<UploadFileInfo[]>(
+    list.value.map(({ fileName: url }) => ({ id: url, name: url, url, status: 'finished' })),
+  );
+
+  /** 自定义上传 */
+  function customRequest({ file, onFinish, onError, onProgress }: UploadCustomRequestOptions) {
+    const originFile = file.file as File;
+
+    const form = new FormData();
+    form.set('file', originFile);
+
+    getConfigProvider('request')!({
+      method: 'post',
+      url: '/admin/sys-file/upload',
+      data: form,
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      onUploadProgress({ loaded, total }) {
+        onProgress({ percent: total ? Math.ceil((loaded / total) * 100) : 0 });
+      },
+    })
+      .then((res) => {
+        const data = res.data.data;
+
+        file.url = data.url;
+        onFinish();
+
+        nextTick(() => {
+          list.value.includes(data.url) || list.value.push({ fileName: data.url, originalFileName: originFile.name });
+        });
+      })
+      .catch((error) => {
+        onError();
+        console.error(error);
+      });
+  }
+
+  /** 已删除的文件, 从父组件中删除 */
+  function onRemoved() {
+    setTimeout(
+      () => {
+        for (let i = 0; i < list.value.length;) {
+          const url = list.value[i].fileName;
+
+          if (!fileList.value.some(file => file.url === url)) list.value.splice(i, 1);
+          else i++;
+        }
+      },
+      10,
+    );
+  }
+
+  // 监听父组件值变化, 同步到内部维护的文件列表
+  watchDeep(list, (newList: UploadFieldValueItem[]) => {
+    // 在传入值中, 但不在内部维护的文件列表中, 则添加
+    newList.forEach(({ fileName: url }) => {
+      if (!fileList.value.some(file => file.url === url))
+        fileList.value.push({ id: url, name: url, url, status: 'finished' });
+    });
+    // 在内部维护的文件列表中, 但不在传入值中, 则删除
+    for (let i = 0; i < fileList.value.length;) {
+      const file = fileList.value[i];
+
+      if (file.status === 'finished' && file.url && !newList.some(({ fileName: url }) => url === file.url))
+        fileList.value.splice(i, 1);
+      else
+        i++;
+    }
+  });
+</script>

package/src/web-components/smart-upload/info.ts

@@ -0,0 +1,2 @@
+export const name = '文件上传';
+export const tag = 'smart-upload';

package/src/web-components/smart-upload/types.ts

@@ -0,0 +1,28 @@
+import type { UploadProps } from 'naive-ui';
+
+export interface Props {
+  accept?: UploadProps['accept']
+  defaultFileList?: UploadProps['defaultFileList']
+  defaultUpload?: UploadProps['defaultUpload']
+  disabled?: UploadProps['disabled']
+  directory?: UploadProps['directory']
+  directoryDnd: UploadProps['directoryDnd']
+  fileListClass?: UploadProps['fileListClass']
+  fileListStyle?: UploadProps['fileListStyle']
+  imageGroupProps?: UploadProps['imageGroupProps']
+  inputProps?: UploadProps['inputProps']
+  listType?: UploadProps['listType']
+  max?: UploadProps['max']
+  multiple?: UploadProps['multiple']
+  renderIcon?: UploadProps['renderIcon']
+  shouldUseThumbnailUrl?: UploadProps['shouldUseThumbnailUrl']
+  showCancelButton?: UploadProps['showCancelButton']
+  showDownloadButton?: UploadProps['showDownloadButton']
+  showRemoveButton?: UploadProps['showRemoveButton']
+  showRetryButton?: UploadProps['showRetryButton']
+  showFileList?: UploadProps['showFileList']
+  showPreviewButton?: UploadProps['showPreviewButton']
+  showTrigger?: UploadProps['showTrigger']
+  triggerClass?: UploadProps['triggerClass']
+  triggerStyle?: UploadProps['triggerStyle']
+};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": [
+      "vitest/globals",
+      "vite/client",
+      "unplugin-icons/types/vue",
+      "naive-ui/volar",
+      "element-plus/global",
+
+      "vite-plugin-pages/client",
+      "vite-plugin-vue-layouts/client"
+    ]
+  }
+}