{"html":"

\n \n \n \n \n \n \n \n \n \n src\n \n\n
\n
- \n
  \n \n \n \n \n \n \n \n \n app\n \n\n
  \n
  \n
  \n
  \n \n \n \n \n layout.tsx\n
  \n
  \n
  \n
  \n \n \n \n \n page.tsx\n
  \n
  \n
  \n
  \n
- \n
  \n \n \n \n \n \n \n \n \n components\n \n\n
  \n
  \n
  \n \n \n \n \n \n \n \n \n \n ui\n \n\n
  \n
  \n
  \n
  \n \n \n \n \n button.tsx\n
  \n
  \n
  \n
  \n
  \n\n
  \n
  \n \n \n \n \n header.tsx\n
  \n
  \n
  \n
  \n \n \n \n \n footer.tsx\n
  \n
  \n
  \n
  \n
- \n
  \n \n \n \n \n \n \n \n \n lib\n \n\n
  \n
  \n
  \n
  \n \n \n \n \n utils.ts\n
  \n
  \n
  \n
  \n
\n
\n

\n","css":".tree-container {\n width: 320px;\n border: 1px solid #e4e4e7;\n border-radius: 8px;\n padding: 24px;\n background: #fff;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n\nul {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\nul ul {\n margin-left: 11px;\n padding-left: 11px;\n border-left: 1px solid #e4e4e7;\n}\n\n.tree-item {\n position: relative;\n margin-top: 4px;\n}\n\nul ul .tree-item::before {\n content: \"\";\n position: absolute;\n left: -11px;\n top: 14px;\n width: 11px;\n height: 1px;\n background-color: #e4e4e7;\n}\n\n.tree-label,\n.file-item {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n color: #09090b;\n transition: background-color 0.2s;\n user-select: none;\n text-decoration: none;\n height: 28px;\n}\n\n.tree-label:hover,\n.file-item:hover {\n background-color: #f4f4f5;\n}\n\n.is-selected {\n background-color: #f4f4f5;\n color: #09090b;\n font-weight: 500;\n}\n\n.icon {\n width: 16px;\n height: 16px;\n color: #71717a;\n flex-shrink: 0;\n}\n\n.folder-open-icon {\n display: none;\n}\n.folder-closed-icon {\n display: block;\n}\n\n.tree-toggle:checked ~ .tree-label .folder-open-icon {\n display: block;\n color: #09090b;\n}\n.tree-toggle:checked ~ .tree-label .folder-closed-icon {\n display: none;\n}\n\n.tree-toggle {\n display: none;\n}\n\n.tree-children-wrapper {\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.3s ease-in-out;\n}\n\n.tree-children {\n overflow: hidden;\n}\n\n/* State: Open */\n.tree-toggle:checked ~ .tree-children-wrapper {\n grid-template-rows: 1fr;\n}\n"}

nice-warthog-84

👁 实时预览

📝 源代码