@utogether/udp-core 1.0.1-beta.2 → 1.0.1-beta.3

package/src/layout/layoutView.vue

@@ -1,215 +1,215 @@
-<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')" 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')" 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/main.ts

@@ -1,109 +1,110 @@
-/*
- * @Author: wei.li
- * @Date: 2022-10-18 18:13:54
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-04-29 15:35:32
- * @Description: file content
- */
-import { createApp, type Directive } from 'vue';
-import App from './App.vue';
-import router from './router';
-import { setViews } from './router';
-import { setupStore } from './store';
-import { setConfig, setSystemEnv } from './config';
-import { useI18n } from '../src/plugins/i18n';
-import { setTableConfig } from '../src/plugins/vxe-table';
-import { injectResponsiveStorage } from './utils/storage';
-import hasAuthority from './utils/authority';
-import { getServiceApi, getBaseURL, setRouter } from './api';
-
-import 'nprogress/nprogress.css';
-// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
-import './style/tailwind.css';
-// // 引入重置样式
-import './style/reset.scss';
-// 导入公共样式
-import './style/index.scss';
-
-import 'viewerjs/dist/viewer.css';
-
-import VueViewer from 'v-viewer';
-
-// import SuTable from './components/SuTable/SuTable.vue';
-
-// import {
-//   UtButton,
-// UGrid,
-//   UtDivider,
-// UtModalForm2,
-// FormUpload2
-//   UtForm,
-//   UtModalGrid,
-//   UtContent,
-//   UtCountdown,
-//   UtIconSelect,
-//   UtCalendar
-// uAttachment
-// } from './components/udp';
-
-const app = createApp(App);
-
-// 全局注册`@iconify/vue`图标库
-import { IconifyIconOffline, FontIcon } from './components/ReIcon';
-// 全局注册`vue-tippy`
-import 'tippy.js/dist/tippy.css';
-import 'tippy.js/animations/perspective.css';
-import VueTippy from 'vue-tippy';
-
-app.use(VueTippy, {
-  defaultProps: { animation: 'perspective' }
-});
-
-// 自定义指令
-import * as directives from './directives';
-
-const setGlobal = app => {
-  app.config.globalProperties.$hasAuthority = hasAuthority;
-  app.config.globalProperties.$serviceApi = getServiceApi();
-  app.config.globalProperties.$url = getBaseURL();
-};
-
-const setGlobalDirective = app => {
-  Object.keys(directives).forEach(key => {
-    app.directive(key, (directives as { [key: string]: Directive })[key]);
-  });
-};
-
-const init = ({ config, lang, views, env, tableConfig }) => {
-  app.use(router);
-  setRouter(router);
-  setConfig(app, config);
-  setSystemEnv(env);
-  setViews(views);
-  setTableConfig(tableConfig);
-  return new Promise(resolve => {
-    useI18n(app, lang);
-    app.component('IconifyIconOffline', IconifyIconOffline);
-    app.component('FontIcon', FontIcon);
-    // app.component('uAttachment', uAttachment).component('UGrid', UGrid);
-    //   .component('UtDivider', UtDivider)
-    // .component('UtModalForm2', UtModalForm2)
-    // app.component('FormUpload2', FormUpload2);
-    //   .component('UtForm', UtForm)
-    //   .component('UtContent', UtContent)
-    //   .component('UtIconSelect', UtIconSelect)
-    //   .component('UtCountdown', UtCountdown)
-    //   .component('UtCalendar', UtCalendar)
-    //   .component('UtModalGrid', UtModalGrid);
-    app.use(VueViewer, { defaultOptions: { zIndex: 9999 } });
-    setGlobal(app);
-    setGlobalDirective(app);
-    // 全局组件
-    setupStore(app);
-    injectResponsiveStorage(app, config);
-    const result = { app, router };
-    resolve(result);
-  });
-};
-
-export default init;
+/*
+ * @Author: wei.li
+ * @Date: 2022-10-18 18:13:54
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-07-21 11:28:01
+ * @Description: file content
+ */
+import { createApp, type Directive } from 'vue';
+import App from './App.vue';
+import router from './router';
+import { setViews } from './router';
+import { setupStore } from './store';
+import { setConfig, setSystemEnv } from './config';
+import { useI18n } from '../src/plugins/i18n';
+import { setTableConfig } from '../src/plugins/vxe-table';
+import { injectResponsiveStorage } from './utils/storage';
+import hasAuthority from './utils/authority';
+import { getServiceApi, getBaseURL, setRouter } from './api';
+
+import 'nprogress/nprogress.css';
+// 一定要在main.ts中导入tailwind.css，防止vite每次hmr都会请求src/style/index.scss整体css文件导致热更新慢的问题
+import './style/tailwind.css';
+// // 引入重置样式
+import './style/reset.scss';
+// 导入公共样式
+import './style/index.scss';
+
+import 'viewerjs/dist/viewer.css';
+
+import VueViewer from 'v-viewer';
+
+// import SuTable from './components/SuTable/SuTable.vue';
+
+// import {
+//   UtButton,
+// utLov2,
+// UGrid,
+//   UtDivider,
+// UtModalForm2,
+// FormUpload2
+//   UtForm,
+// UtGrid2
+//   UtContent,
+//   UtCountdown,
+//   UtIconSelect,
+//   UtCalendar
+// uAttachment
+// } from './components/udp';
+
+const app = createApp(App);
+
+// 全局注册`@iconify/vue`图标库
+import { IconifyIconOffline, FontIcon } from './components/ReIcon';
+// 全局注册`vue-tippy`
+import 'tippy.js/dist/tippy.css';
+import 'tippy.js/animations/perspective.css';
+import VueTippy from 'vue-tippy';
+
+app.use(VueTippy, {
+  defaultProps: { animation: 'perspective' }
+});
+
+// 自定义指令
+import * as directives from './directives';
+
+const setGlobal = app => {
+  app.config.globalProperties.$hasAuthority = hasAuthority;
+  app.config.globalProperties.$serviceApi = getServiceApi();
+  app.config.globalProperties.$url = getBaseURL();
+};
+
+const setGlobalDirective = app => {
+  Object.keys(directives).forEach(key => {
+    app.directive(key, (directives as { [key: string]: Directive })[key]);
+  });
+};
+
+const init = ({ config, lang, views, env, tableConfig }) => {
+  app.use(router);
+  setRouter(router);
+  setConfig(app, config);
+  setSystemEnv(env);
+  setViews(views);
+  setTableConfig(tableConfig);
+  return new Promise(resolve => {
+    useI18n(app, lang);
+    app.component('IconifyIconOffline', IconifyIconOffline);
+    app.component('FontIcon', FontIcon);
+    // app.component('uAttachment', uAttachment).component('UGrid', UGrid);
+    //   .component('UtDivider', UtDivider)
+    // .component('UtModalForm2', UtModalForm2)
+    // app.component('UtGrid2', UtGrid2);
+    //   .component('UtForm', UtForm)
+    //   .component('UtContent', UtContent)
+    //   .component('UtIconSelect', UtIconSelect)
+    //   .component('UtCountdown', UtCountdown)
+    //   .component('UtCalendar', UtCalendar)
+    //   .component('UtModalGrid', UtModalGrid);
+    app.use(VueViewer, { defaultOptions: { zIndex: 9999 } });
+    setGlobal(app);
+    setGlobalDirective(app);
+    // 全局组件
+    setupStore(app);
+    injectResponsiveStorage(app, config);
+    const result = { app, router };
+    resolve(result);
+  });
+};
+
+export default init;