|
@@ -20,8 +20,12 @@
|
|
useUserStore
|
|
useUserStore
|
|
} from '@/store'
|
|
} from '@/store'
|
|
import Login from '@/components/Login.vue'
|
|
import Login from '@/components/Login.vue'
|
|
|
|
+ import HideUpload from '@/components/HideUpload.vue'
|
|
|
|
+ import { useRouter } from 'vue-router';
|
|
|
|
+ const router = useRouter();
|
|
const userStore = useUserStore()
|
|
const userStore = useUserStore()
|
|
const message = ref('');
|
|
const message = ref('');
|
|
|
|
+ const hideUploadRef = ref(null);
|
|
const typeList = ref([{
|
|
const typeList = ref([{
|
|
id: 1,
|
|
id: 1,
|
|
name: '网站'
|
|
name: '网站'
|
|
@@ -57,7 +61,16 @@
|
|
const loading = ref(false);
|
|
const loading = ref(false);
|
|
const websiteURL = ref('');
|
|
const websiteURL = ref('');
|
|
const commandFunction = (command) => {
|
|
const commandFunction = (command) => {
|
|
|
|
+ if (!userStore.token) {
|
|
|
|
+ ElMessage({
|
|
|
|
+ message: '请先登录',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ })
|
|
|
|
+ loginVisible.value = true;
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
if (command === 'url') openUrl();
|
|
if (command === 'url') openUrl();
|
|
|
|
+ if (command === 'image') hideUploadRef.value.handleUpload();
|
|
}
|
|
}
|
|
const openUrl = () => {
|
|
const openUrl = () => {
|
|
ElMessageBox.prompt('请输入参考网站网址', 'WorkArk.AI提示', {
|
|
ElMessageBox.prompt('请输入参考网站网址', 'WorkArk.AI提示', {
|
|
@@ -72,10 +85,10 @@
|
|
websiteURL.value = value;
|
|
websiteURL.value = value;
|
|
}).catch(() => {});
|
|
}).catch(() => {});
|
|
}
|
|
}
|
|
- const imageList = ref([{
|
|
|
|
- id: 1,
|
|
|
|
- url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
|
|
|
- }])
|
|
|
|
|
|
+ const imageList = ref([])
|
|
|
|
+ const uploadImage = url => {
|
|
|
|
+ imageList.value.push(url);
|
|
|
|
+ }
|
|
const removeImage = (index) => {
|
|
const removeImage = (index) => {
|
|
ElMessageBox.confirm('是否删除该图片?', 'WorkArk.AI提示', {
|
|
ElMessageBox.confirm('是否删除该图片?', 'WorkArk.AI提示', {
|
|
confirmButtonText: '确认',
|
|
confirmButtonText: '确认',
|
|
@@ -93,8 +106,10 @@
|
|
const user = ref({});
|
|
const user = ref({});
|
|
const init = () => {
|
|
const init = () => {
|
|
user.value = userStore.userData;
|
|
user.value = userStore.userData;
|
|
- console.log(JSON.stringify(user.value));
|
|
|
|
}
|
|
}
|
|
|
|
+ const selectVisible = ref(false);
|
|
|
|
+ const selectData = ref({});
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
init();
|
|
init();
|
|
})
|
|
})
|
|
@@ -129,6 +144,7 @@
|
|
<el-input type="textarea" v-model="message" placeholder="生成一个信息科技企业官网" resize="none" :rows="5"
|
|
<el-input type="textarea" v-model="message" placeholder="生成一个信息科技企业官网" resize="none" :rows="5"
|
|
:autosize="{ minRows: 3, maxRows: 7 }">
|
|
:autosize="{ minRows: 3, maxRows: 7 }">
|
|
</el-input>
|
|
</el-input>
|
|
|
|
+ <HideUpload ref="hideUploadRef" v-show="false" @uploadImage="uploadImage"></HideUpload>
|
|
<div class="form-submit">
|
|
<div class="form-submit">
|
|
<div class="form-operation">
|
|
<div class="form-operation">
|
|
<el-dropdown @command="commandFunction">
|
|
<el-dropdown @command="commandFunction">
|
|
@@ -140,9 +156,13 @@
|
|
</el-dropdown-menu>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</template>
|
|
</el-dropdown>
|
|
</el-dropdown>
|
|
- <el-button style="margin-left: 10px;" size="default" :icon="Plus" circle></el-button>
|
|
|
|
|
|
+ <el-button style="margin-left: 10px;" size="default" :icon="Plus" circle
|
|
|
|
+ @click="selectVisible = true">
|
|
|
|
+ </el-button>
|
|
</div>
|
|
</div>
|
|
- <el-button type="primary" size="large" :icon="Top" circle :loading="loading"></el-button>
|
|
|
|
|
|
+ <el-button type="primary" size="large" :icon="Top" circle :loading="loading"
|
|
|
|
+ style="font-size: 18px;" @click="router.push('/ai-chat')">
|
|
|
|
+ </el-button>
|
|
</div>
|
|
</div>
|
|
<div class="operation-file" v-if="websiteURL || imageList.length > 0">
|
|
<div class="operation-file" v-if="websiteURL || imageList.length > 0">
|
|
<div class="operation-url" v-if="websiteURL">
|
|
<div class="operation-url" v-if="websiteURL">
|
|
@@ -151,8 +171,8 @@
|
|
</el-tag>
|
|
</el-tag>
|
|
</div>
|
|
</div>
|
|
<div class="operation-image" v-if="imageList.length > 0">
|
|
<div class="operation-image" v-if="imageList.length > 0">
|
|
- <div class="image-item" v-for="(image,index) in imageList" :key="image.id">
|
|
|
|
- <el-image style="width: 60px; height: 60px" :src="image.url" fit="cover" />
|
|
|
|
|
|
+ <div class="image-item" v-for="(image,index) in imageList" :key="index">
|
|
|
|
+ <el-image style="width: 60px; height: 60px" :src="image" fit="cover" />
|
|
<el-icon class="image-icon" @click="removeImage(index)">
|
|
<el-icon class="image-icon" @click="removeImage(index)">
|
|
<CircleCloseFilled />
|
|
<CircleCloseFilled />
|
|
</el-icon>
|
|
</el-icon>
|
|
@@ -164,9 +184,43 @@
|
|
<el-dialog v-model="loginVisible" title="登录" width="440px">
|
|
<el-dialog v-model="loginVisible" title="登录" width="440px">
|
|
<login v-if="loginVisible" @callback="callback"></login>
|
|
<login v-if="loginVisible" @callback="callback"></login>
|
|
</el-dialog>
|
|
</el-dialog>
|
|
|
|
+ <el-dialog v-model="selectVisible" title="选项" width="800px" class="ai-dialog select-dialog">
|
|
|
|
+ <div class="select-item">
|
|
|
|
+ <div class="select-item-title">生成类型</div>
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
+ <el-col :span="6" v-for="(item,index) in typeList" :key="index">
|
|
|
|
+ <el-button :type="typeValue === item.id ? 'primary' : ''" style="width: 100%;"
|
|
|
|
+ @click="typeValue = item.id">
|
|
|
|
+ {{item.name}}
|
|
|
|
+ </el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="select-item">
|
|
|
|
+ <div class="select-item-title">类型</div>
|
|
|
|
+ <el-row :gutter="20">
|
|
|
|
+ <el-col :span="6" v-for="(item,index) in generateList" :key="-index">
|
|
|
|
+ <el-button :type="generateValue === item.id ? 'primary':''" style="width: 100%;"
|
|
|
|
+ @click="generateValue = item.id">
|
|
|
|
+ {{item.name}}
|
|
|
|
+ </el-button>
|
|
|
|
+ </el-col>
|
|
|
|
+ </el-row>
|
|
|
|
+ </div>
|
|
|
|
+ </el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
|
|
+ .select-dialog {
|
|
|
|
+ .select-item {
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .select-item-title {
|
|
|
|
+ margin: 20px 0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.home-container {
|
|
.home-container {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
@@ -327,6 +381,7 @@
|
|
|
|
|
|
.image-item {
|
|
.image-item {
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
.image-icon {
|
|
.image-icon {
|