Merge branch 'main' of http://172.16.1.12/jiwanjun/ai-speech-build

.gitignore

@@ -0,0 +1,43 @@
+# 依赖目录
+node_modules
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+pnpm-debug.log
+
+# 构建输出目录
+dist
+dist-ssr
+*.local
+
+# 编辑器目录和文件
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# 本地环境文件
+.env
+.env.local
+.env.*.local
+
+# 日志文件
+logs
+*.log
+
+# 测试覆盖率目录
+coverage
+
+# 缓存目录
+.npm
+.eslintcache
+.stylelintcache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/

src/view/components/projectModal.vue

@@ -0,0 +1,317 @@
+<!-- 新建项目弹窗 -->
+<style scoped>
+.Main :deep(.el-dialog) {
+    background: #535050 !important;
+    padding: 0px !important;
+}
+
+/* 自定义滚动条样式 - 默认隐藏 */
+.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 {
+    width: 8px;
+}
+
+.LeftBox:hover::-webkit-scrollbar-track,
+.CenterBox:hover::-webkit-scrollbar-track,
+.RightBox:hover::-webkit-scrollbar-track {
+    background: #3a3a3a;
+}
+
+.LeftBox:hover::-webkit-scrollbar-thumb,
+.CenterBox:hover::-webkit-scrollbar-thumb,
+.RightBox:hover::-webkit-scrollbar-thumb {
+    background: #666;
+}
+
+.LeftBox:hover::-webkit-scrollbar-thumb:hover,
+.CenterBox:hover::-webkit-scrollbar-thumb:hover,
+.RightBox:hover::-webkit-scrollbar-thumb:hover {
+    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;
+    border-radius: 4px;
+    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;
+}
+
+.Main:hover :deep(.el-dialog__body)::-webkit-scrollbar-thumb:hover {
+    background: #888;
+}
+
+.my-header {
+    display: flex;
+    justify-content: space-between;
+    background-color: #8f8888;
+    align-items: center;
+    padding: 10px;
+}
+
+.my-header h4 {
+    font-size: 18px;
+    font-weight: 500;
+    color: #FFf;
+    margin: 0;
+    padding: 0;
+}
+
+.contentBox {
+    padding: 10px;
+    background: #ff8899;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.LeftBox,
+.CenterBox,
+.RightBox {
+    flex: 1;
+    height: 400px;
+    background: #ddd;
+    margin: 0 5px;
+    border-radius: 4px;
+    overflow: auto;
+}
+
+.LeftBox:first-child {
+    margin-left: 0;
+}
+
+.RightBox:last-child {
+    margin-right: 0;
+}
+
+.LeftItem {
+    height: 100px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.LeftItem span {
+    display: block;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+    margin-top: 10px;
+    margin-left: 10px;
+}
+
+.CenterBox {
+    padding: 0px 10px;
+}
+.CenterBottom{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.CenterItem {
+    width: calc(33.333% - 7px);
+    height: 120px;
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.CenterItem:hover {
+    background: #e0e0e0;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.CenterItem img{
+    width: 100%;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 8px;
+}
+
+.CenterItem span {
+    font-size: 14px;
+    color: #333;
+    text-align: center;
+    font-weight: 500;
+}
+</style>
+
+<template>
+    <div class="Main">
+        <el-dialog v-model="open" width="1200px" :show-close="false">
+            <template #header="{ close, titleId, titleClass }">
+                <div class="my-header">
+                    <h4 :id="titleId" :class="titleClass">新建项目</h4>
+                </div>
+            </template>
+            <div class="contentBox">
+                <div class="LeftBox">
+                    <div class="LeftItem" v-for="value in projectClassList"
+                        :style="{ backgroundImage: `url(${value.img})` }">
+                        <span>{{ value.name }}</span>
+                    </div>
+                </div>
+                <div class=" CenterBox">
+                    <div class="CenterTop">
+                        <el-tabs v-model="activeName" class="demo-tabs">
+                            <el-tab-pane label="全部" name="ALL">
+                                <div class="CenterBottom">
+                                    <div class="CenterItem" v-for="value in largeScreenClassList">
+                                        <img :src="value.img" alt="">
+                                        <span>{{ value.name }}</span>
+                                    </div>
+                                </div>
+
+                            </el-tab-pane>
+                        </el-tabs>
+                    </div>
+                </div>
+                <div class="RightBox"></div>
+            </div>
+            <template #footer>
+                <el-button @click="open = false">取消</el-button>
+                <el-button type="primary" @click="handleSubmit">创建项目</el-button>
+            </template>
+        </el-dialog>
+    </div>
+
+</template>
+<script setup>
+import { ref, watch } from 'vue'
+const open = ref(false)
+// 项目分类
+const projectClassList = [
+    {
+        name: '大屏看板',
+        img: '/src/assets/images/sjdp1.png',
+        url: '/dataScreen'
+    },
+    {
+        name: '地图可视化',
+        img: '/src/assets/images/sjdp2.png',
+        url: '/dataScreen'
+    },
+    {
+        name: '3D数字孪生',
+        img: '/src/assets/images/sjdp1.png',
+        url: '/dataScreen'
+    },
+    {
+        name: '3D地理信息',
+        img: '/src/assets/images/sjdp2.png',
+        url: '/dataScreen'
+    },
+    {
+        name: 'BI看板',
+        img: '/src/assets/images/sjdp1.png',
+        url: '/dataScreen'
+    },
+]
+// 大屏分类
+const largeScreenClassList = [
+    {
+        name: '空白项目',
+        img: '/src/assets/images/sjdp1.png',
+        url: '/dataScreen'
+    },
+    {
+        name: '新手入门示列',
+        img: '/src/assets/images/sjdp2.png',
+        url: '/dataScreen'
+    },
+    {
+        name: '大屏基础示列',
+        img: '/src/assets/images/sjdp1.png',
+        url: '/dataScreen'
+    },
+
+]
+
+// tab切换
+const activeName = ref('ALL')
+
+// 接收父级参数
+const props = defineProps({
+    open: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const emit = defineEmits(['update:open'])
+
+// 监听open变化
+watch(() => props.open, (newVal) => {
+    console.log("触发事件3", newVal)
+    open.value = newVal
+})
+
+// 监听内部open变化
+watch(open, (newVal) => {
+    emit('update:open', newVal)
+})
+
+// 处理提交
+const handleSubmit = () => {
+    console.log('提交项目')
+    open.value = false
+}
+</script>

src/view/index.vue

@@ -20,11 +20,10 @@
         <nav class="nav-menu">
           <ul>
             <template v-for="(item, index) in menu">
-              <li
+              <li @click="selectMenu(item)" :class="item.active ? 'active' : ''">
-                @click="selectMenu(item)"
+                <el-icon :size="20">
-                :class="item.active ? 'active' : ''"
+                  <component :is="item.icon" />
-              >
+                </el-icon>
-                <el-icon :size="20"><component :is="item.icon" /></el-icon>
                 <span>{{ item.name }}</span>
               </li>
               <div v-if="index == 2" class="split-line"></div>
@@ -32,6 +31,18 @@
           </ul>
         </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">
@@ -70,33 +81,29 @@
       <section class="project-actions">
         <div class="action-buttons">
           <button id="ai-speech-add-project" @click="addProject">
-            <el-icon :size="16"><DocumentAdd /></el-icon><span>新建</span>
+            <el-icon :size="16">
+              <DocumentAdd />
+            </el-icon><span>新建</span>
           </button>
           <button>
-            <el-icon :size="16"><FolderAdd /></el-icon><span>新建文件夹</span>
+            <el-icon :size="16">
+              <FolderAdd />
+            </el-icon><span>新建文件夹</span>
           </button>
           <button>
-            <el-icon :size="16"><UploadFilled /></el-icon><span>导入项目</span>
+            <el-icon :size="16">
+              <UploadFilled />
+            </el-icon><span>导入项目</span>
           </button>
         </div>
 
-        <el-tabs
+        <el-tabs v-model="tabName" class="demo-tabs" @tab-click="handleClick" style="margin: 20px 0 8px 0">
-          v-model="tabName"
-          class="demo-tabs"
-          @tab-click="handleClick"
-          style="margin: 20px 0 8px 0"
-        >
           <el-tab-pane label="本地项目" name="local"></el-tab-pane>
           <el-tab-pane label="云托管项目" name="cloud"></el-tab-pane>
         </el-tabs>
         <div class="search-box">
-          <el-input
+          <el-input v-model="searchValue" style="width: 260px" class="responsive-input" placeholder="搜索项目"
-            v-model="searchValue"
+            prefix-icon="Search" />
-            style="width: 260px"
-            class="responsive-input"
-            placeholder="搜索项目"
-            prefix-icon="Search"
-          />
         </div>
       </section>
 
@@ -106,10 +113,18 @@
           <div class="project-item-info">
             <div class="card-title">{{ item.name }}</div>
             <div class="card-actions">
-              <span><el-icon :size="18"><Promotion /></el-icon></span>
+              <span><el-icon :size="18">
-              <span><el-icon :size="18"><Delete /></el-icon></span>
+                  <Promotion />
-              <span><el-icon :size="18"><Share /></el-icon></span>
+                </el-icon></span>
-              <span><el-icon><MoreFilled /></el-icon></span>
+              <span><el-icon :size="18">
+                  <Delete />
+                </el-icon></span>
+              <span><el-icon :size="18">
+                  <Share />
+                </el-icon></span>
+              <span><el-icon>
+                  <MoreFilled />
+                </el-icon></span>
             </div>
           </div>
           <div class="card-img"></div>
@@ -118,11 +133,17 @@
 
       </section>
     </main>
+    <!-- 新建项目弹窗 -->
+    <projectModal v-model:open="dialogVisible" />
   </div>
 </template>
 
-<script setup >
+<script setup>
+// 新建项目弹窗
+import projectModal from '@/view/components/projectModal.vue'
 import { ref } from "vue";
+const dialogVisible = ref(false)
+
 const menu = ref([
   {
     name: "我的项目",
@@ -180,6 +201,7 @@ const handleClick = (tab, event) => {
 };
 
 const addProject = () => {
+  dialogVisible.value = true;
   console.log("正在点击新建按钮 ======> addProject ");
 }
 
@@ -212,28 +234,33 @@ const addProject = () => {
   display: flex;
   justify-content: space-around;
 }
+
 .avatar {
   width: 60px;
   height: 60px;
   background: #444;
   border-radius: 50%;
   overflow: hidden;
+
   img {
     width: 100%;
     height: 100%;
   }
 }
+
 .user-id {
   font-size: 14px;
   font-weight: 500;
   line-height: 20px;
 }
+
 .user-info {
   height: 60px;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
+
 .user-label {
   font-size: 12px;
   color: #fff;
@@ -248,6 +275,7 @@ const addProject = () => {
   padding: 0;
   height: 400px;
 }
+
 .nav-menu li {
   border-radius: 4px;
   cursor: pointer;
@@ -257,18 +285,22 @@ const addProject = () => {
   box-sizing: border-box;
   display: flex;
   color: #f8f8ff99;
+
   .el-icon {
     margin-right: 6px;
     line-height: 20px;
   }
 }
+
 .nav-menu li:hover {
   background: rgba(5, 85, 158, 0.4);
 }
+
 .nav-menu li.active {
   background: #0078d4;
   font-weight: 500;
 }
+
 .divider {
   height: 1px;
   background: #333;
@@ -284,21 +316,25 @@ const addProject = () => {
   border-radius: 8px;
   text-align: center;
 }
+
 .ad-img {
   width: 80%;
   height: 80px;
   background: #444;
   border-radius: 4px;
   margin: 0 auto 12px;
+
   img {
     width: 100%;
     height: 100%;
   }
 }
+
 .ad-title {
   font-size: 14px;
   margin-bottom: 12px;
 }
+
 .ad-btn {
   background: #0078d4;
   border: none;
@@ -308,6 +344,7 @@ const addProject = () => {
   color: #fff;
   transition: background 0.3s;
 }
+
 .ad-btn:hover {
   background: #005a9e;
 }
@@ -319,11 +356,13 @@ const addProject = () => {
   font-size: 12px;
   color: #999;
 }
+
 .footer-links a {
   color: #999;
   text-decoration: none;
   transition: color 0.3s;
 }
+
 .footer-links a:hover {
   color: #fff;
 }
@@ -344,6 +383,7 @@ const addProject = () => {
   h1 {
     margin: 0;
   }
+
   .banner-content {
     position: relative;
     height: 100%;
@@ -352,6 +392,7 @@ const addProject = () => {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+
     &::before {
       content: "";
       left: 0;
@@ -362,6 +403,7 @@ const addProject = () => {
       position: absolute;
       z-index: 9;
     }
+
     &-info {
       position: absolute;
       left: 50%;
@@ -371,15 +413,18 @@ const addProject = () => {
     }
   }
 }
+
 .header-banner h1 {
   font-size: 36px;
   margin-bottom: 8px;
 }
+
 .header-banner p {
   font-size: 16px;
   color: #999;
   margin-bottom: 16px;
   position: relative;
+
   &::before {
     content: "";
     width: 200px;
@@ -390,6 +435,7 @@ const addProject = () => {
     top: 50%;
     transform: translateY(-50%);
   }
+
   &::after {
     content: "";
     width: 200px;
@@ -401,6 +447,7 @@ const addProject = () => {
     transform: translateY(-50%);
   }
 }
+
 .tag-group span {
   margin: 0 6px;
   color: #999;
@@ -414,9 +461,11 @@ const addProject = () => {
   padding: 16px;
   position: relative;
 }
+
 .action-buttons {
   display: flex;
 }
+
 .action-buttons button {
   background: rgb(26, 27, 29);
   border: 1px solid #444;
@@ -427,31 +476,38 @@ const addProject = () => {
   margin-right: 8px;
   transition: background 0.3s;
   display: flex;
+
   .el-icon {
     margin-right: 4px;
   }
 }
+
 .action-buttons button:hover {
   background: #0078d4;
   border: 1px solid #0078d4;
 }
+
 .tab-group span {
   margin: 0 12px;
   cursor: pointer;
   transition: color 0.3s;
 }
+
 .tab-group span:hover {
   color: #0078d4;
 }
+
 .tab-group span.active {
   color: #0078d4;
   font-weight: 500;
 }
+
 .search-box {
   position: absolute;
   right: 20px;
   top: 60px;
 }
+
 .search-box input {
   background: rgb(26, 27, 29);
   border: 1px solid #444;
@@ -460,6 +516,7 @@ const addProject = () => {
   color: #fff;
   outline: none;
 }
+
 .search-box input::placeholder {
   color: #999;
 }
@@ -472,6 +529,7 @@ const addProject = () => {
   padding: 16px;
   padding-top: 0;
 }
+
 .project-card {
   width: 300px;
   height: 220px;
@@ -482,9 +540,11 @@ const addProject = () => {
   transition: transform 0.3s;
   cursor: pointer;
 }
+
 .project-card:hover {
   transform: translateY(-5px);
 }
+
 .card-img {
   width: 100%;
   height: 170px;
@@ -492,22 +552,27 @@ const addProject = () => {
   border-radius: 4px;
   margin-bottom: 12px;
 }
+
 .card-title {
   font-size: 16px;
   font-weight: 500;
   margin-bottom: 8px;
 }
+
 .card-actions {
   color: #999;
 }
+
 .card-actions span {
   margin: 0 6px;
   cursor: pointer;
   transition: color 0.3s;
 }
+
 .card-actions span:hover {
   color: #0078d4;
 }
+
 .line {
   width: 160px;
   background: rgb(15, 15, 15);

vite.config.js

@@ -18,7 +18,7 @@ export default defineConfig({
   },
   server: {
     host: '0.0.0.0', // 关键：允许通过IP访问（监听所有网络接口）
-    port: 8080, // 可选：指定端口（默认5173）
+    port: 86, 
     open: true, // 可选：启动时自动打开浏览器，
     proxy: {