@smartos-lib/components 1.7.0-beta.0

package/src/stores/theme.ts

@@ -0,0 +1,29 @@
+import type { BasicColorSchema } from '@vueuse/core';
+import { defineStore } from 'pinia';
+
+export const useThemeStore = defineStore('theme', () => {
+  /** 主题模式状态 */
+  const mode = useColorMode<BasicColorSchema>({
+    storageKey: 'st-color-scheme',
+    initialValue: 'light',
+  });
+
+  /** 主题切换 */
+  const { state, next } = useCycleList<BasicColorSchema>(['light', 'dark', 'auto'], {
+    initialValue: mode.store,
+  });
+
+  /** 是否是深色模式 */
+  const dark = computed({
+    get: () => mode.value === 'dark',
+    set: v => (mode.value = v ? 'dark' : 'light'),
+  });
+
+  syncRef(mode.store, state);
+
+  return {
+    value: mode.store,
+    dark,
+    toggle: next,
+  };
+});

package/src/styles/element.scss

@@ -0,0 +1,3 @@
+@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
+  $namespace: 'smart'
+);

package/src/styles/styles.scss

@@ -0,0 +1,21 @@
+body {
+  @apply scrollbar scrollbar-rounded;
+
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+a,
+a:focus,
+a:hover {
+  @apply cursor-pointer text-primary underline;
+}
+
+a,
+a:focus,
+a:active,
+div,
+div:focus {
+  @apply outline-none;
+}

package/src/types.ts

@@ -0,0 +1,20 @@
+import type { App } from 'vue';
+import type { Router } from 'vue-router';
+
+interface UserModuleContext {
+  app: App<Element>
+  router: Router
+}
+
+/**
+ * 用户模块定义方法
+ */
+export type UserModule = (ctx: UserModuleContext) => void;
+
+/**
+ * 项目配置
+ */
+export interface Settings {
+  /** 项目名称 */
+  name: string
+}

package/src/utils/callCustomElementExposed.ts

@@ -0,0 +1,6 @@
+/**
+ * 获取自定义元素导出变量及方法
+ */
+export function getCustomElementExposed(self: any, methodName: string) {
+  return self._instance.exposed[methodName];
+}

package/src/utils/deepCloneESModule.ts

@@ -0,0 +1,10 @@
+import { deepClone } from 'mixte';
+
+/**
+ * 深拷贝 ES Module
+*/
+export function deepCloneESModule<T>(value: T): T {
+  if (value)
+    return deepClone(Object.fromEntries(Object.entries(value))) as any;
+  return value;
+}

package/src/utils/defineCustomElements.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement } from 'vue';
+import { isBrowser } from 'mixte';
+
+/**
+ * 定义自定义组件
+ * @param tag 自定义组件标签名
+ * @param component Vue 组件对象
+ */
+export function defineCustomElements(tag: string, component: any) {
+  if (isBrowser && !customElements.get(tag)) {
+    customElements.define(
+      tag,
+      component.prototype?.connectedCallback
+        ? component
+        : defineCustomElement(component),
+    );
+  }
+}

package/src/utils/formatComponentsGlob.ts

@@ -0,0 +1,16 @@
+/**
+ * 格式化导入文件的信息
+*/
+export function formatComponentsGlob(files: Record<string, any> | string[]) {
+  if (Array.isArray(files)) {
+    return Object.fromEntries(
+      files.map(path => [path.split('/').reverse()[1], path]),
+    );
+  }
+
+  return Object.fromEntries(
+    Object.entries(files).map(([path, value]) => {
+      return [path.split('/').reverse()[1], value];
+    }),
+  );
+}

package/src/utils/getFileMD5.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/utils/getFileNameAndExt.ts

@@ -0,0 +1,11 @@
+/**
+ * 获取文件名和后缀名
+ */
+export function getFileNameAndExt(fileName: string) {
+  const name = fileName.split('.');
+
+  return {
+    name: name.length > 1 ? name.slice(0, -1).join('.') : fileName,
+    ext: name.length > 1 ? name.reverse()[0].toLowerCase() : '',
+  };
+}

package/src/utils/isFileEqual.ts

@@ -0,0 +1,13 @@
+/**
+ * 比较两个文件是否相等
+ * @param file 文件1
+ * @param file2 文件2
+ */
+export function isFileEqual(file: File, file2: File) {
+  if (file.name !== file2.name) return false;
+  if (file.size !== file2.size) return false;
+  if (file.type !== file2.type) return false;
+  if (file.lastModified !== file2.lastModified) return false;
+  if (file.webkitRelativePath !== file2.webkitRelativePath) return false;
+  return true;
+}

package/src/utils/jsonToFormData.ts

@@ -0,0 +1,8 @@
+export function jsonToFormData(json: Record<string, any>) {
+  const formData = new FormData();
+
+  for (const key in json)
+    formData.append(key, json[key]);
+
+  return formData;
+}

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

@@ -0,0 +1,37 @@
+<!--
+  1. element plus 命名空间设置
+  2. 参数默认值处理
+-->
+
+<template>
+  <NConfigProvider :cls-prefix="classPrefix" :theme-overrides="commonOverrides" abstract>
+    <NMessageProvider>
+      <ElConfigProvider :locale="zhCn" namespace="smart">
+        <Index v-bind="props" />
+      </ElConfigProvider>
+    </NMessageProvider>
+  </NConfigProvider>
+</template>
+
+<script lang="ts" setup>
+  // @ts-expect-error
+  import zhCn from 'element-plus/dist/locale/zh-cn';
+  import { NConfigProvider, NMessageProvider } from 'naive-ui';
+  import Index from './index.vue';
+  import { menuStore } from './stores/menu';
+  import type { SmartDocxDrivePageProps } from './types';
+
+  const props = defineProps<SmartDocxDrivePageProps>();
+
+  const { activeMenu } = menuStore();
+
+  const { classPrefix } = useSmart();
+
+  // 当前激活的菜单项, 默认为主页
+  syncRef(activeMenu, toRef(props, 'activeMenu'), {
+    direction: 'rtl',
+    transform: {
+      rtl: value => value || (import.meta.env.DEV ? 'me' : 'home'),
+    },
+  });
+</script>

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

@@ -0,0 +1,85 @@
+import type { UseRequestOptions } from '@mixte/use';
+import type { Descendant } from 'slate';
+import { getConfigProvider } from '@smartos-lib/core';
+import type { MaybeRefOrGetter } from 'vue';
+import type { ResponseData } from '@smartos-lib/types';
+import type { CancelTokenSource } from 'axios';
+import { menuStore } from '../stores/menu';
+
+const { meActiveMenuInfo } = menuStore();
+
+/** 创建在线文档接口传参 */
+export interface CreateOnlineDocxParams {
+  /** 文档标题 */
+  fileName?: string
+  /** 文档内容 */
+  docContext?: {
+    value?: Descendant[]
+  }
+}
+
+/** 创建在线文档 */
+export function createOnlineDocx(params?: CreateOnlineDocxParams, options?: UseRequestOptions) {
+  return useRequestReactive<{
+    data: ResponseData<string>
+  }>(
+    (overlapParams?: CreateOnlineDocxParams) => {
+      const docContext: NonNullable<CreateOnlineDocxParams['docContext']> = overlapParams?.docContext ?? params?.docContext ?? {};
+      docContext.value ??= [];
+
+      return getConfigProvider('request')!({
+        url: '/de/file/createOnlineDoc',
+        method: 'post',
+        data: Object.assign({ filePath: meActiveMenuInfo.value?.filePath ?? '/' }, params, overlapParams, {
+          docContext: JSON.stringify(docContext),
+        }),
+      });
+    },
+    options,
+  );
+}
+
+/** 修改在线文档接口传参 */
+export interface UpdateOnlineDocxParams extends Partial<CreateOnlineDocxParams> {
+  userFileId: string
+}
+
+/** 修改在线文档 */
+export function updateOnlineDocx(_params?: MaybeRefOrGetter<UpdateOnlineDocxParams>, options?: UseRequestOptions) {
+  let cancelToken: CancelTokenSource | undefined;
+
+  return useRequestReactive<{ data: string }>(
+    (_overlapParams?: MaybeRefOrGetter<UpdateOnlineDocxParams>) => {
+      const params = toValue(_params);
+      const overlapParams = toValue(_overlapParams);
+
+      const docContext: NonNullable<CreateOnlineDocxParams['docContext']> = overlapParams?.docContext ?? params?.docContext ?? {};
+      docContext.value ??= [];
+
+      cancelToken?.cancel();
+      cancelToken = getConfigProvider('request')!.CancelToken.source();
+
+      return getConfigProvider('request')!({
+        url: '/de/file/updateOnlineFile',
+        method: 'post',
+        data: Object.assign({}, params, overlapParams, {
+          docContext: JSON.stringify(docContext),
+        }),
+        cancelToken: cancelToken.token,
+      });
+    },
+    options,
+  );
+}
+
+/** 获取在线文档 */
+export function getOnlineDocx(params?: { userFileId: string }, options?: UseRequestOptions) {
+  return useRequestReactive<{ data: ResponseData<{ docContext: string }> }>(
+    (overlapParams?: { userFileId: string }) => getConfigProvider('request')!({
+      url: '/de/file/queryOnlineFile',
+      method: 'get',
+      params: Object.assign({}, params, overlapParams),
+    }),
+    options,
+  );
+}

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

@@ -0,0 +1,278 @@
+import { ImageExtEnum, type ResponseData, type ResponseListData } from '@smartos-lib/types';
+import type { UseRequestOptions } from '@mixte/use';
+import { getConfigProvider } from '@smartos-lib/core';
+import { deepMerge, isNumeric } from 'mixte';
+import type { MaybeRefOrGetter } from 'vue';
+import { pick } from 'lodash-es';
+import type { CancelToken, CancelTokenSource } from 'axios';
+import type { FileItem } from '../types';
+import { menuStore } from '../stores/menu';
+import { getFileMD5 } from '@/utils/getFileMD5';
+import { jsonToFormData } from '@/utils/jsonToFormData';
+
+const { meActiveMenuInfo } = menuStore();
+
+/** 文件信息 */
+export interface FileInfo {
+  /** 文件 ID */
+  fileId: string
+  /** 用户文件 ID */
+  userFileId: string
+  /** 文件所在路径 */
+  filePath: string
+  /** 文件名 */
+  fileName: string
+  /** 文件后缀 */
+  extendName: string
+  /** 文件大小 */
+  fileSize: number
+  /**
+   * 是否是文件夹
+   *  - 0: 否 ( 是文件 )
+   *  - 1: 是 ( 是文件夹 )
+   */
+  isDir: 0 | 1
+  /**
+   * 文件类型
+   *  - 1: 普通文件
+   *  - 2: 在线文档
+   */
+  fileType: 1 | 2
+  /** 所有者 */
+  userId: string
+  /** 上传时间 */
+  uploadTime: string
+
+  /** 文件名 + 文件后缀 - 扩展字段 */
+  fileFullName: string
+  /** 下载请求 - 扩展字段 */
+  download: ReturnType<typeof downloadFile>
+  /** 下载进度 - 扩展字段 */
+  downloadProgress: Ref<number>
+  /** 图片预览 - 扩展字段 */
+  imagePreview?: ReturnType<typeof getPreviewFile>
+}
+
+/**
+ * 上传文件
+ */
+export function uploadFile(fileItem: Ref<FileItem | undefined>) {
+  return useRequestReactive(async () => {
+    const axios = getConfigProvider('request')!;
+
+    fileItem.value!.isReading = true;
+
+    const file = fileItem.value!.file;
+    const data = {
+      identifier: await getFileMD5(file),
+      filename: file.name,
+      relativePath: file.webkitRelativePath || file.name,
+      totalSize: file.size,
+      filePath: meActiveMenuInfo.value?.filePath ?? '/',
+      // 分片
+      // chunkNumber: 1,
+      // totalChunks: 1,
+      // currentChunkSize: file.size,
+      // chunkSize: file.size + 1,
+    };
+
+    const quickUpload = await axios({ url: '/de/filetransfer/uploadfile', method: 'get', params: data });
+
+    fileItem.value!.isReading = false;
+
+    // 服务器已有该文件, 不需要上传
+    if (quickUpload.data.data.skipUpload) {
+      fileItem.value!.isUploadSuccess = true;
+      fileItem.value!.isQuickUpload = true;
+      fileItem.value!.progress = 100;
+      return;
+    }
+
+    fileItem.value!.isUploading = true;
+
+    return axios({
+      url: '/de/filetransfer/uploadfile',
+      method: 'post',
+      data: jsonToFormData({ ...data, file }),
+      onUploadProgress: (progressEvent) => {
+        fileItem.value!.progress = Math.round((progressEvent.loaded * 100) / progressEvent.total!);
+      },
+    })
+      .then(() => {
+        fileItem.value!.isUploading = false;
+        fileItem.value!.isUploadSuccess = true;
+      })
+      .catch(() => {
+        fileItem.value!.isUploading = false;
+        fileItem.value!.isUploadError = true;
+      });
+  });
+}
+
+/** 获取文件列表接口传参 */
+export interface GetFileListParams {
+  /** 当前页码 @default 1 */
+  currentPage?: number
+  /** 每页条数 @default 10 */
+  pageCount?: number
+  /** 文件路径 @default '/' */
+  filePath?: string
+  /**
+   * 文件类型
+   *  - 0: 全部
+   *  - 1: 音乐
+   *  - 2: 图片
+   * @default '0'
+   */
+  fileType?: '0' | '1' | '2'
+  /**
+   * 是否是文件夹
+   *  - 0: 否 ( 是文件 )
+   *  - 1: 是 ( 是文件夹 )
+   */
+  isDir?: 0 | 1
+}
+/**
+ * 获取文件列表 ( 不包含文件夹 )
+ */
+export function getFileList(params?: MaybeRefOrGetter<GetFileListParams>, options?: UseRequestOptions) {
+  const result = useRequestReactive<{
+    data: ResponseData<ResponseListData<FileInfo>>
+  }>(
+    (overlapParams?: MaybeRefOrGetter<GetFileListParams>) => {
+      return getConfigProvider('request')!({
+        url: '/de/file/getFileList',
+        method: 'get',
+        params: deepMerge({ currentPage: 1, pageCount: 1000, filePath: '/', fileType: '0' }, toValue(params), toValue(overlapParams), { isDir: 0 }),
+      });
+    },
+    options,
+  );
+
+  result.onSuccess(() => {
+    if (!result.data?.data.records.length) return;
+
+    // 字段格式化
+    result.data.data.records.forEach((row) => {
+      row.fileSize = isNumeric(row.fileSize) ? Number(row.fileSize) : row.fileSize;
+      row.fileFullName = `${row.fileName ?? ''}${row.extendName ? `.${row.extendName}` : ''}`;
+    });
+
+    // 写入预览相关
+    result.data.data.records.forEach((row) => {
+      if (ImageExtEnum.includes(row.extendName)) {
+        row.imagePreview = getPreviewFile({ userFileId: row.userFileId, isMin: true });
+        row.imagePreview.execute();
+      }
+    });
+
+    // 写入下载相关
+    result.data.data.records.forEach((row) => {
+      const progress = ref<number>(0);
+      const download = downloadFile(() => pick(row, ['userFileId']), { progress });
+
+      row.downloadProgress = progress;
+      row.download = download;
+
+      download.onSuccess(() => {
+        const url = URL.createObjectURL(download.data!);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `${row.fileFullName}`;
+        a.setAttribute('target', '_blank');
+        a.click();
+        URL.revokeObjectURL(url);
+      });
+    });
+  });
+
+  return result;
+}
+
+/** 获取预览文件接口传参 */
+export interface GetPreviewFileParams {
+  /** 文件 ID */
+  userFileId: string
+  /** 是否是小尺寸图片 */
+  isMin?: boolean
+}
+/**
+ * 获取预览文件
+ */
+export function getPreviewFile(params?: MaybeRefOrGetter<GetPreviewFileParams>, options?: UseRequestOptions) {
+  return useRequestReactive<ResponseData<Blob>>(
+    (overlapParams?: MaybeRefOrGetter<GetPreviewFileParams>) => {
+      return getConfigProvider('request')!({
+        url: '/de/filetransfer/preview',
+        method: 'get',
+        params: deepMerge({}, toValue(params), toValue(overlapParams)),
+        responseType: 'blob',
+      });
+    },
+    options,
+  );
+}
+
+/** 获取预览文件接口选项 */
+export interface DownloadFileOptions {
+  /** 下载进度 */
+  progress?: Ref<number>
+  /** 取消请求 */
+  cancelToken?: CancelToken
+}
+/** 下载文件 */
+export function downloadFile(params?: MaybeRefOrGetter<{ userFileId: string }>, options?: DownloadFileOptions, requestOptions?: UseRequestOptions) {
+  return useRequestReactive<ResponseData<Blob>>(
+    (overlapParams?: MaybeRefOrGetter<{ userFileId: string }>, overlapOptions?: DownloadFileOptions) => {
+      const progress = overlapOptions?.progress ?? options?.progress;
+      const cancelToken = overlapOptions?.cancelToken ?? options?.cancelToken;
+
+      return getConfigProvider('request')!({
+        url: '/de/filetransfer/downloadfile',
+        method: 'get',
+        params: deepMerge({}, toValue(params), toValue(overlapParams)),
+        responseType: 'blob',
+        cancelToken,
+        onDownloadProgress: (progressEvent) => {
+          if (progress)
+            progress.value = Math.round((progressEvent.loaded * 100) / progressEvent.total!);
+        },
+      });
+    },
+    requestOptions,
+  );
+}
+
+/** 重命名文件 */
+export function renameFile(params?: MaybeRefOrGetter<{ userFileId: string; fileName: string }>, options?: UseRequestOptions) {
+  let cancelToken: CancelTokenSource | undefined;
+
+  return useRequestReactive<ResponseData>(
+    (overlapParams?: MaybeRefOrGetter<{ userFileId: string; fileName: string }>) => {
+      cancelToken?.cancel();
+      cancelToken = getConfigProvider('request')!.CancelToken.source();
+
+      return getConfigProvider('request')!({
+        url: '/de/file/renamefile',
+        method: 'post',
+        data: deepMerge({}, toValue(params), toValue(overlapParams)),
+        cancelToken: cancelToken.token,
+      });
+    },
+    options,
+  );
+}
+
+/** 删除文件 */
+export function deleteFile(params?: MaybeRefOrGetter<{ userFileId: string }>, options?: UseRequestOptions) {
+  return useRequestReactive<ResponseData>(
+    (overlapParams?: MaybeRefOrGetter<{ userFileId: string }>) => {
+      return getConfigProvider('request')!({
+        url: '/de/file/deletefile',
+        method: 'post',
+        data: deepMerge({}, toValue(params), toValue(overlapParams)),
+      });
+    },
+    options,
+  );
+}

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

@@ -0,0 +1,72 @@
+import type { UseRequestOptions } from '@mixte/use';
+import type { ResponseData, ResponseListData } from '@smartos-lib/types';
+import { getConfigProvider } from '@smartos-lib/core';
+import { deepMerge } from 'mixte';
+import type { MaybeRefOrGetter } from 'vue';
+import { menuStore } from '../stores/menu';
+import type { FileInfo, GetFileListParams } from './file';
+
+let meActiveMenuInfo: ReturnType<typeof menuStore>['meActiveMenuInfo'];
+
+// 有循环引用的问题, 延迟再获取
+Promise.resolve().then(() => {
+  meActiveMenuInfo = menuStore().meActiveMenuInfo;
+});
+
+/** 文件夹信息 */
+export interface DirInfo {
+  /** 文件夹 ID */
+  id: string
+  /** 文件夹名称 */
+  label: string
+  /** 文件夹路径 */
+  filePath: string
+  /** 子文件夹 */
+  children: DirInfo[]
+}
+
+/** 获取目录树 */
+export function getDirTree(options?: UseRequestOptions) {
+  return useRequestReactive<{
+    data: ResponseData<DirInfo>
+  }>(
+    () => getConfigProvider('request')!({ url: '/de/file/getfiletree', method: 'get' }),
+    options,
+  );
+}
+
+/**
+ * 获取文件夹列表 ( 不包含文件 )
+ */
+export function getFolderList(params?: MaybeRefOrGetter<GetFileListParams>, options?: UseRequestOptions) {
+  return useRequestReactive<{
+    data: ResponseData<ResponseListData<FileInfo>>
+  }>(
+    (overlapParams?: MaybeRefOrGetter<GetFileListParams>) => {
+      return getConfigProvider('request')!({
+        url: '/de/file/getFileList',
+        method: 'get',
+        params: deepMerge({ currentPage: 1, pageCount: 50, filePath: '/', fileType: '0' }, toValue(params), toValue(overlapParams), { isDir: 1 }),
+      });
+    },
+    options,
+  );
+}
+
+/** 创建文件夹 */
+export function createDir(params?: { fileName: string }, options?: UseRequestOptions) {
+  return useRequestReactive<{
+    data: ResponseData<DirInfo>
+  }>(
+    (overlapParams?: { fileName: string }) => getConfigProvider('request')!({
+      url: '/de/file/createFold',
+      method: 'post',
+      data: deepMerge(
+        { filePath: meActiveMenuInfo.value?.filePath ?? '/' },
+        toValue(params),
+        toValue(overlapParams),
+      ),
+    }),
+    options,
+  );
+}

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

@@ -0,0 +1,8 @@
+<template>
+  <Header title="主页" mb6 />
+  <el-scrollbar class="-mr4" view-style="padding-right: 16px" height="100%" />
+</template>
+
+<script lang="ts" setup>
+  import Header from '../components-private/Header.vue';
+</script>