云文件系统初始化

web-vue/src/components/FolderDialog.vue

@@ -0,0 +1,53 @@
+<template>
+  <el-dialog
+    v-model="visible"
+    title="新建文件夹"
+    width="400px"
+    class="custom-dialog"
+  >
+    <el-input 
+      v-model="folderName" 
+      placeholder="请输入文件夹名称"
+      clearable
+      @keyup.enter="handleCreate"
+      autofocus
+    >
+      <template #prefix><el-icon><Folder /></el-icon></template>
+    </el-input>
+    <template #footer>
+      <el-button @click="visible = false">
+        <el-icon><Close /></el-icon>
+        <span style="margin-left: 4px">取消</span>
+      </el-button>
+      <el-button type="primary" @click="handleCreate" :disabled="!folderName.trim()">
+        <el-icon><Check /></el-icon>
+        <span style="margin-left: 4px">保存</span>
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { Close, Check, Folder } from '@element-plus/icons-vue'
+
+const props = defineProps({ modelValue: Boolean })
+const emit = defineEmits(['update:modelValue', 'create'])
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const folderName = ref('')
+
+watch(visible, (v) => {
+  if (v) folderName.value = ''
+})
+
+const handleCreate = () => {
+  if (!folderName.value.trim()) return
+  emit('create', folderName.value.trim())
+  visible.value = false
+}
+</script>