重构: 跨模块样式DRY收口+审批列表增强+灵感模块优化
- 全局样式收口: page-header/btn/modal/filter-bar/back-link/empty-state 等通用类从12个视图的scoped重复定义提取到global.css/components.css - 审批列表增强: 筛选栏(状态/风险/工具搜索)+行展开查看完整参数结果 +审批耗时显示+刷新spinner+硬编码颜色全部改用CSS变量 - 灵感模块: scoreTier统一评分阈值+score-bar/assessment-badge提取全局 +statusLabelKey消除重复+i18n状态文案对齐+eval-report--muted统一空态 - Dashboard: df-panel/df-link提取全局(修scoped不渗透)+统计卡可点击跳转 +活跃项目面板只显示active状态+灵感列表按分数排序+刷新spinner - 修复: intent.rs tool_type类型对齐(newtype)+ToolCardList补ai-btn定义 +SkillMention/ImageInput样式不渗透修复(提取全局)
This commit is contained in:
+11
-88
@@ -7,18 +7,19 @@
|
||||
<span class="dash-subtitle">{{ $t('dashboard.subtitle') }}</span>
|
||||
</div>
|
||||
<div class="dash-header-right">
|
||||
<button class="df-btn df-btn--ghost" @click="refresh" :disabled="loading" :title="$t('dashboard.refresh')">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
|
||||
<button class="btn btn-ghost btn-sm dash-refresh-btn" @click="refresh" :disabled="loading" :title="$t('dashboard.refresh')">
|
||||
<svg v-if="loading" class="dash-spinner" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12a9 9 0 11-6.219-8.56"/></svg>
|
||||
<svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/></svg>
|
||||
</button>
|
||||
<button class="df-btn df-btn--primary" @click="quickCapture">
|
||||
<button class="btn btn-primary btn-sm" @click="quickCapture">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
||||
{{ $t('dashboard.captureIdea') }}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ═══ 错误条:refresh/onMounted 加载失败对用户可见(对齐 Knowledge error-banner) ═══ -->
|
||||
<div v-if="errorMsg" class="error-banner">
|
||||
<!-- ═══ 错误条:refresh/onMounted 加载失败对用户可见(样式全局 .error-banner) ═══ -->
|
||||
<div v-if="errorMsg" class="error-banner" style="margin-bottom: 14px">
|
||||
<span class="error-text">{{ errorMsg }}</span>
|
||||
<button class="error-dismiss" @click="errorMsg = ''">✕</button>
|
||||
</div>
|
||||
@@ -122,58 +123,12 @@ onMounted(() => {
|
||||
}
|
||||
.dash-header-right { display: flex; gap: 6px; align-items: center; }
|
||||
|
||||
/* — Buttons — */
|
||||
.df-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 9px 14px;
|
||||
line-height: 1;
|
||||
border: none;
|
||||
border-radius: var(--df-radius-sm);
|
||||
font-family: var(--df-font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s var(--df-ease);
|
||||
white-space: nowrap;
|
||||
/* 刷新按钮图标旋转动画(加载中反馈) */
|
||||
.dash-spinner { animation: dash-spin 0.9s linear infinite; }
|
||||
@keyframes dash-spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.df-btn--primary {
|
||||
background: var(--df-accent);
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.df-btn--primary:hover {
|
||||
background: var(--df-accent);
|
||||
filter: brightness(1.1);
|
||||
|
||||
}
|
||||
.df-btn--ghost {
|
||||
background: rgba(255,255,255,0.03);
|
||||
color: var(--df-text-secondary);
|
||||
border: 0.5px solid var(--df-border);
|
||||
}
|
||||
.df-btn--ghost:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: var(--df-text);
|
||||
border-color: var(--df-border-strong);
|
||||
}
|
||||
.df-btn--xs { padding: 4px 10px; font-size: 11px; }
|
||||
.df-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
/* ═══ 错误条(对齐 Knowledge error-banner) ═══ */
|
||||
.error-banner {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
padding: 8px 12px; margin-bottom: 14px;
|
||||
background: rgba(255,107,107,0.12); border: 0.5px solid var(--df-danger);
|
||||
border-radius: var(--df-radius-sm); color: var(--df-danger); font-size: 12px;
|
||||
}
|
||||
.error-text { word-break: break-word; }
|
||||
.error-dismiss {
|
||||
flex-shrink: 0; background: transparent; border: none; color: var(--df-danger);
|
||||
font-size: 14px; cursor: pointer; line-height: 1; padding: 0 2px;
|
||||
}
|
||||
.error-dismiss:hover { opacity: 0.7; }
|
||||
|
||||
/* ═══ Grid Layout ═══ */
|
||||
.dash-grid {
|
||||
@@ -183,37 +138,6 @@ onMounted(() => {
|
||||
}
|
||||
.dash-right { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
/* ═══ Panel(子面板 df-panel 共享基类,scoped 下子组件需各自声明同名类样式;
|
||||
此处保留供未来页内直挂面板,子组件已自带同名 .df-panel 样式) ═══ */
|
||||
.df-panel {
|
||||
background: var(--df-bg-card);
|
||||
border: 0.5px solid var(--df-border);
|
||||
border-radius: var(--df-radius-md);
|
||||
padding: 14px 16px;
|
||||
animation: fadeInUp 0.5s var(--df-ease) both;
|
||||
}
|
||||
.df-panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.df-panel-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--df-text);
|
||||
letter-spacing: -0.1px;
|
||||
}
|
||||
.df-link {
|
||||
font-size: 11px;
|
||||
color: var(--df-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.df-link:hover { opacity: 1; text-decoration: underline; }
|
||||
|
||||
/* ═══ Responsive ═══ */
|
||||
|
||||
/* 窄窗口：单栏 */
|
||||
@@ -233,6 +157,5 @@ onMounted(() => {
|
||||
@media (min-width: 1600px) {
|
||||
.dashboard { padding: 20px 28px 24px; }
|
||||
.dash-grid { grid-template-columns: 1fr 400px; gap: 16px; }
|
||||
.df-panel { padding: 16px 18px; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user