st52
/
xwork-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

chore: 同步完整版

i18n
xiaoxian521 2 years ago
parent
43069ac127
commit
24db509381
29 changed files with 1020 additions and 1100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 5
      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. 120
      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
View File

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

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

29
package.json
View File

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

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

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

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

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

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

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

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

5
src/directives/elResizeDetector/index.ts
View File

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

15
src/layout/components/navbar.vue
View File

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

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

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

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

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

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

120
src/layout/components/tag/index.vue
View File

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

45
src/layout/hooks/useTag.ts
View File

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save