html/admin-web
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(admin): show contextual guidance as hover info icons

Browse Source
This commit is contained in:
ouyangxq
2026-10-19 20:46:28 +08:00
parent e7dc68473e
commit cbd849444f
10 changed files with 77 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/InlineHelp.vue
+10 -8
View File
@@ -1,19 +1,21 @@
<script setup lang="ts">
import { Info } from '@lucide/vue'
withDefaults(defineProps<{ title?: string }>(), { title: '操作说明' })
</script>
<template>
<details class="inline-help">
<summary>{{ title }}</summary>
<div class="inline-help__content"><slot /></div>
</details>
<el-tooltip :trigger="['hover', 'focus']" placement="top" effect="light" :show-after="150" :hide-after="100" :enterable="true">
<template #content><div class="inline-help__content"><strong>{{ title }}</strong><slot /></div></template>
<button type="button" class="inline-help__trigger" :aria-label="`查看${title}`"><Info :size="14" aria-hidden="true" /></button>
</el-tooltip>
</template>
<style scoped>
.inline-help { min-width: 0; color: var(--cc-muted, #667085); font-size: var(--admin-font-caption, 12px); line-height: 1.6; }
.inline-help > summary { width: fit-content; color: var(--cc-primary, #1677ff); cursor: pointer; }
.inline-help > summary:focus-visible { outline: 2px solid var(--cc-primary, #1677ff); outline-offset: 2px; }
.inline-help__content { margin-top: var(--admin-space-1, 4px); }
.inline-help__trigger { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--cc-muted, #667085); cursor: help; vertical-align: middle; }
.inline-help__trigger:hover, .inline-help__trigger:focus-visible { color: var(--cc-primary, #1677ff); }
.inline-help__trigger:focus-visible { outline: 2px solid var(--cc-primary, #1677ff); outline-offset: 2px; }
.inline-help__content { max-width: 320px; color: var(--cc-text, #172033); font-size: var(--admin-font-caption, 12px); font-weight: 400; line-height: 1.6; white-space: normal; }
.inline-help__content > strong { display: block; margin-bottom: var(--admin-space-1, 4px); }
.inline-help__content :deep(p) { margin: 0; }
.inline-help__content :deep(p + p) { margin-top: var(--admin-space-1, 4px); }
</style>