Browse Source

chore: 同步完整版

i18n
xiaoxian521 2 years ago
parent
commit
24db509381
  1. 4
      locales/en.yaml
  2. 4
      locales/zh-CN.yaml
  3. 29
      package.json
  4. 1704
      pnpm-lock.yaml
  5. 1
      src/assets/svg/close.svg
  6. 1
      src/assets/svg/close_all.svg
  7. 1
      src/assets/svg/close_left.svg
  8. 1
      src/assets/svg/close_other.svg
  9. 1
      src/assets/svg/close_right.svg
  10. 1
      src/assets/svg/refresh.svg
  11. 22
      src/components/ReIcon/src/iconifyIconOffline.ts
  12. 3
      src/directives/elResizeDetector/index.ts
  13. 15
      src/layout/components/navbar.vue
  14. 12
      src/layout/components/panel/index.vue
  15. 4
      src/layout/components/setting/index.vue
  16. 12
      src/layout/components/sidebar/horizontal.vue
  17. 12
      src/layout/components/sidebar/mixNav.vue
  18. 28
      src/layout/components/tag/index.scss
  19. 80
      src/layout/components/tag/index.vue
  20. 45
      src/layout/hooks/useTag.ts
  21. 41
      src/layout/index.vue
  22. 3
      src/layout/types.ts
  23. 1
      src/store/modules/epTheme.ts
  24. 7
      src/style/dark.scss
  25. 22
      src/style/sidebar.scss
  26. 2
      src/views/error/403.vue
  27. 2
      src/views/error/404.vue
  28. 2
      src/views/error/500.vue
  29. 18
      src/views/login/index.vue

4
locales/en.yaml

@ -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

4
locales/zh-CN.yaml

@ -18,6 +18,10 @@ buttons:
hscloseRightTabs: 关闭右侧标签页
hscloseOtherTabs: 关闭其他标签页
hscloseAllTabs: 关闭全部标签页
hswholeFullScreen: 整体页面全屏
hswholeExitFullScreen: 整体页面退出全屏
hscontentFullScreen: 内容区全屏
hscontentExitFullScreen: 内容区退出全屏
menus:
hshome: 首页
hslogin: 登录

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": {

1704
pnpm-lock.yaml
File diff suppressed because it is too large
View File

1
src/assets/svg/close.svg

@ -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>

1
src/assets/svg/close_all.svg

@ -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>

1
src/assets/svg/close_left.svg

@ -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>

1
src/assets/svg/close_other.svg

@ -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>

1
src/assets/svg/close_right.svg

@ -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>

1
src/assets/svg/refresh.svg

@ -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>

22
src/components/ReIcon/src/iconifyIconOffline.ts

@ -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({

3
src/directives/elResizeDetector/index.ts

@ -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 } });
})();
} else {
vnode.el.dispatchEvent(
new CustomEvent("resize", { detail: { width, height } })

15
src/layout/components/navbar.vue

@ -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 {

12
src/layout/components/panel/index.vue

@ -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;

4
src/layout/components/setting/index.vue

@ -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();
}

12
src/layout/components/sidebar/horizontal.vue

@ -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"
>

12
src/layout/components/sidebar/mixNav.vue

@ -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"
>

28
src/layout/components/tag/index.scss

@ -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;
}

80
src/layout/components/tag/index.vue

@ -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,35 +555,26 @@ 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"
>
<span class="arrow-down">
<IconifyIconOffline icon="arrow-down" class="dark:text-white" />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
@ -565,21 +584,12 @@ onMounted(() => {
:divided="item.divided"
:disabled="item.disabled"
>
<component
:is="toRaw(item.icon)"
:key="key"
style="margin-right: 6px"
/>
<IconifyIconOffline :icon="item.icon" />
{{ transformI18n(item.text) }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</li>
<li>
<slot />
</li>
</ul>
</div>
</template>

45
src/layout/hooks/useTag.ts

@ -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
};
}

41
src/layout/index.vue

@ -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;

3
src/layout/types.ts

@ -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;

1
src/store/modules/epTheme.ts

@ -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);
}

7
src/style/dark.scss

@ -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
src/style/sidebar.scss

@ -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;
}

2
src/views/error/403.vue

@ -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,

2
src/views/error/404.vue

@ -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,

2
src/views/error/500.vue

@ -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,

18
src/views/login/index.vue

@ -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…
Cancel
Save