feat: add interactive demos for AI history, Auth design, and Git intro
This commit is contained in:
sanbuphy
@@ -1,654 +1,288 @@
|
||||
<!--
|
||||
AuthNvsAuthZDemo.vue
|
||||
认证 vs 授权对比演示
|
||||
AuthN vs AuthZ（更可用：请求模拟器）
|
||||
-->
|
||||
<template>
|
||||
<div class="auth-n-vs-z-demo">
|
||||
<div class="authn-authz-demo">
|
||||
<div class="header">
|
||||
<div class="title">认证 vs 授权</div>
|
||||
<div class="subtitle">先认证，再授权 - 两个不同的概念</div>
|
||||
</div>
|
||||
|
||||
<div class="comparison">
|
||||
<div class="comparison-card authn">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🔐</div>
|
||||
<div class="card-title">Authentication (认证)</div>
|
||||
<div class="card-abbr">AuthN</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="question">你是谁？</div>
|
||||
<div class="answer">验证用户身份</div>
|
||||
<div class="examples">
|
||||
<div class="example-title">常见方式：</div>
|
||||
<div class="example-list">
|
||||
<div class="example-item">🔑 输入用户名密码</div>
|
||||
<div class="example-item">👆 指纹识别</div>
|
||||
<div class="example-item">👤 人脸识别</div>
|
||||
<div class="example-item">📱 短信验证码</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output">
|
||||
<div class="output-title">输出：</div>
|
||||
<div class="output-value">Token / Session</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="vs-divider">VS</div>
|
||||
|
||||
<div class="comparison-card authz">
|
||||
<div class="card-header">
|
||||
<div class="card-icon">🛡️</div>
|
||||
<div class="card-title">Authorization (授权)</div>
|
||||
<div class="card-abbr">AuthZ</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="question">你能干什么？</div>
|
||||
<div class="answer">检查用户权限</div>
|
||||
<div class="examples">
|
||||
<div class="example-title">权限类型：</div>
|
||||
<div class="example-list">
|
||||
<div class="example-item">👀 查看权限</div>
|
||||
<div class="example-item">✏️ 编辑权限</div>
|
||||
<div class="example-item">🗑️ 删除权限</div>
|
||||
<div class="example-item">👨💼 管理员权限</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output">
|
||||
<div class="output-title">输出：</div>
|
||||
<div class="output-value">允许 / 拒绝</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="title">🪪 AuthN vs 🛂 AuthZ：一个请求到底会经历什么？</div>
|
||||
<div class="subtitle">
|
||||
选择“谁在请求”与“要做什么”，看看认证/授权分别在哪一步起作用。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flow-demo">
|
||||
<div class="section-title">完整流程</div>
|
||||
<div class="flow-steps">
|
||||
<div
|
||||
v-for="(step, index) in flowSteps"
|
||||
:key="index"
|
||||
class="flow-step"
|
||||
:class="{
|
||||
active: currentStep === index,
|
||||
completed: currentStep > index
|
||||
}"
|
||||
>
|
||||
<div class="step-circle">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
</div>
|
||||
<div v-if="index < flowSteps.length - 1" class="step-arrow">→</div>
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<div class="card-title">选择请求</div>
|
||||
|
||||
<label class="label">身份（AuthN：你是谁）</label>
|
||||
<div class="row">
|
||||
<button
|
||||
v-for="u in users"
|
||||
:key="u.id"
|
||||
class="chip"
|
||||
:class="{ active: userId === u.id }"
|
||||
@click="userId = u.id"
|
||||
>
|
||||
{{ u.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<label class="label">操作（AuthZ：你能做什么）</label>
|
||||
<div class="row">
|
||||
<button
|
||||
v-for="a in actions"
|
||||
:key="a.id"
|
||||
class="chip"
|
||||
:class="{ active: actionId === a.id }"
|
||||
@click="actionId = a.id"
|
||||
>
|
||||
{{ a.name }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hint">
|
||||
真实系统里：认证先发生（解析
|
||||
cookie/JWT），授权发生在路由/业务逻辑层（RBAC/ABAC）。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scenario-demo">
|
||||
<div class="scenario-header">模拟场景</div>
|
||||
<div class="scenario-content">
|
||||
<div class="user-action">
|
||||
<div class="action-label">用户操作：</div>
|
||||
<select v-model="selectedAction" @change="runScenario">
|
||||
<option value="view">查看文章</option>
|
||||
<option value="edit">编辑文章</option>
|
||||
<option value="delete">删除文章</option>
|
||||
<option value="admin">访问管理后台</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">模拟结果</div>
|
||||
|
||||
<div class="user-role">
|
||||
<div class="role-label">用户角色：</div>
|
||||
<div class="role-buttons">
|
||||
<button
|
||||
v-for="role in roles"
|
||||
:key="role.key"
|
||||
class="role-btn"
|
||||
:class="{ active: selectedRole === role.key }"
|
||||
@click="setRole(role.key)"
|
||||
>
|
||||
{{ role.label }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="result">
|
||||
<div class="line">
|
||||
<span class="k">AuthN（认证）</span>
|
||||
<span class="v" :class="authn.ok ? 'ok' : 'bad'">
|
||||
{{ authn.ok ? '通过' : '失败' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="result-box" :class="resultClass">
|
||||
<div class="result-icon">{{ resultIcon }}</div>
|
||||
<div class="result-text">{{ resultText }}</div>
|
||||
<div class="line">
|
||||
<span class="k">AuthZ（授权）</span>
|
||||
<span class="v" :class="authz.ok ? 'ok' : 'bad'">
|
||||
{{ authz.ok ? '允许' : '拒绝' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="step-details" v-if="stepDetails.length > 0">
|
||||
<div class="step-details-title">处理流程：</div>
|
||||
<div
|
||||
class="step-detail-item"
|
||||
v-for="(detail, idx) in stepDetails"
|
||||
:key="idx"
|
||||
>
|
||||
<span class="detail-step">步骤 {{ idx + 1 }}：</span>
|
||||
<span class="detail-text">{{ detail }}</span>
|
||||
</div>
|
||||
<div class="line">
|
||||
<span class="k">HTTP</span>
|
||||
<span class="v mono">{{ finalStatus }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pre class="code"><code>{{ decisionLog }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="key-insight">
|
||||
<div class="insight-icon">💡</div>
|
||||
<div class="insight-text">
|
||||
<strong>核心关系：</strong>先认证（AuthN），再授权（AuthZ）。
|
||||
只有确认了"你是谁"，才能判断"你能干什么"。
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-title">关键点</div>
|
||||
<ul class="list">
|
||||
<li><strong>认证失败：</strong>你是谁都不确定 → 通常返回 401。</li>
|
||||
<li>
|
||||
<strong>认证通过但没权限：</strong>你是谁确定了，但不能做 → 通常返回
|
||||
403。
|
||||
</li>
|
||||
<li>
|
||||
<strong>授权规则要在服务端：</strong
|
||||
>别相信前端的“是否显示按钮”，那只是 UX。
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const currentStep = ref(0)
|
||||
const selectedAction = ref('view')
|
||||
const selectedRole = ref('user')
|
||||
|
||||
const roles = [
|
||||
{ key: 'guest', label: '访客' },
|
||||
{ key: 'user', label: '普通用户' },
|
||||
{ key: 'admin', label: '管理员' }
|
||||
const users = [
|
||||
{ id: 'anon', name: '匿名用户' },
|
||||
{ id: 'user', name: '普通用户' },
|
||||
{ id: 'admin', name: '管理员' }
|
||||
]
|
||||
|
||||
const flowSteps = [
|
||||
{
|
||||
title: '用户请求',
|
||||
desc: '用户发起操作请求'
|
||||
},
|
||||
{
|
||||
title: '认证 (AuthN)',
|
||||
desc: '验证 Token 是否有效'
|
||||
},
|
||||
{
|
||||
title: '授权 (AuthZ)',
|
||||
desc: '检查是否有权限'
|
||||
},
|
||||
{
|
||||
title: '执行业务逻辑',
|
||||
desc: '允许或拒绝访问'
|
||||
}
|
||||
const actions = [
|
||||
{ id: 'view_profile', name: '查看个人资料（/api/me）' },
|
||||
{ id: 'create_post', name: '发帖（POST /posts）' },
|
||||
{ id: 'delete_user', name: '删除用户（DELETE /users/:id）' }
|
||||
]
|
||||
|
||||
const actionPermissions = {
|
||||
view: { guest: true, user: true, admin: true },
|
||||
edit: { guest: false, user: true, admin: true },
|
||||
delete: { guest: false, user: false, admin: true },
|
||||
admin: { guest: false, user: false, admin: true }
|
||||
}
|
||||
const userId = ref('anon')
|
||||
const actionId = ref('view_profile')
|
||||
|
||||
const actionNames = {
|
||||
view: '查看文章',
|
||||
edit: '编辑文章',
|
||||
delete: '删除文章',
|
||||
admin: '访问管理后台'
|
||||
}
|
||||
const authn = computed(() => {
|
||||
if (userId.value === 'anon')
|
||||
return { ok: false, reason: '缺少有效凭证（cookie/JWT）' }
|
||||
return { ok: true, reason: `识别为 ${userId.value}` }
|
||||
})
|
||||
|
||||
const stepDetails = ref([])
|
||||
|
||||
const resultText = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
const action = actionNames[selectedAction.value]
|
||||
const role = roles.find((r) => r.key === selectedRole.value)?.label
|
||||
|
||||
if (!hasPermission) {
|
||||
return `${role}无法${action} - 权限不足`
|
||||
const authz = computed(() => {
|
||||
if (!authn.value.ok)
|
||||
return { ok: false, reason: '认证未通过，无法做授权判断' }
|
||||
if (actionId.value === 'delete_user') {
|
||||
return userId.value === 'admin'
|
||||
? { ok: true, reason: 'admin 允许删除用户' }
|
||||
: { ok: false, reason: '只有 admin 才能删除用户' }
|
||||
}
|
||||
return `${role}可以${action} - 授权通过`
|
||||
return { ok: true, reason: '此操作对已登录用户开放' }
|
||||
})
|
||||
|
||||
const resultClass = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
return hasPermission ? 'success' : 'error'
|
||||
const finalStatus = computed(() => {
|
||||
if (!authn.value.ok) return '401 Unauthorized'
|
||||
if (!authz.value.ok) return '403 Forbidden'
|
||||
return '200 OK'
|
||||
})
|
||||
|
||||
const resultIcon = computed(() => {
|
||||
const hasPermission =
|
||||
actionPermissions[selectedAction.value][selectedRole.value]
|
||||
return hasPermission ? '✅' : '❌'
|
||||
const decisionLog = computed(() => {
|
||||
const lines = []
|
||||
lines.push(`Request: ${actionId.value}`)
|
||||
lines.push(
|
||||
`AuthN: ${authn.value.ok ? 'PASS' : 'FAIL'} - ${authn.value.reason}`
|
||||
)
|
||||
lines.push(
|
||||
`AuthZ: ${authz.value.ok ? 'ALLOW' : 'DENY'} - ${authz.value.reason}`
|
||||
)
|
||||
lines.push(`Result: ${finalStatus.value}`)
|
||||
return lines.join('\n')
|
||||
})
|
||||
|
||||
const setRole = (role) => {
|
||||
selectedRole.value = role
|
||||
runScenario()
|
||||
}
|
||||
|
||||
const runScenario = () => {
|
||||
const action = selectedAction.value
|
||||
const role = selectedRole.value
|
||||
const hasPermission = actionPermissions[action][role]
|
||||
|
||||
stepDetails.value = [
|
||||
`用户请求：${actionNames[action]}`,
|
||||
`认证检查：${role !== 'guest' ? '已登录，Token 有效' : '未登录或 Token 无效'}`,
|
||||
`授权检查：检查 ${role} 是否有 ${action} 权限`,
|
||||
`最终决定：${hasPermission ? '允许访问' : '拒绝访问，返回 403 Forbidden'}`
|
||||
]
|
||||
|
||||
currentStep.value = 4
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.auth-n-vs-z-demo {
|
||||
.authn-authz-demo {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 12px;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-family: var(--vp-font-family-base);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.comparison {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.comparison-card {
|
||||
flex: 1;
|
||||
min-width: 280px;
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 12px;
|
||||
padding: 1.5rem;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.comparison-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.comparison-card.authn {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz {
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 2rem;
|
||||
.card {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
flex: 1;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.card-abbr {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
padding: 0.25rem 0.6rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
.label {
|
||||
display: block;
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
font-size: 0.875rem;
|
||||
margin: 0.75rem 0 0.35rem;
|
||||
}
|
||||
|
||||
.comparison-card.authn .card-abbr {
|
||||
background: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz .card-abbr {
|
||||
background: #8b5cf6;
|
||||
}
|
||||
|
||||
.question {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.answer {
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.examples {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.example-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.example-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.example-item {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.comparison-card.authn .example-item {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz .example-item {
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.output {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.comparison-card.authn .output {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.comparison-card.authz .output {
|
||||
border-color: #8b5cf6;
|
||||
}
|
||||
|
||||
.output-title {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.output-value {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
color: var(--vp-c-text-2);
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.flow-demo {
|
||||
background: var(--vp-c-bg);
|
||||
border-radius: 10px;
|
||||
padding: 1.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.flow-step {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.flow-step.active {
|
||||
border-color: var(--vp-c-brand);
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.flow-step.completed {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.step-circle {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
font-size: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.scenario-demo {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.scenario-header {
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.scenario-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.user-action,
|
||||
.user-role {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.action-label,
|
||||
.role-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.user-action select {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.role-buttons {
|
||||
.row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.role-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
.chip {
|
||||
padding: 0.4rem 0.65rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-soft);
|
||||
background: var(--vp-c-bg);
|
||||
color: var(--vp-c-text-1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.role-btn:hover {
|
||||
border-color: var(--vp-c-brand);
|
||||
.chip.active {
|
||||
border-color: rgba(var(--vp-c-brand-rgb), 0.35);
|
||||
box-shadow: 0 0 0 3px rgba(var(--vp-c-brand-rgb), 0.12);
|
||||
}
|
||||
|
||||
.role-btn.active {
|
||||
background: var(--vp-c-brand);
|
||||
color: white;
|
||||
border-color: var(--vp-c-brand);
|
||||
.hint {
|
||||
margin-top: 0.75rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.result-box {
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-box.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid #22c55e;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.result-box.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid #ef4444;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.step-details {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
.result {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-details-title {
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.step-detail-item {
|
||||
font-size: 0.85rem;
|
||||
padding: 0.4rem 0;
|
||||
border-bottom: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.step-detail-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.detail-step {
|
||||
font-weight: 600;
|
||||
color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.key-insight {
|
||||
.line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-left: 4px solid var(--vp-c-brand);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
padding: 0.35rem 0;
|
||||
}
|
||||
|
||||
.insight-icon {
|
||||
font-size: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
.k {
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.insight-text {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
.v {
|
||||
font-weight: 800;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.insight-text strong {
|
||||
color: var(--vp-c-brand);
|
||||
.v.ok {
|
||||
color: var(--vp-c-green-1, #22c55e);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.comparison {
|
||||
flex-direction: column;
|
||||
}
|
||||
.v.bad {
|
||||
color: var(--vp-c-red-1, #ef4444);
|
||||
}
|
||||
|
||||
.vs-divider {
|
||||
transform: rotate(90deg);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.mono {
|
||||
font-family: var(--vp-font-family-mono);
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
flex-direction: column;
|
||||
}
|
||||
.code {
|
||||
margin: 0;
|
||||
padding: 0.75rem;
|
||||
border-radius: 6px;
|
||||
background: var(--vp-c-bg-alt);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
overflow-x: auto;
|
||||
color: var(--vp-c-text-1);
|
||||
}
|
||||
|
||||
.step-arrow {
|
||||
transform: rotate(90deg);
|
||||
.list {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: var(--vp-c-text-2);
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user