refactor: Tab and dashboard update

Author: ziyujiahao

frontend/src/i18n/en.json

@@ -6,6 +6,7 @@
     "AI Model Configuration": "AI Model Configuration"
   },
   "common": {
+    "input_content": "Please Input Content",
     "back": "Back",
     "confirm": "Confirm",
     "cancel": "Cancel",
@@ -18,6 +19,17 @@
     "logout": "Logout"
   },
   "dashboard": {
+    "select_dashboard": "Please Select Dashboard",
+    "view": "View",
+    "text": "Text",
+    "preview": "Preview",
+    "creator": "Creator",
+    "dashboard_id": "Dashboard ID",
+    "create_time": "Create Time",
+    "updator": "Updater",
+    "update_time": "Update Time",
+    "edit": "Edit",
+    "edit_title": "Edit Title",
     "length_1_64_characters": "Name field length must be 1-64 characters",
     "rename": "Rename",
     "delete": "Delete",

frontend/src/i18n/zh-CN.json

@@ -6,18 +6,31 @@
     "AI Model Configuration": "模型配置"
   },
   "common": {
+    "input_content": "请输入内容",
     "back": "返回",
     "confirm": "确认",
     "cancel": "取消",
     "search": "查询",
     "system_manage": "系统管理",
-    "update_success": "更新",
+    "update_success": "更新成功",
     "save_success": "保存成功",
     "next": "下一步",
     "save": "保存",
     "logout": "退出登录"
   },
   "dashboard": {
+    "select_dashboard": "请选择仪表板",
+    "name": "名称",
+    "view": "图表",
+    "text": "文本",
+    "preview": "预览",
+    "creator": "创建人",
+    "dashboard_id": "仪表板ID",
+    "create_time": "创建时间",
+    "updator": "更新人",
+    "update_time": "更新时间",
+    "edit": "编辑",
+    "edit_title": "编辑标题",
     "length_1_64_characters": "名称字段长度1-64个字符",
     "rename": "重命名",
     "delete": "删除",

frontend/src/views/dashboard/canvas/CanvasCore.vue

@@ -1196,6 +1196,7 @@ defineExpose({
           :config-item="item"
           :view-info="canvasViewInfo[item.id]"
           :canvas-view-info="canvasViewInfo"
+          :show-position="'canvas'"
           @parent-add-item-box="(subItem: any) => addItemBox(subItem)"
         >
         </component>

frontend/src/views/dashboard/canvas/DragHandle.vue

@@ -61,6 +61,6 @@ const shadowStyle = (size: number, index: number) => {
   background: #c1e2e8;
   position: absolute;
   cursor: move !important;
-  z-index: 1;
+  z-index: 3;
 }
 </style>

frontend/src/views/dashboard/common/DashboardDetailInfo.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="info-card">
-    <div class="info-title">Dashboard ID</div>
+    <div class="info-title">{{ t('dashboard.dashboard_id') }}</div>
     <div class="info-content">{{ dashboardInfo.id }}</div>
-    <div v-if="dashboardInfo.createName" class="info-title">Creator</div>
+    <div v-if="dashboardInfo.createName" class="info-title">{{ t('dashboard.creator') }}</div>
     <div v-if="dashboardInfo.createName" class="info-content">{{ dashboardInfo.createName }}</div>
-    <div class="info-title">Create Time</div>
+    <div class="info-title">{{ t('dashboard.create_time') }}</div>
     <div class="info-content">{{ timestampFormatDate(dashboardInfo.createTime) }}</div>
-    <div v-if="dashboardInfo.updateName" class="info-title">Updator</div>
+    <div v-if="dashboardInfo.updateName" class="info-title">{{ t('dashboard.updator') }}</div>
     <div v-if="dashboardInfo.updateName" class="info-content">{{ dashboardInfo.updateName }}</div>
-    <div class="info-title">Update Time</div>
+    <div class="info-title">{{ t('dashboard.update_time') }}</div>
     <div v-if="dashboardInfo.updateTime" class="info-content">
       {{ timestampFormatDate(dashboardInfo.updateTime) }}
     </div>
@@ -17,6 +17,9 @@
 </template>
 
 <script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
+
 defineProps({
   dashboardInfo: {
     type: Object,

frontend/src/views/dashboard/common/ResourceGroupOpt.vue

@@ -4,15 +4,17 @@ import { type SQTreeNode } from '@/views/dashboard/utils/treeNode'
 import { computed, reactive, ref } from 'vue'
 import { saveDashboardResource } from '@/views/dashboard/utils/canvasUtils.ts'
 import { dashboardApi } from '@/api/dashboard.ts'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const emits = defineEmits(['finish'])
 const state = reactive({
   id: null,
   opt: null,
   placeholder: '',
   nodeType: 'folder',
   parentSelect: false,
-  resourceFormNameLabel: 'Name',
+  resourceFormNameLabel: t('dashboard.name'),
   dialogTitle: '',
   tData: [],
   tDataSource: [],
@@ -24,11 +26,11 @@ const state = reactive({
 const getTitle = (opt: string) => {
   switch (opt) {
     case 'newLeaf':
-      return 'New Dashboard'
+      return t('dashboard.new_dashboard')
     case 'newFolder':
-      return 'New Folder'
+      return t('dashboard.new_folder')
     case 'rename':
-      return 'Rename'
+      return t('dashboard.rename')
     default:
       return
   }
@@ -137,7 +139,8 @@ const saveResource = () => {
     level: state.nodeType === 'folder' ? 0 : 1,
   }
   saveDashboardResource(params, function (rsp: any) {
-    const messageTips = state.opt === 'rename' ? 'Update Success' : 'Save Success'
+    const messageTips =
+      state.opt === 'rename' ? t('common.update_success') : t('common.save_success')
     ElMessage({
       type: 'success',
       message: messageTips,
@@ -169,6 +172,7 @@ defineExpose({
     :title="state.dialogTitle"
     width="420px"
     :before-close="resetForm"
+    append-to-body
     @submit.prevent
   >
     <el-form
@@ -212,8 +216,8 @@ defineExpose({
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button secondary @click="resetForm()">Cancel</el-button>
-      <el-button type="primary" @click="saveResource()">Confirm</el-button>
+      <el-button secondary @click="resetForm()">{{ t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="saveResource()">{{ t('common.confirm') }}</el-button>
     </template>
   </el-dialog>
 </template>

frontend/src/views/dashboard/components/sq-tab/index.vue

@@ -20,6 +20,9 @@ const showTabTitleFlag = ref(true)
 // @ts-expect-error eslint-disable-next-line @typescript-eslint/ban-ts-comment
 let currentInstance
 import _ from 'lodash'
+import SQPreview from '@/views/dashboard/preview/SQPreview.vue'
+import { useI18n } from 'vue-i18n'
+const { t } = useI18n()
 
 const emits = defineEmits(['parentAddItemBox'])
 
@@ -117,16 +120,7 @@ const beforeHandleCommand = (item: any, param: any) => {
     param: param,
   }
 }
-
-const titleStyle = (itemName: string) => {
-  if (editableTabsValue.value === itemName) {
-    return {}
-  } else {
-    return {}
-  }
-}
-
-const isEditMode = computed(() => true)
+const isEditMode = computed(() => props.showPosition === 'canvas')
 
 const addTabItem = (item: CanvasItem) => {
   // do addTabItem
@@ -144,8 +138,34 @@ const addTabItem = (item: CanvasItem) => {
   refInstance.addItemToBox(newTabItem)
 }
 
+function sureCurTitle() {
+  state.curItem.title = state.textarea
+  state.dialogVisible = false
+}
+
+const titleValid = computed(() => {
+  return !!state.textarea && !!state.textarea.trim()
+})
+
+const titleStyle = (itemName: string) => {
+  let style = {}
+  if (editableTabsValue.value === itemName) {
+    style = {
+      fontSize: '16px',
+    }
+  } else {
+    style = {
+      fontSize: '14px',
+    }
+  }
+  return style
+}
+
 onMounted(() => {
   currentInstance = getCurrentInstance()
+  if (configItem.value.propValue.length > 0) {
+    editableTabsValue.value = configItem.value.propValue[0].name
+  }
 })
 
 defineExpose({
@@ -166,7 +186,6 @@ defineExpose({
       :hide-title="!showTabTitleFlag"
       @tab-add="addTab"
     >
-      <!-- {{ configItem.collisionActive }} & {{ configItem.moveInActive }}${{ configItem.moveOutActive }}-->
       <template v-for="tabItem in configItem.propValue" :key="tabItem.name">
         <el-tab-pane
           class="el-tab-pane-custom"
@@ -185,21 +204,18 @@ defineExpose({
                     @command="handleCommand"
                   >
                     <span class="el-dropdown-link">
-                      <el-icon v-if="isEditMode"><ArrowDown /></el-icon>
+                      <el-icon v-if="isEditMode" style="margin-top: 5px"><ArrowDown /></el-icon>
                     </span>
                     <template #dropdown>
                       <el-dropdown-menu>
                         <el-dropdown-item :command="beforeHandleCommand('editTitle', tabItem)">
-                          edit
-                        </el-dropdown-item>
-                        <el-dropdown-item :command="beforeHandleCommand('copyCur', tabItem)">
-                          copy
+                          {{ t('dashboard.edit') }}
                         </el-dropdown-item>
                         <el-dropdown-item
                           v-if="configItem.propValue.length > 1"
                           :command="beforeHandleCommand('deleteCur', tabItem)"
                         >
-                          delete
+                          {{ t('dashboard.delete') }}
                         </el-dropdown-item>
                       </el-dropdown-menu>
                     </template>
@@ -216,7 +232,16 @@ defineExpose({
         class="tab-content-custom"
         :class="{ 'switch-hidden': editableTabsValue !== tabItem.name }"
       >
+        <SQPreview
+          v-if="showPosition === 'preview'"
+          :ref="'tabPreviewRef_' + index"
+          class="tab-dashboard-preview"
+          :component-data="tabItem.componentData"
+          :canvas-view-info="canvasViewInfo"
+          :base-matrix-count="tabBaseMatrixCount"
+        ></SQPreview>
         <DashboardEditor
+          v-else
           :ref="'tabEditorRef_' + index"
           class="tab-dashboard-editor-main"
           :canvas-component-data="tabItem.componentData"
@@ -230,10 +255,35 @@ defineExpose({
         </DashboardEditor>
       </div>
     </custom-tab>
+    <el-dialog
+      v-model="state.dialogVisible"
+      :title="t('dashboard.edit_title')"
+      :append-to-body="true"
+      width="30%"
+      :show-close="false"
+      :close-on-click-modal="false"
+      center
+    >
+      <el-input v-model="state.textarea" maxlength="50" :placeholder="t('common.input_content')" />
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="state.dialogVisible = false">{{ t('common.cancel') }}</el-button>
+          <el-button :disabled="!titleValid" type="primary" @click="sureCurTitle">{{
+            t('common.confirm')
+          }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <style scoped lang="less">
+::v-deep(.ed-tabs__header) {
+  margin: 0 24px 0 12px !important;
+}
+::v-deep(.ed-tabs__nav-scroll) {
+  margin: 0 12px !important;
+}
 .ed-dropdown-link {
   margin-top: 3px !important;
 }
@@ -245,6 +295,10 @@ defineExpose({
   margin: 2px !important; // border size
 }
 
+.tab-dashboard-preview {
+  background: #ffffff !important;
+}
+
 .tab-dashboard-editor-main {
   height: 100% !important;
 }
@@ -258,4 +312,13 @@ defineExpose({
     overflow: visible !important;
   }
 }
+
+.custom-tab-title {
+  padding: 0 8px 0 4px !important;
+}
+
+.switch-hidden {
+  opacity: 0;
+  z-index: -1;
+}
 </style>

frontend/src/views/dashboard/editor/Toolbar.vue

@@ -181,21 +181,21 @@ const addChatChart = (views: any) => {
     <div class="core-toolbar">
       <component-button-label
         :icon-name="dvView"
-        title="Add View"
+        :title="t('dashboard.view')"
         themes="light"
         is-label
         @custom-click="openViewDialog"
       ></component-button-label>
       <component-button-label
         :icon-name="dvText"
-        title="Text"
+        :title="t('dashboard.text')"
         themes="light"
         is-label
         @custom-click="() => emits('addComponent', 'SQText')"
       ></component-button-label>
       <component-button-label
         :icon-name="dvTab"
-        title="Tab Item"
+        title="Tab"
         themes="light"
         is-label
         @custom-click="() => emits('addComponent', 'SQTab')"
@@ -208,7 +208,7 @@ const addChatChart = (views: any) => {
         type="primary"
         @click="saveCanvasWithCheck()"
       >
-        Save
+        {{ t('common.save') }}
       </el-button>
     </div>
     <Teleport v-if="nameEdit" :to="'#canvas-name'">

frontend/src/views/dashboard/editor/index.vue

@@ -9,7 +9,9 @@ import { storeToRefs } from 'pinia'
 import { dashboardStoreWithOut } from '@/stores/dashboard/dashboard.ts'
 import router from '@/router'
 import { initCanvasData } from '@/views/dashboard/utils/canvasUtils.ts'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const dashboardStore = dashboardStoreWithOut()
 const { componentData, canvasViewInfo } = storeToRefs(dashboardStore)
 
@@ -52,7 +54,7 @@ onMounted(() => {
   if (state.opt === 'create') {
     dashboardStore.updateDashboardInfo({
       dataState: 'prepare',
-      name: 'New Dashboard',
+      name: t('dashboard.new_dashboard'),
       pid: state.routerPid,
     })
   } else if (state.resourceId) {