丰富目录树功能
This commit is contained in:
@@ -16,5 +16,17 @@
|
|||||||
"userTurns": 1,
|
"userTurns": 1,
|
||||||
"basisHash": "a29f890c9742dd7d",
|
"basisHash": "a29f890c9742dd7d",
|
||||||
"updatedAt": 1783651532738
|
"updatedAt": 1783651532738
|
||||||
|
},
|
||||||
|
"topic_20260710-024855_5c4b1833149d66bb": {
|
||||||
|
"stage": 3,
|
||||||
|
"userTurns": 3,
|
||||||
|
"basisHash": "531788785cf8bacd",
|
||||||
|
"updatedAt": 1783652640849
|
||||||
|
},
|
||||||
|
"topic_20260710-030936_cedad2907c3954fe": {
|
||||||
|
"stage": 1,
|
||||||
|
"userTurns": 1,
|
||||||
|
"basisHash": "2066e5673ac2f507",
|
||||||
|
"updatedAt": 1783653328367
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -2,5 +2,7 @@
|
|||||||
"topic_20260630-144952_fd0584fe8f266d6a": 1782830992641,
|
"topic_20260630-144952_fd0584fe8f266d6a": 1782830992641,
|
||||||
"topic_20260703-022850_50330b4eb93f116d": 1783045730616,
|
"topic_20260703-022850_50330b4eb93f116d": 1783045730616,
|
||||||
"topic_20260706-145507_076a32df5f4276b5": 1783349707873,
|
"topic_20260706-145507_076a32df5f4276b5": 1783349707873,
|
||||||
"topic_20260706-153317_238f65a7a470703c": 1783351997029
|
"topic_20260706-153317_238f65a7a470703c": 1783351997029,
|
||||||
|
"topic_20260710-024855_5c4b1833149d66bb": 1783651735446,
|
||||||
|
"topic_20260710-030936_cedad2907c3954fe": 1783652976310
|
||||||
}
|
}
|
||||||
@@ -40,5 +40,7 @@
|
|||||||
"topic_20260707-095503_bf879b65e4666516": "auto",
|
"topic_20260707-095503_bf879b65e4666516": "auto",
|
||||||
"topic_20260708-020616_9ab54d98daf65053": "auto",
|
"topic_20260708-020616_9ab54d98daf65053": "auto",
|
||||||
"topic_20260708-093419_71d1fea2e4b5a40f": "auto",
|
"topic_20260708-093419_71d1fea2e4b5a40f": "auto",
|
||||||
"topic_20260708-095428_990617acd4168b40": "auto"
|
"topic_20260708-095428_990617acd4168b40": "auto",
|
||||||
|
"topic_20260710-024855_5c4b1833149d66bb": "auto",
|
||||||
|
"topic_20260710-030936_cedad2907c3954fe": "auto"
|
||||||
}
|
}
|
||||||
@@ -40,5 +40,7 @@
|
|||||||
"topic_20260707-095503_bf879b65e4666516": "帮我移除markdownEditor…",
|
"topic_20260707-095503_bf879b65e4666516": "帮我移除markdownEditor…",
|
||||||
"topic_20260708-020616_9ab54d98daf65053": "帮我分析一下现在的markdownE…",
|
"topic_20260708-020616_9ab54d98daf65053": "帮我分析一下现在的markdownE…",
|
||||||
"topic_20260708-093419_71d1fea2e4b5a40f": "src/components/Dir…",
|
"topic_20260708-093419_71d1fea2e4b5a40f": "src/components/Dir…",
|
||||||
"topic_20260708-095428_990617acd4168b40": "帮我检查一下这个应用在进行放大缩小的…"
|
"topic_20260708-095428_990617acd4168b40": "帮我检查一下这个应用在进行放大缩小的…",
|
||||||
|
"topic_20260710-024855_5c4b1833149d66bb": "帮我给右侧的目录树添加一个功能,当用…",
|
||||||
|
"topic_20260710-030936_cedad2907c3954fe": "鼠标放在tree上的时候,只有hov…"
|
||||||
}
|
}
|
||||||
@@ -190,6 +190,42 @@ fn pick_save_file(app: tauri::AppHandle) -> Option<String> {
|
|||||||
.map(|p| p.to_string())
|
.map(|p| p.to_string())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn create_folder(path: String) -> Result<(), String> {
|
||||||
|
fs::create_dir_all(&path).map_err(|e| format!("无法创建文件夹: {}", e))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn create_file(path: String) -> Result<(), String> {
|
||||||
|
if let Some(parent) = PathBuf::from(&path).parent() {
|
||||||
|
fs::create_dir_all(parent).map_err(|e| format!("无法创建父目录: {}", e))?;
|
||||||
|
}
|
||||||
|
fs::write(&path, "").map_err(|e| format!("无法创建文件: {}", e))
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn delete_entry(path: String) -> Result<(), String> {
|
||||||
|
let p = PathBuf::from(&path);
|
||||||
|
if p.is_dir() {
|
||||||
|
fs::remove_dir_all(&p).map_err(|e| format!("无法删除文件夹: {}", e))
|
||||||
|
} else if p.is_file() {
|
||||||
|
fs::remove_file(&p).map_err(|e| format!("无法删除文件: {}", e))
|
||||||
|
} else {
|
||||||
|
Err("路径不存在".to_string())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[tauri::command]
|
||||||
|
fn rename_entry(path: String, new_name: String) -> Result<String, String> {
|
||||||
|
let p = PathBuf::from(&path);
|
||||||
|
let parent = p
|
||||||
|
.parent()
|
||||||
|
.ok_or_else(|| "无法获取父目录".to_string())?;
|
||||||
|
let new_path = parent.join(&new_name);
|
||||||
|
fs::rename(&p, &new_path).map_err(|e| format!("无法重命名: {}", e))?;
|
||||||
|
Ok(new_path.to_string_lossy().to_string())
|
||||||
|
}
|
||||||
|
|
||||||
#[tauri::command]
|
#[tauri::command]
|
||||||
fn greet(name: &str) -> String {
|
fn greet(name: &str) -> String {
|
||||||
format!("Hello, {}! You've been greeted from Rust!", name)
|
format!("Hello, {}! You've been greeted from Rust!", name)
|
||||||
@@ -209,7 +245,11 @@ pub fn run() {
|
|||||||
write_file,
|
write_file,
|
||||||
watch_workspace,
|
watch_workspace,
|
||||||
unwatch_workspace,
|
unwatch_workspace,
|
||||||
pick_save_file
|
pick_save_file,
|
||||||
|
create_folder,
|
||||||
|
create_file,
|
||||||
|
delete_entry,
|
||||||
|
rename_entry
|
||||||
])
|
])
|
||||||
.setup(|app| {
|
.setup(|app| {
|
||||||
// ---- File menu ----
|
// ---- File menu ----
|
||||||
|
|||||||
49
src/App.vue
49
src/App.vue
@@ -805,6 +805,51 @@ async function onToggleFolder(path: string) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function onCreateFolder(path: string) {
|
||||||
|
try {
|
||||||
|
await invoke("create_folder", { path });
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to create folder:", e);
|
||||||
|
}
|
||||||
|
scheduleWorkspaceRefresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onCreateFile(path: string) {
|
||||||
|
try {
|
||||||
|
await invoke("create_file", { path });
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to create file:", e);
|
||||||
|
}
|
||||||
|
scheduleWorkspaceRefresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onDeleteEntry(path: string) {
|
||||||
|
try {
|
||||||
|
await invoke("delete_entry", { path });
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to delete entry:", e);
|
||||||
|
}
|
||||||
|
// Close the file if it's the one being deleted
|
||||||
|
if (currentFilePath.value != null && getWorkspaceIdentity(currentFilePath.value) === getWorkspaceIdentity(path)) {
|
||||||
|
resetMarkdownEditorState();
|
||||||
|
currentFilePath.value = null;
|
||||||
|
}
|
||||||
|
scheduleWorkspaceRefresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onRenameEntry(path: string, newName: string) {
|
||||||
|
try {
|
||||||
|
const newPath = await invoke<string>("rename_entry", { path, newName });
|
||||||
|
// Update current file path if it was renamed
|
||||||
|
if (currentFilePath.value != null && getWorkspaceIdentity(currentFilePath.value) === getWorkspaceIdentity(path)) {
|
||||||
|
currentFilePath.value = newPath;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Failed to rename entry:", e);
|
||||||
|
}
|
||||||
|
scheduleWorkspaceRefresh();
|
||||||
|
}
|
||||||
|
|
||||||
async function onOpenFile(path: string) {
|
async function onOpenFile(path: string) {
|
||||||
const fileType = getWorkspaceFileType(path);
|
const fileType = getWorkspaceFileType(path);
|
||||||
if (fileType === "image" || fileType === "video") {
|
if (fileType === "image" || fileType === "video") {
|
||||||
@@ -960,6 +1005,10 @@ registerTauriListener("menu-event", (event) => {
|
|||||||
@remove-workspace="removeRecentWorkspace"
|
@remove-workspace="removeRecentWorkspace"
|
||||||
@toggle-folder="onToggleFolder"
|
@toggle-folder="onToggleFolder"
|
||||||
@open-file="onOpenFile"
|
@open-file="onOpenFile"
|
||||||
|
@create-folder="onCreateFolder"
|
||||||
|
@create-file="onCreateFile"
|
||||||
|
@delete-entry="onDeleteEntry"
|
||||||
|
@rename-entry="onRenameEntry"
|
||||||
@update-default-document-mode="updateDefaultDocumentMode"
|
@update-default-document-mode="updateDefaultDocumentMode"
|
||||||
@update-app-theme="updateAppTheme"
|
@update-app-theme="updateAppTheme"
|
||||||
/>
|
/>
|
||||||
|
|||||||
174
src/components/ConfirmDialog.vue
Normal file
174
src/components/ConfirmDialog.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
|
||||||
|
withDefaults(
|
||||||
|
defineProps<{
|
||||||
|
show: boolean;
|
||||||
|
title: string;
|
||||||
|
message: string;
|
||||||
|
confirmText?: string;
|
||||||
|
cancelText?: string;
|
||||||
|
danger?: boolean;
|
||||||
|
}>(),
|
||||||
|
{
|
||||||
|
confirmText: "确认",
|
||||||
|
cancelText: "取消",
|
||||||
|
danger: false,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
confirm: [];
|
||||||
|
cancel: [];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
function onOverlayKeydown(event: KeyboardEvent) {
|
||||||
|
if (event.key === "Escape") {
|
||||||
|
emit("cancel");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Teleport to="body">
|
||||||
|
<div
|
||||||
|
v-if="show"
|
||||||
|
class="confirm-overlay"
|
||||||
|
role="presentation"
|
||||||
|
@click.self="emit('cancel')"
|
||||||
|
@keydown="onOverlayKeydown"
|
||||||
|
>
|
||||||
|
<section
|
||||||
|
class="confirm-shell"
|
||||||
|
role="alertdialog"
|
||||||
|
aria-modal="true"
|
||||||
|
:aria-label="title"
|
||||||
|
>
|
||||||
|
<header class="confirm-header">
|
||||||
|
<h2>{{ title }}</h2>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<p class="confirm-message">{{ message }}</p>
|
||||||
|
|
||||||
|
<footer class="confirm-footer">
|
||||||
|
<button
|
||||||
|
class="confirm-btn confirm-btn-cancel"
|
||||||
|
type="button"
|
||||||
|
@click="emit('cancel')"
|
||||||
|
>
|
||||||
|
{{ cancelText }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="confirm-btn"
|
||||||
|
:class="danger ? 'confirm-btn-danger' : 'confirm-btn-primary'"
|
||||||
|
type="button"
|
||||||
|
@click="emit('confirm')"
|
||||||
|
>
|
||||||
|
{{ confirmText }}
|
||||||
|
</button>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.confirm-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 100;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 28px;
|
||||||
|
background: var(--app-overlay);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-shell {
|
||||||
|
width: min(400px, calc(100vw - 48px));
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid var(--app-border-strong);
|
||||||
|
border-radius: 12px;
|
||||||
|
background: var(--app-surface);
|
||||||
|
box-shadow:
|
||||||
|
0 24px 70px var(--app-shadow),
|
||||||
|
0 2px 10px color-mix(in srgb, var(--app-shadow) 46%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
min-height: 48px;
|
||||||
|
padding: 0 20px;
|
||||||
|
border-bottom: 1px solid var(--app-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-header h2 {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--app-text);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-message {
|
||||||
|
margin: 0;
|
||||||
|
padding: 20px;
|
||||||
|
color: var(--app-text-soft);
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
border-top: 1px solid var(--app-border);
|
||||||
|
background: var(--app-panel-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-width: 72px;
|
||||||
|
height: 32px;
|
||||||
|
padding: 0 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background-color 0.15s ease,
|
||||||
|
color 0.15s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn-cancel {
|
||||||
|
background: var(--app-hover);
|
||||||
|
color: var(--app-text-soft);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn-cancel:hover {
|
||||||
|
background: var(--app-border);
|
||||||
|
color: var(--app-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn-primary {
|
||||||
|
background: var(--app-accent);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn-primary:hover {
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn-danger {
|
||||||
|
background: #e53e3e;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn-danger:hover {
|
||||||
|
background: #c53030;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -46,8 +46,10 @@ const emit = defineEmits<{
|
|||||||
removeWorkspace: [path: string];
|
removeWorkspace: [path: string];
|
||||||
toggleFolder: [path: string];
|
toggleFolder: [path: string];
|
||||||
openFile: [path: string];
|
openFile: [path: string];
|
||||||
createFile: [];
|
createFile: [path: string];
|
||||||
createFolder: [];
|
createFolder: [path: string];
|
||||||
|
deleteEntry: [path: string];
|
||||||
|
renameEntry: [path: string, newName: string];
|
||||||
updateDefaultDocumentMode: [mode: DocumentMode];
|
updateDefaultDocumentMode: [mode: DocumentMode];
|
||||||
updateAppTheme: [theme: AppTheme];
|
updateAppTheme: [theme: AppTheme];
|
||||||
}>();
|
}>();
|
||||||
@@ -371,6 +373,10 @@ function openSettings(page: SettingsPage) {
|
|||||||
:currentFilePath="currentFilePath"
|
:currentFilePath="currentFilePath"
|
||||||
@toggle-folder="(path: string) => emit('toggleFolder', path)"
|
@toggle-folder="(path: string) => emit('toggleFolder', path)"
|
||||||
@open-file="(path: string) => emit('openFile', path)"
|
@open-file="(path: string) => emit('openFile', path)"
|
||||||
|
@create-folder="(path: string) => emit('createFolder', path)"
|
||||||
|
@create-file="(path: string) => emit('createFile', path)"
|
||||||
|
@delete-entry="(path: string) => emit('deleteEntry', path)"
|
||||||
|
@rename-entry="(path: string, name: string) => emit('renameEntry', path, name)"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Empty state -->
|
<!-- Empty state -->
|
||||||
|
|||||||
@@ -4,7 +4,8 @@ export default { name: "TreeEntry" };
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref, watch } from "vue";
|
import { computed, ref, watch, onMounted, onUnmounted } from "vue";
|
||||||
|
import ConfirmDialog from "./ConfirmDialog.vue";
|
||||||
|
|
||||||
interface DirEntry {
|
interface DirEntry {
|
||||||
name: string;
|
name: string;
|
||||||
@@ -22,6 +23,10 @@ const props = defineProps<{
|
|||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
toggleFolder: [path: string];
|
toggleFolder: [path: string];
|
||||||
openFile: [path: string];
|
openFile: [path: string];
|
||||||
|
createFolder: [path: string];
|
||||||
|
createFile: [path: string];
|
||||||
|
deleteEntry: [path: string];
|
||||||
|
renameEntry: [path: string, newName: string];
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const expanded = ref(true);
|
const expanded = ref(true);
|
||||||
@@ -40,6 +45,99 @@ const isActive = computed(() => {
|
|||||||
return props.currentFilePath != null && props.currentFilePath === props.entry.path;
|
return props.currentFilePath != null && props.currentFilePath === props.entry.path;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ── Menu ─────────────────────────────────────────────────
|
||||||
|
const menuOpen = ref(false);
|
||||||
|
const menuRef = ref<HTMLElement | null>(null);
|
||||||
|
const rowRef = ref<HTMLElement | null>(null);
|
||||||
|
const menuButtonRef = ref<HTMLElement | null>(null);
|
||||||
|
const menuStyle = ref<Record<string, string>>({});
|
||||||
|
|
||||||
|
function toggleMenu(e: MouseEvent) {
|
||||||
|
e.stopPropagation();
|
||||||
|
if (!menuOpen.value) {
|
||||||
|
if (menuButtonRef.value) {
|
||||||
|
const btnRect = menuButtonRef.value.getBoundingClientRect();
|
||||||
|
const spaceBelow = window.innerHeight - btnRect.bottom;
|
||||||
|
const left = Math.min(btnRect.left, window.innerWidth - 150);
|
||||||
|
menuStyle.value = spaceBelow >= 140
|
||||||
|
? {
|
||||||
|
position: "fixed",
|
||||||
|
top: `${btnRect.bottom + 2}px`,
|
||||||
|
left: `${left}px`,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
position: "fixed",
|
||||||
|
bottom: `${window.innerHeight - btnRect.top + 2}px`,
|
||||||
|
left: `${left}px`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
menuOpen.value = !menuOpen.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeMenu() {
|
||||||
|
menuOpen.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onDocumentClick(e: MouseEvent) {
|
||||||
|
if (menuRef.value && !menuRef.value.contains(e.target as Node)) {
|
||||||
|
closeMenu();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener("click", onDocumentClick);
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.removeEventListener("click", onDocumentClick);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Actions ─────────────────────────────────────────────────
|
||||||
|
function handleCreateFolder() {
|
||||||
|
closeMenu();
|
||||||
|
const name = window.prompt("请输入文件夹名称:");
|
||||||
|
if (name && name.trim()) {
|
||||||
|
emit("createFolder", props.entry.path + "/" + name.trim());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCreateFile() {
|
||||||
|
closeMenu();
|
||||||
|
const name = window.prompt("请输入文件名称(无需 .md 后缀):");
|
||||||
|
if (name && name.trim()) {
|
||||||
|
emit("createFile", props.entry.path + "/" + name.trim() + ".md");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRename() {
|
||||||
|
closeMenu();
|
||||||
|
const newName = window.prompt("请输入新名称:", props.entry.name);
|
||||||
|
if (newName && newName.trim() && newName.trim() !== props.entry.name) {
|
||||||
|
emit("renameEntry", props.entry.path, newName.trim());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Delete confirmation ─────────────────────────────────────
|
||||||
|
const confirmShow = ref(false);
|
||||||
|
const confirmTitle = ref("");
|
||||||
|
const confirmMessage = ref("");
|
||||||
|
|
||||||
|
function handleDelete() {
|
||||||
|
closeMenu();
|
||||||
|
confirmTitle.value = props.entry.is_dir ? "删除文件夹" : "删除文件";
|
||||||
|
confirmMessage.value = props.entry.is_dir
|
||||||
|
? `确定要永久删除文件夹「${props.entry.name}」及其所有内容吗?此操作不可撤销。`
|
||||||
|
: `确定要永久删除文件「${props.entry.name}」吗?此操作不可撤销。`;
|
||||||
|
confirmShow.value = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onConfirmDelete() {
|
||||||
|
confirmShow.value = false;
|
||||||
|
emit("deleteEntry", props.entry.path);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Tree click ──────────────────────────────────────────────
|
||||||
function onClick() {
|
function onClick() {
|
||||||
if (props.entry.is_dir) {
|
if (props.entry.is_dir) {
|
||||||
if (props.entry.children === undefined) {
|
if (props.entry.children === undefined) {
|
||||||
@@ -54,10 +152,23 @@ function onClick() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
<!-- ── Confirm dialog ── -->
|
||||||
|
<ConfirmDialog
|
||||||
|
:show="confirmShow"
|
||||||
|
:title="confirmTitle"
|
||||||
|
:message="confirmMessage"
|
||||||
|
confirm-text="删除"
|
||||||
|
cancel-text="取消"
|
||||||
|
:danger="true"
|
||||||
|
@confirm="onConfirmDelete"
|
||||||
|
@cancel="confirmShow = false"
|
||||||
|
/>
|
||||||
|
|
||||||
<template v-if="entry.is_dir">
|
<template v-if="entry.is_dir">
|
||||||
<!-- Folder label -->
|
<!-- Folder row -->
|
||||||
<div
|
<div
|
||||||
class="tree-folder flex items-center gap-1 px-2 py-1 rounded-md text-sm cursor-pointer select-none"
|
ref="rowRef"
|
||||||
|
class="tree-folder flex items-center gap-1 px-2 py-1 rounded-md text-sm cursor-pointer select-none relative group"
|
||||||
:style="{ paddingLeft: `${depth * 16 + 8}px` }"
|
:style="{ paddingLeft: `${depth * 16 + 8}px` }"
|
||||||
@click="onClick"
|
@click="onClick"
|
||||||
>
|
>
|
||||||
@@ -66,7 +177,47 @@ function onClick() {
|
|||||||
:class="expanded && entry.children ? 'rotate-90' : ''"
|
:class="expanded && entry.children ? 'rotate-90' : ''"
|
||||||
></i>
|
></i>
|
||||||
<i class="tree-entry-icon ri-folder-line text-base shrink-0"></i>
|
<i class="tree-entry-icon ri-folder-line text-base shrink-0"></i>
|
||||||
<span class="truncate">{{ entry.name }}</span>
|
<span class="truncate flex-1 min-w-0">{{ entry.name }}</span>
|
||||||
|
|
||||||
|
<!-- More button -->
|
||||||
|
<button
|
||||||
|
ref="menuButtonRef"
|
||||||
|
class="tree-more-btn shrink-0 ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
|
||||||
|
type="button"
|
||||||
|
title="更多操作"
|
||||||
|
@click.stop="toggleMenu"
|
||||||
|
>
|
||||||
|
<i class="ri-more-line"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Dropdown menu -->
|
||||||
|
<Teleport to="body">
|
||||||
|
<div
|
||||||
|
v-if="menuOpen"
|
||||||
|
ref="menuRef"
|
||||||
|
class="tree-dropdown"
|
||||||
|
:style="menuStyle"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<button class="tree-dropdown-item" @click="handleCreateFolder">
|
||||||
|
<i class="ri-folder-add-line"></i>
|
||||||
|
<span>新建文件夹</span>
|
||||||
|
</button>
|
||||||
|
<button class="tree-dropdown-item" @click="handleCreateFile">
|
||||||
|
<i class="ri-file-add-line"></i>
|
||||||
|
<span>新建 MD 文件</span>
|
||||||
|
</button>
|
||||||
|
<button class="tree-dropdown-item" @click="handleRename">
|
||||||
|
<i class="ri-edit-line"></i>
|
||||||
|
<span>重命名</span>
|
||||||
|
</button>
|
||||||
|
<div class="tree-dropdown-sep"></div>
|
||||||
|
<button class="tree-dropdown-item tree-dropdown-item-danger" @click="handleDelete">
|
||||||
|
<i class="ri-delete-bin-line"></i>
|
||||||
|
<span>删除文件夹</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Children (recursive) -->
|
<!-- Children (recursive) -->
|
||||||
@@ -79,6 +230,10 @@ function onClick() {
|
|||||||
:currentFilePath="currentFilePath"
|
:currentFilePath="currentFilePath"
|
||||||
@toggle-folder="(path: string) => emit('toggleFolder', path)"
|
@toggle-folder="(path: string) => emit('toggleFolder', path)"
|
||||||
@open-file="(path: string) => emit('openFile', path)"
|
@open-file="(path: string) => emit('openFile', path)"
|
||||||
|
@create-folder="(path: string) => emit('createFolder', path)"
|
||||||
|
@create-file="(path: string) => emit('createFile', path)"
|
||||||
|
@delete-entry="(path: string) => emit('deleteEntry', path)"
|
||||||
|
@rename-entry="(path: string, name: string) => emit('renameEntry', path, name)"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
@@ -86,8 +241,9 @@ function onClick() {
|
|||||||
<!-- File -->
|
<!-- File -->
|
||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
|
ref="rowRef"
|
||||||
:class="[
|
:class="[
|
||||||
'tree-file flex items-center gap-1.5 px-2 py-1 rounded-md text-sm cursor-pointer transition-colors',
|
'tree-file flex items-center gap-1.5 px-2 py-1 rounded-md text-sm cursor-pointer transition-colors relative group',
|
||||||
isActive
|
isActive
|
||||||
? 'tree-file-active font-medium'
|
? 'tree-file-active font-medium'
|
||||||
: 'tree-file-idle',
|
: 'tree-file-idle',
|
||||||
@@ -96,7 +252,39 @@ function onClick() {
|
|||||||
@click="onClick"
|
@click="onClick"
|
||||||
>
|
>
|
||||||
<i class="tree-entry-icon ri-file-line text-sm shrink-0"></i>
|
<i class="tree-entry-icon ri-file-line text-sm shrink-0"></i>
|
||||||
<span class="truncate">{{ entry.name }}</span>
|
<span class="truncate flex-1 min-w-0">{{ entry.name }}</span>
|
||||||
|
|
||||||
|
<!-- More button -->
|
||||||
|
<button
|
||||||
|
ref="menuButtonRef"
|
||||||
|
class="tree-more-btn shrink-0 ml-auto opacity-0 group-hover:opacity-100 transition-opacity"
|
||||||
|
type="button"
|
||||||
|
title="更多操作"
|
||||||
|
@click.stop="toggleMenu"
|
||||||
|
>
|
||||||
|
<i class="ri-more-line"></i>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Dropdown menu -->
|
||||||
|
<Teleport to="body">
|
||||||
|
<div
|
||||||
|
v-if="menuOpen"
|
||||||
|
ref="menuRef"
|
||||||
|
class="tree-dropdown"
|
||||||
|
:style="menuStyle"
|
||||||
|
@click.stop
|
||||||
|
>
|
||||||
|
<button class="tree-dropdown-item" @click="handleRename">
|
||||||
|
<i class="ri-edit-line"></i>
|
||||||
|
<span>重命名</span>
|
||||||
|
</button>
|
||||||
|
<div class="tree-dropdown-sep"></div>
|
||||||
|
<button class="tree-dropdown-item tree-dropdown-item-danger" @click="handleDelete">
|
||||||
|
<i class="ri-delete-bin-line"></i>
|
||||||
|
<span>删除</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Teleport>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -130,4 +318,84 @@ function onClick() {
|
|||||||
background: var(--app-hover);
|
background: var(--app-hover);
|
||||||
color: var(--app-accent);
|
color: var(--app-accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ── More button ────────────────────────────── */
|
||||||
|
.tree-more-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--app-muted);
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background-color 0.12s ease,
|
||||||
|
color 0.12s ease;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-more-btn:hover {
|
||||||
|
background: var(--app-border);
|
||||||
|
color: var(--app-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Dropdown ───────────────────────────────── */
|
||||||
|
.tree-dropdown {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 9999;
|
||||||
|
background: var(--app-surface);
|
||||||
|
border: 1px solid var(--app-border-strong);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||||
|
min-width: 140px;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-dropdown-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--app-text);
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-dropdown-item:hover {
|
||||||
|
background-color: var(--app-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-dropdown-item i {
|
||||||
|
font-size: 15px;
|
||||||
|
color: var(--app-muted);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-dropdown-item-danger {
|
||||||
|
color: #e53e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-dropdown-item-danger i {
|
||||||
|
color: #e53e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-dropdown-item-danger:hover {
|
||||||
|
background-color: #fff5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-dropdown-sep {
|
||||||
|
height: 1px;
|
||||||
|
margin: 4px 6px;
|
||||||
|
background: var(--app-border);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user