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

perf: improve page layout 

Signed-off-by: Ryan Wang <i@ryanc.cc>
pull/581/head
Ryan Wang 2022-04-25 11:04:00 +08:00
parent e23a0a710e
commit aee957b64d
5 changed files with 108 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/layouts/FilledLayout.vue
View File

@ -21,8 +21,14 @@ import logo from "@/assets/logo.svg";
<style lang="scss"> <style lang="scss">
.navbar { .navbar {
width: 260px; width: 260px;
z-index: 999;
box-shadow: 0 4px 4px #f6c6ce;
} }
.content { .content {
margin-left: 260px; margin-left: 260px;
display: flex;
flex: auto;
flex-direction: column;
overflow-x: hidden;
} }
</style> </style>

3
src/router/routes.config.ts
View File

@ -1,6 +1,7 @@
import type { RouteRecordRaw } from "vue-router"; import type { RouteRecordRaw } from "vue-router";
import HomeView from "../views/HomeView.vue"; import HomeView from "../views/HomeView.vue";
import AboutView from "../views/AboutView.vue"; import AboutView from "../views/AboutView.vue";
import PostList from "../views/posts/PostList.vue";
export const routes: Array<RouteRecordRaw> = [ export const routes: Array<RouteRecordRaw> = [
{ {
@ -16,7 +17,7 @@ export const routes: Array<RouteRecordRaw> = [
{ {
path: "/posts", path: "/posts",
name: "Posts", name: "Posts",
component: AboutView, component: PostList,
children: [ children: [
{ {
path: "/posts/categories", path: "/posts/categories",

4
src/views/AboutView.vue
View File

@ -8,8 +8,8 @@ const route = useRoute();
<template> <template>
<FilledLayout> <FilledLayout>
<div> <div>
<pre class="overflow-auto w-3/4">Route: {{ route }}</pre> <pre class="overflow-auto">Route: {{ route }}</pre>
<pre class="overflow-auto w-3/4">Route: {{ route }}</pre> <pre class="overflow-auto">Route: {{ route }}</pre>
</div> </div>
</FilledLayout> </FilledLayout>
</template> </template>

8
src/views/HomeView.vue
View File

@ -1,12 +1,6 @@
<template> <template>
<FilledLayout> <FilledLayout> </FilledLayout>
<VInput v-model="value" />
{{ value }}
</FilledLayout>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { FilledLayout } from "@/layouts"; import { FilledLayout } from "@/layouts";
import { VInput } from "@/components/base/input";
import { ref } from "vue";
const value = ref();
</script> </script>

97
src/views/posts/PostList.vue Normal file
View File

@ -0,0 +1,97 @@
<script lang="ts" setup>
import FilledLayout from "@/layouts/FilledLayout.vue";
import { VButton } from "@/components/base/button";
import { IconBookRead } from "@/core/icons";
</script>
<template>
<FilledLayout>
<div class="flex items-center justify-between p-4 bg-white">
<div class="flex-1 self-center min-w-0">
<h2 class="flex text-xl font-bold text-gray-800 truncate">
<IconBookRead class="self-center mr-2" />
<span>文章</span>
</h2>
<span class="text-gray-600 mt-8 text-sm">当前 10 篇已发布文章</span>
</div>
<div class="self-center">
<VButton type="secondary">发布</VButton>
</div>
</div>
<div class="p-4">
<div class="table-container">
<div class="table-item">
<div class="table-cell font-bold">key</div>
<div class="table-cell font-bold">value</div>
<div class="table-cell font-bold">value</div>
<div class="table-cell font-bold">value</div>
<div class="table-cell font-bold">value</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 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 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>
<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>
</div>
</FilledLayout>
</template>
<style lang="scss">
.table-container {
@apply table;
@apply w-full;
border: 1px solid #fff;
background: #fff;
border-radius: 4px;
.table-item {
@apply table-row;
}
.table-cell {
display: table-cell;
padding: 10px;
}
}
</style>