一键在 Manus 中运行任何 Skill

dust-tarui-layout

星标21

分支1

更新时间2026年4月13日 07:32

通用 Tauri 桌面端 UI 布局模板，复现 DiskRookie 风格的无边框窗口外壳、粘性顶栏、主内容滚动区与专家模式分栏结构。适用于从 0 到 1 快速构建类似布局的客户端软件（如笔记管理、即时通讯等）。基于 Tauri 2 + React + MUI + Tailwind。

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

LSTM-Kirigaya

LSTM-Kirigaya/jinhui-skills

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

DiskRookie 应用布局（结构复现指南）

本 Skill 描述 DiskRookie 桌面端（apps/desktop/frontend）的 空间结构、区域划分与交互分区，便于在另一套配色下复刻相同布局。
默认不强制色板与主题 token；但若需求明确，可在本 Skill 上增加项目级外观约束（见下方“项目化外观补充”）。

技术栈与入口（仅结构）

壳：Tauri 2，单窗口，系统标题栏关闭（自绘顶栏）。
根布局：React + ThemeProvider + CssBaseline，根节点为 纵向 flex 全屏。
组件库：MUI 用于按钮/对话框等；Tailwind 用于大量布局 class（flex、grid、min-h-0 等）。
顶栏：本项目 无左侧独立导航栏；全局操作集中在窗口顶部一条自定义 header（应用名、快照入口、外链、队列、设置、系统窗口按钮）。

分册目录（每类内容一个文件夹）

文件夹	说明
window-frame/	Tauri 窗口几何、无边框、透明与最小尺寸
title-bar/	顶栏高度、左/中/右分区、拖拽区、macOS 与 Win/Linux 差异
app-shell/	根容器与主内容区滚动、与 `ExpertMode` 的嵌套关系
expert-workbench/	专家模式：工具条、模式切换、扫描结果分栏与状态机
overlays-settings/	设置/快照/任务队列叠层与典型对话框结构

阅读顺序建议：window-frame → title-bar → app-shell → expert-workbench → overlays-settings。

复现时优先保证的约束

顶栏固定：sticky top-0，高度约 40px（h-10），主内容区在其下方占满剩余高度。
主内容可滚动：外层 overflow-hidden，内层 main 使用 flex-1 + min-h-0 + overflow-y-auto，避免 flex 子项高度撑破窗口。
拖拽：顶栏可拖拽区域使用 data-tauri-drag-region；可点击控件上 stopPropagation 避免误拖。
分栏：扫描结果在宽屏下常见 左侧固定宽度侧栏（约 w-80）+ 右侧自适应，右侧内部再用 响应式 grid。

项目化外观补充（当前仓库约束）

当用户要求与当前示例一致时，除结构外还需满足：

圆角：应用最外层容器使用 macOS 常见圆角 12px（例如 rounded-[12px]）。
外框：最外层容器添加 1px 边框（border），颜色用主题分隔线同级语义色即可。
去阴影：最外层容器不加 CSS box-shadow；Tauri 窗口层 shadow 也应设为 false。
透明配合：若窗口 transparent: true，需确保 html/body/#root 与 CssBaseline 不绘制不透明底色，避免圆角外露区域发灰。

后续：颜色与主题的质询清单（给使用本 Skill 的协作者）

在实现或换肤前，应向产品/用户确认以下问题（本分册不预设答案）：

明暗策略：仅浅色、仅深色、还是跟随系统？是否需要持久化用户选择？
品牌主色：主按钮、链接、聚焦环所使用的主色与对比色（需满足可读性与 WCAG）。
表面层级：页面底、卡片、顶栏、悬停/按下态分别使用几层“表面”，是否区分边框与分隔线。
语义色：成功、警告、错误、信息类提示是否沿用固定语义色，是否与主色解耦。
圆角与密度：全局圆角尺度（小按钮 vs 大卡片）、控件间距是否对齐 MUI theme.shape / 自定义 spacing。
字体：标题与正文族、等宽（路径/Token）是否单独指定；是否加载 Web 字体。
无障碍：焦点可见性、最小点击区域（尤其顶栏约 24–40px 的图标按钮）。

将以上答案映射到 MUI createTheme 与 Tailwind 语义扩展（或 CSS 变量）即可在保持本 Skill 布局不变的前提下替换外观。

同仓库更多 Skills

同仓库

read-arxiv-paper

LSTM-Kirigaya/jinhui-skills

读取 arxiv 论文的 LaTeX 源码并生成结构化中文摘要或中文博客 JSON。当用户给出 arxiv URL（如 https://arxiv.org/abs/2601.07372）并要求阅读、总结、提炼论文观点时，使用默认工作流生成 ./knowledge/summary_{tag}.md；当用户要求生成中文博客、输出 JSON、保留图表并输出到测试工作区时，启用 read-paper 工作流。

2026-07-0321

zhihu-oauth

LSTM-Kirigaya/jinhui-skills

知乎 OAuth 2.0 接入指南。用于帮助开发者完成知乎 Authorization Code 授权流程，包括 APP_ID/APP_KEY 申请、授权页跳转、Token 换取、用户信息获取及社交关系接口调用。适用于 Web 应用第三方登录场景。

2026-06-3021

admin-console-blueprint

LSTM-Kirigaya/jinhui-skills

Use when you need to design, scaffold, refactor, or document a medium-sized admin console built as an independent Vite/React SPA backed by modular Go admin APIs, Cookie session auth, and CLI-provisioned administrator accounts. Helpful for tasks like planning a new admin console, extracting reusable architecture from an existing console, adding `/api/admin/*` modules, or converting a one-off internal page into a structured admin system.

2026-06-2121

rn-app-builder

LSTM-Kirigaya/jinhui-skills

基于真实项目沉淀的 React Native 移动端 App 一键构建方案。覆盖 Expo 初始化、monorepo 共享包、鉴权路由、API 适配、主题系统与构建发布。

2026-06-2021

lark-markdown

LSTM-Kirigaya/jinhui-skills

Build and send Feishu (Lark) interactive rich-text cards using lark_md format. Use when the user needs to: (1) construct Feishu card messages with markdown support, (2) send interactive cards via the Feishu Bot API, (3) format text with bold, inline code, lists, tables, or code blocks inside Feishu cards, or (4) convert markdown content into Feishu card elements.

2026-06-2021

tencent-ses-service

LSTM-Kirigaya/jinhui-skills

腾讯云官方的邮件推送 SES 服务使用 skill。涵盖：SMTP 发送邮件所需的全部环境变量、API 接口设计规范、验证码邮件的完整发送流程（含人机验证、频率控制、Redis 存储）。本 skill 以网络协议 / HTTP API 接口级别描述，不绑定具体编程语言。

2026-06-2021

name	dust-tarui-layout
description	通用 Tauri 桌面端 UI 布局模板，复现 DiskRookie 风格的无边框窗口外壳、粘性顶栏、主内容滚动区与专家模式分栏结构。适用于从 0 到 1 快速构建类似布局的客户端软件（如笔记管理、即时通讯等）。基于 Tauri 2 + React + MUI + Tailwind。
rootUrl	https://raw.githubusercontent.com/LSTM-Kirigaya/jinhui-skills/main/skills/dust-tarui-layout/SKILL.md
tags	["tauri","desktop","layout","template","react"]
model	deepseek-chat

DiskRookie 应用布局（结构复现指南）

技术栈与入口（仅结构）

壳：Tauri 2，单窗口，系统标题栏关闭（自绘顶栏）。
根布局：React + ThemeProvider + CssBaseline，根节点为 纵向 flex 全屏。
组件库：MUI 用于按钮/对话框等；Tailwind 用于大量布局 class（flex、grid、min-h-0 等）。
顶栏：本项目 无左侧独立导航栏；全局操作集中在窗口顶部一条自定义 header（应用名、快照入口、外链、队列、设置、系统窗口按钮）。

分册目录（每类内容一个文件夹）

文件夹	说明
window-frame/	Tauri 窗口几何、无边框、透明与最小尺寸
title-bar/	顶栏高度、左/中/右分区、拖拽区、macOS 与 Win/Linux 差异
app-shell/	根容器与主内容区滚动、与 `ExpertMode` 的嵌套关系
expert-workbench/	专家模式：工具条、模式切换、扫描结果分栏与状态机
overlays-settings/	设置/快照/任务队列叠层与典型对话框结构

阅读顺序建议：window-frame → title-bar → app-shell → expert-workbench → overlays-settings。

复现时优先保证的约束

顶栏固定：sticky top-0，高度约 40px（h-10），主内容区在其下方占满剩余高度。
主内容可滚动：外层 overflow-hidden，内层 main 使用 flex-1 + min-h-0 + overflow-y-auto，避免 flex 子项高度撑破窗口。
拖拽：顶栏可拖拽区域使用 data-tauri-drag-region；可点击控件上 stopPropagation 避免误拖。
分栏：扫描结果在宽屏下常见 左侧固定宽度侧栏（约 w-80）+ 右侧自适应，右侧内部再用 响应式 grid。

项目化外观补充（当前仓库约束）

当用户要求与当前示例一致时，除结构外还需满足：

圆角：应用最外层容器使用 macOS 常见圆角 12px（例如 rounded-[12px]）。
外框：最外层容器添加 1px 边框（border），颜色用主题分隔线同级语义色即可。
去阴影：最外层容器不加 CSS box-shadow；Tauri 窗口层 shadow 也应设为 false。
透明配合：若窗口 transparent: true，需确保 html/body/#root 与 CssBaseline 不绘制不透明底色，避免圆角外露区域发灰。

后续：颜色与主题的质询清单（给使用本 Skill 的协作者）

在实现或换肤前，应向产品/用户确认以下问题（本分册不预设答案）：

明暗策略：仅浅色、仅深色、还是跟随系统？是否需要持久化用户选择？
品牌主色：主按钮、链接、聚焦环所使用的主色与对比色（需满足可读性与 WCAG）。
表面层级：页面底、卡片、顶栏、悬停/按下态分别使用几层“表面”，是否区分边框与分隔线。
语义色：成功、警告、错误、信息类提示是否沿用固定语义色，是否与主色解耦。
圆角与密度：全局圆角尺度（小按钮 vs 大卡片）、控件间距是否对齐 MUI theme.shape / 自定义 spacing。
字体：标题与正文族、等宽（路径/Token）是否单独指定；是否加载 Web 字体。
无障碍：焦点可见性、最小点击区域（尤其顶栏约 24–40px 的图标按钮）。

将以上答案映射到 MUI createTheme 与 Tailwind 语义扩展（或 CSS 变量）即可在保持本 Skill 布局不变的前提下替换外观。