|
|
@@ -87,6 +87,65 @@
|
|
|
|
|
|
<section class="mt-3 grid gap-4 xl:grid-cols-[1.74fr_0.74fr] grid-cols-1">
|
|
|
<div class="space-y-4">
|
|
|
+ <div class="top-nav-bar">
|
|
|
+ <!-- 左侧标题 -->
|
|
|
+ <!-- <div class="nav-title">统一入口，快速直达</div> -->
|
|
|
+
|
|
|
+ <!-- 中间搜索框 -->
|
|
|
+ <div class="search-container">
|
|
|
+ <Icon icon="mdi:magnify" class="search-icon" />
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ placeholder="搜索应用、流程、数据..."
|
|
|
+ class="search-input"
|
|
|
+ @keyup.enter="handleSearch"
|
|
|
+ />
|
|
|
+ <span class="shortcut-key">⌘K</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧快捷入口 -->
|
|
|
+ <div class="quick-access">
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="quick-btn"
|
|
|
+ @click="router.push('/todo-list?type=oa')"
|
|
|
+ >
|
|
|
+ <img src="../assets//images//td.png" class="w-5 h-5" alt="" />
|
|
|
+ <span class="btn-label text-[#a1a1aa]!">我的待办</span>
|
|
|
+ <span class="text-[#6b2973]! font-bold">{{ todo }}</span>
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="quick-btn"
|
|
|
+ @click="router.push('/oa-done-list?type=oa')"
|
|
|
+ >
|
|
|
+ <Icon icon="mdi:check" class="btn-icon" />
|
|
|
+ <span class="btn-label text-[#a1a1aa]!">我的已办</span>
|
|
|
+ <span class="p-2 inline-block text-[#2da04d]!">{{ done }}</span>
|
|
|
+ </button>
|
|
|
+ <!-- <button
|
|
|
+ type="button"
|
|
|
+ class="quick-btn"
|
|
|
+ @click="router.push('/copied-to-me')"
|
|
|
+ >
|
|
|
+ <Icon
|
|
|
+ icon="mdi:arrow-right-bold-circle-outline"
|
|
|
+ class="btn-icon"
|
|
|
+ />
|
|
|
+ <span class="btn-label">抄送我的</span>
|
|
|
+ <span class="badge">8</span>
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ type="button"
|
|
|
+ class="quick-btn"
|
|
|
+ @click="router.push('/favorites')"
|
|
|
+ >
|
|
|
+ <Icon icon="mdi:star-outline" class="btn-icon" />
|
|
|
+ <span class="btn-label">我的收藏</span>
|
|
|
+ <span class="badge">5</span>
|
|
|
+ </button> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<article
|
|
|
v-for="section in portalSections"
|
|
|
:key="section.code"
|
|
|
@@ -268,6 +327,38 @@
|
|
|
>
|
|
|
</div>
|
|
|
</article>
|
|
|
+
|
|
|
+ <div class="quick-todo-bar">
|
|
|
+ <div
|
|
|
+ @click="router.push('/todo-list?type=oa')"
|
|
|
+ class="flex flex-col items-start justify-center gap-2 cursor-pointer"
|
|
|
+ >
|
|
|
+ <div class="number">{{ todo }}</div>
|
|
|
+ <div class="flex gap-2 items-center">
|
|
|
+ <div class="!text-[10px] text-white/60">我的待办</div>
|
|
|
+ <Icon
|
|
|
+ icon="mdi:clipboard-text-outline"
|
|
|
+ color="#7f2c33"
|
|
|
+ class="icon"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="flex flex-col items-center justify-center gap-2 cursor-pointer"
|
|
|
+ @click="router.push('/oa-done-list?type=oa')"
|
|
|
+ >
|
|
|
+ <div class="number text-white!">{{ done }}</div>
|
|
|
+ <div class="flex gap-2 items-center pl-2">
|
|
|
+ <div class="!text-[10px] text-white/60">已完成</div>
|
|
|
+ <Icon
|
|
|
+ icon="mdi:check-circle-outline"
|
|
|
+ color="#2d8767"
|
|
|
+ class="icon"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
@@ -576,6 +667,8 @@ const currentNoticeList = computed(
|
|
|
() => noticeListMap.value[activeNoticeTab.value] ?? [],
|
|
|
);
|
|
|
|
|
|
+let todo = ref(0);
|
|
|
+let done = ref(0);
|
|
|
const loadHomeData = async () => {
|
|
|
await loadNoticeList(activeNoticeTab.value);
|
|
|
|
|
|
@@ -594,6 +687,8 @@ const loadHomeData = async () => {
|
|
|
]);
|
|
|
|
|
|
oaTasks.value = oaRes.todoList.slice(0, 3);
|
|
|
+ todo.value = oaRes.todoCount;
|
|
|
+ done.value = oaRes.doneCount;
|
|
|
newsList.value = newsRes.list.slice(0, 3);
|
|
|
};
|
|
|
|
|
|
@@ -1598,4 +1693,170 @@ onUnmounted(() => {
|
|
|
:deep(.portal-home .el-dialog) {
|
|
|
border-radius: 16px;
|
|
|
}
|
|
|
+
|
|
|
+.top-nav-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 5px 24px;
|
|
|
+ background: rgba(10, 19, 43, 0.8);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ -webkit-backdrop-filter: blur(10px);
|
|
|
+ border-bottom: 1px solid rgba(109, 137, 213, 0.16);
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-title {
|
|
|
+ color: #eaf1ff;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.08em;
|
|
|
+}
|
|
|
+
|
|
|
+.search-container {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ position: relative;
|
|
|
+ width: 320px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: rgba(255, 255, 255, 0.08);
|
|
|
+ border: 1px solid rgba(109, 137, 213, 0.2);
|
|
|
+ overflow: hidden;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.search-container:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.12);
|
|
|
+ border-color: rgba(109, 137, 213, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+.search-icon {
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #b8b9be;
|
|
|
+ margin-left: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.search-input {
|
|
|
+ flex: 1;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ outline: none;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #eaf1ff;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.shortcut-key {
|
|
|
+ position: absolute;
|
|
|
+ right: 12px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ font-size: 12px;
|
|
|
+ color: rgba(255, 255, 255, 0.6);
|
|
|
+ font-family: "Courier New", monospace;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-access {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ padding: 8px 12px;
|
|
|
+ /* border: 1px solid rgba(109, 137, 213, 0.16); */
|
|
|
+ border-radius: 12px;
|
|
|
+ /* background: rgba(17, 25, 48, 0.8); */
|
|
|
+ color: #dfe8ff;
|
|
|
+ font-size: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition:
|
|
|
+ background 0.2s ease,
|
|
|
+ border-color 0.2s ease,
|
|
|
+ transform 0.2s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-btn:hover {
|
|
|
+ background: rgba(28, 40, 72, 0.8);
|
|
|
+ border-color: rgba(109, 137, 213, 0.4);
|
|
|
+ transform: translateY(-1px);
|
|
|
+}
|
|
|
+
|
|
|
+.btn-icon {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #79b0ff;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-label {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.badge {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background: #f56c6c;
|
|
|
+ color: white;
|
|
|
+ font-size: 10px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.quick-todo-bar {
|
|
|
+ display: flex;
|
|
|
+ gap: 16px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: #070e20;
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.05);
|
|
|
+ -webkit-backdrop-filter: blur(10px);
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
|
|
|
+ /* margin-bottom: 16px; */
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ flex: 1;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 8px;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.todo-item:hover {
|
|
|
+ background: rgba(28, 40, 72, 0.8);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ border-color: rgba(109, 137, 213, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.number {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #f56c6c; /* 红色 */
|
|
|
+ min-width: 24px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #dfe8ff;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.icon {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #79b0ff; /* 蓝色 */
|
|
|
+}
|
|
|
</style>
|
