66 lines
2.0 KiB
Vue
66 lines
2.0 KiB
Vue
<template>
|
|
<div class="vscode-body">
|
|
<div ref="treeEl" class="vs-tree">
|
|
<div class="fb-side-title">资源管理器</div>
|
|
<div
|
|
v-for="(node, i) in fileTree"
|
|
:key="i"
|
|
:class="'vs-row' + (st.path === node.path ? ' sel' : '')"
|
|
:style="{ paddingLeft: 10 + node.depth * 14 + 'px' }"
|
|
@click="node.type === 'f' && openFile(node.path)"
|
|
>
|
|
<span>{{ node.type === 'd' ? '📁 ' : '📄 ' }}{{ node.name }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="vs-main">
|
|
<textarea ref="taEl" class="vs-editor" spellcheck="false" @keydown="onKeyDown"></textarea>
|
|
<div class="vs-status">{{ statusText }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted } from 'vue'
|
|
import { fs } from '../../composables/useFS'
|
|
|
|
const props = defineProps<{ win: any }>()
|
|
const st = reactive({ path: null as string | null })
|
|
const treeEl = ref<HTMLElement>()
|
|
const taEl = ref<HTMLTextAreaElement>()
|
|
const statusText = ref('就绪')
|
|
const fileTree = ref<{ name: string; path: string; type: string; depth: number }[]>([])
|
|
|
|
function buildTree() {
|
|
const nodes: { name: string; path: string; type: string; depth: number }[] = []
|
|
fs.walk(fs.HOME, (p: string, n: any) => {
|
|
if (p.startsWith(fs.TRASH) || p === fs.HOME) return
|
|
const depth = p.split('/').length - 3
|
|
if (depth > 2) return
|
|
nodes.push({ name: fs.baseName(p), path: p, type: n.t, depth })
|
|
})
|
|
fileTree.value = nodes
|
|
}
|
|
|
|
function openFile(p: string) {
|
|
st.path = p
|
|
if (taEl.value) taEl.value.value = fs.read(p)
|
|
statusText.value = p.replace(fs.HOME, '~')
|
|
}
|
|
|
|
function save() {
|
|
if (st.path && taEl.value) {
|
|
fs.write(st.path, taEl.value.value)
|
|
statusText.value = '已保存 ' + st.path.replace(fs.HOME, '~')
|
|
}
|
|
}
|
|
|
|
function onKeyDown(e: KeyboardEvent) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 's') { e.preventDefault(); save() }
|
|
}
|
|
|
|
// Expose for menus
|
|
props.win.appState = Object.assign(st, { save, taEl })
|
|
|
|
onMounted(buildTree)
|
|
</script>
|