|
@@ -0,0 +1,343 @@
|
|
|
|
+<script setup>
|
|
|
|
+ import {
|
|
|
|
+ Top,
|
|
|
|
+ Paperclip,
|
|
|
|
+ CircleCloseFilled,
|
|
|
|
+ Plus,
|
|
|
|
+ UserFilled
|
|
|
|
+ } from '@element-plus/icons-vue'
|
|
|
|
+ import {
|
|
|
|
+ ElMessage,
|
|
|
|
+ ElMessageBox
|
|
|
|
+ } from 'element-plus'
|
|
|
|
+ import {
|
|
|
|
+ ref,
|
|
|
|
+ watch,
|
|
|
|
+ computed,
|
|
|
|
+ onMounted
|
|
|
|
+ } from 'vue'
|
|
|
|
+ import {
|
|
|
|
+ useUserStore
|
|
|
|
+ } from '@/store'
|
|
|
|
+ import Login from '@/components/Login.vue'
|
|
|
|
+ const userStore = useUserStore()
|
|
|
|
+ const message = ref('');
|
|
|
|
+ const typeList = ref([{
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '网站'
|
|
|
|
+ }, {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: '移动端'
|
|
|
|
+ }]);
|
|
|
|
+ const typeValue = ref(1);
|
|
|
|
+ const generateTypeList = {
|
|
|
|
+ 1: [{
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '企业官网'
|
|
|
|
+ }, {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: '电商网站'
|
|
|
|
+ }, {
|
|
|
|
+ id: 3,
|
|
|
|
+ name: '服务网站'
|
|
|
|
+ }],
|
|
|
|
+ 2: [{
|
|
|
|
+ id: 1,
|
|
|
|
+ name: '企业介绍'
|
|
|
|
+ }, {
|
|
|
|
+ id: 2,
|
|
|
|
+ name: '物业服务'
|
|
|
|
+ }]
|
|
|
|
+ }
|
|
|
|
+ const generateValue = ref(1);
|
|
|
|
+ const generateList = computed(() => {
|
|
|
|
+ generateValue.value = 1;
|
|
|
|
+ return generateTypeList[typeValue.value];
|
|
|
|
+ });
|
|
|
|
+ const loading = ref(false);
|
|
|
|
+ const websiteURL = ref('');
|
|
|
|
+ const commandFunction = (command) => {
|
|
|
|
+ if (command === 'url') openUrl();
|
|
|
|
+ }
|
|
|
|
+ const openUrl = () => {
|
|
|
|
+ ElMessageBox.prompt('请输入参考网站网址', 'WorkArk.AI提示', {
|
|
|
|
+ confirmButtonText: '确认',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ inputPattern: /./,
|
|
|
|
+ inputErrorMessage: '请输入网址',
|
|
|
|
+ inputValue: websiteURL.value
|
|
|
|
+ }).then(({
|
|
|
|
+ value
|
|
|
|
+ }) => {
|
|
|
|
+ websiteURL.value = value;
|
|
|
|
+ }).catch(() => {});
|
|
|
|
+ }
|
|
|
|
+ const imageList = ref([{
|
|
|
|
+ id: 1,
|
|
|
|
+ url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
|
|
|
+ }])
|
|
|
|
+ const removeImage = (index) => {
|
|
|
|
+ ElMessageBox.confirm('是否删除该图片?', 'WorkArk.AI提示', {
|
|
|
|
+ confirmButtonText: '确认',
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
+ type: 'warning',
|
|
|
|
+ }).then(() => {
|
|
|
|
+ imageList.value.splice(index, 1);
|
|
|
|
+ }).catch(() => {});
|
|
|
|
+ }
|
|
|
|
+ const loginVisible = ref(false);
|
|
|
|
+ const callback = () => {
|
|
|
|
+ loginVisible.value = false;
|
|
|
|
+ init();
|
|
|
|
+ }
|
|
|
|
+ const user = ref({});
|
|
|
|
+ const init = () => {
|
|
|
|
+ user.value = userStore.userData;
|
|
|
|
+ console.log(JSON.stringify(user.value));
|
|
|
|
+ }
|
|
|
|
+ onMounted(() => {
|
|
|
|
+ init();
|
|
|
|
+ })
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<template>
|
|
|
|
+ <div class="home-container">
|
|
|
|
+ <div class="home-nav">
|
|
|
|
+ <div class="home-nav-left">
|
|
|
|
+ <img class="img"
|
|
|
|
+ src="https://file-node.oss-cn-shanghai.aliyuncs.com/youji/f9617c7f80da485cb3cc72b6accc62ed"
|
|
|
|
+ alt="logo.png" />
|
|
|
|
+ <span class="title">WorkArk AI</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="home-nav-right">
|
|
|
|
+ <div class="item no-token" @click="loginVisible = true" v-if="!user.userId">
|
|
|
|
+ <el-avatar :size="36" :icon="UserFilled"></el-avatar>
|
|
|
|
+ <span class="name">登录/注册</span>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="item no-token" v-else>
|
|
|
|
+ <el-avatar :size="36" :src="user.portrait"></el-avatar>
|
|
|
|
+ <span class="name">{{user.userName}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="home-form">
|
|
|
|
+ <div class="form-title">
|
|
|
|
+ <h1 class="big-title"><span>Build By </span><span class="primary">WorkArk.AI</span></h1>
|
|
|
|
+ <p class="small-title">通过与AI聊天创建应用程序和网站</p>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="form-box">
|
|
|
|
+ <el-input type="textarea" v-model="message" placeholder="生成一个信息科技企业官网" resize="none" :rows="5"
|
|
|
|
+ :autosize="{ minRows: 3, maxRows: 7 }">
|
|
|
|
+ </el-input>
|
|
|
|
+ <div class="form-submit">
|
|
|
|
+ <div class="form-operation">
|
|
|
|
+ <el-dropdown @command="commandFunction">
|
|
|
|
+ <el-button size="default" :icon="Paperclip" circle></el-button>
|
|
|
|
+ <template #dropdown>
|
|
|
|
+ <el-dropdown-menu>
|
|
|
|
+ <el-dropdown-item command="url">参考网站</el-dropdown-item>
|
|
|
|
+ <el-dropdown-item command="image">上传图片</el-dropdown-item>
|
|
|
|
+ </el-dropdown-menu>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dropdown>
|
|
|
|
+ <el-button style="margin-left: 10px;" size="default" :icon="Plus" circle></el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <el-button type="primary" size="large" :icon="Top" circle :loading="loading"></el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="operation-file" v-if="websiteURL || imageList.length > 0">
|
|
|
|
+ <div class="operation-url" v-if="websiteURL">
|
|
|
|
+ <el-tag type="info" closable effect="plain" round @close="websiteURL = ''">
|
|
|
|
+ {{websiteURL}}
|
|
|
|
+ </el-tag>
|
|
|
|
+ </div>
|
|
|
|
+ <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" />
|
|
|
|
+ <el-icon class="image-icon" @click="removeImage(index)">
|
|
|
|
+ <CircleCloseFilled />
|
|
|
|
+ </el-icon>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <el-dialog v-model="loginVisible" title="登录" width="440px">
|
|
|
|
+ <login v-if="loginVisible" @callback="callback"></login>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<style lang="scss">
|
|
|
|
+ .home-container {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ background-image: linear-gradient(135deg, #8ab1ff, #8834ef, #ff8a66);
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+
|
|
|
|
+ .home-nav {
|
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
|
+ height: 70px;
|
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ padding: 0 24px;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .home-nav-left {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .title {
|
|
|
|
+ font-weight: 600;
|
|
|
|
+ color: #000;
|
|
|
|
+ font-size: 20px;
|
|
|
|
+ margin-left: 15px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .img {
|
|
|
|
+ width: 32px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .home-nav-right {
|
|
|
|
+ .item {
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .no-token {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .name {
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-avatar {
|
|
|
|
+ background: var(--el-color-primary);
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ background: #fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .home-form {
|
|
|
|
+ padding: 24px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .form-title {
|
|
|
|
+
|
|
|
|
+ .big-title {
|
|
|
|
+ text-align: center;
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-size: 72px;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .primary {
|
|
|
|
+ color: rgba(255, 255, 255, 0.4);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .img {
|
|
|
|
+ width: 44px;
|
|
|
|
+ height: 44px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .small-title {
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-size: 24px;
|
|
|
|
+ opacity: 0.8;
|
|
|
|
+ margin-top: 20px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .form-box {
|
|
|
|
+ border: 1px solid #e2e8f0;
|
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
|
+ border-radius: 30px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ max-width: 800px;
|
|
|
|
+ margin-top: 60px;
|
|
|
|
+ padding: 16px 16px 6px 16px;
|
|
|
|
+
|
|
|
|
+ .el-textarea__inner {
|
|
|
|
+ border: none;
|
|
|
|
+ background: transparent;
|
|
|
|
+ box-shadow: none;
|
|
|
|
+
|
|
|
|
+ &:hover {
|
|
|
|
+ box-shadow: none;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .form-submit {
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+
|
|
|
|
+ .form-operation {
|
|
|
|
+ flex: 1;
|
|
|
|
+ width: 0;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .iconfont-item {
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ border: 1px solid var(--el-border-color);
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 30px;
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #606266;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .el-select__wrapper {
|
|
|
|
+ border-radius: 24px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .operation-file {
|
|
|
|
+ padding: 10px 0;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .operation-image {
|
|
|
|
+ display: flex;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .image-item {
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .image-icon {
|
|
|
|
+ position: absolute;
|
|
|
|
+ right: -6px;
|
|
|
|
+ top: -6px;
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ color: var(--el-color-error);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|