بهبود کامپوننت‌های personality و بروزرسانی export HTML

This commit is contained in:
hamid zarghami
2025-07-30 16:32:01 +03:30
parent 25e00442d4
commit f88ebca23b
4 changed files with 16 additions and 26 deletions
@@ -17,7 +17,7 @@ const ContentSection: FC = () => {
if (!data || !data.content) { if (!data || !data.content) {
return ( return (
<tr> <tr>
<td style={{ height: '246px', textAlign: 'center', verticalAlign: 'middle', paddingTop: '16px' }}> <td style={{ height: '246px', textAlign: 'right', verticalAlign: 'middle', paddingTop: '0px' }}>
<div>در حال بارگذاری...</div> <div>در حال بارگذاری...</div>
</td> </td>
</tr> </tr>
@@ -86,7 +86,7 @@ const ContentSection: FC = () => {
return ( return (
<tr onClick={(e) => handleSectionClick(SectionName.CONTENT, e)}> <tr onClick={(e) => handleSectionClick(SectionName.CONTENT, e)}>
<td style={{ paddingTop: '16px' }}> <td style={{ paddingTop: '0px' }}>
{ {
data.content.columnsCount > 0 ? data.content.columnsCount > 0 ?
<table width="100%" cellPadding="0" cellSpacing="0" border={0}> <table width="100%" cellPadding="0" cellSpacing="0" border={0}>
@@ -178,7 +178,7 @@ const ContentSection: FC = () => {
<td <td
width="100%" width="100%"
height={item?.buttons && item.buttons.length > 0 ? "203" : "230"} height={item?.buttons && item.buttons.length > 0 ? "203" : "230"}
align={item?.texts?.[0]?.alignment || 'center'} align={item?.texts?.[0]?.alignment || 'right'}
valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' : valign={item?.texts?.[0]?.verticalAlignment === VerticalAlignment.TOP ? 'top' :
item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'} item?.texts?.[0]?.verticalAlignment === VerticalAlignment.BOTTOM ? 'bottom' : 'middle'}
style={{ style={{
@@ -255,7 +255,7 @@ const ContentSection: FC = () => {
height: '286px', height: '286px',
border: activeSection === SectionName.CONTENT ? '1px dashed #0038FF' : '1px dashed #E5E7EB', border: activeSection === SectionName.CONTENT ? '1px dashed #0038FF' : '1px dashed #E5E7EB',
borderRadius: '24px', borderRadius: '24px',
textAlign: 'center', textAlign: 'right',
verticalAlign: 'middle', verticalAlign: 'middle',
padding: '10px', padding: '10px',
cursor: 'pointer' cursor: 'pointer'
@@ -17,7 +17,7 @@ const FooterSection: FC = () => {
if (!data || !data.footer) { if (!data || !data.footer) {
return ( return (
<tr> <tr>
<td style={{ height: '123px', textAlign: 'center', verticalAlign: 'middle', paddingTop: '16px' }}> <td style={{ height: '123px', textAlign: 'center', verticalAlign: 'middle', paddingTop: '0px' }}>
<div>در حال بارگذاری...</div> <div>در حال بارگذاری...</div>
</td> </td>
</tr> </tr>
@@ -83,7 +83,7 @@ const FooterSection: FC = () => {
return ( return (
<tr onClick={(e) => handleSectionClick(SectionName.FOOTER, e)}> <tr onClick={(e) => handleSectionClick(SectionName.FOOTER, e)}>
<td style={{ paddingTop: '16px' }}> <td style={{ paddingTop: '0px' }}>
{ {
data.footer.columnsCount > 0 ? data.footer.columnsCount > 0 ?
<table width="100%" cellPadding="0" cellSpacing="0" border={0}> <table width="100%" cellPadding="0" cellSpacing="0" border={0}>
@@ -118,7 +118,7 @@ const FooterSection: FC = () => {
backgroundRepeat: item?.style?.backgroundRepeat || 'no-repeat', backgroundRepeat: item?.style?.backgroundRepeat || 'no-repeat',
backgroundPosition: item?.style?.backgroundPosition || 'center', backgroundPosition: item?.style?.backgroundPosition || 'center',
cursor: 'pointer', cursor: 'pointer',
padding: '8px', // padding: '8px',
verticalAlign: 'top', verticalAlign: 'top',
borderRadius: '8px', borderRadius: '8px',
position: 'relative' position: 'relative'
@@ -120,7 +120,7 @@ const HeaderSection: FC = () => {
backgroundRepeat: item?.style?.backgroundRepeat || 'no-repeat', backgroundRepeat: item?.style?.backgroundRepeat || 'no-repeat',
backgroundPosition: item?.style?.backgroundPosition || 'center', backgroundPosition: item?.style?.backgroundPosition || 'center',
cursor: 'pointer', cursor: 'pointer',
padding: '8px', // padding: '8px',
verticalAlign: 'top', verticalAlign: 'top',
borderRadius: '8px', borderRadius: '8px',
position: 'relative' position: 'relative'
@@ -48,7 +48,7 @@ export const exportPersonalityToHTML = async (
`<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> `<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<tbody> <tbody>
<tr> <tr>
<td align="${textItem.alignment || "center"}" style="color: ${ <td align="${textItem.alignment || "right"}" style="color: ${
textItem.color || "#000000" textItem.color || "#000000"
}; font-size: ${ }; font-size: ${
textItem.fontSize || 14 textItem.fontSize || 14
@@ -192,7 +192,7 @@ export const exportPersonalityToHTML = async (
}" cellpadding="0" cellspacing="0" border="0"> }" cellpadding="0" cellspacing="0" border="0">
<tbody> <tbody>
<tr> <tr>
<td align="center" valign="middle" style="text-align: center;"> <td align="center" valign="middle" style="text-align: right;">
<img src="${image.src}" alt="${ <img src="${image.src}" alt="${
image.alt || "تصویر آپلود شده" image.alt || "تصویر آپلود شده"
}" width="${image.width || "100%"}" height="${ }" width="${image.width || "100%"}" height="${
@@ -277,7 +277,7 @@ export const exportPersonalityToHTML = async (
<table width="100%" cellpadding="0" cellspacing="0" border="0"> <table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody> <tbody>
<tr> <tr>
<td style="padding: 10px; border-radius: 24px;"> <td style="padding: 0px; border-radius: 24px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;">
<tbody> <tbody>
<tr> <tr>
@@ -336,22 +336,12 @@ export const exportPersonalityToHTML = async (
: "67"; : "67";
result += `<tr> result += `<tr>
<td width="100%" height="${mainHeight}" align="${ <td width="100%" height="${mainHeight}" style="padding: 20px; vertical-align: top; font-size: 15px; line-height: 1.8;">
item?.texts?.[0]?.alignment || "center"
}" valign="${
item?.texts?.[0]?.verticalAlignment ===
VerticalAlignment.TOP
? "top"
: item?.texts?.[0]?.verticalAlignment ===
VerticalAlignment.BOTTOM
? "bottom"
: "middle"
}" style="padding: 8px; font-size: 14px; line-height: 1.4;">
${renderTexts(item?.texts || [])} ${renderTexts(item?.texts || [])}
${renderImages(item?.images || [])} ${renderImages(item?.images || [])}
${ ${
isContentSection isContentSection
? '<div style="margin: 16px 0; text-align: center;">{{content}}</div>' ? '<div style="margin: 0; text-align: right;">{{content}}</div>'
: "" : ""
} }
</td> </td>
@@ -409,7 +399,7 @@ export const exportPersonalityToHTML = async (
<tr> <tr>
<td style="height: ${ <td style="height: ${
sectionHeight === "246px" ? "286px" : sectionHeight sectionHeight === "246px" ? "286px" : sectionHeight
}; border-radius: 24px; text-align: center; vertical-align: middle; padding: 10px;"> }; border-radius: 24px; text-align: right; vertical-align: middle; padding: 0px;">
<div style="color: #888; font-size: 14px; margin-bottom: 8px;"> <div style="color: #888; font-size: 14px; margin-bottom: 8px;">
${emptyMessage} ${emptyMessage}
</div> </div>
@@ -427,8 +417,8 @@ export const exportPersonalityToHTML = async (
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;"> <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;">
<tbody> <tbody>
${renderSection(data.header, "123px")} ${renderSection(data.header, "123px")}
${renderSection(data.content, "246px", "16px", true)} ${renderSection(data.content, "246px", "", true)}
${renderSection(data.footer, "123px", "16px")} ${renderSection(data.footer, "123px", "")}
</tbody> </tbody>
</table> </table>
</div>`; </div>`;