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
@@ -19,9 +19,15 @@
|
||||
:class="['param-card', { active: selectedType === type.name }]"
|
||||
@click="selectType(type)"
|
||||
>
|
||||
<div class="param-pattern">{{ type.pattern }}</div>
|
||||
<div class="param-name">{{ type.label }}</div>
|
||||
<div class="param-example">例: {{ type.example }}</div>
|
||||
<div class="param-pattern">
|
||||
{{ type.pattern }}
|
||||
</div>
|
||||
<div class="param-name">
|
||||
{{ type.label }}
|
||||
</div>
|
||||
<div class="param-example">
|
||||
例: {{ type.example }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -39,17 +45,25 @@
|
||||
@input="parsePath"
|
||||
>
|
||||
</div>
|
||||
<div class="hint-text">试试输入：user/123 或 products/electronics/456</div>
|
||||
<div class="hint-text">
|
||||
试试输入：user/123 或 products/electronics/456
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<h5>🎯 匹配结果</h5>
|
||||
<div v-if="parseResult" class="result-box">
|
||||
<div
|
||||
v-if="parseResult"
|
||||
class="result-box"
|
||||
>
|
||||
<div class="result-row">
|
||||
<span class="result-label">匹配路由:</span>
|
||||
<code class="result-value">{{ parseResult.route }}</code>
|
||||
</div>
|
||||
<div v-if="Object.keys(parseResult.params).length" class="result-params">
|
||||
<div
|
||||
v-if="Object.keys(parseResult.params).length"
|
||||
class="result-params"
|
||||
>
|
||||
<span class="result-label">提取参数:</span>
|
||||
<div class="params-grid">
|
||||
<div
|
||||
@@ -64,8 +78,13 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-result">
|
||||
<div class="no-match-icon">🔍</div>
|
||||
<div
|
||||
v-else
|
||||
class="no-result"
|
||||
>
|
||||
<div class="no-match-icon">
|
||||
🔍
|
||||
</div>
|
||||
<div>输入路径查看解析结果</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,9 +21,9 @@
|
||||
<div class="browser-mockup">
|
||||
<div class="browser-toolbar">
|
||||
<div class="window-controls">
|
||||
<span class="dot red"></span>
|
||||
<span class="dot yellow"></span>
|
||||
<span class="dot green"></span>
|
||||
<span class="dot red" />
|
||||
<span class="dot yellow" />
|
||||
<span class="dot green" />
|
||||
</div>
|
||||
<div class="address-bar">
|
||||
<span class="protocol">https://</span>
|
||||
@@ -76,9 +76,9 @@
|
||||
<div class="browser-mockup">
|
||||
<div class="browser-toolbar">
|
||||
<div class="window-controls">
|
||||
<span class="dot red"></span>
|
||||
<span class="dot yellow"></span>
|
||||
<span class="dot green"></span>
|
||||
<span class="dot red" />
|
||||
<span class="dot yellow" />
|
||||
<span class="dot green" />
|
||||
</div>
|
||||
<div class="address-bar">
|
||||
<span class="protocol">https://</span>
|
||||
|
||||
@@ -17,11 +17,21 @@
|
||||
<span class="mode-title">MPA (多页面应用)</span>
|
||||
</div>
|
||||
<div class="flow-steps">
|
||||
<div class="step">1. 用户点击链接</div>
|
||||
<div class="step">2. 浏览器发送 HTTP 请求</div>
|
||||
<div class="step">3. 服务器返回完整 HTML</div>
|
||||
<div class="step">4. 浏览器解析并渲染新页面</div>
|
||||
<div class="step">5. 页面资源重新加载 (JS/CSS)</div>
|
||||
<div class="step">
|
||||
1. 用户点击链接
|
||||
</div>
|
||||
<div class="step">
|
||||
2. 浏览器发送 HTTP 请求
|
||||
</div>
|
||||
<div class="step">
|
||||
3. 服务器返回完整 HTML
|
||||
</div>
|
||||
<div class="step">
|
||||
4. 浏览器解析并渲染新页面
|
||||
</div>
|
||||
<div class="step">
|
||||
5. 页面资源重新加载 (JS/CSS)
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode-features">
|
||||
<div class="feature">
|
||||
@@ -45,12 +55,24 @@
|
||||
<span class="mode-title">SPA (单页面应用)</span>
|
||||
</div>
|
||||
<div class="flow-steps">
|
||||
<div class="step">1. 用户点击链接</div>
|
||||
<div class="step">2. 拦截默认行为</div>
|
||||
<div class="step">3. 更新 URL (History API)</div>
|
||||
<div class="step">4. 匹配路由配置</div>
|
||||
<div class="step">5. 动态渲染新组件</div>
|
||||
<div class="step">6. 页面无刷新更新</div>
|
||||
<div class="step">
|
||||
1. 用户点击链接
|
||||
</div>
|
||||
<div class="step">
|
||||
2. 拦截默认行为
|
||||
</div>
|
||||
<div class="step">
|
||||
3. 更新 URL (History API)
|
||||
</div>
|
||||
<div class="step">
|
||||
4. 匹配路由配置
|
||||
</div>
|
||||
<div class="step">
|
||||
5. 动态渲染新组件
|
||||
</div>
|
||||
<div class="step">
|
||||
6. 页面无刷新更新
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode-features">
|
||||
<div class="feature">
|
||||
|
||||
@@ -53,7 +53,9 @@
|
||||
<span class="view-icon">📦</span>
|
||||
<span class="view-name">{{ route.name }}</span>
|
||||
</div>
|
||||
<div class="view-path">{{ route.path || '/' }}</div>
|
||||
<div class="view-path">
|
||||
{{ route.path || '/' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,7 +68,10 @@
|
||||
@click="navigateTo(crumb.path)"
|
||||
>
|
||||
{{ crumb.name }}
|
||||
<span v-if="index < breadcrumbs.length - 1" class="separator">/</span>
|
||||
<span
|
||||
v-if="index < breadcrumbs.length - 1"
|
||||
class="separator"
|
||||
>/</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,19 +22,28 @@
|
||||
<span class="guard-icon">{{ guard.icon }}</span>
|
||||
<span class="guard-name">{{ guard.name }}</span>
|
||||
</div>
|
||||
<div class="guard-desc">{{ guard.shortDesc }}</div>
|
||||
<div class="guard-desc">
|
||||
{{ guard.shortDesc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Transition name="fade">
|
||||
<div v-if="activeGuard" class="guard-detail">
|
||||
<div
|
||||
v-if="activeGuard"
|
||||
class="guard-detail"
|
||||
>
|
||||
<div class="detail-header">
|
||||
<span class="detail-icon">{{ currentGuard?.icon }}</span>
|
||||
<span class="detail-title">{{ currentGuard?.name }}</span>
|
||||
</div>
|
||||
<div class="detail-desc">{{ currentGuard?.description }}</div>
|
||||
<div class="detail-desc">
|
||||
{{ currentGuard?.description }}
|
||||
</div>
|
||||
<div class="detail-example">
|
||||
<div class="example-label">💻 代码示例：</div>
|
||||
<div class="example-label">
|
||||
💻 代码示例：
|
||||
</div>
|
||||
<pre class="code-block">{{ currentGuard?.example }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
@@ -49,10 +58,16 @@
|
||||
:key="index"
|
||||
class="flow-step"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-name">{{ step.name }}</div>
|
||||
<div class="step-desc">{{ step.description }}</div>
|
||||
<div class="step-name">
|
||||
{{ step.name }}
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
{{ step.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,30 +23,49 @@
|
||||
@input="testMatch"
|
||||
>
|
||||
</div>
|
||||
<div class="hint-text">试试：user/123 或 products/electronics/456</div>
|
||||
<div class="hint-text">
|
||||
试试：user/123 或 products/electronics/456
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-section">
|
||||
<h5>🎯 匹配结果</h5>
|
||||
<div v-if="matchResult && matchResult.matched" class="match-success">
|
||||
<div class="success-icon">✅</div>
|
||||
<div
|
||||
v-if="matchResult && matchResult.matched"
|
||||
class="match-success"
|
||||
>
|
||||
<div class="success-icon">
|
||||
✅
|
||||
</div>
|
||||
<div class="result-details">
|
||||
<div class="result-row">
|
||||
<span class="label">匹配路由:</span>
|
||||
<code class="value">{{ matchResult.route.path }}</code>
|
||||
</div>
|
||||
<div v-if="Object.keys(matchResult.params).length" class="params-box">
|
||||
<div
|
||||
v-if="Object.keys(matchResult.params).length"
|
||||
class="params-box"
|
||||
>
|
||||
<span class="label">提取参数:</span>
|
||||
<div class="params-list">
|
||||
<span v-for="(value, key) in matchResult.params" :key="key" class="param-tag">
|
||||
<span
|
||||
v-for="(value, key) in matchResult.params"
|
||||
:key="key"
|
||||
class="param-tag"
|
||||
>
|
||||
{{ key }} = {{ value }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="match-fail">
|
||||
<div class="fail-icon">❌</div>
|
||||
<div
|
||||
v-else
|
||||
class="match-fail"
|
||||
>
|
||||
<div class="fail-icon">
|
||||
❌
|
||||
</div>
|
||||
<div>未找到匹配的路由</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+11
-2
@@ -11,7 +11,11 @@
|
||||
</div>
|
||||
|
||||
<div class="architecture-layers">
|
||||
<div class="layer" v-for="(layer, index) in layers" :key="layer.name">
|
||||
<div
|
||||
v-for="(layer, index) in layers"
|
||||
:key="layer.name"
|
||||
class="layer"
|
||||
>
|
||||
<div class="layer-header">
|
||||
<span class="layer-icon">{{ layer.icon }}</span>
|
||||
<span class="layer-name">{{ layer.name }}</span>
|
||||
@@ -26,7 +30,12 @@
|
||||
{{ comp }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="index < layers.length - 1" class="layer-arrow">↓</div>
|
||||
<div
|
||||
v-if="index < layers.length - 1"
|
||||
class="layer-arrow"
|
||||
>
|
||||
↓
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -25,20 +25,32 @@
|
||||
<div class="mode-detail">
|
||||
<div class="mode-info">
|
||||
<h5>{{ getCurrentMode().name }}</h5>
|
||||
<p class="mode-desc">{{ getCurrentMode().description }}</p>
|
||||
<p class="mode-desc">
|
||||
{{ getCurrentMode().description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mode-features">
|
||||
<div class="feature-section">
|
||||
<h6>✅ 优点</h6>
|
||||
<ul>
|
||||
<li v-for="pro in getCurrentMode().pros" :key="pro">{{ pro }}</li>
|
||||
<li
|
||||
v-for="pro in getCurrentMode().pros"
|
||||
:key="pro"
|
||||
>
|
||||
{{ pro }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="feature-section">
|
||||
<h6>❌ 缺点</h6>
|
||||
<ul>
|
||||
<li v-for="con in getCurrentMode().cons" :key="con">{{ con }}</li>
|
||||
<li
|
||||
v-for="con in getCurrentMode().cons"
|
||||
:key="con"
|
||||
>
|
||||
{{ con }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,10 +16,16 @@
|
||||
:key="index"
|
||||
class="flow-step"
|
||||
>
|
||||
<div class="step-number">{{ index + 1 }}</div>
|
||||
<div class="step-number">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="step-content">
|
||||
<div class="step-title">{{ step.title }}</div>
|
||||
<div class="step-desc">{{ step.desc }}</div>
|
||||
<div class="step-title">
|
||||
{{ step.title }}
|
||||
</div>
|
||||
<div class="step-desc">
|
||||
{{ step.desc }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -30,22 +36,34 @@
|
||||
<div class="tip-item">
|
||||
<span class="tip-icon">🎯</span>
|
||||
<div class="tip-content">
|
||||
<div class="tip-title">路由懒加载</div>
|
||||
<div class="tip-desc">按需加载页面组件，减少初始包体积</div>
|
||||
<div class="tip-title">
|
||||
路由懒加载
|
||||
</div>
|
||||
<div class="tip-desc">
|
||||
按需加载页面组件，减少初始包体积
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-item">
|
||||
<span class="tip-icon">🛡️</span>
|
||||
<div class="tip-content">
|
||||
<div class="tip-title">守卫预加载</div>
|
||||
<div class="tip-desc">在beforeEnter中预加载数据，提升用户体验</div>
|
||||
<div class="tip-title">
|
||||
守卫预加载
|
||||
</div>
|
||||
<div class="tip-desc">
|
||||
在beforeEnter中预加载数据，提升用户体验
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tip-item">
|
||||
<span class="tip-icon">⚡</span>
|
||||
<div class="tip-content">
|
||||
<div class="tip-title">过渡动画</div>
|
||||
<div class="tip-desc">添加页面切换动画，让导航更流畅</div>
|
||||
<div class="tip-title">
|
||||
过渡动画
|
||||
</div>
|
||||
<div class="tip-desc">
|
||||
添加页面切换动画，让导航更流畅
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user