refactor(i18n): adapter all components

2024-11-29 18:48:23 +08:00 · 2024-11-18 16:05:13 +08:00 · 2024-11-18 16:05:13 +08:00 · 05069c1d83
commit 05069c1d83
parent 9363539e22
35 changed files with 435 additions and 372 deletions
--- a/core/datacap-service/src/main/java/io/edurt/datacap/service/entity/ReportEntity.java
+++ b/core/datacap-service/src/main/java/io/edurt/datacap/service/entity/ReportEntity.java
@ -61,7 +61,7 @@ public class ReportEntity
    @JoinTable(name = "datacap_report_source_relation",
            joinColumns = @JoinColumn(name = "report_id"),
            inverseJoinColumns = @JoinColumn(name = "source_id"))
-    @JsonIncludeProperties(value = {"code", "name"})
+    @JsonIncludeProperties(value = {"id", "code", "name", "type"})
    private SourceEntity source;

    @ManyToOne
--- a/core/datacap-ui/src/utils/common.ts
+++ b/core/datacap-ui/src/utils/common.ts
@ -1,3 +1,5 @@
+import { useI18n } from 'vue-i18n'
+
 const token = 'DataCapAuthToken'
 const menu = 'DataCapAvailableMenus'
 const userEditorConfigure = 'DataCapUserEditorConfigure'
@ -11,34 +13,6 @@ const getCurrentUserId = (): number => {
    return JSON.parse(localStorage.getItem(token) || '{}').id
 }

-/**
- * Retrieves the text based on the given origin value.
- *
- * @param {any} i18n - the internationalization object
- * @param {string} origin - the origin value to determine the text to retrieve
- * @return {string} the text based on the origin value
- */
-const getText = (i18n: any, origin: string): string => {
-    switch (origin) {
-        case 'CREATED':
-            return i18n.t('state.common.create')
-        case 'RUNNING':
-            return i18n.t('state.common.running')
-        case 'SUCCESS':
-            return i18n.t('state.common.success')
-        case 'FAILURE':
-            return i18n.t('state.common.failure')
-        case 'STOPPED':
-            return i18n.t('state.common.stop')
-        case 'TIMEOUT':
-            return i18n.t('state.common.timeout')
-        case 'QUEUE':
-            return i18n.t('state.common.queue')
-        default:
-            return origin
-    }
-}
-
 /**
 * Returns the color based on the origin.
 *
@ -81,7 +55,42 @@ export default {
    menu: menu,
    getCurrentUserId: getCurrentUserId,
    userEditorConfigure: userEditorConfigure,
-    getText: getText,
    getColor: getColor,
    fileToBase64: fileToBase64
 }
+
+export function useUtil()
+{
+    const { t } = useI18n()
+
+    /**
+     * Retrieves the text based on the given origin value.
+     *
+     * @param {string} origin - the origin value to determine the text to retrieve
+     * @return {string} the text based on the origin value
+     */
+    const getText = (origin: string): string => {
+        switch (origin) {
+            case 'CREATED':
+                return t('state.common.create')
+            case 'RUNNING':
+                return t('state.common.running')
+            case 'SUCCESS':
+                return t('state.common.success')
+            case 'FAILURE':
+                return t('state.common.failure')
+            case 'STOPPED':
+                return t('state.common.stop')
+            case 'TIMEOUT':
+                return t('state.common.timeout')
+            case 'QUEUE':
+                return t('state.common.queue')
+            default:
+                return origin
+        }
+    }
+
+    return {
+        getText
+    }
+}
--- a/core/datacap-ui/src/views/layouts/common/components/components/LanguageSwitcher.vue
+++ b/core/datacap-ui/src/views/layouts/common/components/components/LanguageSwitcher.vue
@ -23,7 +23,6 @@
 import { onMounted, ref } from 'vue'
 import { useI18nHandler } from '@/i18n/I18n'

-console.log( useI18nHandler())
 // @ts-ignore
 const { loadLocale } = useI18nHandler()
 const language = ref('language_zh-cn')
--- a/core/datacap-ui/src/views/layouts/profile/components/LayoutSidebar.vue
+++ b/core/datacap-ui/src/views/layouts/profile/components/LayoutSidebar.vue
@ -10,32 +10,27 @@
 </template>

 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent } from 'vue'
+import { useI18n } from 'vue-i18n'

 export default defineComponent({
  name: 'LayoutSidebar',
-  data()
+  setup()
  {
+    const { t } = useI18n()
+
+    const items = computed(() => [
+      { title: t('user.common.profile'), href: '/admin/user/profile' },
+      { title: t('user.common.info'), href: '/admin/user/info' },
+      { title: t('user.common.log'), href: '/admin/user/log' },
+      { title: t('user.common.editor'), href: '/admin/user/editor' },
+      { title: t('user.common.assistant'), href: '/admin/user/assistant' },
+      { title: t('user.common.modifyPassword'), href: '/admin/user/password' },
+      { title: t('user.common.modifyUsername'), href: '/admin/user/username' }
+    ])
+
    return {
-      items: [] as any[]
-    }
-  },
-  created()
-  {
-    this.handlerInitialize()
-  },
-  methods: {
-    handlerInitialize()
-    {
-      this.items = [
-        { title: this.$t('user.common.profile'), href: '/admin/user/profile' },
-        { title: this.$t('user.common.info'), href: '/admin/user/info' },
-        { title: this.$t('user.common.log'), href: '/admin/user/log' },
-        { title: this.$t('user.common.editor'), href: '/admin/user/editor' },
-        { title: this.$t('user.common.assistant'), href: '/admin/user/assistant' },
-        { title: this.$t('user.common.modifyPassword'), href: '/admin/user/password' },
-        { title: this.$t('user.common.modifyUsername'), href: '/admin/user/username' }
-      ]
+      items
    }
  }
 })
--- a/core/datacap-ui/src/views/pages/admin/dataset/DatasetHistory.vue
+++ b/core/datacap-ui/src/views/pages/admin/dataset/DatasetHistory.vue
@ -6,7 +6,7 @@
    <div class="relative">
      <ShadcnSpin v-if="loading" fixed/>

-      <ShadcnTable size="small" :columns="headers" :data="data">
+      <ShadcnTable size="small" :columns="historyHeaders" :data="data">
        <template #state="{ row }">
          <ShadcnHoverCard v-if="row?.state === 'FAILURE'">
            <ShadcnTag :color="Common.getColor(row?.state)">
@ -46,7 +46,7 @@
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
 import { useI18n } from 'vue-i18n'
-import { createHistoryHeaders } from './DatasetUtils'
+import { useDatasetHeaders } from './DatasetUtils'
 import DatasetService from '@/services/dataset'
 import { DatasetModel } from '@/model/dataset'
 import Common from '@/utils/common'
@ -82,12 +82,12 @@ export default defineComponent({
  {
    const i18n = useI18n()
    const filter: FilterModel = new FilterModel()
-    const headers = createHistoryHeaders(i18n)
+    const { historyHeaders } = useDatasetHeaders()

    return {
      i18n,
      filter,
-      headers
+      historyHeaders
    }
  },
  data()
--- a/core/datacap-ui/src/views/pages/admin/dataset/DatasetHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/dataset/DatasetHome.vue
@ -136,8 +136,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { useI18n } from 'vue-i18n'
-import { createHeaders } from './DatasetUtils'
+import { useDatasetHeaders } from './DatasetUtils'
 import DatasetService from '@/services/dataset'
 import { DatasetModel } from '@/model/dataset'
 import DatasetState from '@/views/pages/admin/dataset/components/DatasetState.vue'
@ -153,7 +152,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useDatasetHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/admin/dataset/DatasetUtils.ts
+++ b/core/datacap-ui/src/views/pages/admin/dataset/DatasetUtils.ts
@ -1,39 +1,40 @@
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 /**
- * Generates headers for a table based on i18n translations.
- *
- * @param {any} i18n - the internationalization object for translations
- * @return {Array} an array of header objects for the table
+ * Hook for dataset table headers
 */
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'description', label: i18n.t('common.description') },
-        { key: 'source', label: i18n.t('common.source'), slot: 'source' },
-        { key: 'syncMode', label: i18n.t('dataset.common.syncMode'), slot: 'syncMode' },
-        { key: 'scheduler', label: i18n.t('common.scheduler') },
-        { key: 'executor', label: i18n.t('common.executor') },
-        { key: 'state', label: i18n.t('common.state'), slot: 'state' },
-        { key: 'totalRows', label: i18n.t('dataset.common.totalRows') },
-        { key: 'totalSize', label: i18n.t('dataset.common.totalSize') },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+export function useDatasetHeaders()
+{
+    const { t } = useI18n()

-const createHistoryHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'elapsed', label: i18n.t('common.elapsed') },
-        { key: 'count', label: i18n.t('common.count') },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'state', label: i18n.t('common.state'), slot: 'state' }
-    ]
-}
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'name', label: t('common.name') },
+        { key: 'description', label: t('common.description') },
+        { key: 'source', label: t('common.source'), slot: 'source' },
+        { key: 'syncMode', label: t('dataset.common.syncMode'), slot: 'syncMode' },
+        { key: 'scheduler', label: t('common.scheduler') },
+        { key: 'executor', label: t('common.executor') },
+        { key: 'state', label: t('common.state'), slot: 'state' },
+        { key: 'totalRows', label: t('dataset.common.totalRows') },
+        { key: 'totalSize', label: t('dataset.common.totalSize') },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])

-export {
-    createHeaders,
-    createHistoryHeaders
+    const historyHeaders = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'elapsed', label: t('common.elapsed') },
+        { key: 'count', label: t('common.count') },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'state', label: t('common.state'), slot: 'state' }
+    ])
+
+    return {
+        headers,
+        historyHeaders
+    }
 }
--- a/core/datacap-ui/src/views/pages/admin/history/HistoryHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/history/HistoryHome.vue
@ -106,9 +106,8 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter.ts'
-import { useI18n } from 'vue-i18n'
 import AuditService from '@/services/audit'
-import { createHeaders } from '@/views/pages/admin/history/HistoryUtils'
+import { useHeaders } from '@/views/pages/admin/history/HistoryUtils'
 import SqlInfo from '@/views/components/sql/SqlInfo.vue'
 import { HistoryModel } from '@/model/history'
 import HistoryData from '@/views/pages/admin/history/HistoryData.vue'
@ -122,7 +121,8 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()
+
    return {
      filter,
      headers
--- a/core/datacap-ui/src/views/pages/admin/history/HistoryUtils.ts
+++ b/core/datacap-ui/src/views/pages/admin/history/HistoryUtils.ts
@ -1,18 +1,24 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'source', label: i18n.t('common.plugin'), slot: 'source' },
-        { key: 'type', label: i18n.t('common.type'), slot: 'type' },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.endTime') },
-        { key: 'elapsed', label: i18n.t('common.elapsed') },
-        { key: 'mode', label: i18n.t('common.from'), slot: 'mode' },
-        { key: 'count', label: i18n.t('common.count') },
-        { key: 'state', label: i18n.t('common.state'), slot: 'state' },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'source', label: t('common.plugin'), slot: 'source' },
+        { key: 'type', label: t('common.type'), slot: 'type' },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.endTime') },
+        { key: 'elapsed', label: t('common.elapsed') },
+        { key: 'mode', label: t('common.from'), slot: 'mode' },
+        { key: 'count', label: t('common.count') },
+        { key: 'state', label: t('common.state'), slot: 'state' },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/admin/pipeline/PipelineHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/pipeline/PipelineHome.vue
@ -39,7 +39,7 @@

        <template #state="{row}">
          <ShadcnTag class="w-20" :color="Common.getColor(row.state)">
-            {{ Common.getText(i18n, row.state) }}
+            {{ getText(row.state) }}
          </ShadcnTag>
        </template>

@ -138,10 +138,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { createHeaders } from '@/views/pages/admin/pipeline/PipelineUtils'
-import { useI18n } from 'vue-i18n'
+import { useHeaders } from '@/views/pages/admin/pipeline/PipelineUtils'
 import PipelineService from '@/services/pipeline'
-import Common from '@/utils/common.ts'
+import Common, { useUtil } from '@/utils/common.ts'
 import { PipelineModel } from '@/model/pipeline.ts'
 import MarkdownPreview from '@/views/components/markdown/MarkdownView.vue'
 import PipelineStop from '@/views/pages/admin/pipeline/PipelineStop.vue'
@ -154,13 +153,14 @@ export default defineComponent({
  components: { PipelineFlow, PipelineDelete, PipelineLogger, PipelineStop, MarkdownPreview },
  setup()
  {
-    const i18n = useI18n()
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(i18n)
+    const { headers } = useHeaders()
+    const { getText } = useUtil()
+
    return {
-      i18n,
      filter,
-      headers
+      headers,
+      getText
    }
  },
  computed: {
--- a/core/datacap-ui/src/views/pages/admin/pipeline/PipelineUtils.ts
+++ b/core/datacap-ui/src/views/pages/admin/pipeline/PipelineUtils.ts
@ -1,19 +1,25 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name'), length: 20 },
-        { key: 'work', label: i18n.t('common.work'), ellipsis: true },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.endTime') },
-        { key: 'elapsed', label: i18n.t('common.elapsed') },
-        { key: 'executor', label: i18n.t('common.executor'), slot: 'executor' },
-        { key: 'from', label: i18n.t('common.from'), slot: 'from' },
-        { key: 'to', label: i18n.t('common.to'), slot: 'to' },
-        { key: 'state', label: i18n.t('common.state'), slot: 'state' },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'name', label: t('common.name'), length: 20 },
+        { key: 'work', label: t('common.work'), ellipsis: true },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.endTime') },
+        { key: 'elapsed', label: t('common.elapsed') },
+        { key: 'executor', label: t('common.executor'), slot: 'executor' },
+        { key: 'from', label: t('common.from'), slot: 'from' },
+        { key: 'to', label: t('common.to'), slot: 'to' },
+        { key: 'state', label: t('common.state'), slot: 'state' },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/admin/report/ReportHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/report/ReportHome.vue
@ -86,8 +86,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { useI18n } from 'vue-i18n'
-import { createHeaders } from '@/views/pages/admin/report/ReportUtils'
+import { useHeaders } from '@/views/pages/admin/report/ReportUtils'
 import ReportService from '@/services/report'
 import { ReportModel } from '@/model/report'
 import ReportView from '@/views/pages/admin/report/ReportView.vue'
@ -99,7 +98,8 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()
+
    return {
      filter,
      headers
--- a/core/datacap-ui/src/views/pages/admin/report/ReportUtils.ts
+++ b/core/datacap-ui/src/views/pages/admin/report/ReportUtils.ts
@ -1,16 +1,22 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'type', label: i18n.t('common.type') },
-        { key: 'realtime', label: i18n.t('common.realtime'), slot: 'realtime' },
-        { key: 'source', label: i18n.t('common.source'), slot: 'source' },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'name', label: t('common.name') },
+        { key: 'type', label: t('common.type') },
+        { key: 'realtime', label: t('common.realtime'), slot: 'realtime' },
+        { key: 'source', label: t('common.source'), slot: 'source' },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/admin/snippet/SnippetHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/snippet/SnippetHome.vue
@ -90,8 +90,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter.ts'
-import { createHeaders } from '@/views/pages/admin/snippet/SnippetUtils'
-import { useI18n } from 'vue-i18n'
+import { useHeaders } from '@/views/pages/admin/snippet/SnippetUtils'
 import SnippetService from '@/services/snippet'
 import { SnippetModel } from '@/model/snippet'
 import SnippetInfo from '@/views/pages/admin/snippet/SnippetInfo.vue'
@ -104,7 +103,8 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()
+
    return {
      filter,
      headers
--- a/core/datacap-ui/src/views/pages/admin/snippet/SnippetUtils.ts
+++ b/core/datacap-ui/src/views/pages/admin/snippet/SnippetUtils.ts
@ -1,15 +1,21 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'description', label: i18n.t('common.description') },
-        { key: 'username', label: i18n.t('common.username'), slot: 'username' },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'name', label: t('common.name') },
+        { key: 'description', label: t('common.description') },
+        { key: 'username', label: t('common.username'), slot: 'username' },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/admin/source/SourceHistory.vue
+++ b/core/datacap-ui/src/views/pages/admin/source/SourceHistory.vue
@ -61,9 +61,8 @@ import { defineComponent } from 'vue'
 import { SourceModel } from '@/model/source'
 import SourceService from '@/services/source'
 import { FilterModel } from '@/model/filter'
-import { useI18n } from 'vue-i18n'
-import { createHistoryHeaders } from '@/views/pages/admin/source/SourceUtils'
-import Common from '@/utils/common'
+import { useHeaders } from '@/views/pages/admin/source/SourceUtils'
+import Common, { useUtil } from '@/utils/common'
 import { MdPreview } from 'md-editor-v3'
 import 'md-editor-v3/lib/style.css'

@ -98,14 +97,14 @@ export default defineComponent({
  },
  setup()
  {
-    const i18n = useI18n()
    const filter: FilterModel = new FilterModel()
-    const headers = createHistoryHeaders(i18n)
+    const { historyHeaders: headers } = useHeaders()
+    const { getText } = useUtil()

    return {
      filter,
      headers,
-      i18n
+      getText
    }
  },
  data()
@ -170,7 +169,7 @@ export default defineComponent({
    },
    getStateText(origin: string): string
    {
-      return Common.getText(this.i18n, origin)
+      return this.getText(origin)
    },
    toMarkdown(content: string)
    {
--- a/core/datacap-ui/src/views/pages/admin/source/SourceHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/source/SourceHome.vue
@ -49,7 +49,7 @@
              </ShadcnButton>
            </ShadcnTooltip>

-            <ShadcnDropdown trigger="click">
+            <ShadcnDropdown trigger="click" position="right">
              <template #trigger>
                <ShadcnButton circle size="small">
                  <ShadcnIcon icon="Cog" :size="15"/>
@ -128,9 +128,8 @@

 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useI18n } from 'vue-i18n'
 import Common from '@/utils/common'
-import { createHeaders } from '@/views/pages/admin/source/SourceUtils'
+import { useHeaders } from '@/views/pages/admin/source/SourceUtils'
 import { FilterModel } from '@/model/filter'
 import { SourceModel } from '@/model/source'
 import SourceService from '@/services/source'
@ -145,7 +144,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()
    const loginUserId = Common.getCurrentUserId()

    return {
--- a/core/datacap-ui/src/views/pages/admin/source/SourceUtils.ts
+++ b/core/datacap-ui/src/views/pages/admin/source/SourceUtils.ts
@ -1,33 +1,37 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'type', label: i18n.t('common.type'), slot: 'type' },
-        { key: 'protocol', label: i18n.t('common.protocol') },
-        { key: 'host', label: i18n.t('common.host') },
-        { key: 'port', label: i18n.t('common.port') },
-        { key: 'public', label: i18n.t('common.public'), slot: 'public' },
-        { key: 'version', label: i18n.t('common.version'), slot: 'version' },
-        { key: 'available', label: i18n.t('common.available'), slot: 'available' },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-const createHistoryHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id'), width: 80 },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'elapsed', label: i18n.t('common.elapsed'), slot: 'elapsed' },
-        { key: 'state', label: i18n.t('common.state'), slot: 'state' },
-        { key: 'result', label: i18n.t('common.result'), slot: 'result' }
-    ]
-}
+export function useHeaders()
+{
+    const { t } = useI18n()

-export {
-    createHeaders,
-    createHistoryHeaders
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'name', label: t('common.name') },
+        { key: 'type', label: t('common.type'), slot: 'type' },
+        { key: 'protocol', label: t('common.protocol') },
+        { key: 'host', label: t('common.host') },
+        { key: 'port', label: t('common.port') },
+        { key: 'public', label: t('common.public'), slot: 'public' },
+        { key: 'version', label: t('common.version'), slot: 'version' },
+        { key: 'available', label: t('common.available'), slot: 'available' },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])
+
+    const historyHeaders = computed(() => [
+        { key: 'id', label: t('common.id'), width: 80 },
+        { key: 'name', label: t('common.name') },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'elapsed', label: t('common.elapsed'), slot: 'elapsed' },
+        { key: 'state', label: t('common.state'), slot: 'state' },
+        { key: 'result', label: t('common.result'), slot: 'result' }
+    ])
+
+    return {
+        headers,
+        historyHeaders
+    }
 }
--- a/core/datacap-ui/src/views/pages/admin/user/profile/LogHome.vue
+++ b/core/datacap-ui/src/views/pages/admin/user/profile/LogHome.vue
@ -30,8 +30,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { useI18n } from 'vue-i18n'
-import { createHeaders } from './ProfileUtils'
+import { useHeaders } from './ProfileUtils'
 import UserService from '@/services/user'
 import Common from '@/utils/common'

@ -46,7 +45,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/admin/user/profile/ProfileUtils.ts
+++ b/core/datacap-ui/src/views/pages/admin/user/profile/ProfileUtils.ts
@ -1,15 +1,21 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'device', label: i18n.t('common.device') },
-        { key: 'client', label: i18n.t('common.client') },
-        { key: 'ip', label: i18n.t('common.ip') },
-        { key: 'state', label: i18n.t('common.state'), slot: 'state' },
-        { key: 'ua', label: i18n.t('common.ua'), width: 350 },
-        { key: 'createTime', label: i18n.t('common.loginTime') }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'device', label: t('common.device') },
+        { key: 'client', label: t('common.client') },
+        { key: 'ip', label: t('common.ip') },
+        { key: 'state', label: t('common.state'), slot: 'state' },
+        { key: 'ua', label: t('common.ua'), width: 350 },
+        { key: 'createTime', label: t('common.loginTime') }
+    ])
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/system/function/FunctionHome.vue
+++ b/core/datacap-ui/src/views/pages/system/function/FunctionHome.vue
@ -68,8 +68,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { createHeaders } from '@/views/pages/system/function/FunctionUtils'
-import { useI18n } from 'vue-i18n'
+import { useHeaders } from '@/views/pages/system/function/FunctionUtils'
 import FunctionService from '@/services/function'
 import FunctionInfo from '@/views/pages/system/function/FunctionInfo.vue'
 import FunctionImport from '@/views/pages/system/function/FunctionImport.vue'
@ -81,7 +80,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/system/function/FunctionImport.vue
+++ b/core/datacap-ui/src/views/pages/system/function/FunctionImport.vue
@ -71,8 +71,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { createDefaultType } from '@/views/pages/system/function/FunctionUtils'
+import { useHeaders } from '@/views/pages/system/function/FunctionUtils'
 import { FunctionImportModel, FunctionMode } from '@/model/function'
 import FunctionService from '@/services/function'
 import SourceService from '@/services/source'
@ -87,7 +86,8 @@ export default defineComponent({
  },
  setup()
  {
-    const types = createDefaultType(useI18n())
+    const { typeHeaders: types } = useHeaders()
+
    return {
      types
    }
--- a/core/datacap-ui/src/views/pages/system/function/FunctionInfo.vue
+++ b/core/datacap-ui/src/views/pages/system/function/FunctionInfo.vue
@ -57,8 +57,7 @@

 <script lang="ts">
 import { defineComponent } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { createDefaultType } from '@/views/pages/system/function/FunctionUtils'
+import { useHeaders } from '@/views/pages/system/function/FunctionUtils'
 import { FunctionModel } from '@/model/function'
 import FunctionService from '@/services/function'
 import SourceService from '@/services/source'
@ -77,7 +76,8 @@ export default defineComponent({
  },
  setup()
  {
-    const types = createDefaultType(useI18n())
+    const { typeHeaders: types } = useHeaders()
+
    return {
      types
    }
--- a/core/datacap-ui/src/views/pages/system/function/FunctionUtils.ts
+++ b/core/datacap-ui/src/views/pages/system/function/FunctionUtils.ts
@ -1,23 +1,29 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'description', label: i18n.t('common.description') },
-        { key: 'plugin', label: i18n.t('common.plugin'), slot: 'plugin' },
-        { key: 'type', label: i18n.t('common.type'), slot: 'type' },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-const createDefaultType = (i18n: any) => [
-    { label: i18n.t('function.common.keyword'), value: 'KEYWORD' },
-    { label: i18n.t('function.common.operator'), value: 'OPERATOR' },
-    { label: i18n.t('function.common.function'), value: 'FUNCTION' }
-]
+export function useHeaders()
+{
+    const { t } = useI18n()

-export {
-    createHeaders,
-    createDefaultType
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'name', label: t('common.name') },
+        { key: 'description', label: t('common.description') },
+        { key: 'plugin', label: t('common.plugin'), slot: 'plugin' },
+        { key: 'type', label: t('common.type'), slot: 'type' },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])
+
+    const typeHeaders = computed(() => [
+        { label: t('function.common.keyword'), value: 'KEYWORD' },
+        { label: t('function.common.operator'), value: 'OPERATOR' },
+        { label: t('function.common.function'), value: 'FUNCTION' }
+    ])
+
+    return {
+        headers,
+        typeHeaders
+    }
 }
--- a/core/datacap-ui/src/views/pages/system/menu/MenuHome.vue
+++ b/core/datacap-ui/src/views/pages/system/menu/MenuHome.vue
@ -47,14 +47,16 @@
    </div>
  </ShadcnCard>

-  <MenuInfo v-if="dataInfoVisible" :is-visible="dataInfoVisible" :info="dataInfo" @close="handlerChangeInfo(false, null)"/>
+  <MenuInfo v-if="dataInfoVisible"
+            :is-visible="dataInfoVisible"
+            :info="dataInfo"
+            @close="handlerChangeInfo(false, null)"/>
 </template>

 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { useI18n } from 'vue-i18n'
-import { createHeaders } from '@/views/pages/system/menu/MenuUtils'
+import { useHeaders } from '@/views/pages/system/menu/MenuUtils'
 import { MenuModel } from '@/model/menu'
 import MenuService from '@/services/menu'
 import MenuInfo from '@/views/pages/system/menu/MenuInfo.vue'
@ -65,7 +67,8 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()
+
    return {
      filter,
      headers
--- a/core/datacap-ui/src/views/pages/system/menu/MenuUtils.ts
+++ b/core/datacap-ui/src/views/pages/system/menu/MenuUtils.ts
@ -1,19 +1,26 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'code', label: i18n.t('common.code') },
-        { key: 'description', label: i18n.t('common.description') },
-        { key: 'group', label: i18n.t('common.group') },
-        { key: 'sorted', label: i18n.t('common.sorted') },
-        { key: 'type', label: i18n.t('common.type') },
-        { key: 'active', label: i18n.t('common.active'), slot: 'active' },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+            { key: 'id', label: t('common.id') },
+            { key: 'name', label: t('common.name') },
+            { key: 'code', label: t('common.code') },
+            { key: 'description', label: t('common.description') },
+            { key: 'group', label: t('common.group') },
+            { key: 'sorted', label: t('common.sorted') },
+            { key: 'type', label: t('common.type') },
+            { key: 'active', label: t('common.active'), slot: 'active' },
+            { key: 'createTime', label: t('common.createTime') },
+            { key: 'updateTime', label: t('common.updateTime') },
+            { key: 'action', label: t('common.action'), slot: 'action' }
+        ]
+    )
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/system/role/RoleHome.vue
+++ b/core/datacap-ui/src/views/pages/system/role/RoleHome.vue
@ -56,8 +56,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { createHeaders } from '@/views/pages/system/role/RoleUtils'
-import { useI18n } from 'vue-i18n'
+import { useHeaders } from '@/views/pages/system/role/RoleUtils'
 import RoleService from '@/services/role'
 import { RoleModel } from '@/model/role'
 import RoleInfo from '@/views/pages/system/role/RoleInfo.vue'
@ -69,7 +68,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/system/role/RoleUtils.ts
+++ b/core/datacap-ui/src/views/pages/system/role/RoleUtils.ts
@ -1,15 +1,22 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'code', label: i18n.t('common.code') },
-        { key: 'description', label: i18n.t('common.description') },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+            { key: 'id', label: t('common.id') },
+            { key: 'name', label: t('common.name') },
+            { key: 'code', label: t('common.code') },
+            { key: 'description', label: t('common.description') },
+            { key: 'createTime', label: t('common.createTime') },
+            { key: 'updateTime', label: t('common.updateTime') },
+            { key: 'action', label: t('common.action'), slot: 'action' }
+        ]
+    )
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/system/schedule/ScheduleHistory.vue
+++ b/core/datacap-ui/src/views/pages/system/schedule/ScheduleHistory.vue
@ -28,8 +28,7 @@
 import { defineComponent } from 'vue'
 import { ScheduleModel } from '@/model/schedule'
 import { FilterModel } from '@/model/filter'
-import { useI18n } from 'vue-i18n'
-import { createHistoryHeaders } from '@/views/pages/system/schedule/ScheduleUtils'
+import { useHeaders } from '@/views/pages/system/schedule/ScheduleUtils'
 import ScheduleService from '@/services/schedule'

 export default defineComponent({
@ -59,7 +58,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHistoryHeaders(useI18n())
+    const { historyHeaders: headers } = useHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/system/schedule/ScheduleHome.vue
+++ b/core/datacap-ui/src/views/pages/system/schedule/ScheduleHome.vue
@ -50,8 +50,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { createHeaders } from './ScheduleUtils'
-import { useI18n } from 'vue-i18n'
+import { useHeaders } from './ScheduleUtils'
 import ScheduleService from '@/services/schedule'
 import ScheduleHistory from '@/views/pages/system/schedule/ScheduleHistory.vue'
 import { ScheduleModel } from '@/model/schedule'
@ -62,7 +61,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/system/schedule/ScheduleUtils.ts
+++ b/core/datacap-ui/src/views/pages/system/schedule/ScheduleUtils.ts
@ -1,43 +1,42 @@
-/**
- * Creates headers for a table using the given internationalization object.
- *
- * @param {any} i18n - the internationalization object used for translating header labels
- * @return {Array} an array of header objects
- */
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'description', label: i18n.t('common.description') },
-        { key: 'expression', label: i18n.t('common.expression') },
-        { key: 'active', label: i18n.t('common.active'), slot: 'active' },
-        { key: 'system', label: i18n.t('common.system'), slot: 'system' },
-        { key: 'type', label: i18n.t('common.type') },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-/**
- * Creates history headers with internationalization support.
- *
- * @param {any} i18n - the internationalization object
- * @return {Array} an array of history headers
- */
-const createHistoryHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'elapsed', label: i18n.t('common.elapsed') },
-        { key: 'state', label: i18n.t('common.state') },
-        { key: 'result', label: i18n.t('common.result') }
-    ]
-}
+export function useHeaders()
+{
+    const { t } = useI18n()

-export {
-    createHeaders,
-    createHistoryHeaders
+    const headers = computed(() => [
+        { key: 'id', label: t('common.id') },
+        { key: 'name', label: t('common.name') },
+        { key: 'description', label: t('common.description') },
+        { key: 'expression', label: t('common.expression') },
+        { key: 'active', label: t('common.active'), slot: 'active' },
+        { key: 'system', label: t('common.system'), slot: 'system' },
+        { key: 'type', label: t('common.type') },
+        { key: 'createTime', label: t('common.createTime') },
+        { key: 'updateTime', label: t('common.updateTime') },
+        { key: 'action', label: t('common.action'), slot: 'action' }
+    ])
+
+    /**
+     * Creates history headers with internationalization support.
+     *
+     * @param {any} i18n - the internationalization object
+     * @return {Array} an array of history headers
+     */
+    const historyHeaders = computed(() => [
+            { key: 'id', label: t('common.id') },
+            { key: 'name', label: t('common.name') },
+            { key: 'createTime', label: t('common.createTime') },
+            { key: 'updateTime', label: t('common.updateTime') },
+            { key: 'elapsed', label: t('common.elapsed') },
+            { key: 'state', label: t('common.state') },
+            { key: 'result', label: t('common.result') }
+        ]
+    )
+
+    return {
+        headers,
+        historyHeaders
+    }
 }
--- a/core/datacap-ui/src/views/pages/system/template/TemplateHome.vue
+++ b/core/datacap-ui/src/views/pages/system/template/TemplateHome.vue
@ -58,8 +58,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
-import { createHeaders } from '@/views/pages/system/template/TemplateUtils'
-import { useI18n } from 'vue-i18n'
+import { useHeaders } from '@/views/pages/system/template/TemplateUtils'
 import TemplateService from '@/services/template'
 import { TemplateModel } from '@/model/template'
 import TemplateInfo from '@/views/pages/system/template/TemplateInfo.vue'
@ -70,7 +69,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const headers = createHeaders(useI18n())
+    const { headers } = useHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/system/template/TemplateUtils.ts
+++ b/core/datacap-ui/src/views/pages/system/template/TemplateUtils.ts
@ -1,16 +1,23 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'name', label: i18n.t('common.name') },
-        { key: 'description', label: i18n.t('common.description') },
-        { key: 'plugin', label: i18n.t('common.plugin'), slot: 'plugin' },
-        { key: 'system', label: i18n.t('common.system'), slot: 'system' },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+            { key: 'id', label: t('common.id') },
+            { key: 'name', label: t('common.name') },
+            { key: 'description', label: t('common.description') },
+            { key: 'plugin', label: t('common.plugin'), slot: 'plugin' },
+            { key: 'system', label: t('common.system'), slot: 'system' },
+            { key: 'createTime', label: t('common.createTime') },
+            { key: 'updateTime', label: t('common.updateTime') },
+            { key: 'action', label: t('common.action'), slot: 'action' }
+        ]
+    )
+
+    return {
+        headers
+    }
 }
--- a/core/datacap-ui/src/views/pages/system/user/UserHome.vue
+++ b/core/datacap-ui/src/views/pages/system/user/UserHome.vue
@ -66,8 +66,7 @@
 import { defineComponent } from 'vue'
 import { FilterModel } from '@/model/filter'
 import UserService from '@/services/user'
-import { useI18n } from 'vue-i18n'
-import { createHeaders } from './UserUtils'
+import { useHeaders } from './UserUtils'
 import { UserModel } from '@/model/user'
 import UserInfo from '@/views/pages/system/user/UserInfo.vue'
 import UserRole from '@/views/pages/system/user/components/UserRole.vue'
@ -78,8 +77,7 @@ export default defineComponent({
  setup()
  {
    const filter: FilterModel = new FilterModel()
-    const i18n = useI18n()
-    const headers = createHeaders(i18n)
+    const { headers } = useHeaders()

    return {
      filter,
--- a/core/datacap-ui/src/views/pages/system/user/UserUtils.ts
+++ b/core/datacap-ui/src/views/pages/system/user/UserUtils.ts
@ -1,14 +1,21 @@
-const createHeaders = (i18n: any) => {
-    return [
-        { key: 'id', label: i18n.t('common.id') },
-        { key: 'username', label: i18n.t('common.username') },
-        { key: 'createTime', label: i18n.t('common.createTime') },
-        { key: 'updateTime', label: i18n.t('common.updateTime') },
-        { key: 'role', label: i18n.t('common.role'), slot: 'role', width: 100 },
-        { key: 'action', label: i18n.t('common.action'), slot: 'action' }
-    ]
-}
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'

-export {
-    createHeaders
+export function useHeaders()
+{
+    const { t } = useI18n()
+
+    const headers = computed(() => [
+            { key: 'id', label: t('common.id') },
+            { key: 'username', label: t('common.username') },
+            { key: 'createTime', label: t('common.createTime') },
+            { key: 'updateTime', label: t('common.updateTime') },
+            { key: 'role', label: t('common.role'), slot: 'role', width: 100 },
+            { key: 'action', label: t('common.action'), slot: 'action' }
+        ]
+    )
+
+    return {
+        headers
+    }
 }