|
|
@@ -3,7 +3,7 @@ import "./layout.css"
|
|
|
import "@/assets/table.css"
|
|
|
import Context from "./layout.js"
|
|
|
import ctxRef from "@/utils/ctx_ref.js";
|
|
|
-import {provide, ref} from "vue";
|
|
|
+import { provide, ref } from "vue";
|
|
|
import BasicLayout from "@/layouts/BasicLayout.vue";
|
|
|
import TMenubar from "@/components/ui/TMenubar.vue";
|
|
|
import TMenuAccordion from "@/components/ui/TMenuAccordion.vue";
|
|
|
@@ -37,24 +37,38 @@ const showMainMenu = () => {
|
|
|
<div class="top-nav">
|
|
|
<TMenubar>
|
|
|
<template #start>
|
|
|
- <a href="" class="inline-block sm:hidden" :class="{'bg-gray-200': mainMenuVisible, '!bg-transparent': !mainMenuVisible}" @click.prevent="showMainMenu"><i class="icon bars"></i></a>
|
|
|
+ <a href="" class="inline-block sm:hidden"
|
|
|
+ :class="{ 'bg-gray-200': mainMenuVisible, '!bg-transparent': !mainMenuVisible }"
|
|
|
+ @click.prevent="showMainMenu"><i class="icon bars"></i></a>
|
|
|
<a href="/dashboard" class="hidden sm:flex">
|
|
|
- <i class="ui icon cloud" v-if="ctx.teaCommon.teaLogoFileId == 0"></i><img v-if="ctx.teaCommon.teaLogoFileId > 0" :src="'/ui/image/' + ctx.teaCommon.teaLogoFileId" style="width: auto;height: 1.6em" alt="Logo" class="dark:invert"/> {{ ctx.teaTitle }} <sup v-if="ctx.teaCommon.teaShowVersion">v{{ ctx.teaVersion }}</sup><sup v-if="ctx.teaFrontMode == 'proxy'">front:{{ctx.teaFrontMode}}</sup>
|
|
|
+ <div class="flex gap-[8px] items-center">
|
|
|
+ <span class="title-icon text-[24px] text-[#1e65ff]"></span>
|
|
|
+ <span class="font-bold text-[24px]">Faven.</span>
|
|
|
+ </div>
|
|
|
+ <!-- <i class="ui icon cloud" v-if="ctx.teaCommon.teaLogoFileId == 0"></i><img
|
|
|
+ v-if="ctx.teaCommon.teaLogoFileId > 0" :src="'/ui/image/' + ctx.teaCommon.teaLogoFileId"
|
|
|
+ style="width: auto;height: 1.6em" alt="Logo" class="dark:invert" /> {{ ctx.teaTitle
|
|
|
+ }} <sup v-if="ctx.teaCommon.teaShowVersion">v{{ ctx.teaVersion }}</sup><sup
|
|
|
+ v-if="ctx.teaFrontMode == 'proxy'">front:{{ ctx.teaFrontMode }}</sup> -->
|
|
|
</a>
|
|
|
</template>
|
|
|
<template #end>
|
|
|
<div class="flex flex-wrap items-center">
|
|
|
- <a href="/messages" class="item" :class="{active:ctx.teaMenu == 'message'}"><span :class="{'blink':ctx.globalMessageBadge > 0}" class="flex items-center gap-0.5"><i class="icon bell mr-1"></i><span class="hidden sm:inline-block">消息({{ ctx.globalMessageBadge }}) </span></span></a>
|
|
|
- <a href="/settings/profile" class="item" :class="{active:ctx.teaMenu == 'settings'}">
|
|
|
+ <a href="/messages" class="item" :class="{ active: ctx.teaMenu == 'message' }"><span
|
|
|
+ :class="{ 'blink': ctx.globalMessageBadge > 0 }" class="flex items-center gap-0.5"><i
|
|
|
+ class="icon bell mr-1"></i><span class="hidden sm:inline-block">消息({{
|
|
|
+ ctx.globalMessageBadge }}) </span></span></a>
|
|
|
+ <a href="/settings/profile" class="item" :class="{ active: ctx.teaMenu == 'settings' }">
|
|
|
<i class="icon setting mr-1"></i><span class="hidden sm:inline-block">设置</span>
|
|
|
</a>
|
|
|
<a href="/" class="item" v-show="ctx.teaShowIndexPage">
|
|
|
<i class="icon home"></i><span class="hidden sm:inline-block"> 首页</span>
|
|
|
</a>
|
|
|
- <a href="/docs" class="item" :class="{active: ctx.teaMenu == 'docs'}"><i class="icon file mr-1"></i><span class="hidden sm:inline-block">文档</span></a>
|
|
|
+ <a href="/docs" class="item" :class="{ active: ctx.teaMenu == 'docs' }"><i
|
|
|
+ class="icon file mr-1"></i><span class="hidden sm:inline-block">文档</span></a>
|
|
|
<a href="/settings/profile" class="item">
|
|
|
<i class="icon user mr-1" v-if="ctx.teaUserAvatar.length == 0"></i>
|
|
|
- <img class="avatar" alt="" :src="ctx.teaUserAvatar" v-if="ctx.teaUserAvatar.length > 0"/>
|
|
|
+ <img class="avatar" alt="" :src="ctx.teaUserAvatar" v-if="ctx.teaUserAvatar.length > 0" />
|
|
|
<span class="hidden sm:inline-block">{{ ctx.teaCommon.teaUsername }}</span>
|
|
|
</a>
|
|
|
<!-- color scheme -->
|
|
|
@@ -64,7 +78,8 @@ const showMainMenu = () => {
|
|
|
<span class="hidden sm:inline-block" v-if="ctx.currentColorScheme == 'dark'">暗色</span>
|
|
|
<span class="hidden sm:inline-block" v-if="ctx.currentColorScheme == 'light'">亮色</span>
|
|
|
</a>
|
|
|
- <a :href="ctx.$url('logout')" class="item" title="安全退出登录"><i class="icon sign out mr-1"></i><span class="hidden sm:inline-block">退出</span></a>
|
|
|
+ <a :href="ctx.$url('logout')" class="item" title="安全退出登录"><i
|
|
|
+ class="icon sign out mr-1"></i><span class="hidden sm:inline-block">退出</span></a>
|
|
|
</div>
|
|
|
</template>
|
|
|
</TMenubar>
|
|
|
@@ -81,46 +96,68 @@ const showMainMenu = () => {
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧主操作栏 -->
|
|
|
- <div class="main" :class="{'opacity-30': mainMenuVisible}">
|
|
|
+ <div class="main" :class="{ 'opacity-30': mainMenuVisible }">
|
|
|
<!-- 操作菜单 -->
|
|
|
<div class="mb-4 -mt-3">
|
|
|
<TTabView v-if="ctx.teaTabbar.length > 1" code="RANDOM" :value="ctx.tabValue" @change="ctx.changeTab">
|
|
|
<TTabs>
|
|
|
- <TTab v-for="(item, index) in ctx.teaTabbar" :code="item.url" @click="ctx.clickTab($event, item)" :disabled="item.isDisabled && !item.isActive">
|
|
|
+ <TTab v-for="(item, index) in ctx.teaTabbar" :code="item.url"
|
|
|
+ @click="ctx.clickTab($event, item)" :disabled="item.isDisabled && !item.isActive">
|
|
|
<!-- TODO, right, title, icon, subName -->
|
|
|
<!-- right:item.isRight, title: item.isTitle, icon: item.icon != null && item.icon.length > 0-->
|
|
|
|
|
|
<var class="not-italic">
|
|
|
<span>{{ item.name }}</span>
|
|
|
<span v-if="item.subName.length > 0">({{ item.subName }})</span>
|
|
|
- <i class="icon small" :class="item.icon" v-if="index == 0 && item.icon != null && item.icon.length > 0"></i>
|
|
|
+ <i class="icon small" :class="item.icon"
|
|
|
+ v-if="index == 0 && item.icon != null && item.icon.length > 0"></i>
|
|
|
</var>
|
|
|
- <var class="not-italic" v-if="item.isTitle && typeof ctx.node == 'object'">{{ ctx.node.name }}</var>
|
|
|
+ <var class="not-italic" v-if="item.isTitle && typeof ctx.node == 'object'">{{ ctx.node.name
|
|
|
+ }}</var>
|
|
|
</TTab>
|
|
|
</TTabs>
|
|
|
</TTabView>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
<!-- 功能区 -->
|
|
|
<div class="main-box md:mb-0">
|
|
|
<RouterView :key="$route.fullPath"></RouterView>
|
|
|
</div>
|
|
|
|
|
|
<!-- 底部 -->
|
|
|
- <div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4" v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length == 0">
|
|
|
+ <div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
|
|
|
+ v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length == 0">
|
|
|
<a class="item" title="点击进入检查版本更新页面">{{ ctx.teaName }} v{{ ctx.teaVersion }}</a>
|
|
|
</div>
|
|
|
- <div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4" v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length > 0" v-html="ctx.teaPageFooterHTML"></div>
|
|
|
+ <div class="footer md:fixed left-0 right-0 bottom-0 z-50 flex flex-wrap gap-8 leading-10 py-2 bg-black border-t-2 border-gray-200 dark:border-gray-700 pl-4"
|
|
|
+ v-if="ctx.teaShowPageFooter && ctx.teaPageFooterHTML.length > 0" v-html="ctx.teaPageFooterHTML"></div>
|
|
|
</div>
|
|
|
</BasicLayout>
|
|
|
</template>
|
|
|
|
|
|
<style scoped lang="postcss">
|
|
|
-:deep(td a), :deep(.comment a), :deep(form a) {
|
|
|
+.title-icon {
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ mask-image: var(--svg);
|
|
|
+ --svg: url(@/assets/icon/title.svg);
|
|
|
+ background-color: currentColor;
|
|
|
+ display: inline-block;
|
|
|
+ -webkit-mask-size: 100% 100%;
|
|
|
+ mask-size: 100% 100%;
|
|
|
+ -webkit-mask-repeat: no-repeat;
|
|
|
+ mask-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+:deep(td a),
|
|
|
+:deep(.comment a),
|
|
|
+:deep(form a) {
|
|
|
color: var(--p-primary-color);
|
|
|
}
|
|
|
|
|
|
-:deep(td a:hover), :deep(.comment a:hover), :deep(.form a:hover) {
|
|
|
+:deep(td a:hover),
|
|
|
+:deep(.comment a:hover),
|
|
|
+:deep(.form a:hover) {
|
|
|
color: var(--p-primary-700);
|
|
|
}
|
|
|
|
|
|
@@ -212,7 +249,8 @@ const showMainMenu = () => {
|
|
|
@apply bg-gray-100 dark:bg-gray-700 rounded-md;
|
|
|
}
|
|
|
|
|
|
-.hover-span, .hover-span a {
|
|
|
+.hover-span,
|
|
|
+.hover-span a {
|
|
|
@apply flex items-center gap-2;
|
|
|
}
|
|
|
|
|
|
@@ -220,7 +258,8 @@ const showMainMenu = () => {
|
|
|
width: 10em;
|
|
|
}
|
|
|
|
|
|
-p.comment em, div.comment em {
|
|
|
+p.comment em,
|
|
|
+div.comment em {
|
|
|
font-style: italic;
|
|
|
}
|
|
|
|
|
|
@@ -241,7 +280,8 @@ p.comment em, div.comment em {
|
|
|
}
|
|
|
|
|
|
/** footer **/
|
|
|
-.footer a, .footer :deep(a) {
|
|
|
+.footer a,
|
|
|
+.footer :deep(a) {
|
|
|
@apply text-white;
|
|
|
}
|
|
|
|
|
|
@@ -251,8 +291,9 @@ p.comment em, div.comment em {
|
|
|
}
|
|
|
|
|
|
.main-box {
|
|
|
- /* padding: 30px; */
|
|
|
- /* min-height: calc(100vh - 100px); */
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ padding: 30px;
|
|
|
+ min-height: calc(100vh - 100px);
|
|
|
}
|
|
|
|
|
|
:deep(.p-menu-item-link) {
|
|
|
@@ -262,19 +303,25 @@ p.comment em, div.comment em {
|
|
|
color: rgba(49, 49, 49, 1);
|
|
|
padding: 12px 20px;
|
|
|
}
|
|
|
+
|
|
|
:deep(.p-menu-list) {
|
|
|
padding: 10px 10px;
|
|
|
}
|
|
|
+
|
|
|
:deep(.p-menu-item-link.on) {
|
|
|
text-decoration: none;
|
|
|
}
|
|
|
+
|
|
|
:deep(.t-active-item) {
|
|
|
- color: rgba(30, 101, 255, 1)!important;
|
|
|
+ color: rgba(30, 101, 255, 1) !important;
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="postcss">
|
|
|
.dark {
|
|
|
- td a:hover, .comment a:hover, .form a:hover {
|
|
|
+
|
|
|
+ td a:hover,
|
|
|
+ .comment a:hover,
|
|
|
+ .form a:hover {
|
|
|
color: var(--p-primary-200);
|
|
|
}
|
|
|
}
|
