Skip to content

A
ai_web_page_prod
Commit b1b30785 by haojie
Options

1

parent c5f8a27f
Showing with 923 additions and 207 deletions
src/components/custom/ImgSizeRadioGroup.vue
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import CustomInput from '@/components/custom/input/index.vue'; import CustomInput from '@/components/custom/input/index.vue';
import { ref } from 'vue'; import { ref, watch } from 'vue';
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
list: any[]; list: any[];
...@@ -43,8 +43,21 @@ const emit = defineEmits(['update:modelValue']); ...@@ -43,8 +43,21 @@ const emit = defineEmits(['update:modelValue']);
// 当前选择的下标 // 当前选择的下标
const Current_btn = ref(props.modelValue); const Current_btn = ref(props.modelValue);
const onBtnChange = (item: any) => { const onBtnChange = (item: any) => {
Current_btn.value = item.value; emit('update:modelValue', item.value);
}; };
watch(
() => props.modelValue,
(v) => {
Current_btn.value = v;
}
);
watch(
() => Current_btn.value,
(v) => {
emit('update:modelValue', v);
}
);
</script> </script>
<style lang="less"> <style lang="less">
......
src/components/custom/Select.vue
...@@ -33,7 +33,7 @@ const props = withDefaults( ...@@ -33,7 +33,7 @@ const props = withDefaults(
} }
); );
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const SelectValue = ref(''); const SelectValue = ref(props.modelValue);
watch( watch(
() => SelectValue.value, () => SelectValue.value,
(v) => { (v) => {
......
src/components/custom/TTable.vue
...@@ -7,13 +7,14 @@ ...@@ -7,13 +7,14 @@
:columns="columns" :columns="columns"
hover hover
:loading="loading" :loading="loading"
></TTable> >
</TTable>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Table as TTable } from "tdesign-vue-next"; import { Table as TTable } from 'tdesign-vue-next';
import { ref } from "vue"; import { ref } from 'vue';
const props = defineProps<{ const props = defineProps<{
columns: any[]; columns: any[];
list: any[]; list: any[];
...@@ -22,7 +23,7 @@ const loading = ref(false); ...@@ -22,7 +23,7 @@ const loading = ref(false);
</script> </script>
<style lang="less"> <style lang="less">
@import "@/style/variables.less"; @import '@/style/variables.less';
.reset-t-table { .reset-t-table {
background-color: transparent; background-color: transparent;
.t-table__content { .t-table__content {
......
src/components/custom/input/index.vue
...@@ -102,7 +102,7 @@ const Cur_pwd_type = ref<string>('private'); ...@@ -102,7 +102,7 @@ const Cur_pwd_type = ref<string>('private');
const numberInput = (e: string) => { const numberInput = (e: string) => {
const { type } = props; const { type } = props;
if (type == 'number') { if (type == 'number') {
input_value.value = e.replace(/[^\d.]/g, ''); input_value.value = e.replace(/[^\d]/g, '');
} }
// 提交输入事件 // 提交输入事件
emit('inputChange', input_value.value); emit('inputChange', input_value.value);
......
src/components/custom/loading2.vue
<template> <template>
<div class="loading"> <div
<div></div> class="custom-loading-two"
<div></div> :style="{
<div></div> position: position,
<div></div> }"
<div></div> >
<div></div> <div class="loading">
<div></div> <div></div>
<div></div> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div> </div>
</template> </template>
<style> <script lang="ts" setup>
const props = withDefaults(
defineProps<{
position?: string;
}>(),
{
position: 'absolute',
}
);
</script>
<style lang="less">
.custom-loading-two {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.loading, .loading,
.loading > div { .loading > div {
position: relative; position: relative;
......
src/components/modulecard.vue
...@@ -4,9 +4,9 @@ ...@@ -4,9 +4,9 @@
<div class="recommend-content"> <div class="recommend-content">
<template v-for="(item, index) in list" :key="index"> <template v-for="(item, index) in list" :key="index">
<CustomCard <CustomCard
:img="item.img" :img="item.image"
:title="item.title" :title="item.title"
:content="item.content" :content="item.description"
@click="toGenerate(item)" @click="toGenerate(item)"
></CustomCard> ></CustomCard>
</template> </template>
...@@ -17,20 +17,14 @@ ...@@ -17,20 +17,14 @@
<script lang="ts" setup> <script lang="ts" setup>
import { reactive } from 'vue'; import { reactive } from 'vue';
import CustomCard from '@/components/card.vue'; import CustomCard from '@/components/card.vue';
import { useRouter } from 'vue-router';
const props = defineProps<{ const props = defineProps<{
list: any[]; list: any[];
label: string; label: string;
}>(); }>();
const router = useRouter(); const emit = defineEmits(['change']);
const toGenerate = (item: any) => { const toGenerate = (item: any) => {
// 判断类型跳转页面 // 判断类型跳转页面
console.log(item); emit('change', item);
const url = router.resolve({
// path: '/CopywritingGeneration',
path: '/ImageGeneration',
});
window.open(url.href);
}; };
</script> </script>
......
src/layout/content.vue
...@@ -27,13 +27,13 @@ const route = useRoute(); ...@@ -27,13 +27,13 @@ const route = useRoute();
background: #181818; background: #181818;
.custom-content { .custom-content {
flex: 1; flex: 1;
max-height: calc(100vh - 60px); max-height: calc(100vh - 67px);
overflow: auto; overflow: auto;
.center-box { .center-box {
margin: 0 auto; margin: 0 auto;
// min-width: 90vw;
max-width: 1597px; max-width: 1597px;
box-sizing: border-box; box-sizing: border-box;
min-width: 90vw;
padding: 0 30px; padding: 0 30px;
height: 100%; height: 100%;
} }
......
src/pages/CreationRecord/components/CopywritingRecord.vue 0 → 100644
<template>
<div>
<TTable
class="reset-t-table"
row-key="index"
:data="RecordList.list"
:columns="columns"
:loading="loading"
>
<template #detail="{ row }">
<div class="detail-box" v-for="item in row.detail" :key="item.name">
<span>{{ item.label }}：</span>
<span>{{ item.value }}</span>
</div>
</template>
<template #download="{ row }">
<span class="download-text"> 查看 </span>
</template>
</TTable>
<div class="custom-pagination">
<t-pagination
v-model="pageNum"
v-model:page-size="pageSize"
:total="total"
:pageSizeOptions="[]"
@current-change="pageChange"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import { Table as TTable } from 'tdesign-vue-next';
import CustomTTable from '@/components/custom/TTable.vue';
import { onBeforeMount, reactive, ref } from 'vue';
import { getGenerateRecords } from '@/utils/api/scenes';
import { Pagination as TPagination } from 'tdesign-vue-next';
import { TASKTYPE } from '@/utils/api/Task';
const RecordList = reactive({
// 绘图列表
list: [],
});
const loading = ref(false);
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
// 文案记录
const columns = [
{
title: '产品',
colKey: 'title',
},
{
title: '详细',
colKey: 'detail',
align: 'center',
},
{
title: '消耗字符数',
colKey: 'consumes_characters',
align: 'center',
},
{
title: '操作',
colKey: 'download',
align: 'right',
},
];
const pageChange = (value: number) => {
pageNum.value = value;
getLog();
};
const getLog = async () => {
try {
loading.value = true;
let res: any = await getGenerateRecords({
page: pageNum.value,
limit: pageSize.value,
type: TASKTYPE.CHAT,
});
if (res.code == 0) {
RecordList.list = res.data.data;
total.value = res.data.total;
}
console.log(res);
loading.value = false;
} catch (e) {
loading.value = false;
console.log(e);
}
};
onBeforeMount(() => {
getLog();
});
</script>
<style lang="less">
@import '@/style/variables.less';
.reset-t-table {
background-color: transparent;
min-height: 500px;
.t-table__content {
background-color: transparent;
}
thead {
tr {
background-color: transparent;
th {
border: none;
background: #000000;
color: white;
font-size: @font-size-16;
font-weight: 400;
}
& > :first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
& > :last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
}
}
tbody {
.t-table__empty-row {
background-color: transparent;
&:hover {
background-color: transparent;
}
.t-table__empty {
color: white;
}
}
tr {
background: transparent;
td {
color: #ffffff;
border-bottom: 1px solid #464646;
font-weight: 400;
font-size: @font-size-14;
.detail-box {
text-align: start;
}
.img {
width: 85px;
height: 85px;
border-radius: 8px;
}
.download-text {
font-weight: 400;
font-size: @font-size-14;
color: #00f9f9;
cursor: pointer;
}
}
}
}
}
.custom-pagination {
padding: 12px 0;
.t-pagination__total {
color: white;
}
.t-is-current {
background: #00f9f9;
border-radius: 2px;
border: none;
color: #000000;
}
.t-pagination__btn {
& > :nth-child(1) {
color: #c9cdd4;
}
}
}
</style>
src/pages/CreationRecord/components/MappingRecord.vue
<template> <template>
<CustomTTable <div>
class="mapping-record-table" <TTable
:columns="columns" class="reset-t-table"
:list="RecordList.list" row-key="index"
></CustomTTable> :data="RecordList.list"
:columns="columns"
:loading="loading"
>
<template #detail="{ row }">
<div class="detail-box" v-for="item in row.detail" :key="item.name">
<span>{{ item.label }}：</span>
<span>{{ item.value }}</span>
</div>
</template>
<template #size="{ row }">
<div v-for="(item, index) in row.size" :key="item">
<span
>{{ item }}
<template v-if="index != 0">,</template>
</span>
</div>
</template>
<template #url="{ row }">
<img class="img" :src="row.url" alt="" />
</template>
<template #download="{ row }">
<span class="download-text"> 下载 </span>
</template>
</TTable>
<div class="custom-pagination">
<t-pagination
v-model="pageNum"
v-model:page-size="pageSize"
:total="total"
:pageSizeOptions="[]"
@current-change="pageChange"
/>
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import CustomTTable from "@/components/custom/TTable.vue"; import { Table as TTable } from 'tdesign-vue-next';
import { reactive } from "vue"; import CustomTTable from '@/components/custom/TTable.vue';
import { onBeforeMount, reactive, ref } from 'vue';
import { getGenerateRecords } from '@/utils/api/scenes';
import { Pagination as TPagination } from 'tdesign-vue-next';
import { TASKTYPE } from '@/utils/api/Task';
const RecordList = reactive({ const RecordList = reactive({
// 绘图列表 // 绘图列表
list: [], list: [],
}); });
const loading = ref(false);
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
const total = ref<number>(0);
// 绘图记录 // 绘图记录
const columns = [ const columns = [
{ {
title: "产品", title: '产品',
colKey: "name", colKey: 'title',
}, },
{ {
title: "详细", title: '详细',
colKey: "packages", colKey: 'detail',
align: "center", align: 'center',
className: "n_quantity", width: '40%',
}, },
{ {
title: "尺寸", title: '尺寸',
colKey: "n_funds", colKey: 'size',
align: "center", align: 'center',
className: "n_funds",
}, },
{ {
title: "数量", title: '数量',
colKey: "operation", colKey: 'number',
align: "right", align: 'center',
}, },
{ {
title: "图片", title: '图片',
colKey: "img", colKey: 'url',
align: "center", align: 'center',
}, },
{ {
title: "下载", title: '下载',
colKey: "download", colKey: 'download',
align: "right", align: 'right',
}, },
]; ];
const pageChange = (value: number) => {
pageNum.value = value;
getLog();
};
const getLog = async () => {
try {
loading.value = true;
let res: any = await getGenerateRecords({
page: pageNum.value,
limit: pageSize.value,
type: TASKTYPE.PAINTING,
});
if (res.code == 0) {
RecordList.list = res.data.data;
total.value = res.data.total;
}
console.log(res);
loading.value = false;
} catch (e) {
loading.value = false;
console.log(e);
}
};
onBeforeMount(() => {
getLog();
});
</script> </script>
<style lang="less"> <style lang="less">
.mapping-record-table { @import '@/style/variables.less';
.reset-t-table {
background-color: transparent;
min-height: 500px;
.t-table__content {
background-color: transparent;
}
thead {
tr {
background-color: transparent;
th {
border: none;
background: #000000;
color: white;
font-size: @font-size-16;
font-weight: 400;
}
& > :first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
& > :last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
}
}
tbody {
.t-table__empty-row {
background-color: transparent;
&:hover {
background-color: transparent;
}
.t-table__empty {
color: white;
}
}
tr {
background: transparent;
td {
color: #ffffff;
border-bottom: 1px solid #464646;
font-weight: 400;
font-size: @font-size-14;
.detail-box {
text-align: start;
}
.img {
width: 85px;
height: 85px;
border-radius: 8px;
}
.download-text {
font-weight: 400;
font-size: @font-size-14;
color: #00f9f9;
cursor: pointer;
}
}
}
}
}
.custom-pagination {
padding: 12px 0;
.t-pagination__total {
color: white;
}
.t-is-current {
background: #00f9f9;
border-radius: 2px;
border: none;
color: #000000;
}
.t-pagination__btn {
& > :nth-child(1) {
color: #c9cdd4;
}
}
} }
</style> </style>
src/pages/CreationRecord/index.vue
...@@ -17,10 +17,7 @@ ...@@ -17,10 +17,7 @@
</div> </div>
<template v-if="is_first"> <template v-if="is_first">
<div v-show="DefaultTable == 'text'"> <div v-show="DefaultTable == 'text'">
<CustomTTable <CopywritingRecord></CopywritingRecord>
:columns="columns2"
:list="RecordList.textlist"
></CustomTTable>
</div> </div>
</template> </template>
</div> </div>
...@@ -28,11 +25,12 @@ ...@@ -28,11 +25,12 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import CustomTTable from "@/components/custom/TTable.vue"; import CustomTTable from '@/components/custom/TTable.vue';
import MappingRecord from "./components/MappingRecord.vue"; import MappingRecord from './components/MappingRecord.vue';
import { reactive, ref } from "vue"; import CopywritingRecord from './components/CopywritingRecord.vue';
import { reactive, ref } from 'vue';
// 默认展示绘图记录 // 默认展示绘图记录
const DefaultTable = ref<"img" | "text">("img"); const DefaultTable = ref<'img' | 'text'>('img');
const is_first = ref(false); const is_first = ref(false);
const RecordList = reactive({ const RecordList = reactive({
...@@ -43,37 +41,37 @@ const RecordList = reactive({ ...@@ -43,37 +41,37 @@ const RecordList = reactive({
}); });
const label_list = [ const label_list = [
{ {
label: "绘图记录", label: '绘图记录',
value: "img", value: 'img',
}, },
{ {
label: "文案记录", label: '文案记录',
value: "text", value: 'text',
}, },
]; ];
// 文案记录 // 文案记录
const columns2 = [ const columns2 = [
{ {
title: "账号", title: '账号',
colKey: "name", colKey: 'name',
}, },
{ {
title: "套餐", title: '套餐',
colKey: "packages", colKey: 'packages',
align: "center", align: 'center',
className: "n_quantity", className: 'n_quantity',
}, },
{ {
title: "状况", title: '状况',
colKey: "n_funds", colKey: 'n_funds',
align: "center", align: 'center',
className: "n_funds", className: 'n_funds',
}, },
{ {
title: "到期时间", title: '到期时间',
colKey: "operation", colKey: 'operation',
align: "right", align: 'right',
}, },
]; ];
const changeTable = (item: any) => { const changeTable = (item: any) => {
...@@ -83,9 +81,9 @@ const changeTable = (item: any) => { ...@@ -83,9 +81,9 @@ const changeTable = (item: any) => {
</script> </script>
<style lang="less"> <style lang="less">
@import "@/style/variables.less"; @import '@/style/variables.less';
.custom-creation-record { .custom-creation-record {
margin-top: @page-margin-top; padding-top: @page-margin-top;
.label-box { .label-box {
font-weight: 600; font-weight: 600;
font-size: @font-size-18; font-size: @font-size-18;
......
src/pages/Detail/index.vue
<template> <template>
<div class="custom-product-detail"> <div class="custom-product-detail">
<ModuleCard label="亚马逊工具" :list="ProductList.list"></ModuleCard> <ModuleCard
<Animation v-show="loading"></Animation> :label="parent_title"
:list="ProductList.list"
@change="onChange"
></ModuleCard>
<CustomLoading v-show="loading"></CustomLoading>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRoute } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import { show_message } from '@/utils/tdesign_tool'; import { show_message } from '@/utils/tdesign_tool';
import ModuleCard from '@/components/modulecard.vue'; import ModuleCard from '@/components/modulecard.vue';
import Animation from '@/components/Animation.vue'; import Animation from '@/components/Animation.vue';
import { getScenesList } from '@/utils/api/scenes';
import CustomLoading from '@/components/custom/loading2.vue';
import { TASKTYPE } from '@/utils/api/Task';
// 会带一个id // 会带一个id
const route = useRoute(); const route = useRoute();
const params_id = route.params.id; const router = useRouter();
const params_id = route.query.id;
const loading = ref(false); const loading = ref(false);
// 产品大标题
const parent_title = ref('');
// 产品列表 // 产品列表
const ProductList = reactive({ const ProductList = reactive({
list: [], list: [],
}); });
// 这里跳转传id
const onChange = (item: any) => {
console.log(item);
let path = '';
if (item.type == TASKTYPE.CHAT) {
// 文案
path = '/CopywritingGeneration';
} else if (item.type == TASKTYPE.PAINTING) {
// 绘图
path = '/ImageGeneration';
}
if (path) {
const url = router.resolve({
path: path,
query: {
id: item.id,
},
});
window.open(url.href);
}
};
// 获取当前分类所有产品 // 获取当前分类所有产品
const getallproduct = () => { const getallproduct = async () => {
try { try {
if (!params_id) { if (typeof params_id == 'undefined') {
show_message('没有类目id'); show_message('没有类目id');
return; return;
} }
// let res: any = await ddd(); loading.value = true;
// console.log(res); let res: any = await getScenesList(params_id, 'parent');
if (res.code == 0) {
parent_title.value = res.data[0].parent_title;
ProductList.list = res.data;
}
console.log(res);
loading.value = false;
} catch (e) { } catch (e) {
console.log(e); console.log(e);
loading.value = false;
} }
}; };
onMounted(() => { onMounted(() => {
// 获取数据 // 获取数据
getallproduct(); getallproduct();
// 假数据生成
for (let i = 0; i < 20; i++) {
ProductList.list.push({
img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href,
title: '亚马逊工具',
content:
'你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好',
});
}
}); });
</script> </script>
<style lang="less"> <style lang="less">
.custom-product-detail { .custom-product-detail {
padding-bottom: 40px;
box-sizing: border-box; box-sizing: border-box;
height: 100%;
position: relative;
.custom-recommend {
margin-top: 0;
padding-top: 30px;
}
} }
</style> </style>
src/pages/Home/components/HomeSwiper/swiper.vue
...@@ -94,6 +94,9 @@ const goDetail = (item: any) => { ...@@ -94,6 +94,9 @@ const goDetail = (item: any) => {
console.log(item); console.log(item);
const url = router.resolve({ const url = router.resolve({
path: 'Detail', path: 'Detail',
query: {
id: item.id,
},
}); });
window.open(url.href); window.open(url.href);
}; };
......
src/pages/Home/index.less
@import '@/style/variables.less'; @import '@/style/variables.less';
.swiper-box { .swiper-box {
margin: @page-margin-top 0 30px 0; margin: @page-margin-top 0 30px 0;
margin-top: 0;
padding-top: @page-margin-top;
} }
src/pages/Home/index.tsx
...@@ -2,27 +2,48 @@ import { defineComponent, onMounted, reactive } from 'vue'; ...@@ -2,27 +2,48 @@ import { defineComponent, onMounted, reactive } from 'vue';
import HomeSwiper from './components/HomeSwiper/swiper.vue'; import HomeSwiper from './components/HomeSwiper/swiper.vue';
import './index.less'; import './index.less';
import ModuleCard from '@/components/modulecard.vue'; import ModuleCard from '@/components/modulecard.vue';
import { getScenariosRecommend } from '@/utils/api/scenes';
import { useRouter } from 'vue-router';
export default defineComponent({ export default defineComponent({
setup() { setup() {
const router = useRouter();
const CardList = reactive({ const CardList = reactive({
list: [] as any, list: [] as any,
}); });
onMounted(() => { const getRecommend = async () => {
// 创建测试列表 try {
for (let i = 0; i < 21; i++) { let res: any = await getScenariosRecommend();
CardList.list.push({ if (res.code == 0) {
img: new URL('../../assets/img/clothes.jpeg', import.meta.url).href, CardList.list = res.data;
title: '亚马逊产品文案生成', }
content: console.log(res.data);
'1111121111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111', } catch (e) {
console.log(e);
}
};
const onChange = (item: any) => {
if (item.type == 0) {
// 文案生成
const url = router.resolve({
path: '/CopywritingGeneration',
// path: '/ImageGeneration',
}); });
window.open(url.href);
} }
};
onMounted(() => {
// 获取推荐数据
getRecommend();
}); });
return () => ( return () => (
<div> <div>
<div class="swiper-box"> <div class="swiper-box">
<HomeSwiper></HomeSwiper> <HomeSwiper></HomeSwiper>
<ModuleCard label="推荐工具" list={CardList.list}></ModuleCard> <ModuleCard
label="推荐工具"
list={CardList.list}
onChange={onChange}
></ModuleCard>
</div> </div>
</div> </div>
); );
......
src/pages/ImageGeneration/components/GenerateResult/index.less
@import '@/style/variables.less'; @import '@/style/variables.less';
.empty-box, .img-res-status {
.loading-box {
display: flex; display: flex;
flex-direction: column; justify-content: center;
align-items: center; align-items: center;
& > :nth-child(2) { .empty-box,
margin-top: 12px; .loading-box {
font-size: @font-size-16;
color: #888fa1;
}
}
.loading-box {
}
.load-success-box {
padding: 0 20px;
height: 100%;
display: flex;
flex-direction: column;
width: 100%;
.result-img-box {
padding-top: 100px;
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; align-items: center;
flex-wrap: wrap; & > :nth-child(2) {
row-gap: 20px; margin-top: 12px;
width: 100%; font-size: @font-size-16;
.result-img { color: #888fa1;
margin: 0 12px;
width: 350px;
height: 350px;
border-radius: 8px;
.img {
width: 100%;
height: 100%;
}
} }
} }
.download-img-box { .load-success-box {
flex: 1; padding: 0 20px;
height: 100%;
display: flex; display: flex;
align-items: flex-end; flex-direction: column;
padding: 0 12px 20px 12px; width: 100%;
.custom-reset-button { .result-img-box {
width: calc(100% - 2px) !important; padding: 100px 0 20px 0;
&::before { display: flex;
width: calc(200% - 2px); justify-content: center;
align-items: center;
flex-wrap: wrap;
row-gap: 20px;
width: 100%;
.result-img {
margin: 0 12px;
width: 350px;
height: 350px;
border-radius: 8px;
.img {
width: 100%;
height: 100%;
}
}
}
.download-img-box {
flex: 1;
display: flex;
align-items: flex-end;
padding: 0 12px 20px 12px;
.custom-reset-button {
width: calc(100% - 2px) !important;
&::before {
width: calc(200% - 2px);
}
} }
} }
} }
......
src/pages/ImageGeneration/components/GenerateResult/index.tsx
...@@ -36,7 +36,7 @@ export default defineComponent({ ...@@ -36,7 +36,7 @@ export default defineComponent({
{props.list {props.list
? props.list.map((item: any) => ( ? props.list.map((item: any) => (
<div class="result-img"> <div class="result-img">
<img class="img" src={item.img} alt="" /> <img class="img" src={item} alt="" />
</div> </div>
)) ))
: ''} : ''}
...@@ -50,13 +50,18 @@ export default defineComponent({ ...@@ -50,13 +50,18 @@ export default defineComponent({
// 判断当前展示的模块 // 判断当前展示的模块
const CurrentModule = () => { const CurrentModule = () => {
if (true) { // return LoadSuccessHTML();
// return EmptyHTML(); const { status } = props;
// return LoadingHTML(); if (status == '') {
// 未开始
return EmptyHTML();
} else if (status == 'loading') {
return LoadingHTML();
} else {
return LoadSuccessHTML(); return LoadSuccessHTML();
} }
}; };
return () => <div>{CurrentModule()}</div>; return () => <div class="img-res-status">{CurrentModule()}</div>;
}, },
}); });
src/pages/ImageGeneration/components/upload/index.less
...@@ -73,6 +73,11 @@ ...@@ -73,6 +73,11 @@
font-size: @font-size-15; font-size: @font-size-15;
color: #8b8b8b; color: #8b8b8b;
} }
.custom-t-progress {
.t-progress__info {
color: #00f9f9;
}
}
} }
.custom-UploadSuccess-stauts { .custom-UploadSuccess-stauts {
display: flex; display: flex;
......
src/pages/ImageGeneration/components/upload/index.tsx
import { computed, defineComponent, reactive, ref } from 'vue'; import { defineComponent, reactive, ref, watch } from 'vue';
import './index.less'; import './index.less';
import UploadTip from '@/assets/svg/upload/uploadTip2.svg'; import UploadTip from '@/assets/svg/upload/uploadTip2.svg';
import { import {
...@@ -17,16 +17,12 @@ import { v4 } from 'uuid'; ...@@ -17,16 +17,12 @@ import { v4 } from 'uuid';
export default defineComponent({ export default defineComponent({
props: { props: {
modelValue: String, modelValue: String,
config: Object as any,
num: Number,
}, },
emits: ['update:modelValue'], emits: ['update:modelValue'],
setup(props, { emit }) { setup(props, { emit }) {
const store = useStore(); const store = useStore();
// 后台配置的地址
const adminConfigUrl = computed(() => store.getters['user/getadminConfig']);
// 上传策略
const uploadStrategy = computed(
() => store.getters['user/getuploadStrategy']
);
const files = ref([]); const files = ref([]);
// 文件地址 // 文件地址
const Curfile = reactive({ const Curfile = reactive({
...@@ -53,7 +49,7 @@ export default defineComponent({ ...@@ -53,7 +49,7 @@ export default defineComponent({
}; };
const beforeUpload = (file: File) => { const beforeUpload = (file: File) => {
try { try {
let config = uploadStrategy.value.config; const { config } = props;
let config_len = Object.keys(config).length; let config_len = Object.keys(config).length;
if (!config_len) { if (!config_len) {
show_message('无法上传,请尝试刷新页面'); show_message('无法上传,请尝试刷新页面');
...@@ -89,45 +85,6 @@ export default defineComponent({ ...@@ -89,45 +85,6 @@ export default defineComponent({
emit('update:modelValue', Curfile.url); emit('update:modelValue', Curfile.url);
MessagePlugin.warning('上传失败'); MessagePlugin.warning('上传失败');
}; };
// 内网上传-Intranet
const IntranetUpload = (file: any) => {
openpercentage();
return new Promise((resolve) => {
let uuid = v4();
// 上传中状态
Curfile.status = 1;
let url = '';
if (import.meta.env.MODE == 'production') {
// 线上地址使用完整url
url = adminConfigUrl.value + 'video/' + uuid + '.png';
// url = `http://192.168.1.19:5000/video/` + uuid + '.png';
} else if (import.meta.env.MODE == 'app') {
// app
url = '/video/' + uuid + '.png';
} else {
// 本地
url = '/video/' + uuid + '.png';
}
setTimeout(() => {
request.put(url, file[0].raw).then((res: any) => {
// resolve 参数为关键代码
if (res == 200) {
let url = adminConfigUrl.value + 'video/' + uuid + '.png';
UploadSuccessCallback(uuid, url);
//
Curfile.uploadStatus = true;
resolve({
status: 'success',
response: { url: Curfile.url },
});
} else {
UploadErrorCallback();
Curfile.uploadStatus = false;
}
});
}, 1000);
});
};
// 外网上传-func // 外网上传-func
const ExtranetUpload = (file: any) => { const ExtranetUpload = (file: any) => {
openpercentage(); openpercentage();
...@@ -136,7 +93,7 @@ export default defineComponent({ ...@@ -136,7 +93,7 @@ export default defineComponent({
// 上传中状态 // 上传中状态
Curfile.status = 1; Curfile.status = 1;
let url = ''; let url = '';
const { config } = uploadStrategy.value; const { config } = props;
url = 'https://' + config.host; url = 'https://' + config.host;
setTimeout(() => { setTimeout(() => {
let formData = new FormData(); let formData = new FormData();
...@@ -216,9 +173,11 @@ export default defineComponent({ ...@@ -216,9 +173,11 @@ export default defineComponent({
return ( return (
<div class="custom-uploading-stauts"> <div class="custom-uploading-stauts">
<TProgress <TProgress
class="custom-t-progress"
theme="circle" theme="circle"
percentage={percentage.value} percentage={percentage.value}
size={'small'} size={'small'}
color={'#00f9f9'}
/> />
<div class="uploading-title">正在上传</div> <div class="uploading-title">正在上传</div>
</div> </div>
...@@ -243,6 +202,12 @@ export default defineComponent({ ...@@ -243,6 +202,12 @@ export default defineComponent({
return UploadSuccess(); return UploadSuccess();
} }
}; };
watch(
() => props.num,
(v) => {
Curfile.status = 0;
}
);
return () => ( return () => (
<div class="custom-real-upload custom-upload-line"> <div class="custom-real-upload custom-upload-line">
<div class="real-upload-content"> <div class="real-upload-content">
......
src/style/ui.less
...@@ -16,4 +16,9 @@ ...@@ -16,4 +16,9 @@
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #ddd; background: #ddd;
} }
&:hover {
&::-webkit-scrollbar-thumb {
background: #ddd !important;
}
}
} }
src/style/variables.less
// 每个页面的content模块的margin-top // 每个页面的content模块的margin-top
@page-margin-top: 30px; @page-margin-top: 30px;
// border // border
@main-border-radius: 15px; @main-border-radius: 15px;
......
src/utils/api/Task.ts
...@@ -2,3 +2,239 @@ export const Tasks = { ...@@ -2,3 +2,239 @@ export const Tasks = {
img_to_img: 1, img_to_img: 1,
text_to_img: 2, text_to_img: 2,
}; };
// 任务类型
export const TASKTYPE = {
CHAT: 1,
PAINTING: 2,
VIDEO: 3,
};
// 文案生成对话记录 本地的key
export const ConversationKey = 'custom_conversation';
// 图片生成页面要push一个生成数量
export const CustomNum = {
name: '生成数量',
lists: [
{
type: 'custom-number',
label: '生成数量',
name: 'number',
value: null,
span: 24,
placeholder: '自定义',
rules: [
{
type: 'required',
message: '产品数量必填',
},
],
},
],
};
// form表单示例--文案
export const FormExample = [
{
name: '基础填写',
lists: [
{
type: 'text',
name: 'category_1',
label: '产品类目',
value: null,
span: 24,
placeholder: '产品类目',
rules: [
{
type: 'required',
message: '必填',
},
],
},
{
type: 'text',
name: 'category_2',
value: null,
label: '产品关键词',
span: 24,
placeholder: '产品关键词',
rules: [
{
type: 'required',
message: '必填',
},
],
},
// 下拉选择
{
type: 'select',
placeholder: '选择产品名称',
label: '产品名称',
name: 'category_3',
options: [
{
label: '充电器',
value: '充电器',
},
{
label: '衣服',
value: '衣服',
},
],
// 可设置默认值
value: '衣服',
rules: [
{
type: 'required',
message: '必填',
},
],
},
],
},
{
name: '详细描述',
lists: [
{
// 长文本输入框
type: 'textarea',
name: 'category_4',
label: '产品描述',
value: null,
span: 24,
maxRows: '5',
minRows: '5',
placeholder: '详细描述产品细节，生成的文案更加完美。',
maxlength: 1000,
rules: [
{
type: 'required',
message: '必填',
},
],
},
],
},
];
// form表单示例2-图片生成
export const FormExample2 = [
{
name: '基础填写',
lists: [
{
type: 'text',
name: 'category_1',
label: '产品类目',
value: null,
span: 24,
placeholder: '产品类目',
rules: [
{
type: 'required',
message: '产品类目必填',
},
],
},
{
type: 'text',
name: 'category_2',
label: '产品类型',
value: null,
span: 24,
placeholder: '产品类型',
rules: [
{
type: 'required',
message: '产品类型必填',
},
],
},
],
},
{
name: '画面描述',
lists: [
{
// 长文本输入框
type: 'textarea',
name: 'category_3',
label: '画面描述',
value: null,
span: 24,
maxRows: '5',
minRows: '5',
placeholder:
'画面描述以短句、短语为佳，高级设置内的参数会对图像生成有艺术修饰作用；支持中英文等语言输入',
maxlength: 1000,
rules: [
{
type: 'required',
message: '画面描述必填',
},
],
},
],
},
// 图片尺寸
{
name: '图片尺寸',
lists: [
{
// 单选按钮组
type: 'radio_group_size',
name: 'size_1',
value: '1600x1600',
span: 24,
label: '图片尺寸',
placeholder: '详细描述产品细节，生成的文案更加完美。',
options: [
{
size: '1600x1600',
label: '亚马逊产品图尺寸',
value: '1600x1600',
},
{
size: '600x180',
label: '亚马逊a+主图',
value: '600x180',
},
{
type: 'custom',
label: '自定义',
value: '',
value1: '',
value2: '',
},
],
rules: [
{
type: 'required',
message: '图片尺寸必选',
},
],
},
],
},
// 上传图片
{
name: '上传图片',
lists: [
{
// 单选按钮组
type: 'upload',
name: 'image_1',
label: '上传图片',
value: null,
span: 24,
// rules: [
// {
// type: 'required',
// message: '必填',
// },
// ],
},
],
},
];
src/utils/api/scenes.ts
...@@ -3,8 +3,19 @@ import request from '../request'; ...@@ -3,8 +3,19 @@ import request from '../request';
// 场景模块 // 场景模块
// 获取场景列表 // 获取场景列表
export const getScenesList = () => { export const getScenesList = (id: number, type: string) => {
return request.get('/api/scenarios', { if (type == 'parent') {
return request.get(`/api/scenarios`, {
params: {
parent_id: id,
},
headers: {
authorization: `Bearer ${getUserCookie()}`,
},
});
}
let url = id ? `/api/scenarios/${id}` : `/api/scenarios`;
return request.get(url, {
headers: { headers: {
authorization: `Bearer ${getUserCookie()}`, authorization: `Bearer ${getUserCookie()}`,
}, },
...@@ -19,3 +30,50 @@ export const getScenariosRecommend = () => { ...@@ -19,3 +30,50 @@ export const getScenariosRecommend = () => {
}, },
}); });
}; };
// 文案提交
export const useSubmitConversation = (data: any) => {
return request.post('/api/users/conversation', data, {
headers: {
authorization: `Bearer ${getUserCookie()}`,
},
});
};
// 图片任务提交
export const useSubmitConversationImage = (data: any) => {
return request.post('/api/users/conversation/image', data, {
headers: {
authorization: `Bearer ${getUserCookie()}`,
},
});
};
// 图片任务回调
export const useImageCallback = (data: any) => {
return request.get('/api/users/conversation/image', {
params: data,
headers: {
authorization: `Bearer ${getUserCookie()}`,
},
});
};
// 获取上传策略
export const useUploadStrategy = () => {
return request.get('/api/users/upload/policy', {
headers: {
authorization: `Bearer ${getUserCookie()}`,
},
});
};
// 获取生成记录
export const getGenerateRecords = (data: any) => {
return request.get('/api/users/scenarios/logs', {
params: data,
headers: {
authorization: `Bearer ${getUserCookie()}`,
},
});
};
src/utils/tool.ts
...@@ -411,3 +411,33 @@ export const filterRepeatTimestamp = (list: any, newList: any) => { ...@@ -411,3 +411,33 @@ export const filterRepeatTimestamp = (list: any, newList: any) => {
} }
return list; return list;
}; };
/**
*
* @param rules
* @param value
* @returns
*/
export const Validationrules = (
rules: any[],
value: string | number,
name: string = ''
) => {
if (rules && rules.length) {
for (let i = 0; i < rules.length; i++) {
let item = rules[i];
if (item.type == 'required' && !value && name.indexOf('size_') == -1) {
// 必填项
return item.message;
} else if (item.type == 'regex' && value) {
// 正则
let status = item.value.test(value);
if (!status) {
return item.message;
}
}
}
} else {
return '';
}
};
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