fix(system variables): Both data sources and system variables now include icons displaying field types.

Author: dataeaseShu

frontend/src/assets/svg/field_text.svg

@@ -419,3 +419,13 @@ strong {
     margin-top: -7px;
   }
 }
+
+.text-variables.text-variables {
+  color: #3370ff;
+}
+.number-variables.number-variables {
+  color: #04b49c;
+}
+.datetime-variables.datetime-variables {
+  color: #3370ff;
+}

frontend/src/assets/svg/field_time.svg

@@ -190,6 +190,15 @@ const editTable = () => {
   tableComment.value = currentTable.value.custom_comment
   tableDialog.value = true
 }
+const changeChecked = () => {
+  datasourceApi.saveTable(currentTable.value).then(() => {
+    ElMessage({
+      message: t('common.save_success'),
+      type: 'success',
+      showClose: true,
+    })
+  })
+}
 const saveTable = () => {
   currentTable.value.custom_comment = tableComment.value
   datasourceApi.saveTable(currentTable.value).then(() => {
@@ -473,7 +482,27 @@ const btnSelectClick = (val: any) => {
         class="info-table"
       >
         <div class="table-name">
-          <div class="name">{{ currentTable.table_name }}</div>
+          <div class="name">
+            {{ currentTable.table_name }}
+            <div
+              style="
+                display: inline-flex;
+                align-items: center;
+                margin-left: 30px;
+                font-size: 14px;
+                font-weight: 400;
+              "
+            >
+              <el-switch
+                v-model="currentTable.checked"
+                @change="changeChecked"
+                size="small"
+                style="margin-right: 8px"
+              />
+
+              {{ currentTable.checked ? t('user.disable') : t('user.enable') }}
+            </div>
+          </div>
           <div class="notes">
             {{ $t('about.remark') }}:
             <span :title="currentTable.custom_comment" class="field-notes">{{

frontend/src/assets/svg/field_value.svg

@@ -4,6 +4,10 @@ import { ref, inject, computed, onBeforeMount, toRefs, type Ref, shallowRef } fr
 import { variablesApi } from '@/api/variables'
 import { useI18n } from 'vue-i18n'
 import { allOptions } from '../options'
+import field_text from '@/assets/svg/field_text.svg'
+import field_time from '@/assets/svg/field_time.svg'
+import field_value from '@/assets/svg/field_value.svg'
+
 export interface Item {
   term: string
   field_id: string
@@ -118,6 +122,12 @@ const initEnumOptions = () => {
   console.info('initEnumOptions')
 }
 
+const iconMap = {
+  text: field_text,
+  number: field_value,
+  datetime: field_time,
+}
+
 const selectItem = ({ field_name, id }: any) => {
   Object.assign(item.value, {
     field_id: id,
@@ -248,6 +258,12 @@ const emits = defineEmits(['update:item', 'del'])
             :placeholder="t('datasource.Please_select')"
           >
             <el-option v-for="ele in variables" :key="ele.id" :label="ele.name" :value="ele.id">
+              <div style="width: 100%; display: flex; align-items: center">
+                <el-icon :class="`${ele.var_type}-variables`" size="16" style="margin-right: 4px">
+                  <component :is="iconMap[ele.var_type as keyof typeof iconMap]"></component>
+                </el-icon>
+                {{ ele.name }}
+              </div>
             </el-option>
           </el-select>
         </template>

frontend/src/style.less

@@ -393,6 +393,18 @@
                 :label="item.name"
                 :value="item.id"
               >
+                <div style="width: 100%; display: flex; align-items: center">
+                  <el-icon
+                    :class="`${variableValueMap[item.id].var_type}-variables`"
+                    size="16"
+                    style="margin-right: 4px"
+                  >
+                    <component
+                      :is="iconMap[variableValueMap[item.id].var_type as keyof typeof iconMap]"
+                    ></component>
+                  </el-icon>
+                  {{ item.name }}
+                </div>
               </el-option>
             </el-select>
             <el-select
@@ -544,6 +556,9 @@ import logo_lark from '@/assets/img/lark.png'
 import logo_wechat_work from '@/assets/img/wechat.png'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { userApi } from '@/api/user'
+import field_text from '@/assets/svg/field_text.svg'
+import field_time from '@/assets/svg/field_time.svg'
+import field_value from '@/assets/svg/field_value.svg'
 import { request } from '@/utils/request'
 import { workspaceList } from '@/api/workspace'
 import { variablesApi } from '@/api/variables'
@@ -566,6 +581,12 @@ const drawerMainRef = ref()
 const userImportRef = ref()
 const syncUserRef = ref()
 const selectionLoading = ref(false)
+
+const iconMap = {
+  text: field_text,
+  number: field_value,
+  datetime: field_time,
+}
 const filterOption = ref<any[]>([
   {
     type: 'enum',

frontend/src/views/ds/DataTable.vue

@@ -7,6 +7,9 @@ import IconOpeDelete from '@/assets/svg/icon_delete.svg'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import { useI18n } from 'vue-i18n'
+import field_text from '@/assets/svg/field_text.svg'
+import field_time from '@/assets/svg/field_time.svg'
+import field_value from '@/assets/svg/field_value.svg'
 import { cloneDeep } from 'lodash-es'
 
 interface Form {
@@ -21,6 +24,11 @@ const multipleSelectionAll = ref<any[]>([])
 const keywords = ref('')
 const oldKeywords = ref('')
 const searchLoading = ref(false)
+const iconMap = {
+  text: field_text,
+  number: field_value,
+  datetime: field_time,
+}
 
 const selectable = (row: any) => {
   return ![1, 2, 3].includes(row.id)
@@ -322,7 +330,30 @@ const handleCurrentChange = (val: number) => {
           <el-table-column prop="name" :label="$t('variables.variable_name')">
             <template #default="scope">
               <div style="display: flex; align-items: center" :title="scope.row.name">
-                <div class="ellipsis" style="max-width: calc(100% - 60px); width: fit-content">
+                <div
+                  class="ellipsis"
+                  style="
+                    max-width: calc(100% - 60px);
+                    width: fit-content;
+                    position: relative;
+                    padding-left: 20px;
+                  "
+                >
+                  <el-icon
+                    :class="`${scope.row.var_type}-variables`"
+                    size="16"
+                    style="
+                      margin-right: 4px;
+                      position: absolute;
+                      left: 0;
+                      top: 50%;
+                      transform: translateY(-50%);
+                    "
+                  >
+                    <component
+                      :is="iconMap[scope.row.var_type as keyof typeof iconMap]"
+                    ></component>
+                  </el-icon>
                   {{ scope.row.name }}
                 </div>
                 <div v-if="scope.row.type === 'system'" class="system-flag">
@@ -629,8 +660,11 @@ const handleCurrentChange = (val: number) => {
         margin-left: 4px;
         color: var(--ed-color-primary-15-d, #189e7a);
       }
-      .ed-icon {
-        color: #646a73;
+
+      &:not(:has(.ellipsis)) {
+        .ed-icon {
+          color: #646a73;
+        }
       }
 
       .field-comment {