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

feat: 优化右侧样式

master
绝弹 2023-10-26 22:42:13 +08:00
parent 5b9c14184e
commit 09498ec02e
12 changed files with 99 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<template>
<div>
<div class="h-full overflow-hidden grid grid-rows-[auto_1fr]">
<div class="bg-white px-4 py-2">
<div class="flex justify-between gap-4">
<BreadCrumb></BreadCrumb>
@ -9,9 +9,11 @@
</div>
</div>
<slot name="content">
<div class="m-4 p-4 bg-white">
<slot></slot>
</div>
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto" type="track">
<div class="m-4 p-4 bg-white overflow-hidden">
<slot></slot>
</div>
</a-scrollbar>
</slot>
</div>
</template>
@ -20,4 +22,4 @@
import BreadCrumb from "./bread-crumb.vue";
</script>
<style scoped></style>
<style scoped></style>

2
src/components/editor/panel-header/index.vue
View File

@ -16,7 +16,7 @@
<a-doption>保存为图片</a-doption>
</template>
</a-dropdown-button>
<a-button status="danger">退出</a-button>
<a-button type="outline" status="danger">退出</a-button>
</div>
</div>
</template>

1
src/components/form/form-modal.tsx
View File

@ -176,6 +176,7 @@ export const FormModal = defineComponent({
onBeforeOk={this.onBeforeOk}
onClose={this.onClose}
title={this.modalTitle}
class="ani-form-modal"
>
{this.visible && (
<Form ref={(el: any) => (this.formRef = el)} {...this.formProps} model={this.model} items={this.items}>

4
src/components/table/table.tsx
View File

@ -162,12 +162,12 @@ export const Table = defineComponent({
return (
<div class="table w-full">
{!this.inlined && (
<div class="border-b pb-2 border-slate-200 mb-5">
<div class="border-b pb-0 border-slate-200 mb-3">
<Form ref="searchRef" class="!grid grid-cols-4 gap-x-6" {...this.search}></Form>
</div>
)}
<div class={`mb-3 flex justify-between ${!this.inlined && "mt-2"}`}>
<div class={`mb-3 flex toolbar justify-between ${!this.inlined && "mt-2"}`}>
<div class={`${this.create || this.$slots.action ? null : "!hidden"} flex-1 flex gap-2 `}>
{this.create && (
<FormModal {...(this.create as any)} ref="createRef" onSubmited={this.reloadData}></FormModal>

2
src/pages/_layout/components/menu.vue
View File

@ -31,7 +31,7 @@ export default defineComponent({
const icon = route.icon ? () => <i class={route.icon} /> : null;
const node: any = route.children?.length ? (
<>
<div class="px-2"><a-divider margin={6}></a-divider></div>
<div class="px-2"><a-divider margin={6} class="!border-slate-100"></a-divider></div>
{this.renderItem(route?.children)}
</>
) : (

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

@ -3,17 +3,17 @@
<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"
>
<div class="h-13 flex items-center border-b border-slate-200 dark:border-slate-800">
<router-link to="/" class="px-2 py-1 rounded flex items-center gap-2 text-slate-700 hover:bg-slate-100">
<div class="h-13 flex items-center">
<router-link to="/" class="px-2 py-1 rounded flex items-center gap-2 text-slate-700">
<img src="/favicon.ico" alt="" width="22" height="22" class="" />
<h1 class="relative text-lg leading-[19px] dark:text-white m-0 p-0">
{{ appStore.title }}
<span
<!-- <span
v-if="isDev"
class="absolute -right-14 -top-1 text-xs font-normal text-brand-500 bg-brand-50 px-1.5 rounded-full"
>
本地版
</span>
</span> -->
</h1>
</router-link>
</div>
@ -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 dark:bg-slate-800 border-r border-slate-100 dark:border-slate-700"
:width="224"
:collapsed-width="52"
:collapsible="true"
@ -43,9 +43,12 @@
:hide-trigger="false"
@collapse="onCollapse"
>
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-hidden pt-2">
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-hidden pt-1">
<Menu />
</a-scrollbar>
<template #trigger="{ collapsed }">
<i :class="collapsed ? `icon-park-outline-expand-left` : 'icon-park-outline-expand-right'" class="text-gray-400 text-base hover:text-gray-700"></i>
</template>
</a-layout-sider>
<a-layout class="layout-content flex-1">
<a-layout-content class="overflow-x-auto">

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

@ -15,6 +15,7 @@
<ani-upload ref="uploadRef"></ani-upload>
</template>
</Table>
<a-image-preview v-model:visible="visible" :src="image"></a-image-preview>
</div>
</div>
</BreadPage>
@ -22,27 +23,22 @@
<script setup lang="tsx">
import { api } from "@/api";
import { Table, createColumn, useAniFormModal, useTable } from "@/components";
import { dayjs } from "@/libs/dayjs";
import { Table, createColumn, updateColumn, useTable } from "@/components";
import numeral from "numeral";
import AniGroup from './components/group.vue';
import AniGroup from "./components/group.vue";
import AniUpload from "./components/upload.vue";
const [typeModal, typeCtx] = useAniFormModal({
title: "修改分组",
trigger: false,
modalProps: {
width: 432,
},
items: [
{
field: "name",
label: "分组名称",
type: "input",
},
],
submit: async () => {},
});
const visible = ref(false);
const image = ref("");
const preview = (record: any) => {
if (!record.mimetype.startsWith("image")) {
// Message.warning("暂不支持预览该素材");
window.open(record.path, "_blank");
return;
}
image.value = record.path;
visible.value = true;
};
const uploadRef = ref<InstanceType<typeof AniUpload>>();
@ -72,21 +68,28 @@ const table = useTable({
dataIndex: "name",
render({ record }) {
return (
<div class="flex items-center">
<div class="flex items-center gap-2">
<div>
<i class={`${getIcon(record.mimetype)} text-3xl mr-2`}></i>
{record.mimetype.startsWith("image") ? (
<a-avatar size={32} shape="square">
<img src={record.path}></img>
</a-avatar>
) : (
<i class={`${getIcon(record.mimetype)} text-3xl mr-2`}></i>
)}
</div>
<div class="flex flex-col overflow-hidden">
<span class="hover:text-brand-500 cursor-pointer">{record.name}</span>
<span class="text-gray-400 text-xs truncate">
{numeral(record.size).format("0 b")}
<span class="hover:text-brand-500 cursor-pointer" onClick={() => preview(record)}>
{record.name}
</span>
<span class="text-gray-400 text-xs truncate">{numeral(record.size).format("0 b")}</span>
</div>
</div>
);
},
},
createColumn,
updateColumn,
{
type: "button",
title: "操作",
@ -123,6 +126,22 @@ const table = useTable({
},
],
},
modify: {
title: "修改素材",
modalProps: {
width: 432,
},
items: [
{
field: "name",
label: "素材名称",
type: "input",
},
],
submit: ({ model }) => {
return api.file.setFile(model.id, model);
},
},
});
</script>

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

@ -21,7 +21,7 @@ const [roleTable, roleCtx] = useAniTable({
return (
<div class="flex flex-col overflow-hidden">
<span>{record.name}</span>
<span class="text-gray-400 text-xs truncate">@{record.slug}</span>
<span class="text-gray-400 text-xs truncate">#{record.slug}</span>
</div>
);
},
@ -74,7 +74,7 @@ const [roleTable, roleCtx] = useAniTable({
create: {
title: "新建角色",
modalProps: {
width: 1080,
width: 580,
maskClosable: false,
},
formProps: {

2
src/pages/system/user/components/password.tsx
View File

@ -17,7 +17,7 @@ export const usePassworModal = () => {
field: "password",
label: ({ model }) => (
<span>
<span class="text-brand-500 font-semibold">{model.nickname}</span> 的新密码:
设置 <span class="text-brand-500 font-semibold">{model.nickname}</span> 的新密码:
</span>
),
type: "input",

39
src/pages/system/user/index.vue
View File

@ -48,7 +48,7 @@ const table = useTable({
{
title: "操作",
type: "button",
width: 180,
width: 200,
buttons: [
{
type: "modify",
@ -76,22 +76,39 @@ const table = useTable({
{
field: "nickname",
label: "用户昵称",
type: "search",
searchable: true,
enterable: true,
itemProps: {
hideLabel: true,
},
nodeProps: {
placeholder: "用户昵称",
},
type: "input",
},
{
field: "nickname",
label: "用户昵称",
type: "input",
},
{
field: "nickname",
label: "用户昵称",
type: "input",
},
{
field: "nickname",
label: "用户昵称",
type: "input",
},
{
field: "nickname",
label: "用户昵称",
type: "input",
},
{
field: "nickname",
label: "用户昵称",
type: "input",
},
],
},
create: {
title: "新建用户",
modalProps: {
width: 732,
width: 820,
maskClosable: false,
},
formProps: {

4
src/styles/css-unocss.less
View File

@ -13,5 +13,9 @@
.table .arco-form-item-layout-inline {
margin-right: 8px;
margin-bottom: 18px;
}
div.toolbar .arco-form-item-layout-inline {
margin-bottom: 0;
}

2
src/types/auto-component.d.ts vendored
View File

@ -27,6 +27,7 @@ declare module '@vue/runtime-core' {
AForm: typeof import('@arco-design/web-vue')['Form']
AFormItem: typeof import('@arco-design/web-vue')['FormItem']
AImage: typeof import('@arco-design/web-vue')['Image']
AImagePreview: typeof import('@arco-design/web-vue')['ImagePreview']
AInput: typeof import('@arco-design/web-vue')['Input']
AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
@ -44,7 +45,6 @@ declare module '@vue/runtime-core' {
AModal: typeof import('@arco-design/web-vue')['Modal']
APagination: typeof import('@arco-design/web-vue')['Pagination']
APopover: typeof import('@arco-design/web-vue')['Popover']
AProgress: typeof import('@arco-design/web-vue')['Progress']
ARadio: typeof import('@arco-design/web-vue')['Radio']
ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']