@utogether/udp-core 2.0.0-beta.1 → 2.0.0-beta.4

package/src/layout/layoutView.vue

@@ -1,216 +1,216 @@
-<script setup lang="ts">
-import 'animate.css';
-import { ref, h, reactive, computed, onMounted, onBeforeMount, defineComponent } from 'vue';
-// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
-import '../components/ReIcon/src/offlineIcon';
-import { setType } from './types';
-import { useI18n } from 'vue-i18n';
-import { deviceDetection, useDark, useGlobal } from '@utogether/utils';
-import { useResizeObserver } from '@vueuse/core';
-import { useLayout } from './hooks/useLayout';
-import { useAppStoreHook } from '../store/modules/app';
-import { useSettingStoreHook } from '../store/modules/settings';
-import { useDataThemeChange } from './hooks/useDataThemeChange';
-
-import navbar from './components/lay-navbar/index.vue';
-import tag from './components/lay-tag/index.vue';
-import appMain from './components/lay-content/index.vue';
-import setting from './components/lay-setting/index.vue';
-import Vertical from './components/lay-sidebar/vertical.vue';
-import Horizontal from './components/lay-sidebar/horizontal.vue';
-import backTop from '../assets/svg/back_top.svg?component';
-
-const appWrapperRef = ref();
-const { t } = useI18n();
-const isMobile = deviceDetection();
-const settingHook = useSettingStoreHook();
-const { isDark } = useDark();
-
-const { $storage } = useGlobal();
-const { layout } = useLayout();
-
-const inIframe = window.self === window.top;
-
-const set: setType = reactive({
-  sidebar: computed(() => {
-    return useAppStoreHook().sidebar;
-  }),
-
-  device: computed(() => {
-    return useAppStoreHook().device;
-  }),
-
-  fixedHeader: computed(() => {
-    return settingHook.fixedHeader;
-  }),
-
-  classes: computed(() => {
-    return {
-      hideSidebar: !set.sidebar.opened,
-      openSidebar: set.sidebar.opened,
-      withoutAnimation: set.sidebar.withoutAnimation,
-      mobile: set.device === 'mobile'
-    };
-  }),
-
-  hideTabs: computed(() => {
-    return $storage?.configure.hideTabs;
-  })
-});
-
-function setTheme(layoutModel: string) {
-  window.document.body.setAttribute('layout', layoutModel);
-  $storage.layout = {
-    layout: `${layoutModel}`,
-    theme: $storage.layout?.theme,
-    darkMode: $storage.layout?.darkMode,
-    sidebarStatus: $storage.layout?.sidebarStatus,
-    epThemeColor: $storage.layout?.epThemeColor,
-    overallStyle: $storage.layout?.overallStyle
-  };
-}
-
-function toggle(device: string, bool: boolean) {
-  useAppStoreHook().toggleDevice(device);
-  useAppStoreHook().toggleSideBar(bool, 'resize');
-}
-
-// 判断是否可自动关闭菜单栏
-let isAutoCloseSidebar = true;
-
-// 监听容器
-useResizeObserver(appWrapperRef, entries => {
-  if (isMobile) return;
-  const entry = entries[0];
-  const { width } = entry.contentRect;
-  width <= 670 ? setTheme('vertical') : setTheme(useAppStoreHook().layout);
-  /** width app-wrapper类容器宽度
-   * 0 < width <= 760 隐藏侧边栏
-   * 760 < width <= 990 折叠侧边栏
-   * width > 990 展开侧边栏
-   */
-  if (width > 0 && width <= 760) {
-    toggle('mobile', false);
-    isAutoCloseSidebar = true;
-  } else if (width > 760 && width <= 990) {
-    if (isAutoCloseSidebar) {
-      toggle('desktop', false);
-      isAutoCloseSidebar = false;
-    }
-  } else if (width > 990 && !set.sidebar.isClickCollapse) {
-    toggle('desktop', true);
-    isAutoCloseSidebar = true;
-  } else {
-    toggle('desktop', false);
-    isAutoCloseSidebar = false;
-  }
-});
-
-onMounted(() => {
-  if (isMobile) {
-    toggle('mobile', false);
-  }
-});
-
-onBeforeMount(() => {
-  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
-});
-
-const layoutHeader = defineComponent({
-  render() {
-    return h(
-      'div',
-      {
-        class: { 'fixed-header': set.fixedHeader },
-        style: [
-          set.hideTabs && layout.value.includes('horizontal')
-            ? isDark.value
-              ? 'box-shadow: 0 1px 4px #0d0d0d'
-              : 'box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)'
-            : ''
-        ]
-      },
-      {
-        default: () => [
-          !settingHook.hiddenSideBar && (layout.value.includes('vertical') || layout.value.includes('mix'))
-            ? h(navbar)
-            : null,
-          !settingHook.hiddenSideBar && layout.value.includes('horizontal') ? h(Horizontal) : null,
-          h(tag)
-        ]
-      }
-    );
-  }
-});
-</script>
-
-<template>
-  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
-    <div
-      v-show="set.device === 'mobile' && set.sidebar.opened && layout.includes('vertical')"
-      class="app-mask"
-      @click="useAppStoreHook().toggleSideBar()"
-    />
-    <Vertical
-      v-show="inIframe && !settingHook.hiddenSideBar && (layout.includes('vertical') || layout.includes('mix'))"
-    />
-    <div :class="['main-container', settingHook.hiddenSideBar ? 'main-hidden' : '']">
-      <div v-if="set.fixedHeader">
-        <layout-header v-if="inIframe" />
-        <!-- 主体内容 -->
-        <app-main :fixed-header="set.fixedHeader" />
-      </div>
-      <el-scrollbar v-else>
-        <template #default>
-          <div class="h-full">
-            <el-backtop
-              :title="t('message.udp.backtop')"
-              style="z-index: 100"
-              target=".main-container .el-scrollbar__wrap"
-            >
-              <backTop />
-            </el-backtop>
-            <layout-header v-if="inIframe" />
-            <!-- 主体内容 -->
-            <app-main :fixed-header="set.fixedHeader" />
-          </div>
-        </template>
-      </el-scrollbar>
-    </div>
-    <!-- 系统设置 -->
-    <setting />
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.app-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  &::after {
-    clear: both;
-    display: table;
-    content: '';
-  }
-
-  &.mobile.openSidebar {
-    position: fixed;
-    top: 0;
-  }
-}
-
-.app-mask {
-  position: absolute;
-  top: 0;
-  z-index: 999;
-  width: 100%;
-  height: 100%;
-  background: #000;
-  opacity: 0.3;
-}
-
-.re-screen {
-  margin-top: 12px;
-}
-</style>
+<script setup lang="ts">
+import 'animate.css';
+import { ref, h, reactive, computed, onMounted, onBeforeMount, defineComponent } from 'vue';
+// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
+import '../components/ReIcon/src/offlineIcon';
+import { setType } from './types';
+import { useI18n } from 'vue-i18n';
+import { deviceDetection, useDark, useGlobal } from '@utogether/utils';
+import { useResizeObserver } from '@vueuse/core';
+import { useLayout } from './hooks/useLayout';
+import { useAppStoreHook } from '../store/modules/app';
+import { useSettingStoreHook } from '../store/modules/settings';
+import { useDataThemeChange } from './hooks/useDataThemeChange';
+
+import navbar from './components/lay-navbar/index.vue';
+import tag from './components/lay-tag/index.vue';
+import appMain from './components/lay-content/index.vue';
+import setting from './components/lay-setting/index.vue';
+import Vertical from './components/lay-sidebar/vertical.vue';
+import Horizontal from './components/lay-sidebar/horizontal.vue';
+import backTop from '../assets/svg/back_top.svg?component';
+
+const appWrapperRef = ref();
+const { t } = useI18n();
+const isMobile = deviceDetection();
+const settingHook = useSettingStoreHook();
+const { isDark } = useDark();
+
+const { $storage } = useGlobal();
+const { layout } = useLayout();
+
+const inIframe = window.self === window.top;
+
+const set: setType = reactive({
+  sidebar: computed(() => {
+    return useAppStoreHook().sidebar;
+  }),
+
+  device: computed(() => {
+    return useAppStoreHook().device;
+  }),
+
+  fixedHeader: computed(() => {
+    return settingHook.fixedHeader;
+  }),
+
+  classes: computed(() => {
+    return {
+      hideSidebar: !set.sidebar.opened,
+      openSidebar: set.sidebar.opened,
+      withoutAnimation: set.sidebar.withoutAnimation,
+      mobile: set.device === 'mobile'
+    };
+  }),
+
+  hideTabs: computed(() => {
+    return $storage?.configure.hideTabs;
+  })
+});
+
+function setTheme(layoutModel: string) {
+  window.document.body.setAttribute('layout', layoutModel);
+  $storage.layout = {
+    layout: `${layoutModel}`,
+    theme: $storage.layout?.theme,
+    darkMode: $storage.layout?.darkMode,
+    sidebarStatus: $storage.layout?.sidebarStatus,
+    epThemeColor: $storage.layout?.epThemeColor,
+    overallStyle: $storage.layout?.overallStyle
+  };
+}
+
+function toggle(device: string, bool: boolean) {
+  useAppStoreHook().toggleDevice(device);
+  useAppStoreHook().toggleSideBar(bool, 'resize');
+}
+
+// 判断是否可自动关闭菜单栏
+let isAutoCloseSidebar = true;
+
+// 监听容器
+useResizeObserver(appWrapperRef, entries => {
+  if (isMobile) return;
+  const entry = entries[0];
+  const { width } = entry.contentRect;
+  width <= 670 ? setTheme('vertical') : setTheme(useAppStoreHook().layout);
+  /** width app-wrapper类容器宽度
+   * 0 < width <= 760 隐藏侧边栏
+   * 760 < width <= 990 折叠侧边栏
+   * width > 990 展开侧边栏
+   */
+  if (width > 0 && width <= 760) {
+    toggle('mobile', false);
+    isAutoCloseSidebar = true;
+  } else if (width > 760 && width <= 990) {
+    if (isAutoCloseSidebar) {
+      toggle('desktop', false);
+      isAutoCloseSidebar = false;
+    }
+  } else if (width > 990 && !set.sidebar.isClickCollapse) {
+    toggle('desktop', true);
+    isAutoCloseSidebar = true;
+  } else {
+    toggle('desktop', false);
+    isAutoCloseSidebar = false;
+  }
+});
+
+onMounted(() => {
+  if (isMobile) {
+    toggle('mobile', false);
+  }
+});
+
+onBeforeMount(() => {
+  useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
+});
+
+const layoutHeader = defineComponent({
+  render() {
+    return h(
+      'div',
+      {
+        class: { 'fixed-header': set.fixedHeader },
+        style: [
+          set.hideTabs && layout.value.includes('horizontal')
+            ? isDark.value
+              ? 'box-shadow: 0 1px 4px #0d0d0d'
+              : 'box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)'
+            : ''
+        ]
+      },
+      {
+        default: () => [
+          !settingHook.hiddenSideBar && (layout.value.includes('vertical') || layout.value.includes('mix'))
+            ? h(navbar)
+            : null,
+          !settingHook.hiddenSideBar && layout.value.includes('horizontal') ? h(Horizontal) : null,
+          h(tag)
+        ]
+      }
+    );
+  }
+});
+</script>
+
+<template>
+  <div ref="appWrapperRef" :class="['app-wrapper', set.classes]">
+    <div
+      v-show="set.device === 'mobile' && set.sidebar.opened && layout.includes('vertical')"
+      class="app-mask"
+      @click="useAppStoreHook().toggleSideBar()"
+    />
+    <Vertical
+      v-show="inIframe && !settingHook.hiddenSideBar && (layout.includes('vertical') || layout.includes('mix'))"
+    />
+    <div :class="['main-container', settingHook.hiddenSideBar ? 'main-hidden' : '']">
+      <div v-if="set.fixedHeader">
+        <layout-header v-if="inIframe" />
+        <!-- 主体内容 -->
+        <app-main :fixed-header="set.fixedHeader" />
+      </div>
+      <el-scrollbar v-else>
+        <template #default>
+          <div class="h-full">
+            <el-backtop
+              :title="t('message.udp.backtop')"
+              style="z-index: 100"
+              target=".main-container .el-scrollbar__wrap"
+            >
+              <backTop />
+            </el-backtop>
+            <layout-header v-if="inIframe" />
+            <!-- 主体内容 -->
+            <app-main :fixed-header="set.fixedHeader" />
+          </div>
+        </template>
+      </el-scrollbar>
+    </div>
+    <!-- 系统设置 -->
+    <setting />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.app-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  &::after {
+    clear: both;
+    display: table;
+    content: '';
+  }
+
+  &.mobile.openSidebar {
+    position: fixed;
+    top: 0;
+  }
+}
+
+.app-mask {
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0.3;
+}
+
+.re-screen {
+  margin-top: 12px;
+}
+</style>

package/src/layout/types.ts

@@ -1,93 +1,93 @@
-/*
- * @Author: wei.li
- * @Date: 2021-11-17 16:02:30
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-10-19 12:07:59
- * @Description: file content
- */
-
-import type { IconifyIcon } from '@iconify/vue';
-
-export const routerArrays: Array<RouteConfigs> = [
-  {
-    path: '/welcome',
-    name: 'UdpWelcome',
-    meta: {
-      title: 'message.udp.home',
-      icon: 'home-filled'
-    }
-  }
-];
-
-export type routeMetaType = {
-  title?: string;
-  icon?: string;
-  showLink?: boolean;
-  savedPosition?: boolean;
-  authority?: Array<string>;
-};
-
-export type RouteConfigs = {
-  path?: string;
-  query?: object;
-  params?: object;
-  meta?: routeMetaType;
-  children?: RouteConfigs[];
-  name?: string;
-};
-
-export type multiTagsType = {
-  tags: Array<RouteConfigs>;
-};
-
-export type tagsViewsType = {
-  icon: string | IconifyIcon;
-  text: string;
-  divided: boolean;
-  disabled: boolean;
-  show: boolean;
-};
-
-export interface setType {
-  sidebar: {
-    opened: boolean;
-    withoutAnimation: boolean;
-    isClickCollapse: boolean;
-  };
-  device: string;
-  fixedHeader: boolean;
-  classes: {
-    hideSidebar: boolean;
-    openSidebar: boolean;
-    withoutAnimation: boolean;
-    mobile: boolean;
-  };
-  hideTabs: boolean;
-}
-
-export type childrenType = {
-  path?: string;
-  noShowingChildren?: boolean;
-  children?: childrenType[];
-  value: unknown;
-  meta?: {
-    icon?: string;
-    title?: string;
-    showParent?: boolean;
-    extraIcon?: string;
-  };
-  showTooltip?: boolean;
-  parentId?: number;
-  pathList?: number[];
-};
-
-export type themeColorsType = {
-  color: string;
-  themeColor: string;
-};
-
-export interface scrollbarDomType extends HTMLElement {
-  wrap?: {
-    offsetWidth: number;
-  };
-}
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-10-19 12:07:59
+ * @Description: file content
+ */
+
+import type { IconifyIcon } from '@iconify/vue';
+
+export const routerArrays: Array<RouteConfigs> = [
+  {
+    path: '/welcome',
+    name: 'UdpWelcome',
+    meta: {
+      title: 'message.udp.home',
+      icon: 'home-filled'
+    }
+  }
+];
+
+export type routeMetaType = {
+  title?: string;
+  icon?: string;
+  showLink?: boolean;
+  savedPosition?: boolean;
+  authority?: Array<string>;
+};
+
+export type RouteConfigs = {
+  path?: string;
+  query?: object;
+  params?: object;
+  meta?: routeMetaType;
+  children?: RouteConfigs[];
+  name?: string;
+};
+
+export type multiTagsType = {
+  tags: Array<RouteConfigs>;
+};
+
+export type tagsViewsType = {
+  icon: string | IconifyIcon;
+  text: string;
+  divided: boolean;
+  disabled: boolean;
+  show: boolean;
+};
+
+export interface setType {
+  sidebar: {
+    opened: boolean;
+    withoutAnimation: boolean;
+    isClickCollapse: boolean;
+  };
+  device: string;
+  fixedHeader: boolean;
+  classes: {
+    hideSidebar: boolean;
+    openSidebar: boolean;
+    withoutAnimation: boolean;
+    mobile: boolean;
+  };
+  hideTabs: boolean;
+}
+
+export type childrenType = {
+  path?: string;
+  noShowingChildren?: boolean;
+  children?: childrenType[];
+  value: unknown;
+  meta?: {
+    icon?: string;
+    title?: string;
+    showParent?: boolean;
+    extraIcon?: string;
+  };
+  showTooltip?: boolean;
+  parentId?: number;
+  pathList?: number[];
+};
+
+export type themeColorsType = {
+  color: string;
+  themeColor: string;
+};
+
+export interface scrollbarDomType extends HTMLElement {
+  wrap?: {
+    offsetWidth: number;
+  };
+}