@smartos-lib/components 1.7.0-beta.0

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

@@ -0,0 +1,17 @@
+import type { RenderElementProps } from 'slate-react';
+import type { HeadingElement } from '../../types/custom-types';
+
+/**
+ * 标题
+ */
+export function Heading(props: RenderElementProps) {
+  const element = props.element as HeadingElement;
+
+  const Tag = `docx-h${element.level}`;
+
+  return (
+    <Tag {...props.attributes}>
+      {props.children}
+    </Tag>
+  );
+}

package/src/web-components/smart-docx-editor/MarkdownShortcuts/components-react/elements/List/index.scss

@@ -0,0 +1,16 @@
+docx-ul, docx-ol, docx-li {
+  @apply block;
+}
+
+docx-li {
+  @apply list-none;
+
+  &:not(.ordered) {
+    @apply relative lh-6 pl-6;
+    @apply before-(
+      content-[''] size-6 i-ci-dot-01-xs pointer-events-none
+      flex justify-left items-center
+      absolute top-0 left-0 -translate-x-1/4
+    )
+  }
+}

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

@@ -0,0 +1,39 @@
+import type { RenderElementProps } from 'slate-react';
+import { createContext } from 'react';
+import type { ListElement } from '../../types/custom-types';
+
+const { Provider, Consumer } = createContext(false);
+
+/**
+ * 列表
+ */
+export function List(props: RenderElementProps) {
+  const element = props.element as ListElement;
+
+  const Tag = `docx-${element.ordered ? 'o' : 'u'}l`;
+
+  return (
+    <Provider value={!!element.ordered}>
+      <Tag {...props.attributes}>
+        {props.children}
+      </Tag>
+    </Provider>
+  );
+}
+
+/**
+ * 列表项
+ */
+export function ListItem(props: RenderElementProps) {
+  return (
+    <Consumer>
+      {(ordered) => {
+        return (
+          <docx-li className={ordered ? 'ordered' : ''}>
+            {props.children}
+          </docx-li>
+        );
+      }}
+    </Consumer>
+  );
+}

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

@@ -0,0 +1,69 @@
+import { BaseEditor, BaseRange, Descendant } from "slate"
+import { ReactEditor } from "slate-react"
+import { HistoryEditor } from 'slate-history'
+
+/** 段落节点 */
+export type ParagraphElement = {
+  type: 'paragraph'
+  align?: string
+  children: Descendant[]
+}
+
+/** 标题节点 - H1 ~ H6 */
+export type HeadingElement = {
+  type: 'heading'
+  level: string
+  children: Descendant[]
+}
+
+/** 引用节点 */
+export type BlockquoteElement = {
+  type: 'blockquote'
+  children: Descendant[]
+}
+
+/** 列表节点 */
+export type ListElement = {
+  type: 'list'
+  /** 是否为有序列表 */
+  ordered?: boolean
+  children: Descendant[]
+}
+/** 列表项节点 */
+export type ListItemElement = {
+  type: 'list-item'
+  children: Descendant[]
+}
+
+/** 所有自定义节点 */
+type CustomElement = ParagraphElement |
+  HeadingElement |
+  BlockquoteElement |
+  ListElement |
+  ListItemElement;
+
+/** 文本节点 */
+type CustomText = {
+  bold?: boolean
+  italic?: boolean
+  del?: boolean
+  underline?: boolean
+  code?: boolean
+  text: string
+}
+
+/** 扩展的编辑器类型 */
+type CustomEditor = BaseEditor & ReactEditor & HistoryEditor & {
+  nodeToDecorations?: Map<Element, Range[]>
+}
+
+declare module 'slate' {
+  interface CustomTypes {
+    Editor: CustomEditor
+    Element: CustomElement
+    Text: CustomText
+    Range: BaseRange & {
+      [key: string]: unknown
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+import { shadowRoot } from '../shared/const';
+
+/**
+ * 获取文档选区
+ */
+export const useTextSelection = createSharedComposable(() => {
+  const selection = ref<Selection | null>(null);
+  const text = computed(() => selection.value?.toString() ?? '');
+
+  const isValidSelection = computed(() => text.value && selection.value!.rangeCount > 0);
+
+  const range = computed(() => {
+    if (isValidSelection.value) {
+      const range = selection.value!.getRangeAt(0).cloneRange();
+
+      // 使选区在鼠标终点处折叠
+      range.collapse(range.startContainer === selection.value!.focusNode);
+
+      // 修复选区在文本开头时，无法获取到正确的位置的问题
+      if (range.startOffset === 0) {
+        const newRange = document.createRange();
+        newRange.setStart(range.startContainer, 0);
+        newRange.setEnd(range.startContainer, 1);
+        return newRange;
+      }
+
+      return range;
+    }
+  });
+
+  const onValidSelectionUpdate = createEventHook<Selection>();
+
+  wheneverEffectScopeImmediate(shadowRoot, () => {
+    useEventListener(window.document, 'selectionchange', () => {
+      selection.value = null;
+      selection.value = shadowRoot.value.getSelection();
+
+      if (isValidSelection.value)
+        onValidSelectionUpdate.trigger(selection.value!);
+    });
+  });
+
+  return {
+    text,
+    isValidSelection,
+    range,
+    selection,
+    onValidSelectionUpdate: onValidSelectionUpdate.on,
+  };
+});

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

@@ -0,0 +1,19 @@
+/* Markdown 样式 */
+
+// 代码转换层
+[data-use-vue-component-wrap], [__use_react_component_wrap]
+  @apply contents
+
+// 根元素
+.smart-docx-editor
+  @apply root size-full outline-none
+
+  > :first-child
+    @apply important:mt-0
+
+// 标题
+@import "./components-react/elements/Heading/index.sass"
+// 引用
+@import "./components-react/elements/Blockquote/index.sass"
+// 列表 | 列表项
+@import "./components-react/elements/List/index.scss"

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

@@ -0,0 +1,21 @@
+<!-- Markdown 功能组装层 / 样式层 -->
+
+<template>
+  <!-- Markdown -->
+  <Markdown v-bind="props" />
+
+  <!-- 菜单栏 -->
+  <Menu />
+</template>
+
+<script lang="ts" setup>
+  import Menu from './components/Menu.vue';
+  import Markdown from './components/Markdown.vue';
+  import type { MarkdownProps } from './components/types';
+
+  const props = defineProps<Pick<MarkdownProps, 'initialValue'>>();
+</script>
+
+<style lang="sass">
+  @import url("./index.sass")
+</style>

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

@@ -0,0 +1,23 @@
+import type { BaseSelection, Descendant, Editor } from 'slate';
+
+/**
+ * 编辑器实例
+ */
+export const editor = ref() as Ref<Editor>;
+
+/**
+ * 编辑器 ShadowRoot
+ */
+export const shadowRoot = ref() as Ref<ShadowRoot & {
+  getSelection: Window['getSelection']
+}>;
+
+/**
+ * 选区变化的事件回调
+ */
+export const selectionChange = createEventHook<BaseSelection>();
+
+/**
+ * 值变化的事件回调
+ */
+export const valueChange = createEventHook<Descendant[]>();

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

@@ -0,0 +1,23 @@
+import { Editor } from 'slate';
+import { editor } from '../shared/const';
+import type { CustomText } from '../components-react/types/custom-types';
+
+/**
+ * 判断当前选区是否是某个格式
+ */
+export function isMarkActive(format: keyof Omit<CustomText, 'text'>) {
+  const marks = Editor.marks(editor.value);
+  return marks ? marks[format] === true : false;
+}
+
+/**
+ * 切换选区的格式
+ */
+export function toggleMark(format: keyof Omit<CustomText, 'text'>) {
+  const isActive = isMarkActive(format);
+
+  if (isActive)
+    Editor.removeMark(editor.value, format);
+  else
+    Editor.addMark(editor.value, format, true);
+}

package/src/web-components/smart-docx-editor/data.ts

@@ -0,0 +1,38 @@
+export const 所有支持的节点 = {
+  initialValue: [
+    {
+      type: 'paragraph',
+      children: [
+        { text: '段落, 可以是' },
+        { text: '粗体, ', bold: true },
+        { text: '也可以' },
+        { text: '是斜体', italic: true },
+        { text: '和包含' },
+        { text: '删除线', del: true },
+        { text: '及' },
+        { text: '下划线', underline: true },
+        { text: '的文本' },
+      ],
+    },
+    { type: 'heading', level: '1', children: [{ text: 'H1 标题' }] },
+    { type: 'heading', level: '2', children: [{ text: 'H2 标题' }] },
+    { type: 'heading', level: '3', children: [{ text: 'H3 标题' }] },
+    { type: 'heading', level: '4', children: [{ text: 'H4 标题' }] },
+    { type: 'heading', level: '5', children: [{ text: 'H5 标题' }] },
+    { type: 'heading', level: '6', children: [{ text: 'H6 标题' }] },
+    {
+      type: 'blockquote',
+      children: [
+        { type: 'paragraph', children: [{ text: '引用' }] },
+        { type: 'paragraph', children: [{ text: '节点' }] },
+      ],
+    },
+    {
+      type: 'list',
+      children: [
+        { type: 'list-item', children: [{ text: '无序' }] },
+        { type: 'list-item', children: [{ text: '列表' }] },
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,11 @@
+<template>
+  <smart-docx-editor
+    :initialValue.prop="所有支持的节点.initialValue"
+  />
+</template>
+
+<script lang="ts" setup>
+  import '@smartos-lib/core/dist/componentsProvider';
+  import '@@/dist/smart-docx-editor/index';
+  import { 所有支持的节点 } from './data';
+</script>

package/src/web-components/smart-docx-editor/index.md

@@ -0,0 +1,3 @@
+::: warning
+开发中
+:::

package/src/web-components/smart-docx-editor/index.ts

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

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

@@ -0,0 +1,12 @@
+<!-- Markdown 预留层 -->
+
+<template>
+  <MarkdownShortcuts v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+  import type { MarkdownProps } from './MarkdownShortcuts/components/types';
+  import MarkdownShortcuts from './MarkdownShortcuts/index.vue';
+
+  const props = defineProps<Pick<MarkdownProps, 'initialValue'>>();
+</script>

package/src/web-components/smart-docx-editor/info.ts

@@ -0,0 +1,2 @@
+export const name = '云文档编辑器';
+export const tag = 'smart-docx-editor';

package/src/web-components/smart-file-preview/category/Code.vue

@@ -0,0 +1,171 @@
+<!-- 代码 / 文件预览 -->
+
+<template>
+  <div size-full flex="~ justify-center items-center" pos="absolute top-0 left-0" c-neutral bg-dark>
+    <!-- 加载中 -->
+    <div v-if="isFileReading || isEditorLoading" flex="~ col gap-2 items-center">
+      <i-svg-spinners-blocks-shuffle-3 />
+      <div v-if="isFileReading" text-sm>文件读取中, 当前进度 {{ fileReadPercent }}%</div>
+    </div>
+    <!-- 不支持的文件 -->
+    <div v-else-if="isUnsupportedLanguage" flex="~ col justify-center items-center gap-3" c-gray>
+      <i-codicon-warning class="text-(5xl yellow)" />
+      此文件类型暂不支持预览
+      <el-button class="rounded-sm" color="#3177d3" @click="initEditor()">仍然打开</el-button>
+    </div>
+    <!-- 编辑器 -->
+    <div v-else ref="editorRef" size-full />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type * as Monaco from 'monaco-editor';
+  import loader from '@monaco-editor/loader';
+  import { getFastestCDN } from '@mixte/snippets/getFastestCDN';
+  import { shadowRoot } from '../shared/const';
+  import { devDependencies } from '../../../../../../package.json';
+
+  const props = defineProps<{ file: Blob; fileExt: string }>();
+
+  const editorRef = ref();
+  const { width, height } = useElementSize(editorRef);
+
+  const isFileReading = ref(false);
+  const isEditorLoading = ref(false);
+  const isUnsupportedLanguage = ref(false);
+
+  const monaco = shallowRef<typeof Monaco>();
+  const editor = shallowRef<Monaco.editor.IStandaloneCodeEditor>();
+  const languages = shallowRef<Monaco.languages.ILanguageExtensionPoint[]>();
+  const language = ref<string>();
+  const value = ref<string>();
+  const fileReadPercent = ref(0);
+
+  const fastestCDN = useRequestReactive(
+    () => getFastestCDN('monaco-editor', {
+      version: devDependencies['monaco-editor'].replace(/^\^/g, ''),
+      file: `/min/vs/basic-languages/css/css.js`,
+    }),
+    { immediate: true },
+  );
+
+  /**
+   * 创建 monaco 编辑器
+   */
+  async function createEditor() {
+    editor.value?.dispose();
+    isEditorLoading.value = true;
+    isUnsupportedLanguage.value = false;
+
+    await until(() => fastestCDN.isSuccess).toBeTruthy();
+
+    loader.config({
+      "vs/nls": {
+        availableLanguages: {
+          '*': 'zh-cn',
+        },
+      },
+      "paths": {
+        vs: `${fastestCDN.response}/min/vs`,
+      },
+    });
+
+    try {
+      monaco.value = await loader.init();
+      languages.value ??= monaco.value.languages.getLanguages();
+      language.value = languages.value.find(lang => lang.extensions?.includes(`.${props.fileExt}`))?.id;
+      isEditorLoading.value = false;
+
+      if (!(isUnsupportedLanguage.value = !language.value))
+        initEditor();
+    }
+    catch (error) {
+      isEditorLoading.value = false;
+    }
+  }
+
+  /**
+   * 初始化 monaco 编辑器
+   */
+  async function initEditor() {
+    isUnsupportedLanguage.value = false;
+    await nextTick();
+
+    editor.value = monaco.value!.editor.create(editorRef.value!, {
+      // 值
+      value: value.value,
+      // 编辑器语言
+      language: language.value || 'plaintext',
+      // 一个制表符等于的空格数
+      tabSize: 2,
+      // 在通过鼠标添加多个光标时使用的修改键
+      multiCursorModifier: 'ctrlCmd',
+      // 代码缩略地图
+      minimap: {
+        showSlider: 'always',
+      },
+      // 代码编辑器边距
+      padding: {
+        top: 10,
+      },
+      // 自动换行
+      wordWrap: 'on',
+      // 主题
+      theme: 'vs-dark',
+      // 只读
+      readOnly: true,
+    });
+  }
+
+  // 读取文件内容
+  wheneverEffectScopeImmediate(() => props.file, (file, _, onCleanup) => {
+    isFileReading.value = true;
+
+    const reader = new FileReader();
+
+    reader.onprogress = (event) => {
+      fileReadPercent.value = Math.round((event.loaded / event.total) * 100);
+    };
+    reader.onload = async (event) => {
+      isFileReading.value = false;
+      value.value = event.target?.result as string;
+      createEditor();
+    };
+
+    reader.readAsText(file);
+
+    onCleanup(() => {
+      reader.abort();
+    });
+  });
+
+  // 挂载 monaco 编辑器样式至 web components 组件中
+  wheneverEffectScopeImmediate(shadowRoot, (shadowRoot) => {
+    const selectors = `[data-name^="vs/editor"]`;
+
+    function insertStyle() {
+      shadowRoot!.querySelectorAll(selectors).forEach((link) => {
+        shadowRoot!.removeChild(link);
+      });
+
+      Array.from(document.querySelectorAll(selectors)).forEach((link) => {
+        shadowRoot.appendChild(link.cloneNode(true));
+      });
+    }
+
+    useMutationObserver(document.head, insertStyle, {
+      childList: true,
+    });
+
+    insertStyle();
+  });
+
+  // 动态调整编辑器大小
+  watchDeep(() => ({ width: width.value, height: height.value }), (size) => {
+    editor.value?.layout(size);
+  });
+
+  onUnmounted(() => {
+    editor.value?.dispose();
+  });
+</script>

package/src/web-components/smart-file-preview/category/Image.vue

@@ -0,0 +1,49 @@
+<!-- 图片预览 -->
+
+<template>
+  <div size-full>
+    <div ref="rootRef" size-full>
+      <img v-if="url" :src="url" hidden>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import Viewer from 'viewerjs';
+
+  const props = defineProps<{ file: Blob }>();
+
+  const rootRef = ref();
+
+  const url = useObjectUrl(() => props.file);
+
+  wheneverEffectScopeImmediate(() => rootRef.value && url.value, (_, __, onCleanup) => {
+    const viewer = new Viewer(rootRef.value, {
+      inline: true,
+      navbar: false,
+      title: false,
+      transition: false,
+      toolbar: {
+        reset: true,
+        rotateLeft: true,
+        rotateRight: true,
+        zoomIn: true,
+        zoomOut: true,
+        flipHorizontal: true,
+        flipVertical: true,
+      },
+    });
+
+    onCleanup(() => {
+      viewer.destroy();
+    });
+  });
+</script>
+
+<style lang="scss">
+  @import "viewerjs/dist/viewer.css";
+
+  .viewer-button.viewer-fullscreen {
+    display: none;
+  }
+</style>

package/src/web-components/smart-file-preview/category/Pdf.vue

@@ -0,0 +1,14 @@
+<!-- PDF 预览 -->
+
+<template>
+  <iframe
+    size-full
+    frameborder="0"
+    :src="url"
+  />
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps<{ file: Blob }>();
+  const url = useObjectUrl(() => props.file);
+</script>

package/src/web-components/smart-file-preview/category/Video.vue

@@ -0,0 +1,27 @@
+<!-- 视频预览 -->
+
+<template>
+  <video
+    ref="videoRef"
+    class="size-full absolute top-0 left-0"
+    controls
+  />
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps<{ file: Blob }>();
+
+  const videoRef = ref();
+
+  const url = useObjectUrl(() => props.file);
+
+  wheneverEffectScopeImmediate(url, () => {
+    const { playing } = useMediaControls(videoRef, {
+      src: () => url.value!,
+    });
+
+    nextTick(() => {
+      playing.value = true;
+    });
+  });
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <div mb2>
+    <el-button @click="open()">点击选择文件进行预览</el-button>
+  </div>
+
+  <div flex="~ justify-center items-center gap2" text="xs teal-5">
+    <i-ic-twotone-keyboard-arrow-down class="size-6" />
+    文件预览组件
+    <i-ic-twotone-keyboard-arrow-down class="size-6" />
+  </div>
+
+  <div b="1 solid neutral-2 dark:neutral-6" aspect-ratio-video>
+    <smart-file-preview ref="smartFilePreviewRef" v-bind="attrs" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { SmartFilePreviewElement } from '@@/dist/smart-file-preview/index';
+  import '@smartos-lib/core/dist/componentsProvider';
+  import '@@/dist/smart-file-preview/index';
+
+  const attrs = useAttrs();
+
+  const smartFilePreviewRef = ref<SmartFilePreviewElement>();
+
+  const { files, open } = useFileDialog({
+    multiple: false,
+  });
+
+  watch(() => files.value?.[0], (file) => {
+    if (file)
+      smartFilePreviewRef.value!.previewFile(file.name, file);
+  });
+</script>

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

@@ -0,0 +1,5 @@
+支持对多种文件类型的预览
+
+::: warning
+开发中
+:::