Merge branch 'main' of http://172.16.1.12/jiwanjun/ai-speech-build
This commit is contained in:
commit
9c1d270e94
|
|
@ -1,37 +1,15 @@
|
|||
<!-- 新建项目弹窗 -->
|
||||
<style scoped>
|
||||
<style lang="less" scoped>
|
||||
.Main :deep(.el-dialog) {
|
||||
background: #535050 !important;
|
||||
background: rgba(38, 39, 42, 1) !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.Main :deep(.el-input__inner) {
|
||||
color: #FFf;
|
||||
}
|
||||
|
||||
/* 自定义滚动条样式 - 默认隐藏 */
|
||||
.LeftBox::-webkit-scrollbar,
|
||||
.CenterBox::-webkit-scrollbar,
|
||||
.RightBox::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.LeftBox::-webkit-scrollbar-track,
|
||||
.CenterBox::-webkit-scrollbar-track,
|
||||
.RightBox::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.LeftBox::-webkit-scrollbar-thumb,
|
||||
.CenterBox::-webkit-scrollbar-thumb,
|
||||
.RightBox::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* 鼠标悬停时显示滚动条 */
|
||||
.LeftBox:hover::-webkit-scrollbar,
|
||||
.CenterBox:hover::-webkit-scrollbar,
|
||||
.RightBox:hover::-webkit-scrollbar {
|
||||
|
|
@ -56,16 +34,11 @@
|
|||
background: #888;
|
||||
}
|
||||
|
||||
/* 对话框整体滚动条样式 - 默认隐藏 */
|
||||
.Main :deep(.el-dialog__body)::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.Main :deep(.el-dialog__body)::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.Main :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
|
||||
background: transparent;
|
||||
|
|
@ -73,15 +46,6 @@
|
|||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
/* 对话框悬停时显示滚动条 */
|
||||
.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-track {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-thumb {
|
||||
background: #666;
|
||||
}
|
||||
|
|
@ -93,7 +57,7 @@
|
|||
.my-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: #8f8888;
|
||||
background-color: rgba(30, 30, 30, 30);
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -110,14 +74,15 @@
|
|||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
min-height: 500px;
|
||||
}
|
||||
.CenterBox {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.LeftBox,
|
||||
.CenterBox,
|
||||
.RightBox {
|
||||
flex: 1;
|
||||
height: 400px;
|
||||
height: 100%;
|
||||
margin: 0 5px;
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
|
|
@ -132,18 +97,14 @@
|
|||
}
|
||||
|
||||
.LeftItem {
|
||||
height: 100px;
|
||||
height: 150px;
|
||||
width: 300px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
margin-bottom: 10px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 激活项目分类 */
|
||||
.activeProject {
|
||||
border: 1px solid #0e6ad3;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.LeftItem span {
|
||||
|
|
@ -163,21 +124,42 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
padding-top: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.CenterItem {
|
||||
width: calc(33.333% - 7px);
|
||||
height: 90px;
|
||||
height: 150px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #494848;
|
||||
background: rgb(30, 30, 30);
|
||||
color: #fff;
|
||||
}
|
||||
.empty-folders {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
text-align: center;
|
||||
line-height: 120px;
|
||||
background: rgb(46, 47, 51);
|
||||
margin-bottom: 4px;
|
||||
padding-top: 30px;
|
||||
box-sizing: border-box;
|
||||
color: #ffffff85;
|
||||
&.sp {
|
||||
height: 180px;
|
||||
width: 290px;
|
||||
border-radius: 8px;
|
||||
padding-top: 50px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.CenterItem:hover {
|
||||
background: #494848;
|
||||
background: #0078d4;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
|
@ -189,9 +171,9 @@
|
|||
|
||||
.CenterItem img {
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.CenterItem span {
|
||||
|
|
@ -204,14 +186,17 @@
|
|||
}
|
||||
|
||||
.RightBox {
|
||||
padding-top: 10px;
|
||||
width: 290px;
|
||||
padding-top: 65px;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
|
||||
|
||||
.RightBox img {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
height: 180px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.RightBox h2 {
|
||||
|
|
@ -239,7 +224,26 @@
|
|||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.close-btn {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border: 1px solid #ffffff90 !important;
|
||||
}
|
||||
}
|
||||
.is-select {
|
||||
border: 1px solid #0078d4;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0078d420;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -253,8 +257,8 @@
|
|||
</template>
|
||||
<div class="contentBox">
|
||||
<div class="LeftBox">
|
||||
<div :class="['LeftItem', selectedProject === value.id ? 'activeProject' : '']"
|
||||
v-for="value in projectClassList" :style="{ backgroundImage: `url(${value.img})` }" @click="handleSelectProject(value.id)">
|
||||
<div class="LeftItem" @click="selectType(value)" :class="value.type == selectTypeValue ? 'is-select' : ''" v-for="value in projectClassList"
|
||||
:style="{ backgroundImage: `url(${value.img})` }">
|
||||
<span>{{ value.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -263,9 +267,11 @@
|
|||
<el-tabs v-model="activeName" class="demo-tabs">
|
||||
<el-tab-pane label="全部" name="ALL">
|
||||
<div class="CenterBottom">
|
||||
<div :class="['CenterItem', selectedLargeScreen === value.id ? 'ActiveCenterItem' : '']"
|
||||
v-for="value in largeScreenClassList" @click="handleSelectLargeScreen(value.id)">
|
||||
<img :src="value.img" alt="">
|
||||
<div class="CenterItem" @click="selectTemplate(value)" :class="value.type == selectTemplateValue.type ? 'is-select' : ''" v-for="value in largeScreenClassList">
|
||||
<img v-if="value.img" :src="value.img" alt="">
|
||||
<div class="empty-folders" v-else>
|
||||
<el-icon :size="50"><Files /></el-icon>
|
||||
</div>
|
||||
<span>{{ value.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -275,17 +281,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="RightBox">
|
||||
<img src="/src/assets/images/sjdp1.png" alt="">
|
||||
<h2>基础大屏示列</h2>
|
||||
<p>包含所有2D基础元素的大屏示列</p>
|
||||
<div class="FileInfo">文件信息：大小3MB</div>
|
||||
<img v-if="selectTemplateValue.img" :src="selectTemplateValue.img" alt="">
|
||||
<div class="empty-folders sp" v-else>
|
||||
<el-icon :size="50"><Files /></el-icon>
|
||||
</div>
|
||||
<h2>{{ selectTemplateValue.name }}</h2>
|
||||
<p>{{ selectTemplateValue.description }}</p>
|
||||
<div class="FileInfo">项目信息：大小{{ selectTemplateValue.size }}MB</div>
|
||||
<div class="NameBox">
|
||||
<h4>项目名称</h4>
|
||||
<el-input placeholder="请输入名称" v-model="projectName"/>
|
||||
<el-input v-model="projectName" id="ai-speech-project-name" placeholder="请输入名称" />
|
||||
</div>
|
||||
<div class="FootBtn">
|
||||
<el-button @click="handleClose">取消</el-button>
|
||||
<el-button type="primary">创建项目</el-button>
|
||||
<el-button class="close-btn" @click="handleClose">取消</el-button>
|
||||
<el-button id="ai-speech-buildproject" type="primary" @click="submitFun">创建项目</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -296,38 +305,48 @@
|
|||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
const open = ref(false)
|
||||
const selectTypeValue = ref(1);
|
||||
const projectName = ref("");
|
||||
const selectTemplateValue = ref({
|
||||
name: '空白项目',
|
||||
img: '',
|
||||
url: '/dataScreen',
|
||||
type: 1,
|
||||
description: '空白模板',
|
||||
size: 0
|
||||
});
|
||||
|
||||
// 项目分类
|
||||
const projectClassList = [
|
||||
{
|
||||
id: 1,
|
||||
name: '大屏看板',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '地图可视化',
|
||||
img: '/src/assets/images/sjdp2.png',
|
||||
url: '/dataScreen'
|
||||
url: '/dataScreen',
|
||||
type: 1
|
||||
},
|
||||
// {
|
||||
// name: '地图可视化',
|
||||
// img: '/src/assets/images/sjdp2.png',
|
||||
// url: '/dataScreen'
|
||||
// },
|
||||
{
|
||||
id: 3,
|
||||
name: '3D数字孪生',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '3D地理信息',
|
||||
img: '/src/assets/images/sjdp2.png',
|
||||
url: '/dataScreen'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'BI看板',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
url: '/dataScreen',
|
||||
type: 2
|
||||
},
|
||||
// {
|
||||
// name: '3D地理信息',
|
||||
// img: '/src/assets/images/sjdp2.png',
|
||||
// url: '/dataScreen'
|
||||
// },
|
||||
// {
|
||||
// name: 'BI看板',
|
||||
// img: '/src/assets/images/sjdp1.png',
|
||||
// url: '/dataScreen'
|
||||
// },
|
||||
]
|
||||
|
||||
// 选中项目
|
||||
|
|
@ -339,20 +358,29 @@ const largeScreenClassList = [
|
|||
{
|
||||
id: 1,
|
||||
name: '空白项目',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
img: '',
|
||||
url: '/dataScreen',
|
||||
type: 1,
|
||||
description: '空白模板',
|
||||
size: 0
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '新手入门示列',
|
||||
img: '/src/assets/images/sjdp2.png',
|
||||
url: '/dataScreen'
|
||||
url: '/dataScreen',
|
||||
type: 2,
|
||||
description: '包含基础元素及新手演示视频',
|
||||
size: 3
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '大屏基础示列',
|
||||
img: '/src/assets/images/sjdp1.png',
|
||||
url: '/dataScreen'
|
||||
url: '/dataScreen',
|
||||
type: 3,
|
||||
description: '包含所有2D基础元素的大屏示列',
|
||||
size: 5
|
||||
},
|
||||
|
||||
]
|
||||
|
|
@ -362,8 +390,6 @@ const activeName = ref('ALL')
|
|||
const selectedLargeScreen = ref(1)
|
||||
|
||||
// 项目名称
|
||||
const projectName = ref('')
|
||||
|
||||
|
||||
// 接收父级参数
|
||||
const props = defineProps({
|
||||
|
|
@ -386,19 +412,15 @@ watch(open, (newVal) => {
|
|||
emit('update:open', newVal)
|
||||
})
|
||||
|
||||
// 切换项目分类
|
||||
const handleSelectProject = (id) => {
|
||||
selectedProject.value = id
|
||||
const selectType = (data) => {
|
||||
selectTypeValue.value = data.type;
|
||||
}
|
||||
|
||||
// 切换大屏分类
|
||||
const handleSelectLargeScreen = (id) => {
|
||||
console.log("选中大屏",id);
|
||||
selectedLargeScreen.value = id
|
||||
const selectTemplate = (data) => {
|
||||
selectTemplateValue.value = data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 处理提交
|
||||
const handleSubmit = () => {
|
||||
console.log('提交项目')
|
||||
|
|
@ -409,4 +431,8 @@ const handleSubmit = () => {
|
|||
const handleClose = () => {
|
||||
open.value = false
|
||||
}
|
||||
|
||||
const submitFun = () => {
|
||||
console.log(projectName.value, "=====> 项目名称");
|
||||
}
|
||||
</script>
|
||||
|
|
@ -66,74 +66,50 @@ const config = {
|
|||
commands: [
|
||||
{
|
||||
command: "add_project",
|
||||
description: "新建项目",
|
||||
description: "新建",
|
||||
action: "click",
|
||||
selector: "#ai-speech-add-project",
|
||||
params: [],
|
||||
},
|
||||
{
|
||||
command: "input_username",
|
||||
description: "在用户名输入框中填写用户名",
|
||||
command: "search_project",
|
||||
description: "搜索项目",
|
||||
action: "input",
|
||||
selector: "#username, #username-input, input[type='text'][name*='user']",
|
||||
selector: "#search_project",
|
||||
params: [
|
||||
{
|
||||
name: "username",
|
||||
name: "projectname",
|
||||
type: "string",
|
||||
description: "要输入的用户名",
|
||||
description: "要输入的项目名称",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
command: "input_password",
|
||||
description: "在密码输入框中填写密码",
|
||||
command: "input_project_name",
|
||||
description: "项目名称",
|
||||
action: "input",
|
||||
selector: "#password, #password-input, input[type='password']",
|
||||
selector: "#ai-speech-project-name",
|
||||
params: [
|
||||
{
|
||||
name: "password",
|
||||
name: "projectname",
|
||||
type: "string",
|
||||
description: "要输入的密码",
|
||||
description: "输入项目名称",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
command: "submit_login",
|
||||
description: "提交登录表单",
|
||||
command: "build_project",
|
||||
description: "创建项目",
|
||||
action: "click",
|
||||
selector: "#submit-login, .login-submit, button[type='submit']",
|
||||
params: [],
|
||||
},
|
||||
{
|
||||
command: "search_product",
|
||||
description: "在搜索框中输入关键词",
|
||||
action: "input",
|
||||
selector: "#search-input, .search-box, input[type='search']",
|
||||
params: [
|
||||
{
|
||||
name: "keyword",
|
||||
type: "string",
|
||||
description: "搜索关键词",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
command: "perform_search",
|
||||
description: "执行搜索操作",
|
||||
action: "click",
|
||||
selector: "#search-button, .search-btn, button[type='submit']",
|
||||
params: [],
|
||||
},
|
||||
{
|
||||
command: "add_to_cart",
|
||||
description: "将当前产品添加到购物车",
|
||||
action: "click",
|
||||
selector: ".add-to-cart, .cart-btn, [data-add-to-cart]",
|
||||
selector: "#ai-speech-buildproject",
|
||||
params: [],
|
||||
},
|
||||
|
||||
],
|
||||
};
|
||||
|
||||
const listenStatus = ref(false);
|
||||
|
||||
const props = defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
|
|
@ -397,6 +373,10 @@ class VoiceControl {
|
|||
}
|
||||
}
|
||||
|
||||
delay(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
async executeInstruction(instruction) {
|
||||
const commandConfig = this.config.commands.find(
|
||||
(c) => c.command === instruction.command
|
||||
|
|
@ -407,6 +387,9 @@ class VoiceControl {
|
|||
}
|
||||
|
||||
const element = document.querySelector(commandConfig.selector);
|
||||
|
||||
console.log(element, "-----element");
|
||||
|
||||
if (!element) {
|
||||
throw new Error(`找不到元素: ${commandConfig.selector}`);
|
||||
}
|
||||
|
|
@ -518,8 +501,14 @@ const toggleListening = () => {
|
|||
}
|
||||
|
||||
if (voiceControl.value.isListening) {
|
||||
listenStatus.value = false;
|
||||
voiceControl.value.stopListening();
|
||||
const voiceBtn = document.getElementById("voice-btn");
|
||||
if (voiceBtn) {
|
||||
voiceBtn.classList.remove("listening");
|
||||
}
|
||||
} else {
|
||||
listenStatus.value = true;
|
||||
voiceControl.value.startListening();
|
||||
}
|
||||
};
|
||||
|
|
@ -547,10 +536,6 @@ body {
|
|||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<!-- 用户信息 -->
|
||||
<div class="user-section">
|
||||
<div class="avatar">
|
||||
<img src="./../assets/default-photo.jpeg" alt="" />
|
||||
<img src="/src/assets/default-photo.jpeg" alt="" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-id">15586961409</div>
|
||||
|
|
@ -32,22 +32,11 @@
|
|||
</nav>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<!-- 导航菜单 -->
|
||||
<!-- <nav class="nav-menu">
|
||||
<ul>
|
||||
<li @click="selectMenu(item)" v-for="item in menu" :class="item.active ? 'active' : ''">
|
||||
<el-icon :size="20">
|
||||
<component :is="item.icon" />
|
||||
</el-icon>
|
||||
<span>{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav> -->
|
||||
|
||||
<!-- 广告卡片 -->
|
||||
<el-card header-class="card-header" body-class="card-body">
|
||||
<div class="card-content">
|
||||
<img src="./../assets/bg-1.png" style="width: 100%" />
|
||||
<img src="/src/assets/bg-1.png" style="width: 100%" />
|
||||
</div>
|
||||
</el-card>
|
||||
</aside>
|
||||
|
|
@ -102,7 +91,7 @@
|
|||
<el-tab-pane label="云托管项目" name="cloud"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="search-box">
|
||||
<el-input v-model="searchValue" style="width: 260px" class="responsive-input" placeholder="搜索项目"
|
||||
<el-input id="search_project" v-model="searchValue" style="width: 260px" class="responsive-input" placeholder="搜索项目"
|
||||
prefix-icon="Search" />
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -127,7 +116,9 @@
|
|||
</el-icon></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-img"></div>
|
||||
<div class="card-img">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -183,13 +174,14 @@ const menu = ref([
|
|||
active: false,
|
||||
},
|
||||
]);
|
||||
|
||||
const searchValue = ref("");
|
||||
const tabName = ref("local");
|
||||
|
||||
const projects = ref([
|
||||
{
|
||||
name: '苏州站基础大屏示例',
|
||||
img: ''
|
||||
img: '/src/assets/images/sjdp1.png'
|
||||
}
|
||||
])
|
||||
|
||||
|
|
@ -445,7 +437,7 @@ const addProject = () => {
|
|||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
position: absolute;
|
||||
left: -220px;
|
||||
left: -150px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -456,7 +448,7 @@ const addProject = () => {
|
|||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
position: absolute;
|
||||
right: -220px;
|
||||
right: -150px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
@ -565,6 +557,11 @@ const addProject = () => {
|
|||
background: #444;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-title {
|
||||
|
|
|
|||
Loading…
Reference in New Issue