fix(eslint): reduce warnings in GitHub Actions deployment
- Disable formatting rules (handled by Prettier) - Relaxed strict Vue/JS rules for demo code compatibility - Fix syntax errors in ApiPlayground and VoiceCloningDemo - Fix duplicate else-if condition in ApiPlayground - Fix Promise executor async pattern in AutoregressiveAudioDemo - Add TypeScript file support to ESLint config Warnings reduced from 295 to 251 problems. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
sanbuphy
@@ -2,26 +2,47 @@
|
||||
<div class="branch-demo">
|
||||
<div class="panel">
|
||||
<div class="controls">
|
||||
<button @click="init" :disabled="inited || mergePending" class="btn">
|
||||
<button
|
||||
:disabled="inited || mergePending"
|
||||
class="btn"
|
||||
@click="init"
|
||||
>
|
||||
初始化
|
||||
</button>
|
||||
<button @click="commit" :disabled="!inited || mergePending" class="btn">
|
||||
<button
|
||||
:disabled="!inited || mergePending"
|
||||
class="btn"
|
||||
@click="commit"
|
||||
>
|
||||
提交
|
||||
</button>
|
||||
<button @click="branch" :disabled="!inited || hasBranch" class="btn">
|
||||
<button
|
||||
:disabled="!inited || hasBranch"
|
||||
class="btn"
|
||||
@click="branch"
|
||||
>
|
||||
创建分支
|
||||
</button>
|
||||
<button
|
||||
@click="prepareMerge"
|
||||
:disabled="!hasBranch || mergePending"
|
||||
class="btn"
|
||||
@click="prepareMerge"
|
||||
>
|
||||
准备合并
|
||||
</button>
|
||||
<button @click="finishMerge" :disabled="!mergePending" class="btn">
|
||||
<button
|
||||
:disabled="!mergePending"
|
||||
class="btn"
|
||||
@click="finishMerge"
|
||||
>
|
||||
完成合并
|
||||
</button>
|
||||
<button @click="reset" class="btn secondary">重置</button>
|
||||
<button
|
||||
class="btn secondary"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="graph">
|
||||
|
||||
@@ -3,11 +3,21 @@
|
||||
<div class="panel">
|
||||
<div class="terminal">
|
||||
<div class="output">
|
||||
<div v-for="(line, i) in output" :key="i" :class="line.type">
|
||||
<span v-if="line.type === 'command'" class="prompt">$</span>
|
||||
<span v-html="line.text"></span>
|
||||
<div
|
||||
v-for="(line, i) in output"
|
||||
:key="i"
|
||||
:class="line.type"
|
||||
>
|
||||
<span
|
||||
v-if="line.type === 'command'"
|
||||
class="prompt"
|
||||
>$</span>
|
||||
<span v-html="line.text" />
|
||||
</div>
|
||||
<div v-if="output.length === 0" class="welcome">
|
||||
<div
|
||||
v-if="output.length === 0"
|
||||
class="welcome"
|
||||
>
|
||||
输入命令开始学习 Git（建议先点“制造改动”，再跑 git status）
|
||||
</div>
|
||||
</div>
|
||||
@@ -15,39 +25,74 @@
|
||||
<span class="prompt">$</span>
|
||||
<input
|
||||
v-model="cmd"
|
||||
@keyup.enter="execute({ fromQuick: false })"
|
||||
placeholder="（默认安全模式）请用下方按钮执行命令"
|
||||
class="cmd-input"
|
||||
:disabled="!freeMode"
|
||||
/>
|
||||
@keyup.enter="execute({ fromQuick: false })"
|
||||
>
|
||||
<button
|
||||
@click="execute({ fromQuick: false })"
|
||||
class="run-btn"
|
||||
:disabled="!freeMode"
|
||||
@click="execute({ fromQuick: false })"
|
||||
>
|
||||
运行
|
||||
</button>
|
||||
<button @click="clearOutput" class="run-btn secondary">清空</button>
|
||||
<button @click="toggleFreeMode" class="run-btn secondary">
|
||||
<button
|
||||
class="run-btn secondary"
|
||||
@click="clearOutput"
|
||||
>
|
||||
清空
|
||||
</button>
|
||||
<button
|
||||
class="run-btn secondary"
|
||||
@click="toggleFreeMode"
|
||||
>
|
||||
{{ freeMode ? '切回安全模式' : '开启自由模式' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quick-cmds">
|
||||
<button @click="makeChanges" class="cmd-btn">制造改动</button>
|
||||
<button @click="runCmd('git init')" class="cmd-btn">git init</button>
|
||||
<button @click="runCmd('git status')" class="cmd-btn">
|
||||
<button
|
||||
class="cmd-btn"
|
||||
@click="makeChanges"
|
||||
>
|
||||
制造改动
|
||||
</button>
|
||||
<button
|
||||
class="cmd-btn"
|
||||
@click="runCmd('git init')"
|
||||
>
|
||||
git init
|
||||
</button>
|
||||
<button
|
||||
class="cmd-btn"
|
||||
@click="runCmd('git status')"
|
||||
>
|
||||
git status
|
||||
</button>
|
||||
<button @click="runCmd('git add .')" class="cmd-btn">git add .</button>
|
||||
<button @click="runCmd(`git commit -m 'msg'`)" class="cmd-btn">
|
||||
<button
|
||||
class="cmd-btn"
|
||||
@click="runCmd('git add .')"
|
||||
>
|
||||
git add .
|
||||
</button>
|
||||
<button
|
||||
class="cmd-btn"
|
||||
@click="runCmd(`git commit -m 'msg'`)"
|
||||
>
|
||||
git commit
|
||||
</button>
|
||||
<button @click="runCmd('git log --oneline')" class="cmd-btn">
|
||||
<button
|
||||
class="cmd-btn"
|
||||
@click="runCmd('git log --oneline')"
|
||||
>
|
||||
git log
|
||||
</button>
|
||||
<button @click="runCmd('git switch -c feat/demo')" class="cmd-btn">
|
||||
<button
|
||||
class="cmd-btn"
|
||||
@click="runCmd('git switch -c feat/demo')"
|
||||
>
|
||||
新分支
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,9 @@
|
||||
<div class="line current">
|
||||
<span class="ln">4</span> console.log('Welcome') // 当前版本
|
||||
</div>
|
||||
<div class="line conflict"><span class="ln">5</span>=======</div>
|
||||
<div class="line conflict">
|
||||
<span class="ln">5</span>=======
|
||||
</div>
|
||||
<div class="line incoming">
|
||||
<span class="ln">6</span> console.log('Greetings') // 传入版本
|
||||
</div>
|
||||
@@ -27,11 +29,24 @@
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button @click="resolve('current')" class="action-btn">保留当前</button>
|
||||
<button @click="resolve('incoming')" class="action-btn">
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="resolve('current')"
|
||||
>
|
||||
保留当前
|
||||
</button>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="resolve('incoming')"
|
||||
>
|
||||
保留传入
|
||||
</button>
|
||||
<button @click="resolve('manual')" class="action-btn">手动合并</button>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="resolve('manual')"
|
||||
>
|
||||
手动合并
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3,52 +3,95 @@
|
||||
<div class="panel">
|
||||
<div class="repos">
|
||||
<div class="repo">
|
||||
<div class="header">💻 本地</div>
|
||||
<div class="header">
|
||||
💻 本地
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="badge">main</span>
|
||||
<span class="hint"> Ahead {{ ahead }} / Behind {{ behind }} </span>
|
||||
</div>
|
||||
<div class="commits">
|
||||
<div v-for="c in local" :key="c" class="commit-dot">
|
||||
<span class="dot local"></span>
|
||||
<div
|
||||
v-for="c in local"
|
||||
:key="c"
|
||||
class="commit-dot"
|
||||
>
|
||||
<span class="dot local" />
|
||||
<span class="hash">{{ c.substring(0, 6) }}</span>
|
||||
</div>
|
||||
<div v-if="local.length === 0" class="empty">无</div>
|
||||
<div
|
||||
v-if="local.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
无
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sync">⇄</div>
|
||||
<div class="sync">
|
||||
⇄
|
||||
</div>
|
||||
|
||||
<div class="repo">
|
||||
<div class="header">☁️ 远程</div>
|
||||
<div class="header">
|
||||
☁️ 远程
|
||||
</div>
|
||||
<div class="meta">
|
||||
<span class="badge">origin/main</span>
|
||||
<span class="hint">模拟队友提交在这里发生</span>
|
||||
</div>
|
||||
<div class="commits">
|
||||
<div v-for="c in remote" :key="c" class="commit-dot">
|
||||
<span class="dot remote"></span>
|
||||
<div
|
||||
v-for="c in remote"
|
||||
:key="c"
|
||||
class="commit-dot"
|
||||
>
|
||||
<span class="dot remote" />
|
||||
<span class="hash">{{ c.substring(0, 6) }}</span>
|
||||
</div>
|
||||
<div v-if="remote.length === 0" class="empty">无</div>
|
||||
<div
|
||||
v-if="remote.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
无
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button @click="localCommit" class="btn">本地提交</button>
|
||||
<button @click="remoteCommit" class="btn">远程新增提交</button>
|
||||
<button
|
||||
@click="push"
|
||||
class="btn"
|
||||
@click="localCommit"
|
||||
>
|
||||
本地提交
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="remoteCommit"
|
||||
>
|
||||
远程新增提交
|
||||
</button>
|
||||
<button
|
||||
:disabled="local.length <= remote.length"
|
||||
class="btn"
|
||||
@click="push"
|
||||
>
|
||||
git push
|
||||
</button>
|
||||
<button @click="pull" :disabled="behind === 0" class="btn">
|
||||
<button
|
||||
:disabled="behind === 0"
|
||||
class="btn"
|
||||
@click="pull"
|
||||
>
|
||||
git pull
|
||||
</button>
|
||||
<button @click="reset" class="btn secondary">重置</button>
|
||||
<button
|
||||
class="btn secondary"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -2,24 +2,35 @@
|
||||
<div class="git-scenarios-demo">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div class="h">常见场景：直接照抄的 Git 命令</div>
|
||||
<div class="h">
|
||||
常见场景：直接照抄的 Git 命令
|
||||
</div>
|
||||
<div class="sub">
|
||||
选一个场景，按步骤执行；每一步都解释“为什么这么做”。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn" @click="prevStep" :disabled="activeStepIndex === 0">
|
||||
<button
|
||||
class="btn"
|
||||
:disabled="activeStepIndex === 0"
|
||||
@click="prevStep"
|
||||
>
|
||||
上一步
|
||||
</button>
|
||||
<button
|
||||
class="btn primary"
|
||||
@click="nextStep"
|
||||
:disabled="activeStepIndex >= activeScenario.steps.length - 1"
|
||||
@click="nextStep"
|
||||
>
|
||||
下一步
|
||||
</button>
|
||||
<button class="btn" @click="resetSteps">重置</button>
|
||||
<button
|
||||
class="btn"
|
||||
@click="resetSteps"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,8 +49,13 @@
|
||||
|
||||
<div class="content">
|
||||
<div class="scenario-meta">
|
||||
<div class="scenario-desc">{{ activeScenario.desc }}</div>
|
||||
<div class="scenario-note" v-if="activeScenario.note">
|
||||
<div class="scenario-desc">
|
||||
{{ activeScenario.desc }}
|
||||
</div>
|
||||
<div
|
||||
v-if="activeScenario.note"
|
||||
class="scenario-note"
|
||||
>
|
||||
{{ activeScenario.note }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -50,7 +66,10 @@
|
||||
Step {{ activeStepIndex + 1 }} / {{ activeScenario.steps.length }}
|
||||
<span class="step-name">{{ activeStep.title }}</span>
|
||||
</div>
|
||||
<button class="copy-btn" @click="copy(activeStep.cmd)">
|
||||
<button
|
||||
class="copy-btn"
|
||||
@click="copy(activeStep.cmd)"
|
||||
>
|
||||
{{ copied ? '已复制' : '复制命令' }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -59,24 +78,42 @@
|
||||
<code>{{ activeStep.cmd }}</code>
|
||||
</div>
|
||||
|
||||
<div v-if="activeStep.output" class="output">
|
||||
<div class="label">你通常会看到：</div>
|
||||
<div
|
||||
v-if="activeStep.output"
|
||||
class="output"
|
||||
>
|
||||
<div class="label">
|
||||
你通常会看到：
|
||||
</div>
|
||||
<pre><code>{{ activeStep.output }}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="why">
|
||||
<div class="label">为什么：</div>
|
||||
<div class="text">{{ activeStep.why }}</div>
|
||||
<div class="label">
|
||||
为什么：
|
||||
</div>
|
||||
<div class="text">
|
||||
{{ activeStep.why }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeStep.warn" class="warn">
|
||||
<div class="label">注意：</div>
|
||||
<div class="text">{{ activeStep.warn }}</div>
|
||||
<div
|
||||
v-if="activeStep.warn"
|
||||
class="warn"
|
||||
>
|
||||
<div class="label">
|
||||
注意：
|
||||
</div>
|
||||
<div class="text">
|
||||
{{ activeStep.warn }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips">
|
||||
<div class="tips-title">最容易踩坑的 3 件事</div>
|
||||
<div class="tips-title">
|
||||
最容易踩坑的 3 件事
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>先看状态再动手：</strong>每次操作前先跑一次
|
||||
|
||||
@@ -3,36 +3,73 @@
|
||||
<div class="panel">
|
||||
<div class="areas">
|
||||
<div class="area">
|
||||
<div class="header">💻 工作区 ({{ work.length }})</div>
|
||||
<div v-for="f in work" :key="f" class="file">📄 {{ f }}</div>
|
||||
<div v-if="work.length === 0" class="empty">空</div>
|
||||
<div class="header">
|
||||
💻 工作区 ({{ work.length }})
|
||||
</div>
|
||||
<div
|
||||
v-for="f in work"
|
||||
:key="f"
|
||||
class="file"
|
||||
>
|
||||
📄 {{ f }}
|
||||
</div>
|
||||
<div
|
||||
v-if="work.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="area">
|
||||
<div class="header">📚 Stash 栈 ({{ stash.length }})</div>
|
||||
<div v-for="(s, i) in stash" :key="i" class="stash-item">
|
||||
<div class="header">
|
||||
📚 Stash 栈 ({{ stash.length }})
|
||||
</div>
|
||||
<div
|
||||
v-for="(s, i) in stash"
|
||||
:key="i"
|
||||
class="stash-item"
|
||||
>
|
||||
<span class="num">{{ i + 1 }}</span>
|
||||
<span class="msg">{{ s }}</span>
|
||||
</div>
|
||||
<div v-if="stash.length === 0" class="empty">空</div>
|
||||
<div
|
||||
v-if="stash.length === 0"
|
||||
class="empty"
|
||||
>
|
||||
空
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button @click="doWork" :disabled="work.length > 0" class="btn">
|
||||
<button
|
||||
:disabled="work.length > 0"
|
||||
class="btn"
|
||||
@click="doWork"
|
||||
>
|
||||
修改
|
||||
</button>
|
||||
<button
|
||||
@click="save"
|
||||
:disabled="work.length === 0 || stash.length >= 3"
|
||||
class="btn"
|
||||
@click="save"
|
||||
>
|
||||
保存
|
||||
</button>
|
||||
<button @click="pop" :disabled="stash.length === 0" class="btn">
|
||||
<button
|
||||
:disabled="stash.length === 0"
|
||||
class="btn"
|
||||
@click="pop"
|
||||
>
|
||||
恢复
|
||||
</button>
|
||||
<button @click="reset" class="btn secondary">重置</button>
|
||||
<button
|
||||
class="btn secondary"
|
||||
@click="reset"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -4,16 +4,16 @@
|
||||
<div class="comparison">
|
||||
<div class="mode-selector">
|
||||
<button
|
||||
@click="mode = 'full'"
|
||||
:class="{ active: mode === 'full' }"
|
||||
class="mode-btn"
|
||||
@click="mode = 'full'"
|
||||
>
|
||||
完整备份
|
||||
</button>
|
||||
<button
|
||||
@click="mode = 'git'"
|
||||
:class="{ active: mode === 'git' }"
|
||||
class="mode-btn"
|
||||
@click="mode = 'git'"
|
||||
>
|
||||
Git 增量
|
||||
</button>
|
||||
@@ -21,10 +21,16 @@
|
||||
|
||||
<div class="visualization">
|
||||
<div class="bar-container">
|
||||
<div class="bar full" :style="{ height: fullSize + '%' }">
|
||||
<div
|
||||
class="bar full"
|
||||
:style="{ height: fullSize + '%' }"
|
||||
>
|
||||
<span class="label">完整备份: {{ fullSize }}MB</span>
|
||||
</div>
|
||||
<div class="bar git" :style="{ height: gitSize + '%' }">
|
||||
<div
|
||||
class="bar git"
|
||||
:style="{ height: gitSize + '%' }"
|
||||
>
|
||||
<span class="label">Git 存储: {{ gitSize }}MB</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -8,135 +8,173 @@
|
||||
|
||||
<div class="demo-content">
|
||||
<div class="scene">
|
||||
<!-- 1. Working Directory (Desk) -->
|
||||
<div class="zone working">
|
||||
<div class="zone-header">
|
||||
<span class="zone-icon">💻</span>
|
||||
<div class="zone-info">
|
||||
<span class="zone-title">工作区 (Desk)</span>
|
||||
<span class="zone-desc">你的书桌，随便乱放</span>
|
||||
<!-- 1. Working Directory (Desk) -->
|
||||
<div class="zone working">
|
||||
<div class="zone-header">
|
||||
<span class="zone-icon">💻</span>
|
||||
<div class="zone-info">
|
||||
<span class="zone-title">工作区 (Desk)</span>
|
||||
<span class="zone-desc">你的书桌，随便乱放</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desk-surface">
|
||||
<transition-group name="file-pop">
|
||||
<div
|
||||
v-for="file in workingFiles"
|
||||
:key="file.id"
|
||||
class="file-card"
|
||||
@click="addToStaging(file)"
|
||||
>
|
||||
<div class="file-icon">
|
||||
{{ file.icon }}
|
||||
</div>
|
||||
<div class="file-name">
|
||||
{{ file.name }}
|
||||
</div>
|
||||
<div class="action-hint">
|
||||
Add +
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div
|
||||
v-if="workingFiles.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
桌上很干净 ✨
|
||||
<button
|
||||
class="create-btn"
|
||||
@click="createNewFile"
|
||||
>
|
||||
新建文件 📝
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desk-surface">
|
||||
<transition-group name="file-pop">
|
||||
<div
|
||||
v-for="file in workingFiles"
|
||||
:key="file.id"
|
||||
class="file-card"
|
||||
@click="addToStaging(file)"
|
||||
>
|
||||
<div class="file-icon">{{ file.icon }}</div>
|
||||
<div class="file-name">{{ file.name }}</div>
|
||||
<div class="action-hint">Add +</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div class="flow-arrow">
|
||||
<div class="arrow-line" />
|
||||
<div class="arrow-label">
|
||||
git add
|
||||
</div>
|
||||
<div class="arrow-head">
|
||||
▶
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Staging Area (Box) -->
|
||||
<div class="zone staging">
|
||||
<div class="zone-header">
|
||||
<span class="zone-icon">📦</span>
|
||||
<div class="zone-info">
|
||||
<span class="zone-title">暂存区 (Box)</span>
|
||||
<span class="zone-desc">快递盒，准备打包</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div v-if="workingFiles.length === 0" class="empty-state">
|
||||
桌上很干净 ✨
|
||||
<button class="create-btn" @click="createNewFile">
|
||||
新建文件 📝
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="box-body">
|
||||
<transition-group name="file-drop">
|
||||
<div
|
||||
v-for="file in stagedFiles"
|
||||
:key="file.id"
|
||||
class="file-card mini"
|
||||
@click="unstageFile(file)"
|
||||
>
|
||||
<div class="file-icon">
|
||||
{{ file.icon }}
|
||||
</div>
|
||||
<div class="file-name">
|
||||
{{ file.name }}
|
||||
</div>
|
||||
<div class="action-hint">
|
||||
Remove -
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div
|
||||
v-if="stagedFiles.length === 0"
|
||||
class="empty-state box-empty"
|
||||
>
|
||||
盒子是空的 🕸️
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-flap left" />
|
||||
<div class="box-flap right" />
|
||||
</div>
|
||||
<div class="staging-actions">
|
||||
<button
|
||||
class="commit-btn"
|
||||
:disabled="stagedFiles.length === 0"
|
||||
@click="commitFiles"
|
||||
>
|
||||
封箱寄出 (git commit) 🚚
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div class="flow-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-label">git add</div>
|
||||
<div class="arrow-head">▶</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Staging Area (Box) -->
|
||||
<div class="zone staging">
|
||||
<div class="zone-header">
|
||||
<span class="zone-icon">📦</span>
|
||||
<div class="zone-info">
|
||||
<span class="zone-title">暂存区 (Box)</span>
|
||||
<span class="zone-desc">快递盒，准备打包</span>
|
||||
<!-- Arrow -->
|
||||
<div class="flow-arrow">
|
||||
<div class="arrow-line" />
|
||||
<div class="arrow-label">
|
||||
git commit
|
||||
</div>
|
||||
<div class="arrow-head">
|
||||
▶
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-container">
|
||||
<div class="box-body">
|
||||
<transition-group name="file-drop">
|
||||
|
||||
<!-- 3. Repository (Cabinet) -->
|
||||
<div class="zone repo">
|
||||
<div class="zone-header">
|
||||
<span class="zone-icon">🗄️</span>
|
||||
<div class="zone-info">
|
||||
<span class="zone-title">仓库 (Cabinet)</span>
|
||||
<span class="zone-desc">档案柜，永久保存</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cabinet-body">
|
||||
<transition-group name="drawer-slide">
|
||||
<div
|
||||
v-for="file in stagedFiles"
|
||||
:key="file.id"
|
||||
class="file-card mini"
|
||||
@click="unstageFile(file)"
|
||||
v-for="commit in commits.slice().reverse()"
|
||||
:key="commit.hash"
|
||||
class="drawer-item"
|
||||
>
|
||||
<div class="file-icon">{{ file.icon }}</div>
|
||||
<div class="file-name">{{ file.name }}</div>
|
||||
<div class="action-hint">Remove -</div>
|
||||
<div class="drawer-handle" />
|
||||
<div class="commit-info">
|
||||
<span class="commit-hash">#{{ commit.hash }}</span>
|
||||
<span class="commit-msg">{{ commit.message }}</span>
|
||||
</div>
|
||||
<div class="commit-files">
|
||||
<span
|
||||
v-for="f in commit.files"
|
||||
:key="f"
|
||||
class="tiny-file"
|
||||
>📄</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
<div v-if="stagedFiles.length === 0" class="empty-state box-empty">
|
||||
盒子是空的 🕸️
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-flap left"></div>
|
||||
<div class="box-flap right"></div>
|
||||
</div>
|
||||
<div class="staging-actions">
|
||||
<button
|
||||
class="commit-btn"
|
||||
:disabled="stagedFiles.length === 0"
|
||||
@click="commitFiles"
|
||||
>
|
||||
封箱寄出 (git commit) 🚚
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div class="flow-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-label">git commit</div>
|
||||
<div class="arrow-head">▶</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. Repository (Cabinet) -->
|
||||
<div class="zone repo">
|
||||
<div class="zone-header">
|
||||
<span class="zone-icon">🗄️</span>
|
||||
<div class="zone-info">
|
||||
<span class="zone-title">仓库 (Cabinet)</span>
|
||||
<span class="zone-desc">档案柜，永久保存</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cabinet-body">
|
||||
<transition-group name="drawer-slide">
|
||||
<div
|
||||
v-for="commit in commits.slice().reverse()"
|
||||
:key="commit.hash"
|
||||
class="drawer-item"
|
||||
v-if="commits.length === 0"
|
||||
class="empty-state"
|
||||
>
|
||||
<div class="drawer-handle"></div>
|
||||
<div class="commit-info">
|
||||
<span class="commit-hash">#{{ commit.hash }}</span>
|
||||
<span class="commit-msg">{{ commit.message }}</span>
|
||||
</div>
|
||||
<div class="commit-files">
|
||||
<span v-for="f in commit.files" :key="f" class="tiny-file"
|
||||
>📄</span
|
||||
>
|
||||
</div>
|
||||
柜子是空的 💨
|
||||
</div>
|
||||
</transition-group>
|
||||
<div v-if="commits.length === 0" class="empty-state">
|
||||
柜子是空的 💨
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<div class="block">
|
||||
<div class="block-title">当前等价命令</div>
|
||||
<div class="block-title">
|
||||
当前等价命令
|
||||
</div>
|
||||
<pre class="mono"><code>{{ historyText }}</code></pre>
|
||||
</div>
|
||||
<div class="block">
|
||||
<div class="block-title">git status（模拟）</div>
|
||||
<div class="block-title">
|
||||
git status（模拟）
|
||||
</div>
|
||||
<pre class="mono"><code>{{ statusText }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,9 +40,22 @@
|
||||
</div>
|
||||
|
||||
<!-- 箭头 -->
|
||||
<div class="arrow-group" v-if="!allCommitted">
|
||||
<div class="arrow" :class="{ active: hasStaged }">↓</div>
|
||||
<div class="arrow-label" v-if="hasStaged">git add</div>
|
||||
<div
|
||||
v-if="!allCommitted"
|
||||
class="arrow-group"
|
||||
>
|
||||
<div
|
||||
class="arrow"
|
||||
:class="{ active: hasStaged }"
|
||||
>
|
||||
↓
|
||||
</div>
|
||||
<div
|
||||
v-if="hasStaged"
|
||||
class="arrow-label"
|
||||
>
|
||||
git add
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 暂存区 -->
|
||||
@@ -62,16 +75,26 @@
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<span class="file-status">待提交</span>
|
||||
</div>
|
||||
<div v-if="stagedFiles.length === 0" class="empty-tip">
|
||||
<div
|
||||
v-if="stagedFiles.length === 0"
|
||||
class="empty-tip"
|
||||
>
|
||||
暂无文件
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 箭头 -->
|
||||
<div class="arrow-group" v-if="hasStaged">
|
||||
<div class="arrow active">↓</div>
|
||||
<div class="arrow-label">git commit</div>
|
||||
<div
|
||||
v-if="hasStaged"
|
||||
class="arrow-group"
|
||||
>
|
||||
<div class="arrow active">
|
||||
↓
|
||||
</div>
|
||||
<div class="arrow-label">
|
||||
git commit
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 仓库区 -->
|
||||
@@ -90,7 +113,10 @@
|
||||
<span class="commit-icon">✅</span>
|
||||
<span class="commit-msg">{{ commit.msg }}</span>
|
||||
</div>
|
||||
<div v-if="commits.length === 0" class="empty-tip">
|
||||
<div
|
||||
v-if="commits.length === 0"
|
||||
class="empty-tip"
|
||||
>
|
||||
暂无提交
|
||||
</div>
|
||||
</div>
|
||||
@@ -100,29 +126,29 @@
|
||||
<!-- 操作按钮 -->
|
||||
<div class="action-panel">
|
||||
<button
|
||||
@click="modifyFile"
|
||||
class="action-btn"
|
||||
:disabled="allModified"
|
||||
@click="modifyFile"
|
||||
>
|
||||
✏️ 修改文件
|
||||
</button>
|
||||
<button
|
||||
@click="stageFiles"
|
||||
class="action-btn"
|
||||
:disabled="!hasModified || allStaged"
|
||||
@click="stageFiles"
|
||||
>
|
||||
📌 暂存修改
|
||||
</button>
|
||||
<button
|
||||
@click="commitFiles"
|
||||
class="action-btn"
|
||||
:disabled="!hasStaged"
|
||||
@click="commitFiles"
|
||||
>
|
||||
✅ 提交版本
|
||||
</button>
|
||||
<button
|
||||
@click="reset"
|
||||
class="action-btn secondary"
|
||||
@click="reset"
|
||||
>
|
||||
🔄 重置
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user