style: update border-radius and padding values across components

- standardize border-radius from 8px to 6px for consistent styling
- adjust padding values from 1rem to 0.75rem for better visual hierarchy
- remove redundant overflow-y properties for cleaner code
This commit is contained in:
sanbuphy
2026-02-14 20:23:34 +08:00
parent 81e4284b87
commit d35211071a
373 changed files with 3441 additions and 5629 deletions
@@ -181,12 +181,12 @@ parsePath()
<style scoped>
.dynamic-routes-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -230,7 +230,7 @@ parsePath()
.param-card {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
cursor: pointer;
transition: all 0.2s;
@@ -277,8 +277,8 @@ parsePath()
.demo-section {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
}
.demo-section h5 {
@@ -163,12 +163,12 @@ const getPageContent = (path) => {
<style scoped>
.hash-vs-history-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -206,7 +206,7 @@ const getPageContent = (path) => {
.mode-column {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
}
@@ -89,12 +89,12 @@ const comparisonData = [
<style scoped>
.mpa-routing-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -132,7 +132,7 @@ const comparisonData = [
.mode-box {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--vp-c-divider);
}
@@ -196,12 +196,12 @@ const navigateTo = (path) => {
<style scoped>
.nested-routes-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -239,14 +239,14 @@ const navigateTo = (path) => {
.routes-hierarchy {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
.tree-view {
max-height: 280px;
overflow-y: auto;
}
.tree-node {
@@ -284,7 +284,7 @@ const navigateTo = (path) => {
.render-preview {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
overflow: hidden;
}
@@ -314,7 +314,7 @@ const navigateTo = (path) => {
}
.router-view-hierarchy {
padding: 1rem;
padding: 0.75rem;
min-height: 180px;
}
@@ -154,12 +154,12 @@ const currentGuard = computed(() => {
<style scoped>
.route-guards-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -204,7 +204,7 @@ const currentGuard = computed(() => {
.guard-card {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
cursor: pointer;
transition: all 0.2s;
@@ -251,8 +251,8 @@ const currentGuard = computed(() => {
.guard-detail {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -318,8 +318,8 @@ const currentGuard = computed(() => {
.execution-flow {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1rem;
}
@@ -173,12 +173,12 @@ testMatch()
<style scoped>
.route-matching-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -216,7 +216,7 @@ testMatch()
.input-section, .result-section {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
}
@@ -318,7 +318,7 @@ h5 {
.match-fail {
text-align: center;
padding: 1rem;
padding: 0.75rem;
color: var(--vp-c-text-3);
}
@@ -329,7 +329,7 @@ h5 {
.routes-list {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1rem;
@@ -89,12 +89,12 @@ const layers = [
<style scoped>
.router-architecture-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -133,7 +133,7 @@ const layers = [
.layer {
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
}
@@ -184,7 +184,7 @@ const layers = [
.data-flow {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1rem;
@@ -117,12 +117,12 @@ const getUrlSuffix = () => {
<style scoped>
.routing-modes-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -164,7 +164,7 @@ const getUrlSuffix = () => {
gap: 0.5rem;
padding: 0.5rem 1rem;
border: 2px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg);
cursor: pointer;
transition: all 0.2s;
@@ -192,8 +192,8 @@ const getUrlSuffix = () => {
.mode-detail {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1rem;
}
@@ -73,12 +73,12 @@ const steps = [
<style scoped>
.spa-navigation-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
max-height: 600px;
overflow-y: auto;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -120,7 +120,7 @@ const steps = [
gap: 0.75rem;
padding: 0.75rem;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border-left: 3px solid var(--vp-c-brand);
transition: all 0.2s;
}
@@ -163,8 +163,8 @@ const steps = [
.highlight-box {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
border: 1px solid var(--vp-c-divider);
margin-bottom: 1rem;
}