blackbird/dnfs/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>树状笔记</title>

  <!-- ​Font Awesome 6.0.0 是矢量图标库，提供 7,000+ 免费图标及 17,000+ 专业图标。 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

  <!-- 外部CSS文件 -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
  <div class="container">
    <div class="header">
      <h1><i class="fas fa-sitemap"></i> 树状笔记</h1>
      <div class="header-actions">
        <button onclick="resetForm()" class="btn btn-primary"><i class="fas fa-plus"></i> 新增节点</button>
        <button onclick="goBack()" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> 返回上级</button>
      </div>
    </div>

    <!-- 节点迁移模式提示栏 -->
    <div id="move-mode-bar" class="move-mode-bar" style="display: none;">
      <div class="move-mode-info">
        <i class="fas fa-exchange-alt"></i>
        正在迁移节点：<strong id="moving-node-title"></strong>
      </div>
      <div class="move-mode-actions">
        <button onclick="confirmMoveHere()" class="btn btn-move-here"><i class="fas fa-arrow-down"></i> 移动到此</button>
        <button onclick="cancelMove()" class="btn btn-cancel-move"><i class="fas fa-times"></i> 取消</button>
      </div>
    </div>

    <div class="main-content">
      <div class="form-section">
        <!-- 表单标题 -->
        <h3 class="form-title"><i class="fas fa-pen"></i> <span id="form-mode-text">新增节点</span></h3>
        <input type="hidden" id="edit-id" value=""> <!-- 隐藏输入框，要编辑节点的id -->
        <!-- 输入节点标题 -->
        <div class="form-group">
          <label for="node-title"><i class="fas fa-heading"></i> 标题</label>
          <input type="text" id="node-title" class="form-control" placeholder="输入节点标题">
        </div>
        <!-- 输入节点内容 -->
        <div class="form-group">
          <label for="node-content"><i class="fas fa-file-alt"></i> 节点说明</label>
          <textarea id="node-content" class="form-control" placeholder="输入节点的文字说明"></textarea>
        </div>

        <!-- 文件上传区域 -->
        <div class="form-group">
          <label><i class="fas fa-upload"></i> 文件上传</label>
          <div class="file-upload-area" onclick="document.getElementById('file-upload').click()">
            <i class="fas fa-cloud-upload-alt" style="font-size: 2em; color: #888; margin-bottom: 10px;"></i>
            <p>点击或拖拽文件到此处上传</p>
            <p style="font-size: 0.8em; color: #999;">文件将以编码形式保存，同一节点内数据不要超过1M</p>
            <input type="file" id="file-upload" style="display: none;" onchange="handleFileUpload(this.files)"> <!-- 隐藏输入框 -->
          </div>
          
          <!-- 选择文件状态信息 -->
          <div class="file-info" id="file-info">未选择文件</div>
          
          <!-- 文件元信息显示 -->
          <div id="file-meta-container" style="display: none;">
            <div id="file-meta-info" class="file-meta-info">
              <p><i class="fas fa-file"></i> 文件名：<span id="meta-filename"></span></p>
              <p><i class="fas fa-hdd"></i> 文件大小：<span id="meta-filesize"></span></p>
              <p><i class="fas fa-calendar-alt"></i> 上传时间：<span id="meta-uploadtime"></span></p>
            </div>
          </div>
          
          <!-- 数据修复提示 -->
          <div id="data-repair-hint" class="data-repair-hint" style="display: none;">
            <i class="fas fa-exclamation-circle"></i> 
            <span>检测到文件元数据损坏。请尝试重新上传文件以修复此问题。</span>
          </div>
          
          <!-- 文件进度条 -->
          <div class="file-progress">
            <div class="file-progress-bar" id="file-progress-bar"></div>
          </div>
        </div>

        <!-- 文件下载区域（仅在有文件时显示） -->
        <div class="form-group" id="download-section" style="display: none;">
          <label><i class="fas fa-download"></i> 文件操作</label>
          <div style="display: flex; gap: 8px;">
            <button onclick="decodeAndDownload(null, null, true)" class="btn btn-success">
              <i class="fas fa-download"></i> 下载文件
            </button>
            <button onclick="removeFile()" class="btn btn-danger">
              <i class="fas fa-trash"></i> 移除文件
            </button>
          </div>
        </div>
        
        <!-- 隐藏的Base64存储字段 - 用户永远不会看到 -->
        <textarea id="hidden-base64" class="form-control hidden-field" placeholder="Base64编码内容（自动生成，隐藏显示）"></textarea>
        <input type="hidden" id="file-metadata" value="">
        
        <!-- 动作表单 -->
        <div class="form-actions">
          <button onclick="saveNode()" class="btn btn-primary"><i class="fas fa-save"></i> 保存</button>
          <button onclick="resetForm()" class="btn btn-secondary"><i class="fas fa-undo"></i> 重置</button>
        </div>
      </div>

      <!-- 节点表单 -->
      <div id="node-list" class="node-list">
        <div class="loading"><i class="fas fa-spinner"></i><p>加载中...</p></div>
      </div>
      
    </div>
  </div>

  <!-- 删除确认模态框 -->
  <div id="delete-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title"><i class="fas fa-exclamation-triangle"></i> 确认删除</h3>
        <button class="modal-close" onclick="closeDeleteModal()"><i class="fas fa-times"></i></button>
      </div>
      <div class="modal-body">
        <p id="delete-message">确定删除该节点吗？</p>
        <p id="delete-node-title-container" style="font-weight: bold; margin: 8px 0;"></p>
        <p id="delete-file-hint" style="font-size:.85em;color:#e74c3c;display:none;"><i class="fas fa-exclamation-circle"></i> 此节点包含文件，删除后文件将无法恢复</p>
        <p style="font-size:.85em;color:#777">此操作不可恢复</p>
      </div>
      <div class="modal-footer">
        <button onclick="confirmDelete()" class="btn btn-danger"><i class="fas fa-trash"></i> 删除</button>
        <button onclick="closeDeleteModal()" class="btn btn-secondary"><i class="fas fa-times"></i> 取消</button>
      </div>
    </div>
  </div>

  <div id="toast-container"></div>

  <!-- 外部JS文件 -->
  <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>