diff --git a/frontend/src/assets/svg/field_text.svg b/frontend/src/assets/svg/field_text.svg
new file mode 100644
index 00000000..16fa7781
--- /dev/null
+++ b/frontend/src/assets/svg/field_text.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618217035616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6354" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M554.666667 256v640h-85.333334V256H213.333333V170.666667h597.333334v85.333333z" p-id="6355"></path></svg>
diff --git a/frontend/src/assets/svg/field_time.svg b/frontend/src/assets/svg/field_time.svg
new file mode 100644
index 00000000..b5c0c4e4
--- /dev/null
+++ b/frontend/src/assets/svg/field_time.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1664337058571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1356" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M309.312 85.312a32 32 0 0 1 32 32V128h341.312v-10.688a32 32 0 0 1 32-32h21.376a32 32 0 0 1 32 32V128h128c23.552 0 42.624 19.072 42.624 42.624V896a42.688 42.688 0 0 1-42.624 42.624H128A42.688 42.688 0 0 1 85.312 896V170.624C85.312 147.072 104.384 128 128 128h128v-10.688a32 32 0 0 1 32-32h21.312z m373.312 128H341.312V224a32 32 0 0 1-32 32H288a32 32 0 0 1-32-32v-10.688H170.624v640h682.688v-640H768V224a32 32 0 0 1-32 32h-21.376a32 32 0 0 1-32-32v-10.688zM384 437.312a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32v64a32 32 0 0 0 32 32h64a32 32 0 0 0 32-32v-64z m64 0a32 32 0 0 1 32-32h64a32 32 0 0 1 32 32v64a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32v-64z m-64 192a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32v64a32 32 0 0 0 32 32h64a32 32 0 0 0 32-32v-64z m64 0a32 32 0 0 1 32-32h64a32 32 0 0 1 32 32v64a32 32 0 0 1-32 32h-64a32 32 0 0 1-32-32v-64z m320-192a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32v64a32 32 0 0 0 32 32h64a32 32 0 0 0 32-32v-64z" p-id="1357"></path><path d="M768 629.312a32 32 0 0 0-32-32h-64a32 32 0 0 0-32 32v64a32 32 0 0 0 32 32h64a32 32 0 0 0 32-32v-64z" p-id="1358"></path></svg>
\ No newline at end of file
diff --git a/frontend/src/assets/svg/field_value.svg b/frontend/src/assets/svg/field_value.svg
new file mode 100644
index 00000000..b907e4f6
--- /dev/null
+++ b/frontend/src/assets/svg/field_value.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1618218878362" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9183" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M159.926857 689.426286h130.724572l-39.003429 193.718857c-0.859429 4.278857-1.28 9.435429-1.28 13.714286 0 20.992 14.555429 32.566857 34.706286 32.566857 20.571429 0 35.565714-11.154286 39.862857-32.146286l41.984-207.853714h202.715428L530.651429 883.145143c-1.28 4.278857-1.700571 9.435429-1.700572 13.714286 0 20.992 14.573714 32.566857 35.145143 32.566857s35.565714-11.154286 39.862857-32.146286L645.485714 689.426286h152.996572c23.570286 0 39.862857-17.133714 39.862857-40.283429 0-18.852571-12.854857-34.285714-32.146286-34.285714h-145.298286L706.377143 388.571429h149.997714c23.588571 0 39.862857-17.152 39.862857-40.283429 0-18.852571-12.854857-34.285714-32.146285-34.285714h-142.72l35.145142-172.726857c0.420571-2.56 1.28-8.137143 1.28-13.714286 0-20.992-14.994286-32.987429-35.565714-32.987429-23.990857 0-34.706286 13.275429-39.003428 33.426286l-37.705143 186.002286H442.788571l35.145143-172.726857c0.420571-2.56 1.28-8.137143 1.28-13.714286 0-20.992-15.433143-32.987429-35.565714-32.987429-24.429714 0-35.584 13.275429-39.442286 33.426286l-37.705143 186.002286h-140.580571c-23.570286 0-39.862857 17.993143-39.862857 41.563428 0 19.291429 12.873143 33.005714 32.164571 33.005715h133.284572l-45.44 226.285714h-138.422857c-23.588571 0-39.862857 17.993143-39.862858 41.563428 0 19.291429 12.854857 33.005714 32.146286 33.005715z m221.988572-74.569143l45.878857-226.285714H630.491429l-45.842286 226.285714z" p-id="9184"></path></svg>
diff --git a/frontend/src/style.less b/frontend/src/style.less
index 05e5b8b8..3798d8be 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -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;
+}
diff --git a/frontend/src/views/ds/DataTable.vue b/frontend/src/views/ds/DataTable.vue
index 9af6d14a..1458ae4a 100644
--- a/frontend/src/views/ds/DataTable.vue
+++ b/frontend/src/views/ds/DataTable.vue
@@ -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">{{
diff --git a/frontend/src/views/system/permission/auth-tree/FilterFiled.vue b/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
index 1b335eb8..a03da1f7 100644
--- a/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
+++ b/frontend/src/views/system/permission/auth-tree/FilterFiled.vue
@@ -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>
diff --git a/frontend/src/views/system/user/User.vue b/frontend/src/views/system/user/User.vue
index 2773be9d..cf7b4419 100644
--- a/frontend/src/views/system/user/User.vue
+++ b/frontend/src/views/system/user/User.vue
@@ -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',
diff --git a/frontend/src/views/system/variables/index.vue b/frontend/src/views/system/variables/index.vue
index 6f92b191..94461dc9 100644
--- a/frontend/src/views/system/variables/index.vue
+++ b/frontend/src/views/system/variables/index.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 {