更新

src/components/MDialog/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-dialog
+    v-bind="$attrs"
+    v-on="$listeners"
+  ></v-dialog>
+</template>
+
+<script>
+export default {
+  name: 'MDialog'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/MTable/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-data-table
+    v-bind="$attrs"
+    v-on="$listeners"
+  ></v-data-table>
+</template>
+
+<script>
+export default {
+  name: 'MTable'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/ToolsLayout.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="fullScreen d-flex flex-column">
+    <div>
+      <v-toolbar
+        color="indigo"
+        dark
+      >
+        <v-btn class="mr-3" text @click="$router.push('/')">
+          <v-icon left>mdi-home-circle</v-icon>
+          返回首页
+        </v-btn>
+
+        <v-toolbar-title>{{ $route.meta.title }}</v-toolbar-title>
+
+        <v-spacer></v-spacer>
+        <v-menu offset-y rounded>
+          <template v-slot:activator="{ on, attrs }">
+            <v-btn
+              icon
+              v-bind="attrs"
+              v-on="on">
+              <v-icon>mdi-dots-vertical</v-icon>
+            </v-btn>
+          </template>
+          <v-list min-width="200">
+            <v-list-item link @click="$store.dispatch('user/userLogout')">
+              <v-list-item-icon>
+                <v-icon>mdi-logout</v-icon>
+              </v-list-item-icon>
+              <v-list-item-title>
+                退出登录
+              </v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-toolbar>
+    </div>
+    <div class="layout-content">
+      <keep-alive v-if="$route.meta.keepAlive">
+        <router-view />
+      </keep-alive>
+      <router-view v-else />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ToolsLayout'
+}
+</script>
+
+<style lang="scss" scoped>
+.fullScreen {
+  width: 100%;
+  height: 100%;
+}
+.layout-content {
+  flex: 1;
+  height: 0;
+}
+</style>

src/router/defaultRoute.js

@@ -1,4 +1,5 @@
 import Layout from '@/layout'
+import ToolsLayout from '@/layout/ToolsLayout'
 const base = [
   {
     path: '/',
@@ -16,6 +17,54 @@ const base = [
       }
     ]
   },
+  {
+    path: '/knowledge-base',
+    component: ToolsLayout,
+    children: [
+      {
+        path: '',
+        name: 'knowledgeBase',
+        meta: { title: '产品知识库' },
+        component: () => import('@/views/knowledgeBase/index')
+      }
+    ]
+  },
+  {
+    path: '/data-assets',
+    component: ToolsLayout,
+    children: [
+      {
+        path: '',
+        name: 'dataAssets',
+        meta: { title: '数据资产' },
+        component: () => import('@/views/dataAssets/index')
+      }
+    ]
+  },
+  {
+    path: '/my-chart',
+    component: ToolsLayout,
+    children: [
+      {
+        path: '',
+        name: 'myChart',
+        meta: { title: '我的图表' },
+        component: () => import('@/views/myChart/index')
+      }
+    ]
+  },
+  {
+    path: '/team-chart',
+    component: ToolsLayout,
+    children: [
+      {
+        path: '',
+        name: 'teamChart',
+        meta: { title: '团队共享' },
+        component: () => import('@/views/teamChart/index')
+      }
+    ]
+  },
   {
     path: '/login',
     name: 'login',

src/views/dataAssets/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'dataAssets'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/home/dataChartEditChat.vue

@@ -266,10 +266,13 @@ export default {
   },
   methods: {
     onNew () {
-      this.abortController.abort('')
+      if (this.abortController) {
+        this.abortController.abort('')
+      }
       this.abortController = null
       this.items.splice(1, this.items.length - 1)
       this.conversationId = undefined
+      this.$emit('new')
     },
     handleKeyCode (event) {
       if (event.keyCode === 13) {
@@ -412,7 +415,7 @@ export default {
 }
 .chart-content {
   &-chat {
-    border: 1px solid #ccc;
+    // border: 1px solid #ccc;
     &-box {
       height: 0;
       flex: 1;

src/views/home/homeSide.vue

@@ -11,27 +11,48 @@
           <!-- <v-list-item-subtitle>Logged In</v-list-item-subtitle> -->
         </v-list-item-content>
       </v-list-item>
+      <slot name="header"></slot>
     </template>
     <v-divider light></v-divider>
-    <v-list dense light>
-      <v-list-item-group
-        v-model="selected"
-        color="primary"
-        @change="onSelectConversation"
-      >
-        <v-list-item
-          v-for="(conversation) in conversationList"
-          :key="conversation.conversation_id"
+    <!-- <v-card elevation="0" style="background-color: unset;" :loading="loading"> -->
+      <div class="text-center" v-if="loading">
+        <v-progress-circular
+          indeterminate
+          color="primary"
+        ></v-progress-circular>
+      </div>
+      <v-list dense light>
+        <v-list-item-group
+          v-model="selected"
+          color="primary"
+          @change="onSelectConversation"
         >
-          <v-list-item-content>
-            <v-list-item-title>{{ conversation.conversation_title }}</v-list-item-title>
-          </v-list-item-content>
-        </v-list-item>
-      </v-list-item-group>
-    </v-list>
+          <v-list-item
+            v-for="(conversation) in conversationList"
+            :key="conversation.conversation_id"
+          >
+            <v-list-item-content>
+              <v-list-item-title>{{ conversation.conversation_title }}</v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    <!-- </v-card> -->
 
     <template v-slot:append>
       <div class="pa-2">
+        <!-- <v-btn class="mb-3" color="indigo" block outlined @click="$router.push('/knowledge-base')">
+          产品知识库
+        </v-btn>
+        <v-btn class="mb-3" color="indigo" block outlined @click="$router.push('/data-assets')">
+          数据资产
+        </v-btn>
+        <v-btn class="mb-3" color="indigo" block outlined @click="$router.push('/my-chart')">
+          我的图表
+        </v-btn>
+        <v-btn class="mb-3" color="indigo" block outlined @click="$router.push('/team-chart')">
+          团队共享
+        </v-btn> -->
         <v-btn block @click="handleLogout">
           Logout
         </v-btn>
@@ -59,15 +80,19 @@ export default {
   },
   methods: {
     async getConversationList () {
+      this.loading = true
       try {
         const { data } = await getConversations({ limit: 5 })
         this.conversationList = data.conversations
+        this.selected = null
       } catch (error) {
         this.$snackbar.error(error)
+      } finally {
+        this.loading = false
       }
     },
     async onSelectConversation (index) {
-      if (!index) {
+      if (!index && typeof index !== 'number') {
         setTimeout(() => {
           this.selected = this.lastSelected
         })

src/views/home/index.vue

@@ -1,8 +1,23 @@
 <template>
   <div class="heightFull widthFull d-flex">
-    <HomeSide @update="onUpdate"></HomeSide>
+    <HomeSide ref="homeSideRefs" @update="onUpdate">
+      <template #header>
+        <v-list-item light>
+          <v-list-item-content>
+            <v-list-item-title>
+              <v-btn color="primary" outlined @click="onNew">
+                <v-icon left>
+                  mdi-chat-plus-outline
+                </v-icon>
+                新对话
+              </v-btn>
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </template>
+    </HomeSide>
     <div class="d-flex chart heightFull widthFull pa-3">
-      <div class="chart-list heightFull overflow-y-auto mr-3">
+      <div v-if="showChart" class="chart-list heightFull overflow-y-auto mr-3">
         <div v-for="item in items" :key="item.key" class="chart-type mb-3" @click="onChange(item.key)">
           <div>
             <span class="mdi" :class="item.icon"></span>
@@ -17,13 +32,22 @@
         <FullscreenToggle v-if="showChart" class="chart-content-show heightFull white mr-3 overflow-hidden pa-3 position-relative" ref="box">
           <template v-slot="{ toggle, isFullscreen }">
             <div class="position-absolute d-flex flex-column" style="right: 10px; top: 80px; z-index: 999">
-              <v-btn
-                icon
-                color="primary"
-                @click="toggle"
-              >
-                <v-icon>{{ isFullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
-              </v-btn>
+              <v-tooltip left>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn icon color="primary" v-bind="attrs" v-on="on" @click="toggle">
+                    <v-icon>{{ isFullscreen ? 'mdi-arrow-collapse' : 'mdi-arrow-expand'}}</v-icon>
+                  </v-btn>
+                </template>
+                <span>全屏</span>
+              </v-tooltip>
+              <v-tooltip left>
+                <template v-slot:activator="{ on, attrs }">
+                  <v-btn icon color="primary" v-bind="attrs" v-on="on" @click="onSave">
+                    <v-icon>mdi-content-save-check-outline</v-icon>
+                  </v-btn>
+                </template>
+                <span>保存</span>
+              </v-tooltip>
               <v-btn
                 icon
                 color="primary"
@@ -36,7 +60,12 @@
             <InitChart ref="chart" class="heightFull widthFull"></InitChart>
           </template>
         </FullscreenToggle>
-        <DataChartEditChat ref="dataChartEditChatRefs" :class="showChart ? 'widthHalf' : 'widthFull'" @render="onRender"></DataChartEditChat>
+        <DataChartEditChat
+          ref="dataChartEditChatRefs"
+          :class="showChart ? 'widthHalf' : 'widthFull'"
+          @render="onRender"
+          @new="onUpdateConversation"
+        ></DataChartEditChat>
       </div>
     </div>
   </div>
@@ -83,6 +112,9 @@ export default {
     }
   },
   methods: {
+    onNew () {
+      this.$refs.dataChartEditChatRefs.onNew()
+    },
     onClose () {
       this.showChart = false
       this.chart = null
@@ -165,7 +197,13 @@ export default {
     },
     onUpdate (data) {
       this.$refs.dataChartEditChatRefs.update(data)
-    }
+    },
+    onUpdateConversation () {
+      this.$refs.homeSideRefs.getConversationList()
+    },
+    // 保存图表
+    onSave () {}
+
   }
 }
 </script>

src/views/home/utils/options.js

@@ -1,14 +1,14 @@
 // const COLOR = ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00']
-
+const DEFAULT_LEGEND = {
+  show: true,
+  type: 'scroll'
+}
 export const bar = {
   sort: 0,
   title: '柱状图',
   icon: 'mdi-chart-bar',
   option: {
-    legend: {
-      show: true,
-      left: 'center'
-    },
+    legend: DEFAULT_LEGEND,
     xAxis: {
       type: 'category',
       data: []
@@ -30,9 +30,7 @@ export const line = {
   title: '折线图',
   icon: 'mdi-chart-line',
   option: {
-    legend: {
-      show: true
-    },
+    legend: DEFAULT_LEGEND,
     xAxis: {
       type: 'category',
       data: []
@@ -63,9 +61,7 @@ export const pie = {
     tooltip: {
       trigger: 'item'
     },
-    legend: {
-      left: 'center'
-    },
+    legend: DEFAULT_LEGEND,
     series: [
       {
         name: 'Access From',
@@ -90,9 +86,7 @@ export const scatter = {
   title: '散点图',
   icon: 'mdi-chart-bubble',
   option: {
-    legend: {
-      show: true
-    },
+    legend: DEFAULT_LEGEND,
     xAxis: {
       type: 'category',
       data: []
@@ -115,9 +109,7 @@ export const scatter = {
 //   title: 'K线图',
 //   icon: 'mdi-chart-waterfall',
 //   option: {
-//     legend: {
-//       show: true
-//     },
+//     legend: DEFAULT_LEGEND,
 //     xAxis: {
 //       type: 'category',
 //       data: []
@@ -140,9 +132,7 @@ export const radar = {
   title: '雷达图',
   icon: 'mdi-radar',
   option: {
-    legend: {
-      show: true
-    },
+    legend: DEFAULT_LEGEND,
     radar: {},
     series: [
       {

src/views/knowledgeBase/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="pa-3">
+    <m-table></m-table>
+  </div>
+</template>
+
+<script>
+import MTable from '@/components/MTable'
+export default {
+  name: 'knowledgeBase',
+  components: {
+    MTable
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/myChart/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'myChart'
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/teamChart/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="overflow-y-auto" style="height: 100%;">
+    <v-card class="white sticky" elevation="5" rounded="0">
+      <v-chip
+        class="ma-2"
+        color="indigo"
+        dark
+      >
+        Default
+      </v-chip>
+    </v-card>
+    <div class="pa-3">
+      <v-card
+        min-height="500"
+        v-for="item in items"
+        :key="item.id"
+        class="pa-3 mb-3"
+        elevation="5"
+      >
+
+      </v-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'teamChart',
+  data () {
+    return {
+      items: [{ id: 1 }, { id: 2 }]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.sticky {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+</style>