add help layout

Author: NeserCode

src/App.vue

@@ -60,7 +60,7 @@ onMounted(async () => {
 
 		<router-view id="context" v-slot="{ Component }">
 			<Transition :name="slideDirection" mode="out-in" :appear="true">
-				<keep-alive :include="['Home', 'About']">
+				<keep-alive :include="['Home', 'About', 'Help']">
 					<component :is="Component" :key="$route.fullPath" />
 				</keep-alive>
 			</Transition>

src/components/AngelPowerChart.vue

@@ -46,8 +46,12 @@ const chartValues = computed(() => [
 	angel.value.sm,
 	angel.value.sd,
 ])
+const powerLimit = computed(() =>
+	parseInt(angel.value.id ?? "99999") > 10000 ? 300 : 200
+)
 const optTitleColor = computed(() => (isDarkMode.value ? "#ccc" : "#333"))
 const optTextColor = computed(() => (isDarkMode.value ? "#aaa" : "#555"))
+const optBorderColor = computed(() => (isDarkMode.value ? "#666" : "#ccc"))
 const optBlurBg = computed(() =>
 	isDarkMode.value ? "rgba(32, 32, 32, 0.5)" : "rgba(255, 255, 255, 0.5)"
 )
@@ -77,20 +81,50 @@ const opt = computed(() => ({
 		nameGap: 5,
 		slient: true,
 		indicator: [
-			{ name: `物攻`, min: 0, max: 200, color: optTextColor.value },
-			{ name: `魔攻`, min: 0, max: 200, color: optTextColor.value },
-			{ name: `物抗`, min: 0, max: 200, color: optTextColor.value },
-			{ name: `魔抗`, min: 0, max: 200, color: optTextColor.value },
-			{ name: `精力`, min: 0, max: 200, color: optTextColor.value },
-			{ name: `速度`, min: 0, max: 200, color: optTextColor.value },
+			{
+				name: `物攻`,
+				min: 0,
+				max: powerLimit.value,
+				color: optTextColor.value,
+			},
+			{
+				name: `魔攻`,
+				min: 0,
+				max: powerLimit.value,
+				color: optTextColor.value,
+			},
+			{
+				name: `物抗`,
+				min: 0,
+				max: powerLimit.value,
+				color: optTextColor.value,
+			},
+			{
+				name: `魔抗`,
+				min: 0,
+				max: powerLimit.value,
+				color: optTextColor.value,
+			},
+			{
+				name: `精力`,
+				min: 0,
+				max: powerLimit.value,
+				color: optTextColor.value,
+			},
+			{
+				name: `速度`,
+				min: 0,
+				max: powerLimit.value,
+				color: optTextColor.value,
+			},
 		],
 		axisLine: {
 			show: false,
 		},
 		splitLine: {
 			show: true,
 			lineStyle: {
-				color: optTextColor.value,
+				color: optBorderColor.value,
 				width: 2,
 			},
 		},

src/components/ItemList.vue

@@ -58,10 +58,16 @@ watch(listData, (val: any[]) => {
 	})
 	console.log(listData.value)
 })
+
+// Auto-scroll to the top of the page when the page is loaded.
+const container = ref<HTMLElement | null>(null)
+watch(page, () => {
+	if (container.value) container.value.scrollTop = 0
+})
 </script>
 
 <template>
-	<div class="item-list-main custom-scrollbar">
+	<div class="item-list-main custom-scrollbar" ref="container">
 		<div class="item-card" v-for="item in listData" :key="item.id!">
 			<span class="name-text">
 				<span class="id">#{{ item.id }}</span>
@@ -84,8 +90,8 @@ watch(listData, (val: any[]) => {
 					>
 					<span class="price">售价 · {{ item.Price }}</span>
 					<span class="desc"
-						>描述 · {{ item.Desc ?? "这是一段空白的描述" }}</span
-					>
+						>描述 · <span v-html="item.Desc ?? '这是一段空白的描述'"></span
+					></span>
 				</span>
 			</span>
 		</div>
@@ -113,7 +119,7 @@ watch(listData, (val: any[]) => {
 }
 
 .item-card {
-	@apply inline-flex flex-col items-center justify-center p-2 pt-0
+	@apply inline-flex flex-col w-full items-center justify-center p-2 pt-0
 	border-2 rounded border-slate-300 dark:border-slate-600
 	snap-start transition-all ease-in-out duration-300;
 }
@@ -127,7 +133,7 @@ watch(listData, (val: any[]) => {
 }
 
 .details {
-	@apply inline-flex w-full items-center justify-center;
+	@apply inline-flex w-full items-center justify-start;
 }
 .details .icon {
 	@apply inline-flex justify-center items-center w-16 h-fit box-content mr-1
@@ -146,7 +152,7 @@ watch(listData, (val: any[]) => {
 .text .desc {
 	@apply inline-flex items-center h-fit px-1 py-0.5 mr-1 mb-1
 	text-sm font-bold opacity-75
-	transition-all;
+	transition-all whitespace-pre-line;
 }
 .text .desc {
 	@apply w-full mb-0;

src/components/SkillList.vue

@@ -81,10 +81,16 @@ function goSkillView(hash: string) {
 			params: { hash },
 		})
 }
+
+// Auto-scroll to the top of the page when the page is loaded.
+const container = ref<HTMLElement | null>(null)
+watch(page, () => {
+	if (container.value) container.value.scrollTop = 0
+})
 </script>
 
 <template>
-	<div class="skill-list-main custom-scrollbar">
+	<div class="skill-list-main custom-scrollbar" ref="container">
 		<div
 			class="skill-card"
 			v-for="skill in listData"

src/components/SpiritList.vue

@@ -85,10 +85,16 @@ function goAngelView(hash: string) {
 			params: { hash },
 		})
 }
+
+// Auto-scroll to the top of the page when the page is loaded.
+const container = ref<HTMLElement | null>(null)
+watch(page, () => {
+	if (container.value) container.value.scrollTop = 0
+})
 </script>
 
 <template>
-	<div class="angel-list-main custom-scrollbar">
+	<div class="angel-list-main custom-scrollbar" ref="container">
 		<div
 			class="angel-card"
 			v-for="angel in listData"

src/components/TopLinks.vue

@@ -1,5 +1,9 @@
 <script lang="ts" setup>
-import { BookOpenIcon, QuestionMarkCircleIcon } from "@heroicons/vue/20/solid"
+import {
+	BookOpenIcon,
+	QuestionMarkCircleIcon,
+	LightBulbIcon,
+} from "@heroicons/vue/20/solid"
 import Menu from "./native/Menu.vue"
 import GoBack from "./native/GoBack.vue"
 import { computed, onMounted } from "vue"
@@ -8,7 +12,7 @@ import { useStorage } from "@vueuse/core"
 import { nextTickToShow } from "../composables/useLocal"
 
 const $route = useRoute()
-const shouldShowLinksPath = ["home", "about"]
+const shouldShowLinksPath = ["home", "about", "help"]
 const hasActivedLink = computed(() => {
 	return shouldShowLinksPath.includes(
 		(($route.name as string) ?? "").toLowerCase()
@@ -41,6 +45,10 @@ onMounted(() => {
 				<BookOpenIcon class="icon" />
 				<span class="text">{{ getMatchCategoryName() }}</span>
 			</RouterLink>
+			<RouterLink draggable="false" class="link" to="/help">
+				<LightBulbIcon class="icon" />
+				<span class="text">帮助</span>
+			</RouterLink>
 			<RouterLink draggable="false" class="link" to="/about">
 				<QuestionMarkCircleIcon class="icon" />
 				<span class="text">关于</span>

src/composables/useLocal.ts

@@ -17,6 +17,8 @@ export function nextTickToShow() {
 
 export function useDeCryptKey(salt: string, password: string) {
 	// return Base64.stringify(HmacSHA512(sha256(password), salt)) // use in dev, product use below
+	// console.log(Base64.stringify(HmacSHA512(sha256("RoCoX Codex"), "NCS.RoCoX")))
+
 	return (
 		$DevCryptKey ===
 		Base64.stringify(HmacSHA512(sha256(password), salt)).toString()

src/router.ts

@@ -14,6 +14,12 @@ const routes: Array<RouteRecordRaw> = [
 		meta: {},
 		component: () => import("./views/About.vue"),
 	},
+	{
+		path: "/help",
+		name: "Help",
+		meta: {},
+		component: () => import("./views/Help.vue"),
+	},
 	{
 		path: "/angel/:hash",
 		name: "Angel",

src/share.ts

@@ -184,3 +184,9 @@ export type Collections = Map<
 	| "KeyShortCut",
 	number
 >
+
+export interface Help {
+	id: number
+	question: string
+	answer: string
+}

src/views/Help.vue

@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import { Disclosure, DisclosureButton, DisclosurePanel } from "@headlessui/vue"
+import { ChevronUpIcon } from "@heroicons/vue/20/solid"
+
+import type { Help } from "../share"
+
+const getComputedOpenClass = (state: any) => {
+	return !!state ? "open" : null
+}
+const defaultOpenList: number[] = [1]
+const getDefaultOpenState = (id: number) => {
+	return defaultOpenList.includes(id)
+}
+const helpList: Help[] = [
+	{
+		id: 1,
+		question: "快捷键 · 我能使用什么快捷键",
+		answer:
+			"1. 使用 Ctrl+Q 进行快速刷新；" +
+			"\n2. 使用 Ctrl+P 进行切换软件置顶状态。" +
+			"\n3. 使用 Ctrl+D 进行切换软件主题状态。",
+	},
+	{
+		id: 2,
+		question: "快捷键 · 为什么不推荐使用快捷键",
+		answer:
+			"1. 由于软件基层使用的快捷键拦截机制会导致用户对应的全局键盘事件劫持，从用户操作性上考虑软件本应当默认禁用快捷键；" +
+			"\n2. 快捷键一般用于开发调试所用，且在多窗口快捷键的机制上是有一定的次序缺陷（同样由本解第一点中提出的问题引起），暂时软件默认禁用部分快捷键。",
+	},
+	{
+		id: 3,
+		question: "快捷键&开发模式 · 如何启用开发模式及刷新快捷键",
+		answer: "暂不提供",
+	},
+	{
+		id: 4,
+		question: "数据 · 为什么部分数据不对/不公开/无法显示",
+		answer:
+			"1. 接口数据造成的错误不由本软件负责；" +
+			"\n2. 异常数据大多是由于网络接口开发人员设计上的不合理或是缺陷造成，其中官方的静态资源例如宠物的小头像命名与存储比较杂乱" +
+			"，本软件有使用记忆缓存的方法记忆正确资源，在第二次访问该异常头像资源会恢复正常，而其他问题资源则暂时无法解决；",
+	},
+]
+</script>
+
+<template>
+	<div>
+		<div class="disclosure-main custom-scrollbar">
+			<Disclosure
+				v-for="help in helpList"
+				:key="help.id"
+				as="div"
+				class="disclosure"
+				v-slot="{ open }"
+				:defaultOpen="getDefaultOpenState(help.id)"
+			>
+				<DisclosureButton class="disclosure-btn">
+					<span class="id">#{{ help.id }}</span>
+					<span class="question">{{ help.question }}</span>
+					<ChevronUpIcon :class="['icon', getComputedOpenClass(open)]" />
+				</DisclosureButton>
+				<transition
+					enter-active-class="transition duration-100 ease-out"
+					enter-from-class="transform scale-95 opacity-0"
+					enter-to-class="transform scale-100 opacity-100"
+					leave-active-class="transition duration-75 ease-out"
+					leave-from-class="transform scale-100 opacity-100"
+					leave-to-class="transform scale-95 opacity-0"
+				>
+					<DisclosurePanel class="disclosure-panel">
+						<span class="answer">{{ help.answer }}</span>
+					</DisclosurePanel>
+				</transition>
+			</Disclosure>
+		</div>
+	</div>
+</template>
+
+<style lang="postcss">
+.disclosure-main {
+	@apply flex flex-col w-full max-h-[30rem] p-2 gap-2 mx-auto
+  bg-teal-100 dark:bg-teal-800
+  rounded transition-all ease-in-out
+  select-none overflow-y-auto;
+
+	@apply sm:max-h-[42rem];
+}
+.disclosure-btn {
+	@apply flex justify-between w-full px-4 py-2
+  text-sm font-medium text-left
+  bg-sky-200 dark:bg-sky-700
+  focus:ring-2 ring-green-400 dark:ring-green-600
+  rounded outline-none
+  transition-all ease-in-out;
+}
+.disclosure-panel {
+	@apply px-4 pt-4 pb-2
+  opacity-80
+  whitespace-pre-line
+  transition-all ease-in-out;
+}
+</style>
+<style lang="postcss" scoped>
+.disclosure-btn .icon {
+	@apply w-5 h-5
+  transition-all ease-in-out;
+}
+.disclosure-btn .icon.open {
+	@apply rotate-180;
+}
+
+.question {
+	@apply font-black text-base;
+}
+.answer {
+	@apply font-semibold text-sm;
+}
+</style>