[Refactor][UI] Refactor alarm instance manage using NSpace component. (#10799)

dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.module.scss

-/*
- * 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.
- */
-
-.conditions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.conditions-search-input {
-  width: 250px;
-}
-.pagination {
-  margin-top: 20px;
-  justify-content: center;
-}
-.mt-8 {
-  margin-top: 8px;
-}

dolphinscheduler-ui/src/views/security/alarm-instance-manage/index.tsx

@@ -22,16 +22,15 @@ import {
   NIcon,
   NDataTable,
   NPagination,
-  NSpace
+  NSpace,
+  NCard
 } from 'naive-ui'
-import Card from '@/components/card'
 import DetailModal from './detail'
 import { SearchOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
 import { useUserInfo } from './use-userinfo'
 import { useColumns } from './use-columns'
 import { useTable } from './use-table'
-import styles from './index.module.scss'
 import type { IRecord } from './types'
 
 const AlarmInstanceManage = defineComponent({
@@ -109,51 +108,52 @@ const AlarmInstanceManage = defineComponent({
     } = this
 
     return (
-      <>
-        <Card title=''>
+      <NSpace vertical>
+        <NCard size='small'>
           {{
             default: () => (
-              <div class={styles['conditions']}>
+              <NSpace justify='space-between'>
                 {IS_ADMIN && (
-                  <NButton onClick={onCreate} type='primary'>
+                  <NButton onClick={onCreate} type='primary' size='small'>
                     {t('security.alarm_instance.create_alarm_instance')}
                   </NButton>
                 )}
                 <NSpace
-                  class={styles['conditions-search']}
                   justify='end'
                   wrap={false}
                 >
-                  <div class={styles['conditions-search-input']}>
-                    <NInput
-                      v-model={[this.searchVal, 'value']}
-                      placeholder={`${t(
-                        'security.alarm_instance.search_input_tips'
-                      )}`}
-                    />
-                  </div>
-                  <NButton type='primary' onClick={onUpdatedList}>
+                  <NInput
+                    v-model={[this.searchVal, 'value']}
+                    size='small'
+                    placeholder={`${t(
+                      'security.alarm_instance.search_input_tips'
+                    )}`}
+                  />
+                  <NButton type='primary' size='small' onClick={onUpdatedList}>
                     <NIcon>
                       <SearchOutlined />
                     </NIcon>
                   </NButton>
                 </NSpace>
-              </div>
+              </NSpace>
             )
           }}
-        </Card>
-        <Card title='' class={styles['mt-8']}>
-          <NDataTable columns={columns} data={list} loading={loading} striped />
-          <NPagination
-            page={page}
-            page-size={pageSize}
-            item-count={itemCount}
-            show-quick-jumper
-            class={styles['pagination']}
-            on-update:page={changePage}
-            on-update:page-size={changePageSize}
-          />
-        </Card>
+        </NCard>
+        <NCard size='small'>
+          <NSpace vertical>
+            <NDataTable columns={columns} data={list} loading={loading} striped />
+            <NSpace justify='center'>
+              <NPagination
+                page={page}
+                page-size={pageSize}
+                item-count={itemCount}
+                show-quick-jumper
+                on-update:page={changePage}
+                on-update:page-size={changePageSize}
+              />
+            </NSpace>
+          </NSpace>
+        </NCard>
         {IS_ADMIN && (
           <DetailModal
             show={showDetailModal}
@@ -162,7 +162,7 @@ const AlarmInstanceManage = defineComponent({
             onUpdate={onUpdatedList}
           />
         )}
-      </>
+      </NSpace>
     )
   }
 })