让管理面板看起来像同一个地方

2026年9月6日 admindesignsvelte

admin面板有段时间让我感到困扰。公共网站最后看起来像我的,绿色,山,整个事情,然后我会点进admin区域写篇文章,它就像走进了一个不同的网站。通用的仪表板,没有特色,公共网站和我用来运行我的网站的工具之间的一个硬视觉切割。我想进入admin感觉像同一个地方,只是侧边栏里有不同的东西。

诚实的原因它是两个不同的外观是我把它们作为两个不同的shell构建。公共布局画了侧边栏和背景和阅读面板,而admin扔掉所有那些并画了它自己的普通版本。所以第一步是把shell拉出到一个两者都使用的组件。它以nav链接作为prop来取,而且那基本是唯一的东西在他们之间不同。

<!-- both public and admin render this now -->
<SiteShell {nav} {account} wide={isAdmin}>
  {@render children()}
</SiteShell>

公共传递它的首页、标签、存档链接,admin传递仪表板、帖子、评论等等。同样的背景,同样的磨砂面板,同样的轨道。现在唯一改变的事情当你穿过进admin是哪个链接在侧边栏,那完全是我在后的。

The admin dashboard: same rail, same scenery, same frosted panel as the public site

有件事我小心。我不想完全焊接admin到公共网站,因为某个时刻我可能想把admin移到某处更被锁定用于安全原因,它自己的子域或它自己的部署。所以共享的部分只有外观。Admin仍然有它自己的路由组和它自己的auth守卫,两个都没动。共享shell是一个愚蠢的可视化包装器那不知道或关心它是否显示公共网站或admin。缝隙仍然在那边在它重要的地方,它只是不可见现在。

然后编辑器。markdown编辑器是CodeMirror,而且我从未真的给它主题,所以它坐在那边在它的默认浅色看不管网站其余的做什么。在暗模式中它是页面中间的一个明亮的白色盒子。不好。我在网站颜色中给了它一个合适的主题,但我的第一个尝试只选了主题一次,当它加载时:

// wrong: theme is set once and never follows the light/dark toggle
new EditorView({ extensions: [markdown(), myTheme] });

把网站翻到暗而且编辑器停留顽固地浅。CodeMirror在编辑器状态内保持它的配置,所以你不能只是重新分配一个变量,你必须给它一个重新配置。修复是把主题放在一个房间里并交换它无论何时网站主题改变:

const themeComp = new Compartment();
// ...extensions: [markdown(), themeComp.of(lightTheme)]
view.dispatch({ effects: themeComp.reconfigure(isDark ? darkTheme : lightTheme) });

现在它跟随转换,暗编辑器在暗模式,而写作表面是固体所以山不显示通过实际文本框当我在它里面输入时。我现在在做,写这个。

0 条评论

登录 后即可评论。

登录

忘记密码?

还没有账号?