feat: 添加用户设置页面
luoer
parent
0c9e19dc10
commit
414ee924b9
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="mt-3 mx-5">
|
||||
<div class="">
|
||||
<a-breadcrumb>
|
||||
<a-breadcrumb-item>
|
||||
<i class="icon-park-outline-all-application text-gray-400"></i>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,23 @@
|
|||
<template>
|
||||
<div>
|
||||
<BreadCrumb></BreadCrumb>
|
||||
<div class="bg-white px-4 py-2">
|
||||
<div class="flex justify-between gap-4">
|
||||
<BreadCrumb></BreadCrumb>
|
||||
<div>
|
||||
<a-link>需要帮助？</a-link>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="mt-3">
|
||||
<div class="flex justify-between gap-4 font-bold">
|
||||
<span class="text-lg text-gray-900">素材列表</span>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400 mt-1">
|
||||
用户上传的图片、视频、音频等素材，可用于文章、图文、视频等内容的编辑。
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<slot name="content">
|
||||
<div class="mx-4 mt-3 p-4 bg-white">
|
||||
<div class="m-4 p-4 bg-white">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</slot>
|
||||
|
|
|
|||
|
|
@ -180,7 +180,8 @@ const userButtons = [
|
|||
}
|
||||
|
||||
.layout-content {
|
||||
min-height: 100vh;
|
||||
// 导致部分内容被截取
|
||||
// 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);
|
||||
|
|
|
|||
|
|
@ -1,12 +1,28 @@
|
|||
<template>
|
||||
<bread-page id="list-page">
|
||||
<template #content>
|
||||
<AList class="mx-5 mt-3 bg-white" :bordered="true">
|
||||
<template #default>
|
||||
<div>
|
||||
<div class="flex justify-between items-center gap-4">
|
||||
<span class="text-base font-semibold text-gray-900">媒体素材</span>
|
||||
<div>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-plus"></i>
|
||||
</template>
|
||||
添加</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-sm text-gray-400">
|
||||
用户上传的图片、视频、音频等素材，可用于文章、图文、视频等内容的编辑。
|
||||
</div>
|
||||
</div>
|
||||
<AList class="mt-4 bg-white" :bordered="true">
|
||||
<template #header>
|
||||
<div class="flex gap-2 items-center justify-between text-sm bg-[#fbfbfc] px-5 py-2">
|
||||
<div class="flex gap-4">
|
||||
<ACheckbox></ACheckbox>
|
||||
<AInput class="inline-block w-80" placeholder="输入名称关键字"></AInput>
|
||||
<div class="flex gap-4 my-1.5">
|
||||
<ACheckbox>
|
||||
全选
|
||||
</ACheckbox>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 text-gray-500">
|
||||
<ADropdown>
|
||||
|
|
@ -106,16 +122,16 @@
|
|||
绝弹
|
||||
</span>
|
||||
<span class="text-xs text-gray-400">2023-08-17 17:00:01</span>
|
||||
<ADropdown @select="onRowActionsSelect">
|
||||
<ADropdown @select="onRowActionsSelect" position="br">
|
||||
<span class="inline-flex p-1 hover:bg-slate-100 rounded cursor-pointer">
|
||||
<i class="icon-park-outline-more"></i>
|
||||
</span>
|
||||
<template #content>
|
||||
<ADoption value="detail" class="w-32">
|
||||
<ADoption value="detail">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-repair"></i>
|
||||
</template>
|
||||
<div class="w-32">详情</div>
|
||||
<div>详情</div>
|
||||
</ADoption>
|
||||
<ADoption value="delete" class="!text-red-500 !hover-bg-red-50">
|
||||
<template #icon>
|
||||
|
|
@ -128,6 +144,9 @@
|
|||
</template>
|
||||
</AListItem>
|
||||
</AList>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<a-pagination :total="232" :show-total="true"></a-pagination>
|
||||
</div>
|
||||
</template>
|
||||
</bread-page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<BreadPage>
|
||||
<template #content>
|
||||
<section class="my-page m-5 bg-white p-4">
|
||||
<div>
|
||||
<div class="font-semibold text-lg flex items-center">个人设置</div>
|
||||
<div class="mt-1 text-sm text-gray-400">此表情符号和消息会显示在您的个人资料和界面中。</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="md:flex md:gap-4 mt-3 border-t pt-6">
|
||||
<div class="md:w-56 text-gray-400">基本信息</div>
|
||||
<div class="flex-1 flex">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="个人头像">
|
||||
<a-avatar :size="64">
|
||||
<img src="https://github.com/juetan.png" alt="" />
|
||||
<template #trigger-icon>
|
||||
<i class="icon-park-outline-edit"></i>
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-form-item>
|
||||
<a-form-item label="用户昵称">
|
||||
<a-input v-model="user.nickname" placeholder="请输入" class="!w-[432px]"></a-input>
|
||||
<template #help> 用作系统内显示的名称，可在后台修改 </template>
|
||||
</a-form-item>
|
||||
<a-form-item label="个人描述">
|
||||
<a-textarea v-model="user.description" placeholder="请输入" class="!w-[432px]"></a-textarea>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:flex md:gap-4 mt-6 pt-6 border-t">
|
||||
<div class="md:w-56 text-gray-400">联系方式</div>
|
||||
<div class="flex-1">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="消息推送">
|
||||
<div>
|
||||
<a-checkbox-group direction="vertical" v-model="user.msg">
|
||||
<a-checkbox v-for="i in 3" :value="i">
|
||||
<span class="leading-1">站内消息</span>
|
||||
<div class="text-gray-400 mt-1">当有新的消息时，通过站内信、邮件、短信等方式通知我</div>
|
||||
</a-checkbox>
|
||||
</a-checkbox-group>
|
||||
</div>
|
||||
<template elp> 用作系统内显示的名称，可在后台修改 </template>
|
||||
</a-form-item>
|
||||
<a-form-item label="邮箱账号">
|
||||
<a-input v-model="user.email" placeholder="请输入" class="!w-[432px]"></a-input>
|
||||
<template #help> 推荐使用主流邮箱, 例如: gmail.com, qq.com, 163.com等后缀 </template>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:flex md:gap-4 mt-6 pt-6 border-t">
|
||||
<div class="md:w-56 text-gray-400">偏好设置</div>
|
||||
<div class="flex-1">
|
||||
<a-form layout="vertical">
|
||||
<a-form-item label="主题">
|
||||
<div>
|
||||
<a-radio-group v-model="user.theme" direction="vertical">
|
||||
<a-radio value="dark">
|
||||
黑曜深空
|
||||
<div class="text-gray-400 mt-1">浅绿色主题，包含深林、绿叶、河流等内容</div>
|
||||
</a-radio>
|
||||
<a-radio value="light">
|
||||
天空之城
|
||||
<div class="text-gray-400 mt-1">浅绿色主题，包含深林、绿叶、河流等内容</div>
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:flex md:gap-4 mt-6 pt-6 border-t">
|
||||
<div class="md:w-56 text-gray-400"></div>
|
||||
<div class="flex-1">
|
||||
<a-button type="primary">更新设置</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</BreadPage>
|
||||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { reactive } from 'vue';
|
||||
|
||||
const emailOptions = [
|
||||
{
|
||||
label: "qq.com",
|
||||
value: "qq.com",
|
||||
},
|
||||
{
|
||||
label: "163.com",
|
||||
value: "163.com",
|
||||
},
|
||||
];
|
||||
|
||||
const user =reactive({
|
||||
nickname: "绝弹",
|
||||
description: "选择在公开个人资料中显示私有项目的贡献，但不显示任何项目，仓库或组织信息",
|
||||
theme: "dark",
|
||||
email: "810335188@qq.com",
|
||||
msg: [2],
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.my-page :deep {
|
||||
.arco-form-item.arco-form-item-error,
|
||||
.arco-form-item.arco-form-item-has-help {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.arco-form-item-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.arco-checkbox,
|
||||
.arco-radio {
|
||||
align-items: start;
|
||||
line-height: initial;
|
||||
padding-left: 0;
|
||||
&:not(:first-child) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.arco-checkbox-icon-hover,
|
||||
.arco-radio-icon-hover {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<route lang="json">
|
||||
{
|
||||
"meta": {
|
||||
"sort": 30401,
|
||||
"title": "个人设置",
|
||||
"icon": "icon-park-outline-user"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
|
@ -11,7 +11,9 @@ declare module '@vue/runtime-core' {
|
|||
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb']
|
||||
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem']
|
||||
AButton: typeof import('@arco-design/web-vue')['Button']
|
||||
ACard: typeof import('@arco-design/web-vue')['Card']
|
||||
ACheckbox: typeof import('@arco-design/web-vue')['Checkbox']
|
||||
ACheckboxGroup: typeof import('@arco-design/web-vue')['CheckboxGroup']
|
||||
AConfigProvider: typeof import('@arco-design/web-vue')['ConfigProvider']
|
||||
ADoption: typeof import('@arco-design/web-vue')['Doption']
|
||||
ADrawer: typeof import('@arco-design/web-vue')['Drawer']
|
||||
|
|
@ -20,7 +22,9 @@ declare module '@vue/runtime-core' {
|
|||
AFormItem: typeof import('@arco-design/web-vue')['FormItem']
|
||||
AImage: typeof import('@arco-design/web-vue')['Image']
|
||||
AInput: typeof import('@arco-design/web-vue')['Input']
|
||||
AInputGroup: typeof import('@arco-design/web-vue')['InputGroup']
|
||||
AInputPassword: typeof import('@arco-design/web-vue')['InputPassword']
|
||||
AInputSearch: typeof import('@arco-design/web-vue')['InputSearch']
|
||||
ALayout: typeof import('@arco-design/web-vue')['Layout']
|
||||
ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
|
||||
ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
|
||||
|
|
@ -31,9 +35,14 @@ declare module '@vue/runtime-core' {
|
|||
AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta']
|
||||
AMenu: typeof import('@arco-design/web-vue')['Menu']
|
||||
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem']
|
||||
APagination: typeof import('@arco-design/web-vue')['Pagination']
|
||||
ARadio: typeof import('@arco-design/web-vue')['Radio']
|
||||
ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
|
||||
ASelect: typeof import('@arco-design/web-vue')['Select']
|
||||
ASpace: typeof import('@arco-design/web-vue')['Space']
|
||||
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu']
|
||||
ATag: typeof import('@arco-design/web-vue')['Tag']
|
||||
ATextarea: typeof import('@arco-design/web-vue')['Textarea']
|
||||
ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
|
||||
BreadCrumb: typeof import('./../components/breadcrumb/bread-crumb.vue')['default']
|
||||
BreadPage: typeof import('./../components/breadcrumb/bread-page.vue')['default']
|
||||
|
|
|
|||
Loading…
Reference in New Issue