嵌入看板模块

src/views/AI/board/index.vue

@@ -1,12 +1,79 @@
 <template>
-  <div>
-    看板
-  </div>
-</template>
-
-<script setup>
-</script>
-
-<style  scoped>
-
-</style>
+    <!-- 工作台相关 -->
+    <div class="go-chart">
+      <n-layout>
+        <layout-header-pro>
+          <template #left>
+            <header-left-btn></header-left-btn>
+          </template>
+          <template #center>
+            <header-title></header-title>
+          </template>
+          <template #ri-left>
+            <header-right-btn></header-right-btn>
+          </template>
+        </layout-header-pro>
+        <n-layout-content content-style="overflow:hidden; display: flex">
+          <div style="overflow:hidden; display: flex">
+            <content-charts></content-charts>
+            <content-layers></content-layers>
+          </div>
+          <content-configurations></content-configurations>
+        </n-layout-content>
+      </n-layout>
+    </div>
+    <!-- 右键 -->
+    <n-dropdown
+      placement="bottom-start"
+      trigger="manual"
+      size="small"
+      :x="mousePosition.x"
+      :y="mousePosition.y"
+      :options="menuOptions"
+      :show="chartEditStore.getRightMenuShow"
+      :on-clickoutside="onClickOutSide"
+      @select="handleMenuSelect"
+    ></n-dropdown>
+    <!-- 加载蒙层 -->
+    <content-load></content-load>
+  </template>
+  
+  <script setup lang="ts">
+  import { loadAsyncComponent } from '@/utils'
+  import { LayoutHeaderPro } from '@/layout/components/LayoutHeaderPro'
+  import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+  import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+  
+  const chartHistoryStoreStore = useChartHistoryStore()
+  const chartEditStore = useChartEditStore()
+  
+  // 记录初始化
+  chartHistoryStoreStore.canvasInit(chartEditStore.getEditCanvas)
+  
+  const HeaderLeftBtn = loadAsyncComponent(() => import('@/views/chart/ContentHeader/headerLeftBtn/index.vue'))
+  const HeaderRightBtn = loadAsyncComponent(() => import('@/views/chart/ContentHeader/headerRightBtn/index.vue'))
+  const HeaderTitle = loadAsyncComponent(() => import('@/views/chart/ContentHeader/headerTitle/index.vue'))
+  const ContentLayers = loadAsyncComponent(() => import('@/views/chart/ContentLayers/index.vue'))
+  const ContentCharts = loadAsyncComponent(() => import('@/views/chart/ContentCharts/index.vue'))
+  const ContentConfigurations = loadAsyncComponent(() => import('@/views/chart/ContentConfigurations/index.vue'))
+  const ContentLoad = loadAsyncComponent(() => import('@/views/chart/ContentLoad/index.vue'))
+  
+  // 右键
+  const {
+    menuOptions,
+    onClickOutSide,
+    mousePosition,
+    handleMenuSelect
+  } = useContextMenu()
+  </script>
+  
+  <style lang="scss" scoped>
+  @include go("chart") {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    @include background-image("background-image");
+  }
+  </style>
+  

src/views/AI/chat/index.vue

@@ -54,6 +54,8 @@ let messages = reactive([
 
 <style lang="scss" scoped>
 .chat-container {
+    box-sizing: border-box;
+    padding: 20px;
   height: 100%;
   gap: 20px;
   display: flex;

src/views/AI/index.vue

@@ -47,6 +47,11 @@ const menuList = [
     padding: 50px 20px;
     background: url('../../assets/images/ai/menu-bg.png');
     background-size: 100% 100%;
+    .menu-list {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
     .menu-item {
       color: inherit;
       text-decoration: none;
@@ -54,11 +59,12 @@ const menuList = [
       height: 38px;
       border-radius: 4px 4px 4px 4px;
       border: 1px solid #474d59;
-      margin-bottom: 20px;
+
       letter-spacing: 2px;
       font-size: 14px;
     }
-    .active-link , .menu-item:active {
+    .active-link,
+    .menu-item:active {
       color: #507afc;
       border-color: #507afc;
       background: rgba(80, 122, 252, 0.2);
@@ -66,7 +72,7 @@ const menuList = [
   }
   .right-container {
     flex: 1;
-    padding: 20px;
+  
     overflow-x: auto;
   }
 }
@@ -76,5 +82,4 @@ const menuList = [
   align-items: center;
   justify-content: center;
 }
-
 </style>