|
|
@@ -1,402 +0,0 @@
|
|
|
-<template>
|
|
|
- <div :class="['left-layout', { collapsed: collapsed }]">
|
|
|
- <a-menu
|
|
|
- :selectedKeys="[checkRouter]"
|
|
|
- :openKeys="openKeys"
|
|
|
- mode="inline"
|
|
|
- @click="({ key }) => changeRouter(key)"
|
|
|
- @openChange="onOpenChange"
|
|
|
- >
|
|
|
- <template v-for="(item, i) in routerList" :key="item.name">
|
|
|
- <a-menu-item v-if="!item.children?.length" :key="item.name">
|
|
|
- <MyIcon :icon="item.icon" size="15" class="top-bg" />{{ item.title }}
|
|
|
- </a-menu-item>
|
|
|
- <a-sub-menu v-else :key="item.name" :title="item.title">
|
|
|
- <template #icon>
|
|
|
- <MyIcon :icon="item.icon" size="15" class="top-bg" />
|
|
|
- </template>
|
|
|
- <a-menu-item v-for="child in item.children" :key="child.name">
|
|
|
- <MyIcon
|
|
|
- :icon="child.icon"
|
|
|
- size="14"
|
|
|
- :color="child.iconColor"
|
|
|
- style="margin-right: 10px"
|
|
|
- />
|
|
|
- {{ child.title }}
|
|
|
- </a-menu-item>
|
|
|
- </a-sub-menu>
|
|
|
- </template>
|
|
|
- </a-menu>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-import { ref, onMounted, watch, inject, h, toRefs } from 'vue';
|
|
|
-import { useRouter } from 'vue-router';
|
|
|
-import MyIcon from '@/components/myIcon/index.vue';
|
|
|
-import { menuConfig } from './menu-sdzrzy.js';
|
|
|
-import { fill } from 'lodash';
|
|
|
-// import { backgroundClip } from 'html2canvas/dist/types/css/property-descriptors/background-clip.js';
|
|
|
-import { useWritingStore } from '@/stores/writingStore.ts';
|
|
|
-const { setMenuName, setMenuKey,menuKey,setInitialContent } = toRefs(useWritingStore());
|
|
|
-
|
|
|
-const routerList = menuConfig;
|
|
|
-const collapsed = ref<boolean>(true);
|
|
|
-const checkRouter = ref(menuConfig[0].children[0].name);
|
|
|
-const router = useRouter();
|
|
|
-const openKeys = ref<string[]>([]);
|
|
|
-
|
|
|
-const changeRouter = (name: string) => {
|
|
|
- // 查找当前选中的菜单子项
|
|
|
- debugger
|
|
|
- let currentMenuItem;
|
|
|
- for (const item of routerList) {
|
|
|
- if (item.name === name) {
|
|
|
- currentMenuItem = item;
|
|
|
- break;
|
|
|
- }
|
|
|
- if (item.children) {
|
|
|
- const child = item.children.find((child) => child.name === name);
|
|
|
- if (child) {
|
|
|
- currentMenuItem = child;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(currentMenuItem);
|
|
|
- setMenuKey.value(currentMenuItem.title);
|
|
|
- checkRouter.value = currentMenuItem.name;
|
|
|
- setMenuName.value(currentMenuItem.name);
|
|
|
- // 使用 query 而不是 params 传递参数
|
|
|
- router.push({
|
|
|
- name: currentMenuItem.path
|
|
|
- });
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- const defineCheck = routerList[0].children[0].name;
|
|
|
- checkRouter.value = defineCheck;
|
|
|
- setMenuName.value(routerList[0].children[0].name);
|
|
|
- console.log('currentMenu', routerList[0].children[0]);
|
|
|
- setMenuKey.value(routerList[0].children[0].title);
|
|
|
- // 初始化时也使用 query
|
|
|
- router.push({
|
|
|
- name: routerList[0].children[0].path
|
|
|
- });
|
|
|
-});
|
|
|
-
|
|
|
-// 处理展开/收起
|
|
|
-const onOpenChange = (keys: string[]) => {
|
|
|
- // 获取最后打开的子菜单
|
|
|
- const latestOpenKey = keys.find((key) => openKeys.value.indexOf(key) === -1);
|
|
|
-
|
|
|
- if (latestOpenKey) {
|
|
|
- // 只保留最后打开的父级菜单
|
|
|
- openKeys.value = [latestOpenKey];
|
|
|
- } else {
|
|
|
- // 如果是收起操作，清空打开的菜单
|
|
|
- openKeys.value = [];
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-// 在路由变化时，自动展开当前路由的父级菜单
|
|
|
-watch(
|
|
|
- () => menuKey.value,
|
|
|
- (newName) => {
|
|
|
- if (newName) {
|
|
|
- console.log("newName",newName);
|
|
|
- setInitialContent.value("");
|
|
|
- // 查找当前路由所属的父级菜单
|
|
|
- const parentMenu = routerList.find((item) =>
|
|
|
- item.children?.some((child) => child.title === newName)
|
|
|
- );
|
|
|
- if (parentMenu) {
|
|
|
- openKeys.value = [parentMenu.name];
|
|
|
- }
|
|
|
- let currentMenuItem;
|
|
|
- for (const item of routerList) {
|
|
|
- if (item.title === newName) {
|
|
|
- currentMenuItem = item;
|
|
|
- break;
|
|
|
- }
|
|
|
- if (item.children) {
|
|
|
- const child = item.children.find((child) => child.title === newName);
|
|
|
- if (child) {
|
|
|
- currentMenuItem = child;
|
|
|
- break;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- checkRouter.value = currentMenuItem.name;
|
|
|
- }
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
-);
|
|
|
-</script>
|
|
|
-<style scoped lang="scss">
|
|
|
-.left-layout {
|
|
|
- width: 260px;
|
|
|
- height: 100%;
|
|
|
- transition: width 0.5s;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- padding: 15px 10px 10px 10px;
|
|
|
- background: #f8fbff;
|
|
|
- box-shadow: 0px 4px 15px 1px rgba(0, 54, 116, 0.15);
|
|
|
- border-radius: 0px 0px 0px 0px;
|
|
|
- margin-right: 15px;
|
|
|
-
|
|
|
- ::v-deep(.ant-menu-inline) {
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep(.ant-menu-sub.ant-menu-inline) {
|
|
|
- background: none !important;
|
|
|
- }
|
|
|
- ::v-deep(.ant-menu-submenu-selected > .ant-menu-submenu-title) {
|
|
|
- color: #3082f4 !important;
|
|
|
- .top-bg {
|
|
|
- fill: #2689fe;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep(.ant-menu-title-content) {
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 13px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep(.ant-menu-light) {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep(.ant-menu-title-content) {
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
- .top-bg {
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep(.ant-menu-item-selected) {
|
|
|
- background: #ebf5ff;
|
|
|
- border-radius: 6px 6px 6px 6px;
|
|
|
- border: 1px solid #9acaff;
|
|
|
- .top-bg {
|
|
|
- fill: #2689fe;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .child-icon {
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- width: 260px;
|
|
|
- padding: 26px 0 20px 25px;
|
|
|
- margin-bottom: 20px;
|
|
|
- }
|
|
|
- .log-img {
|
|
|
- height: 45px;
|
|
|
- }
|
|
|
-
|
|
|
- :deep(.jump-pop-btn) {
|
|
|
- &:hover {
|
|
|
- background: #f0f0f0 !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .jump-btn {
|
|
|
- width: 100%;
|
|
|
- padding: 0 15px;
|
|
|
- margin-bottom: 10px;
|
|
|
- .btn-item {
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- margin-bottom: 10px;
|
|
|
- &:hover .btn-icon {
|
|
|
- fill: #4096ff;
|
|
|
- }
|
|
|
- }
|
|
|
- .btn-icon {
|
|
|
- margin-right: 8px;
|
|
|
- vertical-align: middle;
|
|
|
- margin-bottom: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .toggle-button {
|
|
|
- position: absolute;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- height: 45px;
|
|
|
- cursor: pointer;
|
|
|
- .outlined {
|
|
|
- color: #43a8fd;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .bottom-box {
|
|
|
- position: absolute;
|
|
|
- bottom: 0px;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- .zcdb {
|
|
|
- padding: 10px;
|
|
|
- margin-bottom: 20px;
|
|
|
- background: url('@/assets/images/aiPolicy/zcdb-bg.png') no-repeat center center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-shadow: 0 10px 24px 0 rgba(42, 60, 79, 0.2);
|
|
|
- border-radius: 10px;
|
|
|
- width: 230px;
|
|
|
- height: 110px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- .title {
|
|
|
- background: url('@/assets/images/aiPolicy/AI-zcdb-btn.png') no-repeat center center;
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 99px;
|
|
|
- height: 17px;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- background: #37cb30;
|
|
|
- border-radius: 15px;
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 13px;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .zcjd {
|
|
|
- margin-bottom: 10px;
|
|
|
- .ai-door {
|
|
|
- padding: 10px;
|
|
|
- background: url('@/assets/images/aiPolicy/zcjd-bg.png') no-repeat center center;
|
|
|
- background-size: 100% 100%;
|
|
|
- box-shadow: 0 10px 24px 0 rgba(42, 60, 79, 0.2);
|
|
|
- border-radius: 10px;
|
|
|
- width: 230px;
|
|
|
- height: 110px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- flex-direction: column;
|
|
|
- .title {
|
|
|
- background: url('@/assets/images/aiPolicy/AI-zcjd-btn.png') no-repeat center center;
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 99px;
|
|
|
- height: 17px;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- .btn {
|
|
|
- background: #2689fe;
|
|
|
- border-radius: 15px;
|
|
|
- font-family: Alibaba PuHuiTi 2;
|
|
|
- font-weight: normal;
|
|
|
- font-size: 13px;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btn {
|
|
|
- width: 130px;
|
|
|
- height: 34px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .diver {
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- color: #929cab;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-.compile-panel {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- .upload-f {
|
|
|
- width: 240px;
|
|
|
- height: 135px;
|
|
|
- background: #fafafc;
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-items: center;
|
|
|
- .txt-box {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .txt-nr {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
- .ant-upload-txt {
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- width: 155px;
|
|
|
- color: #121519;
|
|
|
- line-height: 20px;
|
|
|
- .blue {
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 13px;
|
|
|
- color: #3988e5;
|
|
|
- }
|
|
|
- }
|
|
|
- .ant-hint-txt {
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 13px;
|
|
|
- width: 155px;
|
|
|
- font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12px;
|
|
|
- margin-top: -10px;
|
|
|
- margin-bottom: 0px;
|
|
|
- color: #a2a6aa;
|
|
|
- }
|
|
|
- }
|
|
|
- .compile-btn {
|
|
|
- width: 240px;
|
|
|
- margin-top: 15px;
|
|
|
- height: 36px;
|
|
|
- background: linear-gradient(134deg, #1ba3fb 0%, #0775f6 100%);
|
|
|
- border-radius: 4px 4px 4px 4px;
|
|
|
- font-family: PingFang SC, PingFang SC;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- color: #ffffff;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
