新增对象存储/账单/保留IP页面,成本今天视图与样式收敛

src/components/objectstorage/viewer/OfficePreview.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue'
+
+/** office/pdf 渲染:vue-office 组件按需异步加载,各自独立 chunk,不预览不下载 */
+const props = defineProps<{
+  kind: 'docx' | 'xlsx' | 'pdf' | 'pptx'
+  data: ArrayBuffer
+}>()
+const emit = defineEmits<{ error: [string] }>()
+
+const comps = {
+  docx: defineAsyncComponent(async () => {
+    await import('@vue-office/docx/lib/index.css')
+    return (await import('@vue-office/docx')).default
+  }),
+  xlsx: defineAsyncComponent(async () => {
+    await import('@vue-office/excel/lib/index.css')
+    return (await import('@vue-office/excel')).default
+  }),
+  pdf: defineAsyncComponent(() => import('@vue-office/pdf').then((m) => m.default)),
+  pptx: defineAsyncComponent(() => import('@vue-office/pptx').then((m) => m.default)),
+}
+const comp = computed(() => comps[props.kind])
+</script>
+
+<template>
+  <component
+    :is="comp"
+    :src="data"
+    class="office-host"
+    @error="emit('error', '文档渲染失败,请下载查看')"
+  />
+</template>
+
+<style scoped>
+.office-host {
+  height: 100%;
+}
+</style>