lxy/DevFlow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化: UI/UX 走查修复与跨模块样式统一治理

Browse Source 
- 前四批:暗色 UA 重置+color-scheme、知识详情窄屏双闸、启动链 6 点加固、原生 tooltip 换 CSS
- 统一治理:新建 --df-pad-page/--df-fs-item/--df-on-accent token 与 .df-seg/.modal-box--sm--md/.df-badge--solid/.empty-icon--sm--xs 公共类
- 收编:status-tag 双规格、AuditLog 容器、模态自建块、空态图标四档、加载更多三实现、圆角/字号/mono 栈字面量约 60 处
- 根修:.page-header h1 加压缩保护(治标题竖排);KnowledgeDetail hover token 笔误
This commit is contained in:
lxy
2026-10-25 22:32:29 +08:00
parent 0317873a5b
commit 3caf2d047f
38 changed files with 377 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings/AboutPanel.vue
+4 -4
View File
@@ -306,7 +306,7 @@ async function onIntervalChange() {
flex: 0 0 auto;
margin-left: auto;
font-size: 13px;
font-family: var(--df-font-mono, monospace);
font-family: var(--df-font-mono);
color: var(--df-text);
white-space: nowrap;
}
@@ -314,7 +314,7 @@ async function onIntervalChange() {
flex: 0 0 auto;
margin-left: auto;
font-size: 12px;
font-family: var(--df-font-mono, monospace);
font-family: var(--df-font-mono);
color: var(--df-text-dim);
white-space: nowrap;
}
@@ -377,7 +377,7 @@ async function onIntervalChange() {
.update-progress-bar {
width: 100%;
height: 6px;
border-radius: 3px;
border-radius: var(--df-radius-xs);
background: var(--df-neutral-bg);
overflow: hidden;
}
@@ -389,7 +389,7 @@ async function onIntervalChange() {
.update-progress-text {
margin-top: 6px;
font-size: 12px;
font-family: var(--df-font-mono, monospace);
font-family: var(--df-font-mono);
color: var(--df-text-dim);
}
/* 安装错误提示:底色/边/圆角/字号走全局 .df-note--danger(token 直引无回退),此处仅留排版 */
src/components/settings/AdvancedSection.vue
+1 -1
View File
@@ -278,7 +278,7 @@ function onApprovalTimeoutChange() {
width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: var(--df-font-mono, monospace);
font-family: var(--df-font-mono);
}
/* 自定义提示词行:整行堆叠,textarea 独立一行从左到右拉满。
覆盖 SettingRow 默认横排(label 左 + control 右)。 */
src/components/settings/AllowedDirsPanel.vue
+1 -1
View File
@@ -301,7 +301,7 @@ onMounted(load)
.script-safety-input {
width: 280px;
max-width: 100%;
font-family: var(--df-font-mono, monospace);
font-family: var(--df-font-mono);
}
.script-safety-note {
font-size: 11px; color: var(--df-text-dim); margin: 4px 0 0; line-height: 1.5;
src/components/settings/ConnectionPanel.vue
+5 -3
View File
@@ -22,8 +22,8 @@
</div>
</div>
<div class="conn-actions">
<button class="btn-link" @click="openConnForm(conn)">{{ $t('common.edit') }}</button>
<button class="btn-link btn-link-danger" @click="removeConn(conn.id)">{{ $t('common.delete') }}</button>
<button class="df-link" @click="openConnForm(conn)">{{ $t('common.edit') }}</button>
<button class="df-link btn-link-danger" @click="removeConn(conn.id)">{{ $t('common.delete') }}</button>
</div>
</div>
</div>
@@ -297,7 +297,9 @@ onMounted(loadConnections)
.conn-icon { font-size: 18px; }
.conn-info { display: flex; flex-direction: column; gap: 2px; }
.conn-name-row { display: flex; align-items: center; gap: 8px; }
.conn-name { font-size: 14px; font-weight: 500; color: var(--df-text); }
.conn-name { font-size: var(--df-fs-item); font-weight: 500; color: var(--df-text); }
/* df-link(components.css 后加载)同特异性覆盖 .btn-link-danger 的 danger 色,就地补回删除确认的红色语义 */
.df-link.btn-link-danger { color: var(--df-danger); }
.conn-type {
font-size: 10px;
padding: 2px 6px;
src/components/settings/FeishuPanel.vue
+1 -1
View File
@@ -149,7 +149,7 @@ async function save() {
max-width: 100%;
min-height: 64px;
resize: vertical;
font-family: var(--df-font-mono, monospace);
font-family: var(--df-font-mono);
}
.feishu-hint {
margin: 0 0 4px;
src/components/settings/ProviderPanel.vue
+1 -1
View File
@@ -55,7 +55,7 @@
<input ref="inputApiKey" v-model="providerForm.apiKey" class="setting-input" :type="showApiKey ? 'text' : 'password'"
:class="{ 'setting-input--invalid': fieldErrors.apiKey }"
:placeholder="$t('settings.phApiKey')" @input="fieldErrors.apiKey = false" />
<button type="button" class="btn-link" :title="$t(showApiKey ? 'settings.apiKeyHide' : 'settings.apiKeyShow')"
<button type="button" class="df-link" :title="$t(showApiKey ? 'settings.apiKeyHide' : 'settings.apiKeyShow')"
@click="showApiKey = !showApiKey">
{{ $t(showApiKey ? 'settings.apiKeyHide' : 'settings.apiKeyShow') }}
</button>
src/components/settings/UclawPanel.vue
+1 -1
View File
@@ -116,7 +116,7 @@ async function save() {
/* panel/panel-header/btn 系列/setting-input 均在 settings.css 全局,此处仅本面板特有样式 */
.uclaw-settings { display: flex; flex-direction: column; gap: 4px; }
/* 定宽输入补 max-width,窄窗收缩防横向溢出 */
.uclaw-input { width: 320px; max-width: 100%; font-family: var(--df-font-mono, monospace); }
.uclaw-input { width: 320px; max-width: 100%; font-family: var(--df-font-mono); }
/* 原 var(--df-text-tertiary) 为幽灵 token(全 styles 未定义,渲染成继承色),改用已定义的弱化色 */
.uclaw-hint {
font-size: 11px;
src/components/settings/provider-panel/provider-list.vue
+6 -4
View File
@@ -11,9 +11,9 @@
<span v-if="p.enabled === false" class="pool-badge">{{ $t('settings.badgePoolDisabled') }}</span>
</div>
<div class="provider-actions">
<button class="btn-link" @click="emit('set-default', p.id)" v-if="!p.is_default">{{ $t('settings.actionSetDefault') }}</button>
<button class="btn-link" @click="emit('edit', p)">{{ $t('common.edit') }}</button>
<button class="btn-link btn-link-danger" @click="emit('delete', p.id)">{{ $t('common.delete') }}</button>
<button class="df-link" @click="emit('set-default', p.id)" v-if="!p.is_default">{{ $t('settings.actionSetDefault') }}</button>
<button class="df-link" @click="emit('edit', p)">{{ $t('common.edit') }}</button>
<button class="df-link btn-link-danger" @click="emit('delete', p.id)">{{ $t('common.delete') }}</button>
</div>
</div>
<div class="provider-detail">
@@ -163,7 +163,9 @@ defineExpose({
margin-bottom: 10px;
}
.provider-info { display: flex; align-items: center; gap: 8px; }
.provider-name { font-size: 14px; font-weight: 500; color: var(--df-text); }
.provider-name { font-size: var(--df-fs-item); font-weight: 500; color: var(--df-text); }
/* df-link(components.css 后加载)同特异性覆盖 .btn-link-danger 的 danger 色,就地补回删除确认的红色语义 */
.df-link.btn-link-danger { color: var(--df-danger); }
.default-badge {
font-size: 10px;
padding: 1px 6px;