-
-
{{ node.name }}
-
包含 {{ (node.children || []).length }} 个项目
+
+
+
+
+
+
+
+
+
+
+
+
{{ item.name }}
+
{{ formatDate(item.updatedAt) }}
+
+
+
+
@@ -142,8 +194,6 @@ function renderMarkdown(text) {
color: var(--muted-text);
}
-.content-empty,
-.content-folder,
.content-unsupported {
flex: 1;
display: flex;
@@ -155,22 +205,148 @@ function renderMarkdown(text) {
padding: 32px;
}
-.content-empty svg,
-.content-folder svg,
.content-unsupported svg {
opacity: 0.4;
}
-.content-folder h3 {
- margin: 0;
- font-size: 1.25rem;
+.content-directory-view {
+ flex: 1;
+ padding: 24px 32px;
+ overflow-y: auto;
+ background: var(--app-bg);
+}
+
+.directory-list {
+ max-width: 900px;
+ margin: 0 auto;
+ border: 1px solid var(--panel-border);
+ border-radius: 8px;
+ overflow: hidden;
+ background: var(--panel-bg);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.directory-header {
+ display: flex;
+ align-items: center;
+ padding: 12px 16px;
+ background: var(--ghost-code-bg);
+ border-bottom: 1px solid var(--panel-border);
+ font-size: 13px;
+ font-weight: 600;
+ color: var(--muted-text);
+}
+
+.directory-row {
+ display: flex;
+ align-items: center;
+ padding: 10px 16px;
+ border-bottom: 1px solid var(--panel-border);
+ cursor: pointer;
+ transition: background 0.15s ease;
+ font-size: 14px;
+}
+
+.directory-row:last-child {
+ border-bottom: none;
+}
+
+.directory-row:hover {
+ background: var(--ghost-code-bg);
+}
+
+.col-icon {
+ width: 24px;
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 8px;
+}
+
+.col-name {
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
color: var(--app-text);
}
-.content-folder p,
-.content-empty p {
- margin: 0;
- font-size: 0.9rem;
+.name-folder {
+ font-weight: 500;
+ color: var(--focus-ring);
+}
+
+.directory-row:hover .name-folder {
+ text-decoration: underline;
+}
+
+.col-date {
+ width: 120px;
+ flex-shrink: 0;
+ text-align: right;
+ color: var(--muted-text);
+ font-size: 13px;
+}
+
+.directory-empty {
+ padding: 48px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 16px;
+ color: var(--muted-text);
+ font-size: 14px;
+}
+
+.directory-empty svg {
+ opacity: 0.3;
+}
+
+/* File Icons (Reused from FileTree) */
+.icon-file,
+.icon-folder {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+}
+
+.icon-folder::before {
+ content: '';
+ display: block;
+ width: 16px;
+ height: 16px;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2354aeff' d='M0 2.5A1.5 1.5 0 011.5 1h2.793a.5.5 0 01.353.146l1.5 1.5a.5.5 0 00.354.146H13.5A1.5 1.5 0 0115 4.5v7.5a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 011 12v-9.5z'/%3E%3C/svg%3E") no-repeat center;
+ background-size: contain;
+}
+
+[data-theme='dark'] .icon-folder::before {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2358a6ff' d='M0 2.5A1.5 1.5 0 011.5 1h2.793a.5.5 0 01.353.146l1.5 1.5a.5.5 0 00.354.146H13.5A1.5 1.5 0 0115 4.5v7.5a1.5 1.5 0 01-1.5 1.5h-11A1.5 1.5 0 011 12v-9.5z'/%3E%3C/svg%3E") no-repeat center;
+ background-size: contain;
+}
+
+.icon-markdown::before {
+ content: '';
+ display: block;
+ width: 16px;
+ height: 16px;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236e7781' d='M14.85 3H1.15C.52 3 0 3.52 0 4.15v7.69C0 12.48.52 13 1.15 13h13.69c.64 0 1.15-.52 1.15-1.15V4.15C16 3.52 15.48 3 14.85 3zM9 11H7.5V8.5L6.25 10l-1.25-1.5V11H3.5V5H5l1.25 1.5L7.5 5H9v6zm4-2.5c0 .28-.22.5-.5.5h-1v1c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-1h-1c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h1v-1c0-.28.22-.5.5-.5s.5.22.5.5v1h1c.28 0 .5.22.5.5z'/%3E%3C/svg%3E") no-repeat center;
+ background-size: contain;
+}
+
+.icon-text::before,
+.icon-json::before,
+.icon-file::before {
+ content: '';
+ display: block;
+ width: 16px;
+ height: 16px;
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236e7781' d='M3.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h8.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H3.75zM3 1.75C3 .784 3.784 0 4.75 0h5.339c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113 16H4.75A1.75 1.75 0 013 14.25V1.75z'/%3E%3C/svg%3E") no-repeat center;
+ background-size: contain;
}
.file-ext {
diff --git a/src/components/FileTree.vue b/src/components/FileTree.vue
index 406d698..bf84580 100644
--- a/src/components/FileTree.vue
+++ b/src/components/FileTree.vue
@@ -137,18 +137,20 @@ function getIconClass(type, name) {
:creating-in-folder="creatingInFolder"
:creating-type="creatingType"
:creating-name="creatingName"
- @select="(id) => emit('select', id)"
- @toggle="(id) => emit('toggle', id)"
- @start-rename="startRename"
- @finish-rename="finishRename"
- @cancel-rename="cancelRename"
- @start-create="startCreate"
- @finish-create="finishCreate"
- @cancel-create="cancelCreate"
- @context-menu="handleContextMenu"
- @drop="handleDrop"
- @drag-start="(e, id) => emit('drag-start', e, id)"
- @drag-over="(e, id) => emit('drag-over', e, id)"
+ @select="(id) => emit('select', id)"
+ @toggle="(id) => emit('toggle', id)"
+ @start-rename="startRename"
+ @finish-rename="finishRename"
+ @cancel-rename="cancelRename"
+ @update:rename-value="(val) => renameValue = val"
+ @start-create="startCreate"
+ @finish-create="finishCreate"
+ @cancel-create="cancelCreate"
+ @update:creating-name="(val) => creatingName = val"
+ @context-menu="handleContextMenu"
+ @drop="handleDrop"
+ @drag-start="(e, id) => emit('drag-start', e, id)"
+ @drag-over="(e, id) => emit('drag-over', e, id)"
/>
@@ -241,16 +243,16 @@ export const TreeNodeItem = {
)
: h('span', { class: 'chevron-placeholder' }),
h('span', { class: props.getIconClass(node.type, node.name) }),
- isRenaming()
- ? h('input', {
- class: 'rename-input',
- value: props.renameValue,
- onInput: (e) => { props.renameValue = e.target.value },
- onKeydown: (e) => { if (e.key === 'Enter') emit('finish-rename', node); if (e.key === 'Escape') emit('cancel-rename') },
- onBlur: () => emit('finish-rename', node),
- autofocus: true
- })
- : h('span', { class: 'node-name' }, node.name),
+ isRenaming()
+ ? h('input', {
+ class: 'rename-input',
+ value: props.renameValue,
+ onInput: (e) => { emit('update:rename-value', e.target.value) },
+ onKeydown: (e) => { if (e.key === 'Enter') emit('finish-rename', node); if (e.key === 'Escape') emit('cancel-rename') },
+ onBlur: () => emit('finish-rename', node),
+ autofocus: true
+ })
+ : h('span', { class: 'node-name' }, node.name),
h('span', { class: 'node-actions' }, [
node.type === 'folder' ? [
h('button', {
@@ -274,15 +276,15 @@ export const TreeNodeItem = {
}, [
h('span', { class: 'chevron-placeholder' }),
h('span', { class: `icon-file ${props.creatingType === 'folder' ? 'icon-folder' : 'icon-file'}` }),
- h('input', {
- class: 'rename-input',
- value: props.creatingName,
- placeholder: props.creatingType === 'file' ? '文件名.md' : '文件夹名',
- onInput: (e) => { props.creatingName = e.target.value },
- onKeydown: (e) => { if (e.key === 'Enter') emit('finish-create'); if (e.key === 'Escape') emit('cancel-create') },
- onBlur: () => emit('finish-create'),
- autofocus: true
- })
+ h('input', {
+ class: 'rename-input',
+ value: props.creatingName,
+ placeholder: props.creatingType === 'file' ? '文件名.md' : '文件夹名',
+ onInput: (e) => { emit('update:creating-name', e.target.value) },
+ onKeydown: (e) => { if (e.key === 'Enter') emit('finish-create'); if (e.key === 'Escape') emit('cancel-create') },
+ onBlur: () => emit('finish-create'),
+ autofocus: true
+ })
])
: null
diff --git a/src/components/UniverEditor.vue b/src/components/UniverEditor.vue
new file mode 100644
index 0000000..97029d6
--- /dev/null
+++ b/src/components/UniverEditor.vue
@@ -0,0 +1,504 @@
+
+
+
+
+
+
+
+
+
+
+
{{ t('selectOfficeFile') || '请选择 Office 文件开始编辑' }}
+
{{ t('supportedFormats') || '支持 DOCX、XLSX、PPTX 格式' }}
+
+
+
+
+
+
+
+
+
+
+
{{ t('selectExportFormat') || '选择导出格式' }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/composables/useFileSystem.js b/src/composables/useFileSystem.js
index 598b070..bb234d0 100644
--- a/src/composables/useFileSystem.js
+++ b/src/composables/useFileSystem.js
@@ -81,6 +81,31 @@ export function useFileSystem() {
const stored = localStorage.getItem(STORAGE_KEY)
if (stored) {
tree.value = JSON.parse(stored)
+ } else {
+ // 创建示例文件和文件夹
+ const welcomeId = generateId()
+ const folderId = generateId()
+ tree.value = [
+ {
+ id: folderId,
+ name: '示例文件夹',
+ type: 'folder',
+ children: [],
+ parentId: null,
+ createdAt: Date.now(),
+ updatedAt: Date.now()
+ },
+ {
+ id: welcomeId,
+ name: '欢迎使用.md',
+ type: 'file',
+ content: '# 欢迎使用文件系统\n\n这是一个类似 GitHub 风格的文件浏览器。\n\n## 功能\n\n- ✅ 文件夹展开/折叠\n- ✅ 文件选中高亮\n- ✅ 拖拽移动\n- ✅ 右键菜单\n- ✅ 重命名\n- ✅ 新建/删除\n\n点击左侧的文件或文件夹来查看内容。\n',
+ parentId: null,
+ createdAt: Date.now(),
+ updatedAt: Date.now()
+ }
+ ]
+ save()
}
} catch {
tree.value = []
@@ -174,13 +199,9 @@ export function useFileSystem() {
error.value = null
}
- function select(id) {
- selectedId.value = id
- const node = findNode(tree.value, id)
- if (node && node.type === 'folder') {
- toggleFolder(id)
- }
- }
+function select(id) {
+ selectedId.value = id
+}
function toggleFolder(id) {
const node = findNode(tree.value, id)
diff --git a/src/router/index.js b/src/router/index.js
index fa65e01..dbb1cfa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,6 +10,11 @@ const routes = [
path: '/docs',
name: 'Docs',
component: () => import('../views/DocsView.vue')
+ },
+ {
+ path: '/univer',
+ name: 'Univer',
+ component: () => import('../views/UniverView.vue')
}
]
diff --git a/src/services/officeDetection.js b/src/services/officeDetection.js
new file mode 100644
index 0000000..7731730
--- /dev/null
+++ b/src/services/officeDetection.js
@@ -0,0 +1,135 @@
+/**
+ * Office 文件类型检测工具
+ */
+import { OfficeFormat, OfficePresetType } from './univerBridge'
+
+/**
+ * 支持的 Office 文件扩展名
+ */
+export const SUPPORTED_EXTENSIONS = {
+ [OfficeFormat.DOCX]: ['.docx'],
+ [OfficeFormat.XLSX]: ['.xlsx'],
+ [OfficeFormat.PPTX]: ['.pptx']
+}
+
+/**
+ * MIME 类型映射
+ */
+export const MIME_TYPES = {
+ [OfficeFormat.DOCX]: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ [OfficeFormat.XLSX]: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ [OfficeFormat.PPTX]: 'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+}
+
+/**
+ * 检测文件是否为 Office 文件
+ */
+export function isOfficeFile(file) {
+ if (!file) return false
+
+ const filename = file.name?.toLowerCase() || ''
+ const type = file.type?.toLowerCase() || ''
+
+ // 检查扩展名
+ for (const [format, exts] of Object.entries(SUPPORTED_EXTENSIONS)) {
+ if (exts.some(ext => filename.endsWith(ext))) {
+ return true
+ }
+ }
+
+ // 检查 MIME 类型
+ for (const [format, mime] of Object.entries(MIME_TYPES)) {
+ if (type === mime) {
+ return true
+ }
+ }
+
+ return false
+}
+
+/**
+ * 获取文件的 Office 格式
+ */
+export function getOfficeFormat(file) {
+ if (!file) return null
+
+ const filename = file.name?.toLowerCase() || ''
+ const type = file.type?.toLowerCase() || ''
+
+ // 检查扩展名
+ for (const [format, exts] of Object.entries(SUPPORTED_EXTENSIONS)) {
+ if (exts.some(ext => filename.endsWith(ext))) {
+ return format
+ }
+ }
+
+ // 检查 MIME 类型
+ for (const [format, mime] of Object.entries(MIME_TYPES)) {
+ if (type === mime) {
+ return format
+ }
+ }
+
+ return null
+}
+
+/**
+ * 获取文件图标类型
+ */
+export function getOfficeIcon(format) {
+ switch (format) {
+ case OfficeFormat.DOCX:
+ return 'doc'
+ case OfficeFormat.XLSX:
+ return 'xls'
+ case OfficeFormat.PPTX:
+ return 'ppt'
+ default:
+ return 'file'
+ }
+}
+
+/**
+ * 获取格式显示名称
+ */
+export function getFormatDisplayName(format, locale = 'zh-CN') {
+ const names = {
+ 'zh-CN': {
+ [OfficeFormat.DOCX]: 'Word 文档',
+ [OfficeFormat.XLSX]: 'Excel 表格',
+ [OfficeFormat.PPTX]: 'PowerPoint 演示文稿'
+ },
+ 'en-US': {
+ [OfficeFormat.DOCX]: 'Word Document',
+ [OfficeFormat.XLSX]: 'Excel Spreadsheet',
+ [OfficeFormat.PPTX]: 'PowerPoint Presentation'
+ }
+ }
+
+ return names[locale]?.[format] || format?.toUpperCase() || '未知格式'
+}
+
+/**
+ * 获取对应的 Preset 类型
+ */
+export function getPresetTypeByFormat(format) {
+ switch (format) {
+ case OfficeFormat.DOCX:
+ case OfficeFormat.PPTX:
+ return OfficePresetType.DOCS
+ case OfficeFormat.XLSX:
+ return OfficePresetType.SHEETS
+ default:
+ return null
+ }
+}
+
+export default {
+ isOfficeFile,
+ getOfficeFormat,
+ getOfficeIcon,
+ getFormatDisplayName,
+ getPresetTypeByFormat,
+ SUPPORTED_EXTENSIONS,
+ MIME_TYPES
+}
diff --git a/src/services/univerBridge.js b/src/services/univerBridge.js
new file mode 100644
index 0000000..03352c3
--- /dev/null
+++ b/src/services/univerBridge.js
@@ -0,0 +1,265 @@
+/**
+ * Univer 编辑器桥接服务
+ * 封装 Univer 的初始化、加载、导出等操作
+ */
+import { createUniver, LocaleType, merge } from '@univerjs/presets'
+import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'
+import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
+
+// 导入样式
+import '@univerjs/preset-docs-core/lib/index.css'
+import '@univerjs/preset-sheets-core/lib/index.css'
+
+// 导入语言包
+import DocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'
+import SheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
+import DocsCoreZhCN from '@univerjs/preset-docs-core/locales/zh-CN'
+import SheetsCoreZhCN from '@univerjs/preset-sheets-core/locales/zh-CN'
+
+export const OfficeFormat = {
+ DOCX: 'docx',
+ XLSX: 'xlsx',
+ PPTX: 'pptx'
+}
+
+export const OfficePresetType = {
+ DOCS: 'docs',
+ SHEETS: 'sheets',
+ SLIDES: 'slides'
+}
+
+/**
+ * 根据文件扩展名判断 Office 格式
+ */
+export function detectOfficeFormat(filename) {
+ const ext = filename?.toLowerCase().split('.').pop() || ''
+ if (ext === 'docx') return OfficeFormat.DOCX
+ if (ext === 'xlsx') return OfficeFormat.XLSX
+ if (ext === 'pptx') return OfficeFormat.PPTX
+ return null
+}
+
+/**
+ * 根据格式获取对应的 Preset 类型
+ */
+export function getPresetType(format) {
+ switch (format) {
+ case OfficeFormat.DOCX:
+ return OfficePresetType.DOCS
+ case OfficeFormat.XLSX:
+ return OfficePresetType.SHEETS
+ case OfficeFormat.PPTX:
+ return OfficePresetType.SLIDES
+ default:
+ return null
+ }
+}
+
+/**
+ * 创建 Univer 实例
+ */
+export async function createUniverInstance(container, options = {}) {
+ const {
+ format = OfficeFormat.DOCX,
+ locale = 'zh-CN',
+ theme = 'light'
+ } = options
+
+ const localeType = locale === 'zh-CN' ? LocaleType.ZH_CN : LocaleType.EN_US
+ const locales = locale === 'zh-CN'
+ ? { [LocaleType.ZH_CN]: merge(DocsCoreZhCN, SheetsCoreZhCN) }
+ : { [LocaleType.EN_US]: merge(DocsCoreEnUS, SheetsCoreEnUS) }
+
+ const presets = []
+
+ // 根据格式添加对应的 Preset
+ if (format === OfficeFormat.DOCX || format === OfficeFormat.PPTX) {
+ presets.push(UniverDocsCorePreset({
+ container,
+ theme: theme === 'dark' ? 'dark' : 'default'
+ }))
+ }
+
+ if (format === OfficeFormat.XLSX) {
+ presets.push(UniverSheetsCorePreset({
+ container,
+ theme: theme === 'dark' ? 'dark' : 'default'
+ }))
+ }
+
+ // 默认使用 Docs 作为兜底
+ if (presets.length === 0) {
+ presets.push(UniverDocsCorePreset({
+ container,
+ theme: theme === 'dark' ? 'dark' : 'default'
+ }))
+ }
+
+ const { univer, univerAPI } = createUniver({
+ locale: localeType,
+ locales,
+ presets,
+ collaboration: false // 纯前端模式，不启用协作
+ })
+
+ return { univer, univerAPI }
+}
+
+/**
+ * Univer 编辑器实例包装类
+ */
+export class UniverEditorInstance {
+ constructor() {
+ this.univer = null
+ this.univerAPI = null
+ this.container = null
+ this.currentFormat = null
+ }
+
+ /**
+ * 初始化编辑器
+ */
+ async init(container, options = {}) {
+ if (this.univer) {
+ await this.destroy()
+ }
+
+ this.container = container
+ this.currentFormat = options.format || OfficeFormat.DOCX
+
+ const result = await createUniverInstance(container, {
+ format: this.currentFormat,
+ ...options
+ })
+
+ this.univer = result.univer
+ this.univerAPI = result.univerAPI
+
+ // 创建初始文档
+ if (this.currentFormat === OfficeFormat.XLSX) {
+ this.univerAPI.createWorkbook({})
+ } else {
+ this.univerAPI.createUniverDoc({})
+ }
+
+ return this
+ }
+
+ /**
+ * 从字节数组加载文档
+ */
+ async loadFromBytes(bytes, format) {
+ if (!this.univerAPI) {
+ throw new Error('Univer 实例未初始化')
+ }
+
+ // 注意：纯前端模式下，Univer 不支持直接从 DOCX/XLSX/PPTX 字节流加载
+ // 这里需要使用快照模式或后端服务来解析
+ // 当前实现为占位，实际需要配合快照格式
+ console.warn('纯前端模式暂不支持从 DOCX/XLSX/PPTX 字节流加载，请使用快照模式')
+ return false
+ }
+
+ /**
+ * 导出为快照数据
+ */
+ async exportSnapshot() {
+ if (!this.univerAPI) {
+ throw new Error('Univer 实例未初始化')
+ }
+
+ const activeDoc = this.univerAPI.getActiveDocument()
+ const activeSheet = this.univerAPI.getActiveWorkbook()
+
+ if (activeSheet) {
+ return {
+ type: OfficePresetType.SHEETS,
+ format: OfficeFormat.XLSX,
+ data: activeSheet.getSnapshot()
+ }
+ }
+
+ if (activeDoc) {
+ return {
+ type: OfficePresetType.DOCS,
+ format: OfficeFormat.DOCX,
+ data: activeDoc.getSnapshot()
+ }
+ }
+
+ return null
+ }
+
+ /**
+ * 从快照数据导入
+ */
+ async importSnapshot(snapshot) {
+ if (!this.univerAPI || !snapshot?.data) {
+ throw new Error('无效的快照数据')
+ }
+
+ // 快照数据可以直接用于恢复文档状态
+ // 具体实现取决于 Univer API
+ console.log('导入快照:', snapshot.type, snapshot.format)
+ return true
+ }
+
+ /**
+ * 监听文档变化
+ */
+ onChange(callback) {
+ if (!this.univerAPI) return
+
+ // Univer API 的事件监听
+ this.univerAPI.addEvent(this.univerAPI.Event.CommandExecuted, (event) => {
+ callback({
+ type: 'command',
+ data: event
+ })
+ })
+ }
+
+ /**
+ * 销毁实例
+ */
+ async destroy() {
+ if (this.univer) {
+ this.univer.dispose()
+ this.univer = null
+ this.univerAPI = null
+ this.container = null
+ this.currentFormat = null
+ }
+ }
+
+ /**
+ * 获取当前格式
+ */
+ getFormat() {
+ return this.currentFormat
+ }
+
+ /**
+ * 检查是否已初始化
+ */
+ isInitialized() {
+ return this.univer !== null && this.univerAPI !== null
+ }
+}
+
+/**
+ * 创建 Univer 编辑器实例
+ */
+export function createUniverEditor() {
+ return new UniverEditorInstance()
+}
+
+export default {
+ createUniverInstance,
+ createUniverEditor,
+ detectOfficeFormat,
+ getPresetType,
+ OfficeFormat,
+ OfficePresetType,
+ UniverEditorInstance
+}
diff --git a/src/stores/office.js b/src/stores/office.js
new file mode 100644
index 0000000..1d23481
--- /dev/null
+++ b/src/stores/office.js
@@ -0,0 +1,138 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { OfficeFormat, OfficePresetType } from '../services/univerBridge'
+
+export const useOfficeStore = defineStore('office', () => {
+ // 当前文档状态
+ const currentFileName = ref('')
+ const currentFormat = ref(null)
+ const currentFileSize = ref(0)
+ const currentBytes = ref(null)
+
+ // 快照模式
+ const isSnapshotMode = ref(true) // 默认启用快照模式
+ const currentSnapshot = ref(null)
+
+ // 编辑状态
+ const isEditing = ref(false)
+ const hasUnsavedChanges = ref(false)
+
+ // 视图状态
+ const activeView = ref('milkdown') // 'milkdown' | 'univer'
+
+ // 计算属性
+ const hasDocument = computed(() => {
+ return currentFileName.value && currentFormat.value
+ })
+
+ const documentInfo = computed(() => {
+ if (!hasDocument.value) return null
+ return {
+ name: currentFileName.value,
+ format: currentFormat.value,
+ size: currentFileSize.value,
+ isSnapshot: isSnapshotMode.value
+ }
+ })
+
+ /**
+ * 设置当前文档
+ */
+ function setCurrentDocument(file, bytes) {
+ if (!file) {
+ clearCurrentDocument()
+ return
+ }
+
+ currentFileName.value = file.name || '未命名'
+ currentFormat.value = getFormatFromFileName(file.name)
+ currentFileSize.value = file.size || 0
+ currentBytes.value = bytes
+ hasUnsavedChanges.value = false
+ }
+
+ /**
+ * 清除当前文档
+ */
+ function clearCurrentDocument() {
+ currentFileName.value = ''
+ currentFormat.value = null
+ currentFileSize.value = 0
+ currentBytes.value = null
+ currentSnapshot.value = null
+ hasUnsavedChanges.value = false
+ }
+
+ /**
+ * 设置快照数据
+ */
+ function setSnapshot(snapshot) {
+ currentSnapshot.value = snapshot
+ hasUnsavedChanges.value = false
+ }
+
+ /**
+ * 标记有未保存的更改
+ */
+ function markAsChanged() {
+ hasUnsavedChanges.value = true
+ }
+
+ /**
+ * 切换视图
+ */
+ function switchView(view) {
+ activeView.value = view
+ }
+
+ /**
+ * 切换快照模式
+ */
+ function toggleSnapshotMode() {
+ isSnapshotMode.value = !isSnapshotMode.value
+ }
+
+ return {
+ // 状态
+ currentFileName,
+ currentFormat,
+ currentFileSize,
+ currentBytes,
+ isSnapshotMode,
+ currentSnapshot,
+ isEditing,
+ hasUnsavedChanges,
+ activeView,
+
+ // 计算属性
+ hasDocument,
+ documentInfo,
+
+ // 方法
+ setCurrentDocument,
+ clearCurrentDocument,
+ setSnapshot,
+ markAsChanged,
+ switchView,
+ toggleSnapshotMode
+ }
+})
+
+/**
+ * 从文件名获取格式
+ */
+function getFormatFromFileName(filename) {
+ const ext = filename?.toLowerCase().split('.').pop() || ''
+ switch (ext) {
+ case 'docx':
+ return OfficeFormat.DOCX
+ case 'xlsx':
+ return OfficeFormat.XLSX
+ case 'pptx':
+ return OfficeFormat.PPTX
+ default:
+ return null
+ }
+}
+
+export default useOfficeStore
diff --git a/src/views/DocsView.vue b/src/views/DocsView.vue
index 3c3736c..37d6f87 100644
--- a/src/views/DocsView.vue
+++ b/src/views/DocsView.vue
@@ -1,11 +1,16 @@
@@ -152,33 +163,51 @@ function handleDragOver(event) {
@@ -295,6 +324,31 @@ function handleDragOver(event) {
border-color: var(--focus-ring);
}
+.editor-toggle {
+ display: flex;
+ align-items: center;
+ gap: 6px;
+ padding: 4px 12px;
+ border: 1px solid var(--panel-border);
+ background: var(--app-bg);
+ color: var(--muted-text);
+ cursor: pointer;
+ border-radius: 6px;
+ font-size: 13px;
+ flex-shrink: 0;
+ transition: all 0.2s ease;
+}
+
+.editor-toggle:hover {
+ color: var(--focus-ring);
+ border-color: var(--focus-ring);
+ background: var(--ghost-code-bg);
+}
+
+.toggle-label {
+ font-weight: 500;
+}
+
.breadcrumb-bar {
flex: 1;
display: flex;
@@ -351,6 +405,16 @@ function handleDragOver(event) {
color: var(--focus-ring);
}
+.toolbar-btn.office-btn {
+ border-color: var(--focus-ring);
+ color: var(--focus-ring);
+ background: rgba(59, 130, 246, 0.08);
+}
+
+.toolbar-btn.office-btn:hover {
+ background: rgba(59, 130, 246, 0.15);
+}
+
.confirm-overlay {
position: fixed;
inset: 0;
diff --git a/src/views/EditorView.vue b/src/views/EditorView.vue
index b24ec9f..5737a8e 100644
--- a/src/views/EditorView.vue
+++ b/src/views/EditorView.vue
@@ -1,7 +1,9 @@
+
+