lq/nl-blogs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

亮色、暗色模式适配

Browse Source
This commit is contained in:
李琦
2026-07-14 12:47:53 +08:00
parent 02cf290bad
commit b88a72e613
34 changed files with 1026 additions and 538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
client/src/components/CodePreview.vue
View File

@@ -5,7 +5,7 @@
<div class="absolute inset-0 pointer-events-none z-0 opacity-20 mix-blend-overlay bg-noise"></div>
<!-- 顶部工具栏 -->
<div class="relative z-10 flex items-center justify-between px-6 py-4 bg-black/40 backdrop-blur-xl border-b border-white/5 rounded-t-2xl">
<div class="relative z-10 flex items-center justify-between px-6 py-4 bg-black/40 backdrop-blur-xl border-b border-art-border rounded-t-2xl">
<div class="flex items-center gap-4">
<!-- 装饰性 Mac 窗口按钮 -->
<div class="flex gap-2">
@@ -13,7 +13,7 @@
<div class="w-3 h-3 rounded-full bg-[#ffbd2e]"></div>
<div class="w-3 h-3 rounded-full bg-[#27c93f]"></div>
</div>
<span class="text-xs font-mono text-white/40 tracking-widest uppercase ml-2">Code Playground</span>
<span class="text-xs font-mono text-art-muted tracking-widest uppercase ml-2">Code Playground</span>
<!-- 运行状态指示器 -->
<div v-if="isRunning" class="flex items-center gap-2 px-2 py-0.5 rounded-full bg-yellow-500/10 border border-yellow-500/20">
@@ -44,10 +44,10 @@
</div>
<!-- 主体内容区 -->
<div class="relative z-10 flex-1 flex flex-col md:flex-row bg-[#050505]/80 backdrop-blur-sm rounded-b-2xl overflow-hidden border border-t-0 border-white/5">
<div class="relative z-10 flex-1 flex flex-col md:flex-row bg-art-bg/80 backdrop-blur-sm rounded-b-2xl overflow-hidden border border-t-0 border-art-border">
<!-- 左侧：代码编辑器 -->
<div class="w-full md:w-1/2 relative flex flex-col border-b md:border-b-0 md:border-r border-white/5 group">
<div class="w-full md:w-1/2 relative flex flex-col border-b md:border-b-0 md:border-r border-art-border group">
<div class="absolute inset-0 bg-[#09090b]">
<!-- 编辑器容器 -->
<div class="relative w-full h-full font-mono text-sm leading-relaxed custom-scrollbar overflow-hidden">
@@ -73,13 +73,13 @@
</div>
<!-- 右侧：实时预览 / 终端 -->
<div class="w-full md:w-1/2 bg-[#121214] flex flex-col relative">
<div class="h-8 flex items-center justify-between px-4 bg-white/5 border-b border-white/5 shrink-0">
<span class="text-[10px] font-mono text-[#d4b383] tracking-widest uppercase">
<div class="w-full md:w-1/2 bg-art-surface flex flex-col relative">
<div class="h-8 flex items-center justify-between px-4 bg-art-text/5 border-b border-art-border shrink-0">
<span class="text-[10px] font-mono text-art-accent tracking-widest uppercase">
{{ isConsoleMode ? 'TERMINAL OUTPUT' : 'WEB PREVIEW' }}
</span>
<div class="flex items-center gap-2">
<button @click="clearConsole" v-if="isConsoleMode" class="text-[10px] text-white/40 hover:text-white mr-2">CLEAR</button>
<button @click="clearConsole" v-if="isConsoleMode" class="text-[10px] text-art-muted hover:text-art-text mr-2">CLEAR</button>
<span v-if="error" class="flex items-center gap-1 text-[#ef4444] text-[10px]">
<span class="w-1.5 h-1.5 rounded-full bg-[#ef4444]"></span> ERROR
</span>