尝试对starter项目的页面进行改变
修改侧边栏，只留下最上面的「仪表盘」和「列表页」两个大模块
in SideNav.vue the code for the sidebar menu is:
<menu-content :navData="menu" />
from there we can get to MenuContent.vue
I think it is referencing the items in a list, which is computed by the getMenuList function
computed: {
list(): Array<MenuRoute> {
return getMenuList(this.navData);
},
},
const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
if (!list) {
return [];
}
return list
.map((item) => {
const path = basePath && !item.path.includes(basePath) ? `${basePath}/${item.path}` : item.path;
return {
path,
title: item.meta?.title,
icon: item.meta?.icon || '',
children: getMenuList(item.children, path),
meta: item.meta,
redirect: item.redirect,
};
})
.filter((item) => item.meta && item.meta.hidden !== true);
};
and the list is from MenuRoute, and that is from '@/interface'
but it is just definition in there it seems:
export interface MenuRoute {
path: string;
title?: string;
icon?:
| string
| {
render: () => void;
};
redirect?: string;
children: MenuRoute[];
meta: any;
}
so the point is, where is the this.navData sent into getMenuList
it seems navData is sent in from something like
<menu-content v-if="item.children" :nav-data="item.children" />
in SideNav.vue
<menu-content :navData="menu" />
and that menu is here:
export default Vue.extend({
name: 'sideNav',
components: {
MenuContent,
},
props: {
menu: Array,
showLogo: {
type: Boolean,
default: true,
},
the menu here is sent in from LayoutSidebar.vue(supposedly)
<side-nav
v-if="showSidebar"
:showLogo="showSidebarLogo"
:layout="setting.layout"
:isFixed="setting.isSidebarFixed"
:menu="sideMenu"
:theme="mode"
:isCompact="setting.isSidebarCompact"
:maxLevel="setting.splitMenu ? 2 : 3"
/>
and this sideMenu is from that same file
sideMenu() {
const { layout, splitMenu } = this.$store.state.setting;
let { menuRouters } = this;
if (layout === 'mix' && splitMenu) {
menuRouters.forEach((menu) => {
if (this.$route.path.indexOf(menu.path) === 0) {
menuRouters = menu.children.map((subMenu) => ({ ...subMenu, path: `${menu.path}/${subMenu.path}` }));
}
});
}
return menuRouters;
},
but what is this.$store.state.setting?
there is the file src/store/index.ts, and that is from src/store/modules/setting.ts
可是还是没有找到，只能出此下策：
在 MenuContent.vue里面加入一个if判断，把要删的页面全部filter掉
<template v-for="item in list">
<template v-if="item.title != '表单页' && item.title != '详情页' && item.title != '外部页面' && item.title != '结果页' && item.title != '个人页' && item.title != '登录页'">
之所以是没有直接 =='仪表盘'这样，是因为如果这样子菜单就没了（原因未知）
result:
尝试修改基础列表页，将列表中的「合同编号」这一列删去
seems to be in layouts/pages/list/base/index.vue
110：合同编号
// { title: '合同状态', colKey: 'status', width: 200, cell: { col: 'status' } },
// {
// title: '合同编号',
// width: 200,
// ellipsis: true,
// colKey: 'no',
// },
success!
尝试替换页面的主logo为任意其他logo
把public/favicon.ico改了之后：
the svg of logs and images are in src/assets
assets-t-logo.svg is the small T logo
assets-logo-full.svg is the larger logo including Tencent Design
let's try to change the large one. after copying the following into assets-logo-full.svg
<?xml version="1.0" encoding="UTF-8"?><svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M32.4853 24.4853C34.6569 22.3137 36 19.3137 36 16C36 9.37258 30.6274 4 24 4C17.3726 4 12 9.37258 12 16C12 19.3137 13.3431 22.3137 15.5147 24.4853" stroke="#333" stroke-width="4" stroke-linecap="round"/><path d="M6 44L7 39L18 31L24 37L30 31L41 39L42 44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.9934 21.0071C13.0061 16.8965 13.6749 13.8941 15 11.9999C16.9877 9.15871 18.387 9.36755 19.4054 9.81009C20.4238 10.2526 21.0226 13.1442 22.7236 13.9777C24.4246 14.8112 28.7777 14.9141 30.2687 15.9167C31.7597 16.9194 35.1696 18.7844 34.3195 21.9684" stroke="#333" stroke-width="4"/></svg>
we get the following result:
it is shown in SideNav.vue:
<template #logo>
<span v-if="showLogo" :class="`${prefix}-side-nav-logo-wrapper`" @click="() => handleNav('/dashboard/base')">
<component :is="getLogo" :class="`${prefix}-side-nav-logo-${collapsed ? 't' : 'tdesign'}-logo`" />
</span>
</template>