@smartos-lib/components 1.7.0-beta.0

package/src/web-components/smart-docx-drive-page/types.ts

@@ -0,0 +1,51 @@
+/**
+ * 云文档云服务页类型定义
+ */
+export interface SmartDocxDrivePageProps {
+  /**
+   * Logo 图标地址
+   * @default <i-system-uicons-document-stack />
+   **/
+  icon?: string
+  /**
+   * 标题
+   * @default 'SmartOS 云文档'
+  */
+  title?: string
+
+  /**
+   * 当前激活的菜单项
+   *  - home: 首页
+   *  - me: 我的空间
+   * @default 'home'
+   */
+  activeMenu?: 'home' | 'me'
+}
+
+/** 上传文件信息 */
+export interface FileItem {
+  id: string
+
+  ref?: Element | ComponentPublicInstance | HTMLDivElement | null
+
+  /** 文件 */
+  file: File
+  /** 文件名 */
+  fileName: string
+  /** 文件名后缀 */
+  fileExt: string
+
+  /** 读取文件中 */
+  isReading?: boolean
+
+  /** 上传进度 */
+  progress?: number
+  /** 上传中 */
+  isUploading?: boolean
+  /** 上传成功 */
+  isUploadSuccess?: boolean
+  /** 上传失败 */
+  isUploadError?: boolean
+  /** 是否是极速上传 */
+  isQuickUpload?: boolean
+}

package/src/web-components/smart-docx-drive-page/utils/file-actions.ts

@@ -0,0 +1,63 @@
+import { deleteFile, renameFile } from '../apis/file';
+import type { FileInfo } from '../apis/file';
+import { type DirInfo, getFolderList } from '../apis/folder';
+import { useConfirm, usePrompt } from '../composables/usePrompt';
+import { menuStore } from '../stores/menu';
+
+const { flatDirTree } = menuStore();
+
+/** 重命名文件 */
+export function toRenameFile(file: FileInfo) {
+  return usePrompt('', '文件名称', {
+    inputValue: file.fileName ?? '',
+  }, async (instance) => {
+    await renameFile({ userFileId: file.userFileId, fileName: instance.inputValue }).execute();
+  });
+}
+
+/** 删除文件 */
+export function toDeleteFile(file: FileInfo) {
+  return useConfirm(`是否删除文件：${file.fileFullName}`, '提示', {
+    confirmButtonText: '删除',
+    cancelButtonText: '取消',
+    type: 'error',
+    confirmButtonClass: 'smart-button--danger',
+  }, async () => {
+    await deleteFile({ userFileId: file.userFileId }).execute();
+  });
+}
+
+/** 重命名文件夹 */
+export function toRenameFolder(info: DirInfo) {
+  return usePrompt('', '文件夹名称', {
+    inputValue: info.label ?? '',
+  }, async (instance) => {
+    const parentFilePath = info.filePath.split('/').slice(0, -1).join('/') || '/';
+    const folderList = getFolderList({ filePath: parentFilePath });
+
+    await folderList.execute();
+
+    const folderFileInfo = folderList.data!.data.records.find(item => item.fileName === info.label)!;
+
+    await renameFile({ userFileId: folderFileInfo.userFileId, fileName: instance.inputValue }).execute();
+  });
+}
+
+/** 删除文件夹 */
+export function toDeleteFolder(info: DirInfo) {
+  return useConfirm(`是否删除文件夹：${info.label}`, '提示', {
+    confirmButtonText: '删除',
+    cancelButtonText: '取消',
+    type: 'error',
+    confirmButtonClass: 'smart-button--danger',
+  }, async () => {
+    const parentFilePath = info.filePath.split('/').slice(0, -1).join('/') || '/';
+    const folderList = getFolderList({ filePath: parentFilePath });
+
+    await folderList.execute();
+
+    const folderFileInfo = folderList.data!.data.records.find(item => item.fileName === info.label)!;
+
+    await deleteFile({ userFileId: folderFileInfo.userFileId }).execute();
+  });
+}

package/src/web-components/smart-docx-drive-page/utils/file.ts

@@ -0,0 +1,31 @@
+import SparkMd5 from 'spark-md5';
+
+const FileSlice = File.prototype.slice || (File.prototype as any).mozSlice || (File.prototype as any).webkitSlice;
+const FileChunkSize = 1024 * 1024 * 2; // 2MB
+
+export function getFileMd5(file: File) {
+  return new Promise<string>((resolve) => {
+    const chunks = Math.ceil(file.size / FileChunkSize);
+    const spark = new SparkMd5.ArrayBuffer();
+    const fileReader = new FileReader();
+    let currentChunk = 0;
+
+    fileReader.onload = function (e) {
+      spark.append(e.target!.result as ArrayBuffer); // Append array buffer
+      currentChunk++;
+
+      if (currentChunk < chunks)
+        loadNext();
+      else
+        resolve(spark.end());
+    };
+
+    function loadNext() {
+      const start = currentChunk * FileChunkSize;
+      const end = start + FileChunkSize >= file.size ? file.size : start + FileChunkSize;
+      fileReader.readAsArrayBuffer(FileSlice.call(file, start, end));
+    }
+
+    loadNext();
+  });
+}

package/src/web-components/smart-docx-editor/App.vue

@@ -0,0 +1,32 @@
+<!-- Markdown 对外层 -->
+
+<template>
+  <ElConfigProvider namespace="smart">
+    <Index
+      :initial-value="initialValue"
+    />
+  </ElConfigProvider>
+</template>
+
+<script lang="ts" setup>
+  import type { Descendant } from 'slate';
+  import type { MarkdownProps } from './MarkdownShortcuts/components/types';
+  import Index from './index.vue';
+  import { shadowRoot, valueChange } from './MarkdownShortcuts/shared/const';
+
+  defineProps<Pick<MarkdownProps, 'initialValue'>>();
+
+  const emit = defineEmits<{
+    change: [value: Descendant[]]
+  }>();
+
+  useSmart();
+
+  valueChange.on((value) => {
+    emit('change', value);
+  });
+
+  onMounted(() => {
+    shadowRoot.value = useCurrentElement().value!.parentNode as typeof shadowRoot.value;
+  });
+</script>

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components/Markdown.vue

@@ -0,0 +1,202 @@
+<!-- Markdown 逻辑层 -->
+
+<template>
+  <MarkdownShortcuts
+    v-bind="props"
+    :withOverride="withOverride"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { Node } from 'slate';
+  import { Editor, Element, Path, Point, Range, Text, Transforms } from 'slate';
+  import { applyPureReactInVue } from 'veaury';
+  import MarkdownShortcutsReact from '../components-react/Markdown';
+  import { MARKS, SHORTCUTS } from '../components-react/MarkdownElement';
+  import { useTextSelection } from '../composables/useTextSelection';
+  import type { MarkdownShortcutsProps } from '../components-react/Markdown';
+  import type { HeadingElement } from '../components-react/types/custom-types';
+  import type { MarkdownProps } from './types';
+
+  const props = defineProps<MarkdownProps>();
+
+  const MarkdownShortcuts = applyPureReactInVue(MarkdownShortcutsReact);
+
+  /** 匹配当前焦点所在的块级节点 */
+  function matchBlockElement(editor: Editor) {
+    return {
+      match: (n: Node) => Element.isElement(n) && Editor.isBlock(editor, n),
+    };
+  }
+  /** 匹配当前焦点所在的节点 */
+  const matchElement = {
+    match: (n: Node) => Element.isElement(n),
+  };
+
+  /** 编辑器功能重写 */
+  const withOverride: MarkdownShortcutsProps['withOverride'] = (editor) => {
+    const { insertText, deleteBackward, insertBreak } = editor;
+
+    /** 插入回车 */
+    editor.insertBreak = () => {
+      const { selection } = editor;
+
+      if (selection && Range.isCollapsed(selection)) {
+        /** 当前节点 */
+        const [block, path] = Editor.above(editor, matchBlockElement(editor)) || [];
+
+        // 在块级节点末尾按下回车键
+        if (block && Element.isElement(block) && Point.equals(selection.anchor, Editor.end(editor, path!))) {
+          // 在列表项节点末尾按下回车键, 创建一个新的列表项
+          if (block.type === 'list-item')
+            return Transforms.insertNodes(editor, { type: 'list-item', children: [{ text: '' }] }, matchBlockElement(editor));
+          // 在非段落节点末尾按下回车键, 创建一个新的段落
+          else if (block.type !== 'paragraph')
+            return Transforms.insertNodes(editor, { type: 'paragraph', children: [{ text: '' }] }, matchBlockElement(editor));
+        }
+      }
+
+      insertBreak();
+    };
+
+    /** 插入文本 */
+    editor.insertText = (text) => {
+      const { selection } = editor;
+
+      if (text.endsWith(' ') && selection && Range.isCollapsed(selection)) {
+        /** 父级容器节点 */
+        const match = Editor.above(editor, matchBlockElement(editor));
+        /** 父级容器节点在根节点中的位置 */
+        const path = match ? match[1] : [];
+        /** 当前节点的起点位置 */
+        const start = Editor.start(editor, path);
+        /** 当前节点的范围 */
+        const range = { anchor: selection.anchor, focus: start };
+        /** 当前节点焦点前面的文本 */
+        const beforeText = Editor.string(editor, range) + text.slice(0, -1);
+        /** 当前节点类型 */
+        const type = SHORTCUTS[beforeText as keyof typeof SHORTCUTS];
+
+        // 使用前缀匹配的节点类型
+        if (type) {
+          Transforms.select(editor, range);
+
+          if (!Range.isCollapsed(range))
+            Transforms.delete(editor);
+
+          const newProperties: Partial<Element> = {
+            type,
+          };
+
+          // 标题
+          if (type === 'heading')
+            (newProperties as HeadingElement).level = `${beforeText.length}`;
+          // 引用
+          else if (type === 'blockquote')
+            newProperties.type = 'paragraph'; // 先设为段落, 再包裹为引用
+
+          Transforms.setNodes<Element>(editor, newProperties, matchBlockElement(editor));
+
+          // 引用
+          if (type === 'blockquote')
+            Transforms.wrapNodes(editor, { type: 'blockquote', children: [] }, matchBlockElement(editor));
+          // 无序列表
+          else if (type === 'list-item')
+            Transforms.wrapNodes(editor, { type: 'list', children: [] }, matchBlockElement(editor));
+
+          return;
+        }
+        // 加粗 / 斜线 / 删除线
+        else {
+          for (const [matchReg, leaf] of MARKS) {
+            const [mdText, text] = beforeText.match(matchReg) || [];
+
+            if (mdText) {
+              const point = Editor.before(editor, selection, { unit: 'character', distance: mdText.length })!;
+              const range = Editor.range(editor, point, selection);
+
+              // 删除前后缀
+              Transforms.insertText(editor, text, { at: range });
+              // 设置节点属性
+              Transforms.setNodes(editor, { [leaf]: true }, {
+                at: range,
+                match: node => Text.isText(node),
+                split: true,
+              });
+              // 插入空格
+              return Transforms.insertNodes(editor, { text: ' ' });
+            }
+          }
+        }
+      }
+
+      insertText(text);
+    };
+
+    /** 删除 */
+    editor.deleteBackward = (...args) => {
+      const { selection } = editor;
+
+      if (selection && Range.isCollapsed(selection)) {
+        /** 当前节点 */
+        const [node, path] = Editor.above<Element>(editor, matchBlockElement(editor)) || [];
+
+        // 当前光标在当前节点的起点位置
+        if (node && Point.equals(selection.anchor, Editor.start(editor, path!))) {
+          const [parent, parentPath] = Editor.parent(editor, path!);
+
+          if (parent) {
+            // 判断父级节点也是块级节点, 删除操作会将当前节点脱离父级节点
+            // 并转为段落节点
+            if (Element.isElement(parent)) {
+              const isFirst = parent.children[0] === node;
+              const isLast = parent.children.at(-1) === node;
+              let isUnwrap = false;
+
+              // 当前节点是父级节点的唯一子节点
+              if (isFirst && isLast) {
+                isUnwrap = true;
+                Transforms.unwrapNodes(editor, { at: parentPath });
+              }
+              // 当前节点是父级节点的第一个子节点
+              else if (isFirst) {
+                isUnwrap = true;
+                Transforms.moveNodes(editor, { to: parentPath });
+              }
+              // 当前节点是父级节点的最后一个子节点
+              else if (isLast) {
+                isUnwrap = true;
+                Transforms.moveNodes(editor, { to: Path.next(parentPath) });
+              }
+
+              // 若当前节点已脱离父级节点
+              if (isUnwrap) {
+                // 转为段落节点
+                Transforms.setNodes(editor, { type: 'paragraph' });
+                return;
+              }
+            }
+            // 父级节点是编辑器根节点, 且当前节点是唯一子节点, 转为段落节点
+            else if (Editor.isEditor(parent) && parent.children.length === 1) {
+              Transforms.setNodes(editor, { type: 'paragraph' });
+            }
+          }
+        }
+
+        deleteBackward(...args);
+      }
+    };
+
+    return editor;
+  };
+
+  // 防止拖拽选中文本
+  {
+    const { isValidSelection } = useTextSelection();
+
+    useEventListener(useCurrentElement(), 'dragstart', (event: DragEvent) => {
+      if (isValidSelection.value)
+        event.preventDefault();
+    });
+  }
+</script>

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components/Menu.vue

@@ -0,0 +1,100 @@
+<!-- 菜单栏 -->
+
+<template>
+  <div
+    v-if="isMenuShow"
+    ref="menuRef" :style="floatingStyles"
+    class="docx-menu"
+    flex="~ items-center gap-2"
+    text="lg black" select-none
+    b="1 solid gray-3 rounded-1.5" bg-white el="6 op-36" p="y2 x3"
+    @mousedown.prevent.stop @mouseup.prevent.stop @click.prevent.stop @dblclick.prevent.stop @contextmenu.prevent.stop
+  >
+    <!-- 加粗 -->
+    <el-tooltip placement="top" content="粗体<br>Markdown: **文本** 空格" raw-content :offset="15" :hide-after="0">
+      <button class="docx-menu-item" :class="{ active: isBoldActive }" @click="toToggleMark('bold')">
+        <i-iconoir-bold class="size-5.5" />
+      </button>
+    </el-tooltip>
+    <!-- 删除线 -->
+    <el-tooltip placement="top" content="删除线<br>Markdown: ~~文本~~ 空格" raw-content :offset="15" :hide-after="0">
+      <button class="docx-menu-item" :class="{ active: isDelActive }" @click="toToggleMark('del')">
+        <i-fluent-text-strikethrough-20-filled class="size-4.7 relative top-.03" />
+      </button>
+    </el-tooltip>
+    <!-- 斜体 -->
+    <el-tooltip placement="top" content="斜体<br>Markdown: *文本* 空格" raw-content :offset="15" :hide-after="0">
+      <button class="docx-menu-item" :class="{ active: isItalicActive }" @click="toToggleMark('italic')">
+        <i-ri-italic class="size-5 relative top-.1" />
+      </button>
+    </el-tooltip>
+    <!-- 下划线 -->
+    <el-tooltip placement="top" content="下划线<br>Markdown: ~文本~ 空格" raw-content :offset="15" :hide-after="0">
+      <button class="docx-menu-item" :class="{ active: isUnderlineActive }" @click="toToggleMark('underline')">
+        <i-iconoir-underline class="size-6 relative top-.1" />
+      </button>
+    </el-tooltip>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { flip, offset, shift, useFloating } from '@floating-ui/vue';
+  import { useTextSelection } from '../composables/useTextSelection';
+  import { isMarkActive, toggleMark } from '../utils/slateHelpers';
+  import { shadowRoot } from '../shared/const';
+  import type { CustomText } from '../components-react/types/custom-types';
+
+  const menuRef = ref<HTMLElement>();
+
+  const isMousePressed = useMousePressed().pressed;
+
+  const isMenuHover = useElementHover(menuRef);
+  const isMenuFocusWithin = useFocusWithin(menuRef).focused;
+
+  const { range, isValidSelection, onValidSelectionUpdate } = useTextSelection();
+  const { floatingStyles } = useFloating(range, menuRef, {
+    placement: 'top',
+    middleware: [offset(6), shift(), flip()],
+  });
+
+  const isMenuShowManual = ref(false);
+  const isMenuShow = computed(() => {
+    return isMenuShowManual.value && (isMenuHover.value || isMenuFocusWithin.value || (!isMousePressed.value && isValidSelection.value));
+  });
+
+  const isBoldActive = ref(false);
+  const isDelActive = ref(false);
+  const isItalicActive = ref(false);
+  const isUnderlineActive = ref(false);
+
+  const { trigger } = watchTriggerable(isMenuShow, () => {
+    isBoldActive.value = isMarkActive('bold');
+    isDelActive.value = isMarkActive('del');
+    isItalicActive.value = isMarkActive('italic');
+    isUnderlineActive.value = isMarkActive('underline');
+  });
+
+  function toToggleMark(format: keyof Omit<CustomText, 'text'>) {
+    toggleMark(format);
+    trigger();
+  }
+
+  useEventListener(shadowRoot, 'keydown', (event: KeyboardEvent) => {
+    if (event.key === 'Escape' && isMenuShow.value)
+      isMenuShowManual.value = false;
+  });
+  onValidSelectionUpdate(() => {
+    isMenuShowManual.value = true;
+  });
+</script>
+
+<style lang="sass" scoped>
+  :host-context(.dark) .docx-menu
+    @apply filter-invert
+  .docx-menu-item
+    @apply size-6 flex-(~ justify-center items-center)
+    @apply cursor-pointer rounded
+    @apply hover:bg-gray-2
+    &.active
+      @apply c-blue-6 bg-blue-2 bg-op-60 hover:bg-op-90
+</style>

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components/types.ts

@@ -0,0 +1,6 @@
+import type { MarkdownShortcutsProps } from '../components-react/Markdown';
+
+export interface MarkdownProps {
+  /** 初始值 */
+  initialValue?: MarkdownShortcutsProps['initialValue']
+}

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components-react/Markdown.tsx

@@ -0,0 +1,71 @@
+import type { RenderElementProps, RenderLeafProps } from 'slate-react';
+import type { BaseSelection, Descendant, Editor } from 'slate';
+import { useCallback, useMemo } from 'react';
+import { createEditor } from 'slate';
+import { Editable, Slate, withReact } from 'slate-react';
+import { withHistory } from 'slate-history';
+import { editor as editorStore, selectionChange, valueChange } from '../shared/const';
+import { RenderElement, RenderLeaf } from './MarkdownElement';
+
+export interface MarkdownShortcutsProps {
+  /** 初始值 */
+  initialValue?: Descendant[]
+  /** 编辑器功能重写 */
+  withOverride?: (editor: Editor) => Editor
+  /** 用户输入前的事件回调 */
+  onBeforeInput?: (event: InputEvent) => void
+}
+
+export default function MarkdownShortcuts(props: MarkdownShortcutsProps) {
+  const {
+    initialValue = [{
+      type: 'paragraph', children: [{ text: '' }],
+    }],
+    onBeforeInput,
+    withOverride = (editor: Editor) => editor,
+  } = props;
+
+  const editor = useMemo(
+    () => withOverride(withReact(withHistory(createEditor()))),
+    [],
+  );
+
+  const renderElement = useCallback((props: RenderElementProps) => <RenderElement {...props} />, []);
+  const renderLeaf = useCallback((props: RenderLeafProps) => <RenderLeaf {...props} />, []);
+
+  const handleDOMBeforeInput = useCallback(
+    onBeforeInput
+      ? (event: InputEvent) => {
+          queueMicrotask(() => onBeforeInput!(event));
+        }
+      : () => {},
+    [editor],
+  );
+
+  const onSelectionChange = useCallback(
+    (selection: BaseSelection) => selectionChange.trigger(selection),
+    [editor],
+  );
+  const onValueChange = useCallback(
+    (value: Descendant[]) => valueChange.trigger(value),
+    [editor],
+  );
+
+  editorStore.value = editor;
+
+  return (
+    <Slate
+      editor={editor}
+      initialValue={initialValue}
+      onSelectionChange={onSelectionChange}
+      onValueChange={onValueChange}
+    >
+      <Editable
+        className='smart-docx-editor'
+        renderElement={renderElement}
+        renderLeaf={renderLeaf}
+        onDOMBeforeInput={handleDOMBeforeInput}
+      />
+    </Slate>
+  );
+}

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components-react/MarkdownElement.tsx

@@ -0,0 +1,81 @@
+import type { RenderElementProps, RenderLeafProps } from 'slate-react';
+import type { Element } from 'slate';
+import { Heading } from './elements/Heading/index';
+import { Blockquote } from './elements/Blockquote/index';
+import { List, ListItem } from './elements/List';
+
+/**
+ * 使用前缀匹配的 Markdown 节点类型
+ */
+export const SHORTCUTS: Record<string, Element['type']> = {
+  // 标题
+  '#': 'heading',
+  '##': 'heading',
+  '###': 'heading',
+  '####': 'heading',
+  '#####': 'heading',
+  '######': 'heading',
+  // 引用
+  '>': 'blockquote',
+  // 无序列表
+  '*': 'list-item',
+  '-': 'list-item',
+  '+': 'list-item',
+};
+
+/**
+ * 加粗 / 斜线 / 删除线 / 下划线
+ */
+export const MARKS: [RegExp, keyof RenderLeafProps['leaf']][] = [
+  [/\*\*(.+?)\*\*$/, 'bold'],
+  [/\*(.+?)\*$/, 'italic'],
+  [/\~\~(.+?)\~\~$/, 'del'],
+  [/\~(.+?)\~$/, 'underline'],
+];
+
+/**
+ * 渲染元素节点
+ */
+export function RenderElement(props: RenderElementProps) {
+  // 标题
+  if (props.element.type === 'heading')
+    return <Heading {...props} />;
+  // 引用
+  if (props.element.type === 'blockquote')
+    return <Blockquote {...props} />;
+  // 列表
+  if (props.element.type === 'list')
+    return <List {...props} />;
+  // 列表项
+  if (props.element.type === 'list-item')
+    return <ListItem {...props} />;
+
+  // 段落
+  return (
+    <p {...props.attributes}>
+      {props.children}
+    </p>
+  );
+};
+
+/**
+ * 渲染叶子节点
+ */
+export function RenderLeaf({ attributes, children, leaf }: RenderLeafProps) {
+  if (leaf.bold)
+    children = <strong>{children}</strong>;
+
+  if (leaf.code)
+    children = <code>{children}</code>;
+
+  if (leaf.italic)
+    children = <em>{children}</em>;
+
+  if (leaf.del)
+    children = <del>{children}</del>;
+
+  if (leaf.underline)
+    children = <u>{children}</u>;
+
+  return <span {...attributes}>{children}</span>;
+}

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components-react/elements/Blockquote/index.sass

@@ -0,0 +1,6 @@
+docx-blockquote
+  @apply block c-neutral-6
+  @apply b-l-(2 solid neutral-4)
+  @apply my-2 pl-3
+  :host-context(.dark) &
+    @apply c-neutral-4

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components-react/elements/Blockquote/index.tsx

@@ -0,0 +1,12 @@
+import type { RenderElementProps } from 'slate-react';
+
+/**
+ * 引用
+ */
+export function Blockquote(props: RenderElementProps) {
+  return (
+    <docx-blockquote {...props.attributes}>
+      {props.children}
+    </docx-blockquote>
+  );
+}

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components-react/elements/Heading/index.sass

@@ -0,0 +1,14 @@
+docx-h1, docx-h2, docx-h3, docx-h4, docx-h5, docx-h6
+  @apply block font-bold
+docx-h1
+  @apply text-26px mt-26px mb-10px
+docx-h2
+  @apply text-22px mt-22px mb-8px
+docx-h3
+  @apply text-20px mt-20px mb-8px
+docx-h4
+  @apply text-18px mt-18px mb-8px
+docx-h5
+  @apply text-16px mt-18px mb-8px
+docx-h6
+  @apply text-16px mt-16px mb-8px