丰富目录树功能

This commit is contained in:
2026-07-10 11:27:11 +08:00
parent 997cb7fdf1
commit d56b7d52bf
9 changed files with 567 additions and 12 deletions

View File

@@ -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
} }
} }

View File

@@ -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
} }

View File

@@ -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"
} }

View File

@@ -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…"
} }

View File

@@ -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 ----

View File

@@ -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"
/> />

View 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>

View File

@@ -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 -->

View File

@@ -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>