- {/* 两张配置卡片：大屏(lg)并排两列，小屏堆叠；items-stretch 让两卡片等高 */}
-
- {/* 扫描配置卡片：保存后自动刷新项目列表 */}
-
-
- {/* 宿主机路径映射配置：供挂载路径转换使用 */}
-
-
-
{error &&
{error}
}
{loading &&
加载中...
}
- {projects.map((p) => (
+ {filteredProjects.map((p) => (
-
-
-
{p.name}
-
{p.dir}
-
{p.composeFile}
+
+ {/* 左侧：项目信息区 */}
+
+
+ {p.name}
+
+
+ {p.dir}
+
+
+ {p.composeFile}
+
+
+ {/* 右侧：操作按钮区 */}
-
doAction(p, 'up')} icon={Play} title="up" color="emerald" />
- doAction(p, 'down')} icon={Square} title="down" color="red" />
- doAction(p, 'restart')} icon={RotateCw} title="restart" color="blue" />
- doAction(p, 'pull')} icon={Download} title="pull" color="gray" />
+ doAction(p, 'up')} icon={Play} title="启动" color="emerald" />
+ doAction(p, 'down')} icon={Square} title="停止" color="red" />
+ doAction(p, 'restart')} icon={RotateCw} title="重启" color="blue" />
+ doAction(p, 'pull')} icon={Download} title="拉取" color="gray" />
))}
+ {!loading && filteredProjects.length === 0 && projects.length > 0 && (
+
+ 未找到匹配 "{searchQuery}" 的项目
+
+ )}
{!loading && projects.length === 0 && (
-
未发现 Compose 项目。请在上方「Compose 扫描配置」中填写已挂载进容器的项目目录并保存。
+
未发现 Compose 项目。请在「设置」页面的「Compose 目录配置」中填写已挂载进容器的项目目录并保存。
)}
@@ -108,6 +152,16 @@ export function Compose() {
setEditing(null)} />
)}
+
+ {showFileManager && (
+ setShowFileManager(false)}
+ onFileCreated={(filePath) => {
+ setShowFileManager(false)
+ load() // 刷新项目列表
+ }}
+ />
+ )}
)
}
diff --git a/frontend-react/src/components/ComposeFileManager.jsx b/frontend-react/src/components/ComposeFileManager.jsx
new file mode 100644
index 00000000..36170a69
--- /dev/null
+++ b/frontend-react/src/components/ComposeFileManager.jsx
@@ -0,0 +1,439 @@
+import React, { useState, useEffect, useCallback } from 'react'
+import { X, Folder, File, Plus, FolderPlus, Edit2, Trash2, ArrowUp, RefreshCw, AlertCircle, FileText, Save } from 'lucide-react'
+import { composeAPI, apiClient } from '../api/client.js'
+
+// Compose 文件管理器弹窗：浏览 /compose 目录，创建文件夹和 docker-compose.yml 文件
+export function ComposeFileManager({ onClose, onFileCreated }) {
+ const [current, setCurrent] = useState('/compose')
+ const [parent, setParent] = useState('')
+ const [dirs, setDirs] = useState([])
+ const [files, setFiles] = useState([])
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState('')
+ const [showCreateFolder, setShowCreateFolder] = useState(false)
+ const [showCreateFile, setShowCreateFile] = useState(false)
+ const [newFolderName, setNewFolderName] = useState('')
+ const [newFileName, setNewFileName] = useState('docker-compose.yml')
+ const [creating, setCreating] = useState(false)
+
+ // 文件编辑相关
+ const [editingFile, setEditingFile] = useState(null) // { name, content }
+ const [fileContent, setFileContent] = useState('')
+ const [loadingFile, setLoadingFile] = useState(false)
+ const [savingFile, setSavingFile] = useState(false)
+ const [validating, setValidating] = useState(false)
+ const [validationMsg, setValidationMsg] = useState('')
+ const [warnings, setWarnings] = useState([])
+
+ // 加载目录内容
+ const load = useCallback(async (path) => {
+ setLoading(true)
+ setError('')
+ try {
+ const r = await composeAPI.browse(path || '/compose')
+ const d = r.data?.data || {}
+ if (r.data?.code !== 200) {
+ setError(r.data?.msg || '加载失败')
+ return
+ }
+ setCurrent(d.path || '/compose')
+ setParent(d.parent || '')
+ setDirs(Array.isArray(d.dirs) ? d.dirs : [])
+ setFiles(Array.isArray(d.files) ? d.files : [])
+ } catch (e) {
+ setError('读取目录失败：' + (e.response?.data?.msg || e.message))
+ } finally {
+ setLoading(false)
+ }
+ }, [])
+
+ useEffect(() => { load('/compose') }, [load])
+
+ // 创建文件夹
+ const handleCreateFolder = async () => {
+ if (!newFolderName.trim()) {
+ alert('请输入文件夹名称')
+ return
+ }
+ setCreating(true)
+ try {
+ const r = await composeAPI.createFolder(current, newFolderName)
+ if (r.data?.code === 200) {
+ setShowCreateFolder(false)
+ setNewFolderName('')
+ load(current) // 刷新当前目录
+ } else {
+ alert('创建失败：' + (r.data?.msg || '未知错误'))
+ }
+ } catch (e) {
+ alert('创建失败：' + (e.response?.data?.msg || e.message))
+ } finally {
+ setCreating(false)
+ }
+ }
+
+ // 创建 Compose 文件
+ const handleCreateFile = async () => {
+ if (!newFileName.trim()) {
+ alert('请输入文件名')
+ return
+ }
+ setCreating(true)
+ try {
+ const r = await composeAPI.createFile(current, newFileName)
+ if (r.data?.code === 200) {
+ setShowCreateFile(false)
+ setNewFileName('docker-compose.yml')
+ load(current) // 刷新当前目录
+ if (onFileCreated) {
+ const filePath = r.data?.data?.path || `${current}/${newFileName}`
+ onFileCreated(filePath)
+ }
+ } else {
+ alert('创建失败：' + (r.data?.msg || '未知错误'))
+ }
+ } catch (e) {
+ alert('创建失败：' + (e.response?.data?.msg || e.message))
+ } finally {
+ setCreating(false)
+ }
+ }
+
+ // 编辑器部分功能
+ const handleEditFile = async (fileName) => {
+ setLoadingFile(true)
+ setValidationMsg('')
+ setWarnings([])
+ try {
+ const filePath = `${current}/${fileName}`
+ // 使用新的通用文件读取 API
+ const r = await apiClient.get('/api/files', { params: { path: filePath } })
+
+ if (r.data?.code === 200) {
+ setFileContent(r.data.data?.content || '')
+ setEditingFile({ name: fileName, path: filePath })
+ } else {
+ alert('读取文件失败：' + (r.data?.msg || '未知错误'))
+ }
+ } catch (e) {
+ alert('读取文件失败：' + (e.response?.data?.msg || e.message))
+ } finally {
+ setLoadingFile(false)
+ }
+ }
+
+ // 校验 Compose 文件格式
+ const handleValidate = async () => {
+ if (!fileContent.trim()) {
+ setValidationMsg('内容为空')
+ return
+ }
+ setValidating(true)
+ setValidationMsg('')
+ setWarnings([])
+ try {
+ const r = await composeAPI.validate(fileContent)
+ const d = r.data?.data
+ if (d?.valid) {
+ setWarnings(d.warnings || [])
+ setValidationMsg(d.warnings?.length ? '✅ 语法正确，但有风险提示' : '✅ 校验通过')
+ } else {
+ setValidationMsg('❌ 校验失败：' + (d?.error || '未知'))
+ }
+ } catch (e) {
+ setValidationMsg('❌ 校验失败：' + (e.response?.data?.msg || e.message))
+ } finally {
+ setValidating(false)
+ }
+ }
+
+ // 保存文件
+ const handleSaveFile = async () => {
+ if (!editingFile) return
+ setSavingFile(true)
+ setValidationMsg('')
+ try {
+ // 使用新的通用文件保存 API
+ const r = await apiClient.put('/api/files', {
+ path: editingFile.path,
+ content: fileContent
+ })
+
+ if (r.data?.code === 200) {
+ setValidationMsg('✅ 保存成功')
+ // 刷新目录列表
+ load(current)
+ } else {
+ alert('保存失败：' + (r.data?.msg || '未知错误'))
+ }
+ } catch (e) {
+ alert('保存失败：' + (e.response?.data?.msg || e.message))
+ } finally {
+ setSavingFile(false)
+ }
+ }
+
+ // 关闭编辑器
+ const handleCloseEditor = () => {
+ setEditingFile(null)
+ setFileContent('')
+ setValidationMsg('')
+ setWarnings([])
+ }
+
+ return (
+
+
+ {/* 头部 */}
+
+
+
+ Compose 文件管理器
+
+
浏览 /compose 目录，创建项目文件
+
+
+
+
+ {/* 工具栏 */}
+
+ {/* 路径导航栏 */}
+
+
+
+ {current}
+
+
+
+
+ {/* 操作按钮栏 */}
+
+
+
+
+
+
+ {/* 文件列表 */}
+
+ {error && (
+
+ )}
+
+ {loading && dirs.length === 0 && files.length === 0 && (
+
+ 加载中...
+
+ )}
+
+ {!loading && !error && dirs.length === 0 && files.length === 0 && (
+
该目录下没有文件或文件夹
+ )}
+
+ {/* 文件夹列表 */}
+
+ {dirs.map((dir) => (
+
+ ))}
+
+ {/* 文件列表 */}
+ {files.map((file) => (
+
+
+ {file}
+
+
+ ))}
+
+
+
+ {/* 新建文件夹对话框 */}
+ {showCreateFolder && (
+
+
+
新建文件夹
+
setNewFolderName(e.target.value)}
+ placeholder="请输入文件夹名称"
+ className="input w-full mb-4"
+ autoFocus
+ />
+
+
+
+
+
+
+ )}
+
+ {/* 新建 Compose 文件对话框 */}
+ {showCreateFile && (
+
+
+
新建 Compose 文件
+
+
+
setNewFileName(e.target.value)}
+ placeholder="docker-compose.yml"
+ className="input w-full"
+ autoFocus
+ />
+
推荐使用 docker-compose.yml 或 compose.yaml
+
+
+
+
+
+
+
+ )}
+
+
+ {/* 文件编辑器弹窗 */}
+ {editingFile && (
+
+
+ {/* 编辑器头部 */}
+
+
+
+ 编辑文件：{editingFile.name}
+
+
+
+
+ {/* 文件内容编辑区 */}
+
+ {loadingFile ? (
+
+ 加载中...
+
+ ) : (
+ <>
+