Commit 6ddae59a by pangchong

style(editor): 优化代码格式和样式排版

- 调整翻译中提示组件的div标签换行格式
- 精简SelectionToolbar中CommonButton组件的写法,合并多行属性为一行
- 优化selection-floating-toolbar样式中的box-shadow和transition属性的多行排版
- 统一.fade-*过渡样式的transition属性格式
parent e2326b0f
......@@ -19,7 +19,9 @@
v-if="translatingNodeId === node.id"
class="absolute inset-0 z-10 flex items-center justify-center bg-card bg-opacity-75 backdrop-blur-[1px] select-none pointer-events-none rounded"
>
<div class="flex items-center space-x-1.5 bg-popover border border-divider shadow-md rounded-full px-3 py-1 text-primary text-xs font-medium">
<div
class="flex items-center space-x-1.5 bg-popover border border-divider shadow-md rounded-full px-3 py-1 text-primary text-xs font-medium"
>
<n-icon class="animate-spin"><SyncOutline /></n-icon>
<span>翻译中...</span>
</div>
......
......@@ -16,13 +16,7 @@
<!-- 编辑节点属性 -->
<n-tooltip trigger="hover">
<template #trigger>
<CommonButton
size="tiny"
quaternary
circle
:disabled="!hasActiveNode"
@click="handleEditNode"
>
<CommonButton size="tiny" quaternary circle :disabled="!hasActiveNode" @click="handleEditNode">
<template #icon>
<n-icon><SettingsOutline /></n-icon>
</template>
......@@ -34,13 +28,7 @@
<!-- 查看规则 -->
<n-tooltip trigger="hover">
<template #trigger>
<CommonButton
size="tiny"
quaternary
circle
:disabled="!hasActiveNode || isVirtualText"
@click="handleViewRule"
>
<CommonButton size="tiny" quaternary circle :disabled="!hasActiveNode || isVirtualText" @click="handleViewRule">
<template #icon>
<n-icon><EyeOutline /></n-icon>
</template>
......@@ -89,13 +77,7 @@
<!-- 插入到上方 -->
<n-tooltip trigger="hover">
<template #trigger>
<CommonButton
size="tiny"
quaternary
circle
:disabled="!hasActiveNode || !hasParent"
@click="handleInsertBefore"
>
<CommonButton size="tiny" quaternary circle :disabled="!hasActiveNode || !hasParent" @click="handleInsertBefore">
<template #icon>
<n-icon><ArrowUpOutline /></n-icon>
</template>
......@@ -107,13 +89,7 @@
<!-- 插入到下方 -->
<n-tooltip trigger="hover">
<template #trigger>
<CommonButton
size="tiny"
quaternary
circle
:disabled="!hasActiveNode || !hasParent"
@click="handleInsertAfter"
>
<CommonButton size="tiny" quaternary circle :disabled="!hasActiveNode || !hasParent" @click="handleInsertAfter">
<template #icon>
<n-icon><ArrowDownOutline /></n-icon>
</template>
......@@ -181,13 +157,19 @@ const {
<style scoped>
.selection-floating-toolbar {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
box-shadow:
0 10px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
border-color: var(--divider-color, rgba(0, 0, 0, 0.08));
transition: opacity 0.15s ease, transform 0.15s ease;
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.15s ease, transform 0.15s ease;
transition:
opacity 0.15s ease,
transform 0.15s ease;
}
.fade-enter-from,
.fade-leave-to {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment