feat(user): user manage

Author: dataeaseShu

frontend/src/assets/svg/icon-member-default.svg

@@ -9,12 +9,21 @@ import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categori
 import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
 import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
 import { useRouter } from 'vue-router'
+import { useEmitt } from '@/utils/useEmitt'
+
 const router = useRouter()
 const collapse = ref(false)
-
+const handleCollapseChange = (val: any = true) => {
+  collapse.value = val
+}
+useEmitt({
+  name: 'collapse-change',
+  callback: handleCollapseChange,
+})
 const handleFoldExpand = () => {
   collapse.value = !collapse.value
 }
+
 const toWorkspace = () => {
   router.push('/')
 }
@@ -32,7 +41,7 @@ const toWorkspace = () => {
           <el-icon size="16">
             <icon_moments_categories_outlined></icon_moments_categories_outlined>
           </el-icon>
-          {{ collapse ? '' : '返回工作空间' }}
+          {{ collapse ? '' : $t('workspace.return_to_workspace') }}
         </div>
         <div class="personal-info">
           <Person :collapse="collapse"></Person>
@@ -82,8 +91,6 @@ const toWorkspace = () => {
       line-height: 22px;
       width: calc(100% - 32px);
       .back-to_workspace {
-        background-color: #1f23290a;
-        border: 1px solid #d0d3d6;
         display: flex;
         align-items: center;
         justify-content: center;

frontend/src/assets/workspace/default_avatar.png

@@ -1,18 +1,20 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import Default_avatar from '@/assets/svg/icon-member-default.svg'
+import Default_avatar from '@/assets/workspace/default_avatar.png'
 import icon_admin_outlined from '@/assets/svg/icon_admin_outlined.svg'
 import icon_maybe_outlined from '@/assets/svg/icon-maybe_outlined.svg'
 import icon_key_outlined from '@/assets/svg/icon-key_outlined.svg'
 import icon_translate_outlined from '@/assets/svg/icon_translate_outlined.svg'
 import icon_logout_outlined from '@/assets/svg/icon_logout_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
+import { useI18n } from 'vue-i18n'
 
 defineProps({
   collapse: { type: [Boolean], required: true },
 })
 
+const { t } = useI18n()
 const name = ref('飞小致')
 const currentLanguage = ref('zh-CN')
 const emit = defineEmits(['selectPerson'])
@@ -22,11 +24,11 @@ const languageList = [
     value: 'en',
   },
   {
-    name: '简体中文',
+    name: t('common.simplified_chinese'),
     value: 'zh-CN',
   },
   {
-    name: '繁體中文',
+    name: t('common.traditional_chinese'),
     value: 'zh-CN',
   },
 ]
@@ -43,40 +45,36 @@ const handleDefaultLanguageChange = (item: any) => {
   <el-popover popper-class="system-person" :placement="collapse ? 'right' : 'top'">
     <template #reference>
       <button class="person" :class="collapse && 'collapse'">
-        <el-icon size="32" class="default-avatar">
-          <Default_avatar></Default_avatar>
-        </el-icon>
+        <img class="default-avatar" :src="Default_avatar" width="32px" height="32px" />
         <span v-if="!collapse" class="name">{{ name }}</span>
       </button></template
     >
     <div class="popover">
       <div class="popover-content">
         <div class="info">
-          <el-icon style="transform: scale(1.25)" size="32">
-            <Default_avatar></Default_avatar>
-          </el-icon>
+          <img :src="Default_avatar" width="40px" height="40px" />
           <div class="top">{{ name }}</div>
           <div class="bottom">feixaozhi</div>
         </div>
         <div class="popover-item" @click="handlePersonChange">
           <el-icon size="16">
             <icon_admin_outlined></icon_admin_outlined>
           </el-icon>
-          <div class="datasource-name">系统管理</div>
+          <div class="datasource-name">{{ $t('common.system_manage') }}</div>
         </div>
         <div class="popover-item">
           <el-icon size="16">
             <icon_key_outlined></icon_key_outlined>
           </el-icon>
-          <div class="datasource-name">修改密码</div>
+          <div class="datasource-name">{{ $t('user.change_password') }}</div>
         </div>
         <el-popover :teleported="false" popper-class="system-language" placement="right">
           <template #reference>
             <div class="popover-item">
               <el-icon size="16">
                 <icon_translate_outlined></icon_translate_outlined>
               </el-icon>
-              <div class="datasource-name">语言</div>
+              <div class="datasource-name">{{ $t('common.language') }}</div>
               <el-icon style="transform: scale(1.33)" class="right" size="16">
                 <icon_right_outlined></icon_right_outlined>
               </el-icon>
@@ -102,13 +100,13 @@ const handleDefaultLanguageChange = (item: any) => {
           <el-icon size="16">
             <icon_maybe_outlined></icon_maybe_outlined>
           </el-icon>
-          <div class="datasource-name">帮助</div>
+          <div class="datasource-name">{{ $t('common.help') }}</div>
         </div>
         <div class="popover-item mr4">
           <el-icon size="16">
             <icon_logout_outlined></icon_logout_outlined>
           </el-icon>
-          <div class="datasource-name">退出登录</div>
+          <div class="datasource-name">{{ $t('common.logout') }}</div>
         </div>
       </div>
     </div>
@@ -117,7 +115,6 @@ const handleDefaultLanguageChange = (item: any) => {
 
 <style lang="less" scoped>
 .person {
-  border-radius: 6px;
   padding: 0 8px;
   display: flex;
   align-items: center;
@@ -126,6 +123,7 @@ const handleDefaultLanguageChange = (item: any) => {
   height: 40px;
   border: none;
   background-color: transparent;
+  position: relative;
 
   &.collapse {
     min-width: 48px;
@@ -149,15 +147,28 @@ const handleDefaultLanguageChange = (item: any) => {
     margin-left: 8px;
   }
 
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+  }
+
   &:hover,
-  &:active {
-    background: #1f23291a;
-    border: 1px solid #1f23291a;
+  &:focus {
+    &::after {
+      background: #1f23291a;
+    }
   }
 
   &:active {
-    background: #1f232926;
-    border: 1px solid #1f23291a;
+    &::after {
+      background: #1f232926;
+    }
   }
 }
 </style>
@@ -195,9 +206,9 @@ const handleDefaultLanguageChange = (item: any) => {
       height: 62px;
       padding: 8px;
 
-      .ed-icon {
-        margin: 6px 8px 0 7px;
+      img {
         float: left;
+        margin: 3px 8px 0 7px;
       }
 
       .top {

frontend/src/components/layout/LayoutDsl.vue

@@ -103,6 +103,8 @@ const handleDefaultWorkspaceChange = (item: any) => {
 
   &.collapse {
     width: 40px;
+    background: none;
+    border: none;
   }
 
   .name {

frontend/src/components/layout/Person.vue

@@ -19,7 +19,11 @@
     "logout": "Logout",
     "result_count": "result",
     "clear_filter": "Clear conditions",
-    "reset": "Reset"
+    "reset": "Reset",
+    "simplified_chinese": "Simplified Chinese",
+    "traditional_chinese": "Traditional Chinese",
+    "help": "Help",
+    "language": "Language"
   },
   "dashboard": {
     "length_1_64_characters": "Name field length must be 1-64 characters",
@@ -270,7 +274,12 @@
     "selected_2_people": "Selected: {msg} people",
     "clear": "Clear",
     "historical_dialogue": "No historical dialogue",
-    "rename_a_workspace" : "Rename a workspace"
+    "rename_a_workspace": "Rename a workspace",
+    "return_to_workspace": "Return to workspace",
+    "there_are": "There are",
+    "2_dashboards": "{msg} dashboards",
+    "smart_data_centers": "{msg} smart data centers",
+    "confirm_to_delete": "This data source is in use. Deleting it will cause these resources to not work properly. Confirm to delete?"
   },
   "chat": {
     "chart_type": {

frontend/src/components/layout/Workspace.vue

@@ -19,7 +19,11 @@
     "logout": "退出登录",
     "result_count": "个结果",
     "clear_filter": "清空条件",
-    "reset": "重置"
+    "reset": "重置",
+    "simplified_chinese": "简体中文",
+    "traditional_chinese": "繁體中文",
+    "help": "帮助",
+    "language": "语言"
   },
   "dashboard": {
     "length_1_64_characters": "名称字段长度1-64个字符",
@@ -273,7 +277,12 @@
     "selected_2_people": "已选：{msg} 人",
     "clear": "清空",
     "historical_dialogue": "暂无历史对话",
-    "rename_a_workspace" : "重命名工作空间"
+    "rename_a_workspace": "重命名工作空间",
+    "return_to_workspace": "返回工作空间",
+    "there_are": "有 ",
+    "2_dashboards": "{msg} 个仪表板",
+    "smart_data_centers": "{msg} 个智能问数",
+    "confirm_to_delete": "正在使用此数据源，删除后会导致这些资源无法正常使用，确认删除?"
   },
   "chat": {
     "chart_type": {

frontend/src/i18n/en.json

@@ -165,12 +165,17 @@ const changeStatus = (row: any) => {
     })
   })
 }
+
+const emits = defineEmits(['back'])
+const back = () => {
+  emits('back')
+}
 </script>
 
 <template>
   <div class="data-table no-padding">
     <div class="info">
-      {{ $t('ds.title') }}
+      <el-button text @click="back">{{ $t('ds.title') }}</el-button>
       <el-icon size="12">
         <icon_right_outlined></icon_right_outlined>
       </el-icon>
@@ -354,8 +359,24 @@ const changeStatus = (row: any) => {
     color: #646a73;
     border-bottom: 1px solid #1f232926;
 
+    .ed-button {
+      height: 22px;
+      line-height: 22px;
+      color: #646a73;
+
+      &:hover {
+        background: #1cba901a;
+        color: #1cba90;
+      }
+      &:active {
+        color: #189e7a;
+        background: #1cba9033;
+      }
+    }
+
     .name {
       color: #1f2329;
+      margin-left: 4px;
     }
   }
   .content {