github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add navbar login profile 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-04-25 15:15:46 +08:00
parent 6dab80a6dd
commit eb48381540
3 changed files with 77 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/core/icons.ts
View File

@ -24,6 +24,8 @@ import IconPlug from "~icons/ri/plug-2-line";
import IconEye from "~icons/ri/eye-line"; import IconEye from "~icons/ri/eye-line";
// @ts-ignore // @ts-ignore
import IconFolder from "~icons/ri/folder-2-line"; import IconFolder from "~icons/ri/folder-2-line";
// @ts-ignore
import IconMore from "~icons/ri/more-line";
export { export {
IconDashboard, IconDashboard,
IconArrowRight, IconArrowRight,
@ -38,4 +40,5 @@ export {
IconPlug, IconPlug,
IconEye, IconEye,
IconFolder, IconFolder,
IconMore,
}; };

55
src/layouts/FilledLayout.vue
View File

@ -5,6 +5,27 @@
<img :src="logo" alt="Halo Logo" style="width: 78px" /> <img :src="logo" alt="Halo Logo" style="width: 78px" />
</div> </div>
<VRoutesMenu :menus="menus" /> <VRoutesMenu :menus="menus" />
<div class="current-profile">
<div class="profile-avatar">
<img class="h-11 w-11 rounded-full" src="https://halo.run/logo" />
</div>
<div class="profile-name">
<div class="flex font-medium text-sm">Ryan Wang</div>
<div class="flex">
<VTag>
<template #leftIcon>
<IconUserSettings />
</template>
管理员
</VTag>
</div>
</div>
<div
class="profile-control transition-all hover:bg-gray-100 rounded cursor-pointer p-1"
>
<IconMore />
</div>
</div>
</aside> </aside>
<main class="content w-full overflow-y-auto"> <main class="content w-full overflow-y-auto">
<slot /> <slot />
@ -14,18 +35,48 @@
<script lang="ts" setup> <script lang="ts" setup>
import { VRoutesMenu } from "@/components/base/menu"; import { VRoutesMenu } from "@/components/base/menu";
import { VTag } from "@/components/base/tag";
import { menus } from "@/router/menus.config"; import { menus } from "@/router/menus.config";
import logo from "@/assets/logo.svg"; import logo from "@/assets/logo.svg";
import { IconMore, IconUserSettings } from "@/core/icons";
</script> </script>
<style lang="scss"> <style lang="scss">
.navbar { .navbar {
width: 260px; width: 270px;
z-index: 999; z-index: 999;
box-shadow: 0 4px 4px #f6c6ce; box-shadow: 0 4px 4px #f6c6ce;
padding-bottom: 70px;
.current-profile {
background: #fff;
position: fixed;
left: 0;
bottom: 0;
width: 270px;
height: 70px;
display: flex;
@apply p-3;
.profile-avatar {
@apply self-center;
@apply flex;
}
.profile-name {
@apply self-center;
@apply flex-1;
@apply ml-3;
}
.profile-control {
@apply self-center;
}
}
} }
.content { .content {
margin-left: 260px; margin-left: 270px;
display: flex; display: flex;
flex: auto; flex: auto;
flex-direction: column; flex-direction: column;

67
src/views/posts/PostList.vue
View File

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import FilledLayout from "@/layouts/FilledLayout.vue"; import FilledLayout from "@/layouts/FilledLayout.vue";
import { VButton } from "@/components/base/button"; import { VButton } from "@/components/base/button";
import { VTag } from "@/components/base/tag";
import { IconBookRead } from "@/core/icons"; import { IconBookRead } from "@/core/icons";
</script> </script>
<template> <template>
@ -21,54 +22,22 @@ import { IconBookRead } from "@/core/icons";
<div class="p-4"> <div class="p-4">
<div class="table-container"> <div class="table-container">
<div class="table-item"> <div class="table-item">
<div class="table-cell font-bold">key</div> <div class="table-cell font-bold"></div>
<div class="table-cell font-bold">value</div> <div class="table-cell font-bold">作者</div>
<div class="table-cell font-bold">value</div> <div class="table-cell font-bold">评论</div>
<div class="table-cell font-bold">value</div> <div class="table-cell font-bold">访问量</div>
<div class="table-cell font-bold">value</div> <div class="table-cell font-bold">发布时间</div>
</div> </div>
<div class="table-item"> <div v-for="i in 10" :key="i" class="table-item">
<div class="table-cell">message</div> <div class="table-cell">
<div class="table-cell">消息文字</div> <div>Halo 1.5.2 发布</div>
<div class="table-cell">消息文字</div> <VTag>#Halo</VTag>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
</div>
<div class="table-item hover:bg-black hover:text-white">
<div class="table-cell">message</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
</div>
<div class="table-item">
<div class="table-cell">message</div>
<div class="table-cell">消息文字</div>
<div class="table-cell w-72">
消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字消息文字
</div> </div>
<div class="table-cell">消息文字</div> <div class="table-cell">
<div class="table-cell">消息文字</div> <img src="https://halo.run/avatar" class="rounded-full w-5" />
</div> </div>
<div class="table-item"> <div class="table-cell">0</div>
<div class="table-cell">message</div> <div class="table-cell">123</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字消息文字消息文字消息文字消息文字</div>
<div class="table-cell">消息文字</div>
</div>
<div class="table-item">
<div class="table-cell">message</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
</div>
<div class="table-item">
<div class="table-cell">message</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div>
<div class="table-cell">消息文字</div> <div class="table-cell">消息文字</div>
</div> </div>
</div> </div>
@ -87,6 +56,12 @@ import { IconBookRead } from "@/core/icons";
.table-item { .table-item {
@apply table-row; @apply table-row;
@apply cursor-pointer;
@apply transition-all;
&:hover {
@apply bg-gray-100;
}
} }
.table-cell { .table-cell {