apache
diff --git a/‎dolphinscheduler-ui/src/views/data-quality/rule/index.module.scss‎
Lines changed: 0 additions & 26 deletions b/‎dolphinscheduler-ui/src/views/data-quality/rule/index.module.scss‎
Lines changed: 0 additions & 26 deletions
diff --git a/‎dolphinscheduler-ui/src/views/data-quality/rule/index.tsx‎
Lines changed: 28 additions & 34 deletions b/‎dolphinscheduler-ui/src/views/data-quality/rule/index.tsx‎
Lines changed: 28 additions & 34 deletions
@@ -22,22 +22,18 @@ import {
   NButton,
   NIcon,
   NDataTable,
-  NPagination,
-  NCard
+  NPagination
 } from 'naive-ui'
 import { SearchOutlined } from '@vicons/antd'
 import { useTable } from './use-table'
 import Card from '@/components/card'
-import styles from './index.module.scss'
 import RuleModal from './components/rule-modal'
 
 const TaskResult = defineComponent({
   name: 'rule',
   setup() {
     const { t, variables, getTableData } = useTable()
-
     const showModalRef = ref(false)
-
     const ruleEntryData = ref('')
 
     const requestTableData = () => {
@@ -110,45 +106,43 @@ const TaskResult = defineComponent({
     const { columns } = useTable(viewRuleEntry)
 
     return (
-      <div>
-        <NCard>
+      <NSpace vertical>
+        <Card>
           <NSpace justify='end'>
             <NInput
-                  allowInput={this.trim}
+              allowInput={this.trim}
               v-model={[this.searchVal, 'value']}
               size='small'
               placeholder={t('data_quality.rule.name')}
               clearable
             />
             <NButton size='small' type='primary' onClick={onSearch}>
-              {{
-                icon: () => (
-                  <NIcon>
-                    <SearchOutlined />
-                  </NIcon>
-                )
-              }}
+              <NIcon>
+                <SearchOutlined />
+              </NIcon>
             </NButton>
           </NSpace>
-        </NCard>
-        <Card class={styles['table-card']}>
-          <NDataTable
-            loading={loadingRef}
-            columns={columns}
-            data={this.tableData}
-          />
-          <div class={styles.pagination}>
-            <NPagination
-              v-model:page={this.page}
-              v-model:page-size={this.pageSize}
-              page-count={this.totalPage}
-              show-size-picker
-              page-sizes={[10, 30, 50]}
-              show-quick-jumper
-              onUpdatePage={requestTableData}
-              onUpdatePageSize={onUpdatePageSize}
+        </Card>
+        <Card title={t('menu.rule')}>
+          <NSpace vertical>
+            <NDataTable
+              loading={loadingRef}
+              columns={columns}
+              data={this.tableData}
             />
-          </div>
+            <NSpace justify='center'>
+              <NPagination
+                v-model:page={this.page}
+                v-model:page-size={this.pageSize}
+                page-count={this.totalPage}
+                show-size-picker
+                page-sizes={[10, 30, 50]}
+                show-quick-jumper
+                onUpdatePage={requestTableData}
+                onUpdatePageSize={onUpdatePageSize}
+              />
+            </NSpace>
+          </NSpace>
         </Card>
         {showModalRef && (
           <RuleModal
@@ -158,7 +152,7 @@ const TaskResult = defineComponent({
             data={ruleEntryData}
           />
         )}
-      </div>
+      </NSpace>
     )
   }
 })