SoybeanAdmin修改

1、菜单排序修改

目录：store->modules->route->shared.ts

修改函数：

/**
 * sort route by order
 * 如果后端采用的是DESC排序，前端将prev和next值调换，正如下面修改
 * @param route route
 */
function sortRouteByOrder(route: ElegantConstRoute) {
  if (route.children?.length) {
    route.children.sort(
      (next, prev) =>
        (Number(prev.meta?.order) || 0) - (Number(next.meta?.order) || 0),
    );
    route.children.forEach(sortRouteByOrder);
  }

  return route;
}

/**
 * sort routes by order
 * 降序
 * @param routes routes
 */
export function sortRoutesByOrder(routes: ElegantConstRoute[]) {
  routes.sort(
    (next, prev) =>
      (Number(prev.meta?.order) || 0) - (Number(next.meta?.order) || 0),
  );
  routes.forEach(sortRouteByOrder);

  return routes;
}

 

 

二、使用阿里icon

目录：components->custom -> svg-icon.vue

<script setup lang="ts">
import { computed, useAttrs } from 'vue';
import { Icon } from '@iconify/vue';
/*修改过的，加入了引入IconFont组件，阿里图标  */
defineOptions({ name: 'SvgIcon', inheritAttrs: false });

interface Props {
  /** Iconify icon name */
  icon?: string;
  /** Local svg icon name */
  localIcon?: string;
}

const props = defineProps<Props>();

const attrs = useAttrs();

const bindAttrs = computed<{ class: string; style: string }>(() => ({
  class: (attrs.class as string) || '',
  style: (attrs.style as string) || ''
}));

const symbolId = computed(() => {
  const { VITE_ICON_LOCAL_PREFIX: prefix } = import.meta.env;

  const defaultLocalIcon = 'no-icon';

  const icon = props.localIcon || defaultLocalIcon;

  return `#${prefix}-${icon}`;
});

/** If localIcon is passed, render localIcon first */
const renderLocalIcon = computed(() => props.localIcon || !props.icon);
/*处理阿里图标，图标开头为al- */
const iconName = computed(() => {
  return props.icon?.startsWith('al-') ? props.icon : ``;
});
const icon = computed(() => {
  return props.icon?.startsWith('al-') ? '' : props.icon;
});
</script>

<template>
  <template v-if="renderLocalIcon">
    <svg aria-hidden="true" width="1em" height="1em" v-bind="bindAttrs">
      <use :xlink:href="symbolId" fill="currentColor" />
    </svg>
  </template>
  <template v-else>
    <Icon v-if="icon" :icon="icon" v-bind="bindAttrs" />
    <icon-font v-if="iconName" :iconName="iconName" v-bind="bindAttrs"></icon-font>
  </template>
</template>

<style scoped lang="scss"></style>

 三、路由代理修改

#改写后端
路径：\build\config\proxy.ts
函数：createProxyItem
/* 旧的如果加了目录，则不能代理，比如：加了/admin目录，就不能代理/admin/login
rewrite: path => path.replace(new RegExp(`^${item.proxyPattern}`), '')
//下面这个也可用
rewrite: path => path.replace(new RegExp(`^${item.proxyPattern}`), item.proxyPattern)
// 可以原路返回，比如：/admin/login -> /admin/login
*/
rewrite: path => path

　后端路径

　src->utils->service.ts

/**
 * Get proxy pattern of backend service base url
 *
 * @param key If not set, will use the default key
 */
function createProxyPattern(key?: App.Service.OtherBaseURLKey) {
  if (!key) {
    return '/admin';
  }

  return `/proxy-${key}`;
}