@smartos-lib/components 1.7.0-beta.0

package/src/web-components/smart-docx-drive-page/children/Me.vue

@@ -0,0 +1,47 @@
+<template>
+  <Header style="margin-bottom: 24px" @upload-success="onUploadSuccess">
+    <template #title>
+      <b v-if="meActiveMenuInfo?.filePath === '/'" text-xl>我的空间</b>
+      <el-scrollbar v-else class="w-full flex-grow">
+        <div flex="~ gap-1">
+          <div
+            v-for="(info, index) in meActiveMenuPathInfo" :key="info.id"
+            flex="~ items-center none gap-1" text-xl
+            class="[&>*]-flex-none"
+            :class="{ 'op-80': index < meActiveMenuPathInfo.length - 1 }"
+          >
+            <button
+              cursor-default rounded bg-transparent px-1
+              :class="{ 'cursor-pointer hover:bg-neutral-1': index < meActiveMenuPathInfo.length - 1 }"
+              @click="meActiveMenu = info.id"
+            >
+              {{ info.label === '/' ? '我的空间' : info.label }}
+            </button>
+            <i-ic-baseline-arrow-forward-ios v-if="index < meActiveMenuPathInfo.length - 1" />
+          </div>
+        </div>
+      </el-scrollbar>
+    </template>
+  </Header>
+  <el-scrollbar class="-mr4" view-style="padding-right: 16px" height="100%">
+    <DocxFileList
+      ref="fileListRef"
+      :file-path="meActiveMenuInfo?.filePath"
+    />
+  </el-scrollbar>
+</template>
+
+<script lang="ts" setup>
+  import Header from '../components-private/Header.vue';
+  import DocxFileList from '../components/DocxFileList.vue';
+  import { menuStore } from '../stores/menu';
+
+  const fileListRef = ref<typeof DocxFileList>();
+
+  const { meActiveMenuInfo, dirTree, meActiveMenuPathInfo, meActiveMenu } = menuStore();
+
+  function onUploadSuccess() {
+    dirTree.execute();
+    fileListRef.value?.execute();
+  }
+</script>

package/src/web-components/smart-docx-drive-page/components/CustomImage.vue

@@ -0,0 +1,26 @@
+<!--
+  基于 el-image 二次封装的图片组件
+    - 支持传入 Blob 对象进行显示
+-->
+
+<template>
+  <el-image v-bind="props" :src="src">
+    <template #error>
+      <slot name="error" />
+    </template>
+  </el-image>
+</template>
+
+<script lang="ts" setup>
+  import type { ImageProps } from 'element-plus';
+
+  const props = defineProps<Partial<ImageProps>>();
+
+  const blob = defineModel<Blob>('blob');
+  const blobUrl = useObjectUrl(blob);
+
+  const src = computed(() => {
+    if (blob.value) return blobUrl.value;
+    return props.src;
+  });
+</script>

package/src/web-components/smart-docx-drive-page/components/CustomPopover.vue

@@ -0,0 +1,62 @@
+<!--
+  基于 el-popover 二次封装的弹出框
+    - 为 reference 插槽传入 visible, 弹出框的显示状态
+    - 更好的 web-components 兼容性
+-->
+
+<template>
+  <ElPopover
+    ref="popoverRef"
+    v-bind="props"
+    @before-enter="visible = true"
+    @before-leave="visible = false"
+  >
+    <template #reference>
+      <slot name="reference" :visible="visible" />
+    </template>
+
+    <slot />
+  </ElPopover>
+</template>
+
+<script lang="ts" setup>
+  import { ElPopover } from 'element-plus';
+  import type { PopoverProps } from 'element-plus';
+
+  const props = withDefaults(defineProps<Partial<Omit<PopoverProps, 'visible'>>>(), {
+    offset: 4,
+    showArrow: false,
+    teleported: true,
+    popperStyle: 'width: 180px; padding: 8px 0; border-radius: 8px',
+  });
+
+  const visible = ref<boolean>();
+
+  const popoverRef = ref<typeof ElPopover>();
+
+  // 当弹窗插入到 body 中时, 将下拉框中的 .cp-item 样式类改为外置样式类
+  wheneverEffectScopeImmediate(() => props.teleported && popoverRef.value?.popperRef?.contentRef, (contentRef: HTMLDivElement) => {
+    let stop: (() => void) | undefined;
+
+    function addClass() {
+      stop?.();
+      contentRef.querySelectorAll('.cp-item').forEach((item) => {
+        item.classList.add('smart-docx-drive-page_custom-popover-item');
+      });
+      startObservation();
+    }
+
+    function startObservation() {
+      stop = useMutationObserver(contentRef, addClass, { childList: true, attributes: true, subtree: true }).stop;
+    }
+
+    addClass();
+  });
+</script>
+
+<style lang="sass">
+  @import '../external-style/custom-popover'
+
+  .cp-item
+    @extend .smart-docx-drive-page_custom-popover-item
+</style>

package/src/web-components/smart-docx-drive-page/components/DocxDir.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    class="menu-item group/dir"
+    v-bind="attrs"
+    :class="{ active: isActive }"
+    @click="info && (meActiveMenu = info.id)"
+  >
+    <div w-4.5 flex="~ justify-center items-center" pos="relative left-1.5">
+      <el-button v-if="showOpen" link @click.stop="isOpen = !isOpen">
+        <i-akar-icons-triangle-right-fill class="size-4 transition-all" :class="{ 'rotate-90': isOpen }" />
+      </el-button>
+    </div>
+
+    <div class="munu-item-icon">
+      <slot v-if="slots.icon" name="icon" :isActive="isActive" />
+      <i-ph-folder-fill v-else-if="isActive" class="size-5" />
+      <i-ph-folder v-else class="size-5" />
+    </div>
+
+    <span flex-grow>{{ name ?? info?.label }}</span>
+
+    <CustomPopover v-if="!hiddenActions" placement="bottom-start" trigger="click" :offset="2">
+      <template #reference="{ visible }">
+        <button :class="{ 'bg-neutral-3! flex!': visible }" class="hidden group-hover/dir:flex" size-6 flex="justify-center items-center" bg="transparent hover:neutral-3" transition outline-none rounded @click.stop>
+          <i-ph-dots-three-bold class="size-5 c-neutral-5" />
+        </button>
+      </template>
+
+      <div class="cp-item" @click="toRename(info!)"><div class="icon-wrap"><i-ph-note-pencil-duotone class="size-4.8" /></div>重命名</div>
+      <div class="cp-item" @click="toDelete(info!)"><div class="icon-wrap"><i-material-symbols-delete-outline class="size-5" /></div>删除</div>
+    </CustomPopover>
+  </div>
+
+  <template v-if="isOpen">
+    <DocxDir v-for="item in info?.children" :key="item.id" :info="item" :level="level + 1" :style="{ paddingLeft: `${level * 16}px` }" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+  import type { DirInfo } from '../apis/folder';
+  import { menuStore } from '../stores/menu';
+  import { toDeleteFolder, toRenameFolder } from '../utils/file-actions';
+  import CustomPopover from './CustomPopover.vue';
+
+  interface Props {
+    name?: string
+    info?: DirInfo
+    showOpen?: boolean
+    level?: number
+    hiddenActions?: boolean
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    showOpen: true,
+    level: 1,
+  });
+  const slots = defineSlots<{
+    icon?: (props: { isActive: boolean }) => any
+  }>();
+
+  const attrs = useAttrs();
+
+  const isOpen = ref(false);
+
+  const { meActiveMenu, dirTree } = menuStore();
+
+  const isActive = computed(() => meActiveMenu.value === props.info?.id);
+
+  function toRename(info: DirInfo) {
+    toRenameFolder(info).then(() => {
+      dirTree.execute();
+    });
+  }
+
+  function toDelete(info: DirInfo) {
+    toDeleteFolder(info).then(() => {
+      dirTree.execute();
+    });
+  }
+</script>
+
+<script lang="ts">
+  export default defineComponent({
+    name: 'DocxDir',
+  });
+</script>
+
+<style lang="sass" scoped>
+  .menu-item
+    @apply h-10 flex items-center gap-2 relative
+    @apply text-15px cursor-pointer select-none rounded pr-2
+    @apply hover:bg-neutral-2
+
+    &.active
+      @apply c-blue-6 bg-blue-6/10
+
+    > .munu-item-icon
+      @apply size-5.5 flex justify-center items-center
+</style>

package/src/web-components/smart-docx-drive-page/components/DocxDoc.vue

@@ -0,0 +1,132 @@
+<!-- 云文档 -->
+
+<template>
+  <ElDialog ref="dialogRef" v-model="visible" :z-index="8888" append-to-body>
+    <template #header>
+      <div flex="~ col items-start gap-1">
+        <div c-black>{{ fileName || '未命名文档' }}</div>
+        <div text="xs neutral-6/90" bg="neutral-2/60" rounded p="x1 y.5" m--1>{{ (updateDoc.isLoading || updateDocTitle.isLoading) ? '保存中...' : '已经保存到云端' }}</div>
+      </div>
+    </template>
+
+    <el-scrollbar height="100%" view-style="display: flex; min-height: 100%">
+      <div w-full max-w-221.5 mxa p="x16.5 t5">
+        <!-- 标题 -->
+        <div
+          ref="titleRef"
+          class="empty:after-(content-['未命名文档'] c-neutral pointer-events-none)"
+          text-3xl font-bold lh-normal break-all c-black b-b="1 solid neutral-2" mb-5 py-5
+          contenteditable="plaintext-only"
+          @keydown.enter.prevent
+          @paste.prevent="removeNewlines"
+        />
+        <!-- 文档内容 -->
+        <smart-docx-editor v-if="visible" ref="docxEditorRef" .initialValue="content" />
+      </div>
+    </el-scrollbar>
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+  import type { Descendant } from 'slate';
+  import { ElDialog } from 'element-plus';
+  import { useMessage } from 'naive-ui';
+  import { useJsonParse } from '@smartos-lib/utils';
+  import { debounce } from 'lodash-es';
+  import { useFullscreenElDialog } from '../composables/useFullscreenElDialog';
+  import { createOnlineDocx, getOnlineDocx, updateOnlineDocx } from '../apis/doc';
+  import { type FileInfo, renameFile } from '../apis/file';
+
+  const emit = defineEmits(['updated']);
+
+  const dialogRef = ref<typeof ElDialog>();
+  const titleRef = ref<HTMLDivElement>();
+  const docxEditorRef = ref();
+
+  const message = useMessage();
+
+  const visible = ref(false);
+  const id = ref<string>();
+  const fileName = ref<string>('');
+  const content = shallowRef<Descendant[]>();
+
+  const updateDocTitleParams = () => ({ userFileId: id.value!, fileName: fileName.value || '未命名文档' });
+  const updateDocParams = () => ({ userFileId: id.value!, docContext: { value: content.value } });
+
+  const createDoc = createOnlineDocx();
+  const getDoc = getOnlineDocx();
+  const updateDocTitle = renameFile(updateDocTitleParams);
+  const updateDoc = updateOnlineDocx(updateDocParams);
+
+  /** 禁止粘贴换行 */
+  function removeNewlines(event: ClipboardEvent) {
+    const text = event.clipboardData?.getData('text/plain').replace(/(\r\n|\n|\r)/gm, "") ?? '';
+    const selection = window.getSelection();
+
+    if (selection?.getRangeAt && selection.rangeCount) {
+      const range = selection.getRangeAt(0);
+      range.deleteContents();
+
+      const textNode = document.createTextNode(text);
+      range.insertNode(textNode);
+
+      range.setStart(textNode, textNode.length);
+      range.setEnd(textNode, textNode.length);
+
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+
+  useFullscreenElDialog(dialogRef);
+
+  useEventListener(titleRef, ['input', 'paste'], () => {
+    fileName.value = titleRef.value?.textContent?.trim() || '';
+  });
+
+  useEventListener(docxEditorRef, 'change', (event: CustomEvent<[Descendant[]]>) => {
+    content.value = event.detail[0] ?? [];
+  });
+
+  whenever(() => (createDoc.isLoading || getDoc.isLoading), (_, __, onCleanup) => {
+    const loading = message.loading(`请稍后, 正在${createDoc.isLoading ? '新建' : '加载'}文档...`, { duration: 0 });
+    onCleanup(() => loading.destroy());
+  });
+
+  wheneverEffectScope(id, () => {
+    watchDeep(updateDocTitleParams, debounce(updateDocTitle.execute, 1000, { maxWait: 1000 }));
+    watchDeep(updateDocParams, debounce(updateDoc.execute, 1000, { maxWait: 1000 }));
+  });
+
+  whenever(logicNot(visible), () => {
+    updateDocTitle.execute().then(() => emit('updated'));
+    updateDoc.execute();
+
+    id.value = undefined;
+    fileName.value = '';
+    content.value = [];
+  });
+
+  defineExpose({
+    createDoc: async () => {
+      if (createDoc.isLoading) return;
+
+      id.value = (await createDoc.execute({ fileName: '未命名文档' })).data.data;
+      visible.value = true;
+    },
+    updateDoc: async (file: FileInfo) => {
+      if (getDoc.isLoading) return;
+
+      await getDoc.execute({ userFileId: file.userFileId });
+
+      id.value = file.userFileId;
+      fileName.value = file.fileName;
+      content.value = useJsonParse(getDoc.data?.data.docContext, { value: [] }).value;
+
+      visible.value = true;
+      nextTick(() => {
+        titleRef.value!.textContent = fileName.value;
+      });
+    },
+  });
+</script>

package/src/web-components/smart-docx-drive-page/components/DocxDownloadPopoverItem.vue

@@ -0,0 +1,41 @@
+<!--
+  弹出框中的下载功能
+-->
+
+<template>
+  <div
+    class="cp-item relative"
+    :class="{
+      'c-emerald-5!': download.isLoading,
+    }"
+    @click="download.isLoading || download.execute()"
+  >
+    <div class="icon-wrap">
+      <i-line-md-downloading-loop v-if="download.isLoading" class="size-5" />
+      <i-material-symbols-download-rounded v-else class="size-6" />
+    </div>
+    下载<template v-if="download.isLoading">中</template>
+
+    <!-- 上传进度 / 背景 -->
+    <div h-full pos="absolute top-0 left-0" z--1 bg-neutral-1 transition-width v-bind="progressStyle" />
+    <!-- 上传进度 / 进度条 -->
+    <div h-2px pos="absolute bottom-0 left-0" b-b="2 solid emerald-5" z-1 transition-width :class="{ 'b-red!': download.error }" v-bind="progressStyle" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { FileInfo } from '../apis/file';
+
+  const props = defineProps<{ file: FileInfo }>();
+
+  const download = toRef(props.file, 'download');
+  const progress = computed(() => toValue(props.file.downloadProgress));
+
+  const progressStyle = computed(() => {
+    return download.value.error
+      ? { class: 'w-full' }
+      : download.value.isLoading
+        ? { class: 'min-w-2px', style: { width: `${progress.value}%` } }
+        : {};
+  });
+</script>

package/src/web-components/smart-docx-drive-page/components/DocxFileList.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-table
+    v-loading="fileList.isLoading"
+    class="file-list-table text-sm"
+    :data="fileList.data?.data.records" row-key="userFileId" size="large"
+    @row-click="toPreview"
+  >
+    <!-- 预览 -->
+    <el-table-column v-slot="{ row }" width="36" class-name="preview">
+      <i-ri-file-text-fill v-if="row.fileType === 2" class="size-6 c-blue-5" />
+      <template v-else-if="ImageExtEnum.includes(row.extendName)">
+        <i-svg-spinners-pulse-2 v-if="row.imagePreview.isLoading" />
+        <CustomImage v-else class="size-6" :blob="row.imagePreview.data">
+          <template #error>
+            <FileIcon class="size-6! text-6!" :ext="row.extendName" />
+          </template>
+        </CustomImage>
+      </template>
+      <FileIcon v-else class="size-6! text-6!" :ext="row.extendName" />
+    </el-table-column>
+    <!-- 名称 -->
+    <el-table-column v-slot="{ row }" prop="fileName" label="名称" min-width="200">
+      <div flex whitespace-nowrap>
+        <div truncate>{{ row.fileName }}</div>
+        <div v-if="row.extendName">.{{ row.extendName }}</div>
+      </div>
+    </el-table-column>
+    <!-- 所有者 -->
+    <el-table-column prop="userId" label="所有者" width="190" />
+    <!-- 大小 -->
+    <el-table-column v-slot="{ row }" prop="fileSize" label="大小" width="100">
+      {{ isNumber(row.fileSize) ? prettyBytes(row.fileSize) : row.fileSize }}
+    </el-table-column>
+    <!-- 上传时间 -->
+    <el-table-column prop="uploadTime" label="上传时间" width="180" />
+    <!-- 操作 -->
+    <el-table-column v-slot="{ row }" width="48" fixed="right" class-name="actions">
+      <CustomPopover placement="bottom-end" trigger="click" :offset="2">
+        <template #reference="{ visible }">
+          <button :class="{ 'bg-neutral-2!': visible }" size-6 flex="~ justify-center items-center" bg="transparent hover:neutral-2" transition outline-none rounded @click.stop>
+            <i-ph-dots-three-bold class="size-5" />
+          </button>
+        </template>
+
+        <DocxDownloadPopoverItem :file="row" />
+        <div class="cp-item" @click="toRename(row)"><div class="icon-wrap"><i-ph-note-pencil-duotone class="size-4.8" /></div>重命名</div>
+        <div class="cp-item" @click="toDelete(row)"><div class="icon-wrap"><i-material-symbols-delete-outline class="size-5" /></div>删除</div>
+      </CustomPopover>
+    </el-table-column>
+  </el-table>
+
+  <DocxPreview ref="previewRef" />
+  <DocxDoc ref="updateDocRef" @updated="fileList.execute()" />
+</template>
+
+<script lang="tsx" setup>
+  import type { MessageReactive } from 'naive-ui';
+  import type { CancelTokenSource } from 'axios';
+  import { ImageExtEnum } from '@smartos-lib/types';
+  import { isNumber, leastRun } from 'mixte';
+  import { NText, useMessage } from 'naive-ui';
+  import prettyBytes from 'pretty-bytes';
+  import { pick } from 'lodash-es';
+  import { getConfigProvider } from '@smartos-lib/core';
+  import { downloadFile, getFileList } from '../apis/file';
+  import type { FileInfo } from '../apis/file';
+  import { toDeleteFile, toRenameFile } from '../utils/file-actions';
+  import FileIcon from './FileIcon.vue';
+  import CustomImage from './CustomImage.vue';
+  import CustomPopover from './CustomPopover.vue';
+  import DocxDownloadPopoverItem from './DocxDownloadPopoverItem.vue';
+  import DocxPreview from './DocxPreview.vue';
+  import DocxDoc from './DocxDoc.vue';
+
+  const props = defineProps<{ filePath?: string }>();
+
+  const previewRef = ref<typeof DocxPreview>();
+  const updateDocRef = ref<typeof DocxDoc>();
+
+  const message = useMessage();
+
+  const fileList = getFileList(() => ({ filePath: props.filePath }));
+
+  function toRename(file: FileInfo) {
+    toRenameFile(file).then(() => {
+      fileList.execute();
+    });
+  }
+
+  function toDelete(file: FileInfo) {
+    toDeleteFile(file).then(() => {
+      fileList.execute();
+    });
+  }
+
+  // Todo: 移动到 DocxPreview 组件内
+  const toPreview = (() => {
+    const previewProgress = ref(0);
+    let previewMessage: MessageReactive | undefined;
+    let previewCancelToken: CancelTokenSource | undefined;
+
+    function cancelPreview() {
+      previewProgress.value = 0;
+      previewMessage?.destroy();
+      previewCancelToken?.cancel();
+      previewCancelToken = getConfigProvider('request')!.CancelToken.source();
+    }
+
+    return async (file: FileInfo) => {
+      cancelPreview();
+
+      if (file.fileType === 2) {
+        updateDocRef.value?.updateDoc(file);
+        return;
+      }
+
+      previewMessage = message.loading( // @ts-expect-error
+        () => <div>正在加载预览文件: <NText type="primary">{ file.fileFullName }</NText> <NText code>{previewProgress.value}%</NText></div>,
+        { duration: 0 },
+      );
+
+      try {
+        const download = downloadFile(pick(file, ['userFileId']), { progress: previewProgress, cancelToken: previewCancelToken!.token });
+        await leastRun(360, () => download.execute());
+        previewRef.value?.previewFile(file.fileFullName, download.data!);
+      }
+      catch (error) {}
+      finally {
+        cancelPreview();
+      }
+    };
+  })();
+
+  watchImmediate(() => props.filePath, () => {
+    fileList.execute();
+  });
+
+  defineExpose({
+    execute: fileList.execute,
+  });
+</script>
+
+<style lang="sass" scoped>
+  // 预览单元格, 操作单元格
+  .file-list-table ::v-deep .smart-table__body-wrapper .smart-table__cell:is(.preview, .actions) > .cell
+    @apply size-full flex-(~ justify-center items-center)
+    @apply pos-(absolute top-0 left-0) px-0
+
+  // 预览单元格
+  .file-list-table ::v-deep .smart-table__body-wrapper .smart-table__cell.preview > .cell
+    @apply justify-end
+
+  // 表格行
+  .file-list-table ::v-deep .smart-table__row
+    @apply cursor-pointer
+</style>

package/src/web-components/smart-docx-drive-page/components/DocxPreview.vue

@@ -0,0 +1,33 @@
+<!-- 文件预览 -->
+
+<template>
+  <ElDialog ref="dialogRef" v-model="visible" :title="fileName" :z-index="8888" append-to-body>
+    <smart-file-preview v-if="file" ref="filePreviewRef" />
+  </ElDialog>
+</template>
+
+<script lang="ts" setup>
+  import { ElDialog } from 'element-plus';
+  import { useFullscreenElDialog } from '../composables/useFullscreenElDialog';
+  import type { SmartFilePreviewElement } from '@/web-components/smart-file-preview/index';
+
+  const dialogRef = ref<typeof ElDialog>();
+  const filePreviewRef = ref<SmartFilePreviewElement>();
+
+  const visible = ref(false);
+  const fileName = ref('');
+  const file = shallowRef<Blob>();
+
+  useFullscreenElDialog(dialogRef);
+
+  defineExpose({
+    previewFile: (_fileName: string, _file: Blob) => {
+      visible.value = true;
+      fileName.value = _fileName;
+      file.value = _file;
+      nextTick(() => {
+        filePreviewRef.value?.previewFile(_fileName, _file);
+      });
+    },
+  });
+</script>