ruoyi

src/components/Breadcrumb/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-breadcrumb class="app-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{ item.meta.title }}</span>
+        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script setup>
+const route = useRoute();
+const router = useRouter();
+const levelList = ref([])
+
+function getBreadcrumb() {
+  // only show routes with meta.title
+  let matched = route.matched.filter(item => item.meta && item.meta.title);
+  const first = matched[0]
+  // 判断是否为首页
+  if (!isDashboard(first)) {
+    matched = [{ path: '/index', meta: { title: '首页' } }].concat(matched)
+  }
+
+  levelList.value = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
+}
+function isDashboard(route) {
+  const name = route && route.name
+  if (!name) {
+    return false
+  }
+  return name.trim() === 'Index'
+}
+function handleLink(item) {
+  const { redirect, path } = item
+  if (redirect) {
+    router.push(redirect)
+    return
+  }
+  router.push(path)
+}
+
+watchEffect(() => {
+  // if you go to the redirect page, do not update the breadcrumbs
+  if (route.path.startsWith('/redirect/')) {
+    return
+  }
+  getBreadcrumb()
+})
+getBreadcrumb();
+</script>
+
+<style lang='scss' scoped>
+.app-breadcrumb.el-breadcrumb {
+  display: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/components/DictTag/index.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="values.includes(item.value)">
+        <span
+          v-if="item.elTagType == 'default' || item.elTagType == ''"
+          :key="item.value"
+          :index="index"
+          :class="item.elTagType"
+        >{{ item.label }}</span>
+        <el-tag
+          v-else
+          :disable-transitions="true"
+          :key="item.value + ''"
+          :index="index"
+          :type="item.elTagType === 'primary' ? '' : item.elTagType"
+          :class="item.elTagType"
+        >{{ item.label }}</el-tag>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  // 数据
+  options: {
+    type: Array,
+    default: null,
+  },
+  // 当前的值
+  value: [Number, String, Array],
+})
+
+const values = computed(() => {
+  if (props.value !== null && typeof props.value !== 'undefined') {
+    return Array.isArray(props.value) ? props.value : [String(props.value)];
+  } else {
+    return [];
+  }
+})
+
+</script>
+
+<style scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>

src/components/Hamburger/index.vue

@@ -0,0 +1,41 @@
+<template>
+  <div style="padding: 0 15px;" @click="toggleClick">
+    <svg
+      :class="{'is-active':isActive}"
+      class="hamburger"
+      viewBox="0 0 1024 1024"
+      xmlns="http://www.w3.org/2000/svg"
+      width="64"
+      height="64"
+    >
+      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  isActive: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits()
+const toggleClick = () => {
+  emit('toggleClick');
+}
+</script>
+
+<style scoped>
+.hamburger {
+  display: inline-block;
+  vertical-align: middle;
+  width: 20px;
+  height: 20px;
+}
+
+.hamburger.is-active {
+  transform: rotate(180deg);
+}
+</style>

src/components/HeaderSearch/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div :class="{ 'show': show }" class="header-search">
+    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <el-select
+      ref="headerSearchSelectRef"
+      v-model="search"
+      :remote-method="querySearch"
+      filterable
+      default-first-option
+      remote
+      placeholder="Search"
+      class="header-search-select"
+      @change="change"
+    >
+      <el-option v-for="option in options" :key="option.item.path" :value="option.item" :label="option.item.title.join(' > ')" />
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+import Fuse from 'fuse.js'
+import { getNormalPath } from '@/utils/ruoyi'
+import { isHttp } from '@/utils/validate'
+
+const search = ref('');
+const options = ref([]);
+const searchPool = ref([]);
+const show = ref(false);
+const fuse = ref(undefined);
+const headerSearchSelectRef = ref(null);
+const store = useStore();
+const router = useRouter();
+const routes = computed(() => store.getters.permission_routes);
+
+function click() {
+  show.value = !show.value
+  if (show.value) {
+    headerSearchSelectRef.value && headerSearchSelectRef.value.focus()
+  }
+};
+function close() {
+  headerSearchSelectRef.value && headerSearchSelectRef.value.blur()
+  options.value = []
+  show.value = false
+}
+function change(val) {
+  const path = val.path;
+  if (isHttp(path)) {
+    // http(s):// 路径新窗口打开
+    const pindex = path.indexOf("http");
+    window.open(path.substr(pindex, path.length), "_blank");
+  } else {
+    router.push(path)
+  }
+
+  search.value = ''
+  options.value = []
+  nextTick(() => {
+    show.value = false
+  })
+}
+function initFuse(list) {
+  fuse.value = new Fuse(list, {
+    shouldSort: true,
+    threshold: 0.4,
+    location: 0,
+    distance: 100,
+    maxPatternLength: 32,
+    minMatchCharLength: 1,
+    keys: [{
+      name: 'title',
+      weight: 0.7
+    }, {
+      name: 'path',
+      weight: 0.3
+    }]
+  })
+}
+// Filter out the routes that can be displayed in the sidebar
+// And generate the internationalized title
+function generateRoutes(routes, basePath = '', prefixTitle = []) {
+  let res = []
+
+  for (const r of routes) {
+    // skip hidden router
+    if (r.hidden) { continue }
+    const p = r.path.length > 0 && r.path[0] === '/' ? r.path : '/' + r.path;
+    const data = {
+      path: !isHttp(r.path) ? getNormalPath(basePath + p) : r.path,
+      title: [...prefixTitle]
+    }
+
+    if (r.meta && r.meta.title) {
+      data.title = [...data.title, r.meta.title]
+
+      if (r.redirect !== 'noRedirect') {
+        // only push the routes with title
+        // special case: need to exclude parent router without redirect
+        res.push(data)
+      }
+    }
+
+    // recursive child routes
+    if (r.children) {
+      const tempRoutes = generateRoutes(r.children, data.path, data.title)
+      if (tempRoutes.length >= 1) {
+        res = [...res, ...tempRoutes]
+      }
+    }
+  }
+  return res
+}
+function querySearch(query) {
+  if (query !== '') {
+    options.value = fuse.value.search(query)
+  } else {
+    options.value = []
+  }
+}
+
+onMounted(() => {
+  searchPool.value = generateRoutes(routes.value);
+})
+
+watchEffect(() => {
+  searchPool.value = generateRoutes(routes.value)
+})
+
+watch(show, (value) => {
+  if (value) {
+    document.body.addEventListener('click', close)
+  } else {
+    document.body.removeEventListener('click', close)
+  }
+})
+
+watch(searchPool, (list) => {
+  initFuse(list)
+})
+</script>
+
+<style lang='scss' scoped>
+.header-search {
+  font-size: 0 !important;
+
+  .search-icon {
+    cursor: pointer;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+
+  .header-search-select {
+    font-size: 18px;
+    transition: width 0.2s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+    vertical-align: middle;
+
+    :deep(.el-input__inner) {
+      border-radius: 0;
+      border: 0;
+      padding-left: 0;
+      padding-right: 0;
+      box-shadow: none !important;
+      border-bottom: 1px solid #d9d9d9;
+      vertical-align: middle;
+    }
+  }
+
+  &.show {
+    .header-search-select {
+      width: 210px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>

src/components/IconSelect/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="icon-body">
+    <el-input
+      v-model="iconName"
+      style="position: relative;"
+      clearable
+      placeholder="请输入图标名称"
+      @clear="filterIcons"
+      @input="filterIcons"
+    >
+      <template #suffix><i class="el-icon-search el-input__icon" /></template>
+    </el-input>
+    <div class="icon-list">
+      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
+        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
+        <span>{{ item }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import icons from './requireIcons'
+
+const iconName = ref('');
+const iconList = ref(icons);
+const emit = defineEmits(['selected']);
+
+function filterIcons() {
+  iconList.value = icons
+  if (iconName.value) {
+    iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
+  }
+}
+
+function selectedIcon(name) {
+  emit('selected', name)
+  document.body.click()
+}
+
+function reset() {
+  iconName.value = ''
+  iconList.value = icons
+}
+
+defineExpose({
+  reset
+})
+</script>
+
+<style lang='scss' scoped>
+.icon-body {
+  width: 100%;
+  padding: 10px;
+  .icon-list {
+    height: 200px;
+    overflow-y: scroll;
+    div {
+      height: 30px;
+      line-height: 30px;
+      margin-bottom: -5px;
+      cursor: pointer;
+      width: 33%;
+      float: left;
+    }
+    span {
+      display: inline-block;
+      vertical-align: -0.15em;
+      fill: currentColor;
+      overflow: hidden;
+    }
+  }
+}
+</style>

src/components/IconSelect/requireIcons.js

@@ -0,0 +1,8 @@
+let icons = []
+const modules = import.meta.glob('./../../assets/icons/svg/*.svg');
+for (const path in modules) {
+  const p = path.split('assets/icons/svg/')[1].split('.svg')[0];
+  icons.push(p);
+}
+
+export default icons

src/components/Pagination/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="{ 'hidden': hidden }" class="pagination-container">
+    <el-pagination
+      :background="background"
+      v-model:current-page="currentPage"
+      :page-size="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :pager-count="pagerCount"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { scrollTo } from '@/utils/scroll-to'
+
+const props = defineProps({
+  total: {
+    required: true,
+    type: Number
+  },
+  page: {
+    type: Number,
+    default: 1
+  },
+  limit: {
+    type: Number,
+    default: 20
+  },
+  pageSizes: {
+    type: Array,
+    default() {
+      return [10, 20, 30, 50]
+    }
+  },
+  // 移动端页码按钮的数量端默认值5
+  pagerCount: {
+    type: Number,
+    default: document.body.clientWidth < 992 ? 5 : 7
+  },
+  layout: {
+    type: String,
+    default: 'total, sizes, prev, pager, next, jumper'
+  },
+  background: {
+    type: Boolean,
+    default: true
+  },
+  autoScroll: {
+    type: Boolean,
+    default: true
+  },
+  hidden: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits();
+const currentPage = computed({
+  get() {
+    return props.page
+  },
+  set(val) {
+    emit('update:page', val)
+  }
+})
+const pageSize = computed({
+  get() {
+    return props.limit
+  },
+  set(val){
+    emit('update:limit', val)
+  }
+})
+function handleSizeChange(val) {
+  emit('pagination', { page: currentPage.value, limit: val })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+function handleCurrentChange(val) {
+  emit('pagination', { page: val, limit: pageSize.value })
+  if (props.autoScroll) {
+    scrollTo(0, 800)
+  }
+}
+
+</script>
+
+<style scoped>
+.pagination-container {
+  background: #fff;
+  padding: 32px 16px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>

src/components/ParentView/index.vue

@@ -0,0 +1,3 @@
+<template >
+  <router-view />
+</template>

src/components/RightToolbar/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="top-right-btn">
+    <el-row>
+      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
+        <el-button size="mini" circle icon="Search" @click="toggleSearch()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
+        <el-button size="mini" circle icon="Refresh" @click="refresh()" />
+      </el-tooltip>
+      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
+        <el-button size="mini" circle icon="Menu" @click="showColumn()" />
+      </el-tooltip>
+    </el-row>
+    <el-dialog :title="title" v-model="open" append-to-body>
+      <el-transfer
+        :titles="['显示', '隐藏']"
+        v-model="value"
+        :data="columns"
+        @change="dataChange"
+      ></el-transfer>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  showSearch: {
+    type: Boolean,
+    default: true,
+  },
+  columns: {
+    type: Array,
+  },
+})
+
+const emits = defineEmits(['update:showSearch', 'queryTable']);
+
+// 显隐数据
+const value = ref([]);
+// 弹出层标题
+const title = ref("显示/隐藏");
+// 是否显示弹出层
+const open = ref(false);
+
+// 搜索
+function toggleSearch() {
+  emits("update:showSearch", !props.showSearch);
+}
+
+// 刷新
+function refresh() {
+  emits("queryTable");
+}
+
+// 右侧列表元素变化
+function dataChange(data) {
+  for (let item in props.columns) {
+    const key = props.columns[item].key;
+    props.columns[item].visible = !data.includes(key);
+  }
+}
+
+// 打开显隐列dialog
+function showColumn() {
+  open.value = true;
+}
+
+// 显隐列初始默认隐藏列
+for (let item in props.columns) {
+  if (props.columns[item].visible === false) {
+    value.value.push(parseInt(item));
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+:deep(.el-transfer__button) {
+  border-radius: 50%;
+  padding: 12px;
+  display: block;
+  margin-left: 0px;
+}
+:deep(.el-transfer__button:first-child) {
+  margin-bottom: 10px;
+}
+
+.my-el-transfer {
+  text-align: center;
+}
+</style>

src/components/Ruoyi/Doc/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <svg-icon icon-class="question" @click="goto" />
+  </div>
+</template>
+
+<script setup>
+const url = ref('http://doc.ruoyi.vip/ruoyi-vue');
+
+function goto() {
+  window.open(url.value)
+}
+</script>

src/components/Ruoyi/Git/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <svg-icon icon-class="github" @click="goto" />
+  </div>
+</template>
+
+<script setup>
+const url = ref('https://gitee.com/y_project/RuoYi-Vue');
+
+function goto() {
+  window.open(url.value)
+}
+</script>

src/components/Screenfull/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="toggle" />
+  </div>
+</template>
+
+<script setup>
+import { useFullscreen } from '@vueuse/core'
+
+const { isFullscreen, enter, exit, toggle } = useFullscreen();
+</script>
+
+<style lang='scss' scoped>
+.screenfull-svg {
+  display: inline-block;
+  cursor: pointer;
+  fill: #5a5e66;
+  width: 20px;
+  height: 20px;
+  vertical-align: 10px;
+}
+</style>

src/components/SizeSelect/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <el-dropdown trigger="click" @command="handleSetSize">
+      <div class="size-icon--style">
+        <svg-icon class-name="size-icon" icon-class="size" />
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <el-dropdown-item v-for="item of sizeOptions" :key="item.value" :disabled="size === item.value" :command="item.value">
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup>
+import { ElMessage } from 'element-plus'
+
+const store = useStore();
+const size = computed(() => store.getters.size);
+const route = useRoute();
+const router = useRouter();
+const {proxy} = getCurrentInstance();
+const sizeOptions = ref([
+  { label: 'Large', value: 'large' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'Small', value: 'small' },
+  { label: 'Mini', value: 'mini' }
+])
+
+function refreshView() {
+  // In order to make the cached page re-rendered
+  store.dispatch('tagsView/delAllCachedViews', route)
+
+  const { fullPath } = route
+
+  nextTick(() => {
+    router.replace({
+      path: '/redirect' + fullPath
+    })
+  })
+}
+function handleSetSize(size) {
+  proxy.$ELEMENT.size = size;
+  store.dispatch('app/setSize', size)
+  refreshView()
+  ElMessage({
+    message: 'Switch Size Success',
+    type: 'success'
+  })
+};
+</script>
+
+<style lang='scss' scoped>
+.size-icon--style {
+  font-size: 18px;
+  line-height: 50px;
+  padding-right: 7px;
+}
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <svg :class="svgClass" aria-hidden="true">
+    <use :xlink:href="iconName" :fill="color" />
+  </svg>
+</template>
+
+<script>
+export default defineComponent({
+  props: {
+    iconClass: {
+      type: String,
+      required: true
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+  },
+  setup(props) {
+    return {
+      iconName: computed(() => `#icon-${props.iconClass}`),
+      svgClass: computed(() => {
+        if (props.className) {
+          return `svg-icon ${props.className}`
+        }
+        return 'svg-icon'
+      })
+    }
+  }
+})
+</script>
+
+<style scope lang="scss">
+.sub-el-icon,
+.nav-icon {
+  display: inline-block;
+  font-size: 15px;
+  margin-right: 12px;
+  position: relative;
+}
+
+.svg-icon {
+  width: 1em;
+  height: 1em;
+  position: relative;
+  fill: currentColor;
+  vertical-align: -2px;
+}
+</style>

src/components/SvgIcon/svgicon.js

@@ -0,0 +1,9 @@
+import * as components from "@element-plus/icons";
+export default {
+    install: (app) => {
+        for (const key in components) {
+            const componentConfig = components[key];
+            app.component(componentConfig.name, componentConfig);
+        }
+    },
+};

src/components/TopNav/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <el-menu
+    :default-active="activeMenu"
+    mode="horizontal"
+    @select="handleSelect"
+  >
+    <template v-for="(item, index) in topMenus">
+      <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
+        ><svg-icon :icon-class="item.meta.icon" />
+        {{ item.meta.title }}</el-menu-item
+      >
+    </template>
+
+    <!-- 顶部菜单超出数量折叠 -->
+    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
+      <template #title>更多菜单</template>
+      <template v-for="(item, index) in topMenus">
+        <el-menu-item
+          :index="item.path"
+          :key="index"
+          v-if="index >= visibleNumber"
+          ><svg-icon :icon-class="item.meta.icon" />
+          {{ item.meta.title }}</el-menu-item
+        >
+      </template>
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script setup>
+import { constantRoutes } from "@/router"
+import { isHttp } from '@/utils/validate'
+
+// 顶部栏初始数
+const visibleNumber = ref(null);
+// 是否为首次加载
+const isFrist = ref(null);
+// 当前激活菜单的 index
+const currentIndex = ref(null);
+
+const store = useStore();
+const route = useRoute();
+
+// 主题颜色
+const theme = computed(() => store.state.settings.theme);
+// 所有的路由信息
+const routers = computed(() => store.state.permission.topbarRouters);
+
+// 顶部显示菜单
+const topMenus = computed(() => {
+  let topMenus = [];
+  routers.value.map((menu) => {
+    if (menu.hidden !== true) {
+      // 兼容顶部栏一级菜单内部跳转
+      if (menu.path === "/") {
+          topMenus.push(menu.children[0]);
+      } else {
+          topMenus.push(menu);
+      }
+    }
+  })
+  return topMenus;
+})
+
+// 设置子路由
+const childrenMenus = computed(() => {
+  let childrenMenus = [];
+  routers.value.map((router) => {
+    for (let item in router.children) {
+      if (router.children[item].parentPath === undefined) {
+        if(router.path === "/") {
+          router.children[item].path = "/redirect/" + router.children[item].path;
+        } else {
+          if(!isHttp(router.children[item].path)) {
+            router.children[item].path = router.path + "/" + router.children[item].path;
+          }
+        }
+        router.children[item].parentPath = router.path;
+      }
+      childrenMenus.push(router.children[item]);
+    }
+  })
+  return constantRoutes.concat(childrenMenus);
+})
+
+// 默认激活的菜单
+const activeMenu = computed(() => {
+  const path = route.path;
+  let activePath = defaultRouter.value;
+  if (path !== undefined && path.lastIndexOf("/") > 0) {
+    const tmpPath = path.substring(1, path.length);
+    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
+  } else if ("/index" == path || "" == path) {
+    if (!isFrist.value) {
+      isFrist.value = true;
+    } else {
+      activePath = "index";
+    }
+  }
+  let routes = activeRoutes(activePath);
+  if (routes.length === 0) {
+    activePath = currentIndex.value || defaultRouter.value
+    activeRoutes(activePath);
+  }
+  return activePath;
+})
+// 默认激活的路由
+const defaultRouter = computed(() => {
+  let router;
+  Object.keys(routers.value).some((key) => {
+    if (!routers.value[key].hidden) {
+      router = routers.value[key].path;
+      return true;
+    }
+  });
+  return router;
+})
+function setVisibleNumber() {
+  const width = document.body.getBoundingClientRect().width / 3;
+  visibleNumber.value = parseInt(width / 85);
+}
+function handleSelect(key, keyPath) {
+  currentIndex.value = key;
+  if (isHttp(key)) {
+    // http(s):// 路径新窗口打开
+    window.open(key, "_blank");
+  } else if (key.indexOf("/redirect") !== -1) {
+    // /redirect 路径内部打开
+    router.push({ path: key.replace("/redirect", "") });
+  } else {
+    // 显示左侧联动菜单
+    activeRoutes(key);
+  }
+}
+function activeRoutes(key) {
+  let routes = [];
+  if (childrenMenus.value && childrenMenus.value.length > 0) {
+    childrenMenus.value.map((item) => {
+      if (key == item.parentPath || (key == "index" && "" == item.path)) {
+        routes.push(item);
+      }
+    });
+  }
+  if(routes.length > 0) {
+    store.commit("SET_SIDEBAR_ROUTERS", routes);
+  }
+  return routes;
+}
+
+onMounted(() => {
+  window.addEventListener('resize', setVisibleNumber)
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', setVisibleNumber)
+})
+
+onMounted(() => {
+  setVisibleNumber()
+})
+</script>
+
+<style lang="scss">
+.topmenu-container.el-menu--horizontal > .el-menu-item {
+  float: left;
+  height: 50px !important;
+  line-height: 50px !important;
+  color: #999093 !important;
+  padding: 0 5px !important;
+  margin: 0 10px !important;
+}
+
+.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, .el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
+  border-bottom: 2px solid #{'var(--theme)'} !important;
+  color: #303133;
+}
+
+/* sub-menu item */
+.topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title {
+  float: left;
+  height: 50px !important;
+  line-height: 50px !important;
+  color: #999093 !important;
+  padding: 0 5px !important;
+  margin: 0 10px !important;
+}
+</style>

src/components/TreeSelect/index.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="el-tree-select">
+    <el-select
+      style="width: 100%"
+      v-model="valueId"
+      ref="treeSelect"
+      :filterable="true"
+      :clearable="true"
+      @clear="clearHandle"
+      :filter-method="selectFilterData"
+      :placeholder="placeholder"
+    >
+      <el-option :value="valueId" :label="valueTitle">
+        <el-tree
+          id="tree-option"
+          ref="selectTree"
+          :accordion="accordion"
+          :data="options"
+          :props="objMap"
+          :node-key="objMap.value"
+          :expand-on-click-node="false"
+          :default-expanded-keys="defaultExpandedKey"
+          :filter-node-method="filterNode"
+          @node-click="handleNodeClick"
+        ></el-tree>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script setup>
+
+const { proxy } = getCurrentInstance();
+
+const props = defineProps({
+  /* 配置项 */
+  objMap: {
+    type: Object,
+    default: () => {
+      return {
+        value: 'id', // ID字段名
+        label: 'label', // 显示名称
+        children: 'children' // 子级字段名
+      }
+    }
+  },
+  /* 自动收起 */
+  accordion: {
+    type: Boolean,
+    default: () => {
+      return false
+    }
+  },
+  /**当前双向数据绑定的值 */
+  value: {
+    type: [String, Number],
+    default: ''
+  },
+  /**当前的数据 */
+  options: {
+    type: Array,
+    default: () => []
+  },
+  /**输入框内部的文字 */
+  placeholder: {
+    type: String,
+    default: ''
+  }
+})
+
+const emit = defineEmits(['update:value']);
+
+const valueId = computed({
+  get: () => props.value,
+  set: (val) => {
+    emit('update:value', val)
+  }
+});
+const valueTitle = ref('');
+const defaultExpandedKey = ref([]);
+
+function initHandle() {
+  nextTick(() => {
+    const selectedValue = valueId.value;
+    if(selectedValue !== null && typeof (selectedValue) !== "undefined"){
+      const node = proxy.$refs.selectTree.getNode(selectedValue)
+      if (node) {
+        valueTitle.value = node.data[props.objMap.label]
+        proxy.$refs.selectTree.setCurrentKey(selectedValue) // 设置默认选中
+        defaultExpandedKey.value = [selectedValue] // 设置默认展开
+      }
+    }
+  })
+}
+function handleNodeClick(node) {
+  valueTitle.value = node[props.objMap.label]
+  valueId.value = node[props.objMap.value];
+  defaultExpandedKey.value = [];
+  proxy.$refs.treeSelect.blur()
+  selectFilterData('')
+}
+function selectFilterData(val) {
+  proxy.$refs.selectTree.filter(val)
+}
+function filterNode(value, data) {
+  if (!value) return true
+  return data[props.objMap['label']].indexOf(value) !== -1
+}
+function clearHandle() {
+  valueTitle.value = ''
+  valueId.value = ''
+  defaultExpandedKey.value = [];
+  clearSelected()
+}
+function clearSelected() {
+  const allNode = document.querySelectorAll('#tree-option .el-tree-node')
+  allNode.forEach((element) => element.classList.remove('is-current'))
+}
+
+onMounted(() => {
+  initHandle()
+})
+
+watch(valueId, () => {
+  initHandle();
+})
+</script>
+
+<style lang='scss' scoped>
+@import "@/assets/styles/variables.module.scss";
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  padding: 0;
+  background-color: #fff;
+  height: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li  .el-tree .el-tree-node__content {
+  height: auto;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+:deep(.el-tree-node__content:hover),
+:deep(.el-tree-node__content:active),
+:deep(.is-current > div:first-child),
+:deep(.el-tree-node__content:focus) {
+  background-color: mix(#fff, $--color-primary, 90%);
+  color: $--color-primary;
+}
+</style>

src/components/iFrame/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-loading="loading" :style="'height:' + height">
+    <iframe 
+      :src="url" 
+      frameborder="no" 
+      style="width: 100%; height: 100%" 
+      scrolling="auto" />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  }
+})
+
+const height = ref(document.documentElement.clientHeight - 94.5 + "px;")
+const loading = ref(true)
+const url = computed(() => props.src)
+
+onMounted(() => {
+  setTimeout(() => {
+    loading.value = false;
+  }, 300);
+  window.onresize = function temp() {
+    height.value = document.documentElement.clientHeight - 94.5 + "px;";
+  };
+})
+</script>