chore: 同步完整版
This commit is contained in:
xiaoxian521
parent
43069ac127
commit
24db509381
@ -18,6 +18,10 @@ buttons:
|
||||
hscloseRightTabs: Close RightTabs
|
||||
hscloseOtherTabs: Close OtherTabs
|
||||
hscloseAllTabs: Close AllTabs
|
||||
hswholeFullScreen: Whole FullScreen
|
||||
hswholeExitFullScreen: Whole ExitFullScreen
|
||||
hscontentFullScreen: Content FullScreen
|
||||
hscontentExitFullScreen: Content ExitFullScreen
|
||||
menus:
|
||||
hshome: Home
|
||||
hslogin: Login
|
||||
|
||||
@ -18,6 +18,10 @@ buttons:
|
||||
hscloseRightTabs: 关闭右侧标签页
|
||||
hscloseOtherTabs: 关闭其他标签页
|
||||
hscloseAllTabs: 关闭全部标签页
|
||||
hswholeFullScreen: 整体页面全屏
|
||||
hswholeExitFullScreen: 整体页面退出全屏
|
||||
hscontentFullScreen: 内容区全屏
|
||||
hscontentExitFullScreen: 内容区退出全屏
|
||||
menus:
|
||||
hshome: 首页
|
||||
hslogin: 登录
|
||||
|
||||
29
package.json
29
package.json
@ -32,8 +32,8 @@
|
||||
"@pureadmin/components": "^1.1.0",
|
||||
"@pureadmin/descriptions": "^1.1.0",
|
||||
"@pureadmin/table": "^1.2.0",
|
||||
"@pureadmin/utils": "^0.1.1",
|
||||
"@vueuse/core": "^9.1.1",
|
||||
"@pureadmin/utils": "^1.1.2",
|
||||
"@vueuse/core": "^9.3.0",
|
||||
"@vueuse/motion": "^2.0.0-beta.12",
|
||||
"@vueuse/shared": "^9.1.1",
|
||||
"animate.css": "^4.1.1",
|
||||
@ -54,7 +54,7 @@
|
||||
"qs": "^6.11.0",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"responsive-storage": "^2.1.0",
|
||||
"vue": "^3.2.39",
|
||||
"vue": "^3.2.40",
|
||||
"vue-i18n": "^9.2.2",
|
||||
"vue-router": "^4.1.5",
|
||||
"vue-types": "^4.2.1",
|
||||
@ -67,7 +67,7 @@
|
||||
"@iconify-icons/ep": "^1.2.7",
|
||||
"@iconify-icons/ri": "^1.2.3",
|
||||
"@iconify/vue": "^3.2.1",
|
||||
"@intlify/vite-plugin-vue-i18n": "^6.0.1",
|
||||
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
|
||||
"@pureadmin/theme": "^2.4.0",
|
||||
"@types/element-resize-detector": "1.1.3",
|
||||
"@types/js-cookie": "^3.0.1",
|
||||
@ -76,17 +76,16 @@
|
||||
"@types/mockjs": "1.0.3",
|
||||
"@types/node": "14.14.14",
|
||||
"@types/nprogress": "0.2.0",
|
||||
"@types/qrcode": "^1.5.0",
|
||||
"@types/qs": "^6.9.7",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.2",
|
||||
"@typescript-eslint/parser": "^5.10.2",
|
||||
"@vitejs/plugin-legacy": "^2.1.0",
|
||||
"@vitejs/plugin-vue": "^3.1.0",
|
||||
"@vitejs/plugin-legacy": "^2.2.0",
|
||||
"@vitejs/plugin-vue": "^3.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "^2.0.1",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
"@vue/eslint-config-typescript": "^10.0.0",
|
||||
"@vue/runtime-core": "^3.2.39",
|
||||
"autoprefixer": "^10.4.8",
|
||||
"@vue/runtime-core": "^3.2.40",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"cloc": "^2.10.0",
|
||||
"cssnano": "^5.1.13",
|
||||
"eslint": "^8.8.0",
|
||||
@ -96,14 +95,14 @@
|
||||
"husky": "^7.0.4",
|
||||
"lint-staged": "11.1.2",
|
||||
"picocolors": "^1.0.0",
|
||||
"postcss": "^8.4.16",
|
||||
"postcss": "^8.4.17",
|
||||
"postcss-html": "^1.5.0",
|
||||
"postcss-import": "^15.0.0",
|
||||
"postcss-scss": "^4.0.4",
|
||||
"postcss-scss": "^4.0.5",
|
||||
"prettier": "^2.5.1",
|
||||
"pretty-quick": "3.1.1",
|
||||
"rimraf": "3.0.2",
|
||||
"rollup-plugin-visualizer": "^5.8.1",
|
||||
"rollup-plugin-visualizer": "^5.8.2",
|
||||
"sass": "^1.53.0",
|
||||
"sass-loader": "^13.0.2",
|
||||
"stylelint": "^14.3.0",
|
||||
@ -116,12 +115,12 @@
|
||||
"terser": "^5.15.0",
|
||||
"typescript": "^4.7.4",
|
||||
"unplugin-vue-define-options": "0.7.3",
|
||||
"vite": "^3.1.0",
|
||||
"vite": "^3.1.8",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-remove-console": "^1.1.0",
|
||||
"vite-svg-loader": "^3.4.0",
|
||||
"vite-svg-loader": "^3.6.0",
|
||||
"vue-eslint-parser": "^8.2.0",
|
||||
"vue-tsc": "^0.40.7"
|
||||
"vue-tsc": "^0.40.13"
|
||||
},
|
||||
"pnpm": {
|
||||
"peerDependencyRules": {
|
||||
|
||||
1700
pnpm-lock.yaml
generated
1700
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M19.41 18l8.29-8.29a1 1 0 0 0-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 0 0-1.42 1.42l8.3 8.29l-8.3 8.29A1 1 0 1 0 9.7 27.7l8.3-8.29l8.29 8.29a1 1 0 0 0 1.41-1.41z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 395 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M26 17H10a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 279 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" ></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>
|
||||
|
Before Width: | Height: | Size: 647 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 284 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="translate(24 0) scale(-1 1)"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 693 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M400 148l-21.12-24.57A191.43 191.43 0 0 0 240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 0 0 181.07-128" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"></path><path d="M464 68.45V220a4 4 0 0 1-4 4H308.45a4 4 0 0 1-2.83-6.83L457.17 65.62a4 4 0 0 1 6.83 2.83z" fill="currentColor"></path></svg>
|
||||
|
Before Width: | Height: | Size: 561 B |
@ -4,19 +4,17 @@ import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
|
||||
// element-plus icon
|
||||
import Check from "@iconify-icons/ep/check";
|
||||
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||
import Setting from "@iconify-icons/ep/setting";
|
||||
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||
import RefreshRight from "@iconify-icons/ep/refresh-right";
|
||||
import ArrowDown from "@iconify-icons/ep/arrow-down";
|
||||
import Close from "@iconify-icons/ep/close";
|
||||
import CloseBold from "@iconify-icons/ep/close-bold";
|
||||
import Bell from "@iconify-icons/ep/bell";
|
||||
import Search from "@iconify-icons/ep/search";
|
||||
addIcon("check", Check);
|
||||
addIcon("home-filled", HomeFilled);
|
||||
addIcon("setting", Setting);
|
||||
addIcon("lollipop", Lollipop);
|
||||
addIcon("refresh-right", RefreshRight);
|
||||
addIcon("arrow-down", ArrowDown);
|
||||
addIcon("close", Close);
|
||||
addIcon("close-bold", CloseBold);
|
||||
addIcon("bell", Bell);
|
||||
addIcon("search", Search);
|
||||
@ -33,6 +31,14 @@ import User from "@iconify-icons/ri/user-3-fill";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
|
||||
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
|
||||
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
|
||||
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
|
||||
import CloseAllTags from "@iconify-icons/ri/subtract-line";
|
||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||
addIcon("arrow-right-s-line", ArrowRightSLine);
|
||||
addIcon("arrow-left-s-line", ArrowLeftSLine);
|
||||
addIcon("logout-circle-r-line", LogoutCircleRLine);
|
||||
@ -44,6 +50,14 @@ addIcon("user", User);
|
||||
addIcon("lock", Lock);
|
||||
addIcon("menu-unfold", MenuUnfold);
|
||||
addIcon("menu-fold", MenuFold);
|
||||
addIcon("setting", Setting);
|
||||
addIcon("arrow-down", ArrowDown);
|
||||
addIcon("close-left-tags", CloseLeftTags);
|
||||
addIcon("close-right-tags", CloseRightTags);
|
||||
addIcon("close-other-tags", CloseOtherTags);
|
||||
addIcon("close-all-tags", CloseAllTags);
|
||||
addIcon("fullscreen", Fullscreen);
|
||||
addIcon("exit-fullscreen", ExitFullscreen);
|
||||
|
||||
// Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
|
||||
export default defineComponent({
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { Directive, type DirectiveBinding, type VNode } from "vue";
|
||||
import elementResizeDetectorMaker from "element-resize-detector";
|
||||
import type { Erd } from "element-resize-detector";
|
||||
import { optimizeFps } from "@pureadmin/utils";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
|
||||
const erd: Erd = elementResizeDetectorMaker({
|
||||
@ -14,9 +13,7 @@ export const resize: Directive = {
|
||||
const width = elem.offsetWidth;
|
||||
const height = elem.offsetHeight;
|
||||
if (binding?.instance) {
|
||||
optimizeFps(() => {
|
||||
emitter.emit("resize", { detail: { width, height } });
|
||||
})();
|
||||
emitter.emit("resize", { detail: { width, height } });
|
||||
} else {
|
||||
vnode.el.dispatchEvent(
|
||||
new CustomEvent("resize", { detail: { width, height } })
|
||||
|
||||
@ -5,9 +5,7 @@ import mixNav from "./sidebar/mixNav.vue";
|
||||
import avatars from "/@/assets/avatars.jpg";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import topCollapse from "./sidebar/topCollapse.vue";
|
||||
import screenfull from "../components/screenfull/index.vue";
|
||||
import { useTranslationLang } from "../hooks/useTranslationLang";
|
||||
import globalization from "/@/assets/svg/globalization.svg?component";
|
||||
|
||||
@ -50,8 +48,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
<Search />
|
||||
<!-- 通知 -->
|
||||
<Notice id="header-notice" />
|
||||
<!-- 全屏 -->
|
||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<globalization
|
||||
@ -103,7 +99,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="el-icon-setting navbar-bg-hover"
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
@ -153,15 +149,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-setting {
|
||||
height: 48px;
|
||||
width: 38px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-container {
|
||||
|
||||
@ -22,9 +22,13 @@ emitter.on("openPanel", () => {
|
||||
<div class="right-panel-items">
|
||||
<div class="project-configuration">
|
||||
<h3 class="dark:text-white">项目配置</h3>
|
||||
<el-icon title="关闭配置" class="el-icon-close" @click="show = !show">
|
||||
<IconifyIconOffline icon="close" />
|
||||
</el-icon>
|
||||
<span title="关闭配置">
|
||||
<IconifyIconOffline
|
||||
class="dark:text-white"
|
||||
icon="close"
|
||||
@click="show = !show"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
|
||||
@ -121,7 +125,7 @@ emitter.on("openPanel", () => {
|
||||
top: 15px;
|
||||
margin-left: 10px;
|
||||
|
||||
i {
|
||||
svg {
|
||||
font-size: 20px;
|
||||
margin-right: 20px;
|
||||
|
||||
|
||||
@ -132,6 +132,8 @@ const multiTagsCacheChange = () => {
|
||||
/** 清空缓存并返回登录页 */
|
||||
function onReset() {
|
||||
router.push("/login");
|
||||
storageLocal.clear();
|
||||
storageSession.clear();
|
||||
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
|
||||
useAppStoreHook().setLayout(Layout);
|
||||
setEpThemeColor(EpThemeColor);
|
||||
@ -139,8 +141,6 @@ function onReset() {
|
||||
toggleClass(Grey, "html-grey", document.querySelector("html"));
|
||||
toggleClass(Weak, "html-weakness", document.querySelector("html"));
|
||||
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
|
||||
storageLocal.clear();
|
||||
storageSession.clear();
|
||||
resetRouter();
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from "vue";
|
||||
import Search from "../search/index.vue";
|
||||
import Notice from "../notice/index.vue";
|
||||
import { ref, watch, nextTick } from "vue";
|
||||
import SidebarItem from "./sidebarItem.vue";
|
||||
import avatars from "/@/assets/avatars.jpg";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import screenfull from "../screenfull/index.vue";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import { useTranslationLang } from "../../hooks/useTranslationLang";
|
||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||
import globalization from "/@/assets/svg/globalization.svg?component";
|
||||
@ -28,6 +26,10 @@ const {
|
||||
getDropdownItemClass
|
||||
} = useNav();
|
||||
|
||||
nextTick(() => {
|
||||
menuRef.value?.handleResize();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
@ -62,8 +64,6 @@ watch(
|
||||
<Search />
|
||||
<!-- 通知 -->
|
||||
<Notice id="header-notice" />
|
||||
<!-- 全屏 -->
|
||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<globalization
|
||||
@ -113,7 +113,7 @@ watch(
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="el-icon-setting navbar-bg-hover"
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
|
||||
@ -4,9 +4,7 @@ import Notice from "../notice/index.vue";
|
||||
import avatars from "/@/assets/avatars.jpg";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import { transformI18n } from "/@/plugins/i18n";
|
||||
import screenfull from "../screenfull/index.vue";
|
||||
import { deviceDetection } from "@pureadmin/utils";
|
||||
import { ref, toRaw, watch, onMounted } from "vue";
|
||||
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import { getParentPaths, findRouteByPath } from "/@/router/utils";
|
||||
import { useTranslationLang } from "../../hooks/useTranslationLang";
|
||||
@ -45,6 +43,10 @@ onMounted(() => {
|
||||
getDefaultActive(route.path);
|
||||
});
|
||||
|
||||
nextTick(() => {
|
||||
menuRef.value?.handleResize();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
@ -94,8 +96,6 @@ watch(
|
||||
<Search />
|
||||
<!-- 通知 -->
|
||||
<Notice id="header-notice" />
|
||||
<!-- 全屏 -->
|
||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||
<!-- 国际化 -->
|
||||
<el-dropdown id="header-translation" trigger="click">
|
||||
<globalization
|
||||
@ -145,7 +145,7 @@ watch(
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<span
|
||||
class="el-icon-setting navbar-bg-hover"
|
||||
class="set-icon navbar-bg-hover"
|
||||
:title="t('buttons.hssystemSet')"
|
||||
@click="onPanel"
|
||||
>
|
||||
|
||||
@ -121,21 +121,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.right-button {
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
border-right: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
/* 右键菜单 */
|
||||
.contextmenu {
|
||||
margin: 0;
|
||||
@ -196,6 +181,9 @@
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-dropdown-menu__item--divided) {
|
||||
margin: 1px 0;
|
||||
}
|
||||
.el-dropdown-menu__item--divided::before {
|
||||
margin: 0;
|
||||
}
|
||||
@ -223,7 +211,8 @@
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right {
|
||||
.arrow-right,
|
||||
.arrow-down {
|
||||
width: 40px;
|
||||
height: 38px;
|
||||
color: var(--el-text-color-primary);
|
||||
@ -248,7 +237,7 @@
|
||||
|
||||
.arrow-right {
|
||||
box-shadow: -5px 0 5px -6px #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
border-right: 0.5px solid #ccc;
|
||||
|
||||
&:hover {
|
||||
cursor: e-resize;
|
||||
@ -305,8 +294,3 @@
|
||||
background: var(--el-color-primary);
|
||||
animation: scheduleOutWidth 400ms ease-in;
|
||||
}
|
||||
|
||||
/* 刷新按钮动画效果 */
|
||||
.refresh-button {
|
||||
animation: rotate 600ms linear infinite;
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import { $t } from "/@/plugins/i18n";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import { RouteConfigs } from "../../types";
|
||||
import { useTags } from "../../hooks/useTag";
|
||||
import { routerArrays } from "/@/layout/types";
|
||||
import { isEqual, isEmpty } from "lodash-unified";
|
||||
import { toggleClass, removeClass } from "@pureadmin/utils";
|
||||
import { useResizeObserver, useDebounceFn } from "@vueuse/core";
|
||||
import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||
import { ref, watch, unref, nextTick, onBeforeMount } from "vue";
|
||||
import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
|
||||
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
||||
import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
|
||||
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
|
||||
|
||||
const {
|
||||
route,
|
||||
@ -23,6 +23,7 @@ const {
|
||||
buttonLeft,
|
||||
showModel,
|
||||
translateX,
|
||||
pureSetting,
|
||||
activeIndex,
|
||||
getTabStyle,
|
||||
iconIsActive,
|
||||
@ -34,12 +35,15 @@ const {
|
||||
onMounted,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
transformI18n
|
||||
transformI18n,
|
||||
onContentFullScreen
|
||||
} = useTags();
|
||||
|
||||
const tabDom = ref();
|
||||
const containerDom = ref();
|
||||
const scrollbarDom = ref();
|
||||
let isShowArrow = ref(false);
|
||||
const { isFullscreen, toggle } = useFullscreen();
|
||||
|
||||
const dynamicTagView = () => {
|
||||
const index = multiTags.value.findIndex(item => {
|
||||
@ -66,6 +70,9 @@ const moveToView = (index: number): void => {
|
||||
: 0;
|
||||
// 已有标签页总长度（包含溢出部分）
|
||||
const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
|
||||
scrollbarDomWidth <= tabDomWidth
|
||||
? (isShowArrow.value = true)
|
||||
: (isShowArrow.value = false);
|
||||
if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
|
||||
translateX.value = 0;
|
||||
} else if (tabItemElOffsetLeft < -translateX.value) {
|
||||
@ -143,16 +150,11 @@ function dynamicRouteTag(value: string, parentPath: string): void {
|
||||
|
||||
/** 刷新路由 */
|
||||
function onFresh() {
|
||||
const refreshButton = "refresh-button";
|
||||
toggleClass(true, refreshButton, document.querySelector(".rotate"));
|
||||
const { fullPath, query } = unref(route);
|
||||
router.replace({
|
||||
path: "/redirect" + fullPath,
|
||||
query: query
|
||||
});
|
||||
setTimeout(() => {
|
||||
removeClass(document.querySelector(".rotate"), refreshButton);
|
||||
}, 600);
|
||||
}
|
||||
|
||||
function deleteDynamicTag(obj: any, current: any, tag?: string) {
|
||||
@ -277,6 +279,32 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
||||
});
|
||||
router.push("/welcome");
|
||||
break;
|
||||
case 6:
|
||||
// 整体页面全屏
|
||||
toggle();
|
||||
setTimeout(() => {
|
||||
if (isFullscreen.value) {
|
||||
tagsViews[6].icon = "exit-fullscreen";
|
||||
tagsViews[6].text = $t("buttons.hswholeExitFullScreen");
|
||||
} else {
|
||||
tagsViews[6].icon = "fullscreen";
|
||||
tagsViews[6].text = $t("buttons.hswholeFullScreen");
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
case 7:
|
||||
// 内容区全屏
|
||||
onContentFullScreen();
|
||||
setTimeout(() => {
|
||||
if (pureSetting.hiddenSideBar) {
|
||||
tagsViews[7].icon = "exit-fullscreen";
|
||||
tagsViews[7].text = $t("buttons.hscontentExitFullScreen");
|
||||
} else {
|
||||
tagsViews[7].icon = "fullscreen";
|
||||
tagsViews[7].text = $t("buttons.hscontentFullScreen");
|
||||
}
|
||||
}, 100);
|
||||
break;
|
||||
}
|
||||
setTimeout(() => {
|
||||
showMenuModel(route.fullPath, route.query);
|
||||
@ -467,9 +495,9 @@ onMounted(() => {
|
||||
|
||||
<template>
|
||||
<div ref="containerDom" class="tags-view" v-if="!showTags">
|
||||
<div class="arrow-left">
|
||||
<span v-show="isShowArrow" class="arrow-left">
|
||||
<IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
|
||||
</div>
|
||||
</span>
|
||||
<div ref="scrollbarDom" class="scroll-container">
|
||||
<div class="tab" ref="tabDom" :style="getTabStyle">
|
||||
<div
|
||||
@ -512,7 +540,7 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="arrow-right">
|
||||
<span v-show="isShowArrow" class="arrow-right">
|
||||
<IconifyIconOffline
|
||||
icon="arrow-right-s-line"
|
||||
@click="handleScroll(-200)"
|
||||
@ -527,59 +555,41 @@ onMounted(() => {
|
||||
class="contextmenu"
|
||||
>
|
||||
<div
|
||||
v-for="(item, key) in tagsViews"
|
||||
v-for="(item, key) in tagsViews.slice(0, 6)"
|
||||
:key="key"
|
||||
style="display: flex; align-items: center"
|
||||
>
|
||||
<li v-if="item.show" @click="selectTag(key, item)">
|
||||
<component :is="toRaw(item.icon)" :key="key" />
|
||||
<IconifyIconOffline :icon="item.icon" />
|
||||
{{ transformI18n(item.text) }}
|
||||
</li>
|
||||
</div>
|
||||
</ul>
|
||||
</transition>
|
||||
<!-- 右侧功能按钮 -->
|
||||
<ul class="right-button">
|
||||
<li>
|
||||
<span
|
||||
:title="transformI18n('buttons.hsrefreshRoute')"
|
||||
class="el-icon-refresh-right rotate"
|
||||
@click="onFresh"
|
||||
>
|
||||
<IconifyIconOffline icon="refresh-right" />
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
placement="bottom-end"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<IconifyIconOffline icon="arrow-down" class="dark:text-white" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in tagsViews"
|
||||
:key="key"
|
||||
:command="{ key, item }"
|
||||
:divided="item.divided"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<component
|
||||
:is="toRaw(item.icon)"
|
||||
:key="key"
|
||||
style="margin-right: 6px"
|
||||
/>
|
||||
{{ transformI18n(item.text) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</li>
|
||||
<li>
|
||||
<slot />
|
||||
</li>
|
||||
</ul>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
placement="bottom-end"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<span class="arrow-down">
|
||||
<IconifyIconOffline icon="arrow-down" class="dark:text-white" />
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(item, key) in tagsViews"
|
||||
:key="key"
|
||||
:command="{ key, item }"
|
||||
:divided="item.divided"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<IconifyIconOffline :icon="item.icon" />
|
||||
{{ transformI18n(item.text) }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -14,20 +14,15 @@ import type { StorageConfigs } from "/#/index";
|
||||
import { useEventListener } from "@vueuse/core";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { transformI18n, $t } from "/@/plugins/i18n";
|
||||
import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
||||
import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils";
|
||||
|
||||
import close from "/@/assets/svg/close.svg?component";
|
||||
import refresh from "/@/assets/svg/refresh.svg?component";
|
||||
import closeAll from "/@/assets/svg/close_all.svg?component";
|
||||
import closeLeft from "/@/assets/svg/close_left.svg?component";
|
||||
import closeOther from "/@/assets/svg/close_other.svg?component";
|
||||
import closeRight from "/@/assets/svg/close_right.svg?component";
|
||||
|
||||
export function useTags() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const instance = getCurrentInstance();
|
||||
const pureSetting = useSettingStoreHook();
|
||||
|
||||
const buttonTop = ref(0);
|
||||
const buttonLeft = ref(0);
|
||||
@ -53,46 +48,60 @@ export function useTags() {
|
||||
|
||||
const tagsViews = reactive<Array<tagsViewsType>>([
|
||||
{
|
||||
icon: refresh,
|
||||
icon: "refresh-right",
|
||||
text: $t("buttons.hsreload"),
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: close,
|
||||
icon: "close",
|
||||
text: $t("buttons.hscloseCurrentTab"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeLeft,
|
||||
icon: "close-left-tags",
|
||||
text: $t("buttons.hscloseLeftTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeRight,
|
||||
icon: "close-right-tags",
|
||||
text: $t("buttons.hscloseRightTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeOther,
|
||||
icon: "close-other-tags",
|
||||
text: $t("buttons.hscloseOtherTabs"),
|
||||
divided: true,
|
||||
disabled: multiTags.value.length > 2 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: closeAll,
|
||||
icon: "close-all-tags",
|
||||
text: $t("buttons.hscloseAllTabs"),
|
||||
divided: false,
|
||||
disabled: multiTags.value.length > 1 ? false : true,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
text: $t("buttons.hswholeFullScreen"),
|
||||
divided: true,
|
||||
disabled: false,
|
||||
show: true
|
||||
},
|
||||
{
|
||||
icon: "fullscreen",
|
||||
text: $t("buttons.hscontentFullScreen"),
|
||||
divided: false,
|
||||
disabled: false,
|
||||
show: true
|
||||
}
|
||||
]);
|
||||
|
||||
@ -172,6 +181,12 @@ export function useTags() {
|
||||
}
|
||||
}
|
||||
|
||||
function onContentFullScreen() {
|
||||
pureSetting.hiddenSideBar
|
||||
? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
|
||||
: pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (!showModel.value) {
|
||||
const configure = storageLocal.getItem<StorageConfigs>(
|
||||
@ -201,6 +216,7 @@ export function useTags() {
|
||||
buttonTop,
|
||||
buttonLeft,
|
||||
translateX,
|
||||
pureSetting,
|
||||
activeIndex,
|
||||
getTabStyle,
|
||||
iconIsActive,
|
||||
@ -213,6 +229,7 @@ export function useTags() {
|
||||
onMounted,
|
||||
onMouseenter,
|
||||
onMouseleave,
|
||||
transformI18n
|
||||
transformI18n,
|
||||
onContentFullScreen
|
||||
};
|
||||
}
|
||||
|
||||
@ -7,16 +7,13 @@ import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||
import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
|
||||
import { h, reactive, computed, onMounted, defineComponent } from "vue";
|
||||
|
||||
import backTop from "/@/assets/svg/back_top.svg?component";
|
||||
import fullScreen from "/@/assets/svg/full_screen.svg?component";
|
||||
import exitScreen from "/@/assets/svg/exit_screen.svg?component";
|
||||
|
||||
import navbar from "./components/navbar.vue";
|
||||
import tag from "./components/tag/index.vue";
|
||||
import appMain from "./components/appMain.vue";
|
||||
import setting from "./components/setting/index.vue";
|
||||
import Vertical from "./components/sidebar/vertical.vue";
|
||||
import Horizontal from "./components/sidebar/horizontal.vue";
|
||||
import backTop from "/@/assets/svg/back_top.svg?component";
|
||||
|
||||
const { isDark } = useDark();
|
||||
const { layout } = useLayout();
|
||||
@ -102,12 +99,6 @@ onMounted(() => {
|
||||
}
|
||||
});
|
||||
|
||||
function onFullScreen() {
|
||||
pureSetting.hiddenSideBar
|
||||
? pureSetting.changeSetting({ key: "hiddenSideBar", value: false })
|
||||
: pureSetting.changeSetting({ key: "hiddenSideBar", value: true });
|
||||
}
|
||||
|
||||
const layoutHeader = defineComponent({
|
||||
render() {
|
||||
return h(
|
||||
@ -127,31 +118,11 @@ const layoutHeader = defineComponent({
|
||||
!pureSetting.hiddenSideBar &&
|
||||
(layout.value.includes("vertical") || layout.value.includes("mix"))
|
||||
? h(navbar)
|
||||
: h("div"),
|
||||
: null,
|
||||
!pureSetting.hiddenSideBar && layout.value.includes("horizontal")
|
||||
? h(Horizontal)
|
||||
: h("div"),
|
||||
h(
|
||||
tag,
|
||||
{},
|
||||
{
|
||||
default: () => [
|
||||
h(
|
||||
"span",
|
||||
{
|
||||
onClick: onFullScreen
|
||||
},
|
||||
{
|
||||
default: () => [
|
||||
!pureSetting.hiddenSideBar
|
||||
? h(fullScreen, { class: "dark:text-white" })
|
||||
: h(exitScreen, { class: "dark:text-white" })
|
||||
]
|
||||
}
|
||||
)
|
||||
]
|
||||
}
|
||||
)
|
||||
: null,
|
||||
h(tag)
|
||||
]
|
||||
}
|
||||
);
|
||||
@ -226,10 +197,6 @@ const layoutHeader = defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.main-hidden {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.app-mask {
|
||||
background: #000;
|
||||
opacity: 0.3;
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Component } from "vue";
|
||||
export const routerArrays: Array<RouteConfigs> = [
|
||||
{
|
||||
path: "/welcome",
|
||||
@ -33,7 +32,7 @@ export type multiTagsType = {
|
||||
};
|
||||
|
||||
export type tagsViewsType = {
|
||||
icon: Component;
|
||||
icon: string;
|
||||
text: string;
|
||||
divided: boolean;
|
||||
disabled: boolean;
|
||||
|
||||
@ -34,6 +34,7 @@ export const useEpThemeStore = defineStore({
|
||||
const layout = storageLocal.getItem<StorageConfigs>("responsive-layout");
|
||||
this.epTheme = layout?.theme;
|
||||
this.epThemeColor = newColor;
|
||||
if (!layout) return;
|
||||
layout.epThemeColor = newColor;
|
||||
storageLocal.setItem("responsive-layout", layout);
|
||||
}
|
||||
|
||||
@ -36,17 +36,12 @@ html.dark {
|
||||
.arrow-left,
|
||||
.arrow-right {
|
||||
box-shadow: none;
|
||||
border-right: 1px solid $border-style;
|
||||
}
|
||||
|
||||
.arrow-right {
|
||||
border-left: 1px solid $border-style;
|
||||
}
|
||||
|
||||
.arrow-left,
|
||||
.arrow-right,
|
||||
.right-button li {
|
||||
border-right: 1px solid $border-style;
|
||||
}
|
||||
}
|
||||
|
||||
/* vxe-table */
|
||||
|
||||
@ -22,6 +22,15 @@
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.set-icon {
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: 100vh;
|
||||
min-height: 100%;
|
||||
@ -231,7 +240,7 @@
|
||||
/* 登录名 */
|
||||
.el-dropdown-link,
|
||||
/* 设置 */
|
||||
.el-icon-setting {
|
||||
.set-icon {
|
||||
&:hover {
|
||||
background: $menuHover;
|
||||
}
|
||||
@ -270,15 +279,6 @@
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.el-icon-setting {
|
||||
height: 48px;
|
||||
width: 40px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
@ -594,7 +594,7 @@ body[layout="vertical"] {
|
||||
/* 登录名 */
|
||||
.el-dropdown-link,
|
||||
/* 设置 */
|
||||
.el-icon-setting {
|
||||
.set-icon {
|
||||
&:hover {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@ defineOptions({
|
||||
<noAccess />
|
||||
<div class="ml-12">
|
||||
<p
|
||||
class="font-medium text-4xl mb-4"
|
||||
class="font-medium text-4xl mb-4 dark:text-white"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
|
||||
@ -11,7 +11,7 @@ defineOptions({
|
||||
<noExist />
|
||||
<div class="ml-12">
|
||||
<p
|
||||
class="font-medium text-4xl mb-4"
|
||||
class="font-medium text-4xl mb-4 dark:text-white"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
|
||||
@ -11,7 +11,7 @@ defineOptions({
|
||||
<noServer />
|
||||
<div class="ml-12">
|
||||
<p
|
||||
class="font-medium text-4xl mb-4"
|
||||
class="font-medium text-4xl mb-4 dark:text-white"
|
||||
v-motion
|
||||
:initial="{
|
||||
opacity: 0,
|
||||
|
||||
@ -3,7 +3,6 @@ import { useI18n } from "vue-i18n";
|
||||
import Motion from "./utils/motion";
|
||||
import { useRouter } from "vue-router";
|
||||
import { loginRules } from "./utils/rule";
|
||||
import { ref, reactive, toRaw } from "vue";
|
||||
import { initRouter } from "/@/router/utils";
|
||||
import { useNav } from "/@/layout/hooks/useNav";
|
||||
import { message } from "@pureadmin/components";
|
||||
@ -13,6 +12,7 @@ import { $t, transformI18n } from "/@/plugins/i18n";
|
||||
import { useLayout } from "/@/layout/hooks/useLayout";
|
||||
import { bg, avatar, illustration } from "./utils/static";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
|
||||
import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
|
||||
import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
|
||||
|
||||
@ -64,6 +64,21 @@ const onLogin = async (formEl: FormInstance | undefined) => {
|
||||
};
|
||||
|
||||
dataThemeChange();
|
||||
|
||||
/** 使用公共函数，避免`removeEventListener`失效 */
|
||||
function onkeypress({ code }: KeyboardEvent) {
|
||||
if (code === "Enter") {
|
||||
onLogin(ruleFormRef.value);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.document.addEventListener("keypress", onkeypress);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.document.removeEventListener("keypress", onkeypress);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -127,7 +142,6 @@ dataThemeChange();
|
||||
:model="ruleForm"
|
||||
:rules="loginRules"
|
||||
size="large"
|
||||
@keyup.enter="onLogin(ruleFormRef)"
|
||||
>
|
||||
<Motion :delay="100">
|
||||
<el-form-item
|
||||
|
||||
Loading…
Reference in New Issue
Block a user