feat: 优化素材页面显示布局
luoer
parent
943ec54aed
commit
706aebe7c2
|
|
@ -1,17 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<BreadPage>
|
<BreadPage>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="overflow-hidden grid grid-cols-[auto_1fr] gap-2 m-4">
|
<a-tabs class="tabs-page">
|
||||||
<AnGroup class="bg-white p-4 w-[242px]" :current="current" @change="onCategoryChange"></AnGroup>
|
<a-tab-pane key="1" title="素材管理">
|
||||||
<div class="bg-white p-4">
|
<div class="overflow-hidden grid grid-cols-[auto_1fr] gap-2 m-4 mt-1">
|
||||||
<MaterialTable>
|
<!-- <AnGroup class="bg-white p-4 w-[242px]" :current="current" @change="onCategoryChange"></AnGroup> -->
|
||||||
<template #action>
|
<div class="bg-white p-4">
|
||||||
<AnUpload @success="() => tableRef?.refresh()"></AnUpload>
|
<MaterialTable>
|
||||||
</template>
|
<template #action>
|
||||||
</MaterialTable>
|
<AnUpload @success="() => tableRef?.refresh()"></AnUpload>
|
||||||
<AnPreview v-model:visible="viewer.visible" :type="viewer.type" :url="viewer.url"></AnPreview>
|
</template>
|
||||||
</div>
|
</MaterialTable>
|
||||||
</div>
|
<AnPreview v-model:visible="viewer.visible" :type="viewer.type" :url="viewer.url"></AnPreview>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="2" title="分类管理"></a-tab-pane>
|
||||||
|
<a-tab-pane key="3" title="显示设置"></a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
</template>
|
</template>
|
||||||
</BreadPage>
|
</BreadPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -63,7 +69,7 @@ const {
|
||||||
return (
|
return (
|
||||||
<div class="group flex items-center gap-4">
|
<div class="group flex items-center gap-4">
|
||||||
<div class="w-8 flex justify-center">
|
<div class="w-8 flex justify-center">
|
||||||
{record.mimetype.startsWith('image') ? (
|
{record.mimetype.startsWith('image1') ? (
|
||||||
<a-avatar size={32} shape="square">
|
<a-avatar size={32} shape="square">
|
||||||
<img src={record.path}></img>
|
<img src={record.path}></img>
|
||||||
</a-avatar>
|
</a-avatar>
|
||||||
|
|
@ -106,13 +112,6 @@ const {
|
||||||
title: '操作',
|
title: '操作',
|
||||||
width: 160,
|
width: 160,
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
|
||||||
text: '下载',
|
|
||||||
onClick: props => {
|
|
||||||
window.open(props.record.path, '_blank');
|
|
||||||
},
|
|
||||||
icon: 'icon-park-outline-download',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'modify',
|
type: 'modify',
|
||||||
text: '修改',
|
text: '修改',
|
||||||
|
|
@ -171,9 +170,9 @@ const {
|
||||||
width: '100px',
|
width: '100px',
|
||||||
},
|
},
|
||||||
triggerProps: {
|
triggerProps: {
|
||||||
autoFitPopupMinWidth: true
|
autoFitPopupMinWidth: true,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
field: 'name',
|
field: 'name',
|
||||||
|
|
|
||||||
|
|
@ -1,60 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<BreadPage :content-padding="false">
|
<BreadPage :content-padding="false">
|
||||||
<section class="my-page bg-white">
|
<template #content>
|
||||||
<a-tabs size="large">
|
<section class="my-page m-4 bg-white rounded">
|
||||||
<a-tab-pane key="1" title="基本设置">
|
<a-tabs size="large" class="h-full">
|
||||||
|
<a-tab-pane key="8" title="常规设置">
|
||||||
<a-form
|
<a-form
|
||||||
:model="user"
|
:model="user"
|
||||||
:label-col-props="{ span: 3 }"
|
:label-col-props="{ span: 3 }"
|
||||||
label-align="left"
|
label-align="left"
|
||||||
|
layout="vertical"
|
||||||
class="px-6 divide-y divide-gray-100"
|
class="px-6 divide-y divide-gray-100"
|
||||||
>
|
>
|
||||||
<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>
|
|
||||||
<template #help> 支持 5MB 以内大小, png 或 jpg 格式的图片 </template>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="用户昵称">
|
|
||||||
<a-input
|
|
||||||
v-model="user.nickname"
|
|
||||||
placeholder="请输入"
|
|
||||||
class="!w-[432px]"
|
|
||||||
allow-clear
|
|
||||||
:max-length="24"
|
|
||||||
:show-word-limit="true"
|
|
||||||
></a-input>
|
|
||||||
<template #help> 用作系统内显示的名称，可在后台修改 </template>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="用户描述">
|
|
||||||
<a-textarea
|
|
||||||
v-model="user.description"
|
|
||||||
placeholder="请输入"
|
|
||||||
class="!w-[432px] h-24"
|
|
||||||
:max-length="140"
|
|
||||||
:show-word-limit="true"
|
|
||||||
></a-textarea>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="性别">
|
|
||||||
<a-radio-group v-model="user.gender" type="button">
|
|
||||||
<a-radio :value="1">男</a-radio>
|
|
||||||
<a-radio :value="2">女</a-radio>
|
|
||||||
<a-radio :value="3">保密</a-radio>
|
|
||||||
</a-radio-group>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="出生日期">
|
|
||||||
<a-date-picker v-model="user.birth"></a-date-picker>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item>
|
|
||||||
<a-button type="primary">保存修改</a-button>
|
|
||||||
</a-form-item>
|
|
||||||
</a-form>
|
|
||||||
</a-tab-pane>
|
|
||||||
<a-tab-pane key="5" title="消息推送">
|
|
||||||
<a-form :model="user" :label-col-props="{ span: 3 }" label-align="left" class="px-6 divide-y divide-gray-100">
|
|
||||||
<a-form-item label="站点LOGO">
|
<a-form-item label="站点LOGO">
|
||||||
<a-avatar :size="64">
|
<a-avatar :size="64">
|
||||||
<img :src="appStore.logo" alt="" />
|
<img :src="appStore.logo" alt="" />
|
||||||
|
|
@ -62,7 +18,7 @@
|
||||||
<i class="icon-park-outline-edit"></i>
|
<i class="icon-park-outline-edit"></i>
|
||||||
</template>
|
</template>
|
||||||
</a-avatar>
|
</a-avatar>
|
||||||
<template #help> 支持 5MB 以内大小, png 或 jpg 格式的图片 </template>
|
<template #help>提示：仅支持 5MB 以内大小, png 或 jpg 格式的图片 </template>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="站点名称">
|
<a-form-item label="站点名称">
|
||||||
<a-input
|
<a-input
|
||||||
|
|
@ -83,47 +39,95 @@
|
||||||
:max-length="140"
|
:max-length="140"
|
||||||
:show-word-limit="true"
|
:show-word-limit="true"
|
||||||
></a-textarea>
|
></a-textarea>
|
||||||
|
<template #help>
|
||||||
|
启用后，消息通知将在左上角进行提示.
|
||||||
|
</template>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="消息推送">
|
<a-form-item label="站点URL">
|
||||||
<div>
|
<a-input
|
||||||
<a-checkbox-group direction="vertical" v-model="user.msg">
|
v-model="appStore.title"
|
||||||
<a-checkbox v-for="i in 3" :value="i">
|
placeholder="请输入"
|
||||||
<span class="leading-1">站内消息</span>
|
class="!w-[432px]"
|
||||||
<div class="text-gray-400 mt-1">当有新的消息时，通过站内信、邮件、短信等方式通知我</div>
|
allow-clear
|
||||||
</a-checkbox>
|
></a-input>
|
||||||
</a-checkbox-group>
|
<template #help> 示例：https://www.juetan.cn。用于静态资源前缀、应用接口前缀等用途。 </template>
|
||||||
</div>
|
|
||||||
<template elp> 用作系统内显示的名称，可在后台修改 </template>
|
|
||||||
</a-form-item>
|
|
||||||
<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-item label="SMTP地址">
|
|
||||||
<a-input v-model="user.smtpIp" allow-clear placeholder="请输入" class="!w-[314px]"></a-input>
|
|
||||||
<span class="inline-block px-2">:</span>
|
|
||||||
<a-input-number v-model="user.smtpPort" :min="0" :max="65535" class="w-24!"></a-input-number>
|
|
||||||
<template #help> 推荐使用主流邮箱, 例如: gmail.com, qq.com, 163.com等后缀 </template>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="SMTP账号">
|
|
||||||
<a-input v-model="user.smtpUser" placeholder="请输入" class="!w-[432px]"></a-input>
|
|
||||||
<template #help> 例如: gmail.com, qq.com, 163.com等后缀 </template>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item label="SMTP密钥">
|
|
||||||
<a-input v-model="user.smtpPass" placeholder="请输入" class="!w-[432px]"></a-input>
|
|
||||||
<template #help> 测试 </template>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
|
<a-button type="primary">保存修改</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-tab-pane>
|
||||||
|
<a-tab-pane key="5" title="邮件设置">
|
||||||
|
<!-- <div class="mb-6 px-6">
|
||||||
|
<div class="text-base font-semibold">邮件来源</div>
|
||||||
|
<label class="text-sm block mt-2">
|
||||||
|
目前仅支持 SMTP 协议，用于发送验证码、重置密码和消息通知等用途。
|
||||||
|
</label>
|
||||||
|
</div> -->
|
||||||
|
<a-form
|
||||||
|
:model="user"
|
||||||
|
:label-col-props="{ span: 3 }"
|
||||||
|
:disabled="!mail.enable"
|
||||||
|
layout="vertical"
|
||||||
|
label-align="left"
|
||||||
|
class="px-6 divide-y divide-gray-100"
|
||||||
|
>
|
||||||
|
<a-form-item label="是否启用" :disabled="false">
|
||||||
|
<a-radio-group v-model="mail.enable" :type="'button'">
|
||||||
|
<a-radio :value="true">启用</a-radio>
|
||||||
|
<a-radio :value="false">禁用</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
<template #help> 启用后，对应时间触发后将会自动向用户发送邮件通知 </template>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="服务器和端口">
|
||||||
|
<a-input v-model="mail.smtpHost" allow-clear placeholder="请输入" class="!w-[314px]"></a-input>
|
||||||
|
<span class="inline-block px-2">:</span>
|
||||||
|
<a-input-number v-model="mail.smtpPort" :min="0" :max="65535" class="w-24!"></a-input-number>
|
||||||
|
<template #help> 示例: smtp.163.com:25。国内常见有
|
||||||
|
<a target="_blank" class="mr-2" href="https://mail.163.com">网易邮箱</a>
|
||||||
|
<a target="_blank" class="mr-2" href="http://mail.aliyun.com/">阿里邮箱</a>
|
||||||
|
<a target="_blank" class="mr-2" href="https://mail.qq.com">QQ邮箱</a>等，HTTP 默认 25 端口，HTTPS 默认 465 端口。
|
||||||
|
</template>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="发信人地址">
|
||||||
|
<a-input v-model="mail.sender" placeholder="请输入" class="!w-[432px]"></a-input>
|
||||||
|
<template #help> 示例: example@mail.com。仅作为发送邮件时的发送人标识，与登陆无关。</template>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="是否需要验证">
|
||||||
|
<a-radio-group v-model="mail.authNeed" :type="'button'">
|
||||||
|
<a-radio :value="true">是</a-radio>
|
||||||
|
<a-radio :value="false">否</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
<template #help> 可选 </template>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="验证账号">
|
||||||
|
<a-input
|
||||||
|
:disabled="!mail.enable || !mail.authNeed"
|
||||||
|
v-model="mail.authUser"
|
||||||
|
placeholder="请输入"
|
||||||
|
class="!w-[432px]"
|
||||||
|
></a-input>
|
||||||
|
<template #help> 示例: example@mail.com。企业邮箱请使用企业域名后缀。</template>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item label="验证密码">
|
||||||
|
<a-input
|
||||||
|
:disabled="!mail.enable || !mail.authNeed"
|
||||||
|
v-model="mail.authPass"
|
||||||
|
placeholder="请输入"
|
||||||
|
class="!w-[432px]"
|
||||||
|
></a-input>
|
||||||
|
<template #help> 示例：AATOLARFABJKYWUY。具体请在对应邮箱设置面板进行生成。 </template>
|
||||||
|
</a-form-item>
|
||||||
|
<!-- <a-form-item label="发送测试邮件">
|
||||||
|
<div>
|
||||||
|
<a-textarea placeholder="写点什么..." class="w-[432px]!"></a-textarea>
|
||||||
|
<div class="mt-1">
|
||||||
|
<a-link :disabled="!mail.enable">发送</a-link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #help> 测试邮箱配置是否正确。 </template>
|
||||||
|
</a-form-item> -->
|
||||||
|
<a-form-item :disabled="false">
|
||||||
<a-button type="primary"> 保存修改 </a-button>
|
<a-button type="primary"> 保存修改 </a-button>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
|
@ -134,44 +138,7 @@
|
||||||
<div v-for="i in 3" class="border-t py-4 flex justify-between items-center gap-4">
|
<div v-for="i in 3" class="border-t py-4 flex justify-between items-center gap-4">
|
||||||
<div class="flex gap-3 items-center">
|
<div class="flex gap-3 items-center">
|
||||||
<div class="p-2 bg-slate-100 rounded">
|
<div class="p-2 bg-slate-100 rounded">
|
||||||
<svg
|
<i class="icon-park-outline-mail"></i>
|
||||||
t="1692015760052"
|
|
||||||
class="icon h-8 w-10"
|
|
||||||
viewBox="0 0 1264 1024"
|
|
||||||
version="1.1"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
p-id="7353"
|
|
||||||
width="200"
|
|
||||||
height="200"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M0 333.884235a90.352941 90.352941 0 0 1 90.352941-90.352941h1084.235294a90.352941 90.352941 0 0 1 90.352941 90.352941v271.058824h-256a105.411765 105.411765 0 1 0 0 210.823529H1264.941176v90.352941a90.352941 90.352941 0 0 1-90.352941 90.352942H90.352941a90.352941 90.352941 0 0 1-90.352941-90.352942v-572.235294z m1008.941176 421.647059a45.176471 45.176471 0 1 0 0-90.352941 45.176471 45.176471 0 0 0 0 90.352941z"
|
|
||||||
fill="#C1D0FF"
|
|
||||||
p-id="7354"
|
|
||||||
></path>
|
|
||||||
<path
|
|
||||||
d="M90.352941 190.343529a60.235294 60.235294 0 0 1 66.861177-59.843764l963.764706 107.068235A60.235294 60.235294 0 0 1 1174.588235 297.441882v187.030589a60.235294 60.235294 0 0 1-60.235294 60.235294H150.588235a60.235294 60.235294 0 0 1-60.235294-60.235294V190.343529zM140.649412 83.275294A90.352941 90.352941 0 0 1 249.615059 13.251765l886.573176 205.914353L139.264 90.051765l1.385412-6.746353z"
|
|
||||||
fill="#0B77FF"
|
|
||||||
p-id="7355"
|
|
||||||
></path>
|
|
||||||
<path
|
|
||||||
d="M0 331.294118a90.352941 90.352941 0 0 1 90.352941-90.352942h1084.235294a90.352941 90.352941 0 0 1 90.352941 90.352942v271.058823h-256a105.411765 105.411765 0 1 0 0 210.82353H1264.941176v90.352941a90.352941 90.352941 0 0 1-90.352941 90.352941H90.352941a90.352941 90.352941 0 0 1-90.352941-90.352941V331.294118z"
|
|
||||||
fill="#E8E8E8"
|
|
||||||
fill-opacity=".1"
|
|
||||||
p-id="7356"
|
|
||||||
></path>
|
|
||||||
<path
|
|
||||||
d="M90.352941 271.058824h1084.235294a60.235294 60.235294 0 0 1 60.235294 60.235294v240.941176h-225.882353a135.529412 135.529412 0 1 0 0 271.058824H1234.823529v60.235294a60.235294 60.235294 0 0 1-60.235294 60.235294H90.352941a60.235294 60.235294 0 0 1-60.235294-60.235294V331.294118a60.235294 60.235294 0 0 1 60.235294-60.235294z m1174.588235 60.235294a90.352941 90.352941 0 0 0-90.352941-90.352942H90.352941a90.352941 90.352941 0 0 0-90.352941 90.352942v572.235294a90.352941 90.352941 0 0 0 90.352941 90.352941h1084.235294a90.352941 90.352941 0 0 0 90.352941-90.352941v-90.352941h-256a105.411765 105.411765 0 1 1 0-210.82353H1264.941176v-271.058823z"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
fill-opacity=".6"
|
|
||||||
p-id="7357"
|
|
||||||
></path>
|
|
||||||
<path
|
|
||||||
d="M353.882353 424.237176H271.058824l82.823529 195.764706h-41.411765v39.152942h82.82353v39.152941h-82.82353v39.152941h82.82353v78.305882h82.823529v-78.305882h82.823529v-39.152941h-82.823529v-39.152941h82.823529v-39.152942H519.529412l82.823529-195.764706h-82.823529l-82.82353 195.764706-82.823529-195.764706z"
|
|
||||||
fill="#FFFFFF"
|
|
||||||
p-id="7358"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="text-gray-900 text-base">支付功能</div>
|
<div class="text-gray-900 text-base">支付功能</div>
|
||||||
|
|
@ -189,6 +156,7 @@
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
</section>
|
</section>
|
||||||
|
</template>
|
||||||
</BreadPage>
|
</BreadPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -196,7 +164,17 @@
|
||||||
import { useAppStore } from '@/store';
|
import { useAppStore } from '@/store';
|
||||||
import { reactive } from 'vue';
|
import { reactive } from 'vue';
|
||||||
|
|
||||||
const appStore = useAppStore()
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
const mail = reactive({
|
||||||
|
enable: true,
|
||||||
|
smtpHost: '10.10.10.30',
|
||||||
|
smtpPort: 25,
|
||||||
|
sender: 'no-reply@juetan.cn',
|
||||||
|
authNeed: true,
|
||||||
|
authUser: '952222@163.com',
|
||||||
|
authPass: 'FenZyealdsa@s92.',
|
||||||
|
});
|
||||||
|
|
||||||
const user = reactive({
|
const user = reactive({
|
||||||
nickname: '绝弹',
|
nickname: '绝弹',
|
||||||
|
|
@ -215,8 +193,10 @@ const user = reactive({
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
.my-page {
|
.my-page {
|
||||||
.arco-form-item-label {
|
.arco-form-item-wrapper-col {
|
||||||
color: var(--color-text-3);
|
display: grid;
|
||||||
|
grid-template-columns: min(432px) 1fr;
|
||||||
|
gap: 32px;
|
||||||
}
|
}
|
||||||
.arco-tabs-nav-type-line .arco-tabs-tab {
|
.arco-tabs-nav-type-line .arco-tabs-tab {
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
|
@ -228,15 +208,6 @@ const user = reactive({
|
||||||
.arco-form-item-message {
|
.arco-form-item-message {
|
||||||
margin-top: 4px;
|
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-checkbox-icon-hover,
|
||||||
.arco-radio-icon-hover {
|
.arco-radio-icon-hover {
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
|
||||||
|
|
@ -37,3 +37,11 @@ a {
|
||||||
border: 0 solid #e5e7eb;
|
border: 0 solid #e5e7eb;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tabs-page {
|
||||||
|
.arco-tabs-nav {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
.arco-tabs-nav-tab {
|
||||||
|
padding-left: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue