|
|
|
|
@ -1,20 +1,29 @@
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
import { useDialog, useMessage } from 'naive-ui'
|
|
|
|
|
import { defineComponent, inject, onMounted, reactive, ref, toRefs, unref, watch } from 'vue'
|
|
|
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
|
|
|
import QuillModal from './QuillModal.vue'
|
|
|
|
|
import RecycleModal from './RecycleModal.vue'
|
|
|
|
|
import SearchModal from './SearchModal.vue'
|
|
|
|
|
import ShortcutModal from './ShortcutModal.vue'
|
|
|
|
|
import UserSettings from './UserSettings.vue'
|
|
|
|
|
import { msgPolling } from '@/api/message/message'
|
|
|
|
|
import { getImgUrl } from '@/utils/urlUtils'
|
|
|
|
|
import { useUser } from '@/store/modules/user'
|
|
|
|
|
import { useTaskStore } from '@/store/modules/task'
|
|
|
|
|
|
|
|
|
|
const taskStore = useTaskStore()
|
|
|
|
|
import { useDialog, useMessage } from "naive-ui";
|
|
|
|
|
import {
|
|
|
|
|
defineComponent,
|
|
|
|
|
inject,
|
|
|
|
|
onMounted,
|
|
|
|
|
reactive,
|
|
|
|
|
ref,
|
|
|
|
|
toRefs,
|
|
|
|
|
unref,
|
|
|
|
|
watch,
|
|
|
|
|
} from "vue";
|
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
|
import QuillModal from "./QuillModal.vue";
|
|
|
|
|
import RecycleModal from "./RecycleModal.vue";
|
|
|
|
|
import SearchModal from "./SearchModal.vue";
|
|
|
|
|
import ShortcutModal from "./ShortcutModal.vue";
|
|
|
|
|
import UserSettings from "./UserSettings.vue";
|
|
|
|
|
import { msgPolling } from "@/api/message/message";
|
|
|
|
|
import { getImgUrl } from "@/utils/urlUtils";
|
|
|
|
|
import { useUser } from "@/store/modules/user";
|
|
|
|
|
import { useTaskStore } from "@/store/modules/task";
|
|
|
|
|
|
|
|
|
|
const taskStore = useTaskStore();
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'PageHeader',
|
|
|
|
|
name: "PageHeader",
|
|
|
|
|
components: {
|
|
|
|
|
UserSettings,
|
|
|
|
|
QuillModal,
|
|
|
|
|
@ -30,139 +39,137 @@ export default defineComponent({
|
|
|
|
|
type: Boolean,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
emits: ['update:collapsed'],
|
|
|
|
|
emits: ["update:collapsed"],
|
|
|
|
|
setup() {
|
|
|
|
|
const message = useMessage()
|
|
|
|
|
const dialog = useDialog()
|
|
|
|
|
const message = useMessage();
|
|
|
|
|
const dialog = useDialog();
|
|
|
|
|
|
|
|
|
|
const userStore = useUser()
|
|
|
|
|
const useInfo = userStore.getUserInfo
|
|
|
|
|
const userStore = useUser();
|
|
|
|
|
const useInfo = userStore.getUserInfo;
|
|
|
|
|
|
|
|
|
|
const name = ''
|
|
|
|
|
const name = "";
|
|
|
|
|
|
|
|
|
|
const state = reactive({
|
|
|
|
|
username: name ?? '',
|
|
|
|
|
fullscreenIcon: 'FullscreenOutlined',
|
|
|
|
|
})
|
|
|
|
|
username: name ?? "",
|
|
|
|
|
fullscreenIcon: "FullscreenOutlined",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
const routename = ref(route.meta.title)
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
const route = useRoute();
|
|
|
|
|
const routename = ref(route.meta.title);
|
|
|
|
|
// 图标列表mm
|
|
|
|
|
const iconList = ref([
|
|
|
|
|
{
|
|
|
|
|
icon: 'magnifying-1',
|
|
|
|
|
icon: "magnifying-1",
|
|
|
|
|
handle: searchHandler,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: 'shortcut-keys',
|
|
|
|
|
icon: "shortcut-keys",
|
|
|
|
|
handle: shortcutHandler,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: 'suspicious-folder',
|
|
|
|
|
icon: "suspicious-folder",
|
|
|
|
|
handle: recycleHandler,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: 'memo',
|
|
|
|
|
icon: "memo",
|
|
|
|
|
handle: quillHandler,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
icon: 'nomessage',
|
|
|
|
|
icon: "nomessage",
|
|
|
|
|
handle: goMessage,
|
|
|
|
|
},
|
|
|
|
|
])
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
watch(
|
|
|
|
|
() => route.fullPath,
|
|
|
|
|
() => {
|
|
|
|
|
routename.value = route.meta.title
|
|
|
|
|
},
|
|
|
|
|
)
|
|
|
|
|
routename.value = route.meta.title;
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
const handleDragOver = (event, item) => {
|
|
|
|
|
taskStore.setInFile(true)
|
|
|
|
|
}
|
|
|
|
|
taskStore.setInFile(true);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleDragLeave = (event, item) => {
|
|
|
|
|
taskStore.setInFile(false)
|
|
|
|
|
}
|
|
|
|
|
taskStore.setInFile(false);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const dropdownSelect = (key) => {
|
|
|
|
|
router.push({ name: key })
|
|
|
|
|
}
|
|
|
|
|
router.push({ name: key });
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 退出登录
|
|
|
|
|
const doLogout = () => {
|
|
|
|
|
dialog.info({
|
|
|
|
|
title: '提示',
|
|
|
|
|
content: '您确定要退出登录吗',
|
|
|
|
|
positiveText: '确定',
|
|
|
|
|
negativeText: '取消',
|
|
|
|
|
title: "提示",
|
|
|
|
|
content: "您确定要退出登录吗",
|
|
|
|
|
positiveText: "确定",
|
|
|
|
|
negativeText: "取消",
|
|
|
|
|
onPositiveClick: () => {
|
|
|
|
|
userStore.logout().then(() => {
|
|
|
|
|
message.success('成功退出登录')
|
|
|
|
|
message.success("成功退出登录");
|
|
|
|
|
router
|
|
|
|
|
.replace({
|
|
|
|
|
name: 'Login',
|
|
|
|
|
name: "Login",
|
|
|
|
|
query: {
|
|
|
|
|
// redirect: route.fullPath,
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
.finally(() => location.reload())
|
|
|
|
|
})
|
|
|
|
|
.finally(() => location.reload());
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
onNegativeClick: () => {},
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const quillModalRef = ref(null)
|
|
|
|
|
const shortcutModal = ref(null)
|
|
|
|
|
const recycleModalRef = ref(null)
|
|
|
|
|
const SearchModalRef = ref(null)
|
|
|
|
|
const quillModalRef = ref(null);
|
|
|
|
|
const shortcutModal = ref(null);
|
|
|
|
|
const recycleModalRef = ref(null);
|
|
|
|
|
const SearchModalRef = ref(null);
|
|
|
|
|
|
|
|
|
|
function quillHandler() {
|
|
|
|
|
const modal = unref(quillModalRef)! as any
|
|
|
|
|
modal.showModal()
|
|
|
|
|
const modal = unref(quillModalRef)! as any;
|
|
|
|
|
modal.showModal();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function shortcutHandler() {
|
|
|
|
|
const modal = unref(shortcutModal)! as any
|
|
|
|
|
modal.showModal()
|
|
|
|
|
const modal = unref(shortcutModal)! as any;
|
|
|
|
|
modal.showModal();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function recycleHandler() {
|
|
|
|
|
const modal = unref(recycleModalRef)! as any
|
|
|
|
|
modal.showModal()
|
|
|
|
|
const modal = unref(recycleModalRef)! as any;
|
|
|
|
|
modal.showModal();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function searchHandler() {
|
|
|
|
|
const modal = unref(SearchModalRef)! as any
|
|
|
|
|
modal.showModal()
|
|
|
|
|
const modal = unref(SearchModalRef)! as any;
|
|
|
|
|
modal.showModal();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function goMessage() {
|
|
|
|
|
router.push({ name: 'message-main' })
|
|
|
|
|
router.push({ name: "message-main" });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function getMessage() {
|
|
|
|
|
const res = await msgPolling()
|
|
|
|
|
if (res.data)
|
|
|
|
|
iconList.value[4].icon = 'hasmessage'
|
|
|
|
|
else
|
|
|
|
|
iconList.value[4].icon = 'nomessage'
|
|
|
|
|
const res = await msgPolling();
|
|
|
|
|
if (res.data) iconList.value[4].icon = "hasmessage";
|
|
|
|
|
else iconList.value[4].icon = "nomessage";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
getMessage()
|
|
|
|
|
}, 5000)
|
|
|
|
|
getMessage();
|
|
|
|
|
}, 5000);
|
|
|
|
|
|
|
|
|
|
const mousetrap = inject('mousetrap') as any
|
|
|
|
|
const mousetrap = inject("mousetrap") as any;
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
mousetrap.bind('n r', quillHandler)
|
|
|
|
|
mousetrap.bind('n t', quillHandler)
|
|
|
|
|
mousetrap.bind('n n', recycleHandler)
|
|
|
|
|
mousetrap.bind('m m', searchHandler)
|
|
|
|
|
})
|
|
|
|
|
getMessage();
|
|
|
|
|
mousetrap.bind("n r", quillHandler);
|
|
|
|
|
mousetrap.bind("n t", quillHandler);
|
|
|
|
|
mousetrap.bind("n n", recycleHandler);
|
|
|
|
|
mousetrap.bind("m m", searchHandler);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
...toRefs(state),
|
|
|
|
|
@ -183,9 +190,9 @@ export default defineComponent({
|
|
|
|
|
getMessage,
|
|
|
|
|
handleDragOver,
|
|
|
|
|
handleDragLeave,
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
@ -207,8 +214,16 @@ export default defineComponent({
|
|
|
|
|
v-for="item in iconList"
|
|
|
|
|
:key="item.icon"
|
|
|
|
|
class="layout-header-trigger layout-header-trigger-min"
|
|
|
|
|
@dragover.prevent="(e) => { handleDragOver(e, item) }"
|
|
|
|
|
@dragleave.prevent="(e) => { handleDragLeave(e, item) }"
|
|
|
|
|
@dragover.prevent="
|
|
|
|
|
(e) => {
|
|
|
|
|
handleDragOver(e, item);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
@dragleave.prevent="
|
|
|
|
|
(e) => {
|
|
|
|
|
handleDragLeave(e, item);
|
|
|
|
|
}
|
|
|
|
|
"
|
|
|
|
|
>
|
|
|
|
|
<div class="back" @click="item.handle">
|
|
|
|
|
<SvgIcon :name="item.icon" size="18" />
|
|
|
|
|
@ -326,9 +341,7 @@ export default defineComponent({
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.layout-header-left {
|
|
|
|
|
::v-deep(
|
|
|
|
|
.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link
|
|
|
|
|
) {
|
|
|
|
|
::v-deep(.n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link) {
|
|
|
|
|
color: #515a6e;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
