@smartos-lib/components 1.7.0-beta.0

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

@@ -0,0 +1,164 @@
+<!-- 文件上传相关 -->
+
+<template>
+  <div
+    v-if="showUploadPanel"
+    class="upload-panel w-100 max-w-[calc(100vw-48px)] max-h-[calc(100vh-48px)]"
+    flex="~ col" pos="fixed bottom-6 right-6" overflow-hidden bg-white z-6666
+  >
+    <!-- 标题区 -->
+    <div h-13.5 flex="~ items-center gap-1 none" transition-colors px-5.5>
+      <!-- 正在上传中 -->
+      <template v-if="uploadingFiles.length">
+        <i-line-md-uploading-loop class="size-6 c-primary mr-2" />
+        <span>正在上传 · 剩余 {{ unuploadedFiles.length + uploadingFiles.length }} 项</span>
+      </template>
+      <!-- 上传完成 -->
+      <template v-else>
+        <i-gridicons-checkmark-circle class="size-6 c-success mr-2" />
+        <span>上传完成</span>
+        <span v-if="fileList.length !== uploadSuccessFiles.length">· 失败 {{ fileList.length - uploadSuccessFiles.length }} 项</span>
+        <span>· 共 {{ fileList.length }} 项</span>
+      </template>
+      <div flex-grow />
+      <button class="upload-panel-btn" @click="showFileList = !showFileList">
+        <i-material-symbols-keyboard-arrow-down class="size-6.5 transition-all" :class="{ 'rotate-180': !showFileList }" />
+      </button>
+      <button class="upload-panel-btn" @click="showUploadPanel = false">
+        <i-material-symbols-close-rounded class="size-5.5" />
+      </button>
+    </div>
+    <!-- 上传文件列表 -->
+    <div v-auto-animate>
+      <el-scrollbar v-if="showFileList" height="480px">
+        <template v-for="file in fileList" :key="file.id">
+          <div :ref="(el) => file.ref = el" flex="~ items-center gap-3" relative px-5.5 py-3>
+            <!-- 图标 -->
+            <FileIcon :ext="file.fileExt" />
+            <!-- 文件信息 -->
+            <div flex="~ grow col" overflow-hidden>
+              <!-- 文件名 -->
+              <div font-mono text-sm flex>
+                <div truncate>{{ file.fileName }}</div>
+                <div v-if="file.fileExt">.{{ file.fileExt }}</div>
+              </div>
+              <!-- 已上传文件大小 / 文件大小 -->
+              <div font-mono text="xs neutral">
+                <span v-if="file.isUploading && isNumeric(file.progress)">{{ prettyBytes(file.file.size * file.progress / 100) }} /</span>
+                {{ prettyBytes(file.file.size) }}
+                <span v-if="file.isReading" inline-flex="~ items-center" gap-1>· 文件读取中<i-svg-spinners-bars-fade /></span>
+                <span v-else-if="file.isUploading" inline-flex="~ items-center" gap-1>· 文件上传中<i-svg-spinners-bars-fade /></span>
+                <template v-else-if="file.isUploadError">· <span c-red>上传失败</span></template>
+                <template v-else-if="file.isQuickUpload">· <span inline-flex="~ items-center" gap-1 c-success>极速秒传<i-fxemoji-rocket /></span></template>
+                <template v-else-if="file.isUploadSuccess">· <span c-success>上传成功</span></template>
+              </div>
+            </div>
+            <!-- 上传进度 -->
+            <div
+              h-full b-b="2 solid primary" pos="absolute top-0 left-0" bg-neutral-1 z--1 transition-width
+              v-bind="file.isUploadError ? { class: 'w-full b-red!' } : file.isUploading ? { style: { width: `${file.progress}%` } } : {}"
+            />
+          </div>
+        </template>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { isNumeric, uniqueKey } from 'mixte';
+  import { vAutoAnimate } from '@formkit/auto-animate/vue';
+  import prettyBytes from 'pretty-bytes';
+  import type { FileItem } from '../types';
+  import { uploadFile } from '../apis/file';
+  import FileIcon from './FileIcon.vue';
+  import { isFileEqual } from '@/utils/isFileEqual';
+  import { getFileNameAndExt } from '@/utils/getFileNameAndExt';
+
+  const emit = defineEmits(['success']);
+
+  /** 显示上传面板 */
+  const showUploadPanel = ref(false);
+  /** 显示文件列表 */
+  const showFileList = ref(true);
+
+  /** 文件上传线程 */
+  const uploadThreads = ref(
+    Array.from({ length: 5 }).map(() => {
+      const uploadThreadFile = ref<FileItem>();
+      return [uploadThreadFile, uploadFile(uploadThreadFile)] as const;
+    }),
+  );
+
+  /** 文件选择 */
+  const { open, onChange } = useFileDialog({ reset: true });
+  /** 文件夹选择 */
+  const { open: openDirectory, onChange: onChangeDirectory } = useFileDialog({ reset: true, directory: true });
+  /** 文件列表 */
+  const fileList = ref<FileItem[]>([]);
+
+  /** 正在上传的文件列表 */
+  const uploadingFiles = computed(() => fileList.value.filter(item => item.isReading || item.isUploading));
+  /** 上传成功的文件列表 */
+  const uploadSuccessFiles = computed(() => fileList.value.filter(item => item.isUploadSuccess));
+  /** 未上传的文件列表 */
+  const unuploadedFiles = computed(() => fileList.value.filter(item => !item.isReading && !item.isUploading && !item.isUploadSuccess && !item.isUploadError));
+  /** 空余线程列表 */
+  const freeThreads = computed(() => uploadThreads.value.filter(([item]) => !item.value || !item.value.isUploading));
+
+  // 选择 文件/文件夹 的回调
+  [onChange, onChangeDirectory].forEach(fn => fn((files: FileList) => {
+    if (!files?.length) return;
+    if (fileList.value.length === uploadSuccessFiles.value.length) fileList.value = [];
+
+    showUploadPanel.value = true;
+    showFileList.value = true;
+
+    Array.from(files).forEach((file) => {
+      if (unuploadedFiles.value.find(item => isFileEqual(item.file, file))) return;
+
+      const { name, ext } = getFileNameAndExt(file.name);
+
+      fileList.value.push({
+        id: uniqueKey(fileList.value),
+        file,
+        fileName: name,
+        fileExt: ext,
+      });
+    });
+  }));
+
+  // 有未上传的文件和空余线程时, 开始上传
+  wheneverEffectScopeImmediate(() => unuploadedFiles.value.length > 0 && freeThreads.value.length > 0, () => {
+    freeThreads.value.forEach((freeThread) => {
+      if (!unuploadedFiles.value[0]) return;
+      freeThread[0].value = unuploadedFiles.value[0];
+      freeThread[1].execute();
+    });
+  });
+  // 滚动滚动条至正在上传的文件
+  wheneverImmediate(() => uploadingFiles.value[0], (uploadingFile) => {
+    (uploadingFile.ref as HTMLDivElement)?.scrollIntoView({ block: 'center', inline: 'center' });
+  });
+  // 上传完成, 且没有未上传的文件, 且有上传成功的文件时, 通知父组件 ( 上传失败的暂时不管 )
+  wheneverEffectScopeImmediate(() => fileList.value.length, () => {
+    wheneverImmediate(() => !uploadingFiles.value.length && !unuploadedFiles.value.length && !!uploadSuccessFiles.value.length, () => {
+      emit('success');
+    });
+  });
+
+  defineExpose({
+    open,
+    openDirectory,
+  });
+</script>
+
+<style lang="sass" scoped>
+  .upload-panel
+    box-shadow: 0 0 1px 1px rgba(28,28,32,.05), 0 8px 24px rgba(28,28,32,.12)
+    border-radius: 5px
+  .upload-panel-btn
+    @apply size-7 flex-(~ justify-center items-center)
+    @apply c-neutral bg-transparent
+    @apply hover:c-neutral-5 hover:bg-neutral-1
+</style>

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

@@ -0,0 +1,62 @@
+<!-- 文件图标 -->
+
+<template>
+  <div class="size-9 text-9 relative overflow-hidden [&>svg]-absolute" flex="~ justify-center items-center none">
+    <!-- 代码相关 -->
+    <i-bi-filetype-js v-if="ext === 'js'" />
+    <i-ph-file-ts-light v-else-if="ext === 'ts'" style="font-size: 117%" />
+    <i-bi-filetype-jsx v-else-if="ext === 'jsx'" />
+    <i-bi-filetype-tsx v-else-if="ext === 'tsx'" />
+    <i-bi-filetype-xml v-else-if="ext === 'xml'" />
+    <i-bi-filetype-html v-else-if="ext === 'html'" />
+    <i-bi-filetype-css v-else-if="ext === 'css'" />
+    <i-bi-filetype-sass v-else-if="ext === 'sass'" />
+    <i-bi-filetype-scss v-else-if="ext === 'scss'" />
+    <!-- less -->
+    <i-bi-filetype-yml v-else-if="['yml', 'yaml'].includes(ext)" />
+    <i-bi-filetype-json v-else-if="ext === 'json'" />
+    <i-bi-filetype-txt v-else-if="ext === 'txt'" />
+    <i-bi-filetype-md v-else-if="ext === 'md'" />
+    <i-bi-filetype-mdx v-else-if="ext === 'mdx'" />
+    <i-vscode-icons-file-type-vue v-else-if="ext === 'vue'" />
+    <i-bi-filetype-java v-else-if="ext === 'java'" />
+    <i-bi-filetype-php v-else-if="ext === 'php'" />
+    <i-bi-filetype-sql v-else-if="ext === 'sql'" />
+    <i-vscode-icons-file-type-config v-else-if="ext === 'properties'" />
+    <i-vscode-icons-file-type-bat v-else-if="ext === 'bat'" />
+    <i-vscode-icons-file-type-shell v-else-if="ext === 'sh'" />
+    <i-vscode-icons-file-type-npm v-else-if="ext === 'npmrc'" />
+    <i-vscode-icons-file-type-git v-else-if="ext === 'gitignore'" class="grayscale-100" />
+    <i-vscode-icons-file-type-eslint v-else-if="ext === 'eslintrc'" />
+    <i-vscode-icons-file-type-eslint v-else-if="ext === 'eslintignore'" class="grayscale-100" />
+    <!-- 图片 -->
+    <i-bi-filetype-jpg v-else-if="['jpg', 'jpeg'].includes(ext)" />
+    <i-bi-filetype-png v-else-if="ext === 'png'" />
+    <i-bi-filetype-bmp v-else-if="ext === 'bmp'" />
+    <i-bi-filetype-gif v-else-if="ext === 'gif'" />
+    <i-bi-filetype-svg v-else-if="ext === 'svg'" />
+    <!-- webp -->
+    <!-- PDF -->
+    <i-bi-filetype-pdf v-else-if="ext === 'pdf'" />
+
+    <i-bi-filetype-ppt v-else-if="ext === 'ppt'" />
+    <i-bi-filetype-pptx v-else-if="ext === 'pptx'" />
+    <i-bi-filetype-xls v-else-if="ext === 'xls'" />
+    <i-bi-filetype-xlsx v-else-if="ext === 'xlsx'" />
+    <i-bi-filetype-doc v-else-if="ext === 'doc'" />
+    <i-bi-filetype-docx v-else-if="ext === 'docx'" />
+    <i-bi-file-earmark-zip v-else-if="['zip', '7z', 'rar'].includes(ext)" />
+
+    <i-bi-filetype-psd v-else-if="ext === 'psd'" />
+    <i-bi-filetype-raw v-else-if="ext === 'raw'" />
+    <i-bi-filetype-exe v-else-if="ext === 'exe'" />
+    <i-bi-filetype-mp3 v-else-if="ext === 'mp3'" />
+    <i-bi-filetype-mp4 v-else-if="ext === 'mp4'" />
+    <i-formkit-filedoc v-else />
+  </div>
+</template>
+
+<!-- bat, sh,  -->
+<script lang="ts" setup>
+  defineProps<{ ext: string }>();
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <div flex="~ justify-center items-center none gap-2" v-bind="attrs">
+    <slot v-if="slots.title" name="title" />
+    <b v-else text-xl>{{ title }}</b>
+
+    <div flex-grow />
+
+    <div flex="~ gap-2">
+      <CustomPopover placement="bottom-start">
+        <template #reference>
+          <el-button class="px-5" :color="colors.blue[6]" plain>上传<i-ic-outline-keyboard-arrow-down class="size-5 ml-1 -mr-2" /></el-button>
+        </template>
+
+        <div class="cp-item" @click="uploadRef!.open()"><i-material-symbols-upload-file class="size-6 c-orange" />上传文件</div>
+        <div class="cp-item" @click="uploadRef!.openDirectory()"><i-ph-folder-notch-plus-fill class="size-6 c-yellow" />上传文件夹</div>
+      </CustomPopover>
+
+      <CustomPopover placement="bottom-end">
+        <template #reference>
+          <el-button class="px-5 ml-0!" :color="colors.blue[6]">新建<i-ic-outline-keyboard-arrow-down class="size-5 ml-1 -mr-2" /></el-button>
+        </template>
+
+        <div class="cp-item" @click="createDocRef?.createDoc()"><i-ri-file-text-fill class="size-6 c-blue-5" />文档</div>
+        <div class="cp-item" @click="toCreateDir()"><i-ph-folder-fill class="size-6 c-yellow" />文件夹</div>
+      </CustomPopover>
+    </div>
+  </div>
+
+  <!-- 文件上传相关 -->
+  <DocxUpload ref="uploadRef" @success="emit('upload-success')" />
+  <!-- 云文档 -->
+  <DocxDoc ref="createDocRef" />
+</template>
+
+<script lang="ts" setup>
+  import CustomPopover from '../components/CustomPopover.vue';
+  import DocxUpload from '../components/DocxUpload.vue';
+  import DocxDoc from '../components/DocxDoc.vue';
+  import { createDir } from '../apis/folder';
+  import { usePrompt } from '../composables/usePrompt';
+  import { colors } from '@/shared/unocss.theme';
+
+  interface Props {
+    title?: string
+  }
+
+  defineProps<Props>();
+
+  const emit = defineEmits(['upload-success']);
+  const slots = defineSlots<{
+    title?: () => any
+  }>();
+
+  const attrs = useAttrs();
+
+  const uploadRef = ref<typeof DocxUpload>();
+  const createDocRef = ref<typeof DocxDoc>();
+
+  function toCreateDir() {
+    usePrompt('', '新建文件夹', async (instance) => {
+      await createDir({ fileName: instance.inputValue }).execute();
+      emit('upload-success');
+    });
+  }
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <div flex="~ items-center gap-2">
+    <div class="[&>*]-size-10">
+      <img v-if="icon" :src="icon">
+      <i-system-uicons-document-stack v-else />
+    </div>
+    <b text-sm>{{ title || 'SmartOS 云文档' }}</b>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { SmartDocxDrivePageProps } from '../types';
+
+  defineProps<Pick<SmartDocxDrivePageProps, 'icon' | 'title'>>();
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <div flex="~ col gap-1">
+    <!-- 主页 -->
+    <DocxDir
+      :class="{ active: activeMenu === 'home' }" :showOpen="false" name="主页" hiddenActions
+      @click="activeMenu = 'home'"
+    >
+      <template #icon>
+        <i-ic-baseline-home class="size-5.5" />
+      </template>
+    </DocxDir>
+    <!-- 我的空间 -->
+    <DocxDir
+      :class="{ active: activeMenu === 'me' && (dirTree.isLoading || meActiveMenu === dirTree.data?.data.id) }"
+      :info="dirTree.data?.data" name="我的空间" hiddenActions
+      @click="activeMenu = 'me'"
+    >
+      <template #icon="{ isActive }">
+        <i-ph-folder-minus-fill v-if="isActive" class="size-5" />
+        <i-ph-folder-minus-duotone v-else class="size-5" />
+      </template>
+    </DocxDir>
+  </div>
+</template>
+
+<script lang="tsx" setup>
+  import { menuStore } from '../stores/menu';
+  import DocxDir from '../components/DocxDir.vue';
+
+  const {
+    activeMenu, meActiveMenu,
+    dirTree,
+  } = menuStore();
+</script>

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

@@ -0,0 +1,36 @@
+<!-- 顶部固定内容 -->
+
+<template>
+  <div flex="~ items-center none">
+    <div flex-grow>
+      <el-input placeholder="搜索">
+        <template #prefix>
+          <i-ph-magnifying-glass class="size-4.5 c-black" />
+        </template>
+      </el-input>
+    </div>
+
+    <div flex-grow />
+
+    <!-- <el-avatar class="cursor-pointer" :size="36" :src="info.data?.data?.sysUser?.avatar">
+      <i-svg-spinners-3-dots-scale v-if="info.isLoading" class="size-4" />
+      <i-tdesign-user-error-1 v-else-if="info.data?.data?.sysUser?.avatar" class="size-5 relative left-.3" />
+      <i-material-symbols-person v-else class="size-5" />
+    </el-avatar> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+  // import { getConfigProvider } from '@smartos-lib/core';
+
+  // const axios = getConfigProvider('request')!;
+
+  // const info = useRequestReactive<any, any>(() => {
+  //   return axios({ url: '/admin/user/info', method: 'get' });
+  // });
+
+  // info.execute();
+  // info.onSuccess(() => {
+  //   console.log(info.data); // eslint-disable-line no-console
+  // });
+</script>

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

@@ -0,0 +1,41 @@
+import type { ElDialog } from 'element-plus';
+
+export function useFullscreenElDialog(dialogRef: Ref<typeof ElDialog | undefined>) {
+  wheneverEffectScopeImmediate(() => dialogRef.value?.dialogContentRef, (dialog) => {
+    const dialogElement = unrefElement(dialog) as HTMLDivElement | null;
+    const header = dialogElement?.querySelector<HTMLDivElement>('.smart-dialog__header');
+    const headerClose = dialogElement?.querySelector<HTMLButtonElement>('.smart-dialog__headerbtn');
+    const body = dialogElement?.querySelector<HTMLDivElement>('.smart-dialog__body');
+
+    dialogElement && Object.assign(dialogElement.style, {
+      'width': '100%',
+      'height': '100%',
+      'display': 'flex',
+      'flex-direction': 'column',
+      'border-radius': 0,
+      'margin': 0,
+    });
+
+    header && Object.assign(header.style, {
+      'display': 'flex',
+      'align-items': 'center',
+      'flex': 'none',
+      'height': '54px',
+      'padding': '0 20px',
+    });
+
+    headerClose && Object.assign(headerClose.style, {
+      'display': 'flex',
+      'justify-content': 'center',
+      'align-items': 'center',
+      'top': '0px',
+    });
+
+    body && Object.assign(body.style, {
+      'flex-grow': 1,
+      'padding': 0,
+      'overflow': 'hidden',
+      'border-top': '1px solid #ebeef5',
+    });
+  });
+}

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

@@ -0,0 +1,73 @@
+import type { ElMessageBoxOptions, MessageBoxData, MessageBoxState } from 'element-plus';
+import type { Awaitable } from '@vueuse/core';
+import { ElMessageBox } from 'element-plus';
+import { isFunction, isPlainObject } from 'mixte';
+
+let type: 'confirm' | 'prompt' = 'prompt';
+
+type UseConfirmFn = (instance: MessageBoxState, done: () => any) => Awaitable<boolean | void>;
+
+export function usePrompt(message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], fn: UseConfirmFn, options?: ElMessageBoxOptions): Promise<MessageBoxData>;
+export function usePrompt(message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options: ElMessageBoxOptions, fn: UseConfirmFn): Promise<MessageBoxData>;
+
+export function usePrompt(
+  message: ElMessageBoxOptions['message'],
+  title: ElMessageBoxOptions['title'],
+  arg1: any,
+  arg2?: any,
+) {
+  let userConfirmFn: UseConfirmFn = arg1;
+  let userOptions: ElMessageBoxOptions = arg2;
+
+  if (!isFunction(arg1)) {
+    userConfirmFn = arg2;
+    userOptions = arg1;
+  }
+
+  const options: ElMessageBoxOptions = {
+    closeOnClickModal: false, // 默认不可通过点击遮罩关闭
+    closeOnPressEscape: false, // 默认不可通过按下 ESC 键关闭
+  };
+
+  if (isPlainObject(userOptions))
+    Object.assign(options, userOptions, { beforeClose: undefined });
+
+  if (isFunction(userConfirmFn)) {
+    options.beforeClose = async function (action, instance, done) {
+      if (action !== 'confirm') return done();
+
+      const originConfirmButtonText = instance.confirmButtonText;
+
+      instance.confirmButtonLoading = true;
+      instance.confirmButtonText = '执行中...';
+
+      try {
+        if (await userConfirmFn(instance, done) !== false) done();
+      }
+      catch (error) {
+        console.error(error);
+      }
+      finally {
+        instance.confirmButtonLoading = false;
+        instance.confirmButtonText = originConfirmButtonText;
+      }
+    };
+  }
+
+  return ElMessageBox[type](message, title, options);
+}
+
+export function useConfirm(message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], fn: UseConfirmFn, options?: ElMessageBoxOptions): Promise<MessageBoxData>;
+export function useConfirm(message: ElMessageBoxOptions['message'], title: ElMessageBoxOptions['title'], options: ElMessageBoxOptions, fn: UseConfirmFn): Promise<MessageBoxData>;
+
+export function useConfirm(
+  message: ElMessageBoxOptions['message'],
+  title: ElMessageBoxOptions['title'],
+  arg1: any,
+  arg2?: any,
+) {
+  type = 'confirm';
+  const result = usePrompt(message, title, arg1, arg2);
+  type = 'prompt';
+  return result;
+}

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

@@ -0,0 +1,10 @@
+import type { SmartDocxDrivePageProps } from './types';
+
+export const 换图标和名称: SmartDocxDrivePageProps = {
+  icon: 'https://starter-template-base.moomfe.com/favicon.svg',
+  title: 'Mixte',
+};
+
+export const 激活第二菜单: SmartDocxDrivePageProps = {
+  activeMenu: 'me',
+};

package/src/web-components/smart-docx-drive-page/external-style/custom-popover.sass

@@ -0,0 +1,8 @@
+.smart-docx-drive-page_custom-popover-item
+  @apply h10 flex-(~ items-center gap-2)
+  @apply font-sans text-(sm black)
+  @apply cursor-pointer select-none pl-2
+  @apply hover:bg-neutral-2
+
+  > .icon-wrap
+    @apply size-6 flex-(~ justify-center items-center)

package/src/web-components/smart-docx-drive-page/external-style/index.sass

@@ -0,0 +1 @@
+@import './custom-popover.sass'

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

@@ -0,0 +1,20 @@
+import App from './App.vue';
+import ExternalStyle from './external-style/index.sass?inline';
+import { tag } from './info';
+import { defineCustomElements } from '@/utils/defineCustomElements';
+
+defineCustomElements(tag, App);
+
+// 插入外置样式
+{
+  const style = document.createElement('style');
+  style.setAttribute('type', 'text/css');
+  style.setAttribute('data-component', tag);
+  style.textContent = ExternalStyle;
+
+  document.querySelectorAll(`[data-component=${tag}]`).forEach((style) => {
+    style.parentNode?.removeChild(style);
+  });
+
+  document.head.appendChild(style);
+}

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

@@ -0,0 +1,39 @@
+<!--
+  页面主框架
+-->
+
+<template>
+  <div root size-full relative>
+    <div size-full pos="absolute top-0 left-0" grid="~ cols-[260px_auto]">
+      <!-- 侧边栏 -->
+      <div size-full grid="~ rows-[auto_1fr]" bg-neutral-1 pl2>
+        <Logo py-4 pl-2.5 :icon="icon" :title="title" />
+        <div size-full relative>
+          <div size-full pos="absolute top-0 left-0" scrollbar pr2>
+            <Menu />
+          </div>
+        </div>
+      </div>
+      <!-- 右侧内容 -->
+      <div size-full flex="~ col" overflow-hidden p="l7 r4 t4">
+        <Navbar class="mb6" />
+        <Home v-if="activeMenu === 'home'" />
+        <Me v-else-if="activeMenu === 'me'" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import Logo from './components-private/Logo.vue';
+  import Menu from './components-private/Menu.vue';
+  import Navbar from './components-private/Navbar.vue';
+  import Home from './children/Home.vue';
+  import Me from './children/Me.vue';
+  import type { SmartDocxDrivePageProps } from './types';
+  import { menuStore } from './stores/menu';
+
+  defineProps<SmartDocxDrivePageProps>();
+
+  const { activeMenu } = menuStore();
+</script>

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

@@ -0,0 +1,2 @@
+export const name = '云文档云服务页';
+export const tag = 'smart-docx-drive-page';

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

@@ -0,0 +1,60 @@
+import type { DirInfo } from '../apis/folder';
+import { getDirTree } from '../apis/folder';
+import type { SmartDocxDrivePageProps } from '../types';
+
+/**
+ * 菜单相关
+ */
+export const menuStore = createGlobalState(() => {
+  /** 当前激活的菜单项 */
+  const activeMenu = ref<SmartDocxDrivePageProps['activeMenu']>();
+  /** 我的空间打开的文件夹 */
+  const meActiveMenu = ref('');
+
+  /** 我的空间 / 目录树请求相关 */
+  const dirTree = getDirTree({ immediate: true });
+  /** 我的空间 / 平铺的目录树 */
+  const flatDirTree = computed(() => {
+    if (!dirTree.data?.data) return [];
+    return [dirTree.data.data].flatMap(function map(item): DirInfo[] {
+      return [item, ...item.children.flatMap(map)];
+    });
+  });
+
+  /** 我的空间 / 打开的文件夹信息 */
+  const meActiveMenuInfo = computed(() => {
+    return flatDirTree.value.find(item => item.id === meActiveMenu.value);
+  });
+
+  /** 我的空间 / 打开的文件夹层级信息 */
+  const meActiveMenuPathInfo = computed(() => {
+    const pathInfo: DirInfo[] = [];
+    let parent = meActiveMenuInfo.value;
+
+    while (parent) {
+      pathInfo.unshift(parent);
+      parent = flatDirTree.value.find(({ children }) => children.find(item => item.id === parent!.id))!;
+    }
+
+    return pathInfo;
+  });
+
+  const { off } = dirTree.onSuccess(() => {
+    off();
+    meActiveMenu.value = dirTree.data?.data.id ?? '';
+  });
+
+  whenever(() => activeMenu.value !== 'me', () => {
+    meActiveMenu.value = '';
+  });
+
+  return {
+    activeMenu,
+    meActiveMenu,
+
+    dirTree,
+    flatDirTree,
+    meActiveMenuInfo,
+    meActiveMenuPathInfo,
+  };
+});