Skip to content

Commit

Permalink
fix:init
Browse files Browse the repository at this point in the history
  • Loading branch information
alaric8 committed Mar 15, 2024
1 parent 781fcff commit 67ba035
Show file tree
Hide file tree
Showing 10 changed files with 270 additions and 178 deletions.
23 changes: 15 additions & 8 deletions mock/auth/user.mock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ export default definePostMock([
method: "GET",
body(request) {
const id = request.params.id as number;
if (id && user.list[id - 1]) return user.list[id - 1];
const index = user.list.findIndex((item) => item.id == id);
if (index) return user.list[index];
return {
error_code: 400,
msg: "author not found",
Expand All @@ -40,7 +41,6 @@ export default definePostMock([
request.body.avatar = "https://picsum.photos/id/1/400/300";
request.body.created_at = Mock.Random.datetime();
request.body.updated_at = Mock.Random.datetime();
console.log("添加");
user.list.unshift(request.body);
return request.body;
},
Expand All @@ -49,20 +49,27 @@ export default definePostMock([
url: "/system/user/:id",
method: "PUT",
body(request) {
// user.list[]
console.log("更新");
const id = request.params.id as number;
const result = find(user.list, { id });
return result;
const index = user.list.findIndex((item) => item.id == id);
Object.assign(user.list[index], request.body);
return user.list[index];
},
},
{
url: "/system/user/:id",
method: "DELETE",
body(request) {
const id = request.params.id as number;
user.list.splice(id - 1, 1);
return user.list[id - 1];
const index = user.list.findIndex((item) => item.id == id);
const deleteRueslt = user.list.splice(index, 1);
if (deleteRueslt) {
return {
error_code: 400,
msg: "author not found",
};
}
const result = user.list[index];
return result;
},
},
]);
2 changes: 2 additions & 0 deletions mock/login.mock.ts
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,7 @@ const menu = [
icon: "mingcute:feeder-fill",
},
];

export default definePostMock([
{
url: "/login/userinfo",
Expand All @@ -566,6 +567,7 @@ export default definePostMock([
response(req, res) {
const { query = {}, body = { account: "", password: "" } } = req;
res.setHeader("Content-Type", "application/json");
console.log(body);
if (body.account == "admin" && body.password == "123456") {
res.statusCode = 200;
res.end(
Expand Down
2 changes: 1 addition & 1 deletion src/components/RoleSelect.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { onMounted, reactive } from "vue";
const model = defineModel<any>();
withDefaults(
defineProps<{
multiple: boolean;
multiple?: boolean;
}>(),
{ multiple: false }
);
Expand Down
128 changes: 83 additions & 45 deletions src/layout/NavMenu.vue
Original file line number Diff line number Diff line change
@@ -1,64 +1,102 @@
<script setup lang="ts">
import { ElIcon, ElMenuItem, ElSubMenu } from 'element-plus';
import { ElIcon, ElMenuItem, ElSubMenu } from "element-plus";
import { h, ref } from "vue";
import { Icon } from "@iconify/vue";
import { Document, Folder } from '@element-plus/icons-vue';
import { Document, Folder } from "@element-plus/icons-vue";
import { useSettingStore } from "@/stores/setting";
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const settingStore = useSettingStore();
export interface MenuItem {
name: string,
route_path: string,
icon: string,
[props: string]: any
name: string;
route_path: string;
icon: string;
[props: string]: any;
}
const model = defineModel<Array<MenuItem>>({ required: true })
const model = defineModel<Array<MenuItem>>({ required: true });
interface Props {
option: any[]
option: any[];
}
const collapse = ref<boolean>(false);
const activeMenu = ref<string>("/console")
const TreeMenu = (props: Props, ctx?: any) => {
return props.option.map((item) => {
if (item.children?.length) {
return h(ElSubMenu, {
index: item.route_path || item.id.toString()
}, {
default: () => {
const childNode = TreeMenu({ option: item.children });
return childNode;
},
title: () => [h(ElIcon, null, () => {
if (item.icon) {
return h(Icon, { icon: item.icon });
} else {
return h(Folder)
}
}), h("span", item.name)]
})
}
return h(ElMenuItem, {
index: item.route_path
}, () => [h(ElIcon, null, () => {
if (item.icon) {
return props.option.map((item) => {
if (item.children?.length) {
return h(
ElSubMenu,
{
index: item.route_path || item.id.toString(),
},
{
default: () => {
const childNode = TreeMenu({ option: item.children });
return childNode;
},
title: () => [
h(ElIcon, null, () => {
if (item.icon) {
return h(Icon, { icon: item.icon });
} else {
return h(Document)
}
}), h("span", null, item.name)]);
})
}
} else {
return h(Folder);
}
}),
h("span", item.name),
],
}
);
}
return h(
ElMenuItem,
{
index: item.route_path,
},
() => [
h(ElIcon, null, () => {
if (item.icon) {
return h(Icon, { icon: item.icon });
} else {
return h(Document);
}
}),
h("span", null, item.name),
]
);
});
};
const handleOpen = (param) => {
console.log(param);
};
const handleSelect = (index, path, item) => {
const navIndex = userStore.navigator.findIndex(
(item) => item.route_path == index
);
userStore.navigator[navIndex]["active"] = true;
console.log(userStore.navigator);
};
</script>
<template>
<ElMenu active-text-color="#ffd04b" background-color="#00000" :collapse="collapse"
:class="collapse ? 'collapse' : 'layout-menu'" class="layout-menu" :default-active="activeMenu"
text-color="#fff" unique-opened router>
<TreeMenu :option="model"></TreeMenu>
</ElMenu>
<ElMenu
active-text-color="#ffd04b"
background-color="#00000"
:collapse="collapse"
:class="collapse ? 'collapse' : 'layout-menu'"
@open="handleOpen"
@select="handleSelect"
class="layout-menu"
:default-active="settingStore.activeURL"
text-color="#fff"
unique-opened
router
>
<TreeMenu :option="model"></TreeMenu>
</ElMenu>
</template>
<style lang="scss" scoped>
.el-menu {
border: none;
border: none;
}
.layout-menu {
width: 220px;
width: 220px;
}
</style>
</style>
79 changes: 50 additions & 29 deletions src/layout/Navigator.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,38 @@ import { Search, Fold } from "@element-plus/icons-vue";
import { Icon } from "@iconify/vue";
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { useSettingStore } from "@/stores/setting";
import { storeToRefs } from "pinia";
const settingStore = useSettingStore();
const userStore = useUserStore();
const { userinfo } = storeToRefs(userStore);
const keyword = ref<string>();
const TabsRef = ref<HTMLDivElement | null>(null)
const TabsRef = ref<HTMLDivElement | null>(null);
const scrollLeft = () => {
if (TabsRef.value != null) {
TabsRef.value.scrollLeft -= 80
TabsRef.value.scrollLeft -= 80;
}
}
};
const scrollRight = () => {
if (TabsRef.value != null) {
TabsRef.value.scrollLeft += 80
TabsRef.value.scrollLeft += 80;
}
}
};
const handlerClick = (item) => {
item.badge = Math.random().toFixed(1)
}
item.badge = Math.random().toFixed(1);
};
</script>
<template>
<div class="nav-header">
<div class="left-content">
<!-- <Fold style="width: 1em; height: 1em; margin-right: 8px" /> -->
<Icon icon="mingcute:fold-horizontal-line"></Icon>
<ElInput v-model="keyword" placeholder="请输入" style="width: 200px" :prefix-icon="Search"></ElInput>
<ElInput
v-model="keyword"
placeholder="请输入"
style="width: 200px"
:prefix-icon="Search"
></ElInput>
<Icon icon="mingcute:walk-fill"></Icon>
</div>
<div class="right-content">
Expand All @@ -39,20 +46,30 @@ const handlerClick = (item) => {
</div>
<div class="nav-tab">
<Icon class="arrow icon-arrow" icon="mingcute:home-2-line"></Icon>
<Icon class="arrow icon-arrow" @click.stop="scrollLeft" icon="mingcute:arrows-left-line"></Icon>
<Icon
class="arrow icon-arrow"
@click.stop="scrollLeft"
icon="mingcute:arrows-left-line"
></Icon>
<div class="content" ref="TabsRef">
<div v-for="item in userStore.navigator" @click.stop="handlerClick(item)">
<template v-for="item in userStore.navigator">
<!-- <ElBadge v-if="item.active" :value="item.badge" :max="99">{{
item.name
}}</ElBadge> -->
<template v-if="item.active">
<template v-if="item.badge">
<ElBadge :value="item.badge" :max="99">{{ item.name }}</ElBadge>
</template>
<template v-else>
{{ item.name }}
</template>
<span
class="tab-item"
:class="{ active: settingStore.activeURL == item.route_path }"
>{{ item.name }}</span
>
</template>
</div>
</template>
</div>
<Icon class="icon-arrow" @click.stop="scrollRight" icon="mingcute:arrows-right-line"></Icon>
<Icon
class="icon-arrow"
@click.stop="scrollRight"
icon="mingcute:arrows-right-line"
></Icon>
</div>
</template>
<style lang="scss" scoped>
Expand All @@ -79,7 +96,6 @@ const handlerClick = (item) => {
flex-shrink: 0;
display: flex;
align-items: center;
}
}
Expand All @@ -93,17 +109,22 @@ const handlerClick = (item) => {
display: flex;
align-items: center;
overflow: hidden;
div {
white-space: nowrap;
width: 80px;
box-sizing: border-box;
text-align: center;
flex-shrink: 0;
text-overflow: ellipsis;
margin-right: 1em;
cursor: pointer;
.tab-item {
margin: 0 1em;
}
.active {
color: rgb(10, 156, 68);
}
// div {
// white-space: nowrap;
// width: 80px;
// box-sizing: border-box;
// text-align: center;
// flex-shrink: 0;
// text-overflow: ellipsis;
// margin-right: 1em;
// cursor: pointer;
// }
}
.icon-arrow {
Expand Down
Loading

0 comments on commit 67ba035

Please sign in to comment.