style: FaPageMain 组件样式调整

This commit is contained in:
Hooray
2026-04-26 11:25:14 +08:00
parent 81beda6e56
commit 5e2558ac05
9 changed files with 60 additions and 59 deletions
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
@@ -53,7 +53,7 @@ function handleCopy() {
'columns-2': appSettingsStore.mode === 'pc', 'columns-2': appSettingsStore.mode === 'pc',
}" }"
> >
<FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="主题" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
颜色方案 颜色方案
@@ -83,7 +83,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" /> <FaSwitch v-model="appSettingsStore.settings.theme.colorAmblyopia" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain v-if="appSettingsStore.mode === 'pc'" title="导航菜单" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="menu-mode"> <div class="menu-mode">
<FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500"> <FaTooltip text="侧边栏模式 (有主导航菜单)" :delay="500">
<FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'"> <FaButton variant="outline" class="mode mode-side" :class="{ active: appSettingsStore.settings.menu.mode === 'side' }" @click="appSettingsStore.settings.menu.mode = 'side'">
@@ -145,7 +145,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" /> <FaSwitch v-model="appSettingsStore.settings.menu.hotkeys" :disabled="appSettingsStore.settings.menu.mode === 'single'" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="顶栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
标签栏 标签栏
@@ -175,7 +175,7 @@ function handleCopy() {
</FaButtonGroup> </FaButtonGroup>
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="标签栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
显示图标 显示图标
@@ -189,7 +189,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" /> <FaSwitch v-model="appSettingsStore.settings.tabbar.hotkeys" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="工具栏" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div v-if="appSettingsStore.mode === 'pc'" class="setting-item"> <div v-if="appSettingsStore.mode === 'pc'" class="setting-item">
<div class="label"> <div class="label">
<FaIcon name="i-ic:twotone-double-arrow" /> <FaIcon name="i-ic:twotone-double-arrow" />
@@ -237,7 +237,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" /> <FaSwitch v-model="appSettingsStore.settings.toolbar.colorScheme" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="页面" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="setting-item"> <div class="setting-item">
<div class="label"> <div class="label">
载入进度条 载入进度条
@@ -248,7 +248,7 @@ function handleCopy() {
<FaSwitch v-model="appSettingsStore.settings.page.progress" /> <FaSwitch v-model="appSettingsStore.settings.page.progress" />
</div> </div>
</FaPageMain> </FaPageMain>
<FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="pb-0 border-none font-bold" main-class="space-y-4"> <FaPageMain title="应用" class="m-0 mb-4 break-inside-avoid light:border-none" title-class="font-bold" main-class="space-y-4">
<div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4"> <div class="p-4 pb-4 pt-14 border rounded-lg relative space-y-4">
<div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute"> <div class="font-bold px-4 py-2 border-b border-e rounded-rb-lg inset-s-0 inset-t-0 absolute">
账号 账号
+4 -3
View File
@@ -35,17 +35,18 @@ function handleCollaspe() {
<template> <template>
<div <div
:class="cn('m-4 flex flex-col border rounded-lg bg-card transition-[background-color,border-color]', { :class="cn('m-4 flex flex-col overflow-hidden rounded-lg border transition-[background-color,border-color]', {
'overflow-hidden': collaspe, 'overflow-hidden': collaspe,
}, props.class)" }, props.class)"
> >
<div v-if="!!slots.title || title" :class="cn('border-b px-5 py-4 transition-border-color', props.titleClass)"> <div v-if="!!slots.title || title" :class="cn('px-4 py-4 my--2 bg-muted rounded-t-lg text-sm', props.titleClass)">
<slot name="title"> <slot name="title">
{{ title }} {{ title }}
</slot> </slot>
</div> </div>
<div <div
:class="cn('group/pagemain relative h-[calc-size(auto,size)] p-5 transition-height after:(pointer-events-none absolute bottom-0 left-0 z-1 h-12 max-h-full w-full from-transparent to-[oklch(var(--card))] bg-gradient-to-b opacity-0 transition-opacity content-empty)', { :class="cn('group/pagemain relative h-[calc-size(auto,size)] bg-card p-4 rounded-lg transition-height after:(pointer-events-none absolute bottom-0 left-0 z-1 h-12 max-h-full w-full from-transparent to-[oklch(var(--card))] bg-gradient-to-b opacity-0 transition-opacity content-empty)', {
'border-t': !!slots.title || title,
'overflow-hidden': collaspe, 'overflow-hidden': collaspe,
'after:(opacity-100)': isCollaspe, 'after:(opacity-100)': isCollaspe,
}, props.mainClass)" :style="{ }, props.mainClass)" :style="{