资源管理器必要性———仙盟创梦IDE

仙盟创梦 IDE 在文件资源管理方面具备诸多卓越优点，为开发者带来了前所未有的便捷与高效。
首先，其出色的文件资源管理体系，能够对项目中繁杂的各类文件进行精准分类与有序存储。开发者无需在海量文件中费力寻找，可快速定位所需资源，大幅节省时间，提升开发效率。
尤为突出的是，仙盟创梦 IDE 支持快速复制模块功能。这意味着，当开发者在项目中完成某一功能模块的开发后，若在其他部分或新的项目中需要类似模块，只需简单操作，就能迅速复制该模块。不仅避免了重复开发的繁琐工作，还能确保模块间的一致性与稳定性。这种功能有效降低了开发成本，让开发者能够将更多精力投入到创新性功能的开发上，加速项目的推进进程，助力开发者轻松实现创意，尽情创梦。
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝色资源管理器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Segoe UI", sans-serif;
            list-style: none;
        }

        body {
            background-color: #f0f8ff;
           
            height: 100vh;
        }

       


        .main-container {
            flex: 1;
            display: flex;
            margin: 20px;
            gap: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
        }

        

        .panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
        }

        .view-mode-btn {
            background-color: #f0f8ff;
            border: none;
            padding: 5px 8px;
            cursor: pointer;
            margin-right: 5px;
            border-radius: 3px;
        }

        .view-mode-btn.active {
            background-color: #007bff;
            color: white;
        }
 
       

        .file-item {
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .file-item:hover {
            background-color: #f0f8ff;
        }

        .file-item.selected {
            background-color: #007bff20;
        }

        .file-item .icon {
            width: 32px;
            height: 32px;
            margin-right: 8px;
            vertical-align: middle;
        }

        .operation-panel {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            padding: 0 10px;
        }

        .operation-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            max-width: 80px;
        }

        .context-menu {
            position: absolute;
            background-color: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: none;
        }

        .context-menu-item {
            padding: 5px 20px;
            cursor: pointer;
        }

        .context-menu-item:hover {
            background-color: #f0f8ff;
        }

		 .仙盟创梦_IDE_explore_操作_地址容器 {
            background-color: #007bff;
            color: white;
			/*
            padding: 10px 20px;
            margin-bottom: 10px;
			*/
			padding-left: 10px;
			padding-top: 10px;
			padding-bottom: 8px;
        }

		 .仙盟创梦_IDE_explore_操作_地址one {
            background-color: #007bff;
            color: white;
            /*padding: 10px 20px;
            margin-bottom: 10px;
			*/
			padding-bottom: 5px;
            padding-top: 5px;
        }

		.仙盟创梦_IDE_explore_操作_地址one .路径 {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
           /* width: 100%;
            margin-bottom: 10px;
			*/
        }

		.仙盟创梦_IDE_explore_操作_地址one .按钮 {
			background-color: #f0f8ff;
            margin-right: 5px;		 
			border: none;
			padding: 8px 15px;
			border-radius: 4px;
			cursor: pointer;
			width: 100%;
			max-width: 80px;
		}

		 .仙盟创梦_IDE_explore_listview {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* 图标模式 */
        }

        .仙盟创梦_IDE_explore_listview.list-view {
            grid-template-columns: 1fr; /* 列表模式 */
        }


    </style>
</head>
<body>
    <div class="仙盟创梦_IDE_explore_操作_地址容器">

	    <div class="仙盟创梦_IDE_explore_操作_地址one">
        <input type="text" class="路径" placeholder="源文件夹路径"> 
		<button class="按钮" onclick="toggleView(this, 'left')">打开</button>
		<button class="按钮" onclick="toggleView(this, 'left')">浏览</button>
		 </div>
          <div class="仙盟创梦_IDE_explore_操作_地址one">
        <input type="text" class="路径" placeholder="目标文件夹路径"> 
		<button class="按钮" onclick="toggleView(this, 'left')">打开</button>
		<button class="按钮" onclick="toggleView(this, 'left')">浏览</button>
		 </div>
    </div>

    <div class="main-container">
        <div class="panel">
            <div style="display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #e0e0e0;">
                <button class="view-mode-btn" onclick="仙盟创梦_IDE_explore_切换视图(this, 'left')">图标</button>
                <button class="view-mode-btn list-view" onclick="仙盟创梦_IDE_explore_切换视图(this, 'left')">列表</button>
            </div>
            <div class="仙盟创梦_IDE_explore_listview" id="仙盟创梦_IDE_explore_listview_左侧"></div>
        </div>

        <div class="operation-panel">
            <button class="operation-btn">》复制</button>
            <button class="operation-btn">》移动</button>
            <button class="operation-btn">《复制</button>
            <button class="operation-btn">《移动</button>
        </div>

        <div class="panel">
            <div style="display: flex; align-items: center; padding: 8px; border-bottom: 1px solid #e0e0e0;">
                <button class="view-mode-btn" onclick="仙盟创梦_IDE_explore_切换视图(this, 'right')">图标</button>
                <button class="view-mode-btn list-view" onclick="仙盟创梦_IDE_explore_切换视图(this, 'right')">列表</button>
            </div>
            <div class="仙盟创梦_IDE_explore_listview" id="仙盟创梦_IDE_explore_listview_右侧"></div>
        </div>
    </div>

    <div class="context-menu" id="contextMenu">
        <div class="context-menu-item" onclick="openItem()">打开</div>
        <div class="context-menu-item" onclick="runItem()">运行</div>
        <div class="context-menu-item" onclick="showProperties()">属性</div>
    </div>

    <script>
        // 模拟文件数据
        const generateFileList = () => Array.from({length: 20}, (_, i) => ({
            name: `文件 ${i+1}.txt`,
            type: i % 2 === 0 ? 'folder' : 'file',
            size: Math.random() * 1024
        }));

        // 初始化文件列表
        const renderFileList = (containerId, data) => {
            const container = document.getElementById(containerId);
            container.innerHTML = data.map(item => `
                <div class="file-item" data-type="${item.type}">
                    <img src="${item.type === 'folder' ? '📁' : '📄'}" class="icon">
                    <span>${item.name}</span>
                </div>
            `).join('');
            
            // 右键菜单绑定
            container.querySelectorAll('.file-item').forEach(item => {
                item.addEventListener('contextmenu', (e) => {
                    e.preventDefault();
                    const menu = document.getElementById('contextMenu');
                    menu.style.left = `${e.clientX}px`;
                    menu.style.top = `${e.clientY}px`;
                    menu.style.display = 'block';
                });
            });
        };

        // 切换视图模式
	 
		//仙盟创梦_IDE_explore_listview

		 const 仙盟创梦_IDE_explore_切换视图 = (btn, side) => {
            //const panels = document.querySelectorAll('.仙盟创梦_IDE_explore_listview');
			//right
			var 仙盟创梦_IDE_explore_panels;
			//alert(side);
			if(side == "right"){
				仙盟创梦_IDE_explore_panels = document.querySelectorAll('#仙盟创梦_IDE_explore_listview_右侧');
			}
			if(side == "left"){
				仙盟创梦_IDE_explore_panels = document.querySelectorAll('#仙盟创梦_IDE_explore_listview_左侧');
			}
            仙盟创梦_IDE_explore_panels.forEach(panel => {
                panel.classList.toggle('list-view');
            });
            btn.classList.toggle('active');
        };


        // 初始化
        renderFileList('仙盟创梦_IDE_explore_listview_左侧', generateFileList());
        renderFileList('仙盟创梦_IDE_explore_listview_右侧', generateFileList());

        // 右键菜单点击事件
        const openItem = () => console.log('打开文件');
        const runItem = () => console.log('运行文件');
        const showProperties = () => console.log('显示属性');

        // 点击空白处隐藏菜单
        document.addEventListener('click', () => {
            document.getElementById('contextMenu').style.display = 'none';
        });
    </script>
</body>
</html>