feat: 临时
luoer
parent
4aef16583d
commit
53ddf5fb20
|
|
@ -1,16 +1,19 @@
|
|||
import { dayjs } from '@/libs/dayjs';
|
||||
import { TableColumn } from '../hooks/useTableColumn';
|
||||
import { Avatar } from '@arco-design/web-vue';
|
||||
|
||||
export function useUpdateColumn(extra: TableColumn = {}): TableColumn {
|
||||
return {
|
||||
title: '更新',
|
||||
title: '修改',
|
||||
dataIndex: 'createdAt',
|
||||
width: 180,
|
||||
render: ({ record }) => (
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<span>{record.updatedBy ?? '无'}</span>
|
||||
<span class="text-gray-400 text-xs truncate" title={record.updatedAt}>
|
||||
更新于 {dayjs(record.updatedAt).fromNow()}
|
||||
<div class="flex items-center gap-2 overflow-hidden">
|
||||
<span>
|
||||
<Avatar size={24}>{record.updatedBy?.[0] ?? '无'}</Avatar>
|
||||
</span>
|
||||
<span class="ttruncate" title={record.updatedAt}>
|
||||
{dayjs(record.updatedAt).fromNow()}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
|
|
@ -24,10 +27,12 @@ export function useCreateColumn(extra: TableColumn = {}): TableColumn {
|
|||
dataIndex: 'createdAt',
|
||||
width: 180,
|
||||
render: ({ record }) => (
|
||||
<div class="flex flex-col overflow-hidden">
|
||||
<span>{record.createdBy ?? '无'}</span>
|
||||
<div class="flex items-center gap-2 overflow-hidden">
|
||||
<span>
|
||||
<Avatar size={24}>{record.createdBy?.[0] ?? '无'}</Avatar>
|
||||
</span>
|
||||
<span class="text-gray-400 text-xs truncate" title={record.createdAt}>
|
||||
创建于 {dayjs(record.createdAt).fromNow()}
|
||||
{dayjs(record.createdAt).fromNow()}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<bread-page>
|
||||
<div>
|
||||
<h2 class="m-0 text-base">常规设置</h2>
|
||||
<p class="text-gray-500 mt-2">首次为你的帐户添加密码时，你需要前往密码重置页面，以便我们验证你的身份。</p>
|
||||
<p class="text-gray-500 mt-1">首次为你的帐户添加密码时，你需要前往密码重置页面，以便我们验证你的身份。</p>
|
||||
</div>
|
||||
<a-form :model="{}" :label-col-props="{ span: 3 }" label-align="left" layout="vertical" class="space-y-6 mt-4 col-form">
|
||||
<a-form :model="{}" label-align="left" class="space-y-6 mt-6 col-form divide-y">
|
||||
<a-form-item label="站点LOGO">
|
||||
<a-avatar :size="64">
|
||||
<img :src="appStore.logo" alt="" />
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</a-avatar>
|
||||
<template #help>提示：仅支持 5MB 以内大小, png 或 jpg 格式的图片 </template>
|
||||
</a-form-item>
|
||||
<a-form-item label="站点名称">
|
||||
<a-form-item label="站点名称" class="pt-6">
|
||||
<a-input
|
||||
v-model="appStore.title"
|
||||
placeholder="请输入"
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
></a-input>
|
||||
<template #help> 用作系统内显示的名称，可在后台修改 </template>
|
||||
</a-form-item>
|
||||
<a-form-item label="站点描述">
|
||||
<a-form-item label="站点描述" class="pt-6">
|
||||
<a-textarea
|
||||
v-model="appStore.subtitle"
|
||||
placeholder="请输入"
|
||||
|
|
@ -35,11 +35,11 @@
|
|||
></a-textarea>
|
||||
<template #help> 启用后，消息通知将在左上角进行提示. </template>
|
||||
</a-form-item>
|
||||
<a-form-item label="站点URL">
|
||||
<a-form-item label="站点URL" class="pt-6">
|
||||
<a-input v-model="appStore.title" placeholder="请输入" class="!w-[432px]" allow-clear></a-input>
|
||||
<template #help> 示例：https://www.juetan.cn。用于静态资源前缀、应用接口前缀等用途。 </template>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-form-item class="pt-6">
|
||||
<a-button type="primary">保存修改</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<route lang="json">
|
||||
{
|
||||
"redirect": "/setting/common",
|
||||
"component": null,
|
||||
// "component": null,
|
||||
"meta": {
|
||||
"sort": 30401,
|
||||
"title": "系统设置",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,30 @@
|
|||
<template>
|
||||
<bread-page>
|
||||
<div class="flex">
|
||||
<div class="w-full">
|
||||
<div class="flex item-center justify-between gap-4">
|
||||
<div>
|
||||
<div>
|
||||
<h2 class="m-0 text-base">邮件设置</h2>
|
||||
<p class="text-gray-500 mt-1.5">首次为你的帐户添加密码时，你需要前往密码重置页面，以便我们验证你的身份。</p>
|
||||
<h2 class="m-0 text-lg font-semibold flex items-center gap-2">
|
||||
邮件设置
|
||||
<a-tag :color="mail.enable ? 'green' : 'red'">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-check-one"></i>
|
||||
{{ mail.enable ? '已启用' : '已停用' }}
|
||||
</template>
|
||||
</a-tag>
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-1.5 p-0 m0 m-0">首次为你的帐户添加密码时，你需要前往密码重置页面，以便我们验证你的身份。</p>
|
||||
</div>
|
||||
<a-form :model="{}" :label-col-props="{ span: 3 }" :disabled="!mail.enable" layout="vertical" label-align="left" class="col-form divide-y space-y-6">
|
||||
<div class="flex items-center pr-6">
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<i class="icon-park-outline-send-email"></i>
|
||||
</template>
|
||||
测试
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<a-form :model="{}" :disabled="!mail.enable" label-align="left" class="col-form divide-y mt-8 space-y-6">
|
||||
<a-form-item label="是否启用" :disabled="false">
|
||||
<a-switch v-model="mail.enable"> </a-switch>
|
||||
<template #help> 启用后其他服务可发送邮件通知。 </template>
|
||||
|
|
@ -38,15 +56,15 @@
|
|||
<a-input :disabled="!mail.enable || !mail.smtpAuth" v-model="mail.smtpPass" placeholder="请输入" class="!w-[432px]"></a-input>
|
||||
<template #help> 示例：AATOLARFABJKYWUY。具体请在对应邮箱设置面板进行生成。 </template>
|
||||
</a-form-item>
|
||||
<a-form-item :disabled="false" class="pt-2">
|
||||
<a-form-item :disabled="false" class="pt-6">
|
||||
<a-button type="primary"> 保存修改 </a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-divider direction="vertical" :margin="32"></a-divider>
|
||||
<!-- <a-divider direction="vertical" :margin="32"></a-divider>
|
||||
<div class="flex-1">
|
||||
<div>
|
||||
<div class="text-base font-semibold">邮件测试</div>
|
||||
<div class="text-lg font-normal">邮件测试</div>
|
||||
<div class="text-gray-400 mt-1">发送一封测试邮件，检测邮件设置是否能正常工作。</div>
|
||||
<div class="mt-6">
|
||||
<a-input placeholder="接收人邮箱" class="w-[432px]!"></a-input>
|
||||
|
|
@ -56,7 +74,7 @@
|
|||
<a-button type="primary" :disabled="!mail.enable">发送邮件</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</bread-page>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -37,19 +37,9 @@ const usernameRender: TableColumnRender = ({ record }) => (
|
|||
</a-avatar>
|
||||
<div class="w-full flex-1 overflow-hidden">
|
||||
<div>
|
||||
<span class="cursor-pointer hover:text-brand-500">{record.nickname}</span>
|
||||
<span class="text-orange-500 truncate ml-2">@{record.username}</span>
|
||||
</div>
|
||||
<div class="w-full text-gray-400 space-x-4 text-xs">
|
||||
<span>
|
||||
<i class="icon-park-outline-mail mr-1 align-[-4px]"></i>
|
||||
contact@juetan.cn
|
||||
</span>
|
||||
<span>
|
||||
<i class="icon-park-outline-phone-telephone mr-1"></i>
|
||||
1591234568
|
||||
</span>
|
||||
<span class="cursor-pointer text-brand-600 hover:text-brand-400">{record.nickname}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -62,11 +52,15 @@ const { component: UserTable } = useTable({
|
|||
render: usernameRender,
|
||||
},
|
||||
{
|
||||
...useCreateColumn(),
|
||||
},
|
||||
{
|
||||
...useUpdateColumn(),
|
||||
title: '创建',
|
||||
render: () => '3 天前'
|
||||
},
|
||||
// {
|
||||
// ...useCreateColumn(),
|
||||
// },
|
||||
// {
|
||||
// ...useUpdateColumn(),
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
type: 'button',
|
||||
|
|
|
|||
|
|
@ -163,7 +163,7 @@ body {
|
|||
|
||||
.col-form {
|
||||
.arco-form-item-wrapper-col {
|
||||
flex-direction: row;
|
||||
// flex-direction: row;
|
||||
}
|
||||
.arco-form-item-content-wrapper {
|
||||
width: 450px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue