✨ 可展开描述 & 使用 twcss 简化

wling-art · wling-art · commit ec1f807364f5 · 2025-12-15T01:05:57.000+08:00
diff --git a/docs-java/start/basic/server-dir-structure.mdx b/docs-java/start/basic/server-dir-structure.mdx
@@ -10,12 +10,6 @@ import { serverDirStructureData } from "@site/src/data/structures/serverDirStruc
 
 我们先来简单看一眼 插件端 的文件夹结构 (以 Purpur 为例)：
 
-:::tip
-
-将鼠标悬停在 **ⓘ** 图标上查看详细说明！
-
-:::
-
 <StructureExplorer data={serverDirStructureData} />
 
 对于类似 Catserver 的混合服务器，文件夹结构是类似的，基本就多了 `/mods` 文件夹，少了 Bukkit 的下游服务器特有的配置 (如 `purpur.yml` 等)。
@@ -26,72 +20,6 @@ import { serverDirStructureData } from "@site/src/data/structures/serverDirStruc
 
 :::
 
-## 根目录下的一些文件
-
--   `.console_history`
-
-存放了控制台 (又叫后台) 曾经使用过的指令，方便你使用键盘中的 ↑ 键快捷查找曾使用的指令，也可用于查看后台异常。
-
--   `banned-ips.json`
-
-以 JSON 格式存放的被 ban IP 玩家的 UUID 及游戏名称等相关信息，一旦玩家被 banip，此 IP 将无法再进入服务器。
-
--   `banned-players.json`
-
-以 JSON 格式存放了被 ban 玩家的 UUID 及游戏名称等相关信息，离线服 ban 玩家后换 ID 即可进入服务器，而正版服无法通过改名重新进入服务器。
-
--   `bukkit.yml`
-
-由 Bukkit 派生得到的服务端都有的文件。保存着 Bukkit 所提供的最基本的设置选项。
-
--   `commands.yml`
-
-它提供了一种快速而简单的方法来强制服务器使用 Mojang 提供的命令 (而不是 Bukkit 中内置的命令) 而不产生冲突。
-
--   `eula.txt`
-
-在首次开服的时候，我们需要同意 EULA 协议。
-
--   `help.yml`
-
-一些插件的帮助信息会出现在这里面，一般不需要进行什么修改。
-
--   `ops.json`
-
-以 JSON 格式存放了 OP 玩家的 UUID 及游戏名称等相关信息。
-
--   `purpur.jar`
-
-你可以改名叫任何名字 (只要以 `.jar` 结尾，且在启动脚本中对应修改)
-
--   `purpur.yml`
-
-Purpur 服务器特有的配置文件，极其详细的配置项，功能非常丰富，几乎可以替代数款插件。
-
--   `permissions.yml`
-
-是默认的权限定义 YAML 文件，在启动时自动生成。它的主要功能是将权限节点组合到一个文件中，以便权限插件 (以及使用权限的插件) 可以在整个系统中使用它。
-
--   [`server.properties`](https://minecraft-zh.gamepedia.com/Server.properties)
-
-服务端的一些基本设置就在里面，如设置端口，设置游戏难度，设置游戏模式 (生存、创造等) 等。
-
--   `spigot.yml`
-
-Spigot 服务器都有的配置文件。
-
--   `usercache.json`
-
-储存着用名字及 UUID 信息的缓存文件。
-
--   `version_history`
-
-一些 Minecraft 和服务端核心的版本信息，一般记录着曾经使用过的版本。
-
--   `whitelist.json`
-
-白名单列表。(如果你在[`server.properties`](https://minecraft-zh.gamepedia.com/Server.properties)中开启了白名单，你就可以在该文件中添加和管理谁被允许或不被允许进入服务器。)
-
 至此，大部分的以 Bukkit 为基础的服务器核心服务端的结构已经大致呈现在你眼前。
 
 :::tip
diff --git a/src/components/StructureExplorer.tsx b/src/components/StructureExplorer.tsx
@@ -47,6 +47,7 @@ const PrefixLine = ({ levels }: PrefixLineProps): JSX.Element => {
 
 export default function ConfigurationStructureDiagram({ data = [] }: StructureExplorerProps = {}): JSX.Element {
     const [popupNode, setPopupNode] = useState<ExplorerNode | null>(null);
+    const [showDescriptionBelow, setShowDescriptionBelow] = useState(false);
 
     const renderNode = (node: ExplorerNode, level: number = 0, isLast: boolean = true, ancestors: boolean[] = []) => {
         const isFolder = node.type === "folder";
@@ -109,31 +110,40 @@ export default function ConfigurationStructureDiagram({ data = [] }: StructureEx
                                 <span className={"config-node-contents-wrapper"}>{node.name}</span>
                             </span>
                         )}
-                        {hasDescription && (
-                            <div style={{ position: "relative", display: "inline-block" }}>
-                                <span
-                                    className={"config-explorer-popup-window-open-tag"}
-                                    onMouseEnter={handleNodeOpening}
-                                >
-                                    ⓘ
-                                </span>
-                                <div className={"config-explorer-popup-window-container"}>
-                                    <div
-                                        className={clsx(
-                                            "config-explorer-popup-window",
-                                            popupNode !== node && "display--none"
-                                        )}
+                        {hasDescription &&
+                            (showDescriptionBelow ? null : (
+                                <div style={{ position: "relative", display: "inline-block" }}>
+                                    <span
+                                        className={"config-explorer-popup-window-open-tag"}
+                                        onMouseEnter={handleNodeOpening}
                                     >
-                                        <strong>简介:</strong>
-                                        <br />
-                                        {node.description}
+                                        ⓘ
+                                    </span>
+                                    <div className={"config-explorer-popup-window-container"}>
+                                        <div
+                                            className={clsx(
+                                                "config-explorer-popup-window",
+                                                popupNode !== node && "display--none"
+                                            )}
+                                        >
+                                            <strong>简介:</strong>
+                                            <br />
+                                            {node.description}
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        )}
+                            ))}
                     </div>
                 </div>
 
+                {showDescriptionBelow && hasDescription && (
+                    <div className="config-explorer-description-below">
+                        <PrefixLine levels={ancestors} />
+                        <span className="tree-line">{isLast ? "    " : "│   "}</span>
+                        <div className="config-explorer-description-text">{node.description}</div>
+                    </div>
+                )}
+
                 {hasChildren &&
                     node.children &&
                     node.children.map((child, index) => (
@@ -147,6 +157,29 @@ export default function ConfigurationStructureDiagram({ data = [] }: StructureEx
 
     return (
         <div>
+            <div style={{ marginBottom: "12px" }}>
+                <button
+                    onClick={() => setShowDescriptionBelow(!showDescriptionBelow)}
+                    style={{
+                        padding: "6px 12px",
+                        fontSize: "14px",
+                        borderRadius: "6px",
+                        border: "1px solid",
+                        borderColor: showDescriptionBelow
+                            ? "var(--ifm-color-primary)"
+                            : "var(--ifm-color-emphasis-300)",
+                        backgroundColor: showDescriptionBelow
+                            ? "var(--ifm-color-primary)"
+                            : "var(--ifm-background-color)",
+                        color: showDescriptionBelow ? "white" : "var(--ifm-font-color-base)",
+                        cursor: "pointer",
+                        fontWeight: "500",
+                        transition: "all 0.2s ease"
+                    }}
+                >
+                    {showDescriptionBelow ? "📖 隐藏说明" : "📖 显示说明"}
+                </button>
+            </div>
             <pre className={"config-explorer-code-outer-container"}>
                 {data.map((item) => (
                     <div key={item.name}>{renderNode(item)}</div>
diff --git a/src/css/structure_explorer.css b/src/css/structure_explorer.css
@@ -1,161 +1,105 @@
+@layer theme, base, components, utilities;
+
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
 /* Outer Container */
 .config-explorer-code-outer-container {
-    overflow: visible;
-    display: flex;
-    flex-direction: column;
+    @apply overflow-visible flex flex-col;
 }
 
 /* File Node */
 .config-explorer-file-node {
-    display: flex;
-    align-items: center;
-    border-radius: 10px;
-    width: fit-content;
-    flex-shrink: 0;
-    white-space: nowrap;
-    cursor: default;
+    @apply flex items-center rounded-[10px] w-fit shrink-0 whitespace-nowrap cursor-default;
 }
 
-.config-explorer-file-node-with-link {
-    font-weight: bold;
+.config-explorer-file-node-with-link,
+.config-explorer-file-folder-node-with-link {
+    @apply font-bold;
 }
 
-.config-explorer-file-node-with-link:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    text-decoration: none;
+.config-explorer-file-node-with-link:hover,
+.config-explorer-file-folder-node-with-link:hover {
+    @apply bg-black/10 cursor-pointer no-underline;
 }
 
 /* File Folder Node */
 .config-explorer-file-folder-node {
-    display: flex;
-    align-items: center;
-    width: fit-content;
+    @apply flex items-center w-fit cursor-default no-underline;
     color: var(--config-node-highlight-text-color);
 }
 
-.config-explorer-file-folder-node:hover {
-    cursor: default;
-    text-decoration: none;
-    color: var(--config-node-highlight-text-color);
-}
-
-/* File Folder Node with Link */
 .config-explorer-file-folder-node-with-link {
-    font-weight: bold;
-    color: var(--ifm-link-color);
-}
-
-.config-explorer-file-folder-node-with-link:hover {
-    background-color: rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-    text-decoration: none;
     color: var(--ifm-link-color);
 }
 
-/* Popup Window Container */
+/* Popup Window */
 .config-explorer-popup-window-container {
-    position: relative;
-    display: inline-block;
-    vertical-align: middle;
+    @apply relative inline-block align-middle;
 }
 
-/* Popup Window */
 .config-explorer-popup-window {
+    @apply absolute p-2.5 rounded border-0 whitespace-normal z-20;
     background-color: var(--config-node-popup-background-color);
-    padding: 10px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-    border-radius: 5px;
-    margin-left: 5px;
-    margin-top: -5px;
-    width: max-content;
     min-width: 200px;
     max-width: 500px;
-    z-index: 20;
-    white-space: normal;
-    position: absolute;
+    width: max-content;
     left: 20px;
     top: -10px;
+    margin-left: 5px;
+    margin-top: -5px;
 }
 
 .config-explorer-popup-window-open-tag {
-    z-index: 5;
-    margin-left: 3px;
-}
-
-.config-explorer-popup-window-open-tag:hover {
-    font-weight: bold;
-    cursor: pointer;
-}
-
-/* Tree Line Components */
-.tree-line {
-    font-size: 14px;
-    color: #bbbbbb;
-    display: inline-block;
-    font-family: monospace;
-    letter-spacing: 0;
-    line-height: 1;
+    @apply z-5 ml-0.75 cursor-pointer font-normal hover:font-bold;
 }
 
+/* Tree Components */
+.tree-line,
 .prefix-line {
-    font-size: 14px;
-    color: #bbbbbb;
-    display: inline-block;
-    font-family: monospace;
-    letter-spacing: 0;
-    line-height: 1;
+    @apply text-sm text-slate-400 inline-block font-mono leading-none;
 }
 
 /* Node Icon */
 .config-explorer-node-icon {
-    font-size: 23px;
+    @apply text-2xl mr-1.25;
+    color: var(--config-node-highlight-text-color);
 }
 
-/* Node */
-.config-explorer-node {
-    align-items: flex-start;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
+/* Node Structure */
+.config-explorer-node,
+.config-explorer-node-noflex {
+    @apply items-start relative flex flex-col shrink-0;
+}
+
+.config-explorer-node-noflex {
+    @apply my-1.25;
 }
 
 .config-explorer-node-header {
-    display: flex;
-    align-items: center;
-    margin: 0;
-    padding: 0;
+    @apply flex items-center;
 }
 
 .config-explorer-node-content {
-    display: flex;
-    align-items: center;
+    @apply flex items-center;
 }
 
-/* Node without Flex */
-.config-explorer-node-noflex {
-    align-items: flex-start;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    margin: 5px 0 5px 0;
+.config-node-contents-wrapper {
+    @apply mx-1.25 flex items-center text-base;
 }
 
-.config-node-contents-wrapper {
-    margin: 0 5px 0 0;
-    display: flex;
-    align-items: center;
-    font-size: 15px;
+/* Description Below */
+.config-explorer-description-below {
+    @apply flex items-start my-0.5 py-0.5 text-xs leading-relaxed;
 }
 
-.config-explorer-icon {
-    /* Make it go back to the original color */
-    color: var(--config-node-highlight-text-color);
-    margin-right: 5px;
+.config-explorer-description-text {
+    @apply text-gray-400 whitespace-normal wrap-break-word flex-1;
+    max-width: 600px;
 }
 
-/* Display None */
+/* Utility */
 .display--none {
-    display: none;
+    @apply hidden;
 }
