From 7fac7c019d6ba5452cac135ed0dae90350a9c0ae Mon Sep 17 00:00:00 2001 From: xiangcongshuai Date: Wed, 26 Jun 2024 10:19:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9Atag=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/serverConfig.json | 4 +- src/assets/svg/home/close.svg | 5 + src/layout/components/appHeader/index.vue | 25 +- src/layout/components/appMain.vue | 13 +- src/layout/components/tag/index.scss | 295 -------- src/layout/components/tag/index.vue | 712 +++--------------- src/layout/index.vue | 17 +- src/layout/types.ts | 14 +- src/router/index.ts | 3 +- src/router/modules/knowledgeCentre.ts | 23 + src/store/modules/tabs.ts | 53 ++ src/style/index.scss | 29 + .../knowledgeCentre/submission/index.vue | 227 ++++++ 13 files changed, 509 insertions(+), 911 deletions(-) create mode 100644 src/assets/svg/home/close.svg delete mode 100644 src/layout/components/tag/index.scss create mode 100644 src/router/modules/knowledgeCentre.ts create mode 100644 src/store/modules/tabs.ts create mode 100644 src/views/knowledgeCentre/submission/index.vue diff --git a/public/serverConfig.json b/public/serverConfig.json index 3a7b551..ddb4285 100644 --- a/public/serverConfig.json +++ b/public/serverConfig.json @@ -4,7 +4,7 @@ "FixedHeader": true, "HiddenSideBar": false, "MultiTagsCache": false, - "KeepAlive": false, + "KeepAlive": true, "Layout": "vertical", "Theme": "default", "DarkMode": false, @@ -12,7 +12,7 @@ "Weak": false, "HideTabs": true, "SidebarStatus": true, - "EpThemeColor": "#4287ff", + "EpThemeColor": "#0052D9", "ShowLogo": true, "ShowModel": "smart", "MenuArrowIconNoTransition": true, diff --git a/src/assets/svg/home/close.svg b/src/assets/svg/home/close.svg new file mode 100644 index 0000000..94f1655 --- /dev/null +++ b/src/assets/svg/home/close.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/layout/components/appHeader/index.vue b/src/layout/components/appHeader/index.vue index 2c8fe81..d5371f4 100644 --- a/src/layout/components/appHeader/index.vue +++ b/src/layout/components/appHeader/index.vue @@ -8,6 +8,8 @@ import MeunIcon from "./meunIcon.vue"; import { onMounted } from "vue"; import { useRouter } from "vue-router"; import { getParentPaths } from "@/router/utils"; +import { useTabsStore } from "@/store/modules/tabs"; +import { da } from "element-plus/es/locale"; const { route } = useNav(); const router = useRouter(); const defaultActive = computed(() => @@ -109,8 +111,23 @@ watch( deep: true } ); -const changeRouter = val => { - router.push(val); +const tabs = useTabsStore(); +const changeRouter = item => { + router.push(item.path); + if (item.path === "/home") return; + let flag = false; + for (const data of tabs.list) { + if (item.path === data.path) { + flag = true; + } + } + if (!flag) { + tabs.setTabsItem({ + name: item.name, + title: item.meta.title, + path: item.path + }); + } }; @@ -138,7 +155,7 @@ const changeRouter = val => {
-
+
- + - @@ -91,7 +82,7 @@ const transitionMain = defineComponent({ .app-main { position: relative; width: 100%; - height: calc(100vh - 96px); + /* height: calc(100vh - 96px); */ overflow-x: hidden; /* background: #fff; */ diff --git a/src/layout/components/tag/index.scss b/src/layout/components/tag/index.scss deleted file mode 100644 index e8d8795..0000000 --- a/src/layout/components/tag/index.scss +++ /dev/null @@ -1,295 +0,0 @@ -@keyframes schedule-in-width { - from { - width: 0; - } - - to { - width: 100%; - } -} - -@keyframes schedule-out-width { - from { - width: 100%; - } - - to { - width: 0; - } -} - -@keyframes rotate { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} - -@keyframes close { - from { - transform: translate(-50%, -50%); - } - - to { - transform: translate(0, -50%); - } -} - -.tags-view { - position: relative; - display: flex; - align-items: center; - width: 100%; - font-size: 14px; - color: var(--el-text-color-primary); - background: #fff; - box-shadow: 0 0 1px #888; - - .scroll-item { - position: relative; - display: inline-block; - height: 28px; - padding: 0 6px; - margin-right: 4px; - line-height: 28px; - cursor: pointer; - border-radius: 3px 3px 0 0; - box-shadow: 0 0 1px #888; - transition: all 0.4s; - - .el-icon-close { - position: absolute; - top: 50%; - font-size: 10px; - color: var(--el-color-primary); - cursor: pointer; - transition: font-size 0.2s; - transform: translate(-50%, -50%); - - &:hover { - font-size: 13px; - color: #fff; - background: #b4bccc; - border-radius: 50%; - } - } - - &.is-closable:not(:first-child) { - &:hover { - padding-right: 18px; - - &:not(.is-active) { - .el-icon-close { - animation: close 200ms ease-in forwards; - } - } - } - } - } - - a { - padding: 0 4px; - color: var(--el-text-color-primary); - text-decoration: none; - } - - .scroll-container { - position: relative; - flex: 1; - padding: 5px 0; - overflow: hidden; - white-space: nowrap; - - .tab { - position: relative; - float: left; - overflow: visible; - white-space: nowrap; - list-style: none; - transition: transform 0.5s ease-in-out; - - .scroll-item { - transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); - - &:nth-child(1) { - margin-left: 5px; - } - } - } - } - - /* 右键菜单 */ - .contextmenu { - position: absolute; - padding: 5px 0; - margin: 0; - font-size: 13px; - font-weight: normal; - color: var(--el-text-color-primary); - white-space: nowrap; - list-style-type: none; - background: #fff; - border-radius: 4px; - outline: 0; - box-shadow: 0 2px 8px rgb(0 0 0 / 15%); - - li { - display: flex; - align-items: center; - width: 100%; - padding: 7px 12px; - margin: 0; - cursor: pointer; - - &:hover { - color: var(--el-color-primary); - } - - svg { - display: block; - margin-right: 0.5em; - } - } - } -} - -.el-dropdown-menu { - li { - display: flex; - align-items: center; - width: 100%; - margin: 0; - cursor: pointer; - - svg { - display: block; - margin-right: 0.5em; - } - } -} - -.el-dropdown-menu__item:not(.is-disabled):hover { - color: #606266; - background: #f0f0f0; -} - -:deep(.el-dropdown-menu__item) i { - margin-right: 10px; -} - -:deep(.el-dropdown-menu__item--divided) { - margin: 1px 0; -} - -.el-dropdown-menu__item--divided::before { - margin: 0; -} - -.el-dropdown-menu__item.is-disabled { - cursor: not-allowed; -} - -.scroll-item.is-active { - position: relative; - color: #fff; - - &:not(:first-child) { - padding-right: 18px; - } - - .el-icon-close { - transform: translate(0, -50%); - } - - a { - color: var(--el-color-primary) !important; - } -} - -.arrow-left, -.arrow-right, -.arrow-down { - position: relative; - width: 40px; - height: 38px; - color: var(--el-text-color-primary); - - svg { - position: absolute; - left: 50%; - width: 20px; - height: 20px; - transform: translate(-50%, 50%); - } -} - -.arrow-left { - box-shadow: 5px 0 5px -6px #ccc; - - &:hover { - cursor: w-resize; - } -} - -.arrow-right { - border-right: 0.5px solid #ccc; - box-shadow: -5px 0 5px -6px #ccc; - - &:hover { - cursor: e-resize; - } -} - -/* 卡片模式下鼠标移入显示蓝色边框 */ -.card-in { - color: var(--el-color-primary); - - a { - color: var(--el-color-primary); - } -} - -/* 卡片模式下鼠标移出隐藏蓝色边框 */ -.card-out { - color: #666; - border: none; - - a { - color: #666; - } -} - -/* 灵动模式 */ -.schedule-active { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background: var(--el-color-primary); -} - -/* 灵动模式下鼠标移入显示蓝色进度条 */ -.schedule-in { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 2px; - background: var(--el-color-primary); - animation: schedule-in-width 200ms ease-in; -} - -/* 灵动模式下鼠标移出隐藏蓝色进度条 */ -.schedule-out { - position: absolute; - bottom: 0; - left: 0; - width: 0; - height: 2px; - background: var(--el-color-primary); - animation: schedule-out-width 200ms ease-in; -} diff --git a/src/layout/components/tag/index.vue b/src/layout/components/tag/index.vue index 5957f29..ec3a5c5 100644 --- a/src/layout/components/tag/index.vue +++ b/src/layout/components/tag/index.vue @@ -1,611 +1,143 @@ - - - diff --git a/src/layout/index.vue b/src/layout/index.vue index 5a49039..b8215a4 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -11,7 +11,7 @@ import { ref, reactive, computed, onMounted, onBeforeMount } from "vue"; import AppHeader from "./components/appHeader/index.vue"; import appMain from "./components/appMain.vue"; - +import tag from "./components/tag/index.vue"; const appWrapperRef = ref(); const pureSetting = useSettingStoreHook(); const { $storage } = useGlobal(); @@ -56,6 +56,7 @@ onBeforeMount(() => {
+
@@ -94,4 +95,18 @@ onBeforeMount(() => { .re-screen { margin-top: 12px; } +.main-container { + position: relative; + min-width: 1500px; + height: 100vh; + min-height: 100%; + + /* main-content 属性动画 */ + transition: margin-left var(--pure-transition-duration); + + .el-scrollbar__wrap { + height: 100%; + overflow: auto; + } +} diff --git a/src/layout/types.ts b/src/layout/types.ts index 3038129..dd63207 100644 --- a/src/layout/types.ts +++ b/src/layout/types.ts @@ -4,13 +4,13 @@ const { VITE_HIDE_HOME } = import.meta.env; export const routerArrays: Array = VITE_HIDE_HOME === "false" ? [ - { - path: "/welcome", - meta: { - title: "首页", - icon: "homeFilled" - } - } + // { + // path: "/welcome", + // meta: { + // title: "首页", + // icon: "homeFilled" + // } + // } ] : []; diff --git a/src/router/index.ts b/src/router/index.ts index 7fed786..5037a58 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -129,8 +129,9 @@ router.beforeEach((to: ToRouteType, _from, next) => { if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) { next({ path: "/error/403" }); } + // 开启隐藏首页后在浏览器地址栏手动输入首页welcome路由则跳转到404页面 - if (VITE_HIDE_HOME === "true" && to.fullPath === "/welcome") { + if (VITE_HIDE_HOME === "true" && to.fullPath === "/home") { next({ path: "/error/404" }); } if (_from?.name) { diff --git a/src/router/modules/knowledgeCentre.ts b/src/router/modules/knowledgeCentre.ts new file mode 100644 index 0000000..b1dbff1 --- /dev/null +++ b/src/router/modules/knowledgeCentre.ts @@ -0,0 +1,23 @@ +export default { + path: "/knowledgeCentre", + redirect: "/knowledgeCentre/submission", + meta: { + title: "知识中心", + icon: 1, + rank: 5 + }, + children: [ + { + path: "/knowledgeCentre/submission", + name: "submission", + component: () => import("@/views/knowledgeCentre/submission/index.vue"), + meta: { + title: "知识报送", + + showLink: true, + showParent: true, + roles: ["admin", "common"] + } + } + ] +} as RouteConfigsTable; diff --git a/src/store/modules/tabs.ts b/src/store/modules/tabs.ts new file mode 100644 index 0000000..109a8b3 --- /dev/null +++ b/src/store/modules/tabs.ts @@ -0,0 +1,53 @@ +import { defineStore } from "pinia"; + +interface ListItem { + name: string; + path: string; + title: string; +} + +export const useTabsStore = defineStore("tabs", { + state: () => { + return { + list: [] + }; + }, + getters: { + show: state => { + return state.list.length > 0; + }, + nameList: state => { + return state.list.map(item => item.name); + } + }, + actions: { + delTabsItem(index: number) { + this.list.splice(index, 1); + }, + setTabsItem(data: ListItem) { + this.list.push(data); + }, + clearTabs() { + this.list = []; + }, + closeTabsOther(data: ListItem[]) { + this.list = data; + }, + closeCurrentTag(data: any) { + for (let i = 0, len = this.list.length; i < len; i++) { + const item = this.list[i]; + if (item.path === data.$route.fullPath) { + if (i < len - 1) { + data.$router.push(this.list[i + 1].path); + } else if (i > 0) { + data.$router.push(this.list[i - 1].path); + } else { + data.$router.push("/"); + } + this.list.splice(i, 1); + break; + } + } + } + } +}); diff --git a/src/style/index.scss b/src/style/index.scss index b6ffa29..7589c79 100644 --- a/src/style/index.scss +++ b/src/style/index.scss @@ -18,3 +18,32 @@ .html-weakness { filter: invert(80%); } +.app-main-content { + margin: 0 80px; + .seach { + margin-bottom: 16px; + padding: 24px; + background-color: #fff; + border-radius: 6px 6px 6px 6px; + .seach-title { + font-size: 24px; + color: #333333; + + margin-bottom: 24px; + span { + padding-left: 8px; + border-left: 6px solid #0052D9; + } + } + } +} +.el-form-item__label { + font-weight: 400; +font-size: 14px; +color: #666666; +} +.main-table { + background-color: #fff; + padding: 24px; + +} \ No newline at end of file diff --git a/src/views/knowledgeCentre/submission/index.vue b/src/views/knowledgeCentre/submission/index.vue new file mode 100644 index 0000000..7283d49 --- /dev/null +++ b/src/views/knowledgeCentre/submission/index.vue @@ -0,0 +1,227 @@ + + + +