完善弹窗

.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

@@ -14,12 +14,10 @@
       <!-- 导航菜单 -->
       <nav class="nav-menu">
         <ul>
-          <li
+          <li @click="selectMenu(item)" v-for="item in menu" :class="item.active ? 'active' : ''">
-            @click="selectMenu(item)"
+            <el-icon :size="20">
-            v-for="item in menu"
+              <component :is="item.icon" />
-            :class="item.active ? 'active' : ''"
+            </el-icon>
-          >
-            <el-icon :size="20"><component :is="item.icon" /></el-icon>
             <span>{{ item.name }}</span>
           </li>
         </ul>
@@ -60,7 +58,7 @@
       <!-- 项目操作栏 -->
       <section class="project-actions">
         <div class="action-buttons">
-          <button>新建</button>
+          <button @click="openNewProject">新建</button>
           <button>新建文件夹</button>
           <button>导入项目</button>
         </div>
@@ -95,12 +93,17 @@
         </div>
       </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 activeValue = ref(1);
+const dialogVisible = ref(false)
+
 const menu = ref([
   {
     name: "我的项目",
@@ -143,6 +146,13 @@ const selectMenu = (data) => {
     }
   });
 };
+
+// 打开新建项目
+const openNewProject = () => {
+  console.log("触发事件1", projectModal)
+  dialogVisible.value = true
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -171,6 +181,7 @@ const selectMenu = (data) => {
   margin-bottom: 20px;
   display: flex;
 }
+
 .avatar {
   width: 60px;
   height: 60px;
@@ -178,10 +189,12 @@ const selectMenu = (data) => {
   border-radius: 50%;
   margin: 0 auto 8px;
 }
+
 .user-id {
   font-size: 14px;
   font-weight: 500;
 }
+
 .user-label {
   font-size: 12px;
   color: #999;
@@ -193,6 +206,7 @@ const selectMenu = (data) => {
   padding: 0;
   height: 400px;
 }
+
 .nav-menu li {
   border-radius: 4px;
   cursor: pointer;
@@ -202,18 +216,22 @@ const selectMenu = (data) => {
   box-sizing: border-box;
   display: flex;
   color: #ffffff99;
+
   .el-icon {
     margin-right: 6px;
     line-height: 20px;
   }
 }
+
 .nav-menu li:hover {
   background: rgba(5, 85, 158, 0.4);
 }
+
 .nav-menu li.active {
   background: rgb(5, 85, 158);
   font-weight: 500;
 }
+
 .divider {
   height: 1px;
   background: #333;
@@ -229,6 +247,7 @@ const selectMenu = (data) => {
   border-radius: 8px;
   text-align: center;
 }
+
 .ad-img {
   width: 80px;
   height: 80px;
@@ -236,10 +255,12 @@ const selectMenu = (data) => {
   border-radius: 4px;
   margin: 0 auto 12px;
 }
+
 .ad-title {
   font-size: 14px;
   margin-bottom: 12px;
 }
+
 .ad-btn {
   background: #0078d4;
   border: none;
@@ -249,6 +270,7 @@ const selectMenu = (data) => {
   color: #fff;
   transition: background 0.3s;
 }
+
 .ad-btn:hover {
   background: #005a9e;
 }
@@ -260,11 +282,13 @@ const selectMenu = (data) => {
   font-size: 12px;
   color: #999;
 }
+
 .footer-links a {
   color: #999;
   text-decoration: none;
   transition: color 0.3s;
 }
+
 .footer-links a:hover {
   color: #fff;
 }
@@ -286,6 +310,7 @@ const selectMenu = (data) => {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
+
   &::before {
     content: "";
     left: 0;
@@ -296,9 +321,11 @@ const selectMenu = (data) => {
     position: absolute;
     z-index: 9;
   }
+
   h1 {
     margin: 0;
   }
+
   .banner-content {
     position: absolute;
     z-index: 20;
@@ -307,15 +334,18 @@ const selectMenu = (data) => {
     transform: translate3d(-50%, -50%, 0);
   }
 }
+
 .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;
@@ -326,6 +356,7 @@ const selectMenu = (data) => {
     top: 50%;
     transform: translateY(-50%);
   }
+
   &::after {
     content: "";
     width: 200px;
@@ -337,6 +368,7 @@ const selectMenu = (data) => {
     transform: translateY(-50%);
   }
 }
+
 .tag-group span {
   margin: 0 6px;
   color: #999;
@@ -350,6 +382,7 @@ const selectMenu = (data) => {
   align-items: center;
   margin-bottom: 24px;
 }
+
 .action-buttons button {
   background: rgb(26, 27, 29);
   border: 1px solid #444;
@@ -360,21 +393,26 @@ const selectMenu = (data) => {
   margin-right: 8px;
   transition: background 0.3s;
 }
+
 .action-buttons button:hover {
   background: #383838;
 }
+
 .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 input {
   background: rgb(26, 27, 29);
   border: 1px solid #444;
@@ -383,6 +421,7 @@ const selectMenu = (data) => {
   color: #fff;
   outline: none;
 }
+
 .search-box input::placeholder {
   color: #999;
 }
@@ -393,6 +432,7 @@ const selectMenu = (data) => {
   flex-wrap: wrap;
   gap: 24px;
 }
+
 .project-card {
   width: 240px;
   background: rgb(26, 27, 29);
@@ -401,9 +441,11 @@ const selectMenu = (data) => {
   text-align: center;
   transition: transform 0.3s;
 }
+
 .project-card:hover {
   transform: translateY(-5px);
 }
+
 .card-img {
   width: 100%;
   height: 120px;
@@ -411,22 +453,27 @@ const selectMenu = (data) => {
   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: {