Merge remote-tracking branch 'origin/feature/v1.2灵机空间-内容上传审核_rxd' into test
This commit is contained in:
@ -12,7 +12,7 @@
|
||||
:disabled="!props.src"
|
||||
>
|
||||
<template #content>
|
||||
<div class="preview-container" :style="containerStyle">
|
||||
<div class="preview-container">
|
||||
<img :src="props.src" alt="preview" class="preview-image" />
|
||||
</div>
|
||||
</template>
|
||||
@ -22,9 +22,9 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import type { ImageOrientation } from '@/utils/tools';
|
||||
import { getImageOrientationByUrl } from '@/utils/tools';
|
||||
// import { computed, onMounted, ref, watch } from 'vue';
|
||||
// import type { ImageOrientation } from '@/utils/tools';
|
||||
// import { getImageOrientationByUrl } from '@/utils/tools';
|
||||
|
||||
interface Props {
|
||||
src: string;
|
||||
@ -39,30 +39,30 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
leaveDelay: 200,
|
||||
});
|
||||
|
||||
const orientation = ref<ImageOrientation>('landscape');
|
||||
// const orientation = ref<ImageOrientation>('landscape');
|
||||
|
||||
const resolveOrientation = async () => {
|
||||
if (!props.src) {
|
||||
orientation.value = 'landscape';
|
||||
return;
|
||||
}
|
||||
const o = await getImageOrientationByUrl(props.src);
|
||||
orientation.value = o === 'square' ? 'landscape' : o;
|
||||
};
|
||||
// const resolveOrientation = async () => {
|
||||
// if (!props.src) {
|
||||
// orientation.value = 'landscape';
|
||||
// return;
|
||||
// }
|
||||
// const o = await getImageOrientationByUrl(props.src);
|
||||
// orientation.value = o === 'square' ? 'landscape' : o;
|
||||
// };
|
||||
|
||||
onMounted(resolveOrientation);
|
||||
watch(() => props.src, resolveOrientation);
|
||||
// onMounted(resolveOrientation);
|
||||
// watch(() => props.src, resolveOrientation);
|
||||
|
||||
const containerStyle = computed(() => {
|
||||
// 竖图: 306x400;横图: 400x251
|
||||
const isPortrait = orientation.value === 'portrait';
|
||||
const width = isPortrait ? 306 : 400;
|
||||
const height = isPortrait ? 400 : 251;
|
||||
return {
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
} as Record<string, string>;
|
||||
});
|
||||
// const containerStyle = computed(() => {
|
||||
// // 竖图: 306x400;横图: 400x251
|
||||
// const isPortrait = orientation.value === 'portrait';
|
||||
// const width = isPortrait ? 306 : 400;
|
||||
// const height = isPortrait ? 400 : 251;
|
||||
// return {
|
||||
// width: `${width}px`,
|
||||
// height: `${height}px`,
|
||||
// } as Record<string, string>;
|
||||
// });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@ -85,9 +85,9 @@ const containerStyle = computed(() => {
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
max-width: 368px;
|
||||
max-height: 368px;
|
||||
object-fit: scale-down;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
.arco-pagination-item {
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
font-family: $font-family-manrope-regular;
|
||||
&-ellipsis {
|
||||
border: none;
|
||||
}
|
||||
@ -26,9 +27,9 @@
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
}
|
||||
&-prepend {
|
||||
color: var(--Text-2, #3c4043);
|
||||
color: var(--Text-2, #55585f);
|
||||
text-align: right;
|
||||
font-family: $font-family-medium;
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@ -38,4 +39,12 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.arco-pagination-total {
|
||||
color: var(--Text-2, #55585f);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.arco-table {
|
||||
@mixin table-cell-text {
|
||||
color: var(--Text-1, #3C4043);
|
||||
color: var(--Text-1, #211F24);
|
||||
font-family: $font-family-regular;
|
||||
font-size: 14px;
|
||||
font-style: normal;
|
||||
|
||||
@ -285,7 +285,7 @@ export default {
|
||||
<div class="ai-suggest-box relative py-24px flex flex-col">
|
||||
{!isEmpty(aiReview.value) && (
|
||||
<div class="relative w-fit ml-24px mb-16px">
|
||||
<span class="ai-text">AI 智能审核</span>
|
||||
<span class="ai-text relative z-2">AI 智能审核</span>
|
||||
<img src={icon1} class="w-80px h-10.8px absolute bottom-1px left--9px" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -102,7 +102,7 @@ export default {
|
||||
} else {
|
||||
return (
|
||||
<div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
|
||||
<img src={coverImageUrl.value} class="w-100% h-100% object-cover absolute z-0 top-0 left-0" />
|
||||
<img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -68,10 +68,10 @@
|
||||
aspect-ratio: 3 / 4;
|
||||
}
|
||||
.main-img-box {
|
||||
width: 347px;
|
||||
width: 320px;
|
||||
height: auto;
|
||||
max-height: 472px;
|
||||
background: #fff;
|
||||
aspect-ratio: 3/4;
|
||||
}
|
||||
.desc-img-wrap {
|
||||
display: grid;
|
||||
|
||||
@ -1,11 +1,25 @@
|
||||
<template>
|
||||
<div class="highlight-textarea-container">
|
||||
<a-textarea ref="textareaWrapRef" v-model="inputValue" placeholder="请输入作品描述" :disabled="disabled" show-word-limit
|
||||
:max-length="1000" size="large" class="textarea-input h-full w-full" @input="handleInput"
|
||||
@focus="() => (focus = true)" @blur="() => (focus = false)" />
|
||||
<a-textarea
|
||||
ref="textareaWrapRef"
|
||||
v-model="inputValue"
|
||||
placeholder="请输入作品描述"
|
||||
:disabled="disabled"
|
||||
show-word-limit
|
||||
:max-length="1000"
|
||||
size="large"
|
||||
class="textarea-input h-full w-full"
|
||||
@input="handleInput"
|
||||
@focus="() => (focus = true)"
|
||||
@blur="() => (focus = false)"
|
||||
/>
|
||||
|
||||
<div class="textarea-highlight" :class="{ focus: focus }" :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
|
||||
v-html="highlightedHtml" />
|
||||
<div
|
||||
class="textarea-highlight"
|
||||
:class="{ focus: focus }"
|
||||
:style="{ visibility: inputValue ? 'visible' : 'hidden' }"
|
||||
v-html="highlightedHtml"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -97,7 +111,8 @@ const generateHighlightedHtml = (): string => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nativeTextarea = (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
|
||||
nativeTextarea =
|
||||
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
|
||||
document.querySelector('.textarea-input .arco-textarea');
|
||||
|
||||
if (nativeTextarea) {
|
||||
@ -158,7 +173,7 @@ const handleCompositionUpdate = () => {
|
||||
font-weight: 400px;
|
||||
border: 1px solid #d7d7d9;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
resize: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
z-index: inherit;
|
||||
@ -193,9 +208,8 @@ const handleCompositionUpdate = () => {
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
caret-color: #211f24 !important;
|
||||
resize: none;
|
||||
@include textarea-padding;
|
||||
|
||||
// -webkit-text-fill-color: transparent !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
} else {
|
||||
return (
|
||||
<div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
|
||||
<img src={coverImageUrl.value} class="w-100% h-100% object-contain absolute z-0 top-0 left-0" />
|
||||
<img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,8 +22,8 @@ $footer-height: 68px;
|
||||
.main-img-box {
|
||||
width: 320px;
|
||||
height: auto;
|
||||
max-height: 472px;
|
||||
background: #fff;
|
||||
aspect-ratio: 3/4;
|
||||
}
|
||||
.desc-img-wrap {
|
||||
display: grid;
|
||||
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
<>
|
||||
<div class="manuscript-edit-wrap">
|
||||
<div class="flex items-center mb-8px">
|
||||
<span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>
|
||||
<span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
|
||||
内容稿件列表
|
||||
</span>
|
||||
<icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
|
||||
|
||||
@ -1,11 +1,25 @@
|
||||
<template>
|
||||
<div class="highlight-textarea-container">
|
||||
<a-textarea ref="textareaWrapRef" v-model="inputValue" placeholder="请输入作品描述" :disabled="disabled" show-word-limit
|
||||
:max-length="1000" size="large" class="textarea-input h-full w-full" @input="handleInput"
|
||||
@focus="() => (focus = true)" @blur="() => (focus = false)" />
|
||||
<a-textarea
|
||||
ref="textareaWrapRef"
|
||||
v-model="inputValue"
|
||||
placeholder="请输入作品描述"
|
||||
:disabled="disabled"
|
||||
show-word-limit
|
||||
:max-length="1000"
|
||||
size="large"
|
||||
class="textarea-input h-full w-full"
|
||||
@input="handleInput"
|
||||
@focus="() => (focus = true)"
|
||||
@blur="() => (focus = false)"
|
||||
/>
|
||||
|
||||
<div class="textarea-highlight" :class="{ focus: focus }" :style="{ visibility: inputValue ? 'visible' : 'hidden' }"
|
||||
v-html="highlightedHtml" />
|
||||
<div
|
||||
class="textarea-highlight"
|
||||
:class="{ focus: focus }"
|
||||
:style="{ visibility: inputValue ? 'visible' : 'hidden' }"
|
||||
v-html="highlightedHtml"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -98,7 +112,8 @@ const generateHighlightedHtml = (): string => {
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
nativeTextarea = (textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
|
||||
nativeTextarea =
|
||||
(textareaWrapRef.value?.$el || textareaWrapRef.value)?.querySelector?.('textarea.arco-textarea') ||
|
||||
document.querySelector('.textarea-input .arco-textarea');
|
||||
|
||||
if (nativeTextarea) {
|
||||
@ -159,7 +174,7 @@ const handleCompositionUpdate = () => {
|
||||
font-weight: 400px;
|
||||
border: 1px solid #d7d7d9;
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
resize: none;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
z-index: inherit;
|
||||
@ -194,9 +209,8 @@ const handleCompositionUpdate = () => {
|
||||
background: transparent;
|
||||
color: transparent;
|
||||
caret-color: #211f24 !important;
|
||||
resize: none;
|
||||
@include textarea-padding;
|
||||
|
||||
// -webkit-text-fill-color: transparent !important;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
@ -336,10 +336,9 @@ export default {
|
||||
onInput={onChange}
|
||||
placeholder="请输入作品描述"
|
||||
size="large"
|
||||
class="h-300px !w-784px"
|
||||
class="textarea-box !w-784px"
|
||||
show-word-limit
|
||||
max-length={1000}
|
||||
auto-size={{ minRows: 7, maxRows: 12 }}
|
||||
/>
|
||||
</FormItem>
|
||||
{isVideo.value ? (
|
||||
|
||||
@ -30,3 +30,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.textarea-box {
|
||||
:deep(.arco-textarea) {
|
||||
height: 140px;
|
||||
max-height: 298px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -221,7 +221,7 @@ export default {
|
||||
class="flex items-center w-fit h-24px px-8px rounded-2px"
|
||||
style={{ backgroundColor: getStatusInfo(record.audit_status).backgroundColor }}
|
||||
>
|
||||
<span class="cts s1" style={{ color: getStatusInfo(record.audit_status).color }}>
|
||||
<span class="cts s1 bold" style={{ color: getStatusInfo(record.audit_status).color }}>
|
||||
{getStatusInfo(record.audit_status).name}
|
||||
</span>
|
||||
</div>
|
||||
@ -238,20 +238,23 @@ export default {
|
||||
class="mr-4px"
|
||||
/>
|
||||
<span
|
||||
class="cts"
|
||||
class={
|
||||
class={`cts !text-14px !lh-22px ${
|
||||
record.type === EnumManuscriptType.Image ? '!color-#25C883' : '!color-#6D4CFE'
|
||||
}
|
||||
}`}
|
||||
>
|
||||
{record.type === EnumManuscriptType.Image ? '图文' : '视频'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
} else if (column.dataIndex === 'last_modified_at') {
|
||||
return exactFormatTime(
|
||||
return (
|
||||
<span class="cts num">
|
||||
{exactFormatTime(
|
||||
record.last_modified_at,
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return formatTableField(column, record, true);
|
||||
|
||||
@ -8,6 +8,9 @@
|
||||
&.bold {
|
||||
font-family: $font-family-medium;
|
||||
}
|
||||
&.num {
|
||||
font-family: $font-family-manrope-regular;
|
||||
}
|
||||
}
|
||||
.filter-row-item {
|
||||
.label {
|
||||
@ -23,5 +26,43 @@
|
||||
.arco-scrollbar-track {
|
||||
display: none !important;
|
||||
}
|
||||
.arco-table {
|
||||
.arco-table-container {
|
||||
.arco-table-element {
|
||||
thead {
|
||||
.arco-table-tr {
|
||||
.arco-table-th {
|
||||
.arco-table-cell {
|
||||
padding: 10px 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
.arco-table-tr {
|
||||
.arco-table-td {
|
||||
.arco-table-cell {
|
||||
padding: 6px 16px;
|
||||
.arco-table-cell-content,
|
||||
.arco-table-td-content {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-pagination {
|
||||
.arco-pagination-total,
|
||||
.arco-pagination-jumper-prepend {
|
||||
font-size: 14px;
|
||||
}
|
||||
.arco-pagination-jumper-prepend {
|
||||
font-family: $font-family-regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -79,8 +79,8 @@ export default {
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div class="main-img-box mb-16px relative overflow-hidden cursor-pointer">
|
||||
<img src={coverImageUrl.value} class="w-100% h-100% object-contain absolute z-0 top-0 left-0" />
|
||||
<div class="main-img-box mb-16px overflow-hidden cursor-pointer">
|
||||
<img src={coverImageUrl.value} class="w-100% h-100% object-contain" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -22,8 +22,9 @@ $footer-height: 68px;
|
||||
.main-img-box {
|
||||
width: 320px;
|
||||
height: auto;
|
||||
max-height: 472px;
|
||||
background: #fff;
|
||||
aspect-ratio: 3/4;
|
||||
// aspect-ratio: 3/4;
|
||||
}
|
||||
.desc-img-wrap {
|
||||
display: grid;
|
||||
|
||||
@ -91,7 +91,7 @@ export default {
|
||||
<>
|
||||
<div class="manuscript-edit-wrap">
|
||||
<div class="flex items-center mb-8px">
|
||||
<span class="cts color-#4E5969 cursor-pointer" onClick={onBack}>
|
||||
<span class="cts color-#4E5969 cursor-pointer" onClick={onCancel}>
|
||||
内容稿件列表
|
||||
</span>
|
||||
<icon-oblique-line size="12" class="color-#C9CDD4 mx-4px" />
|
||||
|
||||
Reference in New Issue
Block a user