Skip to content

A
ai_web_page_prod
Commit 79ffbe92 by haojie
Options

1

parent 36a7999b
Showing with 467 additions and 12 deletions
src/assets/svg/form/edit.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9636 20.4635H3.92719V4.42932H14.1337L15.3556 3.2075H3.32065C3.24052 3.2075 3.16119 3.22332 3.08719 3.25404C3.01319 3.28477 2.94599 3.32981 2.88944 3.38656C2.83288 3.44332 2.78809 3.51068 2.75763 3.58479C2.72716 3.6589 2.71163 3.73829 2.71192 3.81841V21.0744C2.71192 21.2361 2.77598 21.3911 2.89008 21.5056C3.00417 21.6201 3.159 21.6847 3.32065 21.6853H20.5745C20.7363 21.6847 20.8914 21.6202 21.0058 21.5058C21.1203 21.3913 21.1848 21.2363 21.1854 21.0744V7.41841L19.9636 8.64023V20.4635ZM21.0872 5.17768C21.2159 5.04671 21.288 4.87041 21.288 4.68677C21.288 4.50313 21.2159 4.32684 21.0872 4.19586L19.4334 2.52023C19.3695 2.45624 19.2937 2.40547 19.2102 2.37083C19.1267 2.33619 19.0372 2.31836 18.9468 2.31836C18.8564 2.31836 18.7669 2.33619 18.6834 2.37083C18.6 2.40547 18.5241 2.45624 18.4603 2.52023L17.6923 3.27296L20.3105 5.93914L21.0872 5.17768Z" fill="white"/>
<path d="M12.3292 13.901L19.7998 6.43916L17.1751 3.77734L9.70452 11.2348L12.3292 13.901ZM8.69434 14.9635L11.6943 14.3701L9.20488 11.8413L8.69434 14.9635Z" fill="white"/>
</svg>
src/assets/svg/form/textToSpeech.svg 0 → 100644
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" 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"/>
</svg>
src/components/Admin/PageEdit.vue
<template> <template>
<div class="custom-admin-page-edit"> <div>
<div class="admin-page-header"> <div class="custom-admin-page-edit">
<div> <div class="admin-page-header">
<span class="page-header-title"></span> <div>
<span class="page-header-title_2"></span> <span class="page-header-title">{{ form.title }}</span>
<span class="page-header-title_2">{{ form.title_2 }}</span>
</div>
</div> </div>
<div class="admin-edit-body"></div>
</div> </div>
<div class="admin-edit-footer"></div>
</div> </div>
</template> </template>
<script lang="ts" setup></script> <script lang="ts" setup>
import CustomButton from './button.vue';
const props = defineProps<{
form: any;
}>();
</script>
<style lang="less"> <style lang="less">
.custom-admin-page-edit { .custom-admin-page-edit {
padding: 20px 30px 0 30px;
display: flex;
flex-direction: column;
height: 100%;
.admin-page-header {
display: flex;
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;
}
}
.admin-edit-body {
background: #2d2d2d;
border-radius: 6px;
}
}
.admin-edit-footer {
height: 60px;
background: #2d2d2d;
display: flex;
align-items: center;
padding: 0 30px;
} }
</style> </style>
src/components/Admin/input.vue 0 → 100644
<template>
<div class="custom-input-global">
<div
class="custom-input-box"
:class="{ 'custom-input-error': ruleError.status }"
>
<slot name="leftIcon">
<span class="left-input-icon"></span>
</slot>
<input
:type="input_type"
v-model="input_value"
class="cust-input"
:disabled="disabled"
:placeholder="placeholder"
@focus="onInputFocus"
@blur="onInputBlur"
@input="numberInput(input_value)"
:style="{ 'text-align': align }"
/>
<slot name="rightIcon">
<span v-if="type === 'password'" class="custom-pwd-hide-button">
<PrivatePwdSvg
v-if="Cur_pwd_type === 'private'"
@click="changePwd('text')"
></PrivatePwdSvg>
<PublicPwdSvg v-else @click="changePwd('password')"></PublicPwdSvg>
</span>
</slot>
<!-- remember -->
<transition name="remember-fade">
<div
class="remember-select-box"
v-if="needSelect && input_focus && selectList.length"
>
<div
v-for="item in selectList"
:key="item.account"
class="line"
@click="QuickInputAccount(item)"
>
<div class="account">{{ item.account }}</div>
<div class="password">********</div>
</div>
</div>
</transition>
</div>
<div class="custom-input-rule" v-if="rules && rules.length">
{{ ruleError.message }}
</div>
</div>
</template>
<script lang="ts" setup>
import PrivatePwdSvg from '@/assets/svg/login/privatePwd.svg?component';
import PublicPwdSvg from '@/assets/svg/login/publicPwd.svg?component';
import { RulesType } from './Interfase';
import { emailReg } from '@/constants/token';
import { reactive, ref, watch } from 'vue';
const input_value = ref<string>(props.modelValue);
const props = withDefaults(
defineProps<{
type?: string;
placeholder?: string;
num?: number;
rules?: Array<RulesType>;
modelValue: string;
disabled?: boolean;
needSelect?: boolean;
selectList?: any;
align?: string;
}>(),
{
// 输入框类型
type: 'text',
align: 'center',
placeholder: '请输入',
needSelect: false,
selectList: [],
// rules: [],
disabled: false,
}
);
const emit = defineEmits([
'update:modelValue',
'submitType',
'submitAccount',
'inputChange',
]);
// 是否聚焦
const input_focus = ref(false);
// 校验显示的错误
const ruleError = reactive({
status: false,
message: '',
});
const input_type = ref<string>('text');
// 当输入框类型为password时，展示私有密码svg
const Cur_pwd_type = ref<string>('private');
// 输入框校验
const numberInput = (e: string) => {
const { type } = props;
if (type == 'number') {
input_value.value = e.replace(/[^\d]/g, '');
}
// 提交输入事件
emit('inputChange', input_value.value);
};
// 聚焦事件
const onInputFocus = () => {
if (props.needSelect) {
input_focus.value = true;
}
};
// 失去焦点
const onInputBlur = () => {
if (props.needSelect) {
input_focus.value = false;
}
};
// 错误状态
const errorinput = (rule: any) => {
ruleError.status = true;
ruleError.message = rule.message;
// 提交失败信息
emit('submitType', false);
};
// 提交用户的账号密码
const QuickInputAccount = (item: any) => {
emit('submitAccount', item);
};
// 重置输入框状态
const ResetInput = () => {
ruleError.status = false;
ruleError.message = '';
// 提交通过信息
emit('submitType', true);
};
if (props.type == 'password') {
input_type.value = props.type;
}
//
const changePwd = (value: string) => {
if (value === 'text') {
Cur_pwd_type.value = 'public';
} else {
Cur_pwd_type.value = 'private';
}
input_type.value = value;
};
// 表单校验
const FormValidation = () => {
const { rules } = props;
let v = input_value.value;
if (rules) {
for (let i in rules) {
let rule: any = rules[i];
if (rule.required && !v) {
// 校验空input
errorinput(rule);
return;
} else {
ResetInput();
}
// 自定义校验逻辑
if (rule.validator) {
let res = rule.validator(v);
if (!res.status) {
errorinput(res);
return;
} else {
ResetInput();
}
}
// 邮箱验证模块
if (rule.type == 'email') {
if (!emailReg.test(v)) {
// 邮箱校验不通过
errorinput(rule);
return;
} else {
ResetInput();
}
}
// 输入框最小长度校验
if (rule.min && v.length < rule.min) {
errorinput(rule);
return;
} else {
ResetInput();
}
}
}
};
watch(
() => input_value.value,
(v) => {
emit('update:modelValue', v);
// 判断输入的内容是否符合校验规则
// 校验
FormValidation();
}
);
watch(
() => props.modelValue,
(v) => {
input_value.value = v;
}
);
//
watch(
() => props.num,
(v) => {
// 校验
FormValidation();
}
);
</script>
<style lang="less">
@import '@/style/flex.less';
@import '@/style/variables.less';
@import '@/style/line.less';
.custom-input-global {
width: 200px;
height: 100%;
.custom-input-box {
width: 100%;
height: 48px;
background: #181818;
border: @main-border;
border-radius: 8px;
transition: all 0.3s;
position: relative;
.da();
&:focus-within {
border-color: #00f9f9;
// &::before {
// border-color: #00f9f9;
// }
}
.cust-input {
height: 100%;
width: 100%;
flex: 1;
outline: none;
border: none;
border-radius: 8px;
padding-left: 12px;
background: transparent;
color: var(--theme-color-4);
&::placeholder {
font-weight: 500;
font-size: @font-size-14;
color: #888fa1;
}
}
.left-input-icon {
.da();
}
.custom-pwd-hide-button {
.da();
padding: 0 8px;
cursor: pointer;
}
.remember-select-box {
z-index: 200;
position: absolute;
top: 50px;
width: 100%;
box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.05),
0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
background: #ddd;
border-radius: 4px;
max-height: 200px;
overflow-y: auto;
.line {
padding: 6px 12px;
font-weight: bold;
cursor: pointer;
.account {
color: var(--theme-color-35);
}
.password {
color: var(--theme-color-4);
}
}
}
}
.custom-input-error {
border-color: #f05451 !important;
transition: all 0.3s;
}
.custom-input-rule {
color: #f05451;
font-weight: 400;
font-size: @font-size-12;
line-height: 26px;
padding-left: 4px;
min-height: 26px;
}
}
//内容打开动画
.remember-fade-enter-active {
transition: all 0.15s ease-out;
}
.remember-fade-leave-active {
transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}
.remember-fade-enter-from,
.remember-fade-leave-to {
transform: translateY(-6px);
opacity: 0;
}
</style>
src/pages/AILiveStreaming/DiscourseManagementEdit/index.vue
<template> <template>
<div class=""> <PageEdit :form="ManagementForm"></PageEdit>
111
<PageEdit></PageEdit>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import PageEdit from '@/components/Admin/PageEdit.vue'; import PageEdit from '@/components/Admin/PageEdit.vue';
import { onBeforeMount, reactive } from 'vue'; import { onBeforeMount, reactive } from 'vue';
import { edit_page_key } from '@/constants/token'; import { edit_page_key } from '@/constants/token';
import { getLocalData } from '@/utils/tool'; import { getLocalData, isDevContext } 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';
const router = useRouter(); const router = useRouter();
const imgs = {
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({
title: '话术管理', title: '话术管理',
title_2: '编辑', title_2: '编辑',
body_title: '编辑',
// 是否显示返回列表页
back: true,
// 能否删除,
delete: true,
// 删除api
delete_api: isDevContext() ? '' : '',
form: [
{
icon: imgs.fill,
title: '基础填写',
lists: [
// 默认为空，进入页面填充数据
{
type: 'text',
label: 'ID',
name: 'id',
value: '',
// 是否禁用
disabled: true,
},
{
type: 'text',
label: '标题',
name: 'title_1',
value: '奥克斯小风扇话术',
},
{
type: 'text',
label: '产品',
name: 'product_1',
value: '电风扇',
},
],
},
// 文字转语音
{
icon: imgs.TextToSpeech,
title: '文字转语音',
lists: [
{
type: 'select',
label: '语言',
name: 'language_1',
placeholder: '请选择语言',
value: '',
options: [
{
label: '中文',
value: 'cn',
},
{
label: '英语',
value: 'en',
},
],
},
{
type: 'select',
label: '语音',
name: 'voice',
placeholder: '请选择语音',
value: '',
options: [
{
label: '小微 (直播间专属)',
value: '123',
},
{
label: '小爱 (直播间专属)',
value: '12345',
},
],
},
{
type: 'textarea',
label: '语音内容',
name: 'product_1',
placeholder: '请输入语音内容',
value: '',
},
],
},
],
// 能否重置
reset: true,
// 能否提交
}); });
const getEditData = () => { const getEditData = () => {
...@@ -29,7 +120,8 @@ const getEditData = () => { ...@@ -29,7 +120,8 @@ const getEditData = () => {
path: '/AILiveStreaming/DiscourseManagement', path: '/AILiveStreaming/DiscourseManagement',
}); });
} else { } else {
// 有数据 // 有数据--填充到form表单里
// ManagementForm.form
console.log(local_data); console.log(local_data);
} }
}; };
......
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