@utogether/udp-core 1.0.0

package/src/layout/layoutView.vue

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

package/src/layout/redirect.vue

@@ -0,0 +1,30 @@
+<!--
+ * @Author: wei.li
+ * @Date: 2022-08-29 17:05:58
+ * @LastEditors: wei.li
+ * @LastEditTime: 2022-09-15 10:43:01
+ * @Description: file content
+-->
+<script lang="ts">
+export default { name: 'Redirect' };
+</script>
+<script setup lang="ts">
+import { unref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const { currentRoute, replace } = useRouter();
+
+const { params, query } = unref(currentRoute);
+const { path } = params;
+
+const _path = Array.isArray(path) ? path.join('/') : path;
+
+replace({
+  path: '/' + _path,
+  query
+});
+</script>
+
+<template>
+  <div />
+</template>

package/src/layout/routerView/parent.vue

@@ -0,0 +1,23 @@
+<!--
+ * @Author: levi7754 levi7754@163.com
+ * @Date: 2023-06-19 09:14:18
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2024-04-14 20:30:33
+ * @FilePath: /udp-front/packages/udp-core/src/layout/routerView/parent.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <router-view>
+    <template #default="{ Component, route }">
+      <transition appear name="fade-transform" mode="out-in">
+        <component :is="Component" :key="route.fullPath" />
+      </transition>
+    </template>
+  </router-view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'layoutParentView'
+};
+</script>

package/src/layout/types.ts

@@ -0,0 +1,92 @@
+/*
+ * @Author: wei.li
+ * @Date: 2021-11-17 16:02:30
+ * @LastEditors: wei.li
+ * @LastEditTime: 2024-06-27 13:51:19
+ * @Description: file content
+ */
+
+import type { IconifyIcon } from '@iconify/vue';
+
+export const routerArrays: Array<RouteConfigs> = [
+  {
+    path: '/welcome',
+    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;
+  };
+}

package/src/main.ts

@@ -0,0 +1,108 @@
+/*
+ * @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,
+//   UtModalForm,
+//   UtForm,
+//   UtModalGrid,
+//   UtContent,
+//   UtCountdown,
+//   UtIconSelect,
+//   UtCalendar
+// uAttachment
+// } from './../src/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]);
+  });
+};
+console.log('ucore--process', process.env);
+
+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('UtModalForm', UtModalForm)
+    //   .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;

package/src/plugins/echarts/index.ts

@@ -0,0 +1,58 @@
+/*
+ * @Author: wei.li
+ * @Date: 2023-03-27 09:21:25
+ * @LastEditors: wei.li
+ * @LastEditTime: 2023-03-29 16:48:57
+ * @Description: file content
+ */
+import type { App } from 'vue';
+import * as echarts from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { PieChart, BarChart, LineChart, GaugeChart } from 'echarts/charts';
+
+import {
+  GridComponent,
+  TitleComponent,
+  LegendComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  VisualMapComponent
+} from 'echarts/components';
+
+const { use } = echarts;
+// const { use, registerTheme } = echarts;
+
+use([
+  PieChart,
+  BarChart,
+  LineChart,
+  GaugeChart,
+  CanvasRenderer,
+  GridComponent,
+  TitleComponent,
+  LegendComponent,
+  GraphicComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  DataZoomComponent,
+  VisualMapComponent
+]);
+
+/**
+ * @description 自定义主题
+ * @see {@link https://echarts.apache.org/zh/download-theme.html}
+ */
+// import theme from "./theme.json";
+// registerTheme("ovilia-green", theme);
+
+/**
+ * @description 按需引入echarts
+ * @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
+ */
+export function useEcharts(app: App) {
+  app.config.globalProperties.$echarts = echarts;
+}
+
+export default echarts;