From f97a45b8ed62a7806097edc9fc0df81515198252 Mon Sep 17 00:00:00 2001
From: benjobs <benjobs@apache.org>
Date: Wed, 18 Sep 2024 19:37:07 +0800
Subject: [PATCH] [Improve] FE style improvement

---
 .../Application/src/AppDarkModeToggle.vue     |  4 +-
 .../ContextMenu/src/ContextMenu.vue           |  4 +-
 .../src/components/Form/src/BasicForm.vue     |  2 +-
 .../src/components/Page/src/PageFooter.vue    |  4 +-
 .../Table/src/components/HeaderCell.vue       |  2 +-
 .../src/hooks/web/useLockPage.ts              |  9 +++--
 .../src/locales/lang/en/flink/resource.ts     |  2 +
 .../src/locales/lang/zh-CN/flink/resource.ts  |  2 +
 .../src/utils/props.ts                        |  2 +-
 .../src/views/flink/app/View.vue              |  1 -
 .../src/views/resource/upload/View.vue        | 40 +++++++++++--------
 .../src/views/resource/upload/upload.data.ts  | 16 +++-----
 12 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/streampark-console/streampark-console-webapp/src/components/Application/src/AppDarkModeToggle.vue b/streampark-console/streampark-console-webapp/src/components/Application/src/AppDarkModeToggle.vue
index 19ba3b1514..d4e0ce1646 100644
--- a/streampark-console/streampark-console-webapp/src/components/Application/src/AppDarkModeToggle.vue
+++ b/streampark-console/streampark-console-webapp/src/components/Application/src/AppDarkModeToggle.vue
@@ -63,7 +63,9 @@
       height: 18px;
       background-color: #fff;
       border-radius: 50%;
-      transition: transform 0.5s, background-color 0.5s;
+      transition:
+        transform 0.5s,
+        background-color 0.5s;
       will-change: transform;
     }
 
diff --git a/streampark-console/streampark-console-webapp/src/components/ContextMenu/src/ContextMenu.vue b/streampark-console/streampark-console-webapp/src/components/ContextMenu/src/ContextMenu.vue
index e08c25f36b..78cac5c5b6 100644
--- a/streampark-console/streampark-console-webapp/src/components/ContextMenu/src/ContextMenu.vue
+++ b/streampark-console/streampark-console-webapp/src/components/ContextMenu/src/ContextMenu.vue
@@ -179,7 +179,9 @@
     background-color: @component-background;
     border: 1px solid rgb(0 0 0 / 8%);
     border-radius: 0.25rem;
-    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 10%),
+    box-shadow:
+      0 2px 2px 0 rgb(0 0 0 / 14%),
+      0 3px 1px -2px rgb(0 0 0 / 10%),
       0 1px 5px 0 rgb(0 0 0 / 6%);
     background-clip: padding-box;
     user-select: none;
diff --git a/streampark-console/streampark-console-webapp/src/components/Form/src/BasicForm.vue b/streampark-console/streampark-console-webapp/src/components/Form/src/BasicForm.vue
index 1cd7e3809b..e5a9dacf62 100644
--- a/streampark-console/streampark-console-webapp/src/components/Form/src/BasicForm.vue
+++ b/streampark-console/streampark-console-webapp/src/components/Form/src/BasicForm.vue
@@ -113,7 +113,7 @@
       });
 
       const getBindValue = computed(
-        () => ({ ...attrs, ...props, ...unref(getProps) } as Recordable),
+        () => ({ ...attrs, ...props, ...unref(getProps) }) as Recordable,
       );
 
       const getSchema = computed((): FormSchema[] => {
diff --git a/streampark-console/streampark-console-webapp/src/components/Page/src/PageFooter.vue b/streampark-console/streampark-console-webapp/src/components/Page/src/PageFooter.vue
index e89a6ce979..8fdbc8f41a 100644
--- a/streampark-console/streampark-console-webapp/src/components/Page/src/PageFooter.vue
+++ b/streampark-console/streampark-console-webapp/src/components/Page/src/PageFooter.vue
@@ -39,7 +39,9 @@
     line-height: 44px;
     background-color: @component-background;
     border-top: 1px solid @border-color-base;
-    box-shadow: 0 -6px 16px -8px rgb(0 0 0 / 8%), 0 -9px 28px 0 rgb(0 0 0 / 5%),
+    box-shadow:
+      0 -6px 16px -8px rgb(0 0 0 / 8%),
+      0 -9px 28px 0 rgb(0 0 0 / 5%),
       0 -12px 48px 16px rgb(0 0 0 / 3%);
     transition: width 0.2s;
 
diff --git a/streampark-console/streampark-console-webapp/src/components/Table/src/components/HeaderCell.vue b/streampark-console/streampark-console-webapp/src/components/Table/src/components/HeaderCell.vue
index 35c0802696..36ab854c59 100644
--- a/streampark-console/streampark-console-webapp/src/components/Table/src/components/HeaderCell.vue
+++ b/streampark-console/streampark-console-webapp/src/components/Table/src/components/HeaderCell.vue
@@ -22,7 +22,7 @@
     props: {
       column: {
         type: Object as PropType<BasicColumn>,
-        default: () => ({} as BasicColumn),
+        default: () => ({}) as BasicColumn,
       },
     },
     setup(props) {
diff --git a/streampark-console/streampark-console-webapp/src/hooks/web/useLockPage.ts b/streampark-console/streampark-console-webapp/src/hooks/web/useLockPage.ts
index c543be9542..9a66074210 100644
--- a/streampark-console/streampark-console-webapp/src/hooks/web/useLockPage.ts
+++ b/streampark-console/streampark-console-webapp/src/hooks/web/useLockPage.ts
@@ -32,9 +32,12 @@ export function useLockPage() {
     }
     clear();
 
-    timeId = setTimeout(() => {
-      lockPage();
-    }, lockTime * 60 * 1000);
+    timeId = setTimeout(
+      () => {
+        lockPage();
+      },
+      lockTime * 60 * 1000,
+    );
   }
 
   function lockPage(): void {
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts
index 86c78ab71d..9d8c9182fb 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/en/flink/resource.ts
@@ -27,6 +27,7 @@ export default {
   resourceGroup: 'Resource Group',
   groupName: 'Group Name',
   resourceNamePlaceholder: 'Please input resource name',
+  searchByResourceName: 'Search by resource name',
   engineTypePlaceholder: 'Please select compute engine type',
   resourceGroupPlaceholder: 'Please choose resource',
   groupNamePlaceholder: 'Please input the group name',
@@ -46,6 +47,7 @@ export default {
     title: 'Resource List',
     resourceName: 'Resource Name',
     resourceNamePlaceholder: 'Please enter the resource name',
+    searchByResourceName: 'Search by resource name',
     descriptionPlaceholder: 'Please enter description',
     createUser: 'Create User',
     createTime: 'Create Time',
diff --git a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts
index 498e80f56e..eca21be911 100644
--- a/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts
+++ b/streampark-console/streampark-console-webapp/src/locales/lang/zh-CN/flink/resource.ts
@@ -28,6 +28,7 @@ export default {
   groupName: '资源组名称',
   resourceGroupPlaceholder: '请选择组资源',
   resourceNamePlaceholder: '请输入资源名称',
+  searchByResourceName: '根据资源名搜索',
   groupNamePlaceholder: '请输入资源组名称',
   groupNameIsRequiredMessage: '资源组名称必填',
   engineTypePlaceholder: '请选择引擎类型',
@@ -46,6 +47,7 @@ export default {
     title: '资源列表',
     resourceName: '资源名称',
     resourceNamePlaceholder: '输入资源名查询',
+    searchByResourceName: '根据资源名搜索',
     descriptionPlaceholder: '输入描述',
     createUser: '创建者',
     createTime: '创建时间',
diff --git a/streampark-console/streampark-console-webapp/src/utils/props.ts b/streampark-console/streampark-console-webapp/src/utils/props.ts
index 4a15ec465b..368f490f21 100644
--- a/streampark-console/streampark-console-webapp/src/utils/props.ts
+++ b/streampark-console/streampark-console-webapp/src/utils/props.ts
@@ -175,7 +175,7 @@ export const buildProps = <
       : never;
   };
 
-export const definePropType = <T>(val: any) => ({ [wrapperKey]: val } as PropWrapper<T>);
+export const definePropType = <T>(val: any) => ({ [wrapperKey]: val }) as PropWrapper<T>;
 
 export const keyOf = <T extends Object>(arr: T) => Object.keys(arr) as Array<keyof T>;
 export const mutable = <T extends readonly any[] | Record<string, unknown>>(val: T) =>
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue
index f115ca4693..68c032cb4e 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/View.vue
@@ -57,7 +57,6 @@
   import { useAppTableColumns } from './hooks/useAppTableColumns';
   import AppTableResize from './components/AppResize.vue';
   import { useRouter } from 'vue-router';
-  import Icon from '/@/components/Icon';
 
   defineOptions({
     name: 'AppView',
diff --git a/streampark-console/streampark-console-webapp/src/views/resource/upload/View.vue b/streampark-console/streampark-console-webapp/src/views/resource/upload/View.vue
index 01da91ebc8..75df502a92 100644
--- a/streampark-console/streampark-console-webapp/src/views/resource/upload/View.vue
+++ b/streampark-console/streampark-console-webapp/src/views/resource/upload/View.vue
@@ -15,18 +15,20 @@
   limitations under the License.
 -->
 <template>
-  <div>
-    <BasicTable @register="registerTable">
-      <template #toolbar>
-        <a-button
-          id="e2e-upload-create-btn"
-          type="primary"
-          @click="handleCreate"
-          v-auth="'resource:add'"
-        >
-          <Icon icon="ant-design:plus-outlined" />
-          {{ t('common.add') }}
-        </a-button>
+  <PageWrapper contentFullHeight fixed-height>
+    <BasicTable @register="registerTable" class="flex flex-col">
+      <template #form-formFooter>
+        <Col :span="4" :offset="14" class="text-right">
+          <a-button
+            id="e2e-upload-create-btn"
+            type="primary"
+            @click="handleCreate"
+            v-auth="'resource:add'"
+          >
+            <Icon icon="ant-design:plus-outlined" />
+            {{ t('common.add') }}
+          </a-button>
+        </Col>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.dataIndex === 'engineType'">
@@ -111,7 +113,7 @@
       @register="registerDrawer"
       @success="handleSuccess"
     />
-  </div>
+  </PageWrapper>
 </template>
 <script lang="ts">
   export default defineComponent({
@@ -133,7 +135,7 @@
     fetchResourceList,
     fetchTeamResource,
   } from '/@/api/resource/upload';
-  import { Tag } from 'ant-design-vue';
+  import { Col, Tag } from 'ant-design-vue';
   import SvgIcon from '/@/components/Icon/src/SvgIcon.vue';
 
   import flinkAppSvg from '/@/assets/icons/flink2.svg';
@@ -143,18 +145,22 @@
   import udxfSvg from '/@/assets/icons/fx.svg';
   import jarSvg from '/@/assets/icons/jar.svg';
   import groupSvg from '/@/assets/icons/group.svg';
+  import { PageWrapper } from '/@/components/Page';
 
   const teamResource = ref<Array<any>>([]);
   const [registerDrawer, { openDrawer }] = useDrawer();
   const { createMessage } = useMessage();
   const { t } = useI18n();
   const [registerTable, { reload }] = useTable({
-    title: t('flink.resource.table.title'),
     api: fetchResourceList,
     columns,
     formConfig: {
-      baseColProps: { style: { paddingRight: '30px' } },
       schemas: searchFormSchema,
+      rowProps: {
+        gutter: 14,
+      },
+      submitOnChange: true,
+      showActionButtonGroup: false,
     },
     sortFn: (sortInfo: SorterResult) => {
       const { field, order } = sortInfo;
@@ -172,7 +178,7 @@
     rowKey: 'id',
     pagination: true,
     useSearchForm: true,
-    showTableSetting: true,
+    showTableSetting: false,
     showIndexColumn: false,
     canResize: false,
     actionColumn: {
diff --git a/streampark-console/streampark-console-webapp/src/views/resource/upload/upload.data.ts b/streampark-console/streampark-console-webapp/src/views/resource/upload/upload.data.ts
index 8e273694ec..ae4b0250ab 100644
--- a/streampark-console/streampark-console-webapp/src/views/resource/upload/upload.data.ts
+++ b/streampark-console/streampark-console-webapp/src/views/resource/upload/upload.data.ts
@@ -64,16 +64,12 @@ export const columns: BasicColumn[] = [
 export const searchFormSchema: FormSchema[] = [
   {
     field: 'resourceName',
-    label: t('flink.resource.table.resourceName'),
+    label: '',
     component: 'Input',
-    componentProps: { placeholder: t('flink.resource.table.resourceNamePlaceholder') },
-    colProps: { span: 8 },
-  },
-  {
-    field: 'description',
-    label: t('common.description'),
-    component: 'Input',
-    componentProps: { placeholder: t('flink.resource.table.descriptionPlaceholder') },
-    colProps: { span: 8 },
+    componentProps: {
+      placeholder: t('flink.resource.table.searchByResourceName'),
+      allowClear: true,
+    },
+    colProps: { span: 6 },
   },
 ];