mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-07-09 19:41:11 +08:00
style(editor): 优化历史列表操作区悬停展示与列对齐
将回滚/回到/查看差异收敛为悬停显示的操作区,固定序号列右对齐,并调整「回到」按钮配色。
This commit is contained in:
parent
171d31e207
commit
7d45aa5eec
@ -15,6 +15,33 @@
|
|||||||
|
|
||||||
<span v-if="headSaved" class="m-editor-history-list-item-saved" title="该记录为最近一次保存的状态">已保存</span>
|
<span v-if="headSaved" class="m-editor-history-list-item-saved" title="该记录为最近一次保存的状态">已保存</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
v-if="!merged && (headRevertable || headDiffable || canHeadGoto)"
|
||||||
|
class="m-editor-history-list-item-actions"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="headRevertable"
|
||||||
|
class="m-editor-history-list-item-revert"
|
||||||
|
title="将该步骤的修改作为一次新操作反向应用(不影响后续历史)"
|
||||||
|
@click.stop="onRevertClick(group.subSteps[0].index)"
|
||||||
|
>回滚</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="canHeadGoto"
|
||||||
|
class="m-editor-history-list-item-goto"
|
||||||
|
title="回到该记录"
|
||||||
|
@click.stop="onGotoClick(group.subSteps[0].index)"
|
||||||
|
>回到</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="headDiffable"
|
||||||
|
class="m-editor-history-list-item-diff"
|
||||||
|
title="查看修改差异"
|
||||||
|
@click.stop="onDiffClick(group.subSteps[0].index)"
|
||||||
|
>查看差异</span
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
v-if="!merged && sourceLabel(group.source)"
|
v-if="!merged && sourceLabel(group.source)"
|
||||||
class="m-editor-history-list-item-source"
|
class="m-editor-history-list-item-source"
|
||||||
@ -30,28 +57,6 @@
|
|||||||
>
|
>
|
||||||
|
|
||||||
<span v-if="merged" class="m-editor-history-list-item-merge">合并 {{ stepCount }} 步</span>
|
<span v-if="merged" class="m-editor-history-list-item-merge">合并 {{ stepCount }} 步</span>
|
||||||
|
|
||||||
<span
|
|
||||||
v-if="!merged && headRevertable"
|
|
||||||
class="m-editor-history-list-item-revert"
|
|
||||||
title="将该步骤的修改作为一次新操作反向应用(不影响后续历史)"
|
|
||||||
@click.stop="onRevertClick(group.subSteps[0].index)"
|
|
||||||
>回滚</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="!merged && gotoEnabled && !group.isCurrent && group.subSteps.length"
|
|
||||||
class="m-editor-history-list-item-goto"
|
|
||||||
title="回到该记录"
|
|
||||||
@click.stop="onGotoClick(group.subSteps[0].index)"
|
|
||||||
>回到</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="!merged && headDiffable"
|
|
||||||
class="m-editor-history-list-item-diff"
|
|
||||||
title="查看修改差异"
|
|
||||||
@click.stop="onDiffClick(group.subSteps[0].index)"
|
|
||||||
>查看差异</span
|
|
||||||
>
|
|
||||||
<span v-if="merged" class="m-editor-history-list-group-toggle" :class="{ 'is-expanded': expanded }">▾</span>
|
<span v-if="merged" class="m-editor-history-list-group-toggle" :class="{ 'is-expanded': expanded }">▾</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -65,6 +70,32 @@
|
|||||||
<span class="m-editor-history-list-item-index">#{{ s.index + 1 }}</span>
|
<span class="m-editor-history-list-item-index">#{{ s.index + 1 }}</span>
|
||||||
<span class="m-editor-history-list-substep-desc">{{ s.desc }}</span>
|
<span class="m-editor-history-list-substep-desc">{{ s.desc }}</span>
|
||||||
<span v-if="s.saved" class="m-editor-history-list-item-saved" title="该记录为最近一次保存的状态">已保存</span>
|
<span v-if="s.saved" class="m-editor-history-list-item-saved" title="该记录为最近一次保存的状态">已保存</span>
|
||||||
|
<span
|
||||||
|
v-if="s.revertable || s.diffable || (gotoEnabled && !s.isCurrent)"
|
||||||
|
class="m-editor-history-list-item-actions"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="s.revertable"
|
||||||
|
class="m-editor-history-list-item-revert"
|
||||||
|
title="将该步骤的修改作为一次新操作反向应用(不影响后续历史)"
|
||||||
|
@click.stop="onRevertClick(s.index)"
|
||||||
|
>回滚</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="gotoEnabled && !s.isCurrent"
|
||||||
|
class="m-editor-history-list-item-goto"
|
||||||
|
title="回到该记录"
|
||||||
|
@click.stop="onGotoClick(s.index)"
|
||||||
|
>回到</span
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
v-if="s.diffable"
|
||||||
|
class="m-editor-history-list-item-diff"
|
||||||
|
title="查看修改差异"
|
||||||
|
@click.stop="onDiffClick(s.index)"
|
||||||
|
>查看差异</span
|
||||||
|
>
|
||||||
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="sourceLabel(s.source)"
|
v-if="sourceLabel(s.source)"
|
||||||
class="m-editor-history-list-item-source"
|
class="m-editor-history-list-item-source"
|
||||||
@ -72,27 +103,6 @@
|
|||||||
>{{ sourceLabel(s.source) }}</span
|
>{{ sourceLabel(s.source) }}</span
|
||||||
>
|
>
|
||||||
<span v-if="s.time" class="m-editor-history-list-item-time" :title="s.timeTitle || s.time">{{ s.time }}</span>
|
<span v-if="s.time" class="m-editor-history-list-item-time" :title="s.timeTitle || s.time">{{ s.time }}</span>
|
||||||
<span
|
|
||||||
v-if="s.revertable"
|
|
||||||
class="m-editor-history-list-item-revert"
|
|
||||||
title="将该步骤的修改作为一次新操作反向应用(不影响后续历史)"
|
|
||||||
@click.stop="onRevertClick(s.index)"
|
|
||||||
>回滚</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="gotoEnabled && !s.isCurrent"
|
|
||||||
class="m-editor-history-list-item-goto"
|
|
||||||
title="回到该记录"
|
|
||||||
@click.stop="onGotoClick(s.index)"
|
|
||||||
>回到</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
v-if="s.diffable"
|
|
||||||
class="m-editor-history-list-item-diff"
|
|
||||||
title="查看修改差异"
|
|
||||||
@click.stop="onDiffClick(s.index)"
|
|
||||||
>查看差异</span
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
@ -209,6 +219,11 @@ const headDiffable = computed(() => !merged.value && Boolean(props.group.subStep
|
|||||||
/** 单步组头部是否展示"回滚"入口:要求该唯一子步本身可回滚(已应用)。 */
|
/** 单步组头部是否展示"回滚"入口:要求该唯一子步本身可回滚(已应用)。 */
|
||||||
const headRevertable = computed(() => !merged.value && Boolean(props.group.subSteps[0]?.revertable));
|
const headRevertable = computed(() => !merged.value && Boolean(props.group.subSteps[0]?.revertable));
|
||||||
|
|
||||||
|
/** 单步组头部是否展示"回到"入口:可跳转、非当前、且存在唯一子步。 */
|
||||||
|
const canHeadGoto = computed(
|
||||||
|
() => !merged.value && props.gotoEnabled && !props.group.isCurrent && props.group.subSteps.length > 0,
|
||||||
|
);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 合并组展开后的子步渲染顺序:与外层分组列表保持一致——倒序展示(最新的子步在最上方)。
|
* 合并组展开后的子步渲染顺序:与外层分组列表保持一致——倒序展示(最新的子步在最上方)。
|
||||||
* 外层 page tab / bucket 都已对 groups 做了 reverse,子步沿用同样的视觉规则更直观。
|
* 外层 page tab / bucket 都已对 groups 做了 reverse,子步沿用同样的视觉规则更直观。
|
||||||
|
|||||||
@ -7,14 +7,10 @@
|
|||||||
<span class="m-editor-history-list-item-index" title="历史步骤编号 #0(未修改的初始状态)">#0</span>
|
<span class="m-editor-history-list-item-index" title="历史步骤编号 #0(未修改的初始状态)">#0</span>
|
||||||
<span class="m-editor-history-list-item-op op-initial">初始</span>
|
<span class="m-editor-history-list-item-op op-initial">初始</span>
|
||||||
<span class="m-editor-history-list-item-desc">{{ desc }}</span>
|
<span class="m-editor-history-list-item-desc">{{ desc }}</span>
|
||||||
|
<span v-if="gotoEnabled && !isCurrent" class="m-editor-history-list-item-actions">
|
||||||
|
<span class="m-editor-history-list-item-goto" title="回到该记录" @click.stop="onClick">回到</span>
|
||||||
|
</span>
|
||||||
<span v-if="time" class="m-editor-history-list-item-time" :title="timeTitle">{{ time }}</span>
|
<span v-if="time" class="m-editor-history-list-item-time" :title="timeTitle">{{ time }}</span>
|
||||||
<span
|
|
||||||
v-if="gotoEnabled && !isCurrent"
|
|
||||||
class="m-editor-history-list-item-goto"
|
|
||||||
title="回到该记录"
|
|
||||||
@click.stop="onClick"
|
|
||||||
>回到</span
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -237,6 +237,10 @@
|
|||||||
|
|
||||||
.m-editor-history-list-item-index {
|
.m-editor-history-list-item-index {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
// 固定最小宽度并右对齐:序号位数不一(#6 / #16)时右边界仍统一,
|
||||||
|
// 使紧随其后的「类型」徽标在各行间对齐成整齐的一列。
|
||||||
|
min-width: 30px;
|
||||||
|
text-align: right;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
@ -244,6 +248,15 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 合并组头部展示的是步骤区间(如 #10-#20),宽度本就不定、也无需与单步行对齐,
|
||||||
|
// 恢复自然宽度与左对齐,避免被强制成固定列后显得突兀。
|
||||||
|
.m-editor-history-list-group.is-merged
|
||||||
|
> .m-editor-history-list-group-head
|
||||||
|
> .m-editor-history-list-item-index {
|
||||||
|
min-width: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
// 操作时间:弱化展示,紧贴在描述之后、各操作按钮之前。
|
// 操作时间:弱化展示,紧贴在描述之后、各操作按钮之前。
|
||||||
.m-editor-history-list-item-time {
|
.m-editor-history-list-item-time {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
@ -344,6 +357,24 @@
|
|||||||
letter-spacing: 0.2px;
|
letter-spacing: 0.2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 操作区:把「回滚 / 回到 / 查看差异」收敛为一个统一容器,默认隐藏,
|
||||||
|
// 仅在指针悬停于所在行时显示。静止状态下每行最右侧固定为「时间」,
|
||||||
|
// 各行因此能对齐成整齐的右侧列,避免按钮数量不一导致的参差错乱。
|
||||||
|
.m-editor-history-list-item-actions {
|
||||||
|
display: none;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.m-editor-history-list-group-head:hover > .m-editor-history-list-item-actions,
|
||||||
|
.m-editor-history-list-substeps
|
||||||
|
> li:hover
|
||||||
|
> .m-editor-history-list-item-actions,
|
||||||
|
.m-editor-history-list-initial:hover > .m-editor-history-list-item-actions {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
.m-editor-history-list-item-diff {
|
.m-editor-history-list-item-diff {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
@ -360,21 +391,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 「跳转」按钮:将历史游标移动到该 step,替代原先点击整行跳转的交互。
|
// 「回到」按钮:将历史游标移动到该 step。使用绿色色系,
|
||||||
// 使用与组卡片一致的紫色色系,与「查看差异」「回滚」区分开。
|
// 与红色「回滚」、蓝色「查看差异」区分,也避免与紧邻的灰色「来源」徽标混淆。
|
||||||
.m-editor-history-list-item-goto {
|
.m-editor-history-list-item-goto {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
color: #606266;
|
color: #529b2e;
|
||||||
background-color: rgba(96, 98, 102, 0.1);
|
background-color: rgba(103, 194, 58, 0.12);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(96, 98, 102, 0.18);
|
background-color: rgba(103, 194, 58, 0.24);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user