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 hscloseRightTabs: Close RightTabs
hscloseOtherTabs: Close OtherTabs hscloseOtherTabs: Close OtherTabs
hscloseAllTabs: Close AllTabs hscloseAllTabs: Close AllTabs
hswholeFullScreen: Whole FullScreen
hswholeExitFullScreen: Whole ExitFullScreen
hscontentFullScreen: Content FullScreen
hscontentExitFullScreen: Content ExitFullScreen
menus: menus:
hshome: Home hshome: Home
hslogin: Login hslogin: Login

4
locales/zh-CN.yaml

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

29
package.json

@ -32,8 +32,8 @@
"@pureadmin/components": "^1.1.0", "@pureadmin/components": "^1.1.0",
"@pureadmin/descriptions": "^1.1.0", "@pureadmin/descriptions": "^1.1.0",
"@pureadmin/table": "^1.2.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/motion": "^2.0.0-beta.12",
"@vueuse/shared": "^9.1.1", "@vueuse/shared": "^9.1.1",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
@ -54,7 +54,7 @@
"qs": "^6.11.0", "qs": "^6.11.0",
"resize-observer-polyfill": "^1.5.1", "resize-observer-polyfill": "^1.5.1",
"responsive-storage": "^2.1.0", "responsive-storage": "^2.1.0",
"vue": "^3.2.39",
"vue": "^3.2.40",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
"vue-router": "^4.1.5", "vue-router": "^4.1.5",
"vue-types": "^4.2.1", "vue-types": "^4.2.1",
@ -67,7 +67,7 @@
"@iconify-icons/ep": "^1.2.7", "@iconify-icons/ep": "^1.2.7",
"@iconify-icons/ri": "^1.2.3", "@iconify-icons/ri": "^1.2.3",
"@iconify/vue": "^3.2.1", "@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", "@pureadmin/theme": "^2.4.0",
"@types/element-resize-detector": "1.1.3", "@types/element-resize-detector": "1.1.3",
"@types/js-cookie": "^3.0.1", "@types/js-cookie": "^3.0.1",
@ -76,17 +76,16 @@
"@types/mockjs": "1.0.3", "@types/mockjs": "1.0.3",
"@types/node": "14.14.14", "@types/node": "14.14.14",
"@types/nprogress": "0.2.0", "@types/nprogress": "0.2.0",
"@types/qrcode": "^1.5.0",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.10.2", "@typescript-eslint/eslint-plugin": "^5.10.2",
"@typescript-eslint/parser": "^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", "@vitejs/plugin-vue-jsx": "^2.0.1",
"@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.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", "cloc": "^2.10.0",
"cssnano": "^5.1.13", "cssnano": "^5.1.13",
"eslint": "^8.8.0", "eslint": "^8.8.0",
@ -96,14 +95,14 @@
"husky": "^7.0.4", "husky": "^7.0.4",
"lint-staged": "11.1.2", "lint-staged": "11.1.2",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"postcss": "^8.4.16",
"postcss": "^8.4.17",
"postcss-html": "^1.5.0", "postcss-html": "^1.5.0",
"postcss-import": "^15.0.0", "postcss-import": "^15.0.0",
"postcss-scss": "^4.0.4",
"postcss-scss": "^4.0.5",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"pretty-quick": "3.1.1", "pretty-quick": "3.1.1",
"rimraf": "3.0.2", "rimraf": "3.0.2",
"rollup-plugin-visualizer": "^5.8.1",
"rollup-plugin-visualizer": "^5.8.2",
"sass": "^1.53.0", "sass": "^1.53.0",
"sass-loader": "^13.0.2", "sass-loader": "^13.0.2",
"stylelint": "^14.3.0", "stylelint": "^14.3.0",
@ -116,12 +115,12 @@
"terser": "^5.15.0", "terser": "^5.15.0",
"typescript": "^4.7.4", "typescript": "^4.7.4",
"unplugin-vue-define-options": "0.7.3", "unplugin-vue-define-options": "0.7.3",
"vite": "^3.1.0",
"vite": "^3.1.8",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^1.1.0", "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-eslint-parser": "^8.2.0",
"vue-tsc": "^0.40.7"
"vue-tsc": "^0.40.13"
}, },
"pnpm": { "pnpm": {
"peerDependencyRules": { "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 // element-plus icon
import Check from "@iconify-icons/ep/check"; import Check from "@iconify-icons/ep/check";
import HomeFilled from "@iconify-icons/ep/home-filled"; import HomeFilled from "@iconify-icons/ep/home-filled";
import Setting from "@iconify-icons/ep/setting";
import Lollipop from "@iconify-icons/ep/lollipop"; import Lollipop from "@iconify-icons/ep/lollipop";
import RefreshRight from "@iconify-icons/ep/refresh-right"; 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 CloseBold from "@iconify-icons/ep/close-bold";
import Bell from "@iconify-icons/ep/bell"; import Bell from "@iconify-icons/ep/bell";
import Search from "@iconify-icons/ep/search"; import Search from "@iconify-icons/ep/search";
addIcon("check", Check); addIcon("check", Check);
addIcon("home-filled", HomeFilled); addIcon("home-filled", HomeFilled);
addIcon("setting", Setting);
addIcon("lollipop", Lollipop); addIcon("lollipop", Lollipop);
addIcon("refresh-right", RefreshRight); addIcon("refresh-right", RefreshRight);
addIcon("arrow-down", ArrowDown);
addIcon("close", Close);
addIcon("close-bold", CloseBold); addIcon("close-bold", CloseBold);
addIcon("bell", Bell); addIcon("bell", Bell);
addIcon("search", Search); 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 Lock from "@iconify-icons/ri/lock-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill"; import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
import MenuFold from "@iconify-icons/ri/menu-fold-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-right-s-line", ArrowRightSLine);
addIcon("arrow-left-s-line", ArrowLeftSLine); addIcon("arrow-left-s-line", ArrowLeftSLine);
addIcon("logout-circle-r-line", LogoutCircleRLine); addIcon("logout-circle-r-line", LogoutCircleRLine);
@ -44,6 +50,14 @@ addIcon("user", User);
addIcon("lock", Lock); addIcon("lock", Lock);
addIcon("menu-unfold", MenuUnfold); addIcon("menu-unfold", MenuUnfold);
addIcon("menu-fold", MenuFold); 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 // Iconify Icon在Vue里离线使用(用于内网环境)https://docs.iconify.design/icon-components/vue/offline.html
export default defineComponent({ export default defineComponent({

3
src/directives/elResizeDetector/index.ts

@ -1,7 +1,6 @@
import { Directive, type DirectiveBinding, type VNode } from "vue"; import { Directive, type DirectiveBinding, type VNode } from "vue";
import elementResizeDetectorMaker from "element-resize-detector"; import elementResizeDetectorMaker from "element-resize-detector";
import type { Erd } from "element-resize-detector"; import type { Erd } from "element-resize-detector";
import { optimizeFps } from "@pureadmin/utils";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
const erd: Erd = elementResizeDetectorMaker({ const erd: Erd = elementResizeDetectorMaker({
@ -14,9 +13,7 @@ export const resize: Directive = {
const width = elem.offsetWidth; const width = elem.offsetWidth;
const height = elem.offsetHeight; const height = elem.offsetHeight;
if (binding?.instance) { if (binding?.instance) {
optimizeFps(() => {
emitter.emit("resize", { detail: { width, height } }); emitter.emit("resize", { detail: { width, height } });
})();
} else { } else {
vnode.el.dispatchEvent( vnode.el.dispatchEvent(
new CustomEvent("resize", { detail: { width, height } }) 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 avatars from "/@/assets/avatars.jpg";
import { useNav } from "/@/layout/hooks/useNav"; import { useNav } from "/@/layout/hooks/useNav";
import Breadcrumb from "./sidebar/breadCrumb.vue"; import Breadcrumb from "./sidebar/breadCrumb.vue";
import { deviceDetection } from "@pureadmin/utils";
import topCollapse from "./sidebar/topCollapse.vue"; import topCollapse from "./sidebar/topCollapse.vue";
import screenfull from "../components/screenfull/index.vue";
import { useTranslationLang } from "../hooks/useTranslationLang"; import { useTranslationLang } from "../hooks/useTranslationLang";
import globalization from "/@/assets/svg/globalization.svg?component"; import globalization from "/@/assets/svg/globalization.svg?component";
@ -50,8 +48,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<Search /> <Search />
<!-- 通知 --> <!-- 通知 -->
<Notice id="header-notice" /> <Notice id="header-notice" />
<!-- 全屏 -->
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<globalization <globalization
@ -103,7 +99,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</template> </template>
</el-dropdown> </el-dropdown>
<span <span
class="el-icon-setting navbar-bg-hover"
class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')" :title="t('buttons.hssystemSet')"
@click="onPanel" @click="onPanel"
> >
@ -153,15 +149,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
border-radius: 50%; border-radius: 50%;
} }
} }
.el-icon-setting {
height: 48px;
width: 38px;
padding: 12px;
display: flex;
cursor: pointer;
align-items: center;
}
} }
.breadcrumb-container { .breadcrumb-container {

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

@ -22,9 +22,13 @@ emitter.on("openPanel", () => {
<div class="right-panel-items"> <div class="right-panel-items">
<div class="project-configuration"> <div class="project-configuration">
<h3 class="dark:text-white">项目配置</h3> <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>
<div <div
class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]" class="border-b-[1px] border-solid border-[#dcdfe6] dark:border-[#303030]"
@ -121,7 +125,7 @@ emitter.on("openPanel", () => {
top: 15px; top: 15px;
margin-left: 10px; margin-left: 10px;
i {
svg {
font-size: 20px; font-size: 20px;
margin-right: 20px; margin-right: 20px;

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

@ -132,6 +132,8 @@ const multiTagsCacheChange = () => {
/** 清空缓存并返回登录页 */ /** 清空缓存并返回登录页 */
function onReset() { function onReset() {
router.push("/login"); router.push("/login");
storageLocal.clear();
storageSession.clear();
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig(); const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
useAppStoreHook().setLayout(Layout); useAppStoreHook().setLayout(Layout);
setEpThemeColor(EpThemeColor); setEpThemeColor(EpThemeColor);
@ -139,8 +141,6 @@ function onReset() {
toggleClass(Grey, "html-grey", document.querySelector("html")); toggleClass(Grey, "html-grey", document.querySelector("html"));
toggleClass(Weak, "html-weakness", document.querySelector("html")); toggleClass(Weak, "html-weakness", document.querySelector("html"));
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]); useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
storageLocal.clear();
storageSession.clear();
resetRouter(); resetRouter();
} }

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

@ -1,12 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from "vue";
import Search from "../search/index.vue"; import Search from "../search/index.vue";
import Notice from "../notice/index.vue"; import Notice from "../notice/index.vue";
import { ref, watch, nextTick } from "vue";
import SidebarItem from "./sidebarItem.vue"; import SidebarItem from "./sidebarItem.vue";
import avatars from "/@/assets/avatars.jpg"; import avatars from "/@/assets/avatars.jpg";
import { useNav } from "/@/layout/hooks/useNav"; import { useNav } from "/@/layout/hooks/useNav";
import screenfull from "../screenfull/index.vue";
import { deviceDetection } from "@pureadmin/utils";
import { useTranslationLang } from "../../hooks/useTranslationLang"; import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "/@/store/modules/permission";
import globalization from "/@/assets/svg/globalization.svg?component"; import globalization from "/@/assets/svg/globalization.svg?component";
@ -28,6 +26,10 @@ const {
getDropdownItemClass getDropdownItemClass
} = useNav(); } = useNav();
nextTick(() => {
menuRef.value?.handleResize();
});
watch( watch(
() => route.path, () => route.path,
() => { () => {
@ -62,8 +64,6 @@ watch(
<Search /> <Search />
<!-- 通知 --> <!-- 通知 -->
<Notice id="header-notice" /> <Notice id="header-notice" />
<!-- 全屏 -->
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<globalization <globalization
@ -113,7 +113,7 @@ watch(
</template> </template>
</el-dropdown> </el-dropdown>
<span <span
class="el-icon-setting navbar-bg-hover"
class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')" :title="t('buttons.hssystemSet')"
@click="onPanel" @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 avatars from "/@/assets/avatars.jpg";
import { useNav } from "/@/layout/hooks/useNav"; import { useNav } from "/@/layout/hooks/useNav";
import { transformI18n } from "/@/plugins/i18n"; 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 { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { getParentPaths, findRouteByPath } from "/@/router/utils"; import { getParentPaths, findRouteByPath } from "/@/router/utils";
import { useTranslationLang } from "../../hooks/useTranslationLang"; import { useTranslationLang } from "../../hooks/useTranslationLang";
@ -45,6 +43,10 @@ onMounted(() => {
getDefaultActive(route.path); getDefaultActive(route.path);
}); });
nextTick(() => {
menuRef.value?.handleResize();
});
watch( watch(
() => route.path, () => route.path,
() => { () => {
@ -94,8 +96,6 @@ watch(
<Search /> <Search />
<!-- 通知 --> <!-- 通知 -->
<Notice id="header-notice" /> <Notice id="header-notice" />
<!-- 全屏 -->
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
<!-- 国际化 --> <!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click"> <el-dropdown id="header-translation" trigger="click">
<globalization <globalization
@ -145,7 +145,7 @@ watch(
</template> </template>
</el-dropdown> </el-dropdown>
<span <span
class="el-icon-setting navbar-bg-hover"
class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')" :title="t('buttons.hssystemSet')"
@click="onPanel" @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 { .contextmenu {
margin: 0; margin: 0;
@ -196,6 +181,9 @@
margin-right: 10px; margin-right: 10px;
} }
:deep(.el-dropdown-menu__item--divided) {
margin: 1px 0;
}
.el-dropdown-menu__item--divided::before { .el-dropdown-menu__item--divided::before {
margin: 0; margin: 0;
} }
@ -223,7 +211,8 @@
} }
.arrow-left, .arrow-left,
.arrow-right {
.arrow-right,
.arrow-down {
width: 40px; width: 40px;
height: 38px; height: 38px;
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
@ -248,7 +237,7 @@
.arrow-right { .arrow-right {
box-shadow: -5px 0 5px -6px #ccc; box-shadow: -5px 0 5px -6px #ccc;
border-right: 1px solid #ccc;
border-right: 0.5px solid #ccc;
&:hover { &:hover {
cursor: e-resize; cursor: e-resize;
@ -305,8 +294,3 @@
background: var(--el-color-primary); background: var(--el-color-primary);
animation: scheduleOutWidth 400ms ease-in; 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"> <script setup lang="ts">
import { $t } from "/@/plugins/i18n";
import { emitter } from "/@/utils/mitt"; import { emitter } from "/@/utils/mitt";
import { RouteConfigs } from "../../types"; import { RouteConfigs } from "../../types";
import { useTags } from "../../hooks/useTag"; import { useTags } from "../../hooks/useTag";
import { routerArrays } from "/@/layout/types"; import { routerArrays } from "/@/layout/types";
import { isEqual, isEmpty } from "lodash-unified"; 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 { useSettingStoreHook } from "/@/store/modules/settings";
import { ref, watch, unref, nextTick, onBeforeMount } from "vue";
import { handleAliveRoute, delAliveRoutes } from "/@/router/utils"; import { handleAliveRoute, delAliveRoutes } from "/@/router/utils";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
import { ref, watch, unref, toRaw, nextTick, onBeforeMount } from "vue";
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
const { const {
route, route,
@ -23,6 +23,7 @@ const {
buttonLeft, buttonLeft,
showModel, showModel,
translateX, translateX,
pureSetting,
activeIndex, activeIndex,
getTabStyle, getTabStyle,
iconIsActive, iconIsActive,
@ -34,12 +35,15 @@ const {
onMounted, onMounted,
onMouseenter, onMouseenter,
onMouseleave, onMouseleave,
transformI18n
transformI18n,
onContentFullScreen
} = useTags(); } = useTags();
const tabDom = ref(); const tabDom = ref();
const containerDom = ref(); const containerDom = ref();
const scrollbarDom = ref(); const scrollbarDom = ref();
let isShowArrow = ref(false);
const { isFullscreen, toggle } = useFullscreen();
const dynamicTagView = () => { const dynamicTagView = () => {
const index = multiTags.value.findIndex(item => { const index = multiTags.value.findIndex(item => {
@ -66,6 +70,9 @@ const moveToView = (index: number): void => {
: 0; : 0;
// //
const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0; const tabDomWidth = tabDom.value ? tabDom.value?.offsetWidth : 0;
scrollbarDomWidth <= tabDomWidth
? (isShowArrow.value = true)
: (isShowArrow.value = false);
if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) { if (tabDomWidth < scrollbarDomWidth || tabItemElOffsetLeft === 0) {
translateX.value = 0; translateX.value = 0;
} else if (tabItemElOffsetLeft < -translateX.value) { } else if (tabItemElOffsetLeft < -translateX.value) {
@ -143,16 +150,11 @@ function dynamicRouteTag(value: string, parentPath: string): void {
/** 刷新路由 */ /** 刷新路由 */
function onFresh() { function onFresh() {
const refreshButton = "refresh-button";
toggleClass(true, refreshButton, document.querySelector(".rotate"));
const { fullPath, query } = unref(route); const { fullPath, query } = unref(route);
router.replace({ router.replace({
path: "/redirect" + fullPath, path: "/redirect" + fullPath,
query: query query: query
}); });
setTimeout(() => {
removeClass(document.querySelector(".rotate"), refreshButton);
}, 600);
} }
function deleteDynamicTag(obj: any, current: any, tag?: string) { function deleteDynamicTag(obj: any, current: any, tag?: string) {
@ -277,6 +279,32 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
}); });
router.push("/welcome"); router.push("/welcome");
break; 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(() => { setTimeout(() => {
showMenuModel(route.fullPath, route.query); showMenuModel(route.fullPath, route.query);
@ -467,9 +495,9 @@ onMounted(() => {
<template> <template>
<div ref="containerDom" class="tags-view" v-if="!showTags"> <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)" /> <IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" />
</div>
</span>
<div ref="scrollbarDom" class="scroll-container"> <div ref="scrollbarDom" class="scroll-container">
<div class="tab" ref="tabDom" :style="getTabStyle"> <div class="tab" ref="tabDom" :style="getTabStyle">
<div <div
@ -512,7 +540,7 @@ onMounted(() => {
</div> </div>
</div> </div>
</div> </div>
<span class="arrow-right">
<span v-show="isShowArrow" class="arrow-right">
<IconifyIconOffline <IconifyIconOffline
icon="arrow-right-s-line" icon="arrow-right-s-line"
@click="handleScroll(-200)" @click="handleScroll(-200)"
@ -527,35 +555,26 @@ onMounted(() => {
class="contextmenu" class="contextmenu"
> >
<div <div
v-for="(item, key) in tagsViews"
v-for="(item, key) in tagsViews.slice(0, 6)"
:key="key" :key="key"
style="display: flex; align-items: center" style="display: flex; align-items: center"
> >
<li v-if="item.show" @click="selectTag(key, item)"> <li v-if="item.show" @click="selectTag(key, item)">
<component :is="toRaw(item.icon)" :key="key" />
<IconifyIconOffline :icon="item.icon" />
{{ transformI18n(item.text) }} {{ transformI18n(item.text) }}
</li> </li>
</div> </div>
</ul> </ul>
</transition> </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 <el-dropdown
trigger="click" trigger="click"
placement="bottom-end" placement="bottom-end"
@command="handleCommand" @command="handleCommand"
> >
<span class="arrow-down">
<IconifyIconOffline icon="arrow-down" class="dark:text-white" /> <IconifyIconOffline icon="arrow-down" class="dark:text-white" />
</span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item <el-dropdown-item
@ -565,21 +584,12 @@ onMounted(() => {
:divided="item.divided" :divided="item.divided"
:disabled="item.disabled" :disabled="item.disabled"
> >
<component
:is="toRaw(item.icon)"
:key="key"
style="margin-right: 6px"
/>
<IconifyIconOffline :icon="item.icon" />
{{ transformI18n(item.text) }} {{ transformI18n(item.text) }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</li>
<li>
<slot />
</li>
</ul>
</div> </div>
</template> </template>

45
src/layout/hooks/useTag.ts

@ -14,20 +14,15 @@ import type { StorageConfigs } from "/#/index";
import { useEventListener } from "@vueuse/core"; import { useEventListener } from "@vueuse/core";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { transformI18n, $t } from "/@/plugins/i18n"; import { transformI18n, $t } from "/@/plugins/i18n";
import { useSettingStoreHook } from "/@/store/modules/settings";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils"; 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() { export function useTags() {
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const instance = getCurrentInstance(); const instance = getCurrentInstance();
const pureSetting = useSettingStoreHook();
const buttonTop = ref(0); const buttonTop = ref(0);
const buttonLeft = ref(0); const buttonLeft = ref(0);
@ -53,46 +48,60 @@ export function useTags() {
const tagsViews = reactive<Array<tagsViewsType>>([ const tagsViews = reactive<Array<tagsViewsType>>([
{ {
icon: refresh,
icon: "refresh-right",
text: $t("buttons.hsreload"), text: $t("buttons.hsreload"),
divided: false, divided: false,
disabled: false, disabled: false,
show: true show: true
}, },
{ {
icon: close,
icon: "close",
text: $t("buttons.hscloseCurrentTab"), text: $t("buttons.hscloseCurrentTab"),
divided: false, divided: false,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: closeLeft,
icon: "close-left-tags",
text: $t("buttons.hscloseLeftTabs"), text: $t("buttons.hscloseLeftTabs"),
divided: true, divided: true,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: closeRight,
icon: "close-right-tags",
text: $t("buttons.hscloseRightTabs"), text: $t("buttons.hscloseRightTabs"),
divided: false, divided: false,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: closeOther,
icon: "close-other-tags",
text: $t("buttons.hscloseOtherTabs"), text: $t("buttons.hscloseOtherTabs"),
divided: true, divided: true,
disabled: multiTags.value.length > 2 ? false : true, disabled: multiTags.value.length > 2 ? false : true,
show: true show: true
}, },
{ {
icon: closeAll,
icon: "close-all-tags",
text: $t("buttons.hscloseAllTabs"), text: $t("buttons.hscloseAllTabs"),
divided: false, divided: false,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: 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(() => { onMounted(() => {
if (!showModel.value) { if (!showModel.value) {
const configure = storageLocal.getItem<StorageConfigs>( const configure = storageLocal.getItem<StorageConfigs>(
@ -201,6 +216,7 @@ export function useTags() {
buttonTop, buttonTop,
buttonLeft, buttonLeft,
translateX, translateX,
pureSetting,
activeIndex, activeIndex,
getTabStyle, getTabStyle,
iconIsActive, iconIsActive,
@ -213,6 +229,7 @@ export function useTags() {
onMounted, onMounted,
onMouseenter, onMouseenter,
onMouseleave, 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 { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
import { h, reactive, computed, onMounted, defineComponent } from "vue"; 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 navbar from "./components/navbar.vue";
import tag from "./components/tag/index.vue"; import tag from "./components/tag/index.vue";
import appMain from "./components/appMain.vue"; import appMain from "./components/appMain.vue";
import setting from "./components/setting/index.vue"; import setting from "./components/setting/index.vue";
import Vertical from "./components/sidebar/vertical.vue"; import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue"; import Horizontal from "./components/sidebar/horizontal.vue";
import backTop from "/@/assets/svg/back_top.svg?component";
const { isDark } = useDark(); const { isDark } = useDark();
const { layout } = useLayout(); 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({ const layoutHeader = defineComponent({
render() { render() {
return h( return h(
@ -127,31 +118,11 @@ const layoutHeader = defineComponent({
!pureSetting.hiddenSideBar && !pureSetting.hiddenSideBar &&
(layout.value.includes("vertical") || layout.value.includes("mix")) (layout.value.includes("vertical") || layout.value.includes("mix"))
? h(navbar) ? h(navbar)
: h("div"),
: null,
!pureSetting.hiddenSideBar && layout.value.includes("horizontal") !pureSetting.hiddenSideBar && layout.value.includes("horizontal")
? h(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 { .app-mask {
background: #000; background: #000;
opacity: 0.3; opacity: 0.3;

3
src/layout/types.ts

@ -1,4 +1,3 @@
import { Component } from "vue";
export const routerArrays: Array<RouteConfigs> = [ export const routerArrays: Array<RouteConfigs> = [
{ {
path: "/welcome", path: "/welcome",
@ -33,7 +32,7 @@ export type multiTagsType = {
}; };
export type tagsViewsType = { export type tagsViewsType = {
icon: Component;
icon: string;
text: string; text: string;
divided: boolean; divided: boolean;
disabled: boolean; disabled: boolean;

1
src/store/modules/epTheme.ts

@ -34,6 +34,7 @@ export const useEpThemeStore = defineStore({
const layout = storageLocal.getItem<StorageConfigs>("responsive-layout"); const layout = storageLocal.getItem<StorageConfigs>("responsive-layout");
this.epTheme = layout?.theme; this.epTheme = layout?.theme;
this.epThemeColor = newColor; this.epThemeColor = newColor;
if (!layout) return;
layout.epThemeColor = newColor; layout.epThemeColor = newColor;
storageLocal.setItem("responsive-layout", layout); storageLocal.setItem("responsive-layout", layout);
} }

7
src/style/dark.scss

@ -36,17 +36,12 @@ html.dark {
.arrow-left, .arrow-left,
.arrow-right { .arrow-right {
box-shadow: none; box-shadow: none;
border-right: 1px solid $border-style;
} }
.arrow-right { .arrow-right {
border-left: 1px solid $border-style; border-left: 1px solid $border-style;
} }
.arrow-left,
.arrow-right,
.right-button li {
border-right: 1px solid $border-style;
}
} }
/* vxe-table */ /* vxe-table */

22
src/style/sidebar.scss

@ -22,6 +22,15 @@
margin-right: 5px; margin-right: 5px;
} }
.set-icon {
height: 48px;
width: 40px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
.main-container { .main-container {
height: 100vh; height: 100vh;
min-height: 100%; min-height: 100%;
@ -231,7 +240,7 @@
/* 登录名 */ /* 登录名 */
.el-dropdown-link, .el-dropdown-link,
/* 设置 */ /* 设置 */
.el-icon-setting {
.set-icon {
&:hover { &:hover {
background: $menuHover; background: $menuHover;
} }
@ -270,15 +279,6 @@
border-radius: 50%; border-radius: 50%;
} }
} }
.el-icon-setting {
height: 48px;
width: 40px;
padding: 12px;
display: flex;
cursor: pointer;
align-items: center;
}
} }
.el-menu { .el-menu {
@ -594,7 +594,7 @@ body[layout="vertical"] {
/* 登录名 */ /* 登录名 */
.el-dropdown-link, .el-dropdown-link,
/* 设置 */ /* 设置 */
.el-icon-setting {
.set-icon {
&:hover { &:hover {
background: #f6f6f6; background: #f6f6f6;
} }

2
src/views/error/403.vue

@ -11,7 +11,7 @@ defineOptions({
<noAccess /> <noAccess />
<div class="ml-12"> <div class="ml-12">
<p <p
class="font-medium text-4xl mb-4"
class="font-medium text-4xl mb-4 dark:text-white"
v-motion v-motion
:initial="{ :initial="{
opacity: 0, opacity: 0,

2
src/views/error/404.vue

@ -11,7 +11,7 @@ defineOptions({
<noExist /> <noExist />
<div class="ml-12"> <div class="ml-12">
<p <p
class="font-medium text-4xl mb-4"
class="font-medium text-4xl mb-4 dark:text-white"
v-motion v-motion
:initial="{ :initial="{
opacity: 0, opacity: 0,

2
src/views/error/500.vue

@ -11,7 +11,7 @@ defineOptions({
<noServer /> <noServer />
<div class="ml-12"> <div class="ml-12">
<p <p
class="font-medium text-4xl mb-4"
class="font-medium text-4xl mb-4 dark:text-white"
v-motion v-motion
:initial="{ :initial="{
opacity: 0, opacity: 0,

18
src/views/login/index.vue

@ -3,7 +3,6 @@ import { useI18n } from "vue-i18n";
import Motion from "./utils/motion"; import Motion from "./utils/motion";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { loginRules } from "./utils/rule"; import { loginRules } from "./utils/rule";
import { ref, reactive, toRaw } from "vue";
import { initRouter } from "/@/router/utils"; import { initRouter } from "/@/router/utils";
import { useNav } from "/@/layout/hooks/useNav"; import { useNav } from "/@/layout/hooks/useNav";
import { message } from "@pureadmin/components"; import { message } from "@pureadmin/components";
@ -13,6 +12,7 @@ import { $t, transformI18n } from "/@/plugins/i18n";
import { useLayout } from "/@/layout/hooks/useLayout"; import { useLayout } from "/@/layout/hooks/useLayout";
import { bg, avatar, illustration } from "./utils/static"; import { bg, avatar, illustration } from "./utils/static";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
import { useTranslationLang } from "/@/layout/hooks/useTranslationLang"; import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange"; import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
@ -64,6 +64,21 @@ const onLogin = async (formEl: FormInstance | undefined) => {
}; };
dataThemeChange(); 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> </script>
<template> <template>
@ -127,7 +142,6 @@ dataThemeChange();
:model="ruleForm" :model="ruleForm"
:rules="loginRules" :rules="loginRules"
size="large" size="large"
@keyup.enter="onLogin(ruleFormRef)"
> >
<Motion :delay="100"> <Motion :delay="100">
<el-form-item <el-form-item

Loading…
Cancel
Save