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

package/src/layout/components/lay-content/index.vue

@@ -1,136 +1,136 @@
-<!--
- * @Author: wei.li
- * @Date: 2021-12-23 17:33:20
- * @LastEditors: levi7754 levi7754@163.com
- * @LastEditTime: 2025-12-18 09:35:26
- * @Description: 主页面
--->
-<script setup lang="ts">
-import { h, computed, Transition, defineComponent } from 'vue';
-import { useGlobal } from '@utogether/utils';
-import { useI18n } from 'vue-i18n';
-import { useTags } from '../../hooks/useTag';
-import backTop from '../../../assets/svg/back_top.svg?component';
-import { usePermissionStoreHook } from '../../../store/modules/permission';
-
-const props = defineProps({
-  fixedHeader: Boolean
-});
-
-const { showModel } = useTags();
-const { t } = useI18n();
-const { $storage, $config } = useGlobal();
-
-const keepAlive = computed(() => {
-  return $config?.KeepAlive;
-});
-
-const transitions = computed(() => {
-  return route => {
-    return route.meta.transition;
-  };
-});
-
-const hideTabs = computed(() => {
-  return $storage?.configure.hideTabs;
-});
-const layout = computed(() => {
-  return $storage?.layout.layout === 'vertical';
-});
-
-const getSectionStyle = computed(() => {
-  // 在iframe中默认就是审批
-  return window.top === window.self
-    ? [
-        hideTabs.value && layout ? 'padding-top: 48px;' : '',
-        !hideTabs.value && layout ? (showModel.value == 'chrome' ? 'padding-top: 85px;' : 'padding-top: 81px;') : '',
-        hideTabs.value && !layout.value ? 'padding-top: 48px' : '',
-        !hideTabs.value && !layout.value
-          ? showModel.value == 'chrome'
-            ? 'padding-top: 85px;'
-            : 'padding-top: 81px;'
-          : '',
-        props.fixedHeader ? '' : 'padding-top: 0;'
-      ]
-    : 'padding-top: 0';
-});
-
-const transitionMain = defineComponent({
-  props: {
-    route: {
-      type: undefined,
-      required: true
-    }
-  },
-  render() {
-    const transitionName = transitions.value(this.route)?.name || 'fade-transform';
-    const enterTransition = transitions.value(this.route)?.enterTransition;
-    const leaveTransition = transitions.value(this.route)?.leaveTransition;
-    return h(
-      Transition,
-      {
-        name: enterTransition ? 'pure-classes-transition' : transitionName,
-        enterActiveClass: enterTransition ? `animate__animated ${enterTransition}` : undefined,
-        leaveActiveClass: leaveTransition ? `animate__animated ${leaveTransition}` : undefined,
-        mode: 'out-in',
-        appear: true
-      },
-      {
-        default: () => [this.$slots.default()]
-      }
-    );
-  }
-});
-</script>
-
-<template>
-  <section :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']" :style="getSectionStyle">
-    <router-view>
-      <template #default="{ Component, route }">
-        <el-scrollbar v-if="props.fixedHeader">
-          <template #default>
-            <div class="h-full">
-              <el-backtop :title="t('message.udp.backtop')" style="z-index: 100" target=".app-main .el-scrollbar__wrap">
-                <backTop />
-              </el-backtop>
-              <transitionMain :route="route">
-                <keep-alive v-if="keepAlive" :include="usePermissionStoreHook().cachePageList">
-                  <component :is="Component" :key="route.fullPath" class="main-content" />
-                </keep-alive>
-                <component :is="Component" v-else :key="route.fullPath" class="main-content" />
-              </transitionMain>
-            </div>
-          </template>
-        </el-scrollbar>
-        <div v-else>
-          <transitionMain :route="route">
-            <keep-alive v-if="keepAlive" :include="usePermissionStoreHook().cachePageList">
-              <component :is="Component" :key="route.fullPath" class="main-content" />
-            </keep-alive>
-            <component :is="Component" v-else :key="route.fullPath" class="main-content" />
-          </transitionMain>
-        </div>
-      </template>
-    </router-view>
-  </section>
-</template>
-
-<style scoped>
-.app-main {
-  position: relative;
-  width: 100%;
-  height: 100vh;
-  overflow-x: hidden;
-}
-
-.app-main-nofixed-header {
-  position: relative;
-  width: 100%;
-  min-height: 100vh;
-}
-
-.main-content {
-  /* padding: 6px; */
-  height: 100%;
-}
-</style>
+<!--
+ * @Author: wei.li
+ * @Date: 2021-12-23 17:33:20
+ * @LastEditors: levi7754 levi7754@163.com
+ * @LastEditTime: 2025-12-18 09:35:26
+ * @Description: 主页面
+-->
+<script setup lang="ts">
+import { h, computed, Transition, defineComponent } from 'vue';
+import { useGlobal } from '@utogether/utils';
+import { useI18n } from 'vue-i18n';
+import { useTags } from '../../hooks/useTag';
+import backTop from '../../../assets/svg/back_top.svg?component';
+import { usePermissionStoreHook } from '../../../store/modules/permission';
+
+const props = defineProps({
+  fixedHeader: Boolean
+});
+
+const { showModel } = useTags();
+const { t } = useI18n();
+const { $storage, $config } = useGlobal();
+
+const keepAlive = computed(() => {
+  return $config?.KeepAlive;
+});
+
+const transitions = computed(() => {
+  return route => {
+    return route.meta.transition;
+  };
+});
+
+const hideTabs = computed(() => {
+  return $storage?.configure.hideTabs;
+});
+const layout = computed(() => {
+  return $storage?.layout.layout === 'vertical';
+});
+
+const getSectionStyle = computed(() => {
+  // 在iframe中默认就是审批
+  return window.top === window.self
+    ? [
+        hideTabs.value && layout ? 'padding-top: 48px;' : '',
+        !hideTabs.value && layout ? (showModel.value == 'chrome' ? 'padding-top: 85px;' : 'padding-top: 81px;') : '',
+        hideTabs.value && !layout.value ? 'padding-top: 48px' : '',
+        !hideTabs.value && !layout.value
+          ? showModel.value == 'chrome'
+            ? 'padding-top: 85px;'
+            : 'padding-top: 81px;'
+          : '',
+        props.fixedHeader ? '' : 'padding-top: 0;'
+      ]
+    : 'padding-top: 0';
+});
+
+const transitionMain = defineComponent({
+  props: {
+    route: {
+      type: undefined,
+      required: true
+    }
+  },
+  render() {
+    const transitionName = transitions.value(this.route)?.name || 'fade-transform';
+    const enterTransition = transitions.value(this.route)?.enterTransition;
+    const leaveTransition = transitions.value(this.route)?.leaveTransition;
+    return h(
+      Transition,
+      {
+        name: enterTransition ? 'pure-classes-transition' : transitionName,
+        enterActiveClass: enterTransition ? `animate__animated ${enterTransition}` : undefined,
+        leaveActiveClass: leaveTransition ? `animate__animated ${leaveTransition}` : undefined,
+        mode: 'out-in',
+        appear: true
+      },
+      {
+        default: () => [this.$slots.default()]
+      }
+    );
+  }
+});
+</script>
+
+<template>
+  <section :class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']" :style="getSectionStyle">
+    <router-view>
+      <template #default="{ Component, route }">
+        <el-scrollbar v-if="props.fixedHeader">
+          <template #default>
+            <div class="h-full">
+              <el-backtop :title="t('message.udp.backtop')" style="z-index: 100" target=".app-main .el-scrollbar__wrap">
+                <backTop />
+              </el-backtop>
+              <transitionMain :route="route">
+                <keep-alive v-if="keepAlive" :include="usePermissionStoreHook().cachePageList">
+                  <component :is="Component" :key="route.fullPath" class="main-content" />
+                </keep-alive>
+                <component :is="Component" v-else :key="route.fullPath" class="main-content" />
+              </transitionMain>
+            </div>
+          </template>
+        </el-scrollbar>
+        <div v-else>
+          <transitionMain :route="route">
+            <keep-alive v-if="keepAlive" :include="usePermissionStoreHook().cachePageList">
+              <component :is="Component" :key="route.fullPath" class="main-content" />
+            </keep-alive>
+            <component :is="Component" v-else :key="route.fullPath" class="main-content" />
+          </transitionMain>
+        </div>
+      </template>
+    </router-view>
+  </section>
+</template>
+
+<style scoped>
+.app-main {
+  position: relative;
+  width: 100%;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.app-main-nofixed-header {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+}
+
+.main-content {
+  /* padding: 6px; */
+  height: 100%;
+}
+</style>

package/src/layout/components/lay-search/components/SearchModal.vue

@@ -1,189 +1,181 @@
-<template>
-  <el-dialog
-    v-model="show"
-    class="udp-search-dialog"
-    top="5vh"
-    append-to-body
-    :show-close="false"
-    :width="device === 'mobile' ? '80vw' : '40vw'"
-    :style="{
-      borderRadius: '6px'
-    }"
-    :title="$t('message.udp.menuQuery')"
-    :before-close="handleClose"
-    @opened="inputRef.focus()"
-    @closed="inputRef.blur()"
-  >
-    <el-input
-      ref="inputRef"
-      v-model="keyword"
-      :placeholder="$t('message.udp.menuQuery')"
-      size="large"
-      clearable
-      @input="handleSearch"
-    >
-      <template #prefix>
-        <IconifyIconOffline :icon="Search" class="text-primary w-[24px] h-[24px]" />
-      </template>
-    </el-input>
-    <div class="search-result-container">
-      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
-        <el-empty v-if="resultOptions.length === 0" :description="$t('message.emptyData')" />
-        <SearchResult
-          v-else
-          ref="resultRef"
-          v-model:value="activePath"
-          :options="resultOptions"
-          @click="handleEnter"
-        />
-      </el-scrollbar>
-    </div>
-    <template #footer>
-      <SearchFooter :total="resultOptions.length" />
-    </template>
-  </el-dialog>
-</template>
-<script lang="ts" setup>
-import { ref, watch, computed, nextTick, shallowRef } from 'vue';
-import { useDebounceFn, onKeyStroke } from '@vueuse/core';
-import { useRouter } from 'vue-router';
-import { clone } from 'xe-utils';
-import SearchResult from './SearchResult.vue';
-import SearchFooter from './SearchFooter.vue';
-import { useNav } from '../../../hooks/useNav';
-import { transformI18n } from '../../../../plugins/i18n';
-import { usePermissionStoreHook } from '../../../../store/modules/permission';
-import Search from '@iconify-icons/ri/search-line';
-
-interface Props {
-  /** 弹窗显隐 */
-  value: boolean;
-}
-
-interface Emits {
-  (e: 'update:value', val: boolean): void;
-}
-
-const { device } = useNav();
-const emit = defineEmits<Emits>();
-const props = withDefaults(defineProps<Props>(), {});
-const router = useRouter();
-
-const keyword = ref('');
-const activePath = ref('');
-const scrollbarRef = ref();
-const resultRef = ref();
-const inputRef = ref<HTMLInputElement | null>(null);
-const resultOptions = shallowRef([]);
-const handleSearch = useDebounceFn(search, 300);
-
-/** 菜单树形结构 */
-const menusData = computed(() => {
-  return clone(usePermissionStoreHook().wholeMenus);
-});
-
-const show = computed({
-  get() {
-    return props.value;
-  },
-  set(val: boolean) {
-    emit('update:value', val);
-  }
-});
-
-watch(show, async val => {
-  if (val) {
-    /** 自动聚焦 */
-    await nextTick();
-    inputRef.value?.focus();
-  }
-});
-
-/** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
-function flatTree(arr) {
-  const res = [];
-  function deep(arr) {
-    arr.forEach(item => {
-      res.push(item);
-      item.children && deep(item.children);
-    });
-  }
-  deep(arr);
-  return res;
-}
-
-/** 查询 */
-function search() {
-  const flatMenusData = flatTree(menusData.value);
-  resultOptions.value = flatMenusData.filter(
-    menu =>
-      keyword.value &&
-      transformI18n(menu.meta?.title)
-        .toLocaleLowerCase()
-        .includes(keyword.value.toLocaleLowerCase().trim())
-  );
-  if (resultOptions.value?.length > 0) {
-    activePath.value = resultOptions.value[0].path;
-  } else {
-    activePath.value = '';
-  }
-}
-
-function handleClose() {
-  show.value = false;
-  /** 延时处理防止用户看到某些操作 */
-  setTimeout(() => {
-    resultOptions.value = [];
-    keyword.value = '';
-  }, 200);
-}
-
-function scrollTo(index) {
-  const scrollTop = resultRef.value.handleScroll(index);
-  scrollbarRef.value.setScrollTop(scrollTop);
-}
-
-/** key up */
-function handleUp() {
-  const { length } = resultOptions.value;
-  if (length === 0) return;
-  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
-  if (index === 0) {
-    activePath.value = resultOptions.value[length - 1].path;
-    scrollTo(resultOptions.value.length - 1);
-  } else {
-    activePath.value = resultOptions.value[index - 1].path;
-    scrollTo(index - 1);
-  }
-}
-
-/** key down */
-function handleDown() {
-  const { length } = resultOptions.value;
-  if (length === 0) return;
-  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
-  if (index + 1 === length) {
-    activePath.value = resultOptions.value[0].path;
-  } else {
-    activePath.value = resultOptions.value[index + 1].path;
-  }
-}
-
-/** key enter */
-function handleEnter() {
-  const { length } = resultOptions.value;
-  if (length === 0 || activePath.value === '') return;
-  router.push(activePath.value);
-  handleClose();
-}
-
-onKeyStroke('Enter', handleEnter);
-onKeyStroke('ArrowUp', handleUp);
-onKeyStroke('ArrowDown', handleDown);
-</script>
-
-<style lang="scss" scoped>
-.search-result-container {
-  margin-top: 12px;
-}
-</style>
+<template>
+  <el-dialog
+    v-model="show"
+    class="udp-search-dialog"
+    top="5vh"
+    append-to-body
+    :show-close="false"
+    :width="device === 'mobile' ? '80vw' : '40vw'"
+    :style="{
+      borderRadius: '6px'
+    }"
+    :title="$t('message.udp.menuQuery')"
+    :before-close="handleClose"
+    @opened="inputRef.focus()"
+    @closed="inputRef.blur()"
+  >
+    <el-input
+      ref="inputRef"
+      v-model="keyword"
+      :placeholder="$t('message.udp.menuQuery')"
+      size="large"
+      clearable
+      @input="handleSearch"
+    >
+      <template #prefix>
+        <IconifyIconOffline :icon="Search" class="text-primary w-[24px] h-[24px]" />
+      </template>
+    </el-input>
+    <div class="search-result-container">
+      <el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
+        <el-empty v-if="resultOptions.length === 0" :description="$t('message.emptyData')" />
+        <SearchResult v-else ref="resultRef" v-model:value="activePath" :options="resultOptions" @click="handleEnter" />
+      </el-scrollbar>
+    </div>
+    <template #footer>
+      <SearchFooter :total="resultOptions.length" />
+    </template>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, watch, computed, nextTick, shallowRef } from 'vue';
+import { useDebounceFn, onKeyStroke } from '@vueuse/core';
+import { useRouter } from 'vue-router';
+import { clone } from 'xe-utils';
+import SearchResult from './SearchResult.vue';
+import SearchFooter from './SearchFooter.vue';
+import { useNav } from '../../../hooks/useNav';
+import { transformI18n } from '../../../../plugins/i18n';
+import { usePermissionStoreHook } from '../../../../store/modules/permission';
+import Search from '@iconify-icons/ri/search-line';
+
+interface Props {
+  /** 弹窗显隐 */
+  value: boolean;
+}
+
+interface Emits {
+  (e: 'update:value', val: boolean): void;
+}
+
+const { device } = useNav();
+const emit = defineEmits<Emits>();
+const props = withDefaults(defineProps<Props>(), {});
+const router = useRouter();
+
+const keyword = ref('');
+const activePath = ref('');
+const scrollbarRef = ref();
+const resultRef = ref();
+const inputRef = ref<HTMLInputElement | null>(null);
+const resultOptions = shallowRef([]);
+const handleSearch = useDebounceFn(search, 300);
+
+/** 菜单树形结构 */
+const menusData = computed(() => {
+  return clone(usePermissionStoreHook().wholeMenus);
+});
+
+const show = computed({
+  get() {
+    return props.value;
+  },
+  set(val: boolean) {
+    emit('update:value', val);
+  }
+});
+
+watch(show, async val => {
+  if (val) {
+    /** 自动聚焦 */
+    await nextTick();
+    inputRef.value?.focus();
+  }
+});
+
+/** 将菜单树形结构扁平化为一维数组，用于菜单查询 */
+function flatTree(arr) {
+  const res = [];
+  function deep(arr) {
+    arr.forEach(item => {
+      res.push(item);
+      item.children && deep(item.children);
+    });
+  }
+  deep(arr);
+  return res;
+}
+
+/** 查询 */
+function search() {
+  const flatMenusData = flatTree(menusData.value);
+  resultOptions.value = flatMenusData.filter(
+    menu =>
+      keyword.value &&
+      transformI18n(menu.meta?.title).toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim())
+  );
+  if (resultOptions.value?.length > 0) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = '';
+  }
+}
+
+function handleClose() {
+  show.value = false;
+  /** 延时处理防止用户看到某些操作 */
+  setTimeout(() => {
+    resultOptions.value = [];
+    keyword.value = '';
+  }, 200);
+}
+
+function scrollTo(index) {
+  const scrollTop = resultRef.value.handleScroll(index);
+  scrollbarRef.value.setScrollTop(scrollTop);
+}
+
+/** key up */
+function handleUp() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
+  if (index === 0) {
+    activePath.value = resultOptions.value[length - 1].path;
+    scrollTo(resultOptions.value.length - 1);
+  } else {
+    activePath.value = resultOptions.value[index - 1].path;
+    scrollTo(index - 1);
+  }
+}
+
+/** key down */
+function handleDown() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
+  if (index + 1 === length) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = resultOptions.value[index + 1].path;
+  }
+}
+
+/** key enter */
+function handleEnter() {
+  const { length } = resultOptions.value;
+  if (length === 0 || activePath.value === '') return;
+  router.push(activePath.value);
+  handleClose();
+}
+
+onKeyStroke('Enter', handleEnter);
+onKeyStroke('ArrowUp', handleUp);
+onKeyStroke('ArrowDown', handleDown);
+</script>
+
+<style lang="scss" scoped>
+.search-result-container {
+  margin-top: 12px;
+}
+</style>