|
| 1 | +<script lang="ts" setup> |
| 2 | +import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue" |
| 3 | +import { ChevronUpIcon } from "@heroicons/vue/20/solid" |
| 4 | +
|
| 5 | +import type { Help } from "../share" |
| 6 | +
|
| 7 | +const getComputedOpenClass = (state: any) => { |
| 8 | + return !!state ? "open" : null |
| 9 | +} |
| 10 | +const defaultOpenList: number[] = [1] |
| 11 | +const getDefaultOpenState = (id: number) => { |
| 12 | + return defaultOpenList.includes(id) |
| 13 | +} |
| 14 | +const helpList: Help[] = [ |
| 15 | + { |
| 16 | + id: 1, |
| 17 | + question: "快捷键 · 我能使用什么快捷键", |
| 18 | + answer: |
| 19 | + "1. 使用 Ctrl+Q 进行快速刷新；" + |
| 20 | + "\n2. 使用 Ctrl+P 进行切换软件置顶状态。" + |
| 21 | + "\n3. 使用 Ctrl+D 进行切换软件主题状态。", |
| 22 | + }, |
| 23 | + { |
| 24 | + id: 2, |
| 25 | + question: "快捷键 · 为什么不推荐使用快捷键", |
| 26 | + answer: |
| 27 | + "1. 由于软件基层使用的快捷键拦截机制会导致用户对应的全局键盘事件劫持，从用户操作性上考虑软件本应当默认禁用快捷键；" + |
| 28 | + "\n2. 快捷键一般用于开发调试所用，且在多窗口快捷键的机制上是有一定的次序缺陷（同样由本解第一点中提出的问题引起），暂时软件默认禁用部分快捷键。", |
| 29 | + }, |
| 30 | + { |
| 31 | + id: 3, |
| 32 | + question: "快捷键&开发模式 · 如何启用开发模式及刷新快捷键", |
| 33 | + answer: "暂不提供", |
| 34 | + }, |
| 35 | + { |
| 36 | + id: 4, |
| 37 | + question: "数据 · 为什么部分数据不对/不公开/无法显示", |
| 38 | + answer: |
| 39 | + "1. 接口数据造成的错误不由本软件负责；" + |
| 40 | + "\n2. 异常数据大多是由于网络接口开发人员设计上的不合理或是缺陷造成，其中官方的静态资源例如宠物的小头像命名与存储比较杂乱" + |
| 41 | + "，本软件有使用记忆缓存的方法记忆正确资源，在第二次访问该异常头像资源会恢复正常，而其他问题资源则暂时无法解决；", |
| 42 | + }, |
| 43 | +] |
| 44 | +</script> |
| 45 | + |
| 46 | +<template> |
| 47 | + <div> |
| 48 | + <div class="disclosure-main custom-scrollbar"> |
| 49 | + <Disclosure |
| 50 | + v-for="help in helpList" |
| 51 | + :key="help.id" |
| 52 | + as="div" |
| 53 | + class="disclosure" |
| 54 | + v-slot="{ open }" |
| 55 | + :defaultOpen="getDefaultOpenState(help.id)" |
| 56 | + > |
| 57 | + <DisclosureButton class="disclosure-btn"> |
| 58 | + <span class="id">#{{ help.id }}</span> |
| 59 | + <span class="question">{{ help.question }}</span> |
| 60 | + <ChevronUpIcon :class="['icon', getComputedOpenClass(open)]" /> |
| 61 | + </DisclosureButton> |
| 62 | + <transition |
| 63 | + enter-active-class="transition duration-100 ease-out" |
| 64 | + enter-from-class="transform scale-95 opacity-0" |
| 65 | + enter-to-class="transform scale-100 opacity-100" |
| 66 | + leave-active-class="transition duration-75 ease-out" |
| 67 | + leave-from-class="transform scale-100 opacity-100" |
| 68 | + leave-to-class="transform scale-95 opacity-0" |
| 69 | + > |
| 70 | + <DisclosurePanel class="disclosure-panel"> |
| 71 | + <span class="answer">{{ help.answer }}</span> |
| 72 | + </DisclosurePanel> |
| 73 | + </transition> |
| 74 | + </Disclosure> |
| 75 | + </div> |
| 76 | + </div> |
| 77 | +</template> |
| 78 | + |
| 79 | +<style lang="postcss"> |
| 80 | +.disclosure-main { |
| 81 | + @apply flex flex-col w-full max-h-[30rem] p-2 gap-2 mx-auto |
| 82 | + bg-teal-100 dark:bg-teal-800 |
| 83 | + rounded transition-all ease-in-out |
| 84 | + select-none overflow-y-auto; |
| 85 | +
|
| 86 | + @apply sm:max-h-[42rem]; |
| 87 | +} |
| 88 | +.disclosure-btn { |
| 89 | + @apply flex justify-between w-full px-4 py-2 |
| 90 | + text-sm font-medium text-left |
| 91 | + bg-sky-200 dark:bg-sky-700 |
| 92 | + focus:ring-2 ring-green-400 dark:ring-green-600 |
| 93 | + rounded outline-none |
| 94 | + transition-all ease-in-out; |
| 95 | +} |
| 96 | +.disclosure-panel { |
| 97 | + @apply px-4 pt-4 pb-2 |
| 98 | + opacity-80 |
| 99 | + whitespace-pre-line |
| 100 | + transition-all ease-in-out; |
| 101 | +} |
| 102 | +</style> |
| 103 | +<style lang="postcss" scoped> |
| 104 | +.disclosure-btn .icon { |
| 105 | + @apply w-5 h-5 |
| 106 | + transition-all ease-in-out; |
| 107 | +} |
| 108 | +.disclosure-btn .icon.open { |
| 109 | + @apply rotate-180; |
| 110 | +} |
| 111 | +
|
| 112 | +.question { |
| 113 | + @apply font-black text-base; |
| 114 | +} |
| 115 | +.answer { |
| 116 | + @apply font-semibold text-sm; |
| 117 | +} |
| 118 | +</style> |
0 commit comments