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
@@ -156,7 +156,7 @@ const current = ref(modules[0])
|
||||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
|
||||
@@ -261,7 +261,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
padding: 12px;
|
||||
min-height: 120px;
|
||||
max-height: 160px;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.msg-row {
|
||||
@@ -421,7 +421,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: #dcfce7;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 12px;
|
||||
color: #166534;
|
||||
@@ -433,7 +433,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@@ -588,7 +588,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
|
||||
/* 对话区 */
|
||||
.chat-area {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@@ -613,7 +613,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
|
||||
|
||||
.messages {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
@@ -732,7 +732,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
|
||||
.memory-panel {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@@ -778,7 +778,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
|
||||
padding: 10px;
|
||||
min-height: 80px;
|
||||
max-height: 120px;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.empty {
|
||||
@@ -1060,7 +1060,7 @@ const truncate = (str, len) => str?.length > len ? str.slice(0, len) + '...' : s
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.practice-icon {
|
||||
|
||||
@@ -435,7 +435,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
|
||||
.phase {
|
||||
margin-bottom: 12px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s;
|
||||
@@ -525,7 +525,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
@@ -685,7 +685,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
|
||||
.final-output {
|
||||
padding: 12px;
|
||||
background: #dcfce7;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.output-bubble {
|
||||
@@ -704,7 +704,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
|
||||
|
||||
.control-btn {
|
||||
padding: 10px 24px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -762,7 +762,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
|
||||
.explanation-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -788,7 +788,7 @@ const truncate = (str, len) => str.length > len ? str.slice(0, len) + '...' : st
|
||||
.comparison-section {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
|
||||
@@ -304,7 +304,7 @@ reset()
|
||||
.goal-bar {
|
||||
background: var(--vp-c-brand-soft);
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
@@ -403,7 +403,7 @@ reset()
|
||||
.log-box, .thought-box {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -431,7 +431,7 @@ reset()
|
||||
padding: 10px 12px;
|
||||
min-height: 100px;
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.empty {
|
||||
@@ -534,7 +534,7 @@ reset()
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@@ -476,7 +476,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
.thinking-section {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -516,7 +516,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
.tools-section {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -530,7 +530,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
transition: all 0.3s;
|
||||
@@ -603,7 +603,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
padding: 12px;
|
||||
background: #dcfce7;
|
||||
border: 1px solid #86efac;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.response-header {
|
||||
@@ -628,7 +628,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
@@ -651,7 +651,7 @@ const wait = (ms) => new Promise(r => setTimeout(r, ms))
|
||||
margin-top: 16px;
|
||||
padding: 12px 16px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -163,7 +163,7 @@ const steps = [
|
||||
.n {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
|
||||
@@ -266,7 +266,7 @@ const reset = () => { currentStep.value = 0 }
|
||||
.user-input-bar {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
@@ -460,7 +460,7 @@ const reset = () => { currentStep.value = 0 }
|
||||
.final-result {
|
||||
background: var(--vp-c-brand-soft);
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
@@ -513,7 +513,7 @@ const reset = () => { currentStep.value = 0 }
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@@ -179,7 +179,7 @@ const reset = () => {
|
||||
.icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background: var(--vp-c-bg-soft);
|
||||
|
||||
@@ -140,7 +140,7 @@ const getInsight = (index) => {
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.word-token {
|
||||
|
||||
@@ -234,7 +234,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -213,7 +213,7 @@ watch([featureCount, valuesPerFeature], () => {
|
||||
text-align: center;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.formula-suffix {
|
||||
@@ -234,7 +234,7 @@ watch([featureCount, valuesPerFeature], () => {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
+1
-1
@@ -208,7 +208,7 @@ const mode = ref('discriminative')
|
||||
gap: 10px;
|
||||
background-color: var(--vp-c-bg);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.io-box {
|
||||
|
||||
@@ -149,7 +149,7 @@ const handleTabClick = (tab) => {
|
||||
}
|
||||
|
||||
.main-card {
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
||||
+1
-1
@@ -334,7 +334,7 @@ const isConnectionFocus = (c) => {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
@@ -274,7 +274,7 @@ const train = () => {
|
||||
.result-box {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -300,7 +300,7 @@ const currentTool = computed(() =>
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -330,7 +330,7 @@ const currentTool = computed(() =>
|
||||
.tool-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -188,7 +188,7 @@ const errorCodeItems = [
|
||||
flex: 1;
|
||||
padding: 12px;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -227,7 +227,7 @@ const errorCodeItems = [
|
||||
|
||||
.comparison {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -268,7 +268,7 @@ const currentMethod = computed(() =>
|
||||
.method-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -306,7 +306,7 @@ const currentMethod = computed(() =>
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
opacity: 0.6;
|
||||
transition: all 0.2s ease;
|
||||
@@ -361,7 +361,7 @@ const currentMethod = computed(() =>
|
||||
.example-item {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
@@ -82,7 +82,7 @@
|
||||
|
||||
.section {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
<style scoped>
|
||||
.demo-container {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
}
|
||||
@@ -77,7 +77,7 @@
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
||||
@@ -237,7 +237,7 @@ function getStatusClass(status) {
|
||||
.response-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -194,9 +194,9 @@ const activePrinciple = computed(() =>
|
||||
.restful-design-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -225,8 +225,8 @@ const activePrinciple = computed(() =>
|
||||
.principle-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
@@ -260,7 +260,7 @@ const activePrinciple = computed(() =>
|
||||
.detail-panel {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -417,7 +417,7 @@ function toggleExpand(number) {
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -465,7 +465,7 @@ function toggleExpand(number) {
|
||||
.status-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
@@ -239,7 +239,7 @@ const currentStrategy = computed(() =>
|
||||
.strategy-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@@ -290,7 +290,7 @@ const currentStrategy = computed(() =>
|
||||
.strategy-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@@ -250,7 +250,7 @@ function sendRequest() {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.2s;
|
||||
@@ -303,7 +303,7 @@ function sendRequest() {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
max-height: 200px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -150,7 +150,7 @@ const isHuman = ref(false)
|
||||
|
||||
.api-doc {
|
||||
background: #1e293b;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
color: #e2e8f0;
|
||||
font-family: monospace;
|
||||
|
||||
@@ -237,7 +237,7 @@
|
||||
.method-examples {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
@@ -249,7 +249,7 @@
|
||||
|
||||
.method-tip {
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@@ -339,7 +339,7 @@ tr:last-child td {
|
||||
.tips {
|
||||
background: var(--vp-c-bg);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: var(--vp-c-text-2);
|
||||
|
||||
@@ -345,7 +345,7 @@ function sendRequest() {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
margin-top: 8px;
|
||||
@@ -415,7 +415,7 @@ function sendRequest() {
|
||||
padding: 12px;
|
||||
margin-bottom: 12px;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
|
||||
@@ -143,7 +143,7 @@ function callApi() {
|
||||
.response-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@@ -349,7 +349,7 @@ async function runDemo() {
|
||||
background: #1e293b;
|
||||
color: #e2e8f0;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
@@ -371,7 +371,7 @@ async function runDemo() {
|
||||
.summary {
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
@@ -443,7 +443,7 @@ async function runDemo() {
|
||||
.result-body {
|
||||
background: #f0fdf4;
|
||||
border: 2px solid #86efac;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
|
||||
@@ -163,7 +163,7 @@ function send() {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -183,7 +183,7 @@ function send() {
|
||||
|
||||
.result-box {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@@ -378,7 +378,7 @@ onMounted(() => {
|
||||
|
||||
.flow-section {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -418,7 +418,7 @@ onMounted(() => {
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -458,14 +458,14 @@ onMounted(() => {
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.audio-preview {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -479,7 +479,7 @@ onMounted(() => {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
@@ -512,7 +512,7 @@ onMounted(() => {
|
||||
|
||||
.result-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
@@ -540,7 +540,7 @@ textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
@@ -654,7 +654,7 @@ textarea {
|
||||
|
||||
.comparison-section {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -673,7 +673,7 @@ textarea {
|
||||
|
||||
.comp-card {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -705,7 +705,7 @@ textarea {
|
||||
|
||||
.pipeline-comparison {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -724,7 +724,7 @@ textarea {
|
||||
|
||||
.pipeline {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -761,7 +761,7 @@ textarea {
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -462,7 +462,7 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
background: var(--vp-c-bg);
|
||||
@@ -504,7 +504,7 @@ onUnmounted(() => {
|
||||
.action-btn {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
@@ -557,7 +557,7 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
@@ -592,7 +592,7 @@ onUnmounted(() => {
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -692,7 +692,7 @@ onUnmounted(() => {
|
||||
.embedding-viz {
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.viz-title {
|
||||
@@ -720,7 +720,7 @@ onUnmounted(() => {
|
||||
.waveform-container {
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.waveform-container canvas {
|
||||
@@ -777,7 +777,7 @@ onUnmounted(() => {
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -334,7 +334,7 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
.audio-tokenization-demo {
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -352,7 +352,7 @@ onMounted(() => {
|
||||
|
||||
.codec-flow {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -385,7 +385,7 @@ onMounted(() => {
|
||||
|
||||
.step-visual {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
min-height: 80px;
|
||||
@@ -484,7 +484,7 @@ onMounted(() => {
|
||||
|
||||
.bitrate-comparison {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -502,7 +502,7 @@ onMounted(() => {
|
||||
|
||||
.bitrate-card {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@@ -549,7 +549,7 @@ onMounted(() => {
|
||||
|
||||
.token-visualization {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -561,7 +561,7 @@ onMounted(() => {
|
||||
|
||||
.token-display {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -619,7 +619,7 @@ onMounted(() => {
|
||||
|
||||
.applications {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -637,7 +637,7 @@ onMounted(() => {
|
||||
|
||||
.app-card {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<style scoped>
|
||||
.waveform-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
margin: 20px 0;
|
||||
|
||||
@@ -319,7 +319,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
<style scoped>
|
||||
.emotion-control-demo {
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -337,7 +337,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
.emotion-selector {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -354,7 +354,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
.emotion-card {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@@ -389,7 +389,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
.emotion-embedding {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -404,7 +404,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.embedding-legend {
|
||||
@@ -430,7 +430,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
.parameter-controls {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -447,7 +447,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
.control-item {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
@@ -468,7 +468,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
.preview-section {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@@ -488,7 +488,7 @@ watch(selectedEmotion, drawEmotionEmbedding)
|
||||
|
||||
.tech-explanation {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
||||
@@ -342,7 +342,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.audio-types {
|
||||
@@ -405,7 +405,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
|
||||
|
||||
.visualization {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -416,7 +416,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
|
||||
|
||||
.viz-section.highlight {
|
||||
border: 2px solid #67c23a;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -486,7 +486,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
|
||||
|
||||
.explanation {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -518,7 +518,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
|
||||
height: 80px;
|
||||
padding: 10px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.freq-bars .bar {
|
||||
@@ -545,7 +545,7 @@ watch([selectedType, fftSize, melBins], updateVisualization)
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -301,7 +301,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
.arch-btn {
|
||||
padding: 12px 20px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
@@ -344,7 +344,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
flex-wrap: wrap;
|
||||
padding: 20px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -358,7 +358,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
.stage-content {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 12px 16px;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
@@ -406,7 +406,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
|
||||
.stage-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -433,7 +433,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
|
||||
.detail-canvas {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@@ -459,7 +459,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
|
||||
.comparison-table {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -475,7 +475,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -510,7 +510,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
|
||||
.models-section {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -529,7 +529,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
|
||||
.model-card {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border: 2px solid transparent;
|
||||
@@ -567,7 +567,7 @@ watch([selectedArch, activeStage], drawVisualization)
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -369,7 +369,7 @@ onMounted(() => {
|
||||
|
||||
.demo-area {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -412,7 +412,7 @@ onMounted(() => {
|
||||
.audio-card {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@@ -472,7 +472,7 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px dashed var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
cursor: pointer;
|
||||
color: var(--vp-c-text-2);
|
||||
@@ -499,7 +499,7 @@ onMounted(() => {
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@@ -525,7 +525,7 @@ onMounted(() => {
|
||||
|
||||
.feature-viz {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -545,7 +545,7 @@ onMounted(() => {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
@@ -558,7 +558,7 @@ onMounted(() => {
|
||||
background: linear-gradient(120deg, #409eff, #67c23a);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
@@ -595,7 +595,7 @@ onMounted(() => {
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid #67c23a;
|
||||
}
|
||||
|
||||
@@ -653,7 +653,7 @@ onMounted(() => {
|
||||
|
||||
.tips-section {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@@ -675,7 +675,7 @@ onMounted(() => {
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
@@ -699,7 +699,7 @@ onMounted(() => {
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--vp-c-bg-mute);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@@ -131,9 +131,9 @@ const active = computed(
|
||||
.auth-basics-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -197,8 +197,8 @@ const active = computed(
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -233,7 +233,7 @@ const active = computed(
|
||||
.box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -127,9 +127,9 @@ const active = computed(
|
||||
.auth-evolution-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -151,13 +151,13 @@ const active = computed(
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.stage {
|
||||
text-align: left;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
@@ -193,8 +193,8 @@ const active = computed(
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -219,7 +219,7 @@ const active = computed(
|
||||
.box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -377,9 +377,9 @@ const resetDemo = () => {
|
||||
.auth-interactive-login {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -421,7 +421,7 @@ const resetDemo = () => {
|
||||
.mode-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
@@ -616,8 +616,8 @@ const resetDemo = () => {
|
||||
|
||||
.flow-stage {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
animation: slideIn 0.4s ease;
|
||||
}
|
||||
@@ -827,7 +827,7 @@ const resetDemo = () => {
|
||||
.reset-btn {
|
||||
padding: 0.75rem 2rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: #64748b;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
|
||||
@@ -149,9 +149,9 @@ const decisionLog = computed(() => {
|
||||
.authn-authz-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -179,8 +179,8 @@ const decisionLog = computed(() => {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -229,7 +229,7 @@ const decisionLog = computed(() => {
|
||||
.result {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -153,9 +153,9 @@ const reset = () => {
|
||||
.csrf-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -218,8 +218,8 @@ const reset = () => {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -237,7 +237,7 @@ const reset = () => {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -272,7 +272,7 @@ const reset = () => {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -174,9 +174,9 @@ const copy = async (text) => {
|
||||
.jwt-workflow-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -239,8 +239,8 @@ const copy = async (text) => {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -277,7 +277,7 @@ const copy = async (text) => {
|
||||
min-width: 220px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -308,7 +308,7 @@ const copy = async (text) => {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -339,7 +339,7 @@ const copy = async (text) => {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -200,9 +200,9 @@ const copy = async (text) => {
|
||||
.oauth2-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -265,8 +265,8 @@ const copy = async (text) => {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -300,7 +300,7 @@ const copy = async (text) => {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -227,9 +227,9 @@ onMounted(() => {
|
||||
.password-hashing-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -258,8 +258,8 @@ onMounted(() => {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -345,7 +345,7 @@ onMounted(() => {
|
||||
.mono-box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -366,7 +366,7 @@ onMounted(() => {
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -193,9 +193,9 @@ Set-Cookie: session_id=; Max-Age=0`
|
||||
.session-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -258,8 +258,8 @@ Set-Cookie: session_id=; Max-Age=0`
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -271,7 +271,7 @@ Set-Cookie: session_id=; Max-Age=0`
|
||||
.box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
@@ -339,7 +339,7 @@ Set-Cookie: session_id=; Max-Age=0`
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid rgba(var(--vp-c-brand-rgb), 0.18);
|
||||
background: rgba(var(--vp-c-brand-rgb), 0.06);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -194,9 +194,9 @@ const recommendation = computed(() => {
|
||||
.session-vs-jwt-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -224,8 +224,8 @@ const recommendation = computed(() => {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@@ -294,7 +294,7 @@ const recommendation = computed(() => {
|
||||
.box {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
+53
-55
@@ -112,51 +112,49 @@ const currentEra = computed(() => {
|
||||
<style scoped>
|
||||
.architecture-comparison-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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.comparison-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.era-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -164,7 +162,7 @@ const currentEra = computed(() => {
|
||||
|
||||
.era-card:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.era-card.active {
|
||||
@@ -173,86 +171,86 @@ const currentEra = computed(() => {
|
||||
}
|
||||
|
||||
.era-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.era-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.era-year {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.era-tag {
|
||||
display: inline-block;
|
||||
padding: 0.15rem 0.5rem;
|
||||
padding: 0.1rem 0.3rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 10px;
|
||||
font-size: 0.7rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.55rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.detail-header h5 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.feature-section h6 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.85rem;
|
||||
margin: 0 0 0.3rem 0;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.feature-section ul {
|
||||
margin: 0;
|
||||
padding-left: 1.25rem;
|
||||
font-size: 0.85rem;
|
||||
padding-left: 0.75rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.feature-section li {
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.15rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.feature-section li:last-child {
|
||||
@@ -262,40 +260,40 @@ const currentEra = computed(() => {
|
||||
.tech-stack {
|
||||
grid-column: 1 / -1;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.tech-stack h6 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
font-size: 0.85rem;
|
||||
margin: 0 0 0.3rem 0;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.tech-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
padding: 0.25rem 0.75rem;
|
||||
padding: 0.15rem 0.4rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
|
||||
+3
-3
@@ -433,8 +433,8 @@ const stages = [
|
||||
.server-box {
|
||||
background: #cbd5e1;
|
||||
border: 2px solid #94a3b8;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
.file-system {
|
||||
@@ -464,7 +464,7 @@ const stages = [
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.module {
|
||||
background: #bfdbfe;
|
||||
|
||||
+1
-1
@@ -367,7 +367,7 @@ const currentStageData = computed(() => stageData[currentStage.value])
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
+52
-54
@@ -73,52 +73,50 @@ const benefits = [
|
||||
<style scoped>
|
||||
.container-docker-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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.docker-visualization {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.layer {
|
||||
flex: 1;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@@ -129,9 +127,9 @@ const benefits = [
|
||||
}
|
||||
|
||||
.layer h5 {
|
||||
margin: 0 0 1rem 0;
|
||||
margin: 0 0 0.5rem 0;
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@@ -139,14 +137,14 @@ const benefits = [
|
||||
.docker-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.layer-item {
|
||||
padding: 0.6rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.3rem;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.layer-item.app {
|
||||
@@ -181,47 +179,47 @@ const benefits = [
|
||||
.containers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.container-box {
|
||||
background: rgba(102, 126, 234, 0.1);
|
||||
border: 1px solid rgba(102, 126, 234, 0.3);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container-app {
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-brand);
|
||||
margin-bottom: 0.2rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.container-deps {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.55rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.docker-engine {
|
||||
padding: 0.6rem;
|
||||
padding: 0.3rem;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
border-radius: 4px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.host-os,
|
||||
.hardware {
|
||||
padding: 0.6rem;
|
||||
padding: 0.3rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@@ -230,45 +228,45 @@ const benefits = [
|
||||
align-items: center;
|
||||
font-weight: 700;
|
||||
color: var(--vp-c-text-3);
|
||||
font-size: 0.9rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.benefit-card:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.benefit-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.benefit-desc {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.4;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -278,23 +276,23 @@ const benefits = [
|
||||
|
||||
.vs-divider {
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0;
|
||||
padding: 0.25rem 0;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
|
||||
@@ -96,10 +96,10 @@ const steps = [
|
||||
<style scoped>
|
||||
.deployment-flow-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -185,7 +185,7 @@ const steps = [
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.step-detail h5 {
|
||||
|
||||
+41
-43
@@ -123,50 +123,48 @@ const stages = [
|
||||
<style scoped>
|
||||
.evolution-intro-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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.timeline-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
padding: 0.75rem 0.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@@ -175,68 +173,67 @@ const stages = [
|
||||
|
||||
.stage-card:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
transform: translateY(-2px);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.stage-card.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: var(--vp-c-brand-soft);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.stage-era {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-text-3);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.stage-name {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.stage-arch {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.55rem;
|
||||
color: var(--vp-c-text-3);
|
||||
}
|
||||
|
||||
.stage-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.detail-panel {
|
||||
animation: fadeIn 0.4s ease;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
from { opacity: 0; transform: translateY(5px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.detail-icon {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.detail-header h4 {
|
||||
font-size: 1rem;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--vp-c-text-1);
|
||||
@@ -244,31 +241,32 @@ const stages = [
|
||||
|
||||
.detail-content {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.detail-section h5 {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
margin: 0 0 0.5rem 0;
|
||||
margin: 0 0 0.3rem 0;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.detail-section p {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
margin: 0 0 0.5rem 0;
|
||||
font-size: 0.65rem;
|
||||
line-height: 1.4;
|
||||
margin: 0 0 0.3rem 0;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.detail-section ul {
|
||||
margin: 0;
|
||||
padding-left: 1rem;
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.detail-section li {
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.6;
|
||||
font-size: 0.6rem;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@@ -240,10 +240,10 @@ const resetCluster = () => {
|
||||
<style scoped>
|
||||
.container-docker-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -273,8 +273,8 @@ const resetCluster = () => {
|
||||
flex: 1;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@@ -398,8 +398,8 @@ const resetCluster = () => {
|
||||
.benefit-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
+2
-2
@@ -150,7 +150,7 @@ const insightIcon = computed(() => {
|
||||
.architecture {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -248,7 +248,7 @@ const insightIcon = computed(() => {
|
||||
margin-top: 1.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
|
||||
@@ -134,10 +134,10 @@ const resetFlow = () => {
|
||||
<style scoped>
|
||||
.microservices-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -166,8 +166,8 @@ const resetFlow = () => {
|
||||
.service-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -249,8 +249,8 @@ const resetFlow = () => {
|
||||
.communication-flow {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.communication-flow h5 {
|
||||
|
||||
@@ -131,52 +131,50 @@ const reset = () => {
|
||||
<style scoped>
|
||||
.monolith-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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.monolith-diagram {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.monolith-box {
|
||||
flex: 1;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@@ -189,23 +187,24 @@ const reset = () => {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand);
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.25rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.modules-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.module-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
@@ -226,21 +225,21 @@ const reset = () => {
|
||||
}
|
||||
|
||||
.module-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.module-name {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.module-status {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.55rem;
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@@ -263,38 +262,38 @@ const reset = () => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
gap: 0.3rem;
|
||||
padding: 0.4rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.db-icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.db-label {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.request-flow {
|
||||
width: 150px;
|
||||
width: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.flow-request {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
padding: 0.3rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.flow-request.active {
|
||||
@@ -317,19 +316,19 @@ const reset = () => {
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -347,34 +346,6 @@ const reset = () => {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.demo-explanation {
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-explanation h5 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.demo-explanation ul {
|
||||
margin: 0 0 1rem 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.demo-explanation li {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.demo-explanation li strong {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.monolith-diagram {
|
||||
flex-direction: column;
|
||||
@@ -389,13 +360,13 @@ const reset = () => {
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
|
||||
+4
-4
@@ -159,7 +159,7 @@ const deployRelease = () => {
|
||||
|
||||
.module-btn {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
padding: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
@@ -186,7 +186,7 @@ const deployRelease = () => {
|
||||
.risk-meter {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -217,7 +217,7 @@ const deployRelease = () => {
|
||||
margin-top: 1rem;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem;
|
||||
background: var(--vp-c-brand);
|
||||
color: #fff;
|
||||
@@ -229,7 +229,7 @@ const deployRelease = () => {
|
||||
margin-top: 0.75rem;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px dashed var(--vp-c-divider);
|
||||
}
|
||||
|
||||
+6
-6
@@ -79,10 +79,10 @@ const reset = () => {
|
||||
<style scoped>
|
||||
.monolith-microservice-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.controls {
|
||||
@@ -129,8 +129,8 @@ const reset = () => {
|
||||
.architecture-block {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -146,8 +146,8 @@ const reset = () => {
|
||||
.server-container {
|
||||
border: 2px solid #3b82f6;
|
||||
background: #eff6ff;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
|
||||
+63
-109
@@ -173,88 +173,86 @@ const sendRequest = async () => {
|
||||
<style scoped>
|
||||
.physical-server-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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding-bottom: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-bottom: 0.4rem;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-header .icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.demo-header .title {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header .subtitle {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.85rem;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
margin-left: 0.4rem;
|
||||
}
|
||||
|
||||
.demo-stage {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.client-zone,
|
||||
.server-zone {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.zone-title {
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand);
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 0.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.request-queue {
|
||||
min-height: 60px;
|
||||
min-height: 40px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.3rem;
|
||||
margin-bottom: 0.4rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.request-card {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.5rem;
|
||||
border-radius: 3px;
|
||||
padding: 0.25rem 0.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
gap: 0.3rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
|
||||
.req-method {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: 3px;
|
||||
padding: 0.05rem 0.2rem;
|
||||
border-radius: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -263,9 +261,9 @@ const sendRequest = async () => {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
padding: 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -284,12 +282,12 @@ const sendRequest = async () => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 60px;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.network-line {
|
||||
width: 3px;
|
||||
height: 120px;
|
||||
width: 2px;
|
||||
height: 80px;
|
||||
background: var(--vp-c-divider);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
@@ -303,29 +301,29 @@ const sendRequest = async () => {
|
||||
}
|
||||
|
||||
.latency-display {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.3rem;
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.server-status {
|
||||
margin-bottom: 0.75rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
gap: 0.3rem;
|
||||
padding: 0.3rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-success);
|
||||
}
|
||||
@@ -341,59 +339,59 @@ const sendRequest = async () => {
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.65rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.cpu-usage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.cpu-bar {
|
||||
flex: 1;
|
||||
height: 6px;
|
||||
height: 4px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 3px;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cpu-fill {
|
||||
height: 100%;
|
||||
background: var(--vp-c-danger);
|
||||
border-radius: 3px;
|
||||
border-radius: 2px;
|
||||
transition: width 0.1s ease;
|
||||
}
|
||||
|
||||
.cpu-text {
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.55rem;
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 60px;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.process-queue {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.process-item {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
|
||||
.proc-name {
|
||||
display: block;
|
||||
font-size: 0.7rem;
|
||||
font-size: 0.55rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.3rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.proc-progress {
|
||||
height: 4px;
|
||||
height: 3px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
@@ -406,76 +404,32 @@ const sendRequest = async () => {
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
.demo-explanation {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.demo-explanation h5 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-1);
|
||||
margin: 0 0 0.75rem 0;
|
||||
}
|
||||
|
||||
.demo-explanation ul {
|
||||
margin: 0 0 1rem 0;
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
.demo-explanation li {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.demo-explanation li strong {
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-conclusion {
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
color: var(--vp-c-brand);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.demo-stage {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.connection-zone {
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.network-line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
|
||||
@@ -62,10 +62,10 @@ const comparisonData = [
|
||||
<style scoped>
|
||||
.scaling-strategy-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
|
||||
+1
-1
@@ -142,7 +142,7 @@ const scaleHint = computed(() => {
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
|
||||
@@ -161,10 +161,10 @@ onUnmounted(() => {
|
||||
<style scoped>
|
||||
.serverless-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -199,8 +199,8 @@ onUnmounted(() => {
|
||||
.function-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
@@ -276,8 +276,8 @@ onUnmounted(() => {
|
||||
.auto-scaling-panel {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.scaling-title {
|
||||
@@ -335,8 +335,8 @@ onUnmounted(() => {
|
||||
.traffic-simulator {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
+46
-58
@@ -103,139 +103,127 @@ const eras = [
|
||||
<style scoped>
|
||||
.tech-stack-timeline-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 {
|
||||
margin-bottom: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.demo-header h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1rem;
|
||||
margin: 0 0 0.15rem 0;
|
||||
font-size: 0.9rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.demo-header p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.era-section {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.era-section:hover,
|
||||
.era-section.active {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-brand-soft);
|
||||
}
|
||||
|
||||
.era-marker {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 24px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.era-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-divider);
|
||||
border: 2px solid var(--vp-c-bg);
|
||||
transition: all 0.2s;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.era-section.active .era-dot {
|
||||
background: var(--vp-c-brand);
|
||||
border-color: var(--vp-c-brand);
|
||||
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.era-line {
|
||||
flex: 1;
|
||||
width: 2px;
|
||||
background: var(--vp-c-divider);
|
||||
margin: 4px 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.era-content {
|
||||
flex: 1;
|
||||
padding: 0.5rem 0.5rem 0.5rem 0;
|
||||
}
|
||||
|
||||
.era-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
gap: 0.25rem;
|
||||
margin-bottom: 0.3rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.era-icon {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.era-name {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
font-size: 0.7rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.era-period {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6rem;
|
||||
color: var(--vp-c-text-3);
|
||||
background: var(--vp-c-bg-soft);
|
||||
padding: 0.1rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
padding: 0.05rem 0.25rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.tech-categories {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.category {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 4px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 3px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-bottom: 0.25rem;
|
||||
margin-bottom: 0.1rem;
|
||||
}
|
||||
|
||||
.tech-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
gap: 0.15rem;
|
||||
}
|
||||
|
||||
.tech-tag {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.1rem 0.35rem;
|
||||
font-size: 0.55rem;
|
||||
padding: 0.05rem 0.2rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 3px;
|
||||
border-radius: 2px;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
@@ -246,20 +234,20 @@ const eras = [
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tech-categories {
|
||||
grid-template-columns: 1fr;
|
||||
.timeline {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: var(--vp-c-bg-alt);
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.info-box .icon {
|
||||
|
||||
+9
-9
@@ -230,12 +230,12 @@ const getCurrentLang = () => {
|
||||
<style scoped>
|
||||
.backend-languages-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 {
|
||||
@@ -286,10 +286,10 @@ const getCurrentLang = () => {
|
||||
}
|
||||
|
||||
.language-card {
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
@@ -338,8 +338,8 @@ const getCurrentLang = () => {
|
||||
|
||||
.lang-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
+5
-5
@@ -149,12 +149,12 @@ const getModelInfo = () => {
|
||||
<style scoped>
|
||||
.concurrency-model-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 {
|
||||
|
||||
+5
-5
@@ -93,12 +93,12 @@ const maxTime = computed(() => {
|
||||
<style scoped>
|
||||
.developer-efficiency-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 {
|
||||
|
||||
+5
-5
@@ -174,12 +174,12 @@ const getBarClass = (score) => {
|
||||
<style scoped>
|
||||
.language-comparison-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 {
|
||||
|
||||
+5
-5
@@ -89,12 +89,12 @@ const ecosystems = [
|
||||
<style scoped>
|
||||
.language-ecosystem-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 {
|
||||
|
||||
+7
-7
@@ -165,12 +165,12 @@ const reset = () => {
|
||||
<style scoped>
|
||||
.language-selector-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 {
|
||||
@@ -282,8 +282,8 @@ const reset = () => {
|
||||
|
||||
.recommendation-panel {
|
||||
background: var(--vp-c-bg);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
border: 2px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
+6
-6
@@ -64,12 +64,12 @@ const models = [
|
||||
<style scoped>
|
||||
.memory-management-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 {
|
||||
@@ -118,7 +118,7 @@ const models = [
|
||||
|
||||
.model-card {
|
||||
background: var(--vp-c-bg);
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
|
||||
+5
-5
@@ -157,12 +157,12 @@ runBenchmark()
|
||||
<style scoped>
|
||||
.performance-benchmark-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 {
|
||||
|
||||
+6
-6
@@ -122,12 +122,12 @@ const getLineCount = (lang) => {
|
||||
<style scoped>
|
||||
.syntax-comparison-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 {
|
||||
@@ -256,7 +256,7 @@ const getLineCount = (lang) => {
|
||||
|
||||
.code-content {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: #1e1e1e;
|
||||
color: #d4d4d4;
|
||||
font-family: 'Monaco', 'Menlo', monospace;
|
||||
|
||||
+7
-7
@@ -276,7 +276,7 @@ const tabs = [
|
||||
gap: 8px;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -284,7 +284,7 @@ const tabs = [
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
@@ -329,7 +329,7 @@ const tabs = [
|
||||
.arch-characteristics {
|
||||
padding: 16px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.arch-characteristics h5 {
|
||||
@@ -357,7 +357,7 @@ const tabs = [
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
@@ -369,7 +369,7 @@ const tabs = [
|
||||
|
||||
.clean-layer {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid;
|
||||
}
|
||||
|
||||
@@ -407,7 +407,7 @@ const tabs = [
|
||||
|
||||
.dependency-rule {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
border: 2px dashed #1890ff;
|
||||
@@ -485,7 +485,7 @@ const tabs = [
|
||||
|
||||
.rec-card {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
+2
-2
@@ -250,7 +250,7 @@ const toggleDetails = (section) => {
|
||||
margin-top: 12px;
|
||||
padding: 16px;
|
||||
background: #f0f7ff;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border-left: 4px solid #409eff;
|
||||
}
|
||||
|
||||
@@ -297,7 +297,7 @@ const toggleDetails = (section) => {
|
||||
text-align: center;
|
||||
padding: 16px 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
+1
-1
@@ -180,7 +180,7 @@
|
||||
.layer-box {
|
||||
padding: 16px 20px;
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
text-align: center;
|
||||
|
||||
+2
-2
@@ -202,7 +202,7 @@ const viewMode = ref('conversion')
|
||||
|
||||
.flow-step {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
border-left: 4px solid #409eff;
|
||||
}
|
||||
@@ -286,7 +286,7 @@ const viewMode = ref('conversion')
|
||||
|
||||
.table-header {
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
|
||||
+1
-1
@@ -334,7 +334,7 @@ const layerInfo = computed(() => {
|
||||
margin-top: 16px;
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
color: #389e0d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
+7
-7
@@ -596,7 +596,7 @@ const principles = [
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@@ -670,7 +670,7 @@ const principles = [
|
||||
|
||||
.flow-step {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
@@ -813,7 +813,7 @@ const principles = [
|
||||
padding: 10px 20px;
|
||||
border: 2px solid #dcdfe6;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
@@ -880,7 +880,7 @@ const principles = [
|
||||
|
||||
.code-block {
|
||||
background: #2d2d2d;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
margin: 0;
|
||||
overflow-x: auto;
|
||||
@@ -897,7 +897,7 @@ const principles = [
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.problems-list h5 {
|
||||
@@ -952,7 +952,7 @@ const principles = [
|
||||
|
||||
.table-header {
|
||||
background: #f5f7fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
@@ -1029,7 +1029,7 @@ const principles = [
|
||||
.table-row {
|
||||
padding: 16px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
+3
-3
@@ -422,7 +422,7 @@ const principles = [
|
||||
margin-bottom: 20px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
@@ -496,7 +496,7 @@ const principles = [
|
||||
|
||||
.flow-step {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
@@ -644,7 +644,7 @@ const principles = [
|
||||
.principle-card {
|
||||
padding: 14px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #e6a23c;
|
||||
}
|
||||
|
||||
|
||||
@@ -1523,7 +1523,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.console-output {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
font-family: Consolas, 'Lucida Console', monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
+2
-2
@@ -400,7 +400,7 @@ const selectNode = (node) => {
|
||||
/* Virtual Page Preview */
|
||||
.virtual-page-container {
|
||||
border: 1px solid #d0d7de;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||||
@@ -471,7 +471,7 @@ const selectNode = (node) => {
|
||||
/* DevTools Simulator (Enhanced) */
|
||||
.browser-devtools-demo {
|
||||
border: 1px solid #d0d7de;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background-color: #ffffff;
|
||||
color: #202124;
|
||||
font-family: 'Segoe UI', '.SFNSDisplay', 'Roboto', sans-serif;
|
||||
|
||||
@@ -152,7 +152,7 @@ const runShortcut = (cmd) => {
|
||||
|
||||
.console-body {
|
||||
height: 250px;
|
||||
overflow-y: auto;
|
||||
|
||||
background-color: #f5f7fa;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
|
||||
@@ -154,7 +154,7 @@ const updateStyle = (prop, value) => {
|
||||
|
||||
.dom-content, .style-content {
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -311,7 +311,7 @@ const flatNext = () => {
|
||||
.code-area {
|
||||
flex: 2;
|
||||
background: #f5f7fa;
|
||||
overflow-y: auto;
|
||||
|
||||
font-family: monospace;
|
||||
border-right: 1px solid #dcdfe6;
|
||||
}
|
||||
|
||||
+4
-4
@@ -125,10 +125,10 @@ function getResultLayerStyle(layer) {
|
||||
<style scoped>
|
||||
.composite-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -160,7 +160,7 @@ function getResultLayerStyle(layer) {
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.layers-stage {
|
||||
|
||||
+4
-4
@@ -127,10 +127,10 @@
|
||||
<style scoped>
|
||||
.dom-render-tree-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -162,7 +162,7 @@
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.trees-container {
|
||||
|
||||
+5
-5
@@ -122,10 +122,10 @@ function resetDemo() {
|
||||
<style scoped>
|
||||
.layout-reflow-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -142,7 +142,7 @@ function resetDemo() {
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
@@ -199,7 +199,7 @@ function resetDemo() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
min-height: 150px;
|
||||
|
||||
+5
-5
@@ -154,10 +154,10 @@ function sleep(ms) {
|
||||
<style scoped>
|
||||
.macro-micro-task-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -189,7 +189,7 @@ function sleep(ms) {
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.event-loop-flow {
|
||||
@@ -216,7 +216,7 @@ function sleep(ms) {
|
||||
.execution-box {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
+5
-5
@@ -126,10 +126,10 @@ function clearHighlight() {
|
||||
<style scoped>
|
||||
.paint-layer-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -146,7 +146,7 @@ function clearHighlight() {
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.layer-visualization {
|
||||
@@ -158,7 +158,7 @@ function clearHighlight() {
|
||||
height: 200px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
+4
-4
@@ -105,10 +105,10 @@
|
||||
<style scoped>
|
||||
.rendering-performance-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -140,7 +140,7 @@
|
||||
.demo-content {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.performance-comparison {
|
||||
|
||||
+7
-7
@@ -108,10 +108,10 @@ const currentStage = computed(() => {
|
||||
<style scoped>
|
||||
.rendering-pipeline-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -158,7 +158,7 @@ const currentStage = computed(() => {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -173,7 +173,7 @@ const currentStage = computed(() => {
|
||||
.stage-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-brand);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -217,8 +217,8 @@ const currentStage = computed(() => {
|
||||
|
||||
.stage-detail {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -121,10 +121,10 @@ const simulateRequest = () => {
|
||||
<style scoped>
|
||||
.cache-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -166,7 +166,7 @@ const simulateRequest = () => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@@ -316,7 +316,7 @@ const simulateRequest = () => {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
|
||||
+4
-4
@@ -142,10 +142,10 @@ const layers = [
|
||||
<style scoped>
|
||||
.cache-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -185,7 +185,7 @@ const layers = [
|
||||
.layer {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
|
||||
@@ -141,10 +141,10 @@ const simulateFlow = () => {
|
||||
<style scoped>
|
||||
.cache-hierarchy-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
@@ -187,8 +187,8 @@ const simulateFlow = () => {
|
||||
max-width: 400px;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@@ -262,8 +262,8 @@ const simulateFlow = () => {
|
||||
|
||||
.data-flow {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
@@ -288,7 +288,7 @@ const simulateFlow = () => {
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
transition: all 0.3s;
|
||||
width: 100%;
|
||||
@@ -335,7 +335,7 @@ const simulateFlow = () => {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -349,8 +349,8 @@ const simulateFlow = () => {
|
||||
|
||||
.comparison-table {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
@@ -338,7 +338,7 @@ onUnmounted(() => {
|
||||
.cache-entry {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
@@ -456,7 +456,7 @@ onUnmounted(() => {
|
||||
.action-btn {
|
||||
padding: 0.75rem 1rem;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s;
|
||||
@@ -508,7 +508,7 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.event {
|
||||
@@ -555,9 +555,9 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
|
||||
+6
-6
@@ -246,10 +246,10 @@ onUnmounted(() => {
|
||||
<style scoped>
|
||||
.cache-monitoring-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;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
@@ -288,7 +288,7 @@ onUnmounted(() => {
|
||||
.metric-card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
@@ -367,7 +367,7 @@ onUnmounted(() => {
|
||||
.request-log {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -400,7 +400,7 @@ onUnmounted(() => {
|
||||
|
||||
.log-list {
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user