[Refactor][UI] Refactor rule manage using NSpace component. (#11069)

dolphinscheduler-ui/src/views/data-quality/rule/index.module.scss

@@ -1,26 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.table-card {
-  margin-top: 8px;
-
-  .pagination {
-    margin-top: 20px;
-    display: flex;
-    justify-content: center;
-  }
-}

dolphinscheduler-ui/src/views/data-quality/rule/index.tsx

@@ -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,8 +106,8 @@ const TaskResult = defineComponent({
     const { columns } = useTable(viewRuleEntry)
 
     return (
-      <div>
-        <NCard>
+      <NSpace vertical>
+        <Card>
           <NSpace justify='end'>
             <NInput
               allowInput={this.trim}
@@ -121,23 +117,20 @@ const TaskResult = defineComponent({
               clearable
             />
             <NButton size='small' type='primary' onClick={onSearch}>
-              {{
-                icon: () => (
               <NIcon>
                 <SearchOutlined />
               </NIcon>
-                )
-              }}
             </NButton>
           </NSpace>
-        </NCard>
-        <Card class={styles['table-card']}>
+        </Card>
+        <Card title={t('menu.rule')}>
+          <NSpace vertical>
             <NDataTable
               loading={loadingRef}
               columns={columns}
               data={this.tableData}
             />
-          <div class={styles.pagination}>
+            <NSpace justify='center'>
               <NPagination
                 v-model:page={this.page}
                 v-model:page-size={this.pageSize}
@@ -148,7 +141,8 @@ const TaskResult = defineComponent({
                 onUpdatePage={requestTableData}
                 onUpdatePageSize={onUpdatePageSize}
               />
-          </div>
+            </NSpace>
+          </NSpace>
         </Card>
         {showModalRef && (
           <RuleModal
@@ -158,7 +152,7 @@ const TaskResult = defineComponent({
             data={ruleEntryData}
           />
         )}
-      </div>
+      </NSpace>
     )
   }
 })