appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化布局

master
绝弹 2023-10-16 22:15:47 +08:00
parent 8c0c5037b5
commit 649ca40f12
9 changed files with 117 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/breadcrumb/bread-page.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="h-full grid grid-rows-[auto_1fr]">
<div class="bg-white dark:bg-gray-800 px-4 py-2">
<div class="bg-[#f8f8f8] dark:bg-gray-800 px-4 py-2">
<div class="flex justify-between gap-4">
<BreadCrumb></BreadCrumb>
<div>
@ -9,7 +9,7 @@
</div>
</div>
<slot name="content">
<div class="m-4 p-4 bg-white dark:bg-gray-700">
<div class="w-full h-full overflow-hidden p-6">
<slot></slot>
</div>
</slot>

38
src/pages/_layout/components/userDropdown.vue
View File

@ -8,6 +8,7 @@
{{ userStore.nickname }}
</span>
<i class="icon-park-outline-down"></i>
<password-modal></password-modal>
</span>
<template #content>
<a-doption>
@ -22,7 +23,7 @@
</div>
</a-doption>
<a-divider :margin="4"></a-divider>
<a-doption>
<a-doption @click="password.open()">
<template #icon>
<i class="icon-park-outline-lock"></i>
</template>
@ -46,6 +47,7 @@
</template>
<script setup lang="ts">
import { useAniFormModal } from "@/components";
import { useUserStore } from "@/store";
import { Message } from "@arco-design/web-vue";
@ -58,6 +60,40 @@ const logout = async () => {
Message.success("提示：已退出登陆!");
router.push({ path: "/login", query: { redirect: route.path } });
};
const [PasswordModal, password] = useAniFormModal({
title: "修改密码",
trigger: false,
modalProps: {
width: 452,
},
items: [
{
field: "password",
label: "原密码",
type: "input",
nodeProps: {
placeholder: "请输入原密码",
},
},
{
field: "password1",
label: "新密码",
type: "input",
nodeProps: {
placeholder: "请输入新密码",
},
},
{
field: "password2",
label: "确认密码",
type: "input",
nodeProps: {
placeholder: "请再次输入新密码",
},
},
],
});
</script>
<style scoped></style>

11
src/pages/_layout/index.vue
View File

@ -1,7 +1,7 @@
<template>
<a-layout class="layout">
<a-layout-header
class="h-13 overflow-hidden flex justify-between items-center gap-4 px-2 pr-4 border-b border-slate-200 bg-white dark:bg-slate-800 dark:border-slate-700"
class="h-13 overflow-hidden flex justify-between items-center gap-4 px-2 pr-4 bg-[#dddddd] dark:bg-slate-800"
>
<div class="h-13 flex items-center border-b border-slate-200 dark:border-slate-800">
<router-link to="/" class="px-2 py-2 rounded flex items-center gap-2 text-slate-700">
@ -35,7 +35,7 @@
<a-layout class="flex flex-1 overflow-hidden">
<a-layout-sider
class="h-full overflow-hidden dark:bg-slate-800 border-r border-slate-200 dark:border-slate-700"
class="h-full overflow-hidden !bg-[#f3f3f3] dark:bg-slate-800"
:width="224"
:collapsed-width="52"
:collapsible="true"
@ -55,8 +55,8 @@
></i>
</template>
</a-layout-sider>
<a-layout class="layout-content flex-1">
<a-layout-header class="h-8 bg-white border-b border-slate-200 dark:bg-slate-800 dark:border-slate-700">
<a-layout class="layout-content flex-1 bg-white">
<a-layout-header class="h-8 bg-[#ececec] dark:bg-slate-800">
<div class="h-full flex items-center justify-between gap-2 px-4">
<div class="space-x-2">
<a-tag
@ -83,7 +83,7 @@
</div>
</a-layout-header>
<a-layout-content class="overflow-x-auto">
<a-spin :loading="appStore.pageLoding" tip="加载中，请稍等..." class="block h-full w-full">
<a-spin :loading="appStore.pageLoding" tip="页面加载中，请稍等..." class="block h-full w-full">
<router-view v-slot="{ Component }">
<component :is="Component"></component>
</router-view>
@ -246,7 +246,6 @@ const tagItems = [
// 导致部分内容被截取
// min-height: 100vh;
overflow-y: hidden;
background-color: var(--color-fill-2);
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
</style>

2
src/pages/home/home.vue
View File

@ -19,7 +19,7 @@
{
"meta": {
"sort": 10001,
"title": "首页",
"title": "概览",
"icon": "icon-park-outline-home"
}
}

124
src/pages/post/media/index.vue
View File

@ -1,71 +1,69 @@
<template>
<BreadPage>
<template #content>
<div class="overflow-hidden grid grid-cols-[auto_auto_1fr] m-4 p-4 bg-white">
<div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
<div class="flex gap-2 pr-2">
<a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
<a-button>
<template #icon>
<i class="icon-park-outline-add"></i>
</template>
</a-button>
</div>
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
<ul class="pr-4 pl-0 mt-0">
<li
v-for="i in 50"
class="group flex items-center justify-between gap-2 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
>
<div>
<i class="icon-file-folder text-gray-600"></i>
日常素材
<span class="text-xs text-gray-400">(10)</span>
</div>
<div>
<a-dropdown>
<a-button size="small" type="text">
<template #icon>
<i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
</template>
</a-button>
<template #content>
<a-doption @click="typeCtx.open()">
<template #icon>
<i class="icon-park-outline-edit"></i>
</template>
修改
</a-doption>
<a-doption class="!text-red-500">
<template #icon>
<i class="icon-park-outline-delete"></i>
</template>
删除
</a-doption>
</template>
</a-dropdown>
<type-modal></type-modal>
</div>
</li>
</ul>
</a-scrollbar>
</div>
<a-divider direction="vertical" :margin="16"></a-divider>
<div>
<Table v-bind="table">
<template #action>
<a-button type="primary" @click="uploadRef?.open()">
<template #icon>
<i class="icon-park-outline-upload"></i>
</template>
上传
</a-button>
<ani-upload ref="uploadRef"></ani-upload>
<div class="overflow-hidden grid grid-cols-[auto_auto_1fr]">
<div class="w-[210px] h-full overflow-hidden grid grid-rows-[auto_1fr]">
<div class="flex gap-2 pr-4">
<a-input-search allow-clear placeholder="分组名称..." class="mb-2"></a-input-search>
<a-button>
<template #icon>
<i class="icon-park-outline-add"></i>
</template>
</Table>
</a-button>
</div>
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto">
<ul class="pr-4 pl-0 mt-0">
<li
v-for="i in 5"
class="group flex items-center justify-between gap-2 h-8 rounded mb-2 pl-3 hover:bg-gray-100 cursor-pointer"
>
<div>
<i class="icon-file-folder text-gray-600"></i>
日常素材
<span class="text-xs text-gray-400">(10)</span>
</div>
<div>
<a-dropdown>
<a-button size="small" type="text">
<template #icon>
<i class="icon-park-outline-more-one text-gray-400 hover:text-gray-700"></i>
</template>
</a-button>
<template #content>
<a-doption @click="typeCtx.open()">
<template #icon>
<i class="icon-park-outline-edit"></i>
</template>
修改
</a-doption>
<a-doption class="!text-red-500">
<template #icon>
<i class="icon-park-outline-delete"></i>
</template>
删除
</a-doption>
</template>
</a-dropdown>
<type-modal></type-modal>
</div>
</li>
</ul>
</a-scrollbar>
</div>
</template>
<a-divider direction="vertical" :margin="16"></a-divider>
<div>
<Table v-bind="table">
<template #action>
<a-button type="primary" @click="uploadRef?.open()">
<template #icon>
<i class="icon-park-outline-upload"></i>
</template>
上传
</a-button>
<ani-upload ref="uploadRef"></ani-upload>
</template>
</Table>
</div>
</div>
</BreadPage>
</template>

2
src/pages/post/post/index.vue
View File

@ -13,7 +13,7 @@
</div>
</div>
</div>
<div class="flex gap-4 mt-6 px-6">
<div class="flex gap-4">
<div class="flex-1 bg-white p-4">
<a-form :model="{}" layout="vertical">
<a-form-item label="标题">

12
src/pages/system/login-log/index.vue
View File

@ -1,13 +1,11 @@
<template>
<BreadPage>
<template #content>
<div class="p-4">
<a-alert :closable="true" class="mb-2"> 仅展示近 90 天内的数据，如需查看更多数据，请联系管理员。 </a-alert>
<div class="bg-white p-4">
<Table v-bind="table"></Table>
</div>
<div class="">
<a-alert :closable="true" class="mb-4"> 仅展示近 90 天内的数据，如需查看更多数据，请联系管理员。 </a-alert>
<div class="">
<Table v-bind="table"></Table>
</div>
</template>
</div>
</BreadPage>
</template>

1
src/pages/system/role/index.vue
View File

@ -1,6 +1,5 @@
<template>
<BreadPage>
<a-button @click="roleCtx.refresh()">刷新</a-button>
<role-table></role-table>
</BreadPage>
</template>

10
src/styles/css-arco.less
View File

@ -34,7 +34,7 @@ body {
box-shadow: none;
}
.arco-menu,
.arco-menu-item {
.arco-menu-light .arco-menu-item {
background-color: transparent;
}
.arco-menu-group-title {
@ -68,10 +68,10 @@ body {
background-color: var(--color-neutral-2);
}
&.arco-menu-selected {
color: @arcoblue-6;
background-color: @arcoblue-1;
// color: #fff;
// background-color: @arcoblue-6;
// color: @arcoblue-6;
// background-color: @arcoblue-1;
color: #fff;
background-color: rgb(var(--primary-6));
.arco-menu-icon {
color: inherit;
}