diff --git a/dnfs/.gitignore b/dnfs/.gitignore
new file mode 100644
index 0000000..aa67360
--- /dev/null
+++ b/dnfs/.gitignore
@@ -0,0 +1,107 @@
+#prjs
+*.db
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
diff --git a/dnfs/LICENSE b/dnfs/LICENSE
new file mode 100644
index 0000000..63b4b68
--- /dev/null
+++ b/dnfs/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/dnfs/README.md b/dnfs/README.md
new file mode 100644
index 0000000..6a6906a
--- /dev/null
+++ b/dnfs/README.md
@@ -0,0 +1,18 @@
+
+# DNFS
+
+这个项目叫做**树状网络文件系统（DNFS）**，是个HTTP服务。
+
+它监听本地**8006**端口，访问者可以枚举、添加、删除、更新节点。
+
+# 接口
+```bash
+# 获取某一层的节点列表
+curl -X POST http://localhost:8006/get_notes -d '{"pid": <integer>}'
+# 添加一个节点
+curl -X POST http://localhost:8006/add_note -d '{"pid": <int>, "title": <str>, "content": <str>}'
+# 删除一个节点
+curl -X POST http://localhost:8006/delete_note -d '{"id": <int>}'
+# 更新一个节点
+curl -X POST http://localhost:8006/update_note -d '{"id": <int>, "pid": <int>, "title": <str>, "content": <str>}'
+```
\ No newline at end of file
diff --git a/dnfs/_run.sh b/dnfs/_run.sh
new file mode 100755
index 0000000..7be4ff4
--- /dev/null
+++ b/dnfs/_run.sh
@@ -0,0 +1,5 @@
+#!/bin/bash
+cd "$(dirname "$0")" || exit
+bash ./_setup.sh
+source ./.env/bin/activate
+exec python dnfs.py
diff --git a/dnfs/_setup.sh b/dnfs/_setup.sh
new file mode 100755
index 0000000..cc0b017
--- /dev/null
+++ b/dnfs/_setup.sh
@@ -0,0 +1,6 @@
+#!/bin/bash
+cd "$(dirname "$0")" || exit
+python3 -m venv .env
+#sudo chmod +x .env/bin/activate
+source .env/bin/activate
+pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple
diff --git a/dnfs/dnfs.py b/dnfs/dnfs.py
new file mode 100755
index 0000000..1c36d30
--- /dev/null
+++ b/dnfs/dnfs.py
@@ -0,0 +1,199 @@
+#!/usr/bin/env python3
+
+
+
+
+
+'''
+
+Dendrachy Network File-System (dnfs)
+
+树状网络文件系统
+
+
+
+可能加入数据库加密功能。
+
+'''
+
+from flask import Flask, request, jsonify, render_template
+from flask_cors import CORS
+from flask_sqlalchemy import SQLAlchemy
+from waitress import serve
+import os
+
+basedir = os.path.abspath(os.path.dirname(__file__))
+
+app = Flask(__name__)
+CORS(app)
+
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(basedir, 'notes.db')
+
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+db = SQLAlchemy(app)
+
+class Note(db.Model):
+
+    id = db.Column(db.Integer, primary_key=True)
+
+    pid = db.Column(db.Integer, nullable=False)
+
+    title = db.Column(db.String(128), nullable=False)
+
+    content = db.Column(db.Text, nullable=False)
+
+
+
+    def __repr__(self):
+
+        return f"<Node {self.title}>"
+
+with app.app_context():
+
+    db.create_all()
+
+
+
+# eg: {
+#    "pid": "0",
+#    "title": "test",
+#    "content": "hello"
+#} 
+@app.route('/add_note', methods=['POST'])
+
+def add_note():
+
+    data = request.get_json()
+
+    pid = data.get('pid')
+
+    title = data.get('title')
+
+    content = data.get('content')
+
+    if pid is None or not title or not content:
+
+        return jsonify({"error": "Pid, title and content are required"}), 400
+
+    new_note = Note(pid=int(pid), title=title, content=content)
+
+    with app.app_context():
+
+        db.session.add(new_note)
+
+        db.session.commit()
+
+    return jsonify({"message": "Note added successfully"}), 200
+
+
+# {“pid”: "0"} 
+@app.route('/get_notes', methods=["POST"])
+
+def get_notes():
+
+    data = request.get_json()
+
+    pid = data.get('pid')
+
+    if not pid:
+
+        pid = 0
+
+    with app.app_context():
+
+        notes = Note.query.filter(Note.pid == int(pid))
+
+        result = [{'id': note.id, 'pid': note.pid, 'title': note.title, 'content':note.content} for note in notes]
+
+    return jsonify(result), 200
+
+
+# eg: {"id": "1"}
+@app.route('/delete_note', methods=['POST'])
+
+def delete_note():
+
+    data = request.get_json()
+
+    note_id = data.get('id')
+
+    if not note_id:
+
+        return jsonify({"error": "Note ID is required"}), 400
+
+    with app.app_context():
+
+        note = Note.query.get(note_id)
+
+        if note:
+
+            db.session.delete(note)
+
+            db.session.commit()
+
+            return jsonify({'message': "Note deleted successfully"}), 200
+
+        else:
+
+            return jsonify({"error": "Note not found"}), 404
+
+
+# eg: {
+#    "id": "1",
+#    "pid": "0",
+#    "title": "test",
+#    "content": "hello"
+#}
+@app.route('/update_note', methods=['POST'])
+
+def update_note():
+
+    data = request.get_json()
+
+    id = data.get('id')
+
+    pid  = data.get('pid')
+
+    title = data.get('title')
+
+    content = data.get('content')
+
+    if id is None or pid is None or not title or not content:
+
+        return jsonify({"error": "Invalid param"}), 400
+
+    with app.app_context():
+
+        note = Note.query.get(id)
+
+        if note:
+
+            note.pid = pid
+
+            note.title = title
+
+            note.content = content
+
+            db.session.commit()
+
+            return jsonify({'message': "Your change is up-to-date."}), 200
+
+        else:
+
+            return jsonify({'error': 'Note not found'}), 400
+
+
+
+
+@app.route('/')
+def view_page():
+    """返回应用主页"""
+    return render_template('index.html')
+
+ADDR='127.0.0.1'
+PORT=8006
+if __name__ == "__main__":
+    print(f'Listen at http://{ADDR}:{PORT}')
+    #app.run(host="127.0.0.1", port=8006)
+    serve(app, host='127.0.0.1', port=8006)
diff --git a/dnfs/requirements.txt b/dnfs/requirements.txt
new file mode 100644
index 0000000..77f8550
--- /dev/null
+++ b/dnfs/requirements.txt
@@ -0,0 +1,5 @@
+flask
+flask-cors
+flask_sqlalchemy
+#gunicorn
+waitress
diff --git a/dnfs/static/css/style.css b/dnfs/static/css/style.css
new file mode 100644
index 0000000..fe8064c
--- /dev/null
+++ b/dnfs/static/css/style.css
@@ -0,0 +1,502 @@
+
+* { /* 通配符选择器，表示匹配页面中所有 HTML 元素 */
+    margin:0;
+    padding:0;
+    box-sizing:border-box
+}
+
+body { /* 针对 <body> 元素的样式设置，主要用于定义页面的整体基础样式 */
+    font-family:system-ui,sans-serif; /* 页面的默认字体。system-ui 表示优先使用操作系统的默认系统字体 */
+    background:#f5f5f5; /* 设置页面的背景色为浅灰色（#f5f5f5），这是一种常见的浅色调背景，既能与内容形成柔和对比，又不会像纯白色（#fff）那样刺眼，提升长时间阅读的舒适度。 */
+    min-height:100vh; /* 最小高度为视口高度。即使页面内容较少（不足以占满整个屏幕），背景色也能铺满整个视口，避免底部出现空白区域，保证页面视觉完整性。 */
+    padding:10px /* 给 <body> 元素设置内边距为 10px，使页面内容与浏览器窗口边缘保持一定距离，避免内容紧贴屏幕边框，提升布局的呼吸感和美观度。 */
+}
+
+.container {  /* 针对类名为 container 的元素设置的样式，通常通常用于包裹页面主要内容的容器 */
+    max-width:800px;  /* 限制容器的最大宽度为 800px。作用是避免内容在大屏幕上过度拉伸，保证文字阅读的舒适行宽（过宽的文本行不利于阅读） */
+    margin:0 auto;  /* 设置容器的上下外边距为 0，左右外边距为 auto（自动计算），这是让块级元素在父容器中水平居中的经典写法。 */
+    background:#fff;  /* 设置容器的背景色为纯白色（#fff），与前面 <body> 设置的浅灰色（#f5f5f5）背景形成对比，突出容器内的内容区域。 */
+    border-radius:6px;  /* 给容器添加 6px 的圆角边框，使容器边角从直角变为圆弧，增加视觉柔和度，提升设计感。 */
+    box-shadow:0 1px 3px #ddd /* 为容器添加轻微的阴影效果：水平偏移 0、垂直偏移 1px、模糊半径 3px，阴影颜色为浅灰色（#ddd）。 */
+}                             /* 作用是让容器在页面中产生轻微的 "悬浮" 感，与背景区分开，增强页面的层次感。 */
+
+.header { /* 定义类名为 .header 的元素样式，通常适用于网页的头部导航栏或标题区域 */
+    background:#888;  /* 设置元素的背景色为深灰色（#888），这是一种中性深色，适合作为头部背景以突出内容。 */
+    color:#fff; /* 定义元素内文字的颜色为纯白色（#fff），与深灰色背景形成强烈对比，确保文字清晰可读 */
+    padding:12px; /* 为元素设置内边距为 12px，使头部内容（如标题、菜单等）与边框保持一定距离，避免内容紧贴边缘，提升视觉舒适度。 */
+    display:flex; /* 将元素设置为 Flex 布局容器，使其内部子元素可以使用 Flexbox 的特性进行灵活排列，这是现代网页布局中常用的高效方式。 */
+    justify-content:space-between;  /* 控制 Flex 容器中子元素在水平方向（主轴） 的对齐方式：子元素会沿水平方向分布，两端的子元素分别靠向容器的左右边缘，中间的剩余空间均匀分配在子元素之间。 */
+    align-items:center  /* 控制 Flex 容器中子元素在垂直方向（交叉轴） 的对齐方式：所有子元素会在垂直方向上居中对齐，确保不同高度的元素（如文字和图标）在视觉上保持水平一致。 */
+}
+
+.header h1 {  /* 用于设置类名为 .header 内部的 <h1> 标题元素的样式 */
+    font-size:1.4em /* 定义该 <h1> 标题的字体大小为 1.4em。 其中 em 是相对单位，基于父元素的字体大小进行计算（1em = 父元素字体大小）。 */
+}
+
+.header-actions { /* 用于定义类名为 .header-actions 的元素样式，该元素通常是页面头部（.header）中存放操作按钮、图标等交互元素的容器 */
+    display:flex; /* 设置为 Flex 布局容器，使其内部的子元素（如按钮、图标）能够沿水平方向（默认主轴方向）排列，且可通过 Flex 特性灵活控制子元素的对齐和分布，适配头部区域的横向布局需求。 */
+    gap:6px /* 为 Flex 容器内的子元素之间设置 6px 的间距，包括水平和垂直方向（若子元素换行）。作用是避免子元素（如 “编辑”“删除” 按钮、功能图标）紧贴在一起，让布局更宽松、清晰，同时无需手动给每个子元素设置 margin，简化样式代码。 */
+}
+
+.main-content { /* 定义类名为 .main-content 的元素样式，通常该元素是页面中承载主要内容（如文章、列表、表单等）的容器 */
+    padding:15px  /* 为 .main-content 元素设置内边距为 15px，即元素内部的内容与元素边框（或边缘）之间保持 15px 的距离。 */
+}
+
+.form-section { /* 用于定义类名为 .form-section 的元素样式，从命名和样式特征来看，这个类通常用于包裹表单相关内容的区域 */
+    background:#f5f5f5; /* 设置背景色为浅灰色（#f5f5f5），与周围可能的白色（#fff）内容区域形成轻微对比，从而视觉上区分出表单区域。 */
+    padding:15px; /* 为表单区域设置 15px 的内边距，让表单内的输入框、标签等元素与边框保持距离，避免内容拥挤，提升填写体验。 */
+    border-radius:4px;  /* 给区域添加 4px 的圆角边框，使边角呈现柔和的圆弧效果，减少生硬感，增强视觉友好度。 */
+    border:1px dashed #ddd; /* 设置 1px 宽的虚线边框，颜色为浅灰色（#ddd）。虚线样式相比实线更显轻盈，既能勾勒出表单区域的边界，又不会过于抢眼，同时与浅灰色背景形成协调的视觉效果。 */
+    margin-bottom:15px  /* 在表单区域底部设置 15px 的外边距，使该区域与下方的其他内容保持距离，避免不同内容区块紧贴在一起，增强页面布局的层次感。 */
+}
+
+.form-title { /* 用于定义类名为 .form-title 的元素样式，从命名来看，这通常是表单区域的标题样式设置 */
+    color:#555; /* 设置标题文字颜色为中灰色（#555），相比纯黑色（#000）更柔和，既保证可读性，又不会过于抢眼，适合作为区域标题的视觉表现 */
+    margin-bottom:12px; /* 在标题底部设置 12px 的外边距，使标题与下方的表单内容（如输入框、按钮等）保持距离，形成清晰的内容分隔，提升表单区域的层次感。 */
+    font-size:1.1em;  /* 定义标题字体大小为 1.1em（相对单位），基于父元素字体大小计算（若父元素默认 16px，则约为 17.6px）。这个大小既比普通内容文字略大，突出标题属性，又不会过于夸张，保持整体协调。 */
+    display:flex; /* 将标题元素设置为 Flex 布局容器，使其内部可能包含的子元素（如图标和文字）能够横向排列。 */
+    align-items:center; /* 让 Flex 容器内的子元素（如标题前的图标和文字）在垂直方向上居中对齐，确保不同元素在视觉上保持水平一致。 */
+    gap:6px /* 为标题内的子元素（如图标和文字）之间设置 6px 的间距，避免元素紧贴，使布局更清晰。 */
+}
+
+.form-group { /* 用于定义类名为 .form-group 的元素样式，从命名来看，该类通常用于包裹表单中的一组相关元素（如一个输入框与其对应的标签） */
+    margin-bottom:12px  /* 设置 .form-group 元素底部的外边距为 12px，即每个表单组与下方的其他表单组之间保持 12px 的距离 */
+}
+
+.form-group label { /* 用于设置 .form-group 容器内的 <label> 标签样式，主要针对表单中输入项的说明文字进行美化 */
+    display:block;  /* 将 <label> 从默认的行内元素（inline）改为块级元素（block），使其独占一行，强制后续的输入框（如 <input>）另起一行显示，形成 “标签在上，输入框在下” 的经典表单布局，更符合用户阅读和填写习惯。 */
+    margin-bottom:4px;  /* 在标签底部设置 4px 的外边距，使标签与下方的输入框保持微小距离，避免两者紧贴，提升视觉清晰度。 */
+    color:#555; /* 标签文字使用中灰色（#555），相比黑色更柔和，既保证可读性，又不会抢夺输入框的视觉焦点（表单中输入区域通常需要更突出）。 */
+    font-size:.9em  /* 标签字体大小为 0.9em（相对单位），比默认文字略小（若父元素默认 16px，则约为 14.4px），通过尺寸差异进一步弱化标签的视觉权重，让用户注意力更易集中在输入区域。 */
+}
+
+.form-control { /* 这段这段这段 CSS 代码用于定义类名为 .form-control 的元素样式，这类元素通常通常是表单中的输入控件（如文本框、下拉框等） */
+    width:100%; /* 设置输入控件的宽度为父容器（通常是 .form-group）的 100%，使其填满满整个表单组的宽度，保证表单表单控件在水平方向上对齐统一，形成整齐的视觉效果。 */
+    padding:8px;  /* 为控件控件内部设置 8px 的内边距，让输入的文字与边框保持一定距离，避免仅避免文字紧贴边框影响阅读，也增加了控件的可点击区域和视觉面积，提升操作体验。 */
+    border:1px solid #ddd;  /* 给控件添加 1px 宽的实线边框，颜色为浅灰色（#ddd），既明确了控件的边界，又不会过于醒目，保持整体风格的简洁柔和。 */
+    border-radius:3px;  /* 设置 3px 的圆角边框，使控件边角变得圆润，相比直角边框更亲和用户，与表单其他元素的圆角设计（如 .form-section 的 border-radius: 4px）形成呼应，保持持视觉一致性。 */
+    font-size:.9em  /* 控件内文字大小为 0.9em（相对单位），与前面表单标签的字体大小保持一致，确保表单内文字尺寸的协调性，避免视觉混乱。 */
+}
+
+textarea.form-control { /* 针对同时具有 form-control 类的 <textarea> 元素（多行文本输入框）的样式补充，用于优化多行输入框的特定表现 */
+    resize:vertical;  /* vertical 表示用户只能垂直（上下）拖动文本框边缘来改变其高度，而不能水平（左右）调整宽度。 */
+    min-height:120px; /* 设置文本框的最小高度为 120px，确保初始状态下有足够的可视区域供用户输入多行内容（如备注、描述等），避免默认状态下文本框过小影响使用。 */
+    line-height:1.5 /* 设置文本框内文字的行高为 1.5 倍字号，增加多行文本之间的垂直间距，使长文本更易阅读和编辑，提升可读性。 */
+}
+
+.form-actions { /* 用于定义类名为 .form-actions 的元素样式，从命名和样式来看，这个类通常用于包裹表单底部的操作按钮（如 “提交”“取消” 按钮） */
+    display:flex; /* 将 .form-actions 设为 Flex 布局容器，使内部的按钮元素能够沿水平方向排列，方便控制按钮间的间距和对齐方式。 */
+    gap:8px;  /* 为容器内的按钮之间设置 8px 的间距，避免多个操作按钮紧贴在一起，使布局更清晰，操作区域更易区分。 */
+    justify-content:flex-end; /* 控制 Flex 容器内按钮在水平方向的对齐方式：将所有按钮靠右对齐。这是表单设计的常见做法，符合用户视觉习惯（操作按钮通常放在表单底部右侧）。 */
+    margin-top:15px /* 在操作按钮区域顶部设置 15px 的外边距，使按钮区域与上方的表单输入内容保持距离，形成明显的视觉分隔，让用户完成输入后能快速定位到操作按钮。 */
+}
+
+.node-list {  /* 用于定义类名为 .node-list 的元素样式，从命名推测，该元素可能是用于展示一系列节点（如列表项、卡片、条目等）的容器 */
+    margin:15px 0 /* 设置 .node-list 元素的上下外边距为 15px，左右外边距为 0。 */
+}
+
+.node { /* 用于定义类名为 .node 的元素样式，从样式特征来看，这类元素通常是列表中的单个条目（如内容节点、信息卡片等） */
+    background:#fafafa; /* 设置节点的背景色为极浅的灰色。既能与周围区域形成微妙区分，又保持了整体的柔和基调*/
+    padding:15px; /* 为节点内部设置 15px 的内边距，让节点内的内容（如文本、图标等）与边框保持距离，避免拥挤，提升可读性 */
+    border-radius:4px;  /* 给节点添加 4px 的圆角边框，使边角呈现柔和的圆弧效果，减少生硬感，与页面中其他元素（如表单区域）的圆角设计形成风格统一。 */
+    border-left:3px solid #888; /* 在节点左侧设置 3px 宽的深灰色（#888）实线边框，作为视觉标识。这种左侧边框设计常用于突出条目重要性或进行分类标记，能快速吸引用户注意力并形成视觉焦点。 */
+    box-shadow:0 1px 2px #eee;  /* 为节点添加轻微的阴影效果（水平偏移 0、垂直偏移 1px、模糊半径 2px，颜色为极浅灰色 #eee），使节点产生轻微的悬浮感，增强与背景的层次感，但又不会过于抢眼。 */
+    margin-bottom:10px  /* 在节点底部设置 10px 的外边距，使列表中的多个节点之间保持适当距离，避免条目紧贴，保证列表的清晰可读性。 */
+}
+
+.node:hover { /* .node 元素的鼠标悬浮状态样式，用于在用户将鼠标指针移到节点条目上时，提供视觉反馈以增强交互体验 */
+    box-shadow:0 2px 4px #ddd /* 垂直偏移量从 1px 增加到 2px：阴影向下偏移更多，增强 “悬浮抬起” 的视觉感受；模糊半径从 2px 增加到 4px：阴影范围更扩散，让悬浮效果更明显； 阴影颜色从 #eee（极浅灰）加深到 #ddd（浅灰）：阴影对比度提高，进一步强化视觉反馈。 */
+}
+
+/* 文件节点特殊样式 */
+.node.has-file {  /* 这是一个多类选择器，表示同时拥有 node 和 has-file 两个类的元素。 */
+    border-left-color: #2ecc71; /* 通过左侧边框的颜色差异，直观区分出 “包含文件的节点” 与普通节点，让用户能快速识别节点类型，提升信息扫描效率。 */
+}
+
+.node-title { /* 用于定义类名为 .node-title 的元素样式，从命名和样式来看，这通常是节点（.node）内部的标题部分 */
+    font-size:1.1em;  /* 比节点内的普通文字略大，突出标题的层级地位，方便用户快速定位每个节点的核心信息 */
+    color:#333; /* 比普通内容文字的颜色更深，通过颜色对比差异强化标题的视觉权重，同时相比纯黑色（#000）更柔和，避免视觉刺眼 */
+    margin-bottom:8px;  /* 使其与下方的节点内容（如描述文字、附加信息等）保持距离，形成清晰的内容层次 */
+    cursor:pointer; /* 当鼠标指针悬停在标题上时，光标会变成手型（指针样式），暗示该标题是可点击的（可能关联展开 / 折叠、跳转等交互功能），增强交互的直观性 */
+    display:flex; /* 使其内部元素（如图标和文字）能横向排列。 */
+    align-items:center; /* 让标题内的子元素（如图标和文字）在垂直方向上居中对齐，保证视觉上的整齐度。 */
+    gap:6px /* 避免元素紧贴，提升布局清晰度。 */
+}
+
+.node-content { /* 用于定义类名为 .node-content 的元素样式，从命名和样式来看，这通常是节点（.node）内部的正文内容区域 */
+    color:#666; /* 通过颜色差异区分内容层级，让标题更突出，同时保持内容的可读性 */
+    font-size:.9em; /* 进一步通过尺寸差异强化标题与内容的层级关系，使节点结构更清晰 */
+    margin-bottom:12px; /* 使其与节点内下方的其他元素（如操作按钮、附加信息等）保持距离，避免内容拥挤，提升整体布局的呼吸感 */
+    white-space:pre-wrap; /* 控制文本的换行和空格处理：保留文本中的换行符和空格，同时当内容超出容器宽度时自动换行。 */
+    line-height:1.5 /* 增加多行文本之间的垂直间距，使长文本更易阅读，减轻视觉疲劳，提升内容的可读性。 */
+}
+
+.file-indicator { /* 用于定义类名为 .file-indicator 的元素样式，从命名和样式来看，这通常是用于标识节点中包含文件的小标签或提示元素 */
+    display: inline-block;  /* 将元素设置为行内块级元素，使其既可以像行内元素一样与其他内容（如文本）在同一行显示，又可以像块级元素一样设置宽高、内外边距等样式，适合作为小型标签使用 */
+    background: #e9f5e9;  /* 与包含文件的节点左侧边框颜色（#2ecc71）相呼应，形成统一的视觉标识系统，直观关联 “文件” 这一特征。 */
+    padding: 3px 8px; /* 使标签文字与边框保持适当距离，既保证标签小巧紧凑，又避免文字过于拥挤。 */
+    border-radius: 3px; /* 使其外观更柔和，与节点整体的圆角设计风格统一。 */
+    font-size: 0.8em; /* 比节点内容文字更小，作为辅助信息不抢占主要内容的视觉焦点。 */
+    color: #27ae60; /* 与背景色形成柔和对比，保证文字清晰可读，同时与节点左侧的文件标识色属同一色系，强化 “文件” 相关的视觉关联 */
+    margin-top: 5px;  /* 使其与上方的内容（如节点描述）保持微小距离，避免紧贴，提升布局清晰度。 */
+}
+
+.node-actions { /* 用于定义类名为 .node-actions 的元素样式，从命名和样式来看，该元素通常是节点（.node）内部的操作按钮容器（如 “编辑”“删除”“查看” 等按钮） */
+    display:flex; /* 使内部的操作按钮能够沿水平方向排列，方便控制按钮间的间距和对齐方式 */
+    gap:8px;  /* 避免多个按钮紧贴在一起，使每个操作选项更易区分，提升点击准确性 */
+    justify-content:flex-end  /* 控制按钮在水平方向的对齐方式：将所有操作按钮靠右对齐。这是内容条目中操作区的常见布局，既不干扰左侧主要内容的阅读，又符合用户寻找操作按钮的视觉习惯（通常在条目右侧）。 */
+}
+
+.btn {  /* 定义了一个基础按钮（.btn）的通用样式，适用于页面中各类按钮元素，具体解析如下 */
+    padding:5px 10px; /* 使按钮保持紧凑但不拥挤的尺寸，既方便点击又不会占用过多空间。 */
+    border:none;  /* 移除默认边框，避免浏览器自带的按钮边框样式干扰自定义设计，使按钮风格更统一 */
+    border-radius:3px;  /* 让按钮边角呈现柔和效果，与页面中其他元素（如表单、节点）的圆角设计保持风格一致 */
+    cursor:pointer; /* 鼠标悬停时显示手型光标，明确提示该元素可点击，增强交互的直观性。 */
+    font-size:.85em;  /* 比普通内容文字略小，保持按钮的紧凑感，同时保证文字清晰可读 */
+    display:flex; /* 使用 Flex 布局，使按钮内可能包含的图标和文字能够横向排列。 */
+    align-items:center; /* 让按钮内的图标和文字在垂直方向上居中对齐，确保视觉上的整齐度。 */
+    gap:3px /* 避免元素紧贴，提升按钮内部布局的清晰度。 */
+}
+
+.btn-primary {  /* 用于强调页面中的重要操作按钮 */
+    background:#888;  /* 与页面头部的背景色保持一致，形成视觉呼应，强化主要操作按钮的辨识度 */
+    color:#fff  /* 与深灰色背景形成强烈对比，确保文字清晰可读，同时突出按钮的重要性 */
+}
+
+.btn-danger { /* 危险 / 警告类按钮样式，通常用于表示具有破坏性或重要警告性质的操作（如 “删除”“取消”“确认删除” 等） */
+    background:#e74c3c; /* 设置按钮背景色为鲜红色，这是国际通用的警告 / 危险色，能快速引起用户注意，暗示该操作可能具有不可逆的后果（如删除数据） */
+    color:#fff  /* 文字颜色为纯白色，与鲜红色背景形成高对比度，确保文字清晰可读，同时强化视觉冲击力，进一步突出操作的特殊性。 */
+}
+
+.btn-secondary {  /* 用于表示次要按钮（次要操作按钮），通常用于次要或辅助性的交互操作 */
+    background:#aaa;  /* 按钮背景色为中灰色，比主要按钮更浅，视觉权重更低，通过颜色明暗差异直观体现操作的次要地位 */
+    color:#fff  /* 文字仍为纯白色，与中灰色背景保持足够对比度以保证可读性，同时保持与其他按钮在文字样式上的一致性。 */
+}
+
+.btn-warning {  /* 用于表示警告类按钮，通常用于需要用户注意但不及危险操作严重的场景（如 “修改”“覆盖” 等可能带来一定影响的操作） */
+    background:#f39c12; /* 按钮背景色为橙色，这是国际通用的警告色，视觉上比主要按钮（灰色）更醒目，但比危险按钮（红色）柔和，既提示用户关注操作，又不会造成过度紧张感 */
+    color:#fff  /* 文字为纯白色，与橙色背景形成高对比度，确保文字清晰可读，同时保持与其他按钮在文字样式上的一致性。 */
+}
+
+.btn-success {  /* 用于表示成功状态或正向操作的按钮（如 “保存成功”“提交完成”“确认通过” 等场景） */
+    background:#2ecc71; /* 按钮背景色为青绿色，这是国际通用的成功 / 正向操作色，视觉上给人积极、安全的感受，常用于标识操作成功或具有明确积极意义的交互（如 “确认”“完成” 等）。 */
+    color:#fff  /* 文字为纯白色，与绿色背景形成高对比度，确保文字文字清晰可读，同时保持与其他按钮在文字样式上的一致性。 */
+}
+
+.empty-state, .loading {  /* 这是一个群组选择器，同时对两个类应用相同的样式，避免代码重复，确保空状态和加载状态在基础视觉表现上保持一致。 */
+    text-align:center;  /* 使内容（如提示文字、加载图标等）在容器中水平居中对齐，这种居中布局符合用户对状态提示的视觉预期，显得更规整。 */
+    padding:30px; /* 让状态提示区域与周围内容保持足够距离，形成独立的视觉区块，突出状态信息 */
+    color:#777  /* 文字颜色为中灰色，既保证可读性，又不会过于抢眼，适合作为辅助性的状态提示（不干扰页面核心内容） */
+}
+
+.empty-state i, .loading i {  /* 群组选择器，同时作用于空状态和加载状态容器内的 <i> 标签（图标元素），确保两种状态下的图标样式统一。 */
+    font-size:2em;  /* 将图标大小设置为 2em（相对单位），比普通文字大得多，使图标成为状态提示中的视觉焦点，通过醒目的图标快速传递状态信息（如空状态可能用文件夹或文件图标，加载状态可能用旋转图标） */
+    margin-bottom:10px  /* 使其与下方的文字说明（如 “暂无数据”“加载中...”）保持距离，避免图标与文字紧贴，提升状态提示区域的布局清晰度 */
+}
+
+@keyframes spin { /* 声明一个名为 spin 的动画，后续可以通过 animation 属性将此动画应用到任意元素上 */
+
+    0% {/* 动画开始时（0% 进度），元素旋转角度为 0 度（初始状态） */
+    transform:rotate(0deg)
+    }
+    
+    100% {  /* 动画结束时（100% 进度），元素旋转角度为 360 度（完整旋转一周） */
+    transform:rotate(360deg)
+    }
+    
+}
+
+.loading i {  /* 选择器定位到类为 .loading 的容器内的 <i> 标签（通常是图标元素），专门针对加载状态的图标应用样式 */
+    animation:spin 1s linear infinite /* 这是动画属性的简写。 动画持续时间为 1 秒，即图标旋转一周需要 1 秒。 */
+}                                   /* 动画速度曲线为匀速，使旋转过程平滑无加速或减速。动画循环次数为无限，确保在加载状态持续期间，图标一直保持旋转 */
+
+.toast {  /* 定义了一个名为 .toast 的样式类，用于创建页面中的轻量级提示框（类似 “Toast 通知”），通常用于操作成功 / 失败、系统提示等场景 */
+    position:fixed; /* 采用固定定位，使提示框脱离文档流，位置相对于浏览器窗口固定，不会随页面滚动而移动，确保用户始终能看到提示。 */
+    top:10px; /* 定位在页面右上角，这是 Toast 通知的经典位置（不遮挡主要内容，又能快速被注意到） */
+    right:10px; /* ... */
+    padding:8px 12px; /* 内部上下内边距 8px、左右 12px，让提示文字与边框保持适当距离，避免拥挤。 */
+    border-radius:3px;  /* 使提示框外观更柔和，符合现代 UI 设计风格。 */
+    color:#fff; /* 文字颜色为白色，通常会配合不同背景色（如成功用绿色、错误用红色）使用，保证文字清晰可读。 */
+    font-size:.85em;  /* 文字大小略小于默认字体，作为辅助提示信息不抢占视觉焦点。 */
+    z-index:1000; /* 较高的层级值，确保提示框显示在其他元素上方，不会被页面内容遮挡。 */
+    transform:translateX(100%); /* 默认状态下，通过 X 轴平移（向右移动自身宽度的 100%）将提示框移出视口右侧，实现 “隐藏” 效果。 */
+    transition:transform .3s  /* 为 transform 属性添加过渡动画，使提示框的显示 / 隐藏过程平滑无突兀感。 */
+}
+
+.toast.show { /* 这是一个多类选择器，仅作用于同时拥有 toast 和 show 两个类的元素。结合之前定义的 .toast 基础样式，这个类专门用于触发提示框的 “显示” 状态 */
+    transform:translateX(0) /* 将提示框的 X 轴偏移量设为 0，使其从右侧滑入并完全显示在视口内（右上角位置）由于设置了过渡时间，会以动画的形式完成 */
+}
+
+.toast.success {  /* 它在 .toast 基础样式（定位、尺寸、动画等）的基础上，专门定制 “成功” 状态的视觉特征 */
+    background:#4caf50  /* 设置背景色为鲜亮的绿色，通过颜色直观传递 “操作成功” 的积极信息，与错误状态（通常用红色）、警告状态（通常用黄色）形成明确区分。 */
+}
+
+.toast.error {  /* 它在 .toast 基础样式（固定定位、尺寸、圆角、文字颜色、过渡动画等）的基础上，专门定制 “错误” 状态的视觉特征 */
+    background:#e74c3c  /* 这是经典的 “错误 / 危险色” */
+}
+
+.toast.info {
+    background:#2196f3  /* 这是经典的 “信息 / 通知色” */
+}
+
+.toast.warning {
+    background:#f39c12  /* 这是经典的 “警告 / 注意色” */
+}
+
+.modal {
+    display:none; /* 模态框默认处于隐藏状态，需要通过 JavaScript 动态修改为display: flex（或其他显示值）来触发显示。 */
+    position:fixed; /* 采用固定定位，使模态框脱离文档流，位置相对于浏览器窗口固定，不随页面滚动而移动，确保弹窗始终在视野内。 */
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+    background:rgba(0,0,0,0.5); /* 设置背景为半透明黑色（透明度 50%），作为模态框的遮罩层，既模糊遮挡底层页面内容，又突出弹窗本身，增强视觉层次感。 */
+    z-index:999;  /* 较高的层级值（999）确保模态框显示在页面其他元素之上，不会被底层内容遮挡（通常比普通元素层级高，但低于顶级提示如 Toast）。 */
+    justify-content:center; /* 让所有子元素在主轴方向上居中对齐 */
+    align-items:center;   /* 让所有子元素在交叉轴方向上居中对齐。 */
+}
+
+.modal.show {
+    display:flex  /* 将模态框的显示模式设置为 Flex 布局 */
+}
+
+.modal-content{ /* 模态框（Modal）内部的内容容器样式（.modal-content） */
+    background:#fff;  /* 内容容器背景设为纯白色，与外部 .modal 的半透明黑色遮罩形成强烈对比，使弹窗内容从遮罩中凸显出来，提升可读性和视觉焦点 */
+    padding:15px; /* 让容器内的内容（如标题、文本、按钮）与边框保持适当距离，避免内容紧贴边缘导致的拥挤感，提升排版舒适度 */
+    border-radius:4px;  /* 圆角设计，使内容容器的边角更柔和，与模态框的整体现代风格统一，避免直角带来的生硬感。 */
+    width:90%;  /* 确保在手机等小屏幕设备上，弹窗不会超出屏幕边缘，保持良好的适配性。 */
+    max-width:500px /* 避免在桌面等大屏幕设备上弹窗过宽（过宽的内容会降低阅读体验），确保内容区域始终保持在舒适的阅读宽度范围内。 */
+}
+
+.modal-header { /* 用于组织模态框顶部区域的布局（通常包含标题和关闭按钮） */
+    display:flex; /* 使头部容器内的子元素（如标题、关闭按钮）可以灵活排列，便于实现两端对齐等布局效果 */
+    justify-content:space-between;  /* 两端元素分别靠向容器的左右两端，中间自动留白。 */
+    margin-bottom:12px; /* 保持距离，避免视觉上的拥挤 */
+    padding-bottom:8px; /* 让头部内容（标题、按钮）与底部边框之间有一定空隙，提升内部排版的呼吸感 */
+    border-bottom:1px solid #eee  /* 头部底部添加一条浅灰色的细边框，作为头部与内容区域的视觉分隔线，强化模态框内部的区域划分，让结构更清晰 */
+}
+
+.modal-title {  /* 美化模态框头部的标题文字 */
+    font-size:1.1em;  /* 既保证标题在视觉上的突出性（区别于正文内容），又不会因过大而显得突兀，符合 “标题略大于正文” 的排版逻辑 */
+    color:#555  /* 标题文字颜色为深灰色，既纯黑色更柔和，避免视觉刺眼，同时比浅灰色更清晰，确保标题的可读性。这种中性调既符合现代 UI 的简约风格，又能与模态框的白色背景形成适当对比，突出标题信息。 */
+}
+
+.modal-close {  /* 定义了模态框关闭按钮的样式，用于美化和功能化模态框的关闭按钮（通常是 “×” 符号或 “关闭” 文字） */
+    background:none;  /* 移除按钮默认的背景样式（如灰色背景或系统默认按钮背景），使按钮呈现 “透明背景” 效果，更贴合现代简约的 UI 设计，避免与模态框头部的白色背景产生视觉冲突。 */
+    border:none;  /* 去除按钮默认的边框（如浏览器自带的按钮边框），进一步简化按钮外观，使其仅通过内容（如 “×” 符号）传递功能，不添加多余的视觉元素。 */
+    font-size:1.2em;  /* 按钮文字 / 符号大小设置为 1.2em，比模态框标题略大，确保关闭按钮在视觉上足够显眼，用户能快速识别并点击。 */
+    cursor:pointer; /* 明确提示这是一个可点击的交互元素，增强用户操作的引导性。 */
+    color:#999  /* 按钮文字 / 符号颜色为浅灰色，既不会过于抢眼（避免分散对标题的注意力），又能清晰可见，符合其 “辅助功能按钮” 的定位 */
+}
+
+.modal-body { /* 用于包裹核心内容的容器类（如表单、文本、列表等主要信息） */
+    margin-bottom:15px  /* 是与下方的元素保持距离，避免内容区域与操作区域紧贴在一起，形成清晰的视觉分隔，提升模态框内部布局的层次感和可读性。 */
+}
+
+.modal-footer { /* 用于布局模态框底部的操作按钮 */
+    display:flex; /* 使底部区域内的子元素（通常是按钮）能够灵活排列，便于控制按钮之间的间距和对齐方式 */
+    gap:8px;  /* 确保多个按钮（如 “取消” 和 “确认”）之间有均匀的空隙，避免拥挤在一起，提升操作区域的整洁度和可读性。 */
+    justify-content:flex-end  /* 控制 Flex 容器内子元素在主轴（默认水平方向）上的对齐方式：让所有子元素靠右对齐 */
+}
+
+.file-upload-area { /* 用于创建一个直观的 “拖放或点击上传文件” 的交互区域，常见于表单中的文件上传功能 */
+    border: 2px dashed #ccc;  /* 虚线边框是文件上传区域的经典设计，通过视觉特征（非实线）暗示这是一个 “可交互的上传区域”，区别于普通容器。 */
+    padding: 20px;  /* 为区域内的提示文字（如 “点击或拖放文件到此处”）、图标等内容预留足够空间，避免内容紧贴边框导致的拥挤感。 */
+    text-align: center; /* 区域内的文本和 inline 元素（如图标）水平居中对齐，确保提示信息在视觉上更规整，符合用户对 “上传区域” 的预期布局。 */
+    border-radius: 4px; /* 使边框边角更柔和，与整体 UI（如模态框的圆角风格）保持一致，避免直角带来的生硬感。 */
+    cursor: pointer;  /* 鼠标悬停时显示 “手型光标”，明确提示该区域是可点击的交互元素，引导用户点击触发文件选择。 */
+    transition: border-color 0.3s;  /* 为边框颜色变化添加 0.3 秒过渡动画，使状态变化（如鼠标悬停时边框变色）更平滑自然。通常会配合 :hover 伪类使用 */
+    margin-bottom: 10px;  /* 使上传区域与下方元素（如文件预览区、提交按钮）保持距离，提升整体布局的层次感 */
+}
+
+.file-upload-area:hover { /* 示当鼠标指针悬停在元素上时，应用该样式。这是一种常见的交互反馈设计，通过视觉变化告知用户 “当前元素可交互”。 */
+    border-color: #888; /* 深灰色 */
+}
+
+.file-info {  /* 主要用于显示文件上传相关的辅助信息（如文件名、大小、格式提示等） */
+    font-size: 0.9em; /* 比默认文字大小略小，明确其 “辅助信息” 的定位，避免与主要内容（如上传区域提示文字、按钮文本）争夺视觉焦点。 */
+    color: #666;  /* 比正文文字颜色更柔和，既保证可读性，又通过颜色区分强调其 “补充说明” 的性质（如上传后的文件名、格式限制提示等）。 */
+    margin-top: 8px;  /* 使文件信息区域与上方元素保持适当距离，避免信息堆叠，提升布局的呼吸感和清晰度。 */
+}
+
+.file-progress {  /* 文件上传进度条容器的基础样式，用于展示文件上传过程中的进度状态 */
+    height: 5px;  /* 用纤细的设计，既不占用过多视觉空间，又能清晰展示进度状态，符合常见进度条的紧凑设计风格 */
+    background-color: #eee; /* 作为进度条的 “底色”，当进度填充时，会被进度颜色覆盖，形成 “已完成进度” 与 “剩余进度” 的视觉对比。 */
+    border-radius: 3px; /* 与上传区域、模态框等组件的圆角风格统一，使界面元素风格协调，避免直角的生硬感。 */
+    overflow: hidden; /* 设置溢出隐藏，确保内部用于展示进度的子元素不会超出容器范围，保持进度条的整齐外观。 */
+    margin-top: 10px; /* 使进度条与上方元素保持距离，避免布局拥挤，提升信息层级的清晰度。 */
+    display: none;  /* 默认隐藏进度条容器，因为进度条仅在文件上传过程中需要展示（未上传或上传完成后通常隐藏） */
+}
+
+.file-progress-bar {  /* 定义了文件上传进度条的核心样式，用于直观展示文件上传的实时进度 */
+    height: 100%; /* 进度条高度设置为父容器的 100%，即填满父容器的 5px 高度，确保进度条在垂直方向上完全覆盖容器，形成完整的进度展示效果。 */
+    background-color: #4caf50;  /* 与之前定义的 “成功状态”颜色一致，形成视觉风格统一，同时绿色传递 “正常进度”“成功” 的积极信号，让用户感知上传过程正常。 */
+    width: 0%;  /* 初始宽度为 0%，表示上传未开始时进度条完全隐藏。实际使用时，会通过 JavaScript 根据上传进度动态修改该值（如从 0% 递增到 100%），直观反映文件上传的完成比例。 */
+    transition: width 0.3s; /* 为宽度变化添加 0.3 秒过渡动画，使进度条的宽度从一个值平滑过渡到另一个值（如从 30% 到 40%），避免进度跳变带来的突兀感，提升用户对进度变化的感知流畅度。 */
+}
+
+/* 文件元信息显示 */
+.file-meta-info { /* 定义了文件元信息展示区域的样式，用于展示文件的详细元数据（如文件大小、类型、上传时间、修改日期等），通常在文件上传完成后显示 */
+    background: #e9f5e9;  /* 低饱和度的 “成功色系”，与文件上传成功的状态形成视觉呼应，传递 “文件已处理完成” 的积极信号，同时浅色调不会过于抢眼。 */
+    padding: 8px; /* 为元信息内容（如文字、列表项）提供足够的呼吸空间，避免内容紧贴边框导致的拥挤感，提升可读性 */
+    border-radius: 3px; /* 与模态框、上传区域等组件的圆角风格统一，使界面元素风格协调，避免直角带来的生硬感。 */
+    border-left: 3px solid #2ecc71; /* 通过左侧的彩色色块色块与浅绿背景形成层次对比，突出元信息区域的边界； 深绿色与背景色同属绿色系，既协调又有区分度，强化 “成功 / 完成” 的状态暗示。 */
+    margin-top: 8px;  /* 使元信息区域与上方元素（如进度条、文件信息提示）保持距离，避免信息堆叠，清晰划分不同功能区域（上传操作区→进度展示→元信息详情） */
+    font-size: 0.9em; /* 明确其 “辅助信息” 的定位，既保证内容可读，又不抢占主要操作区域的视觉焦点 */
+}
+
+.file-meta-info.error { /* 专门用于标识 “错误状态” 的文件元信息 */
+    background: #fdecea;  /* 将背景色从基础样式的浅绿色改为浅红色。这种低饱和度的红色系背景，既与 “错误” 状态的视觉语言呼应，又不会过于刺眼，适合展示错误相关的辅助信息。 */
+    border-left-color: #e74c3c; /* 将左侧强调边框的颜色从基础样式的深绿色改为鲜红色。这个颜色与 .toast.error 中定义的错误状态主色完全一致，形成跨组件的视觉统一 —— 通过左侧醒目的红色边框，快速传递 “文件处理出错” 的状态，与成功状态的绿色边框形成鲜明对比，让用户一眼识别信息的性质。 */
+}
+
+.hidden-field { /* 定义了一个用于强制隐藏元素的类，主要用于需要彻底隐藏页面元素（如表单字段、临时内容等）的场景 */
+    display: none !important; /* 核心作用是将元素从页面布局中完全移除：元素不仅不可见，还不会占据任何空间（与 visibility: hidden 不同，后者仅隐藏元素但保留其占位空间）。
+*/
+}                           /* CSS 中的 “重要声明” 标记，用于强制提升该样式的优先级，确保它能覆盖其他可能影响该元素 display 属性的样式规则（即使其他规则的选择器权重更高）。 */
+
+/* 下载按钮样式 */
+.download-btn { /* 定义了下载按钮的样式，主要用于文件相关功能中（如下载已上传的文件），设计上突出了可交互性且保持与整体 UI 风格的一致性 */
+    margin-left: 8px; /* 使其与左侧相邻元素（如文件名、其他按钮）保持适当距离，避免元素紧贴，提升布局的呼吸感。 */
+    padding: 2px 6px; /* 小型按钮的紧凑设计，既保证按钮有足够的点击区域（符合交互体验），又不会占用过多空间，适合作为辅助性操作按钮（如在文件信息旁附加下载功能） */
+    font-size: 0.8em; /* 字体大小为 0.8em（小于默认文字大小），配合紧凑的内边距，强化 “小型辅助按钮” 的定位，避免与主要操作按钮（如 “确认”“上传”）争夺视觉焦点。 */
+    background-color: #2ecc71;  /* 背景色采用深绿色，与之前定义的 “成功状态” 元素颜色一致，形成跨组件的视觉统一，同时绿色传递 “安全、可执行” 的积极信号，引导用户点击。 */
+    color: white; /* 确保按钮文字清晰可读，即使在小字号下也能轻松识别。 */
+    border-radius: 3px; /* 与模态框、文件元信息等组件的圆角风格统一，使按钮边角更柔和，避免直角带来的生硬感。 */
+    cursor: pointer;  /* 鼠标悬停时显示 “手型光标”，明确提示这是可点击的交互元素，增强用户操作的引导性。 */
+    border: none; /* 移除按钮默认边框，使按钮外观更简洁，与绿色背景融为一体，符合现代 UI 的简约设计风格。 */
+}
+
+.download-btn:hover {
+    background-color: #27ae60;  /* 深绿色 */
+}
+
+/* 数据修复提示 */
+.data-repair-hint { /* 数据修复相关的提示信息样式，用于在数据修复过程中向用户展示提示、说明或状态信息（如修复进度、注意事项等） */
+    background: #fff3cd;  /* 背景色为浅淡黄色，属于低饱和度的 “提示色系”。这种颜色既比白色背景更醒目（能吸引用户注意），又比红色（错误）、绿色（成功）更柔和，适合传递 “需要关注但非紧急 / 错误” 的信息，符合 “数据修复提示” 的功能定位 */
+    border-left: 3px solid #ffc107; /* 深黄色 */
+    padding: 8px; /* 为提示文字（如 “正在修复损坏的数据...”）预留空间，避免内容紧贴边框导致的拥挤感，提升可读性 */
+    margin: 10px 0; /* 使提示区域在垂直方向上与上下元素（如操作按钮、数据列表）保持距离，避免信息堆叠，清晰划分功能区域。 */
+    border-radius: 3px; /* 与模态框、文件元信息、按钮等组件的圆角风格统一，使界面元素风格协调，避免直角的生硬感。 */
+    font-size: 0.9em; /* 明确其 “辅助提示” 的定位，既保证内容可读，又不抢占主要操作区域的视觉焦点。 */
+}
+
+@media (max-width:600px){ /* 响应式媒体查询，用于在屏幕宽度小于或等于 600px（通常对应手机等移动设备）时，调整页面元素的样式，确保在小屏幕上有更好的显示效果和用户体验 */
+
+    .header{
+    flex-direction:column;  /* 主轴方向设置为垂直方向（默认是水平方向）。这意味着头部内的子元素（如标题、导航项、操作按钮等）会从上到下依次排列，而非左右并排，适合需要垂直堆叠布局的头部设计（如移动端头部或紧凑布局的头部） */
+    gap:8px;  /* 避免子元素紧贴在一起，让布局更透气、层次更清晰。 */
+    padding:10px  /* 使头部内容（如文字、按钮）与容器边缘保持一定距离，避免内容贴边导致的拥挤感，同时提升视觉上的舒适感。 */
+    }
+    
+    .header-actions{  /* 头部操作区的布局样式，主要用于控制头部区域中操作按钮 / 功能项的排列方式 */
+    width:100%; /* 使头部操作区的宽度占满其父容器的全部宽度，确保操作区在水平方向上充分利用可用空间，避免因宽度不足导致内部元素（如按钮、图标）挤压或换行 */
+    justify-content:center  /* 该属性控制其内部子元素（如 “登录”“设置” 按钮、菜单图标等）在水平方向（主轴）上居中对齐 */
+    }
+    
+    .form-actions{  /* 主要用于控制表单底部操作按钮（如 “提交”“取消”“重置” 等）的排列行为 */
+    flex-wrap:wrap  /* 允许子元素（按钮）在容器宽度不足时自动换行。 */
+    }
+    
+    .form-actions .btn{ /* 作用于所有包含在 .form-actions 容器内、类名为 btn 的按钮（即表单底部的 “提交”“取消” 等操作按钮） */
+    flex:1  /* 这是 Flex 布局的核心属性简写，等价于 flex: 1 1 0%，包含三个子属性 */
+    }         /* flex-grow: 1：按钮可以根据父容器的剩余空间 “扩展”，扩展比例为 1（所有按钮的扩展比例相同） */
+            /* flex-shrink: 1：当父容器空间不足时，按钮可以 “收缩”，收缩比例为 1（所有按钮按相同比例收缩） */
+            /* flex-basis: 0%：按钮的初始宽度基准为 0，确保分配空间时完全基于 flex-grow 的比例，而非按钮自身内容的宽度 */
+            
+    .modal-content{
+    width:95% /* 设置该容器的宽度为其父元素（通常是模态框的外层容器，如 .modal 或直接相对于 <body>）宽度的 95%。
+这种百分比宽度的设计核心是响应式适配 */
+    }
+    
+    textarea.form-control{
+    min-height:100px  /* 最小高度为 100 像素 */
+    }
+
+    .move-mode-bar {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+    }
+
+    .move-mode-actions {
+    width: 100%;
+    justify-content: flex-start;
+    }
+    
+}
+
+/* ===== 节点迁移功能样式 ===== */
+
+.btn-move { /* 移动按钮：用于触发节点迁移模式 */
+    background: #3498db;
+    color: #fff;
+}
+
+.btn-move:hover {
+    background: #2980b9;
+}
+
+.move-mode-bar { /* 迁移模式提示栏：固定在页面顶部，显示正在迁移的节点信息和操作按钮 */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #2c3e50;
+    color: #fff;
+    padding: 10px 15px;
+    gap: 10px;
+    animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.move-mode-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.9em;
+}
+
+.move-mode-actions {
+    display: flex;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+.btn-move-here { /* 移动到此按钮：确认将节点移到当前位置 */
+    background: #2ecc71;
+    color: #fff;
+    padding: 6px 14px;
+    font-size: 0.9em;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.btn-move-here:hover {
+    background: #27ae60;
+}
+
+.btn-cancel-move { /* 取消迁移按钮 */
+    background: transparent;
+    color: #ccc;
+    padding: 6px 10px;
+    font-size: 0.9em;
+    border: 1px solid #666;
+    border-radius: 3px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.btn-cancel-move:hover {
+    background: rgba(255,255,255,0.1);
+    color: #fff;
+}
\ No newline at end of file
diff --git a/dnfs/static/js/script.js b/dnfs/static/js/script.js
new file mode 100644
index 0000000..b899e32
--- /dev/null
+++ b/dnfs/static/js/script.js
@@ -0,0 +1,1039 @@
+const API = "";
+let currentPid = 0, parentStack = [], editingId = null, deletingId = null;
+let currentFileInfo = { // 存储当前文件信息
+    name: "",
+    size: 0,
+    base64: "",
+    uploadTime: "",
+    metadataError: false
+};
+/* 缓存所有节点的文件信息，方便直接下载
+    * 20250907(qing): 文件多了会卡 */
+let nodeFileCache = {};
+let lastLoadedNodes = []; // 缓存最近加载的节点列表，用于移动模式下重新渲染
+let movingNode = null; // 正在迁移的节点 {id, title, content}
+
+// 缓存DOM元素引用，不用每次都去找
+const domElements = {
+    deleteModal: null,
+    deleteMessage: null,
+    deleteNodeTitle: null,
+    deleteFileHint: null,
+    toastContainer: null,
+    fileInfo: null,
+    fileMetaContainer: null,
+    fileMetaInfo: null,
+    metaFilename: null,
+    metaFilesize: null,
+    metaUploadtime: null,
+    fileProgress: null,
+    fileProgressBar: null,
+    fileUpload: null,
+    hiddenBase64: null,
+    fileMetadata: null,
+    downloadSection: null,
+    dataRepairHint: null
+};
+
+// 初始化DOM元素引用
+function initDomElements() {
+    domElements.deleteModal = document.getElementById("delete-modal");
+    domElements.deleteMessage = document.getElementById("delete-message");
+    domElements.deleteNodeTitle = document.getElementById("delete-node-title-container");
+    domElements.deleteFileHint = document.getElementById("delete-file-hint");
+    domElements.toastContainer = document.getElementById("toast-container");
+    domElements.fileInfo = document.getElementById("file-info");
+    domElements.fileMetaContainer = document.getElementById("file-meta-container");
+    domElements.fileMetaInfo = document.getElementById("file-meta-info");
+    domElements.metaFilename = document.getElementById("meta-filename");
+    domElements.metaFilesize = document.getElementById("meta-filesize");
+    domElements.metaUploadtime = document.getElementById("meta-uploadtime");
+    domElements.fileProgress = document.querySelector(".file-progress");
+    domElements.fileProgressBar = document.getElementById("file-progress-bar");
+    domElements.fileUpload = document.getElementById("file-upload");
+    domElements.hiddenBase64 = document.getElementById("hidden-base64");
+    domElements.fileMetadata = document.getElementById("file-metadata");
+    domElements.downloadSection = document.getElementById("download-section");
+    domElements.dataRepairHint = document.getElementById("data-repair-hint");
+    
+    // 验证关键元素是否存在
+    const missingElements = [];
+    for (const [key, element] of Object.entries(domElements)) {
+    if (!element) {
+        missingElements.push(key);
+    }
+    }
+    
+    if (missingElements.length > 0) {
+    console.error("关键DOM元素缺失:", missingElements);
+    alert("系统初始化失败，关键组件缺失，请刷新页面重试。");
+    }
+}
+
+// 提示消息
+function showToast(msg, type = 'info') {
+    if (!domElements.toastContainer) {
+    console.error("toast容器未找到，无法显示提示");
+    return;
+    }
+    
+    const t = document.createElement('div');
+    t.className = `toast ${type} show`;
+    t.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'exclamation-triangle' : type === 'warning' ? 'exclamation-circle' : 'info-circle'}"></i> ${msg}`;
+    domElements.toastContainer.appendChild(t);
+    setTimeout(() => t.remove(), 3000); // 3秒后删除
+}
+
+// HTML转义字符还原
+// 我在编辑节点时，转义符号没有能够被替换
+function htmlUnescape(str) {
+    if (!str || typeof str !== 'string') {
+    return str;
+    }
+    return str
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#039;/g, "'")
+    .replace(/&#x60;/g, '`');
+}
+//-----
+// 安全的JSON解析函数 - 新增HTML转义还原处理
+function safeJsonParse(jsonString, defaultValue = {}) {
+    try {
+    // 先进行HTML转义还原
+    const unescapedString = htmlUnescape(jsonString);
+    
+    // 再进行基本的格式检查
+    if (!unescapedString || typeof unescapedString !== 'string' || 
+        unescapedString.trim() === '' || 
+        !unescapedString.startsWith('{') || !unescapedString.endsWith('}')) {
+        console.error('无效的JSON格式：不是有效的对象字符串');
+        return defaultValue;
+    }
+    
+    return JSON.parse(unescapedString);
+    } catch (e) {
+    console.error('JSON解析失败:', e);
+    console.error('问题数据:', jsonString);
+    
+    // 尝试提取可能有用的信息
+    try {
+        // 先进行HTML转义还原，再清理可能导致错误的字符
+        const cleanedString = htmlUnescape(jsonString).replace(/[^\x20-\x7E]/g, '');
+        if (cleanedString !== jsonString) {
+        console.log('尝试清理无效字符后重新解析');
+        return JSON.parse(cleanedString);
+        }
+    } catch (cleanError) {
+        console.error('清理后仍无法解析:', cleanError);
+    }
+    
+    return defaultValue;
+    }
+}
+
+// 安全的JSON字符串化函数
+function safeJsonStringify(data) {
+    try {
+    return JSON.stringify(data);
+    } catch (e) {
+    console.error('JSON序列化失败:', e);
+    // 尝试使用更宽松的序列化方式
+    try {
+        return JSON.stringify(data, (key, value) => {
+        if (typeof value === 'bigint') {
+            return value.toString();
+        }
+        return value;
+        });
+    } catch (fallbackError) {
+        console.error('备用序列化方式也失败:', fallbackError);
+        return '{}'; // 返回空对象作为最后的 fallback
+    }
+    }
+}
+
+// API请求
+async function request(endpoint, data = {}) {
+    try {
+    const res = await fetch(API + endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data)
+    });
+    return res.ok ? await res.json() : Promise.reject(res.status);
+    } catch (e) {
+    showToast(`请求失败: ${e}`, 'error');
+    throw e;
+    }
+}
+
+// 检查节点是否有子节点
+async function hasChildren(nodeId) {
+    try {
+    const children = await request("/get_notes", { pid: nodeId });
+    return Array.isArray(children) && children.length > 0;
+    } catch (e) {
+    showToast("检查子节点失败", 'error');
+    return false;
+    }
+}
+
+// 解析节点内容，分离说明文本和文件信息
+function parseNodeContent(content) {
+    try {
+    // 检查内容是否包含文件信息标记
+    if (content.startsWith('FILE_METADATA:')) {
+        const parts = content.split('\n---\n');
+        if (parts.length >= 3) {
+        const metaStr = parts[1] || '{}'; // 确保有默认值
+        const base64 = parts[2] || '';
+        const textContent = parts.slice(3).join('\n---\n');
+        
+        // 使用安全的JSON解析函数，已包含HTML转义还原
+        const meta = safeJsonParse(metaStr, {
+            name: '未知文件',
+            size: 0,
+            uploadTime: '未知时间'
+        });
+        
+        // 检查解析结果是否有效
+        const isValidMeta = meta && typeof meta === 'object' && 
+                            typeof meta.name === 'string' && 
+                            !isNaN(meta.size);
+                            
+        if (!isValidMeta) {
+            console.error('解析的元数据无效，使用默认值');
+            return {
+            hasFile: true,
+            text: textContent,
+            meta: {
+                name: '损坏的文件',
+                size: 0,
+                uploadTime: '未知时间'
+            },
+            base64: base64,
+            metadataError: true // 标记元数据解析错误
+            };
+        }
+        
+        return {
+            hasFile: true,
+            text: textContent,
+            meta: meta,
+            base64: base64,
+            metadataError: false
+        };
+        }
+    }
+    
+    // 普通文本内容
+    return {
+        hasFile: false,
+        text: content,
+        meta: null,
+        base64: '',
+        metadataError: false
+    };
+    } catch (e) {
+    console.error('解析节点内容失败:', e);
+    showToast('节点内容解析失败，可能是格式错误', 'error');
+    return {
+        hasFile: false,
+        text: content || '解析失败的内容',
+        meta: null,
+        base64: '',
+        metadataError: false
+    };
+    }
+}
+
+// 渲染节点列表（不在页面显示Base64内容）
+function renderNodes(nodes) {
+    const container = document.getElementById("node-list");
+    if (!container) {
+    console.error("节点列表容器未找到");
+    return;
+    }
+    
+    // 缓存节点列表，用于移动模式下重新渲染
+    lastLoadedNodes = nodes;
+    
+    // 清空缓存
+    nodeFileCache = {};
+    
+    // 移动模式下过滤掉正在迁移的节点
+    if (movingNode) {
+    nodes = nodes.filter(n => n.id !== movingNode.id);
+    }
+    
+    if (!nodes || !nodes.length) {
+    container.innerHTML = `<div class="empty-state"><i class="fas fa-folder-open"></i><p>目录为空</p><p>使用上方表单添加新节点</p></div>`;
+    return;
+    }
+
+    container.innerHTML = nodes.map(n => {
+    // 解析节点内容，分离文本和文件信息
+    const parsed = parseNodeContent(n.content);
+    const safeTitle = encodeURIComponent(escapeHtml(n.title));
+    const safeContent = encodeURIComponent(escapeHtml(n.content));
+    const displayTitle = escapeHtml(n.title);
+    const deleteBtnId = `delete-btn-${n.id}`;
+    
+    // 缓存文件信息，用于直接下载
+    if (parsed.hasFile) {
+        nodeFileCache[n.id] = {
+        name: parsed.meta.name,
+        base64: parsed.base64,
+        metadataError: parsed.metadataError
+        };
+    }
+    
+    // 节点内容显示文本说明，不显示Base64
+    const contentDisplay = parsed.text 
+        ? `<div class="node-content">${escapeHtml(parsed.text)}</div>`
+        : '';
+        
+    // 文件错误提示
+    const fileErrorIndicator = parsed.metadataError 
+        ? `<div style="color: #e74c3c; font-size: 0.8em; margin-top: 5px;">
+            <i class="fas fa-exclamation-circle"></i> 文件信息损坏，建议重新上传
+            </div>`
+        : '';
+        
+    // 文件指示器和下载按钮
+    const fileIndicator = parsed.hasFile 
+        ? `<div class="file-indicator">
+            <i class="fas fa-file"></i> 包含文件: ${escapeHtml(parsed.meta.name)} (${formatFileSize(parsed.meta.size)})
+            <button class="download-btn" onclick="decodeAndDownload(${n.id}, '${encodeURIComponent(escapeHtml(parsed.meta.name))}')">
+                <i class="fas fa-download"></i> 下载
+            </button>
+            </div>
+            ${fileErrorIndicator}`
+        : '';
+    
+    return `
+        <div class="node ${parsed.hasFile ? 'has-file' : ''}">
+        <div class="node-title" onclick="enterNode(${n.id})">
+            <i class="fas ${parsed.hasFile ? 'fa-file' : 'fa-folder'}"></i> ${displayTitle}
+        </div>
+        ${contentDisplay}
+        ${fileIndicator}
+        <div class="node-actions">
+            <button onclick="editNode(${n.id}, '${safeTitle}', '${safeContent}')" class="btn btn-warning"><i class="fas fa-edit"></i> 编辑</button>
+            ${!movingNode ? `<button onclick="startMoveNode(${n.id}, '${displayTitle}', '${safeContent}')" class="btn btn-move"><i class="fas fa-arrows-alt"></i> 移动</button>` : ''}
+            <button id="${deleteBtnId}" onclick="checkAndShowDeleteModal(event, ${n.id}, '${encodeURIComponent(escapeHtml(n.title))}', ${parsed.hasFile})" class="btn btn-danger"><i class="fas fa-trash"></i> 删除</button>
+        </div>
+        </div>
+    `;
+    }).join('');
+}
+
+// HTML转义
+function escapeHtml(unsafe) {
+    if (!unsafe) return '';
+    return unsafe
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;")
+    .replace(/`/g, "&#x60;");
+}
+
+// 加载节点
+async function load(pid = 0) {
+    try {
+    const numericPid = Number(pid);
+    if (isNaN(numericPid)) {
+        throw new Error("无效的节点ID");
+    }
+    
+    const nodes = await request("/get_notes", { pid: numericPid });
+    if (Array.isArray(nodes)) {
+        renderNodes(nodes);
+    } else {
+        throw new Error("返回数据格式不正确");
+    }
+    } catch (e) {
+    showToast(`加载失败: ${e.message}`, 'error');
+    console.error("加载节点错误:", e);
+    }
+}
+
+// 进入节点
+function enterNode(id) {
+    const numericId = Number(id);
+    if (isNaN(numericId)) {
+    showToast("无效的节点ID", 'error');
+    return;
+    }
+    
+    parentStack.push(currentPid);
+    currentPid = numericId;
+    resetForm();
+    load(currentPid);
+    showToast(`进入节点 ${numericId}`, 'info');
+}
+
+// 返回上级
+function goBack() {
+    if (parentStack.length) {
+    currentPid = parentStack.pop();
+    resetForm();
+    load(currentPid);
+    showToast('返回上级', 'info');
+    } else {
+    showToast('已是顶级目录', 'info');
+    }
+}
+
+// 重置表单
+function resetForm() {
+    const editIdEl = document.getElementById("edit-id");
+    const nodeTitleEl = document.getElementById("node-title");
+    const nodeContentEl = document.getElementById("node-content");
+    const formModeTextEl = document.getElementById("form-mode-text");
+    
+    if (editIdEl && nodeTitleEl && nodeContentEl && formModeTextEl) {
+    editIdEl.value = "";
+    nodeTitleEl.value = "";
+    nodeContentEl.value = "";
+    formModeTextEl.textContent = "新增节点";
+    nodeTitleEl.focus();
+    editingId = null;
+    
+    // 重置文件相关字段
+    currentFileInfo = { name: "", size: 0, base64: "", uploadTime: "", metadataError: false };
+    
+    if (domElements.fileUpload) domElements.fileUpload.value = "";
+    if (domElements.fileInfo) domElements.fileInfo.textContent = "未选择文件";
+    if (domElements.fileMetaContainer) domElements.fileMetaContainer.style.display = "none";
+    if (domElements.fileMetaInfo) {
+        domElements.fileMetaInfo.className = "file-meta-info"; // 重置样式
+    }
+    if (domElements.dataRepairHint) domElements.dataRepairHint.style.display = "none";
+    if (domElements.fileProgress) domElements.fileProgress.style.display = "none";
+    if (domElements.fileProgressBar) domElements.fileProgressBar.style.width = "0%";
+    if (domElements.hiddenBase64) domElements.hiddenBase64.value = "";
+    if (domElements.fileMetadata) domElements.fileMetadata.value = "";
+    if (domElements.downloadSection) domElements.downloadSection.style.display = "none";
+    } else {
+    console.error("表单元素缺失，无法重置表单");
+    showToast("表单操作失败", 'error');
+    }
+}
+
+// 编辑节点 - 确保不显示任何编码内容
+function editNode(id, title, content) {
+    try {
+    const numericId = Number(id);
+    if (isNaN(numericId)) {
+        showToast("无效的节点ID", 'error');
+        return;
+    }
+    
+    // 先解码URI组件，再还原HTML转义字符
+    const decodedTitle = htmlUnescape(decodeURIComponent(title));
+    const decodedContent = htmlUnescape(decodeURIComponent(content));
+    
+    // 解析内容，提取文本说明和文件信息
+    const parsed = parseNodeContent(decodedContent);
+    
+    const editIdEl = document.getElementById("edit-id");
+    const nodeTitleEl = document.getElementById("node-title");
+    const nodeContentEl = document.getElementById("node-content");
+    const formModeTextEl = document.getElementById("form-mode-text");
+    
+    if (editIdEl && nodeTitleEl && nodeContentEl && formModeTextEl) {
+        editingId = numericId;
+        editIdEl.value = numericId;
+        nodeTitleEl.value = decodedTitle;
+        nodeContentEl.value = parsed.text; // 只显示文本说明
+        formModeTextEl.textContent = "编辑节点";
+        nodeTitleEl.focus();
+        
+        // 如果元数据解析有错误，给予用户提示并标记样式
+        if (parsed.metadataError) {
+        showToast('注意：此节点的文件信息可能已损坏，建议重新上传文件', 'warning');
+        if (domElements.fileMetaInfo) {
+            domElements.fileMetaInfo.className = "file-meta-info error";
+        }
+        // 显示数据修复提示
+        if (domElements.dataRepairHint) {
+            domElements.dataRepairHint.style.display = "block";
+        }
+        } else {
+        if (domElements.fileMetaInfo) {
+            domElements.fileMetaInfo.className = "file-meta-info";
+        }
+        if (domElements.dataRepairHint) {
+            domElements.dataRepairHint.style.display = "none";
+        }
+        }
+        
+        // 如果有文件信息，加载和显示文件元数据
+        if (parsed.hasFile) {
+        currentFileInfo = {
+            name: parsed.meta.name,
+            size: parsed.meta.size,
+            base64: parsed.base64,  // 后台使用但不显示
+            uploadTime: parsed.meta.uploadTime,
+            metadataError: parsed.metadataError
+        };
+        
+        // 存储Base64但不显示
+        if (domElements.hiddenBase64) domElements.hiddenBase64.value = parsed.base64;
+        if (domElements.fileMetadata) {
+            // 使用安全的JSON序列化
+            domElements.fileMetadata.value = safeJsonStringify(parsed.meta);
+        }
+        
+        // 显示文件元信息
+        if (domElements.fileMetaContainer) domElements.fileMetaContainer.style.display = "block";
+        if (domElements.metaFilename) domElements.metaFilename.textContent = parsed.meta.name;
+        if (domElements.metaFilesize) domElements.metaFilesize.textContent = formatFileSize(parsed.meta.size);
+        if (domElements.metaUploadtime) domElements.metaUploadtime.textContent = parsed.meta.uploadTime;
+        if (domElements.fileInfo) domElements.fileInfo.textContent = `已选择: ${parsed.meta.name}`;
+        if (domElements.downloadSection) domElements.downloadSection.style.display = "block";
+        }
+        
+        const formSection = document.querySelector('.form-section');
+        if (formSection) {
+        formSection.scrollIntoView({ behavior: 'smooth' });
+        }
+    } else {
+        throw new Error("表单元素缺失");
+    }
+    } catch (e) {
+    showToast("编辑节点失败", 'error');
+    console.error("编辑节点错误:", e);
+    }
+}
+
+// 保存节点（编码内容完全在后台处理）
+async function saveNode() {
+    try {
+    const nodeTitleEl = document.getElementById("node-title");
+    const nodeContentEl = document.getElementById("node-content");
+    const editIdEl = document.getElementById("edit-id");
+    
+    if (!nodeTitleEl || !nodeContentEl || !editIdEl) {
+        throw new Error("表单元素缺失");
+    }
+    
+    const title = nodeTitleEl.value.trim();
+    const textContent = nodeContentEl.value.trim();
+    const nodeId = editIdEl.value;
+    
+    if (!title) {
+        showToast("标题不能为空", 'error');
+        return;
+    }
+
+    // 构建特殊格式的内容，编码内容完全在后台处理
+    let content = '';
+    const hasFile = !!domElements.hiddenBase64?.value.trim();
+    
+    if (hasFile) {
+        // 有文件时，使用特殊格式存储，包含文件元数据和Base64（用户不可见）
+        // 使用安全的JSON序列化
+        const safeMetadata = safeJsonStringify(JSON.parse(domElements.fileMetadata.value || '{}'));
+        content = `FILE_METADATA:\n---\n${safeMetadata}\n---\n${domElements.hiddenBase64.value}\n---\n${textContent}`;
+    } else {
+        // 没有文件时，直接存储文本内容
+        content = textContent;
+    }
+
+    if (nodeId) {
+        const numericId = Number(nodeId);
+        if (isNaN(numericId)) {
+        throw new Error("无效的节点ID");
+        }
+        
+        await request("/update_note", { 
+        id: numericId, 
+        pid: currentPid, 
+        title, 
+        content 
+        });
+        showToast('节点已更新', 'success');
+    } else {
+        await request("/add_note", { 
+        pid: currentPid, 
+        title, 
+        content 
+        });
+        showToast('节点已添加', 'success');
+    }
+    
+    resetForm();
+    load(currentPid);
+    } catch (e) {
+    showToast(`${nodeId ? '更新' : '添加'}失败: ${e.message}`, 'error');
+    console.error("保存节点错误:", e);
+    }
+}
+
+// 检查并显示删除模态框
+async function checkAndShowDeleteModal(event, id, title, hasFile) {
+    // 防止事件冒泡和默认行为
+    if (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    }
+
+    // 解码 encodeURIComponent(escapeHtml(...)) 双重编码的标题
+    try {
+    title = htmlUnescape(decodeURIComponent(title));
+    } catch (e) {
+    console.error("标题解码失败:", e);
+    }
+
+    // 显示文件提示
+    if (domElements.deleteFileHint) {
+    domElements.deleteFileHint.style.display = hasFile ? "block" : "none";
+    }
+    
+    // 验证必要参数
+    if (!title || title.trim() === "") {
+    showToast("删除失败：节点信息不完整", 'error');
+    console.error("删除失败：标题为空或未定义");
+    resetDeleteButton(event, id);
+    return;
+    }
+    
+    const numericId = Number(id);
+    if (isNaN(numericId)) {
+    showToast("无效的节点ID", 'error');
+    resetDeleteButton(event, id);
+    return;
+    }
+    
+    // 检查DOM元素是否已初始化
+    if (!domElements.deleteModal) {
+    initDomElements(); // 重新尝试初始化
+    }
+    
+    // 再次检查关键元素
+    if (!domElements.deleteModal || !domElements.deleteMessage || !domElements.deleteNodeTitle) {
+    showToast("删除功能初始化失败，请刷新页面重试", 'error');
+    console.error("删除确认框关键元素缺失");
+    resetDeleteButton(event, id);
+    return;
+    }
+    
+    // 获取并禁用删除按钮
+    let deleteButton = getDeleteButton(event, numericId);
+    if (deleteButton) {
+    deleteButton.disabled = true;
+    deleteButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 检查中';
+    }
+    
+    try {
+    // 检查是否有子节点
+    const childrenExist = await hasChildren(numericId);
+    
+    if (childrenExist) {
+        // 有子节点，不允许删除
+        showToast("该节点包含子节点，无法删除", 'error');
+    } else {
+        // 没有子节点，可以删除，显示确认框
+        deletingId = numericId;
+        domElements.deleteNodeTitle.textContent = title;
+        domElements.deleteMessage.textContent = "确定删除以下节点吗？";
+        domElements.deleteModal.classList.add("show");
+    }
+    } catch (e) {
+    showToast(`删除操作失败: ${e.message}`, 'error');
+    console.error("删除检查错误:", e);
+    } finally {
+    // 恢复按钮状态
+    resetDeleteButton(event, numericId);
+    }
+}
+
+// 辅助函数：获取删除按钮
+function getDeleteButton(event, nodeId) {
+    if (event && event.currentTarget) {
+    return event.currentTarget;
+    }
+    return document.getElementById(`delete-btn-${nodeId}`);
+}
+
+// 辅助函数：重置删除按钮状态
+function resetDeleteButton(event, nodeId) {
+    const deleteButton = getDeleteButton(event, nodeId);
+    if (deleteButton && typeof deleteButton.disabled !== 'undefined') {
+    deleteButton.disabled = false;
+    deleteButton.innerHTML = '<i class="fas fa-trash"></i> 删除';
+    }
+}
+
+// 确认删除
+async function confirmDelete() {
+    if (deletingId === null) return;
+    
+    // 确保模态框元素存在
+    if (!domElements.deleteModal) {
+    showToast("删除功能异常，请刷新页面重试", 'error');
+    return;
+    }
+    
+    try {
+    await request("/delete_note", { id: deletingId });
+    domElements.deleteModal.classList.remove("show");
+    resetForm();
+    load(currentPid);
+    showToast('节点已删除', 'success');
+    } catch (e) {
+    showToast('删除失败', 'error');
+    }
+}
+
+// 关闭删除模态框
+function closeDeleteModal() {
+    if (domElements.deleteModal) {
+    domElements.deleteModal.classList.remove("show");
+    }
+}
+
+// ===== 节点迁移功能 =====
+
+// 开始迁移模式：记录节点信息，显示迁移栏
+function startMoveNode(id, title, content) {
+    // content 经过 encodeURIComponent(escapeHtml()) 双重编码，需还原
+    const decodedContent = htmlUnescape(decodeURIComponent(content));
+    movingNode = { id: id, title: title, content: decodedContent };
+    const moveBar = document.getElementById('move-mode-bar');
+    const moveTitle = document.getElementById('moving-node-title');
+    if (moveBar && moveTitle) {
+    moveTitle.textContent = title;
+    moveBar.style.display = 'flex';
+    }
+    // 重新渲染当前节点列表（隐藏被迁移的节点，其余节点去掉移动按钮）
+    renderNodes(lastLoadedNodes);
+    showToast(`已选择节点「${title}」，请导航到目标位置后点击「移动到此」`, 'info');
+}
+
+// 确认移动：将节点移到当前目录
+async function confirmMoveHere() {
+    if (!movingNode) return;
+    
+    try {
+    // 防止移入自身
+    if (movingNode.id === currentPid) {
+        showToast('不能将节点移到自身内部', 'error');
+        return;
+    }
+    
+    // 后端 update_note 要求 title 和 content 非空，保留原始内容
+    const title = movingNode.title;
+    let content = movingNode.content;
+    if (!content) content = ' '; // 空内容时使用空格占位
+    
+    await request("/update_note", {
+        id: movingNode.id,
+        pid: currentPid,
+        title: title,
+        content: content
+    });
+    
+    showToast(`节点「${title}」已移动到当前位置`, 'success');
+    cancelMove();
+    load(currentPid);
+    } catch (e) {
+    showToast(`移动失败: ${e.message || e}`, 'error');
+    console.error("移动节点错误:", e);
+    }
+}
+
+// 取消迁移模式
+function cancelMove() {
+    movingNode = null;
+    const moveBar = document.getElementById('move-mode-bar');
+    if (moveBar) moveBar.style.display = 'none';
+    renderNodes(lastLoadedNodes);
+}
+
+// 处理文件上传并转换为Base64（完全在后台处理，不显示编码）
+function handleFileUpload(files) {
+    if (!files || files.length === 0) return;
+    
+    const file = files[0];
+    currentFileInfo.name = file.name;
+    currentFileInfo.size = file.size;
+    currentFileInfo.uploadTime = new Date().toLocaleString();
+    currentFileInfo.metadataError = false;
+    
+    // 更新文件信息显示
+    if (domElements.fileInfo) {
+    domElements.fileInfo.textContent = `正在处理: ${file.name} (${formatFileSize(file.size)})`;
+    }
+    
+    // 隐藏修复提示
+    if (domElements.dataRepairHint) {
+    domElements.dataRepairHint.style.display = "none";
+    }
+    
+    // 显示进度条
+    if (domElements.fileProgress) {
+    domElements.fileProgress.style.display = "block";
+    }
+    if (domElements.fileProgressBar) {
+    domElements.fileProgressBar.style.width = "0%";
+    }
+    
+    const reader = new FileReader();
+    
+    // 进度更新
+    reader.onprogress = function(e) {
+    if (e.lengthComputable && domElements.fileProgressBar) {
+        const percent = (e.loaded / e.total) * 100;
+        domElements.fileProgressBar.style.width = percent + "%";
+    }
+    };
+    
+    // 读取完成（编码在后台处理，不向用户展示）
+    reader.onload = function(e) {
+    try {
+        // 提取Base64数据部分（完全在后台处理）
+        const base64String = e.target.result.split(',')[1];
+        currentFileInfo.base64 = base64String;
+        
+        // 将Base64字符串放入隐藏字段（用户不可见）
+        if (domElements.hiddenBase64) {
+        domElements.hiddenBase64.value = base64String;
+        }
+        
+        // 保存文件元数据，使用安全的JSON序列化
+        const metadata = {
+        name: currentFileInfo.name,
+        size: currentFileInfo.size,
+        uploadTime: currentFileInfo.uploadTime
+        };
+        
+        if (domElements.fileMetadata) {
+        domElements.fileMetadata.value = safeJsonStringify(metadata);
+        }
+        
+        // 更新标题（如果为空）
+        const nodeTitleEl = document.getElementById("node-title");
+        if (nodeTitleEl && !nodeTitleEl.value.trim()) {
+        nodeTitleEl.value = file.name;
+        }
+        
+        // 重置错误样式
+        if (domElements.fileMetaInfo) {
+        domElements.fileMetaInfo.className = "file-meta-info";
+        }
+        
+        // 只显示文件元信息，不显示编码
+        if (domElements.fileMetaContainer) domElements.fileMetaContainer.style.display = "block";
+        if (domElements.metaFilename) domElements.metaFilename.textContent = currentFileInfo.name;
+        if (domElements.metaFilesize) domElements.metaFilesize.textContent = formatFileSize(currentFileInfo.size);
+        if (domElements.metaUploadtime) domElements.metaUploadtime.textContent = currentFileInfo.uploadTime;
+        
+        // 显示下载区域
+        if (domElements.downloadSection) domElements.downloadSection.style.display = "block";
+        
+        // 更新状态信息
+        if (domElements.fileInfo) {
+        domElements.fileInfo.textContent = `已完成: ${file.name} 已上传`;
+        }
+        
+        showToast(`文件 "${file.name}" 已上传`, 'success');
+    } catch (error) {
+        showToast(`文件处理失败: ${error.message}`, 'error');
+        console.error("文件处理错误:", error);
+    }
+    };
+    
+    // 读取失败
+    reader.onerror = function() {
+    showToast("文件读取失败，请重试", 'error');
+    if (domElements.fileInfo) {
+        domElements.fileInfo.textContent = `读取失败: ${file.name}`;
+    }
+    };
+    
+    // 读取文件并转换为DataURL（包含Base64，完全在后台处理）
+    reader.readAsDataURL(file);
+}
+
+// 移除已上传的文件
+function removeFile() {
+    currentFileInfo = { name: "", size: 0, base64: "", uploadTime: "", metadataError: false };
+    
+    if (domElements.fileUpload) domElements.fileUpload.value = "";
+    if (domElements.fileInfo) domElements.fileInfo.textContent = "未选择文件";
+    if (domElements.fileMetaContainer) domElements.fileMetaContainer.style.display = "none";
+    if (domElements.fileMetaInfo) {
+    domElements.fileMetaInfo.className = "file-meta-info"; // 重置样式
+    }
+    if (domElements.dataRepairHint) domElements.dataRepairHint.style.display = "none";
+    if (domElements.fileProgress) domElements.fileProgress.style.display = "none";
+    if (domElements.fileProgressBar) domElements.fileProgressBar.style.width = "0%";
+    if (domElements.hiddenBase64) domElements.hiddenBase64.value = "";
+    if (domElements.fileMetadata) domElements.fileMetadata.value = "";
+    if (domElements.downloadSection) domElements.downloadSection.style.display = "none";
+    
+    showToast("文件已移除", 'info');
+}
+
+// 将Base64内容解码并下载为文件（完全在后台处理解码）
+function decodeAndDownload(nodeId, fileName, isEditing = false) {
+    let base64String, name, metadataError = false;
+    
+    // 判断是从列表下载还是编辑模式下载
+    if (isEditing) {
+    // 编辑模式，使用当前表单中的文件数据（后台处理）
+    base64String = domElements.hiddenBase64?.value.trim();
+    name = currentFileInfo.name;
+    metadataError = currentFileInfo.metadataError;
+    } else if (nodeId !== null && nodeId !== undefined) {
+    // 列表模式，使用缓存的文件数据（后台处理）
+    const fileData = nodeFileCache[nodeId];
+    if (!fileData) {
+        showToast("文件数据不存在或已过期", 'error');
+        return;
+    }
+    base64String = fileData.base64;
+    name = (fileName ? htmlUnescape(decodeURIComponent(fileName)) : null) || fileData.name;
+    metadataError = fileData.metadataError;
+    } else {
+    showToast("无法确定下载来源", 'error');
+    return;
+    }
+    
+    if (!base64String) {
+    showToast("没有可解码的文件数据", 'error');
+    return;
+    }
+    
+    if (!name) {
+    showToast("文件信息缺失，无法下载", 'error');
+    return;
+    }
+    
+    // 如果元数据有错误，提前警告用户
+    if (metadataError) {
+    if (!confirm('此文件的元数据可能已损坏，下载的文件可能无法正常使用。是否继续？')) {
+        return;
+    }
+    }
+    
+    try {
+    // 检查是否是有效的Base64（后台处理）
+    if (!isBase64(base64String)) {
+        throw new Error("文件数据损坏，无法下载");
+    }
+    
+    // 解码Base64（完全在后台处理，用户不可见）
+    const byteCharacters = atob(base64String);
+    const byteNumbers = new Array(byteCharacters.length);
+    
+    for (let i = 0; i < byteCharacters.length; i++) {
+        byteNumbers[i] = byteCharacters.charCodeAt(i);
+    }
+    
+    const byteArray = new Uint8Array(byteNumbers);
+    const blob = new Blob([byteArray], { type: 'application/octet-stream' });
+    
+    // 创建下载链接
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = name;
+    document.body.appendChild(a);
+    a.click();
+    
+    // 清理
+    setTimeout(() => {
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }, 0);
+    
+    showToast(`文件 "${name}" 已下载`, 'success');
+    } catch (error) {
+    showToast(`下载失败: ${error.message}`, 'error');
+    console.error("文件下载错误:", error);
+    }
+}
+
+// 检查字符串是否为有效的Base64（后台处理）
+function isBase64(str) {
+    try {
+    return btoa(atob(str)) === str;
+    } catch (err) {
+    return false;
+    }
+}
+
+// 格式化文件大小显示
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+// 添加拖拽文件支持
+function initDragAndDrop() {
+    const uploadArea = document.querySelector('.file-upload-area');
+    if (!uploadArea) return;
+    
+    uploadArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    uploadArea.style.borderColor = '#888';
+    uploadArea.style.backgroundColor = '#f0f0f0';
+    });
+    
+    uploadArea.addEventListener('dragleave', () => {
+    uploadArea.style.borderColor = '#ccc';
+    uploadArea.style.backgroundColor = 'transparent';
+    });
+    
+    uploadArea.addEventListener('drop', (e) => {
+    e.preventDefault();
+    uploadArea.style.borderColor = '#ccc';
+    uploadArea.style.backgroundColor = 'transparent';
+    
+    if (e.dataTransfer.files.length) {
+        handleFileUpload(e.dataTransfer.files);
+    }
+    });
+}
+
+// 初始化
+document.addEventListener('DOMContentLoaded', () => {
+    // 页面加载时初始化DOM元素引用
+    initDomElements();
+    initDragAndDrop();
+    load();
+    showToast('系统就绪', 'success');
+    
+    // 键盘事件
+    document.addEventListener('keydown', e => {
+    if (e.ctrlKey && e.key === 'n') {
+        e.preventDefault();
+        resetForm();
+    } else if (e.ctrlKey && e.key === 's') {
+        e.preventDefault();
+        saveNode();
+    } else if (e.ctrlKey && e.key === 'b') {
+        e.preventDefault();
+        goBack();
+    } else if (e.key === 'Escape') {
+        if (movingNode) {
+        cancelMove();
+        showToast('已取消移动', 'info');
+        } else {
+        closeDeleteModal();
+        }
+    }
+    });
+});
\ No newline at end of file
diff --git a/dnfs/templates/index.html b/dnfs/templates/index.html
new file mode 100644
index 0000000..44262df
--- /dev/null
+++ b/dnfs/templates/index.html
@@ -0,0 +1,144 @@
+<!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>
+