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
@@ -18,17 +18,37 @@
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="data-rows">
|
||||
<div v-for="i in 20" :key="i" class="data-row" :class="{ found: scanMode === 'found' && i === targetId }">
|
||||
<div
|
||||
v-for="i in 20"
|
||||
:key="i"
|
||||
class="data-row"
|
||||
:class="{ found: scanMode === 'found' && i === targetId }"
|
||||
>
|
||||
<span class="row-id">{{ String(i).padStart(3, '0') }}</span>
|
||||
<span class="row-name">用户{{ i }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scan-info">
|
||||
<p v-if="!scanMode">👆 点击"开始查找"看全表扫描有多慢</p>
|
||||
<p v-else-if="scanMode === 'scanning'">正在扫描... 第 {{ scanCount }} 条</p>
|
||||
<p v-else class="found">✅ 找到了！扫描了 {{ scanCount }} 条记录，耗时 {{ scanTime }}秒</p>
|
||||
<p v-if="!scanMode">
|
||||
👆 点击"开始查找"看全表扫描有多慢
|
||||
</p>
|
||||
<p v-else-if="scanMode === 'scanning'">
|
||||
正在扫描... 第 {{ scanCount }} 条
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="found"
|
||||
>
|
||||
✅ 找到了！扫描了 {{ scanCount }} 条记录，耗时 {{ scanTime }}秒
|
||||
</p>
|
||||
</div>
|
||||
<button v-if="!scanMode" @click="startScan" class="btn">开始查找</button>
|
||||
<button
|
||||
v-if="!scanMode"
|
||||
class="btn"
|
||||
@click="startScan"
|
||||
>
|
||||
开始查找
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,15 +60,25 @@
|
||||
<div class="card-content">
|
||||
<div class="tree-structure">
|
||||
<div class="tree-level root">
|
||||
<div class="node-label">根节点</div>
|
||||
<div class="node">1-100</div>
|
||||
<div class="node-label">
|
||||
根节点
|
||||
</div>
|
||||
<div class="node">
|
||||
1-100
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-level intermediate">
|
||||
<div class="node-label">中间节点</div>
|
||||
<div class="node">1-10</div>
|
||||
<div class="node-label">
|
||||
中间节点
|
||||
</div>
|
||||
<div class="node">
|
||||
1-10
|
||||
</div>
|
||||
</div>
|
||||
<div class="tree-level leaf">
|
||||
<div class="node-label">叶子节点</div>
|
||||
<div class="node-label">
|
||||
叶子节点
|
||||
</div>
|
||||
<div
|
||||
v-for="i in 10"
|
||||
:key="i"
|
||||
@@ -60,31 +90,62 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="index-info">
|
||||
<p v-if="!indexMode">👆 点击"开始查找"看索引有多快</p>
|
||||
<p v-else-if="indexMode === 'searching'">正在搜索... 第 {{ indexStep }} 步</p>
|
||||
<p v-else class="found">✅ 找到了！只用了 {{ indexSteps.length }} 步，耗时 {{ indexTime }}秒</p>
|
||||
<p v-if="!indexMode">
|
||||
👆 点击"开始查找"看索引有多快
|
||||
</p>
|
||||
<p v-else-if="indexMode === 'searching'">
|
||||
正在搜索... 第 {{ indexStep }} 步
|
||||
</p>
|
||||
<p
|
||||
v-else
|
||||
class="found"
|
||||
>
|
||||
✅ 找到了！只用了 {{ indexSteps.length }} 步，耗时 {{ indexTime }}秒
|
||||
</p>
|
||||
</div>
|
||||
<button v-if="!indexMode" @click="startIndex" class="btn">开始查找</button>
|
||||
<button
|
||||
v-if="!indexMode"
|
||||
class="btn"
|
||||
@click="startIndex"
|
||||
>
|
||||
开始查找
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-box">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">数据量</div>
|
||||
<div class="stat-value">100 万条</div>
|
||||
<div class="stat-label">
|
||||
数据量
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
100 万条
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">全表扫描</div>
|
||||
<div class="stat-value slow">平均 50 万次比较</div>
|
||||
<div class="stat-label">
|
||||
全表扫描
|
||||
</div>
|
||||
<div class="stat-value slow">
|
||||
平均 50 万次比较
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">B+ 树索引</div>
|
||||
<div class="stat-value fast">仅 3 次比较</div>
|
||||
<div class="stat-label">
|
||||
B+ 树索引
|
||||
</div>
|
||||
<div class="stat-value fast">
|
||||
仅 3 次比较
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">速度提升</div>
|
||||
<div class="stat-value highlight">10 万倍+</div>
|
||||
<div class="stat-label">
|
||||
速度提升
|
||||
</div>
|
||||
<div class="stat-value highlight">
|
||||
10 万倍+
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
+54
-14
@@ -18,20 +18,39 @@
|
||||
:class="{ active: activeStage === stage.id }"
|
||||
@click="activeStage = activeStage === stage.id ? null : stage.id"
|
||||
>
|
||||
<div class="stage-icon">{{ stage.icon }}</div>
|
||||
<div class="stage-name">{{ stage.name }}</div>
|
||||
<div class="stage-simple">{{ stage.simple }}</div>
|
||||
<div class="stage-capacity">{{ stage.capacity }}</div>
|
||||
<div v-if="i < stages.length - 1" class="arrow">→</div>
|
||||
<div class="stage-icon">
|
||||
{{ stage.icon }}
|
||||
</div>
|
||||
<div class="stage-name">
|
||||
{{ stage.name }}
|
||||
</div>
|
||||
<div class="stage-simple">
|
||||
{{ stage.simple }}
|
||||
</div>
|
||||
<div class="stage-capacity">
|
||||
{{ stage.capacity }}
|
||||
</div>
|
||||
<div
|
||||
v-if="i < stages.length - 1"
|
||||
class="arrow"
|
||||
>
|
||||
→
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!activeStage" class="hint-text">
|
||||
<div
|
||||
v-if="!activeStage"
|
||||
class="hint-text"
|
||||
>
|
||||
👆 点击上方任意阶段，查看详细特点
|
||||
</div>
|
||||
|
||||
<Transition name="fade">
|
||||
<div v-if="activeStage" class="stage-detail">
|
||||
<div
|
||||
v-if="activeStage"
|
||||
class="stage-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ currentStage?.icon }}</span>
|
||||
<span class="detail-title">{{ currentStage?.name }}</span>
|
||||
@@ -40,21 +59,42 @@
|
||||
<div class="detail-content">
|
||||
<div class="pros-cons">
|
||||
<div class="pros">
|
||||
<div class="list-title">✅ 优点</div>
|
||||
<div class="list-title">
|
||||
✅ 优点
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="pro in currentStage?.pros" :key="pro">{{ pro }}</li>
|
||||
<li
|
||||
v-for="pro in currentStage?.pros"
|
||||
:key="pro"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cons">
|
||||
<div class="list-title">❌ 缺点</div>
|
||||
<div class="list-title">
|
||||
❌ 缺点
|
||||
</div>
|
||||
<ul>
|
||||
<li v-for="con in currentStage?.cons" :key="con">{{ con }}</li>
|
||||
<li
|
||||
v-for="con in currentStage?.cons"
|
||||
:key="con"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="currentStage?.example" class="example-box">
|
||||
<div class="example-label">🌰 举个例子：</div>
|
||||
<div class="example-content">{{ currentStage?.example }}</div>
|
||||
<div
|
||||
v-if="currentStage?.example"
|
||||
class="example-box"
|
||||
>
|
||||
<div class="example-label">
|
||||
🌰 举个例子：
|
||||
</div>
|
||||
<div class="example-content">
|
||||
{{ currentStage?.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -86,16 +86,16 @@ const startSearch = async () => {
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: mode === 'scan' }"
|
||||
@click="mode = 'scan'"
|
||||
:disabled="isSearching"
|
||||
@click="mode = 'scan'"
|
||||
>
|
||||
🐢 全表扫描 O(n)
|
||||
</button>
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: mode === 'index' }"
|
||||
@click="mode = 'index'"
|
||||
:disabled="isSearching"
|
||||
@click="mode = 'index'"
|
||||
>
|
||||
⚡ 索引查找 O(log n)
|
||||
</button>
|
||||
@@ -103,8 +103,8 @@ const startSearch = async () => {
|
||||
|
||||
<button
|
||||
class="search-btn"
|
||||
@click="startSearch"
|
||||
:disabled="isSearching"
|
||||
@click="startSearch"
|
||||
>
|
||||
{{ isSearching ? '查找中...' : '开始查找' }}
|
||||
</button>
|
||||
@@ -112,7 +112,10 @@ const startSearch = async () => {
|
||||
|
||||
<div class="visualization-area">
|
||||
<!-- Full Scan Visualization -->
|
||||
<div v-if="mode === 'scan'" class="view-container scan-view">
|
||||
<div
|
||||
v-if="mode === 'scan'"
|
||||
class="view-container scan-view"
|
||||
>
|
||||
<div class="grid">
|
||||
<div
|
||||
v-for="(item, index) in data"
|
||||
@@ -133,7 +136,10 @@ const startSearch = async () => {
|
||||
</div>
|
||||
|
||||
<!-- Index Visualization -->
|
||||
<div v-else class="view-container index-view">
|
||||
<div
|
||||
v-else
|
||||
class="view-container index-view"
|
||||
>
|
||||
<div class="grid">
|
||||
<div
|
||||
v-for="(item, index) in data"
|
||||
@@ -154,19 +160,31 @@ const startSearch = async () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-box" v-if="!isSearching && searchResult">
|
||||
<div
|
||||
v-if="!isSearching && searchResult"
|
||||
class="stats-box"
|
||||
>
|
||||
<div class="stat-item">
|
||||
<span class="stat-icon">🎯</span>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">查找结果</div>
|
||||
<div class="stat-value">{{ searchResult.value }}</div>
|
||||
<div class="stat-label">
|
||||
查找结果
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
{{ searchResult.value }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-icon">{{ mode === 'scan' ? '🐢' : '⚡' }}</span>
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">操作次数</div>
|
||||
<div class="stat-value" :class="mode">
|
||||
<div class="stat-label">
|
||||
操作次数
|
||||
</div>
|
||||
<div
|
||||
class="stat-value"
|
||||
:class="mode"
|
||||
>
|
||||
{{ mode === 'scan' ? scanCurrentIndex + 1 : treeActiveNodes.length }} 次
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -19,10 +19,18 @@
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<div class="table-row header">
|
||||
<div class="cell primary-key">🔑 user_id</div>
|
||||
<div class="cell">name</div>
|
||||
<div class="cell">phone</div>
|
||||
<div class="cell">address</div>
|
||||
<div class="cell primary-key">
|
||||
🔑 user_id
|
||||
</div>
|
||||
<div class="cell">
|
||||
name
|
||||
</div>
|
||||
<div class="cell">
|
||||
phone
|
||||
</div>
|
||||
<div class="cell">
|
||||
address
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="user in users"
|
||||
@@ -32,18 +40,30 @@
|
||||
@mouseenter="highlightedUserId = user.user_id"
|
||||
@mouseleave="highlightedUserId = null"
|
||||
>
|
||||
<div class="cell primary-key">{{ user.user_id }}</div>
|
||||
<div class="cell">{{ user.name }}</div>
|
||||
<div class="cell">{{ user.phone }}</div>
|
||||
<div class="cell">{{ user.address }}</div>
|
||||
<div class="cell primary-key">
|
||||
{{ user.user_id }}
|
||||
</div>
|
||||
<div class="cell">
|
||||
{{ user.name }}
|
||||
</div>
|
||||
<div class="cell">
|
||||
{{ user.phone }}
|
||||
</div>
|
||||
<div class="cell">
|
||||
{{ user.address }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relation-arrow">
|
||||
<div class="arrow-line"></div>
|
||||
<div class="arrow-head">➤</div>
|
||||
<div class="relation-label">user_id (外键) → user_id (主键)</div>
|
||||
<div class="arrow-line" />
|
||||
<div class="arrow-head">
|
||||
➤
|
||||
</div>
|
||||
<div class="relation-label">
|
||||
user_id (外键) → user_id (主键)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-card orders-table">
|
||||
@@ -54,10 +74,18 @@
|
||||
</div>
|
||||
<div class="table-content">
|
||||
<div class="table-row header">
|
||||
<div class="cell primary-key">🔑 order_id</div>
|
||||
<div class="cell">book_name</div>
|
||||
<div class="cell foreign-key">🔗 user_id</div>
|
||||
<div class="cell">price</div>
|
||||
<div class="cell primary-key">
|
||||
🔑 order_id
|
||||
</div>
|
||||
<div class="cell">
|
||||
book_name
|
||||
</div>
|
||||
<div class="cell foreign-key">
|
||||
🔗 user_id
|
||||
</div>
|
||||
<div class="cell">
|
||||
price
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="order in filteredOrders"
|
||||
@@ -65,17 +93,27 @@
|
||||
class="table-row"
|
||||
:class="{ highlighted: highlightedUserId === order.user_id }"
|
||||
>
|
||||
<div class="cell primary-key">{{ order.order_id }}</div>
|
||||
<div class="cell">{{ order.book_name }}</div>
|
||||
<div class="cell foreign-key">{{ order.user_id }}</div>
|
||||
<div class="cell">{{ order.price }}</div>
|
||||
<div class="cell primary-key">
|
||||
{{ order.order_id }}
|
||||
</div>
|
||||
<div class="cell">
|
||||
{{ order.book_name }}
|
||||
</div>
|
||||
<div class="cell foreign-key">
|
||||
{{ order.user_id }}
|
||||
</div>
|
||||
<div class="cell">
|
||||
{{ order.price }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation-box">
|
||||
<div class="explanation-title">💡 核心概念</div>
|
||||
<div class="explanation-title">
|
||||
💡 核心概念
|
||||
</div>
|
||||
<div class="explanation-content">
|
||||
<p><strong>主键（Primary Key）</strong>：用户表的 <code>user_id</code> 是主键，唯一标识每个用户。</p>
|
||||
<p><strong>外键（Foreign Key）</strong>：订单表的 <code>user_id</code> 是外键，指向用户表的主键。</p>
|
||||
|
||||
+37
-11
@@ -17,24 +17,44 @@
|
||||
class="pitfall-card"
|
||||
:class="{ expanded: expandedIndex === index }"
|
||||
>
|
||||
<div class="pitfall-header" @click="expandedIndex = expandedIndex === index ? null : index">
|
||||
<div class="pitfall-number">{{ index + 1 }}</div>
|
||||
<div class="pitfall-title">{{ pitfall.title }}</div>
|
||||
<div class="expand-icon">{{ expandedIndex === index ? '▼' : '▶' }}</div>
|
||||
<div
|
||||
class="pitfall-header"
|
||||
@click="expandedIndex = expandedIndex === index ? null : index"
|
||||
>
|
||||
<div class="pitfall-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="pitfall-title">
|
||||
{{ pitfall.title }}
|
||||
</div>
|
||||
<div class="expand-icon">
|
||||
{{ expandedIndex === index ? '▼' : '▶' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="expand">
|
||||
<div v-if="expandedIndex === index" class="pitfall-content">
|
||||
<div
|
||||
v-if="expandedIndex === index"
|
||||
class="pitfall-content"
|
||||
>
|
||||
<div class="code-comparison">
|
||||
<div class="code-section wrong">
|
||||
<div class="section-label">❌ 错误写法</div>
|
||||
<div class="section-label">
|
||||
❌ 错误写法
|
||||
</div>
|
||||
<pre><code>{{ pitfall.wrong }}</code></pre>
|
||||
<div class="impact">⚠️ {{ pitfall.impact }}</div>
|
||||
<div class="impact">
|
||||
⚠️ {{ pitfall.impact }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="code-section correct">
|
||||
<div class="section-label">✅ 正确写法</div>
|
||||
<div class="section-label">
|
||||
✅ 正确写法
|
||||
</div>
|
||||
<pre><code>{{ pitfall.correct }}</code></pre>
|
||||
<div class="benefit">💡 {{ pitfall.benefit }}</div>
|
||||
<div class="benefit">
|
||||
💡 {{ pitfall.benefit }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explanation">
|
||||
@@ -46,9 +66,15 @@
|
||||
</div>
|
||||
|
||||
<div class="tips-box">
|
||||
<div class="tips-title">📝 优化建议清单</div>
|
||||
<div class="tips-title">
|
||||
📝 优化建议清单
|
||||
</div>
|
||||
<div class="tips-list">
|
||||
<div v-for="(tip, i) in tips" :key="i" class="tip-item">
|
||||
<div
|
||||
v-for="(tip, i) in tips"
|
||||
:key="i"
|
||||
class="tip-item"
|
||||
>
|
||||
<span class="tip-icon">✓</span>
|
||||
<span class="tip-text">{{ tip }}</span>
|
||||
</div>
|
||||
|
||||
@@ -100,7 +100,10 @@ const setHover = (id) => {
|
||||
|
||||
<div class="content-area">
|
||||
<!-- Excel Mode -->
|
||||
<div v-if="activeTab === 'excel'" class="excel-view">
|
||||
<div
|
||||
v-if="activeTab === 'excel'"
|
||||
class="excel-view"
|
||||
>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
@@ -109,18 +112,29 @@ const setHover = (id) => {
|
||||
<th>日期</th>
|
||||
<th>书名</th>
|
||||
<th>价格</th>
|
||||
<th class="highlight-col">购买者</th>
|
||||
<th class="highlight-col">电话</th>
|
||||
<th class="highlight-col">
|
||||
购买者
|
||||
</th>
|
||||
<th class="highlight-col">
|
||||
电话
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in excelData" :key="row.id">
|
||||
<tr
|
||||
v-for="row in excelData"
|
||||
:key="row.id"
|
||||
>
|
||||
<td>{{ row.id }}</td>
|
||||
<td>{{ row.date }}</td>
|
||||
<td>{{ row.book }}</td>
|
||||
<td>{{ row.price }}</td>
|
||||
<td class="highlight-cell">{{ row.user }}</td>
|
||||
<td class="highlight-cell">{{ row.phone }}</td>
|
||||
<td class="highlight-cell">
|
||||
{{ row.user }}
|
||||
</td>
|
||||
<td class="highlight-cell">
|
||||
{{ row.phone }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -132,11 +146,16 @@ const setHover = (id) => {
|
||||
</div>
|
||||
|
||||
<!-- DB Mode -->
|
||||
<div v-else class="db-view">
|
||||
<div
|
||||
v-else
|
||||
class="db-view"
|
||||
>
|
||||
<div class="db-layout">
|
||||
<!-- Users Table -->
|
||||
<div class="db-table users-table">
|
||||
<div class="table-title">👥 用户表 (Users)</div>
|
||||
<div class="table-title">
|
||||
👥 用户表 (Users)
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -153,7 +172,9 @@ const setHover = (id) => {
|
||||
@mouseenter="setHover(u.id)"
|
||||
@mouseleave="setHover(null)"
|
||||
>
|
||||
<td class="primary-key">{{ u.id }}</td>
|
||||
<td class="primary-key">
|
||||
{{ u.id }}
|
||||
</td>
|
||||
<td>{{ u.name }}</td>
|
||||
<td>{{ u.phone }}</td>
|
||||
</tr>
|
||||
@@ -163,20 +184,28 @@ const setHover = (id) => {
|
||||
|
||||
<!-- Connection Lines (Visual only, simplified) -->
|
||||
<div class="connector">
|
||||
<div class="arrow-label">🔗 外键关联</div>
|
||||
<div class="arrow">⬅️ Join ➡️</div>
|
||||
<div class="arrow-label">
|
||||
🔗 外键关联
|
||||
</div>
|
||||
<div class="arrow">
|
||||
⬅️ Join ➡️
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Orders Table -->
|
||||
<div class="db-table orders-table">
|
||||
<div class="table-title">📦 订单表 (Orders)</div>
|
||||
<div class="table-title">
|
||||
📦 订单表 (Orders)
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>订单号</th>
|
||||
<th>书名</th>
|
||||
<th>价格</th>
|
||||
<th class="highlight-col">用户 ID (外键)</th>
|
||||
<th class="highlight-col">
|
||||
用户 ID (外键)
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -190,7 +219,9 @@ const setHover = (id) => {
|
||||
<td>{{ o.id }}</td>
|
||||
<td>{{ o.book }}</td>
|
||||
<td>{{ o.price }}</td>
|
||||
<td class="highlight-cell foreign-key">{{ o.user_id }}</td>
|
||||
<td class="highlight-cell foreign-key">
|
||||
{{ o.user_id }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -27,16 +27,24 @@
|
||||
|
||||
<div class="content-area">
|
||||
<div class="example-section">
|
||||
<div class="section-title">📝 示例 SQL</div>
|
||||
<div class="section-title">
|
||||
📝 示例 SQL
|
||||
</div>
|
||||
<div class="code-block">
|
||||
<pre><code>{{ currentOperation.example }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation-section">
|
||||
<div class="section-title">💡 逐词翻译</div>
|
||||
<div class="section-title">
|
||||
💡 逐词翻译
|
||||
</div>
|
||||
<div class="explanation-list">
|
||||
<div v-for="(item, i) in currentOperation.explanation" :key="i" class="explanation-item">
|
||||
<div
|
||||
v-for="(item, i) in currentOperation.explanation"
|
||||
:key="i"
|
||||
class="explanation-item"
|
||||
>
|
||||
<span class="keyword">{{ item.keyword }}</span>
|
||||
<span class="meaning">{{ item.meaning }}</span>
|
||||
</div>
|
||||
@@ -45,16 +53,30 @@
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<div class="section-title">📊 返回结果</div>
|
||||
<div class="section-title">
|
||||
📊 返回结果
|
||||
</div>
|
||||
<div class="result-table">
|
||||
<div class="table-header">
|
||||
<div v-for="col in currentOperation.result.columns" :key="col" class="header-cell">
|
||||
<div
|
||||
v-for="col in currentOperation.result.columns"
|
||||
:key="col"
|
||||
class="header-cell"
|
||||
>
|
||||
{{ col }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div v-for="(row, i) in currentOperation.result.rows" :key="i" class="table-row">
|
||||
<div v-for="(cell, j) in row" :key="j" class="table-cell">
|
||||
<div
|
||||
v-for="(row, i) in currentOperation.result.rows"
|
||||
:key="i"
|
||||
class="table-row"
|
||||
>
|
||||
<div
|
||||
v-for="(cell, j) in row"
|
||||
:key="j"
|
||||
class="table-cell"
|
||||
>
|
||||
{{ cell }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -63,9 +85,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="warning-box" v-if="currentOperation.warning">
|
||||
<div
|
||||
v-if="currentOperation.warning"
|
||||
class="warning-box"
|
||||
>
|
||||
<span class="icon">⚠️</span>
|
||||
<span v-html="currentOperation.warning"></span>
|
||||
<span v-html="currentOperation.warning" />
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
|
||||
@@ -18,15 +18,26 @@
|
||||
:class="{ active: activeItem === item.key }"
|
||||
@click="activeItem = activeItem === item.key ? null : item.key"
|
||||
>
|
||||
<div class="card-icon">{{ item.icon }}</div>
|
||||
<div class="card-letter">{{ item.letter }}</div>
|
||||
<div class="card-name">{{ item.name }}</div>
|
||||
<div class="card-meaning">{{ item.meaning }}</div>
|
||||
<div class="card-icon">
|
||||
{{ item.icon }}
|
||||
</div>
|
||||
<div class="card-letter">
|
||||
{{ item.letter }}
|
||||
</div>
|
||||
<div class="card-name">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<div class="card-meaning">
|
||||
{{ item.meaning }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="fade">
|
||||
<div v-if="activeItem" class="detail-panel">
|
||||
<div
|
||||
v-if="activeItem"
|
||||
class="detail-panel"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ currentItem?.icon }}</span>
|
||||
<span class="detail-title">{{ currentItem?.name }} ({{ currentItem?.letter }})</span>
|
||||
@@ -36,19 +47,28 @@
|
||||
<strong>含义：</strong>{{ currentItem?.explanation }}
|
||||
</div>
|
||||
<div class="example">
|
||||
<div class="example-label">🌰 银行转账例子：</div>
|
||||
<div class="example-text">{{ currentItem?.example }}</div>
|
||||
<div class="example-label">
|
||||
🌰 银行转账例子：
|
||||
</div>
|
||||
<div class="example-text">
|
||||
{{ currentItem?.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<div v-if="!activeItem" class="hint-text">
|
||||
<div
|
||||
v-if="!activeItem"
|
||||
class="hint-text"
|
||||
>
|
||||
👆 点击上方任意特性，查看详细解释
|
||||
</div>
|
||||
|
||||
<div class="scenario-box">
|
||||
<div class="scenario-title">🎯 12306 抢票场景</div>
|
||||
<div class="scenario-title">
|
||||
🎯 12306 抢票场景
|
||||
</div>
|
||||
<div class="scenario-content">
|
||||
<p><strong>场景：</strong>用户 A 和 B 同时看到还剩 1 张票，同时点击购买。</p>
|
||||
<p><strong>没有事务：</strong>A 扣库存，B 也扣库存，同一张票卖给了两个人！</p>
|
||||
|
||||
Reference in New Issue
Block a user