Skip to content

Commit 8e89f46

Browse files
committed
Enhance App layout and settings configuration
- Updated App.vue to support a fixed-height layout for the playground and demo editor views, improving user experience. - Added new Bash commands ("lsof:*" and "WebFetch(domain:localhost)") to settings.local.json for enhanced functionality.
1 parent f5b8b6d commit 8e89f46

File tree

2 files changed

+23
-4
lines changed

2 files changed

+23
-4
lines changed

.claude/settings.local.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,9 @@
6262
"Bash(gh pr:*)",
6363
"Bash(git stash:*)",
6464
"Bash(git remote:*)",
65-
"Bash(git pull:*)"
65+
"Bash(git pull:*)",
66+
"Bash(lsof:*)",
67+
"WebFetch(domain:localhost)"
6668
]
6769
}
6870
}

apps/playground/src/App.vue

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<a-theme :appearance="appearance">
3-
<div class="app-layout">
3+
<div class="app-layout" :class="{ 'app-layout-fixed': fixedHeight }">
44
<AppSidebar />
55
<main class="app-main">
66
<RouterView />
@@ -13,26 +13,43 @@
1313
</template>
1414

1515
<script setup lang="ts">
16-
import { ref } from 'vue'
16+
import { ref, computed } from 'vue'
17+
import { useRoute } from 'vue-router'
1718
import AppSidebar from '#/components/AppSidebar.vue'
1819
1920
const appearance = ref('light')
2021
const toggleTheme = () => {
2122
appearance.value = appearance.value === 'light' ? 'dark' : 'light'
2223
}
24+
25+
const route = useRoute()
26+
// Editor view (playground + per-demo editor) needs a fixed-height split layout.
27+
// Browse/compare views let the window scroll so components like Affix work.
28+
const fixedHeight = computed(
29+
() => route.path === '/playground' || !!route.params.demo,
30+
)
2331
</script>
2432

2533
<style>
2634
.app-layout {
2735
display: flex;
36+
min-height: 100vh;
37+
}
38+
39+
.app-layout-fixed {
2840
height: 100vh;
41+
min-height: 0;
42+
overflow: hidden;
2943
}
3044
3145
.app-main {
3246
flex: 1;
3347
margin-left: 220px;
34-
overflow: auto;
48+
}
49+
50+
.app-layout-fixed .app-main {
3551
height: 100vh;
52+
overflow: hidden;
3653
}
3754
3855
.theme-toggle {

0 commit comments

Comments
 (0)