Skip to content

A
ai_web_page_prod
Commit bb6af5cb by haojie
Options

1

parent 79ffbe92
Showing with 564 additions and 113 deletions
src/assets/svg/edit/backList.svg 0 → 100644
<svg width="13" height="13" viewBox="0 0 13 13" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3932 3.16116H1.60695C1.16675 3.16116 0.810547 2.80456 0.810547 2.36476C0.810547 1.92495 1.16675 1.56836 1.60695 1.56836H11.3932C11.8334 1.56836 12.1896 1.92495 12.1896 2.36476C12.1896 2.80456 11.8334 3.16116 11.3932 3.16116Z" fill=""/>
<path d="M11.3932 7.29592H1.60695C1.16675 7.29592 0.810547 6.93933 0.810547 6.49952C0.810547 6.05972 1.16675 5.70312 1.60695 5.70312H11.3932C11.8334 5.70312 12.1896 6.05972 12.1896 6.49952C12.1896 6.93933 11.8334 7.29592 11.3932 7.29592Z" fill=""/>
<path d="M11.3932 11.4307H1.60695C1.16675 11.4307 0.810547 11.0741 0.810547 10.6343C0.810547 10.1945 1.16675 9.83789 1.60695 9.83789H11.3932C11.8334 9.83789 12.1896 10.1945 12.1896 10.6343C12.1896 11.0741 11.8334 11.4307 11.3932 11.4307Z" fill=""/>
</svg>
src/assets/svg/edit/delete.svg 0 → 100644
<svg width="13" height="13" viewBox="0 0 13 13" fill="" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_522_4648)">
<path d="M3.79229 2.69655V1.49655C3.79229 1.11754 4.09929 0.810547 4.47829 0.810547H9.39029C9.76829 0.810547 10.0753 1.11754 10.0753 1.49655V2.69655H12.3213C12.4634 2.69655 12.5998 2.75302 12.7003 2.85354C12.8008 2.95406 12.8573 3.09039 12.8573 3.23255C12.8573 3.3747 12.8008 3.51103 12.7003 3.61155C12.5998 3.71207 12.4634 3.76854 12.3213 3.76854H11.7623V11.9825C11.7623 12.0726 11.7446 12.1618 11.7101 12.2451C11.6756 12.3283 11.6251 12.4039 11.5614 12.4676C11.4977 12.5313 11.422 12.5819 11.3388 12.6163C11.2556 12.6508 11.1664 12.6686 11.0763 12.6686H2.57529C2.39335 12.6686 2.21887 12.5963 2.09021 12.4676C1.96156 12.339 1.88929 12.1645 1.88929 11.9825V3.76855H1.35729C1.21513 3.76855 1.0788 3.71208 0.978281 3.61156C0.877761 3.51104 0.821289 3.37471 0.821289 3.23255C0.821289 3.0904 0.877761 2.95406 0.978281 2.85354C1.0788 2.75302 1.21513 2.69655 1.35729 2.69655H3.79229ZM4.86428 2.69655H9.00429V1.88255H4.8643V2.69655H4.86428ZM10.6913 3.76854H2.96029V11.5965H10.6903V3.76854H10.6913ZM4.40729 5.44855H5.47829V10.1715H4.40729V5.44755V5.44855ZM6.25329 5.50555H7.32429V10.1715H6.25329V5.50555ZM8.09929 5.56354H9.17029V10.1715H8.10028V5.56354H8.09929Z" fill=""/>
</g>
<defs>
<clipPath id="clip0_522_4648">
<rect width="13" height="13" fill=""/>
</clipPath>
</defs>
</svg>
src/assets/svg/edit/editInput.svg 0 → 100644
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.4586 3.39453L10.518 1.44453C9.80547 0.732031 8.64297 0.732031 7.92109 1.44453L1.17109 8.20391C0.946094 8.43828 0.824219 8.73828 0.824219 9.04766V12.1508C0.824219 12.7695 1.14297 13.0883 1.76172 13.0883L4.89297 13.0695C5.21172 13.0695 5.51172 12.9383 5.72734 12.7227L12.4586 5.97266C13.1805 5.26953 13.1805 4.10703 12.4586 3.39453ZM4.77109 12.1414L1.76172 12.1602V9.16953C1.76172 9.11328 1.78047 9.05703 1.78984 9.00078C1.80859 9.06641 1.84609 9.12266 1.89297 9.17891L4.72422 12.0102C4.78047 12.0664 4.83672 12.0945 4.90234 12.1133C4.85547 12.1227 4.81797 12.1414 4.77109 12.1414ZM5.48359 11.682C5.48359 11.5695 5.43672 11.4664 5.35234 11.382L2.52109 8.55078C2.44609 8.47578 2.34297 8.43828 2.23984 8.42891L6.81484 3.85391L10.0586 7.09766L5.48359 11.682ZM11.8117 5.33516L10.7523 6.40391L7.50859 3.16016L8.57734 2.09141C8.93359 1.73516 9.51484 1.73516 9.87109 2.09141L11.8117 4.04141C12.168 4.39766 12.168 4.97891 11.8117 5.33516Z" fill="white"/>
</svg>
src/assets/svg/form/textToSpeech.svg
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="24" height="24" viewBox="0 0 24 24" fill="" xmlns="http://www.w3.org/2000/svg">
<path d="M17.8334 6.16594V17.8327H15.4999V6.16594H17.8334ZM8.50008 6.16594V17.8327H6.16664V6.16594H8.50008ZM3.83344 9.66586V14.3325H1.5V9.66586H3.83344ZM22.5 9.66586V14.3325H20.1666V9.66586H22.5ZM13.1667 2.66602V21.3326H10.8333V2.66602H13.1667Z" fill="white"/> <path d="M17.8334 6.16594V17.8327H15.4999V6.16594H17.8334ZM8.50008 6.16594V17.8327H6.16664V6.16594H8.50008ZM3.83344 9.66586V14.3325H1.5V9.66586H3.83344ZM22.5 9.66586V14.3325H20.1666V9.66586H22.5ZM13.1667 2.66602V21.3326H10.8333V2.66602H13.1667Z" fill=""/>
</svg> </svg>
src/components/Admin/AdminPublicPage.vue
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</CustomButtom> </CustomButtom>
</template> </template>
<template v-if="form.filter"> <template v-if="form.filter">
<CustomButtom> <CustomButtom @click="filterChange">
筛选 筛选
<template #icon> <FilterSvg></FilterSvg> </template> <template #icon> <FilterSvg></FilterSvg> </template>
</CustomButtom> </CustomButtom>
...@@ -29,29 +29,35 @@ ...@@ -29,29 +29,35 @@
<template <template
v-if="form.filter && form.filter_option && form.filter_option.length" v-if="form.filter && form.filter_option && form.filter_option.length"
> >
<div class="admin-filter-box"> <TransitionView
<div class="admin-filter-child"> v-model:visible="filterBoxStatus"
<template v-for="item in form.filter_option" :key="item.name"> :defaultWidth="defaultWidth"
<template v-if="item.type == 'select'"> type="height"
<CustomSelect >
:options="item.options" <div class="admin-filter-box" ref="adminFilter">
:item="item" <div class="admin-filter-child">
v-model="item.value" <template v-for="item in form.filter_option" :key="item.name">
></CustomSelect> <template v-if="item.type == 'select'">
<CustomSelect
:options="item.options"
:item="item"
v-model="item.value"
></CustomSelect>
</template>
</template> </template>
</template> <div class="admin-filter-tool">
<div class="admin-filter-tool"> <CustomButtom @click="onReset">
<CustomButtom @click="onReset"> 刷新
刷新 <template #icon> <ResetSvg></ResetSvg> </template>
<template #icon> <ResetSvg></ResetSvg> </template> </CustomButtom>
</CustomButtom> <CustomButtom @click="onFilter">
<CustomButtom @click="onFilter"> 筛选
筛选 <template #icon> <FilterSvg></FilterSvg> </template>
<template #icon> <FilterSvg></FilterSvg> </template> </CustomButtom>
</CustomButtom> </div>
</div> </div>
</div> </div>
</div> </TransitionView>
</template> </template>
<div class="admin-table"> <div class="admin-table">
<CustomTable <CustomTable
...@@ -61,6 +67,7 @@ ...@@ -61,6 +67,7 @@
:columns="form.table_columns" :columns="form.table_columns"
:local_key="form.local_key" :local_key="form.local_key"
:edit_page="form.edit_page" :edit_page="form.edit_page"
:checkbox="form.checkbox"
@ChangeList="ChangeList" @ChangeList="ChangeList"
> >
<template #title="{ row }"> <template #title="{ row }">
...@@ -76,6 +83,7 @@ ...@@ -76,6 +83,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import TransitionView from './TransitionView.vue';
import CustomButtom from './button.vue'; import CustomButtom from './button.vue';
import CustomSelect from '@/components/Admin/select.vue'; import CustomSelect from '@/components/Admin/select.vue';
import ResetSvg from '@/assets/svg/admin/reload.svg'; import ResetSvg from '@/assets/svg/admin/reload.svg';
...@@ -84,12 +92,17 @@ import AddSvg from '@/assets/svg/admin/add.svg'; ...@@ -84,12 +92,17 @@ import AddSvg from '@/assets/svg/admin/add.svg';
import { useStore } from 'vuex'; import { useStore } from 'vuex';
import { getFilterParams } from '@/constants/admin_form'; import { getFilterParams } from '@/constants/admin_form';
import CustomTable from './table.vue'; import CustomTable from './table.vue';
import { onMounted, ref } from 'vue';
const props = defineProps<{ const props = defineProps<{
form: any; form: any;
list: any[]; list: any[];
}>(); }>();
const emit = defineEmits(['reset', 'update:list']); const emit = defineEmits(['reset', 'update:list']);
const store = useStore(); const store = useStore();
// 筛选盒子打开状态
const filterBoxStatus = ref(false);
const defaultWidth = ref();
const adminFilter = ref();
// 重新加载页面 // 重新加载页面
const onReload = () => { const onReload = () => {
store.commit('progress/reload'); store.commit('progress/reload');
...@@ -99,6 +112,11 @@ const onReset = () => { ...@@ -99,6 +112,11 @@ const onReset = () => {
emit('reset'); emit('reset');
}; };
// 筛选盒子是否显示
const filterChange = () => {
filterBoxStatus.value = !filterBoxStatus.value;
};
// 筛选 // 筛选
const onFilter = () => { const onFilter = () => {
const { filter_option } = props.form; const { filter_option } = props.form;
...@@ -112,6 +130,9 @@ const onFilter = () => { ...@@ -112,6 +130,9 @@ const onFilter = () => {
const ChangeList = (list: any[]) => { const ChangeList = (list: any[]) => {
emit('update:list', list); emit('update:list', list);
}; };
onMounted(() => {
defaultWidth.value = adminFilter.value.offsetWidth;
});
</script> </script>
<style lang="less"> <style lang="less">
...@@ -123,6 +144,7 @@ const ChangeList = (list: any[]) => { ...@@ -123,6 +144,7 @@ const ChangeList = (list: any[]) => {
.admin-page-header { .admin-page-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 12px;
.page-header-title { .page-header-title {
font-weight: 400; font-weight: 400;
font-size: 24px; font-size: 24px;
...@@ -155,14 +177,14 @@ const ChangeList = (list: any[]) => { ...@@ -155,14 +177,14 @@ const ChangeList = (list: any[]) => {
} }
.admin-filter-box { .admin-filter-box {
background: #212121; background: #212121;
padding: 40px 20px;
border-radius: 6px; border-radius: 6px;
margin-top: 12px; overflow: hidden;
.admin-filter-child { .admin-filter-child {
margin: 40px 20px 40px 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 20px; row-gap: 20px;
margin-left: -30px; padding-left: 20px;
& > * { & > * {
margin: 0 30px; margin: 0 30px;
} }
......
src/components/Admin/PageEdit.vue
<template> <template>
<div> <div class="admin-page-edit-parent">
<div class="custom-admin-page-edit"> <div class="custom-admin-page-edit">
<div class="admin-page-header"> <div class="admin-page-header">
<div> <div>
...@@ -7,49 +7,283 @@ ...@@ -7,49 +7,283 @@
<span class="page-header-title_2">{{ form.title_2 }}</span> <span class="page-header-title_2">{{ form.title_2 }}</span>
</div> </div>
</div> </div>
<div class="admin-edit-body"></div> <div class="admin-edit-body">
<div class="edit-body-head">
<span class="edit-body-head-title">{{ form.body_title }}</span>
<div class="edit-body-head-tool">
<template v-if="form.back">
<CustomButton class="body-head-btn"
>列表
<template #icon>
<BackListSvg></BackListSvg>
</template>
</CustomButton>
</template>
<template v-if="form.delete">
<CustomButton class="body-head-btn"
>删除
<template #icon>
<DeleteSvg></DeleteSvg>
</template>
</CustomButton>
</template>
</div>
</div>
<div class="edit-form">
<div class="edit-form-content">
<template v-for="item in form.form_options" :key="item.title">
<div class="edit-form-item-label">
<template v-if="item.icon == 'TextToSpeech'">
<TextToSpeechSvg style="fill: white"></TextToSpeechSvg>
</template>
<template v-else>
<img :src="item.icon" alt="" />
</template>
{{ item.title }}
</div>
<div
class="edit-form-item"
v-for="it in item.lists"
:key="it.name"
>
<div class="label">
{{ it.label }}
</div>
<div class="value">
<template v-if="it.type == 'text'">
<CustomInput
align="left"
class="edit-input"
v-model="it.value"
:placeholder="it.placeholder"
:disabled="it.disabled ? it.disabled : false"
>
<template #rightIcon>
<template v-if="!it.disabled">
<span class="input-right-icon">
<EditInputSvg></EditInputSvg>
</span>
</template>
</template>
</CustomInput>
</template>
<template v-if="it.type == 'select'">
<CustomSelect
:options="it.options"
v-model="it.value"
:item="{}"
:align="it.align"
width="800px"
></CustomSelect>
</template>
<template v-if="it.type == 'textarea'">
<CustomTextarea v-model="it.value"></CustomTextarea>
</template>
</div>
</div>
</template>
<template v-if="form.conversion">
<div class="conversion-box">
<CustomButton class="edit-conversion-btn"
>转换为语音
<template #icon>
<span class="conversion-icon">
<TextToSpeechSvg></TextToSpeechSvg>
</span>
</template>
</CustomButton>
</div>
</template>
<template v-if="form.play_audio">
<CustomAudio
bk="#181818"
:need_progress="true"
:url="''"
></CustomAudio>
</template>
</div>
</div>
</div>
</div>
<div class="admin-edit-footer">
<template v-if="form.reset">
<CustomButton class="edit-footer-btn reset">重置</CustomButton>
</template>
<template v-if="form.submit">
<CustomButton class="edit-footer-btn submit">提交</CustomButton>
</template>
</div> </div>
<div class="admin-edit-footer"></div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import CustomAudio from './audio.vue';
import CustomButton from './button.vue'; import CustomButton from './button.vue';
import CustomTextarea from '@/components/custom/textarea.vue';
import CustomSelect from './select.vue';
import BackListSvg from '@/assets/svg/edit/backList.svg';
import DeleteSvg from '@/assets/svg/edit/delete.svg';
import EditInputSvg from '@/assets/svg/edit/editInput.svg';
import CustomInput from './input.vue';
import TextToSpeechSvg from '@/assets/svg/form/textToSpeech.svg';
const props = defineProps<{ const props = defineProps<{
form: any; form: any;
}>(); }>();
</script> </script>
<style lang="less"> <style lang="less">
.custom-admin-page-edit { @import '@/style/variables.less';
padding: 20px 30px 0 30px; .admin-page-edit-parent {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
.admin-page-header { .custom-admin-page-edit {
flex: 1;
padding: 20px 30px 30px 30px;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
.page-header-title { .admin-page-header {
font-weight: 400; display: flex;
font-size: 24px; justify-content: space-between;
.page-header-title {
font-weight: 400;
font-size: 24px;
}
.page-header-title_2 {
margin-left: 12px;
font-weight: 400;
font-size: 15px;
color: #c5c5c5;
}
} }
.page-header-title_2 { .admin-edit-body {
margin-left: 12px; background: #2d2d2d;
font-weight: 400; border-radius: 6px;
font-size: 15px; flex: 1;
color: #c5c5c5; margin-top: 12px;
display: flex;
flex-direction: column;
.edit-body-head {
height: 52px;
border-bottom: 1px solid #464646;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
.body-head-btn {
background-color: #181818;
border-radius: 3px;
svg {
fill: white;
}
&:hover {
background: @main-color-1;
svg {
fill: black;
}
}
}
.edit-body-head-title {
font-weight: 600;
font-size: 16px;
}
.edit-body-head-tool {
& > :first-child {
margin-right: 12px;
}
}
}
.edit-form {
flex: 1;
display: flex;
justify-content: center;
.edit-form-content {
.edit-form-item-label {
display: flex;
align-items: center;
margin: 30px 0;
& > :first-child {
margin-right: 12px;
}
}
.edit-form-item {
.label {
margin: 20px 0 6px 0;
}
.value {
}
}
.conversion-box {
margin: 12px 0 20px 0;
text-align: right;
.edit-conversion-btn {
border: 1px solid @main-color-1;
border-radius: 3px;
background: transparent;
height: 36px;
color: @main-color-1;
.conversion-icon {
display: flex;
align-items: center;
font-weight: 400;
font-size: 14px;
svg {
fill: @main-color-1;
transition: all 0.3s;
}
}
&:hover {
color: black;
background: @main-color-1;
svg {
transition: all 0.3s;
fill: black;
}
}
}
}
.edit-input {
height: auto;
width: 800px;
.custom-input-box {
height: 34px;
border: none;
.input-right-icon {
padding-right: 12px;
}
}
}
}
}
} }
} }
.admin-edit-body { .admin-edit-footer {
height: 60px;
background: #2d2d2d; background: #2d2d2d;
border-radius: 6px; display: flex;
justify-content: flex-end;
align-items: center;
padding: 0 30px;
& > :nth-child(1) {
margin-right: 12px;
}
.edit-footer-btn {
width: 68px;
height: 36px;
border-radius: 3px;
font-size: 14px;
}
.reset {
background: #181818;
&:hover {
color: white;
}
}
.submit {
background: #00dddd;
color: black;
}
} }
} }
.admin-edit-footer {
height: 60px;
background: #2d2d2d;
display: flex;
align-items: center;
padding: 0 30px;
}
</style> </style>
src/components/Admin/TransitionView.vue 0 → 100644
<template>
<Transition v-bind="listeners">
<div
v-show="visible"
:class="[
'el-transition',
{ widthType: type == types.WIDTHTYPE },
{ heigthtType: type == types.HEIGHTTYPE },
{ allType: type == types.ALLTYPE },
]"
>
<slot></slot>
</div>
</Transition>
</template>
<script setup lang="ts">
import { Transition } from 'vue';
const props = defineProps(['visible', 'type', 'defaultWidth']);
const types = {
WIDTHTYPE: 'width',
HEIGHTTYPE: 'height',
ALLTYPE: 'all',
};
const isVisibleSize = (el) => {
switch (props.type) {
case types.WIDTHTYPE:
return (el.style.width = 0);
case types.HEIGHTTYPE:
return (el.style.height = 0);
case types.ALLTYPE:
return (el.style.width = 0), (el.style.height = 0);
}
};
const listeners = {
/*
el @type {HTMLElement}
defaultWidth 根据需求给定默认宽度，默认为0
*/
// 元素由隐藏变为可见
onEnter(el) {
el.style.height = 'auto'; // 将高度设为auto，是为了获取该元素的计算高度
const endHeight = window.getComputedStyle(el).height; // 计算高度
el.style.height = 0; // 将高度再设置为0
el.offsetHeight; // 强制重绘，重绘后再改变高度才会产生动画
el.style.height = endHeight; // 设置为计算高度
el.style.width = 'auto'; // 将宽度设为auto，是为了获取该元素的计算宽度
const endWidth = window.getComputedStyle(el).width; // 计算宽度
el.style.width = (props.defaultWidth || 0) + 'px'; // 将宽度再设置为默认宽度
el.offsetWidth; // 强制重绘，重绘后再改变宽度才会产生动画
el.style.width = endWidth; // 设置为计算宽度
},
onAfterEnter(el) {
el.style.height = null; // 过渡进入之后，将高度恢复为null
el.style.width = null; // 过渡进入之后，将宽度恢复为null
},
// 元素由可见变为隐藏
onLeave(el) {
el.style.height = window.getComputedStyle(el).height; // 计算高度
el.offsetHeight; // 强制重绘，重绘后再改变高度才会产生动画
el.style.width = window.getComputedStyle(el).width; // 计算宽度
el.offsetWidth; // 强制重绘，重绘后再改变宽度才会产生动画
isVisibleSize(el); // 将宽度高度设置为0
},
onAfterLeave(el) {
el.style.height = null; // 过渡离开之后，将高度恢复为null
el.style.width = null; // 过渡离开之后，将宽度恢复为null
},
};
</script>
<style lang="less">
.el-transition {
overflow: hidden;
// transition: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: 0.5s;
&.widthType {
transition-property: width;
}
&.heigthtType {
transition-property: height;
}
&.allType {
transition-property: all;
}
}
</style>
src/components/Admin/audio.vue
<template> <template>
<div class="audio-player"> <div
class="audio-player"
:style="{
background: bk,
}"
>
<img <img
:src="imgs.start" :src="imgs.start"
alt="" alt=""
...@@ -8,29 +13,31 @@ ...@@ -8,29 +13,31 @@
v-if="!playStatus" v-if="!playStatus"
/> />
<img :src="imgs.stop" alt="" class="play-icon" @click="onPause" v-else /> <img :src="imgs.stop" alt="" class="play-icon" @click="onPause" v-else />
<!-- <span class="play-time"> <template v-if="need_progress">
{{ transTime(audioCurrent) }}/{{ transTime(audioDuration) }} <span class="play-time">
</span> --> {{ transTime(audioCurrent) }}/{{ transTime(audioDuration) }}
<!-- <div class="play-progress"> </span>
<div <div class="play-progress">
class="play-current-progress" <div
:style="{ width: `${playProgress}%` }" class="play-current-progress"
></div> :style="{ width: `${playProgress}%` }"
</div> --> ></div>
<!-- <img </div>
src="@/assets/images/audio/voice-open.png" <!-- <img
alt="" src="@/assets/images/audio/voice-open.png"
class="play-voice" alt=""
v-if="audioVolume === 1" class="play-voice"
@click="onSetVolume(0)" v-if="audioVolume === 1"
/> @click="onSetVolume(0)"
<img />
src="@/assets/images/audio/voice-close.png" <img
alt="" src="@/assets/images/audio/voice-close.png"
class="play-voice" alt=""
v-else class="play-voice"
@click="onSetVolume(1)" v-else
/> --> @click="onSetVolume(1)"
/> -->
</template>
</div> </div>
<audio ref="audioRef" :src="url" @canplay="onCanplay"></audio> <audio ref="audioRef" :src="url" @canplay="onCanplay"></audio>
...@@ -41,10 +48,14 @@ import { ref, onBeforeMount, onBeforeUnmount } from 'vue'; ...@@ -41,10 +48,14 @@ import { ref, onBeforeMount, onBeforeUnmount } from 'vue';
withDefaults( withDefaults(
defineProps<{ defineProps<{
url: string; url?: string;
need_progress?: boolean;
bk?: string;
}>(), }>(),
{ {
url: 'https://xxx.xxx.xx.xx/audio.mp3', need_progress: false,
url: '',
bk: 'transparent',
} }
); );
const imgs = { const imgs = {
...@@ -158,28 +169,30 @@ const formatTime = (value: string) => { ...@@ -158,28 +169,30 @@ const formatTime = (value: string) => {
<style lang="less" scoped> <style lang="less" scoped>
.audio-player { .audio-player {
height: 52px; height: 52px;
border-radius: 8px; border-radius: 42px;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0 12px;
.play-icon { .play-icon {
width: 34px; width: 34px;
height: 34px; height: 34px;
margin-right: 7px;
cursor: pointer; cursor: pointer;
} }
.play-time { .play-time {
width: 72px; width: 72px;
display: inline-block; display: inline-block;
margin-right: 16px; margin: 0 16px;
font-weight: 400;
font-size: 14px;
} }
.play-progress { .play-progress {
width: 160px; flex: 1;
height: 4px; height: 4px;
background-color: #323547; background: #2d2d2d;
box-shadow: inset 0px 1px 0px 0px #20222d; box-shadow: inset 0px 1px 0px 0px #20222d;
border-radius: 2px; border-radius: 2px;
margin-right: 16px; margin-right: 16px;
......
src/components/Admin/button.vue
<template> <template>
<TButton <TButton
class="custom-admin-button" class="custom-admin-button"
:style="{ width: width, fontWeight: bold ? 600 : 500 }" :style="{
width: width,
background: bk,
fontWeight: bold ? 600 : 500,
}"
><slot></slot> ><slot></slot>
<template #icon> <template #icon>
<span class="left-icon"> <span class="left-icon">
...@@ -17,9 +21,11 @@ const props = withDefaults( ...@@ -17,9 +21,11 @@ const props = withDefaults(
defineProps<{ defineProps<{
width?: string; width?: string;
bold?: boolean; bold?: boolean;
bk?: string;
}>(), }>(),
{ {
width: '', width: '',
bk: '',
} }
); );
</script> </script>
......
src/components/Admin/select.vue
...@@ -6,11 +6,17 @@ ...@@ -6,11 +6,17 @@
:popupProps="{ :popupProps="{
overlayClassName: [className, 'admin-select-popup'], overlayClassName: [className, 'admin-select-popup'],
}" }"
:inputProps="{
align: align,
style: { width: width },
}"
> >
<template #prefixIcon> <template #prefixIcon>
<div class="select-label"> <template v-if="item && item.label">
{{ item.label }} <div class="select-label">
</div> {{ item.label }}
</div>
</template>
</template> </template>
<t-option <t-option
v-for="item in options" v-for="item in options"
...@@ -27,14 +33,16 @@ import { Select as TSelect, Option as TOption } from 'tdesign-vue-next'; ...@@ -27,14 +33,16 @@ import { Select as TSelect, Option as TOption } from 'tdesign-vue-next';
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
item: any; item?: any;
options: any[]; options: any[];
modelValue: number | string; modelValue: number | string;
width?: string; width?: string;
className?: string; className?: string;
align?: string;
}>(), }>(),
{ {
width: '50%', width: '357px',
align: 'center',
} }
); );
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
...@@ -87,7 +95,6 @@ watch( ...@@ -87,7 +95,6 @@ watch(
} }
.t-select__wrap { .t-select__wrap {
width: 357px; width: 357px;
max-width: 357px;
height: 35px; height: 35px;
.t-select-input { .t-select-input {
height: 100%; height: 100%;
...@@ -99,7 +106,6 @@ watch( ...@@ -99,7 +106,6 @@ watch(
background: #181818; background: #181818;
border: none; border: none;
.t-input__inner { .t-input__inner {
text-align: center;
color: #ffffff; color: #ffffff;
&::placeholder { &::placeholder {
color: #888fa1; color: #888fa1;
......
src/components/Admin/table.vue
...@@ -3,10 +3,16 @@ ...@@ -3,10 +3,16 @@
<TTable <TTable
class="admin-real-table" class="admin-real-table"
row-key="index" row-key="index"
:data="list" :data="tableList.list"
:columns="columns" :columns="columns"
:loading="loading" :loading="loading"
> >
<template #check_all>
<TCheckbox class="check-all-box" @change="CheckAll"></TCheckbox>
</template>
<template #checkbox="{ row }">
<TCheckbox v-model="row.is_check" class="check-all-box"></TCheckbox>
</template>
<template #title="{ row }"> <template #title="{ row }">
<slot name="title" :row="row"></slot> <slot name="title" :row="row"></slot>
</template> </template>
...@@ -30,24 +36,29 @@ ...@@ -30,24 +36,29 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Table as TTable } from 'tdesign-vue-next'; import { Table as TTable, Checkbox as TCheckbox } from 'tdesign-vue-next';
import { onBeforeMount, reactive, ref, watch } from 'vue'; import { onBeforeMount, reactive, ref } from 'vue';
import { getGenerateRecords } from '@/utils/api/scenes'; // import { getGenerateRecords } from '@/utils/api/scenes';
import { Pagination as TPagination } from 'tdesign-vue-next'; import { Pagination as TPagination } from 'tdesign-vue-next';
import { TASKTYPE } from '@/utils/api/Task'; // import { TASKTYPE } from '@/utils/api/Task';
import { getLocalData, setLocalData } from '@/utils/tool'; import { getLocalData, setLocalData } from '@/utils/tool';
import { show_message } from '@/utils/tdesign_tool'; import { show_message } from '@/utils/tdesign_tool';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { edit_page_key } from '@/constants/token'; import { edit_page_key } from '@/constants/token';
const props = defineProps<{ const props = withDefaults(
list: any[]; defineProps<{
api: string; api: string;
api_type: string; api_type: string;
columns: any[]; columns: any[];
local_key: string; local_key: string;
edit_page: string; edit_page: string;
}>(); checkbox?: boolean;
const emit = defineEmits(['ChangeList']); }>(),
{
checkbox: true,
}
);
// const emit = defineEmits(['ChangeList']);
const router = useRouter(); const router = useRouter();
// 获取本地的page // 获取本地的page
const getPage = () => { const getPage = () => {
...@@ -58,12 +69,23 @@ const loading = ref(false); ...@@ -58,12 +69,23 @@ const loading = ref(false);
const pageNum = ref<number>(getPage()); const pageNum = ref<number>(getPage());
const pageSize = ref<number>(10); const pageSize = ref<number>(10);
const total = ref<number>(0); const total = ref<number>(0);
const tableList = reactive({
list: [],
});
const pageChange = (value: number) => { const pageChange = (value: number) => {
pageNum.value = value; pageNum.value = value;
// 存本地 // 存本地
setLocalData(props.local_key, value, 'session'); setLocalData(props.local_key, value, 'session');
getLog(); getLog();
}; };
// 选择全部
const CheckAll = () => {
tableList.list.forEach((item: any) => {
item.is_check = !item.is_check;
});
};
// 打开编辑页面 // 打开编辑页面
const onEdit = (row: any) => { const onEdit = (row: any) => {
const { edit_page } = props; const { edit_page } = props;
...@@ -103,7 +125,14 @@ const getLog = async () => { ...@@ -103,7 +125,14 @@ const getLog = async () => {
mp3: new URL('../../assets/mp3/test.aac', import.meta.url).href, mp3: new URL('../../assets/mp3/test.aac', import.meta.url).href,
}, },
]; ];
emit('ChangeList', list); if (props.checkbox) {
// 增加一个选中状态
list.forEach((item: any, index: number) => {
item.is_check = false;
item.index = index;
});
}
tableList.list = list;
loading.value = false; loading.value = false;
} catch (e) { } catch (e) {
loading.value = false; loading.value = false;
...@@ -123,6 +152,22 @@ onBeforeMount(() => { ...@@ -123,6 +152,22 @@ onBeforeMount(() => {
.t-table__content { .t-table__content {
background-color: transparent; background-color: transparent;
} }
.check-all-box {
.t-checkbox__input {
border: 1px solid #ffffff;
border-radius: 2px;
background: transparent;
}
}
.t-is-checked {
.t-checkbox__input {
border: 1px solid @main-color-1;
background: @main-color-1;
&::after {
border-color: black;
}
}
}
thead { thead {
tr { tr {
background-color: transparent; background-color: transparent;
......
src/pages/AILiveStreaming/DiscourseManagement/index.vue
...@@ -43,11 +43,17 @@ const ManagementForm = reactive({ ...@@ -43,11 +43,17 @@ const ManagementForm = reactive({
table_api: isDevContext() ? '' : '', table_api: isDevContext() ? '' : '',
// api类型 // api类型
table_api_type: 'get', table_api_type: 'get',
// 能否多选--默认为true
checkbox: true,
// 编辑页面 // 编辑页面
edit_page: '/AILiveStreaming/DiscourseManagement/edit', edit_page: '/AILiveStreaming/DiscourseManagement/edit',
// 表格columns-列 // 表格columns-列
table_columns: [ table_columns: [
{ {
title: 'check_all',
colKey: 'checkbox',
},
{
title: '产品', title: '产品',
colKey: 'title', colKey: 'title',
}, },
......
src/pages/AILiveStreaming/DiscourseManagementEdit/index.vue
...@@ -12,10 +12,6 @@ import { useRouter } from 'vue-router'; ...@@ -12,10 +12,6 @@ import { useRouter } from 'vue-router';
const router = useRouter(); const router = useRouter();
const imgs = { const imgs = {
fill: new URL('../../../assets/svg/form/edit.svg', import.meta.url).href, fill: new URL('../../../assets/svg/form/edit.svg', import.meta.url).href,
TextToSpeech: new URL(
'../../../assets/svg/form/textToSpeech.svg',
import.meta.url
).href,
}; };
// 编辑页面组件 // 编辑页面组件
const ManagementForm = reactive({ const ManagementForm = reactive({
...@@ -28,7 +24,16 @@ const ManagementForm = reactive({ ...@@ -28,7 +24,16 @@ const ManagementForm = reactive({
delete: true, delete: true,
// 删除api // 删除api
delete_api: isDevContext() ? '' : '', delete_api: isDevContext() ? '' : '',
form: [ // 能否提交
submit: true,
submit_api: isDevContext() ? '' : '',
//能否重置
reset: true,
// 是否转换为语音
conversion: true,
// 播放音频
play_audio: true,
form_options: [
{ {
icon: imgs.fill, icon: imgs.fill,
title: '基础填写', title: '基础填写',
...@@ -39,6 +44,7 @@ const ManagementForm = reactive({ ...@@ -39,6 +44,7 @@ const ManagementForm = reactive({
label: 'ID', label: 'ID',
name: 'id', name: 'id',
value: '', value: '',
placeholder: '',
// 是否禁用 // 是否禁用
disabled: true, disabled: true,
}, },
...@@ -58,7 +64,7 @@ const ManagementForm = reactive({ ...@@ -58,7 +64,7 @@ const ManagementForm = reactive({
}, },
// 文字转语音 // 文字转语音
{ {
icon: imgs.TextToSpeech, icon: 'TextToSpeech',
title: '文字转语音', title: '文字转语音',
lists: [ lists: [
{ {
...@@ -67,6 +73,7 @@ const ManagementForm = reactive({ ...@@ -67,6 +73,7 @@ const ManagementForm = reactive({
name: 'language_1', name: 'language_1',
placeholder: '请选择语言', placeholder: '请选择语言',
value: '', value: '',
align: 'left',
options: [ options: [
{ {
label: '中文', label: '中文',
...@@ -84,6 +91,7 @@ const ManagementForm = reactive({ ...@@ -84,6 +91,7 @@ const ManagementForm = reactive({
name: 'voice', name: 'voice',
placeholder: '请选择语音', placeholder: '请选择语音',
value: '', value: '',
align: 'left',
options: [ options: [
{ {
label: '小微 (直播间专属)', label: '小微 (直播间专属)',
...@@ -105,9 +113,6 @@ const ManagementForm = reactive({ ...@@ -105,9 +113,6 @@ const ManagementForm = reactive({
], ],
}, },
], ],
// 能否重置
reset: true,
// 能否提交
}); });
const getEditData = () => { const getEditData = () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment