322 lines
14 KiB
HTML
322 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>MetaCore - 项目管理平台</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<!-- 侧边栏 -->
|
|
<div class="sidebar">
|
|
<div class="logo">
|
|
<i class="fas fa-cube"></i>
|
|
<span>MetaCore</span>
|
|
</div>
|
|
|
|
<nav class="nav-menu">
|
|
<!-- 快速操作区 -->
|
|
<div class="quick-actions">
|
|
<button class="quick-btn create-btn" id="sidebarCreateBtn">
|
|
<i class="fas fa-plus"></i>
|
|
<span>创建新项目</span>
|
|
</button>
|
|
<button class="quick-btn import-btn" id="sidebarImportBtn">
|
|
<i class="fas fa-upload"></i>
|
|
<span>导入项目</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-title expandable" data-section="my-projects">
|
|
<i class="fas fa-chevron-down expand-icon"></i>
|
|
<span>我的项目</span>
|
|
</div>
|
|
<div class="nav-subsection" id="my-projects">
|
|
<div class="nav-item active" data-page="all-projects">
|
|
<i class="fas fa-folder"></i>
|
|
<span>项目概览</span>
|
|
</div>
|
|
<div class="nav-item" data-page="favorite-projects">
|
|
<i class="fas fa-star"></i>
|
|
<span>收藏项目</span>
|
|
</div>
|
|
<div class="nav-item" data-page="recent-projects">
|
|
<i class="fas fa-clock"></i>
|
|
<span>最近项目</span>
|
|
</div>
|
|
<div class="nav-item" data-page="industrial-projects">
|
|
<i class="fas fa-industry"></i>
|
|
<span>工业项目</span>
|
|
</div>
|
|
<div class="nav-item" data-page="smart-projects">
|
|
<i class="fas fa-microchip"></i>
|
|
<span>智能项目</span>
|
|
</div>
|
|
<div class="nav-item" data-page="vr-projects">
|
|
<i class="fas fa-vr-cardboard"></i>
|
|
<span>VR项目</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-title expandable" data-section="content-management">
|
|
<i class="fas fa-chevron-down expand-icon"></i>
|
|
<span>内容管理</span>
|
|
</div>
|
|
<div class="nav-subsection" id="content-management">
|
|
<div class="nav-item" data-page="resource-category">
|
|
<i class="fas fa-layer-group"></i>
|
|
<span>资源分类</span>
|
|
</div>
|
|
<div class="nav-item" data-page="category-management">
|
|
<i class="fas fa-tags"></i>
|
|
<span>分类管理</span>
|
|
</div>
|
|
<div class="nav-item" data-page="asset-library">
|
|
<i class="fas fa-images"></i>
|
|
<span>资源库</span>
|
|
</div>
|
|
<div class="nav-item" data-page="template-library">
|
|
<i class="fas fa-puzzle-piece"></i>
|
|
<span>模板库</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="nav-section">
|
|
<div class="nav-title expandable" data-section="settings">
|
|
<i class="fas fa-chevron-down expand-icon"></i>
|
|
<span>设置中心</span>
|
|
</div>
|
|
<div class="nav-subsection" id="settings">
|
|
<div class="nav-item">
|
|
<i class="fas fa-cog"></i>
|
|
<span>账户设置</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-users"></i>
|
|
<span>系统管理</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-shield-alt"></i>
|
|
<span>权限管理</span>
|
|
</div>
|
|
<div class="nav-item">
|
|
<i class="fas fa-database"></i>
|
|
<span>数据备份</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="user-info">
|
|
<div class="user-avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<span>Admin</span>
|
|
<i class="fas fa-chevron-down"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 主内容区 -->
|
|
<div class="main-content">
|
|
<!-- 顶部导航 -->
|
|
<div class="top-nav">
|
|
<div class="breadcrumb" id="breadcrumb">
|
|
<span>我的项目</span>
|
|
<span>/</span>
|
|
<span>项目概览</span>
|
|
</div>
|
|
<div class="top-actions">
|
|
<button class="btn-icon">
|
|
<i class="fas fa-bell"></i>
|
|
</button>
|
|
<button class="btn-icon">
|
|
<i class="fas fa-user-circle"></i>
|
|
</button>
|
|
<button class="btn-primary" id="createProjectBtn">
|
|
<i class="fas fa-plus"></i>
|
|
创建
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 项目列表 -->
|
|
<div class="content-area">
|
|
<div class="content-header">
|
|
<h1>全部项目</h1>
|
|
<div class="view-controls">
|
|
<button class="view-btn active" data-view="grid">
|
|
<i class="fas fa-th"></i>
|
|
</button>
|
|
<button class="view-btn" data-view="list">
|
|
<i class="fas fa-list"></i>
|
|
</button>
|
|
<button class="view-btn" id="filterBtn">
|
|
<i class="fas fa-filter"></i>
|
|
</button>
|
|
<button class="view-btn" id="searchBtn">
|
|
<i class="fas fa-search"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 搜索和过滤区域 -->
|
|
<div class="search-filter-area" id="searchFilterArea" style="display: none;">
|
|
<div class="search-box">
|
|
<input type="text" id="searchInput" placeholder="搜索项目名称...">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<div class="filter-options">
|
|
<select id="sortSelect">
|
|
<option value="date-desc">按日期降序</option>
|
|
<option value="date-asc">按日期升序</option>
|
|
<option value="name-asc">按名称升序</option>
|
|
<option value="name-desc">按名称降序</option>
|
|
</select>
|
|
<select id="typeFilter">
|
|
<option value="all">所有类型</option>
|
|
<option value="industrial">工业项目</option>
|
|
<option value="smart">智能项目</option>
|
|
<option value="vr">VR项目</option>
|
|
<option value="game">游戏项目</option>
|
|
<option value="design">设计项目</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="projects-grid" id="projectsGrid">
|
|
<!-- 项目卡片将通过 JavaScript 动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 创建项目模态框 -->
|
|
<div class="modal" id="createProjectModal">
|
|
<div class="modal-content create-project-modal">
|
|
<div class="modal-header">
|
|
<h2>创建新的项目</h2>
|
|
<button class="modal-close" id="closeCreateModal">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body create-project-body">
|
|
<!-- 左侧：项目模板 -->
|
|
<div class="templates-section">
|
|
<h3>选择项目模板</h3>
|
|
<div class="project-templates">
|
|
<div class="template-item" data-template="empty">
|
|
<div class="template-icon">
|
|
<i class="fas fa-file"></i>
|
|
</div>
|
|
<div class="template-name">空白项目模板</div>
|
|
</div>
|
|
<div class="template-item" data-template="industrial">
|
|
<div class="template-icon">
|
|
<i class="fas fa-industry"></i>
|
|
</div>
|
|
<div class="template-name">工业项目</div>
|
|
</div>
|
|
<div class="template-item" data-template="vr">
|
|
<div class="template-icon">
|
|
<i class="fas fa-vr-cardboard"></i>
|
|
</div>
|
|
<div class="template-name">VR虚拟现实</div>
|
|
</div>
|
|
<div class="template-item" data-template="smart">
|
|
<div class="template-icon">
|
|
<i class="fas fa-microchip"></i>
|
|
</div>
|
|
<div class="template-name">智能-可视化大屏</div>
|
|
</div>
|
|
<div class="template-item" data-template="game">
|
|
<div class="template-icon">
|
|
<i class="fas fa-gamepad"></i>
|
|
</div>
|
|
<div class="template-name">游戏开发</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧：项目信息和操作 -->
|
|
<div class="project-info-section">
|
|
<div class="project-info">
|
|
<h3>项目信息</h3>
|
|
<div class="template-description" id="templateDescription">
|
|
<p>选择一个项目模板来快速开始，或者创建一个空白项目来从头开始。每个模板都包含了相应的基础配置和示例文件。</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>项目名称</label>
|
|
<input type="text" id="projectName" placeholder="输入项目名称">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>项目描述</label>
|
|
<textarea id="projectDescription" placeholder="输入项目描述（可选）" rows="3"></textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>项目位置</label>
|
|
<div class="location-input-group">
|
|
<input type="text" id="projectLocation" placeholder="点击浏览选择位置" readonly>
|
|
<button type="button" class="btn-browse" id="browseLocation" title="选择项目保存位置">
|
|
<i class="fas fa-folder-open"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="project-actions">
|
|
<button class="btn-secondary" id="cancelCreate">取消</button>
|
|
<button class="btn-primary" id="confirmCreate">创建项目</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 导入项目模态框 -->
|
|
<div class="modal" id="importProjectModal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>导入项目文件</h2>
|
|
<button class="modal-close" id="closeImportModal">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="import-area">
|
|
<div class="upload-zone" id="uploadZone">
|
|
<i class="fas fa-cloud-upload-alt"></i>
|
|
<p>拖拽文件到这里，或者</p>
|
|
<button class="btn-upload">点击选择</button>
|
|
<input type="file" id="fileInput" accept=".zip,.rar,.7z" style="display: none;">
|
|
</div>
|
|
<div class="import-options">
|
|
<label>
|
|
<input type="checkbox" id="importAsNewProject">
|
|
导入为新项目
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="overwriteExisting">
|
|
覆盖现有项目配置
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" id="cancelImport">取消</button>
|
|
<button class="btn-primary" id="confirmImport">导入</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|