48 lines
1.5 KiB
Vue
48 lines
1.5 KiB
Vue
<template>
|
|
<div class="editor-page">
|
|
<h1>文件编辑器</h1>
|
|
<div v-if="!currentFile" class="empty">
|
|
<p>选择一个文件开始编辑</p>
|
|
<input v-model="filePath" placeholder="输入相对路径，如 business-architecture/02-capability-map.csv" />
|
|
<button class="primary" @click="load">打开</button>
|
|
</div>
|
|
<div v-else>
|
|
<p class="meta">{{ currentFile.path }} ({{ currentFile.format }})</p>
|
|
<CsvEditor v-if="currentFile.format === 'csv'" :content="currentFile.content" @save="handleSave" />
|
|
<MdEditor v-else :initial-content="currentFile.content" @save="handleSave" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { storeToRefs } from 'pinia'
|
|
import { useEditorStore } from '../composables/useEditor'
|
|
import CsvEditor from './CsvEditor.vue'
|
|
import MdEditor from './MdEditor.vue'
|
|
|
|
const route = useRoute()
|
|
const store = useEditorStore()
|
|
const { currentFile } = storeToRefs(store)
|
|
|
|
const filePath = ref('')
|
|
|
|
function load() {
|
|
if (filePath.value) {
|
|
store.loadFile(route.params.id as string, filePath.value)
|
|
}
|
|
}
|
|
|
|
function handleSave(content: string) {
|
|
store.saveFile(route.params.id as string, currentFile.value!.path, content)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
h1 { margin-bottom: 16px; }
|
|
.meta { font-size: 13px; color: #666; margin-bottom: 12px; }
|
|
.empty { text-align: center; padding: 48px; }
|
|
.empty input { margin: 12px 0; max-width: 500px; }
|
|
</style>
|