* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            display: flex;
            height: 100vh;
        }
        /* 左侧目录树 */
        .tree-container {
            width: 350px;
            background: #f5f7fa;
            border-right: 1px solid #d1d5db;
            overflow-y: auto;
        }
        .tree-menu {
            list-style: none;
            padding: 8px 0;
        }
        .tree-menu li {
            position: relative;
            padding: 8px 2px 8px 2px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .tree-menu li:hover {
            background: #ebeff5;
        }
        .tree-menu ul {
            list-style: none;
            padding-left: 10px;
            display: none;
        }
        .tree-menu .active {
            background: #e1e8f0;
            color: #1e88e5;
            font-weight: bold;
        }
        .tree-menu .has-child::before {
           // content: "▶";
            position: absolute;
            left: 2px;
            font-size: 10px;
            transition: transform 0.3s;
        }
        .tree-menu .open::before {
            transform: rotate(90deg);
        }
        /* 右侧内容区 */
        .content-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background: #fff;
        }
        .content-frame {
            width: 100%;
            height: 100%;
            border: none;
        }