sanbuphy
73f4788d7e
- Update READMEs and docs across multiple languages - Enhance interactive demos for Agent, LLM, VLM, Audio, Image Gen, Terminal, and Web Basics - Add new appendix sections for Database and IDE intros - Update VitePress config, theme, and utility scripts - Clean up unused assets and components
82 lines
3.6 KiB
Vue
82 lines
3.6 KiB
Vue
<template>
|
||
<div class="remote-demo">
|
||
<div class="panel">
|
||
<div class="repos">
|
||
<div class="repo">
|
||
<div class="header">💻 本地</div>
|
||
<div class="commits">
|
||
<div v-for="c in local" :key="c" class="commit-dot">
|
||
<span class="dot local"></span>
|
||
<span class="hash">{{ c.substring(0,6) }}</span>
|
||
</div>
|
||
<div v-if="local.length === 0" class="empty">无</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sync">⇄</div>
|
||
|
||
<div class="repo">
|
||
<div class="header">☁️ 远程</div>
|
||
<div class="commits">
|
||
<div v-for="c in remote" :key="c" class="commit-dot">
|
||
<span class="dot remote"></span>
|
||
<span class="hash">{{ c.substring(0,6) }}</span>
|
||
</div>
|
||
<div v-if="remote.length === 0" class="empty">无</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<button @click="localCommit" class="btn">本地提交</button>
|
||
<button @click="push" :disabled="local.length <= remote.length" class="btn">推送 Push</button>
|
||
<button @click="pull" :disabled="!hasRemote" class="btn">拉取 Pull</button>
|
||
<button @click="reset" class="btn secondary">重置</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="info-box">
|
||
<p><strong>💡 远程协作:</strong> Push 上传，Pull 下载，保持同步</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue'
|
||
const local = ref([])
|
||
const remote = ref([])
|
||
const hasRemote = ref(false)
|
||
|
||
const localCommit = () => { local.value.push(Math.random().toString(16).substr(2,7)) }
|
||
const push = () => { remote.value.push(...local.value.slice(remote.value.length)); hasRemote.value = false }
|
||
const pull = () => { if(hasRemote.value) local.value.push(Math.random().toString(16).substr(2,7)); hasRemote.value = false }
|
||
const reset = () => { local.value = []; remote.value = []; hasRemote.value = false }
|
||
</script>
|
||
|
||
<style scoped>
|
||
.remote-demo { border: 1px solid var(--vp-c-divider); border-radius: 8px; background-color: var(--vp-c-bg-soft); padding: 1.5rem; margin: 1rem 0; }
|
||
.repos { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
|
||
.repo { border: 1px solid var(--vp-c-divider); border-radius: 8px; padding: 1rem; background: var(--vp-c-bg); }
|
||
.header { font-weight: 600; margin-bottom: 0.5rem; }
|
||
.commits { min-height: 80px; }
|
||
.commit-dot { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
|
||
.dot { width: 10px; height: 10px; border-radius: 50%; }
|
||
.dot.local { background: #3b82f6; }
|
||
.dot.remote { background: #10b981; }
|
||
.hash { font-family: monospace; font-size: 0.875rem; color: var(--vp-c-text-2); }
|
||
.sync { font-size: 2rem; text-align: center; }
|
||
.empty { color: var(--vp-c-text-3); text-align: center; padding: 1rem; }
|
||
.controls { display: flex; gap: 0.5rem; flex-wrap: wrap; }
|
||
.btn { padding: 0.5rem 1rem; border: 1px solid var(--vp-c-brand); background: var(--vp-c-bg); color: var(--vp-c-brand); border-radius: 6px; cursor: pointer; }
|
||
.btn:hover:not(:disabled) { background: var(--vp-c-brand); color: var(--vp-c-bg); }
|
||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||
.btn.secondary { border-color: var(--vp-c-divider); }
|
||
.info-box { padding: 1rem; background: var(--vp-c-bg); border-left: 4px solid var(--vp-c-brand); border-radius: 4px; margin-top: 1rem; }
|
||
.info-box p { margin: 0; color: var(--vp-c-text-1); }
|
||
|
||
@media (max-width: 768px) {
|
||
.repos { grid-template-columns: 1fr; }
|
||
.sync { transform: rotate(90deg); }
|
||
}
|
||
</style>
|