{include file="public/header"}
<link rel="stylesheet" href="__PUBLIC__/admin/lib/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="__PUBLIC__/admin/lib/codemirror/5.65.2/theme/monokai.min.css">
<style>
    body { background: #f0f2f5; }
    
    /* 自定义滚动条 */
    .file-tree-panel::-webkit-scrollbar,
    .history-list::-webkit-scrollbar,
    .history-viewer-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .file-tree-panel::-webkit-scrollbar-track,
    .history-list::-webkit-scrollbar-track,
    .history-viewer-body::-webkit-scrollbar-track {
        background: transparent;
    }
    .file-tree-panel::-webkit-scrollbar-thumb,
    .history-list::-webkit-scrollbar-thumb,
    .history-viewer-body::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.15);
        border-radius: 4px;
        transition: background 0.2s;
    }
    .file-tree-panel::-webkit-scrollbar-thumb:hover,
    .history-list::-webkit-scrollbar-thumb:hover,
    .history-viewer-body::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,.25);
    }
    
    .file-manager-wrap { padding: 20px; }
    .file-manager-container { 
        display: flex; 
        background: #fff;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,.08);
        height: calc(100vh - 140px);
        border: 1px solid #f2f2f2;
    }
    
    /* 左侧目录树 */
    .file-tree-panel { 
        width: 260px;
        min-width: 260px;
        border-right: 1px solid #f2f2f2;
        overflow: auto;
        background: #fafafa;
    }
    .file-tree-header {
        padding: 14px 16px;
        border-bottom: 1px solid #f2f2f2;
        font-weight: 600;
        color: #262626;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 1;
        letter-spacing: 0.3px;
    }
    #fileTree {
        padding: 10px 8px;
    }
    
    /* 自定义树节点样式 */
    .layui-tree-iconClick .layui-icon.layui-icon-file { display: none !important; }
    .layui-tree-entry { 
        height: auto; 
        border-radius: 4px;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 4px 8px !important;
    }
    .layui-tree-entry:hover { 
        background: rgba(22, 186, 170, 0.08); 
    }
    .layui-tree-entry.selected { 
        background: linear-gradient(90deg, rgba(22, 186, 170, 0.12) 0%, rgba(22, 186, 170, 0.06) 100%) !important; 
        color: #16baaa !important;
    }
    .layui-tree-txt { 
        font-size: 13px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    }
    
    /* 文件夹图标 */
    .layui-tree-set.is-folder > .layui-tree-entry .layui-tree-txt::before {
        content: "\eabe";
        font-family: "layui-icon" !important;
        display: inline-block;
        margin-right: 6px;
        font-size: 16px;
        vertical-align: middle;
        background: none;
        color: #FFB300;
    }
    
    /* 中间编辑器 */
    .file-editor-panel { 
        flex: 1; 
        display: flex; 
        flex-direction: column;
        overflow: hidden;
        background: #fff;
    }
    .editor-header {
        padding: 10px 20px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        min-height: 20px;
        box-shadow: 0 1px 2px rgba(0,0,0,.02);
    }
    .editor-title {
        font-size: 13px;
        color: #555;
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
        flex: 1;
    }
    .editor-title .file-ext-tag {
        display: inline-block;
        padding: 3px 10px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        flex-shrink: 0;
        color: #fff;
        background: linear-gradient(135deg, #16baaa 0%, #13a89e 100%);
        box-shadow: 0 1px 3px rgba(22, 186, 170, 0.3);
    }
    .editor-title .file-ext-tag.ext-css { 
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); 
        box-shadow: 0 1px 3px rgba(33, 150, 243, 0.3);
    }
    .editor-title .file-ext-tag.ext-js { 
        background: linear-gradient(135deg, #FFB300 0%, #FFA000 100%); 
        color: #333; 
        box-shadow: 0 1px 3px rgba(255, 179, 0, 0.3);
    }
    .editor-title .file-ext-tag.ext-php { 
        background: linear-gradient(135deg, #777BB4 0%, #5F6396 100%); 
        box-shadow: 0 1px 3px rgba(119, 123, 180, 0.3);
    }
    .editor-title .file-ext-tag.ext-json { 
        background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%); 
        box-shadow: 0 1px 3px rgba(255, 152, 0, 0.3);
    }
    .editor-title .file-ext-tag.ext-md { 
        background: linear-gradient(135deg, #607D8B 0%, #455A64 100%); 
        box-shadow: 0 1px 3px rgba(96, 125, 139, 0.3);
    }
    .editor-title .file-ext-tag.ext-xml { 
        background: linear-gradient(135deg, #8BC34A 0%, #689F38 100%); 
        box-shadow: 0 1px 3px rgba(139, 195, 74, 0.3);
    }
    .editor-title .file-path {
        font-size: 13px;
        color: #1a1a1a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 500px;
        font-family: 'SF Mono', 'Cascadia Code', Consolas, Monaco, monospace;
        font-weight: 500;
    }
    .editor-title .file-size-info {
        font-size: 11px;
        color: #999;
        white-space: nowrap;
        flex-shrink: 0;
        font-family: 'SF Mono', Consolas, Monaco, monospace;
    }
<style>
    body { background: #f0f2f5; }
    
    /* 自定义滚动条 */
    .file-tree-panel::-webkit-scrollbar,
    .history-list::-webkit-scrollbar,
    .history-viewer-body::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }
    .file-tree-panel::-webkit-scrollbar-track,
    .history-list::-webkit-scrollbar-track,
    .history-viewer-body::-webkit-scrollbar-track {
        background: transparent;
    }
    .file-tree-panel::-webkit-scrollbar-thumb,
    .history-list::-webkit-scrollbar-thumb,
    .history-viewer-body::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.2);
        border-radius: 3px;
    }
    .file-tree-panel::-webkit-scrollbar-thumb:hover,
    .history-list::-webkit-scrollbar-thumb:hover,
    .history-viewer-body::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,.3);
    }
    
    .file-manager-wrap { padding: 20px; }
    .file-manager-container { 
        display: flex; 
        background: #fff;
        border-radius: 2px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,.08);
        height: calc(100vh - 140px);
        border: 1px solid #d9d9d9;
    }
    
    /* 左侧目录树 */
    .file-tree-panel { 
        width: 260px;
        min-width: 260px;
        border-right: 1px solid #d9d9d9;
        overflow: auto;
        background: #fafafa;
    }
    .file-tree-header {
        padding: 12px 16px;
        border-bottom: 1px solid #d9d9d9;
        font-weight: 600;
        color: #262626;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    #fileTree {
        padding: 8px;
    }
    
    /* 自定义树节点样式 */
    .layui-tree-iconClick .layui-icon.layui-icon-file { display: none !important; }
    .layui-tree-entry { 
        height: auto; 
        border-radius: 0;
        padding: 5px 8px !important;
    }
    .layui-tree-entry:hover { 
        background: rgba(22, 186, 170, 0.08);
    }
    .layui-tree-entry.selected { 
        background: rgba(22, 186, 170, 0.12) !important; 
        color: #16baaa !important;
    }
    .layui-tree-txt { 
        font-size: 13px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
    }
    
    /* 文件夹图标 */
    .layui-tree-set.is-folder > .layui-tree-entry .layui-tree-txt::before {
        content: "\eabe";
        font-family: "layui-icon" !important;
        display: inline-block;
        margin-right: 6px;
        font-size: 16px;
        vertical-align: middle;
        background: none;
        color: #FFB300;
    }
    
    /* 中间编辑器 */
    .file-editor-panel { 
        flex: 1; 
        display: flex; 
        flex-direction: column;
        overflow: hidden;
        background: #fff;
    }
    .editor-header {
        padding: 7.5px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fafafa;
        min-height: 20px;
    }
    .editor-title {
        font-size: 13px;
        color: #595959;
        display: flex;
        align-items: center;
        gap: 10px;
        overflow: hidden;
        flex: 1;
    }
    .editor-title .file-ext-tag {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        flex-shrink: 0;
        color: #fff;
        background: linear-gradient(135deg, #16baaa 0%, #13a89e 100%);
        box-shadow: 0 1px 3px rgba(22,186,170,.25);
    }
    .editor-title .file-ext-tag.ext-css { 
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%); 
        box-shadow: 0 1px 3px rgba(33,150,243,.25);
    }
    .editor-title .file-ext-tag.ext-js { 
        background: linear-gradient(135deg, #FFB300 0%, #FFA000 100%); 
        color: #333;
        box-shadow: 0 1px 3px rgba(255,179,0,.25);
    }
    .editor-title .file-ext-tag.ext-php { 
        background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
        box-shadow: 0 1px 3px rgba(114,46,209,.25);
    }
    .editor-title .file-ext-tag.ext-json { 
        background: linear-gradient(135deg, #fa8c16 0%, #d46b08 100%);
        box-shadow: 0 1px 3px rgba(250,140,22,.25);
    }
    .editor-title .file-ext-tag.ext-md { 
        background: linear-gradient(135deg, #8c8c8c 0%, #595959 100%);
        box-shadow: 0 1px 3px rgba(140,140,140,.25);
    }
    .editor-title .file-ext-tag.ext-xml { 
        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
        box-shadow: 0 1px 3px rgba(82,196,26,.25);
    }
    .editor-title .file-path {
        font-size: 13px;
        color: #262626;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 500px;
        font-family: Consolas, Monaco, monospace;
    }
    .editor-title .file-size-info {
        font-size: 11px;
        color: #8c8c8c;
        white-space: nowrap;
        flex-shrink: 0;
        font-family: Consolas, Monaco, monospace;
    }
    /* 底部状态栏 - 与编辑器融为一体 */
    .editor-statusbar {
        display: none;
        padding: 0 16px;
        background: #1e1e1e;
        font-size: 12px;
        color: #858585;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        height: 26px;
        font-family: 'SF Mono', 'Cascadia Code', Consolas, Monaco, monospace;
        border-top: 1px solid #2d2d2d;
    }
    .editor-statusbar.theme-light {
        background: #f5f5f5;
        color: #666;
        border-top: 1px solid #d6d6d6;
    }
    .editor-statusbar .status-left,
    .editor-statusbar .status-right {
        display: flex;
        align-items: center;
        gap: 18px;
    }
    .editor-statusbar .status-item {
        cursor: default;
        white-space: nowrap;
        font-size: 12px;
    }
    .editor-statusbar .status-select {
        font-size: 12px;
        color: #bbb;
        background: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0 4px;
        font-family: 'SF Mono', Consolas, Monaco, monospace;
        appearance: none;
        -webkit-appearance: none;
        height: 26px;
        transition: color 0.2s;
    }
    .editor-statusbar .status-select option {
        background: #2d2d2d;
        color: #ccc;
    }
    .editor-statusbar.theme-light .status-select {
        color: #555;
    }
    .editor-statusbar.theme-light .status-select option {
        background: #fff;
        color: #333;
    }
    .editor-statusbar .status-select:hover {
        color: #16baaa;
    }
    .copy-path-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: none;
        background: transparent;
        border-radius: 2px;
        cursor: pointer;
        color: #8c8c8c;
        font-size: 14px;
        transition: all 0.2s;
        flex-shrink: 0;
    }
    .copy-path-btn:hover {
        background: #f0f0f0;
        color: #262626;
    }
    .editor-toolbar {
        display: flex;
        gap: 8px;
    }
    .editor-toolbar .layui-btn {
        border-radius: 2px;
    }
    .editor-content {
        flex: 1;
        overflow: hidden;
        position: relative;
        background: #fff;
    }
    .CodeMirror {
        height: 100% !important;
        font-size: 14px;
        line-height: 1.6;
        font-family: Consolas, Monaco, 'Courier New', monospace;
    }
    .empty-state {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #bfbfbf;
        background: #fafafa;
    }
    .empty-state i {
        font-size: 64px;
        margin-bottom: 16px;
        opacity: 0.25;
        color: #8c8c8c;
    }
    .empty-state p {
        font-size: 13px;
        color: #8c8c8c;
    }
    .empty-state p:last-child {
        font-size: 12px;
        color: #bfbfbf;
    }
    
    /* 右侧历史记录 */
    .history-panel {
        width: 0;
        background: #fafafa;
        border-left: 1px solid #f2f2f2;
        display: none;
        flex-direction: column;
        overflow: hidden;
    }
    .history-panel.active {
        display: flex;
        width: 340px;
    }
    .history-header {
        padding: 12px 16px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
    }
    .history-title {
        font-size: 13px;
        font-weight: 600;
        color: #262626;
        display: flex;
        align-items: center;
    }
    .history-title i {
        font-size: 16px;
        margin-right: 8px;
        color: #16baaa;
    }
    .history-list {
        flex: 1;
        overflow: auto;
        padding: 12px;
    }
    .history-item {
        padding: 12px;
        border: 1px solid #e8e8e8;
        border-radius: 0;
        margin-bottom: 8px;
        cursor: pointer;
        background: #fff;
        transition: border-color 0.2s;
        position: relative;
    }
    .history-item:hover {
        border-color: #1890ff;
    }
    .history-item-time {
        font-size: 12px;
        color: #262626;
        margin-bottom: 6px;
        font-weight: 600;
        font-family: Consolas, Monaco, monospace;
    }
    .history-item-user {
        font-size: 12px;
        color: #595959;
        margin-bottom: 6px;
    }
    .history-item-info {
        font-size: 11px;
        color: #8c8c8c;
        font-family: Consolas, Monaco, monospace;
    }
    .history-item-actions {
        margin-top: 10px;
        display: flex;
        gap: 6px;
    }
    .history-item-actions .layui-btn {
        border-radius: 0;
    }
    .history-item-delete {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        cursor: pointer;
        color: #bfbfbf;
        font-size: 12px;
        background: transparent;
        transition: color 0.2s;
    }
    .history-item-delete:hover {
        color: #ff4d4f;
    }
    .history-clear-all {
        cursor: pointer;
        color: #8c8c8c;
        font-size: 12px;
        transition: color 0.2s;
    }
    .history-clear-all:hover {
        color: #ff4d4f;
    }
    .history-close-btn {
        cursor: pointer;
        color: #8c8c8c;
        font-size: 16px;
        line-height: 1;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0;
        transition: color 0.2s;
    }
    .history-close-btn:hover {
        color: #262626;
    }
    /* 历史版本查看浮层 */
    .history-viewer-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        background: #fff;
        display: flex;
        flex-direction: column;
    }
    .history-viewer-header {
        padding: 12px 16px;
        border-bottom: 1px solid #d9d9d9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fafafa;
        flex-shrink: 0;
    }
    .history-viewer-header .hv-title {
        font-size: 13px;
        color: #262626;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .history-viewer-header .hv-title i {
        color: #1890ff;
        font-size: 16px;
    }
    .history-viewer-body {
        flex: 1;
        overflow: auto;
    }
    .history-viewer-body pre {
        margin: 0;
        padding: 24px;
        background: #272822;
        color: #f8f8f2;
        font-family: 'SF Mono', 'Cascadia Code', Consolas, Monaco, monospace;
        font-size: 14px;
        line-height: 1.65;
        min-height: 100%;
        box-sizing: border-box;
    }
    
    /* 图片预览弹窗内样式 */
    .img-layer-preview {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #1a1a1a;
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow: auto;
    }
    .img-layer-preview img {
        max-width: 100%;
        max-height: calc(100% - 40px);
        object-fit: contain;
        border-radius: 4px;
        background: repeating-conic-gradient(#333 0% 25%, #2a2a2a 0% 50%) 50% / 16px 16px;
        cursor: zoom-in;
        user-select: none;
        -webkit-user-drag: none;
        box-shadow: 0 4px 20px rgba(0,0,0,.4);
    }
    .img-layer-info {
        margin-top: 16px;
        font-size: 12px;
        color: #888;
        text-align: center;
    }
    /* 图片文件图标 */
    .layui-tree-set.is-image > .layui-tree-entry .layui-tree-txt::before {
        content: "\e60d";
        font-family: "layui-icon" !important;
        display: inline-block;
        margin-right: 6px;
        font-size: 16px;
        vertical-align: middle;
        color: #eb2f96;
    }
    .editor-title .file-ext-tag.ext-jpg,
    .editor-title .file-ext-tag.ext-jpeg { 
        background: linear-gradient(135deg, #eb2f96 0%, #c41d7f 100%);
        box-shadow: 0 1px 3px rgba(235,47,150,.25);
    }
    .editor-title .file-ext-tag.ext-png { 
        background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
        box-shadow: 0 1px 3px rgba(114,46,209,.25);
    }
    .editor-title .file-ext-tag.ext-gif { 
        background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
        box-shadow: 0 1px 3px rgba(19,194,194,.25);
    }
    .editor-title .file-ext-tag.ext-svg { 
        background: linear-gradient(135deg, #fa541c 0%, #d4380d 100%);
        box-shadow: 0 1px 3px rgba(250,84,28,.25);
    }
    .editor-title .file-ext-tag.ext-webp { 
        background: linear-gradient(135deg, #8c8c8c 0%, #595959 100%);
        box-shadow: 0 1px 3px rgba(140,140,140,.25);
    }
    .editor-title .file-ext-tag.ext-ico { 
        background: linear-gradient(135deg, #595959 0%, #262626 100%);
        box-shadow: 0 1px 3px rgba(89,89,89,.25);
    }

    /* 响应式 */
    @media screen and (max-width: 1200px) {
        .file-tree-panel { width: 220px; min-width: 220px; }
        .history-panel.active { width: 300px; }
        .editor-title .file-path { max-width: 200px; }
    }

    /* 右键菜单 */
    .tree-context-menu {
        display: none;
        position: fixed;
        z-index: 99999;
        background: #fff;
        border: 1px solid #f2f2f2;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,.1);
        padding: 4px 0;
        min-width: 150px;
    }
    .tree-context-menu .ctx-item {
        padding: 8px 16px;
        cursor: pointer;
        font-size: 13px;
        color: #262626;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
    }
    .tree-context-menu .ctx-item:hover {
        background: rgba(22, 186, 170, 0.08);
        color: #16baaa;
    }
    .tree-context-menu .ctx-item i {
        font-size: 14px;
        color: #595959;
    }
    .tree-context-menu .ctx-item:hover i {
        color: #16baaa;
    }
    .tree-context-menu .ctx-item.ctx-danger { color: #ff4d4f; }
    .tree-context-menu .ctx-item.ctx-danger i { color: #ff4d4f; }
    .tree-context-menu .ctx-item.ctx-danger:hover { 
        background: rgba(255, 77, 79, 0.08);
        color: #ff4d4f;
    }
    .tree-context-menu .ctx-item.ctx-danger:hover i { 
        color: #ff4d4f;
    }
    .tree-context-menu .ctx-divider { 
        height: 1px; 
        background: #f0f0f0; 
        margin: 4px 0; 
    }
</style>

<body>
<div class="file-manager-wrap">
    <div class="file-manager-container">
        <!-- 左侧目录树 -->
        <div class="file-tree-panel">
            <div class="file-tree-header">
                <div>模板文件目录(template)</div>
            </div>
            <div id="fileTree"></div>
        </div>

        <!-- 中间编辑器 -->
        <div class="file-editor-panel">
            <div class="editor-header">
                <div class="editor-title" id="editorTitle">
                    <span class="file-ext-tag" id="fileExtTag" style="display:none;"></span>
                    <span class="file-path" id="currentFilePath" style="display:none;"></span>
                    <button class="copy-path-btn" id="copyPathBtn" title="复制文件路径" style="display:none;"><i class="layui-icon layui-icon-file"></i></button>
                    <span class="file-size-info" id="fileSizeInfo"></span>
                </div>
                <div class="editor-toolbar">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="saveBtn" disabled>
                        <i class="layui-icon layui-icon-ok"></i> 保存
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-warm" id="historyBtn" disabled>
                        <i class="layui-icon layui-icon-time"></i> 历史
                    </button>
                </div>
            </div>
            <div class="editor-content" id="editorContent">
                <div class="empty-state">
                    <i class="layui-icon layui-icon-file"></i>
                    <p>请从左侧选择要编辑的文件</p>
                    <p style="font-size:12px;color:#ccc;margin-top:10px;">支持 HTML, CSS, JS, PHP, JSON, XML, TXT, MD 等格式</p>
                </div>
            </div>
            <div class="editor-statusbar" id="editorStatusbar">
                <div class="status-left">
                    <span class="status-item" id="statusCursorInfo">行 1, 列 1</span>
                    <span class="status-item" id="statusLineCount">共 0 行</span>
                    <select class="status-select" id="encodingSelect">
                        <option value="UTF-8">UTF-8</option>
                        <option value="GBK">GBK</option>
                        <option value="GB2312">GB2312</option>
                        <option value="ISO-8859-1">ISO-8859-1</option>
                        <option value="BIG5">BIG5</option>
                    </select>
                    <select class="status-select" id="themeSelect">
                        <option value="monokai">深色</option>
                        <option value="default">浅色</option>
                    </select>
                    <select class="status-select" id="templateSelect">
                        <option value="">插入模板</option>
                        <option value="html">HTML</option>
                        <option value="css">CSS</option>
                        <option value="js">JavaScript</option>
                        <option value="php">PHP</option>
                        <option value="json">JSON</option>
                        <option value="xml">XML</option>
                        <option value="md">Markdown</option>
                    </select>
                </div>
            </div>

        </div>

        <!-- 右侧历史记录 -->
        <div class="history-panel" id="historyPanel">
            <div class="history-header">
                <div class="history-title">
                    <i class="layui-icon layui-icon-time"></i>
                    历史版本
                </div>
                <div style="display:flex;align-items:center;gap:10px;">
                    <span class="history-clear-all" id="clearAllHistoryBtn">清空</span>
                    <span class="history-close-btn" id="closeHistoryBtn"><i class="layui-icon layui-icon-close"></i></span>
                </div>
            </div>
            <div class="history-list" id="historyList">
                <div class="empty-state" style="padding:40px 20px;">
                    <p>暂无历史记录</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 右键菜单 -->
<div class="tree-context-menu" id="treeContextMenu">
    <div class="ctx-item" id="ctxNewFolder"><i class="layui-icon layui-icon-addition"></i>新建文件夹</div>
    <div class="ctx-item" id="ctxNewFile"><i class="layui-icon layui-icon-file"></i>新建文件</div>
    <div class="ctx-divider" id="ctxDivider"></div>
    <div class="ctx-item ctx-danger" id="ctxDelete"><i class="layui-icon layui-icon-delete"></i>删除</div>
</div>

<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/codemirror.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/mode/css/css.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/mode/php/php.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/mode/xml/xml.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/mode/markdown/markdown.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/addon/edit/closetag.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/addon/edit/closebrackets.min.js"></script>
<script src="__PUBLIC__/admin/lib/codemirror/5.65.2/addon/edit/matchbrackets.min.js"></script>

<script>
{literal}
layui.use(['tree', 'layer'], function(){
    var tree = layui.tree;
    var layer = layui.layer;
    var $ = layui.jquery;

    var editor = null;
    var currentFilePath = null;
    var isModified = false;
    var currentTheme = 'monokai';

    // 初始化 CodeMirror
    function initEditor() {
        var editorEl = document.createElement('textarea');
        editorEl.id = 'codeEditor';
        document.getElementById('editorContent').innerHTML = '';
        document.getElementById('editorContent').appendChild(editorEl);

        currentTheme = $('#themeSelect').val() || 'monokai';
        editor = CodeMirror.fromTextArea(editorEl, {
            lineNumbers: true,
            theme: currentTheme,
            indentUnit: 4,
            tabSize: 4,
            indentWithTabs: false,
            lineWrapping: true,
            autoCloseTags: true,
            autoCloseBrackets: true,
            matchBrackets: true,
            extraKeys: {
                "Ctrl-S": function() {
                    saveFile();
                    return false;
                },
                "Cmd-S": function() {
                    saveFile();
                    return false;
                }
            }
        });

        editor.on('change', function() {
            isModified = true;
            $('#saveBtn').removeClass('layui-btn-disabled').prop('disabled', false);
        });

        // 监听光标位置变化
        editor.on('cursorActivity', function() {
            var cursor = editor.getCursor();
            $('#statusCursorInfo').text('行 ' + (cursor.line + 1) + ', 列 ' + (cursor.ch + 1));
            $('#statusLineCount').text('共 ' + editor.lineCount() + ' 行');
        });
    }

    // 设置编辑器语言模式
    function setEditorMode(ext) {
        var modeMap = {
            'html': 'htmlmixed',
            'htm': 'htmlmixed',
            'css': 'css',
            'js': 'javascript',
            'json': {'name': 'javascript', 'json': true},
            'php': 'php',
            'xml': 'xml',
            'md': 'markdown',
            'txt': 'text/plain'
        };
        var mode = modeMap[ext.toLowerCase()] || 'htmlmixed';
        editor.setOption('mode', mode);
    }

    // 加载目录树
    function loadTree() {
        $.get('/admin/file/getTree', function(res){
            if(res.success && res.data) {
                // 为节点添加 data-type 和 data-ext 属性
                function processNodes(nodes) {
                    nodes.forEach(function(node) {
                        if (node.type) {
                            node.field = node.field || {};
                            node.field.type = node.type;
                            if (node.ext) {
                                node.field.ext = node.ext;
                            }
                        }
                        if (node.children && node.children.length > 0) {
                            processNodes(node.children);
                        }
                    });
                }
                processNodes(res.data);

                tree.render({
                    elem: '#fileTree',
                    data: res.data,
                    showLine: true,
                    showIcon: false,
                    id: 'fileTreeId',
                    click: function(obj){
                        var data = obj.data;
                        if(data.type === 'file') {
                            var imageExts = ['jpg','jpeg','png','gif','bmp','svg','webp','ico'];
                            if (data.ext && imageExts.indexOf(data.ext.toLowerCase()) !== -1) {
                                previewImage(data.path, data.ext);
                            } else {
                                loadFile(data.path);
                            }
                        }
                        // 移除所有选中样式
                        $('.layui-tree-entry.selected').removeClass('selected');
                        // 添加当前选中样式
                        $(obj.elem).children('.layui-tree-entry').addClass('selected');
                    }
                });

                // 立即使所有树节点可点击（修复 layui tree 渲染后点击延迟问题）
                setTimeout(function() {
                    $('#fileTree .layui-tree-set').css('pointer-events', 'auto');
                }, 0);

                // 渲染完成后，标记文件夹和图片节点
                var imageExts = ['jpg','jpeg','png','gif','bmp','svg','webp','ico'];
                function markNodes(nodes) {
                    nodes.forEach(function(node) {
                        var $el = $('#fileTree .layui-tree-set[data-id="' + node.id + '"]');
                        if (node.type === 'folder' || (node.children && node.children.length > 0)) {
                            $el.addClass('is-folder');
                        }
                        if (node.type === 'file' && node.ext && imageExts.indexOf(node.ext.toLowerCase()) !== -1) {
                            $el.addClass('is-image');
                        }
                        if (node.children && node.children.length > 0) {
                            markNodes(node.children);
                        }
                    });
                }
                markNodes(res.data);
            } else {
                layer.msg('加载目录失败', {icon: 2, offset: '100px'});
            }
        });
    }

    // 图片预览 - 弹窗方式
    function previewImage(path, ext) {
        var imgUrl = '/template/' + path + '?t=' + Date.now();
        var basename = path.split('/').pop();

        // 直接打开图片放大查看组件
        layer.photos({
            photos: {
                title: basename,
                id: 'img-preview-photos',
                data: [{ alt: basename, src: imgUrl }]
            },
            anim: 5
        });
    }

    // 加载文件内容
    function loadFile(path) {
        if(isModified) {
            layer.confirm('当前文件已修改，是否放弃修改？', {
                btn: ['放弃', '取消']
            }, function(index){
                layer.close(index);
                doLoadFile(path);
            });
        } else {
            doLoadFile(path);
        }
    }

    function doLoadFile(path) {
        var loadIndex = layer.load(1, {shade: 0});
        $.get('/admin/file/getFile', {path: path}, function(res){
            layer.close(loadIndex);
            if(res.code === 1) {
                if(!editor) {
                    initEditor();
                }
                currentFilePath = path;
                editor.setValue(res.data.content);
                setEditorMode(res.data.ext);
                
                // 更新编辑器标题栏
                var ext = res.data.ext.toLowerCase();
                $('#fileExtTag').text(ext).attr('class', 'file-ext-tag ext-' + ext).show();
                $('#currentFilePath').text('/template/' + path).show();
                $('#copyPathBtn').show();
                var sizeKB = (res.data.size / 1024).toFixed(1);
                $('#fileSizeInfo').text(sizeKB + ' KB');
                // 显示编码和状态栏
                var encoding = res.data.encoding || 'UTF-8';
                $('#encodingSelect').val(encoding);
                $('#editorStatusbar').css('display', 'flex');
                // 状态栏主题同步
                if (($('#themeSelect').val() || 'monokai') === 'default') {
                    $('#editorStatusbar').addClass('theme-light');
                } else {
                    $('#editorStatusbar').removeClass('theme-light');
                }
                // 初始化行列信息
                var cursor = editor.getCursor();
                $('#statusCursorInfo').text('行 ' + (cursor.line + 1) + ', 列 ' + (cursor.ch + 1));
                $('#statusLineCount').text('共 ' + editor.lineCount() + ' 行');
                $('#saveBtn').prop('disabled', false);
                $('#historyBtn').prop('disabled', false);
                
                isModified = false;
                $('#saveBtn').addClass('layui-btn-disabled').prop('disabled', true);
            } else {
                layer.msg(res.msg, {icon: 2, offset: '100px'});
            }
        });
    }

    // 保存文件
    function saveFile() {
        if(!currentFilePath || !editor) {
            layer.msg('请先选择文件', {icon: 2, offset: '100px'});
            return;
        }

        if (!hasPermission('file_edit')) {
            layer.msg('无权限编辑', {icon: 2, offset: '100px'});
            return;
        }

        var content = editor.getValue();
        var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
        $.post('/admin/file/saveFile', {
            path: currentFilePath,
            content: content,
            encoding: $('#encodingSelect').val() || 'UTF-8'
        }, function(res){
            layer.close(loadIndex);
            if(res.status === 'success') {
                layer.msg(res.msg, {icon: 1, offset: '100px', time: 1500});
                isModified = false;
                $('#saveBtn').addClass('layui-btn-disabled').prop('disabled', true);
                // 实时刷新历史记录
                if ($('#historyPanel').hasClass('active')) {
                    loadHistory();
                }
            } else {
                layer.msg(res.msg, {icon: 2, offset: '100px'});
            }
        });
    }

    // 显示历史记录
    function showHistory() {
        if(!currentFilePath) {
            layer.msg('请先选择文件', {icon: 2, offset: '100px'});
            return;
        }
        $('#historyPanel').addClass('active');
        loadHistory();
    }

    // 加载历史记录列表
    function loadHistory() {
        $.get('/admin/file/getHistory', {
            path: currentFilePath,
            page: 1,
            limit: 50
        }, function(res){
            if(res.code === 0 && res.data.length > 0) {
                var html = '';
                res.data.forEach(function(item){
                    var time = new Date(item.create_time * 1000).toLocaleString('zh-CN');
                    var sizeKB = (item.file_size / 1024).toFixed(2);
                    html += '<div class="history-item" data-id="' + item.id + '">';
                    html += '  <i class="layui-icon layui-icon-close history-item-delete" data-id="' + item.id + '" title="删除此记录"></i>';
                    html += '  <div class="history-item-time"><i class="layui-icon layui-icon-time"></i> ' + time + '</div>';
                    html += '  <div class="history-item-user">操作人：' + (item.admin_name || '未知') + '</div>';
                    html += '  <div class="history-item-info">文件大小：' + sizeKB + ' KB | IP：' + item.ip + '</div>';
                    html += '  <div class="history-item-actions">';
                    html += '    <button class="layui-btn layui-btn-xs layui-btn-normal view-history-btn" data-id="' + item.id + '">查看</button>';
                    html += '    <button class="layui-btn layui-btn-xs layui-btn-warm restore-history-btn" data-id="' + item.id + '">恢复</button>';
                    html += '  </div>';
                    html += '</div>';
                });
                $('#historyList').html(html);
            } else {
                $('#historyList').html('<div class="empty-state" style="padding:40px 20px;"><p>暂无历史记录</p></div>');
            }
        });
    }

    // 查看历史版本（编辑区内定位浮层）
    $(document).on('click', '.view-history-btn', function(){
        var historyId = $(this).data('id');
        var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
        $.get('/admin/file/viewHistory', {id: historyId, path: currentFilePath}, function(res){
            layer.close(loadIndex);
            if(res.code === 1) {
                var time = new Date(res.data.create_time * 1000).toLocaleString('zh-CN');
                var adminName = res.data.admin_name || '未知';
                var overlayHtml = '<div class="history-viewer-overlay" id="historyViewerOverlay">';
                overlayHtml += '  <div class="history-viewer-header">';
                overlayHtml += '    <div class="hv-title"><i class="layui-icon layui-icon-time"></i>历史版本 - ' + time + ' - ' + adminName + '</div>';
                overlayHtml += '    <div style="display:flex;gap:8px;">';
                overlayHtml += '      <button class="layui-btn layui-btn-xs layui-btn-warm" onclick="restoreFromViewer(\'' + historyId + '\')">恢复此版本</button>';
                overlayHtml += '      <button class="layui-btn layui-btn-xs layui-btn-primary" id="closeHistoryViewer"><i class="layui-icon layui-icon-close"></i> 关闭</button>';
                overlayHtml += '    </div>';
                overlayHtml += '  </div>';
                overlayHtml += '  <div class="history-viewer-body"><pre>' + escapeHtml(res.data.content) + '</pre></div>';
                overlayHtml += '</div>';
                // 移除可能存在的旧浮层
                $('#historyViewerOverlay').remove();
                $('#editorContent').append(overlayHtml);
            }
        });
    });

    // 关闭历史查看浮层
    $(document).on('click', '#closeHistoryViewer', function(){
        $('#historyViewerOverlay').remove();
    });

    // 从浮层恢复版本
    window.restoreFromViewer = function(historyId) {
        if (!hasPermission('file_edit')) {
            layer.msg('无权限操作', {icon: 2, offset: '100px'});
            return;
        }
        layer.confirm('确定要恢复到此版本吗？当前内容将被备份', {
            btn: ['确定', '取消'], icon: 3
        }, function(index){
            layer.close(index);
            var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
            $.post('/admin/file/restoreHistory', {id: historyId, path: currentFilePath}, function(res){
                layer.close(loadIndex);
                if(res.status === 'success') {
                    layer.msg(res.msg, {icon: 1, offset: '100px', time: 1500});
                    $('#historyViewerOverlay').remove();
                    doLoadFile(currentFilePath);
                    loadHistory();
                } else {
                    layer.msg(res.msg, {icon: 2, offset: '100px'});
                }
            });
        });
    };

    // 恢复历史版本
    $(document).on('click', '.restore-history-btn', function(){
        if (!hasPermission('file_edit')) {
            layer.msg('无权限操作', {icon: 2, offset: '100px'});
            return;
        }

        var historyId = $(this).data('id');
        layer.confirm('确定要恢复到此版本吗？当前内容将被备份', {
            btn: ['确定', '取消'],
            icon: 3
        }, function(index){
            layer.close(index);
            var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
            $.post('/admin/file/restoreHistory', {id: historyId, path: currentFilePath}, function(res){
                layer.close(loadIndex);
                if(res.status === 'success') {
                    layer.msg(res.msg, {icon: 1, offset: '100px', time: 1500});
                    // 重新加载文件
                    doLoadFile(currentFilePath);
                    loadHistory();
                } else {
                    layer.msg(res.msg, {icon: 2, offset: '100px'});
                }
            });
        });
    });

    // 关闭历史面板
    $('#closeHistoryBtn').on('click', function(){
        $('#historyPanel').removeClass('active');
    });

    // 保存按钮
    $('#saveBtn').on('click', function(){
        saveFile();
    });

    // 历史按钮
    $('#historyBtn').on('click', function(){
        showHistory();
    });

    // 复制路径按钮
    $('#copyPathBtn').on('click', function(){
        var pathText = $('#currentFilePath').text();
        if (!pathText) return;
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(pathText).then(function(){
                layer.msg('路径已复制', {icon: 1, offset: '100px', time: 1000});
            });
        } else {
            var $temp = $('<input>');
            $('body').append($temp);
            $temp.val(pathText).select();
            document.execCommand('copy');
            $temp.remove();
            layer.msg('路径已复制', {icon: 1, offset: '100px', time: 1000});
        }
    });

    // 删除单条历史记录
    $(document).on('click', '.history-item-delete', function(e){
        e.stopPropagation();
        var historyId = $(this).data('id');
        var $item = $(this).closest('.history-item');
        layer.confirm('确定删除此条历史记录？', {
            btn: ['确定', '取消'], icon: 3
        }, function(index){
            layer.close(index);
            $.post('/admin/file/deleteHistory', {
                id: historyId,
                path: currentFilePath
            }, function(res){
                if(res.status === 'success') {
                    $item.fadeOut(200, function(){ $(this).remove(); });
                    layer.msg('已删除', {icon: 1, offset: '100px', time: 1000});
                } else {
                    layer.msg(res.msg, {icon: 2, offset: '100px'});
                }
            });
        });
    });

    // 主题切换
    $('#themeSelect').on('change', function(){
        var theme = $(this).val();
        if (editor) {
            editor.setOption('theme', theme);
            // 状态栏跟随主题变色
            if (theme === 'default') {
                $('#editorStatusbar').addClass('theme-light');
            } else {
                $('#editorStatusbar').removeClass('theme-light');
            }
        }
    });

    // 模板插入
    var tplMap = {
        html: '<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document</title>\n</head>\n<body>\n    \n</body>\n</html>',
        css: '/* ================================\n   样式文件\n   ================================ */\n\n/* 重置 */\n* {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\nbody {\n    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;\n    font-size: 14px;\n    color: #333;\n    line-height: 1.6;\n    background: #fff;\n}\n\na {\n    color: #16baaa;\n    text-decoration: none;\n}\n\na:hover {\n    text-decoration: underline;\n}\n\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\n/* 容器 */\n.container {\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 15px;\n}\n\n/* 头部 */\n.header {\n\n}\n\n/* 主内容 */\n.main {\n\n}\n\n/* 底部 */\n.footer {\n\n}',
        js: '/**\n * JavaScript 模块\n */\n(function() {\n    \'use strict\';\n\n    // DOM 加载完成\n    document.addEventListener(\'DOMContentLoaded\', function() {\n        init();\n    });\n\n    function init() {\n        // 初始化\n        console.log(\'页面已加载\');\n    }\n\n})();',
        php: ['<','?php','/**',' * PHP 文件',' */','declare(strict_types=1);','','// 你的代码','',''].join('\n'),
        json: '{\n    "name": "",\n    "version": "1.0.0",\n    "description": "",\n    "data": {\n\n    }\n}',
        xml: ['<','?xml version="1.0" encoding="UTF-8"?','>','<root>','    <item>','        <title>标题</title>','        <content>内容</content>','    </item>','</root>'].join('\n'),
        md: '# 标题\n\n## 简介\n\n这里是简介内容。\n\n## 目录\n\n- [章节一](#章节一)\n- [章节二](#章节二)\n\n## 章节一\n\n正文内容。\n\n## 章节二\n\n正文内容。\n\n---\n\n> 引用文本\n\n```code\n代码块\n```\n'
    };

    $('#templateSelect').on('change', function(){
        var tpl = $(this).val();
        if (!tpl || !editor) { $(this).val(''); return; }

        var content = editor.getValue().trim();
        if (content.length > 0) {
            layer.confirm('当前编辑器已有内容，插入模板将<b style="color:#ff5722">替换全部内容</b>，是否继续？', {
                btn: ['替换', '插入到光标位置', '取消'], icon: 3
            }, function(index) {
                layer.close(index);
                editor.setValue(tplMap[tpl] || '');
                setEditorMode(tpl === 'js' ? 'js' : tpl);
                isModified = true;
                $('#saveBtn').removeClass('layui-btn-disabled').prop('disabled', false);
                $('#templateSelect').val('');
            }, function(index) {
                layer.close(index);
                var cursor = editor.getCursor();
                editor.replaceRange('\n' + (tplMap[tpl] || ''), cursor);
                isModified = true;
                $('#saveBtn').removeClass('layui-btn-disabled').prop('disabled', false);
                $('#templateSelect').val('');
            });
        } else {
            editor.setValue(tplMap[tpl] || '');
            setEditorMode(tpl === 'js' ? 'js' : tpl);
            isModified = true;
            $('#saveBtn').removeClass('layui-btn-disabled').prop('disabled', false);
            $('#templateSelect').val('');
        }
    });

    // 编码切换 - 重新加载文件内容
    $('#encodingSelect').on('change', function(){
        if (!currentFilePath) return;
        var encoding = $(this).val();
        var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
        $.get('/admin/file/getFile', {path: currentFilePath, encoding: encoding}, function(res){
            layer.close(loadIndex);
            if(res.code === 1 && editor) {
                editor.setValue(res.data.content);
                isModified = false;
                $('#saveBtn').addClass('layui-btn-disabled').prop('disabled', true);
                layer.msg('已切换为 ' + encoding, {offset: '100px', time: 1000});
            }
        });
    });

    // 清空全部历史记录
    $('#clearAllHistoryBtn').on('click', function(){
        if (!currentFilePath) return;
        layer.confirm('确定清空该文件的所有历史记录？此操作不可恢复！', {
            btn: ['确定清空', '取消'], icon: 3
        }, function(index){
            layer.close(index);
            $.post('/admin/file/clearHistory', {
                path: currentFilePath
            }, function(res){
                if(res.status === 'success') {
                    layer.msg('已清空', {icon: 1, offset: '100px', time: 1000});
                    loadHistory();
                } else {
                    layer.msg(res.msg, {icon: 2, offset: '100px'});
                }
            });
        });
    });

    // HTML 转义
    function escapeHtml(text) {
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }

    // 初始化
    loadTree();

    // ========== 右键菜单功能 ==========
    var contextTargetPath = '';   // 右键点击的目标路径
    var contextTargetType = '';   // 'folder' | 'file' | ''
    var contextNodePath = '';     // 右键点击节点自身的路径（用于删除）
    var $ctxMenu = $('#treeContextMenu');

    // 整个左侧面板区域右键
    $('.file-tree-panel').on('contextmenu', function(e) {
        e.preventDefault();

        var $set = $(e.target).closest('.layui-tree-set');
        if ($set.length) {
            var nodeId = $set.attr('data-id');

            if ($set.hasClass('is-folder')) {
                // 右键文件夹
                contextTargetPath = nodeId;
                contextTargetType = 'folder';
                contextNodePath = nodeId;
                // 显示：新建文件夹、新建文件、删除文件夹
                $('#ctxNewFolder, #ctxNewFile, #ctxDivider, #ctxDelete').show();
                $('#ctxDelete').html('<i class="layui-icon layui-icon-delete"></i>删除文件夹');
            } else {
                // 右键文件（包括图片文件）
                var $parentSet = $set.parent().closest('.layui-tree-set');
                contextTargetPath = $parentSet.length ? $parentSet.attr('data-id') : '';
                contextTargetType = 'file';
                contextNodePath = nodeId;
                // 显示：新建文件夹/文件（在父目录下）+ 删除文件
                $('#ctxNewFolder, #ctxNewFile, #ctxDivider, #ctxDelete').show();
                $('#ctxDelete').html('<i class="layui-icon layui-icon-delete"></i>删除文件');
            }
        } else {
            // 右键空白区域
            contextTargetPath = '';
            contextTargetType = '';
            contextNodePath = '';
            // 显示：新建文件夹、新建文件（隐藏删除）
            $('#ctxNewFolder, #ctxNewFile').show();
            $('#ctxDivider, #ctxDelete').hide();
        }

        $ctxMenu.css({
            left: e.clientX + 'px',
            top: e.clientY + 'px'
        }).show();
    });

    // 点击任意位置关闭菜单
    $(document).on('click', function() {
        $ctxMenu.hide();
    });

    // 新建文件夹
    $('#ctxNewFolder').on('click', function() {
        $ctxMenu.hide();
        layer.prompt({
            formType: 0,
            title: '新建文件夹' + (contextTargetPath ? '（在 ' + contextTargetPath + ' 下）' : '（根目录）'),
            placeholder: '请输入文件夹名称',
            btn: ['确定', '取消'],
            btnAlign: 'c',
            value: ''
        }, function(folderName, index) {
            if (!folderName || !folderName.trim()) {
                layer.msg('名称不能为空', {icon: 2, offset: '100px'});
                return;
            }
            var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
            $.post('/admin/file/createFolder', {
                parentPath: contextTargetPath,
                folderName: folderName.trim()
            }, function(res) {
                layer.close(loadIndex);
                if (res.status === 'success') {
                    layer.close(index);
                    layer.msg(res.msg, {icon: 1, offset: '100px', time: 1500});
                    loadTree();
                } else {
                    layer.msg(res.msg, {icon: 2, offset: '100px'});
                }
            });
        });
    });

    // 新建文件
    $('#ctxNewFile').on('click', function() {
        $ctxMenu.hide();
        layer.prompt({
            formType: 0,
            title: '新建文件' + (contextTargetPath ? '（在 ' + contextTargetPath + ' 下）' : '（根目录）'),
            placeholder: '请输入文件名（如 index.html）',
            btn: ['确定', '取消'],
            btnAlign: 'c',
            value: ''
        }, function(fileName, index) {
            if (!fileName || !fileName.trim()) {
                layer.msg('文件名不能为空', {icon: 2, offset: '100px'});
                return;
            }
            var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
            $.post('/admin/file/createFile', {
                parentPath: contextTargetPath,
                fileName: fileName.trim()
            }, function(res) {
                layer.close(loadIndex);
                if (res.status === 'success') {
                    layer.close(index);
                    layer.msg(res.msg, {icon: 1, offset: '100px', time: 1500});
                    loadTree();
                } else {
                    layer.msg(res.msg, {icon: 2, offset: '100px'});
                }
            });
        });
    });

    // 删除文件/文件夹
    $('#ctxDelete').on('click', function() {
        $ctxMenu.hide();
        var typeName = contextTargetType === 'folder' ? '文件夹' : '文件';
        var deletePath = contextNodePath;

        layer.confirm('确定要删除' + typeName + ' <b style="color:#FF5722">' + deletePath + '</b> 吗？<br><br><span style="color:#999;font-size:12px">' + (contextTargetType === 'folder' ? '该文件夹下的所有文件都将被删除，' : '') + '此操作不可恢复！</span>', {
            icon: 3,
            title: '删除确认',
            btn: ['确定删除', '取消'],
            btnAlign: 'c',
            btn1: function(idx) {
                layer.close(idx);
                // 二次确认
                layer.confirm('再次确认：是否删除 <b style="color:#FF5722">' + deletePath + '</b>？', {
                    icon: 0,
                    title: '二次确认',
                    btn: ['确认删除', '取消'],
                    btnAlign: 'c'
                }, function(idx2) {
                    layer.close(idx2);
                    var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
                    $.post('/admin/file/deleteItem', {
                        itemPath: deletePath,
                        itemType: contextTargetType
                    }, function(res) {
                        layer.close(loadIndex);
                        if (res.status === 'success') {
                            layer.msg(res.msg, {icon: 1, offset: '100px', time: 1500});
                            // 如果删除的是当前编辑的文件，清空编辑器
                            if (currentFilePath && currentFilePath === deletePath) {
                                currentFilePath = null;
                                isModified = false;
                                document.getElementById('editorContent').innerHTML = '<div class="empty-state"><i class="layui-icon layui-icon-file"></i><p>请从左侧选择要编辑的文件</p></div>';
                                editor = null;
                                $('#fileExtTag').hide();
                                $('#currentFilePath').text('').hide();
                                $('#copyPathBtn').hide();
                                $('#fileSizeInfo').text('');
                                $('#editorStatusbar').hide();
                                $('#saveBtn').prop('disabled', true);
                                $('#historyBtn').prop('disabled', true);
                            }
                            loadTree();
                        } else {
                            layer.msg(res.msg, {icon: 2, offset: '100px'});
                        }
                    });
                });
            }
        });
    });

    // 页面离开提醒
    window.addEventListener('beforeunload', function(e) {
        if(isModified) {
            e.preventDefault();
            e.returnValue = '当前文件已修改，确定要离开吗？';
            return e.returnValue;
        }
    });
});
{/literal}
</script>

</body>
</html>