feat(user): user manage

Author: dataeaseShu

frontend/src/api/user.ts

@@ -24,5 +24,5 @@ export const userApi = {
   delete: (key: string) => request.delete(`/user/${key}`),
   deleteBatch: (data: any) => request.delete(`/user`, { data }),
   get: (key: string) => request.get(`/user/${key}`),
-  pwd: (data: any) => request.put('/user/pwd', data),
+  pwd: (id: any) => request.patch(`/user/pwd/${id}`),
 }

frontend/src/i18n/en.json

@@ -24,7 +24,11 @@
     "simplified_chinese": "Simplified Chinese",
     "traditional_chinese": "Traditional Chinese",
     "help": "Help",
-    "language": "Language"
+    "language": "Language",
+    "re_upload": "Re-upload",
+    "not_exceed_50mb": "Supports XLS, XLSX, CSV formats, file size does not exceed 50MB",
+    "reset_password": "Reset password",
+    "password_reset_successful": "Password reset successful"
   },
   "dashboard": {
     "select_dashboard": "Please Select Dashboard",
@@ -186,7 +190,9 @@
     "operate_with_caution": "After being deleted, the data source cannot be intelligently counted. Please operate with caution.",
     "data_source_de": "Unable to delete data source: {msg}",
     "cannot_be_deleted": "The chart of the dashboard uses this data source and cannot be deleted.",
-    "got_it": "Got it"
+    "got_it": "Got it",
+    "field_original_notes": "Field original notes",
+    "field_notes_1": "Field notes"
   },
   "model": {
     "default_model": "Default model",
@@ -330,4 +336,4 @@
     "back_community": "Restore to Community Edition",
     "confirm_tips": "Are you sure to restore to Community Edition?"
   }
-}
+}

frontend/src/i18n/zh-CN.json

@@ -26,7 +26,11 @@
     "simplified_chinese": "简体中文",
     "traditional_chinese": "繁體中文",
     "help": "帮助",
-    "language": "语言"
+    "language": "语言",
+    "re_upload": "重新上传",
+    "not_exceed_50mb": "支持 XLS、XLSX、CSV 格式，文件大小不超过 50MB",
+    "reset_password": "重置密码",
+    "password_reset_successful": "重置密码成功"
   },
   "dashboard": {
     "select_dashboard": "请选择仪表板",
@@ -124,14 +128,14 @@
       "choose_tables": "选择数据表",
       "name": "名称",
       "description": "描述",
-      "host": "主机/IP",
+      "host": "主机名/IP地址",
       "port": "端口",
       "username": "用户名",
       "password": "密码",
       "database": "数据库",
       "connect_mode": "连接方式",
       "service_name": "服务名",
-      "extra_jdbc": "额外 JDBC 参数",
+      "extra_jdbc": "额外的 JDBC 连接字符串",
       "schema": "模式",
       "get_schema": "获取模式",
       "file": "文件",
@@ -194,7 +198,9 @@
     "operate_with_caution": "被删除后，将无法对该数据源进行智能问数，请谨慎操作。",
     "data_source_de": "无法删除数据源：{msg}",
     "cannot_be_deleted": "仪表板的图表使用了该数据源，不可删除。",
-    "got_it": "知道了"
+    "got_it": "知道了",
+    "field_original_notes": "字段原始备注",
+    "field_notes_1": "字段备注"
   },
   "model": {
     "default_model": "默认模型",

frontend/src/style.less

@@ -27,6 +27,9 @@
 
   --ed-color-primary: #1cba90 !important;
   --ed-border-radius-base: 6px !important;
+  --ed-color-primary-light-3: #3ec4a1 !important;
+  --ed-color-primary-dark-2: #189e7a !important;
+  --ed-color-primary-1a: #1cba901a;
 }
 
 a {

frontend/src/utils/utils.ts

@@ -54,3 +54,29 @@ export const getBrowserLocale = () => {
 export const getLocale = () => {
   return wsCache.get('user.language') || getBrowserLocale() || 'zh-CN'
 }
+
+export const setSize = (size: any) => {
+  let data = ''
+  const _size = Number.parseFloat(size)
+  if (_size < 1 * 1024) {
+    //如果小于0.1KB转化成B
+    data = _size.toFixed(2) + 'B'
+  } else if (_size < 1 * 1024 * 1024) {
+    //如果小于0.1MB转化成KB
+    data = (_size / 1024).toFixed(2) + 'KB'
+  } else if (_size < 1 * 1024 * 1024 * 1024) {
+    //如果小于0.1GB转化成MB
+    data = (_size / (1024 * 1024)).toFixed(2) + 'MB'
+  } else {
+    //其他转化成GB
+    data = (_size / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
+  }
+  const size_str = data + ''
+  const len = size_str.indexOf('.')
+  const dec = size_str.substr(len + 1, 2)
+  if (dec == '00') {
+    //当小数点后为00时 去掉小数部分
+    return size_str.substring(0, len) + size_str.substr(len + 3, 2)
+  }
+  return size_str
+}

frontend/src/views/ds/DataTable.vue

@@ -52,6 +52,7 @@ const props = withDefaults(
 const { t } = useI18n()
 const paramsFormRef = ref()
 const tableList = ref([] as any[])
+const loading = ref(false)
 const keywords = ref('')
 const tableListWithSearch = computed(() => {
   if (!keywords.value) return tableList.value
@@ -63,7 +64,7 @@ const total = ref(1000)
 const showNum = ref(100)
 const currentTable = ref<any>({})
 const ds = ref<any>({})
-const btnSelect = ref('q')
+const btnSelect = ref('d')
 
 const init = () => {
   datasourceApi.getDs(props.info.id).then((res) => {
@@ -94,13 +95,19 @@ const handleSelectTableList = () => {
 }
 
 const clickTable = (table: any) => {
+  loading.value = true
   currentTable.value = table
-  datasourceApi.fieldList(table.id).then((res) => {
-    fieldList.value = res
-    datasourceApi.previewData(props.info.id, buildData()).then((res) => {
-      previewData.value = res
+  datasourceApi
+    .fieldList(table.id)
+    .then((res) => {
+      fieldList.value = res
+      datasourceApi.previewData(props.info.id, buildData()).then((res) => {
+        previewData.value = res
+      })
+    })
+    .finally(() => {
+      loading.value = false
     })
-  })
 }
 
 const closeTable = () => {
@@ -228,12 +235,14 @@ const back = () => {
         </div>
       </div>
 
-      <div v-if="currentTable.table_name" class="info-table">
+      <div v-if="currentTable.table_name" v-loading="loading" class="info-table">
         <div class="table-name">
           <div class="name">{{ currentTable.table_name }}</div>
           <div class="notes">
             {{ $t('about.remark') }}:
-            {{ currentTable.custom_comment || '-' }}
+            <span :title="currentTable.custom_comment" class="field-notes">{{
+              currentTable.custom_comment || '-'
+            }}</span>
             <el-icon style="margin-left: 8px; cursor: pointer" size="16" @click="editTable">
               <edit></edit>
             </el-icon>
@@ -253,11 +262,13 @@ const back = () => {
             <el-table v-if="btnSelect === 'd'" :data="fieldList" style="width: 100%">
               <el-table-column prop="field_name" :label="t('datasource.field_name')" width="180" />
               <el-table-column prop="field_type" :label="t('datasource.field_type')" width="180" />
-              <el-table-column prop="field_comment" :label="t('about.remark')" />
-              <el-table-column :label="t('datasource.custom_notes')">
+              <el-table-column prop="field_comment" :label="t('datasource.field_original_notes')" />
+              <el-table-column :label="t('datasource.field_notes_1')">
                 <template #default="scope">
                   <div class="field-comment">
-                    <span>{{ scope.row.custom_comment }}</span>
+                    <span :title="scope.row.custom_comment" class="notes-in_table">{{
+                      scope.row.custom_comment
+                    }}</span>
                     <el-tooltip
                       :offset="14"
                       effect="dark"
@@ -441,6 +452,7 @@ const back = () => {
       right: 0;
       top: 0;
       width: calc(100% - 280px);
+      height: 100%;
       .table-name {
         height: 80px;
         padding: 16px 0 0 24px;
@@ -459,11 +471,20 @@ const back = () => {
           color: #646a73;
           display: flex;
           align-items: center;
+
+          .field-notes {
+            display: inline-block;
+            max-width: calc(100% - 75px);
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
         }
       }
 
       .table-content {
         padding: 16px 24px;
+        height: calc(100% - 80px);
 
         .btn-select {
           height: 32px;
@@ -495,33 +516,53 @@ const back = () => {
 
         .preview-or-schema {
           margin-top: 16px;
+          height: calc(100% - 50px);
+          overflow-y: auto;
 
           .field-comment {
-            height: 24px;
-          }
-          .ed-icon {
-            position: relative;
-            cursor: pointer;
-            margin-top: 4px;
-
-            &::after {
-              content: '';
-              background-color: #1f23291a;
-              position: absolute;
-              border-radius: 6px;
-              width: 24px;
-              height: 24px;
-              transform: translate(-50%, -50%);
-              top: 50%;
-              left: 50%;
-              display: none;
+            display: flex;
+            align-items: center;
+            min-height: 24px;
+            .notes-in_table {
+              max-width: 192px;
+              display: -webkit-box;
+              max-height: 66px;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 3; /* 限制行数为3 */
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
-
             &:hover {
-              &::after {
+              .ed-icon {
                 display: block;
               }
             }
+            .ed-icon {
+              position: relative;
+              cursor: pointer;
+              margin-top: 4px;
+              margin-left: 8px;
+              display: none;
+
+              &::after {
+                content: '';
+                background-color: #1f23291a;
+                position: absolute;
+                border-radius: 6px;
+                width: 24px;
+                height: 24px;
+                transform: translate(-50%, -50%);
+                top: 50%;
+                left: 50%;
+                display: none;
+              }
+
+              &:hover {
+                &::after {
+                  display: block;
+                }
+              }
+            }
           }
 
           .preview-num {

frontend/src/views/ds/Datasource.vue

@@ -324,6 +324,7 @@ const back = () => {
       <DatasourceForm
         v-if="[1, 2].includes(activeStep)"
         ref="datasourceFormRef"
+        :isDataTable="false"
         :active-step="activeStep"
         :active-name="activeName"
         :active-type="activeType"