You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampark.apache.org by be...@apache.org on 2022/11/12 09:56:20 UTC
[incubator-streampark] branch dev updated: [improve] Table maximized, modifying table style (#2010)
This is an automated email from the ASF dual-hosted git repository.
benjobs pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampark.git
The following commit(s) were added to refs/heads/dev by this push:
new 78f0ae94e [improve] Table maximized, modifying table style (#2010)
78f0ae94e is described below
commit 78f0ae94e22250f8fe8b0fcf82a15c2249eb626c
Author: WSZ <12...@qq.com>
AuthorDate: Sat Nov 12 17:56:14 2022 +0800
[improve] Table maximized, modifying table style (#2010)
* [improve] Table maximized, modifying table style
---
.../build/generate/generateModifyVars.ts | 14 ++++----
.../src/components/Page/src/PageWrapper.vue | 1 +
.../src/components/Table/src/BasicTable.vue | 19 ++++++++--
.../src/components/settings/FullScreenSetting.vue | 13 ++++---
.../components/Table/src/hooks/useTableContext.ts | 1 +
.../src/design/index.less | 6 ----
.../src/views/flink/app/View.vue | 2 +-
.../src/views/flink/app/components/FlinkSql.vue | 2 +-
.../src/views/flink/app/hooks/useApp.tsx | 4 ++-
.../flink/app/hooks/useCreateAndEditSchema.ts | 40 ++++++++++++----------
.../src/views/flink/app/hooks/useCreateSchema.ts | 14 ++++----
.../src/views/flink/app/styles/Add.less | 8 +++--
.../src/views/flink/app/styles/View.less | 6 ++--
13 files changed, 79 insertions(+), 51 deletions(-)
diff --git a/streampark-console/streampark-console-webapp/build/generate/generateModifyVars.ts b/streampark-console/streampark-console-webapp/build/generate/generateModifyVars.ts
index 3a1734e3f..c899f2646 100644
--- a/streampark-console/streampark-console-webapp/build/generate/generateModifyVars.ts
+++ b/streampark-console/streampark-console-webapp/build/generate/generateModifyVars.ts
@@ -41,13 +41,15 @@ export function generateModifyVars(dark = false) {
...primaryColorObj,
'info-color': primary,
'processing-color': primary,
- 'success-color': '#55D187', // Success color
- 'error-color': '#ED6F6F', // False color
- 'warning-color': '#EFBD47', // Warning color
- //'border-color-base': '#EEEEEE',
+ 'success-color': '#31CE36', // Success color
+ 'error-color': '#F25961', // False color
+ 'warning-color': '#FFAD46', // Warning color
+ 'border-color-base': '#ebecec',
'font-size-base': '14px', // Main font size
- 'border-radius-base': '2px', // Component/float fillet
+ 'border-radius-base': '4px',
+ 'border-radius-sm': '2px',
'link-color': primary, // Link color
- 'app-content-background': '#fafafa', // Link color
+ 'app-content-background': '#f9fafc', // Link color
+ 'shadow-color': '#e4e8f0', // Link color
};
}
diff --git a/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue b/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue
index c5b3dc329..d0043db42 100644
--- a/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue
+++ b/streampark-console/streampark-console-webapp/src/components/Page/src/PageWrapper.vue
@@ -186,6 +186,7 @@
.@{prefix-cls}-content {
margin: 16px;
+ border-radius: @border-radius-base;
}
.ant-page-header {
diff --git a/streampark-console/streampark-console-webapp/src/components/Table/src/BasicTable.vue b/streampark-console/streampark-console-webapp/src/components/Table/src/BasicTable.vue
index a75ab62eb..344b01abb 100644
--- a/streampark-console/streampark-console-webapp/src/components/Table/src/BasicTable.vue
+++ b/streampark-console/streampark-console-webapp/src/components/Table/src/BasicTable.vue
@@ -111,6 +111,7 @@
],
setup(props, { attrs, emit, slots, expose }) {
const tableElRef = ref(null);
+ const tableFullScreen = ref(false);
const tableData = ref<Recordable[]>([]);
const wrapRef = ref(null);
@@ -277,6 +278,8 @@
prefixCls,
attrs.class,
{
+ ['box-content__full']: tableFullScreen.value,
+ ['!px-10px']: tableFullScreen.value,
[`${prefixCls}-form-container`]: values.useSearchForm,
[`${prefixCls}--inset`]: values.inset,
},
@@ -332,7 +335,7 @@
return unref(getBindValues).size as SizeType;
},
};
- createTableContext({ ...tableAction, wrapRef, getBindValues });
+ createTableContext({ ...tableAction, wrapRef, tableFullScreen, getBindValues });
expose(tableAction);
@@ -365,11 +368,21 @@
@prefix-cls: ~'@{namespace}-basic-table';
+ .table-radius {
+ box-shadow: 0 2px 3px #e4e8f0;
+ border-radius: 5px;
+ }
+
[data-theme='dark'] {
.ant-table-tbody > tr:hover.ant-table-row-selected > td,
.ant-table-tbody > tr.ant-table-row-selected td {
background-color: #262626;
}
+
+ .ant-table-wrapper,
+ .ant-form {
+ box-shadow: 0 2px 3px #262626 !important;
+ }
}
.@{prefix-cls} {
@@ -390,6 +403,7 @@
margin-bottom: 16px;
background-color: @component-background;
border-radius: 2px;
+ .table-radius;
}
}
@@ -398,9 +412,10 @@
}
.ant-table-wrapper {
- padding: 6px;
+ padding: 10px;
background-color: @component-background;
border-radius: 2px;
+ .table-radius;
.ant-table-title {
min-height: 40px;
diff --git a/streampark-console/streampark-console-webapp/src/components/Table/src/components/settings/FullScreenSetting.vue b/streampark-console/streampark-console-webapp/src/components/Table/src/components/settings/FullScreenSetting.vue
index fc9fc13e8..a83ec00a6 100644
--- a/streampark-console/streampark-console-webapp/src/components/Table/src/components/settings/FullScreenSetting.vue
+++ b/streampark-console/streampark-console-webapp/src/components/Table/src/components/settings/FullScreenSetting.vue
@@ -24,10 +24,9 @@
</Tooltip>
</template>
<script lang="ts">
- import { defineComponent } from 'vue';
+ import { computed, defineComponent } from 'vue';
import { Tooltip } from 'ant-design-vue';
import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
- import { useFullscreen } from '@vueuse/core';
import { useI18n } from '/@/hooks/web/useI18n';
import { useTableContext } from '../../hooks/useTableContext';
@@ -42,8 +41,14 @@
setup() {
const table = useTableContext();
const { t } = useI18n();
- const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
-
+ // const { toggle, isFullscreen } = useFullscreen(table.wrapRef);
+ const isFullscreen = computed(() => {
+ return table.tableFullScreen.value;
+ });
+ console.log('isFullscreen', isFullscreen);
+ function toggle() {
+ table.tableFullScreen.value = !isFullscreen.value;
+ }
return {
toggle,
isFullscreen,
diff --git a/streampark-console/streampark-console-webapp/src/components/Table/src/hooks/useTableContext.ts b/streampark-console/streampark-console-webapp/src/components/Table/src/hooks/useTableContext.ts
index c3ad99119..17cbcca3f 100644
--- a/streampark-console/streampark-console-webapp/src/components/Table/src/hooks/useTableContext.ts
+++ b/streampark-console/streampark-console-webapp/src/components/Table/src/hooks/useTableContext.ts
@@ -22,6 +22,7 @@ const key = Symbol('basic-table');
type Instance = TableActionType & {
wrapRef: Ref<Nullable<HTMLElement>>;
+ tableFullScreen: Ref<boolean>;
getBindValues: ComputedRef<Recordable>;
};
diff --git a/streampark-console/streampark-console-webapp/src/design/index.less b/streampark-console/streampark-console-webapp/src/design/index.less
index 36269b3af..e97027a51 100644
--- a/streampark-console/streampark-console-webapp/src/design/index.less
+++ b/streampark-console/streampark-console-webapp/src/design/index.less
@@ -101,9 +101,3 @@ span {
font-size: 18px;
font-weight: bold;
}
-
-*,
-::before,
-::after {
- border-color: @border-color-base !important;
-}
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 1767cc5f3..e5b5916ee 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
@@ -182,7 +182,7 @@
<template>
<PageWrapper contentFullHeight>
<AppDashboard ref="appDashboardRef" />
- <BasicTable @register="registerTable" class="app_list !px-0 mt-20px" :formConfig="formConfig">
+ <BasicTable @register="registerTable" class="app_list !px-0 pt-20px" :formConfig="formConfig">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 'jobName'">
<span class="app_type app_jar" v-if="record['jobType'] === 1"> JAR </span>
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue
index d0bcebf2b..629f94b31 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/FlinkSql.vue
@@ -187,7 +187,7 @@
<template>
<div style="height: 550px" class="w-full" :class="fullContentClass">
<div
- class="full-content-tool flex justify-between px-20px border-solid border-b pb-10px mb-10px"
+ class="full-content-tool flex justify-between px-20px pb-10px mb-10px"
v-if="fullScreenStatus"
>
<div class="flex items-center">
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useApp.tsx b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useApp.tsx
index 4c178633a..107c2d6bc 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useApp.tsx
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useApp.tsx
@@ -63,7 +63,9 @@ export const useFlinkApplication = (openStartModal: Fn) => {
if (!data.data) {
Swal.fire(
'Failed',
- t('flink.app.launch.launchFail') + '' + (data.message || '').replaceAll(/\[StreamPark]/g, ''),
+ t('flink.app.launch.launchFail') +
+ '' +
+ (data.message || '').replaceAll(/\[StreamPark]/g, ''),
'error',
);
} else {
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts
index 4c5975a0c..10c77daf0 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateAndEditSchema.ts
@@ -205,7 +205,9 @@ export const useCreateAndEditSchema = (
fieldNames: { label: 'flinkName', value: 'id', options: 'options' },
onChange: (value) => handleFlinkVersion(value),
},
- rules: [{ required: true, message: t('flink.app.addAppTips.flinkVersionIsRequiredMessage') }],
+ rules: [
+ { required: true, message: t('flink.app.addAppTips.flinkVersionIsRequiredMessage') },
+ ],
},
{
field: 'flinkClusterId',
@@ -264,7 +266,12 @@ export const useCreateAndEditSchema = (
placeholder: t('flink.app.addAppTips.kubernetesClusterIdPlaceholder'),
options: getExecutionCluster(5, 'clusterId'),
},
- rules: [{ required: true, message: t('flink.app.addAppTips.kubernetesClusterIdIsRequiredMessage') }],
+ rules: [
+ {
+ required: true,
+ message: t('flink.app.addAppTips.kubernetesClusterIdIsRequiredMessage'),
+ },
+ ],
},
{
field: 'flinkImage',
@@ -273,8 +280,7 @@ export const useCreateAndEditSchema = (
ifShow: ({ values }) => values.executionMode == ExecModeEnum.KUBERNETES_APPLICATION,
render: ({ model, field }) =>
renderInputDropdown(model, field, {
- placeholder:
- t('flink.app.addAppTips.flinkImagePlaceholder'),
+ placeholder: t('flink.app.addAppTips.flinkImagePlaceholder'),
options: unref(historyRecord)?.k8sSessionClusterId || [],
}),
rules: [{ required: true, message: t('flink.app.addAppTips.flinkImageIsRequiredMessage') }],
@@ -304,21 +310,13 @@ export const useCreateAndEditSchema = (
case 0:
return Promise.resolve();
case 1:
- return Promise.reject(
- t('flink.app.addAppTips.appNameNotUniqueMessage'),
- );
+ return Promise.reject(t('flink.app.addAppTips.appNameNotUniqueMessage'));
case 2:
- return Promise.reject(
- t('flink.app.addAppTips.appNameExistsInYarnMessage'),
- );
+ return Promise.reject(t('flink.app.addAppTips.appNameExistsInYarnMessage'));
case 3:
- return Promise.reject(
- t('flink.app.addAppTips.appNameExistsInK8sMessage'),
- );
+ return Promise.reject(t('flink.app.addAppTips.appNameExistsInK8sMessage'));
default:
- return Promise.reject(
- t('flink.app.addAppTips.appNameNotValid'),
- );
+ return Promise.reject(t('flink.app.addAppTips.appNameNotValid'));
}
}
}
@@ -367,7 +365,10 @@ export const useCreateAndEditSchema = (
field: 'slot',
label: t('flink.app.dashboard.taskSlots'),
component: 'InputNumber',
- componentProps: { placeholder: t('flink.app.addAppTips.slotsOfPerTaskManagerPlaceholder'), ...commonInputNum },
+ componentProps: {
+ placeholder: t('flink.app.addAppTips.slotsOfPerTaskManagerPlaceholder'),
+ ...commonInputNum,
+ },
},
{
field: 'restartSize',
@@ -375,7 +376,10 @@ export const useCreateAndEditSchema = (
ifShow: ({ values }) =>
edit?.mode == 'flink' ? true : !isK8sExecMode(values.executionMode),
component: 'InputNumber',
- componentProps: { placeholder: t('flink.app.addAppTips.restartSizePlaceholder'), ...commonInputNum },
+ componentProps: {
+ placeholder: t('flink.app.addAppTips.restartSizePlaceholder'),
+ ...commonInputNum,
+ },
},
{
field: 'alertId',
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts
index 4738ce307..4cbdae54a 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useCreateSchema.ts
@@ -76,7 +76,7 @@ export const useCreateSchema = (dependencyRef: Ref) => {
if (value) {
const isProp = value.endsWith('.properties');
const isYaml = value.endsWith('.yaml') || value.endsWith('.yml');
- const isConf = value.endsWith('.conf')
+ const isConf = value.endsWith('.conf');
if (!isProp && !isYaml && !isConf) {
return Promise.reject('The configuration file must be (.properties|.yaml|.yml |.conf)');
} else {
@@ -106,7 +106,9 @@ export const useCreateSchema = (dependencyRef: Ref) => {
};
},
defaultValue: 'sql',
- rules: [{ required: true, message: t('flink.app.addAppTips.developmentModeIsRequiredMessage') }],
+ rules: [
+ { required: true, message: t('flink.app.addAppTips.developmentModeIsRequiredMessage') },
+ ],
},
{
field: 'executionMode',
@@ -129,9 +131,7 @@ export const useCreateSchema = (dependencyRef: Ref) => {
if (res) {
return Promise.resolve();
} else {
- return Promise.reject(
- t('flink.app.addAppTips.hadoopEnvInitMessage'),
- );
+ return Promise.reject(t('flink.app.addAppTips.hadoopEnvInitMessage'));
}
}
return Promise.resolve();
@@ -238,7 +238,9 @@ export const useCreateSchema = (dependencyRef: Ref) => {
};
},
ifShow: ({ values }) => values?.jobType !== 'sql' && values?.resourceFrom !== 'upload',
- dynamicRules: () => [{ required: true, message: t('flink.app.addAppTips.appTypeIsRequiredMessage') }],
+ dynamicRules: () => [
+ { required: true, message: t('flink.app.addAppTips.appTypeIsRequiredMessage') },
+ ],
},
{
field: 'jar',
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/styles/Add.less b/streampark-console/streampark-console-webapp/src/views/flink/app/styles/Add.less
index d8cc44cd7..2010634e1 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/styles/Add.less
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/styles/Add.less
@@ -54,7 +54,6 @@
}
.app_controller {
-
.sql-keyword {
color: red;
}
@@ -136,7 +135,6 @@
.app_controller,
.bigScreen-sql-model {
-
.format-sql {
color: dimgrey;
z-index: 99;
@@ -266,7 +264,7 @@
}
}
-[data-theme="dark"] {
+[data-theme='dark'] {
.app_controller .icon-close {
color: #ffffff73;
}
@@ -291,3 +289,7 @@
margin-bottom: 0 !important;
}
}
+
+.full-content-tool {
+ border-bottom: 1px solid @border-color-base;
+}
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/styles/View.less b/streampark-console/streampark-console-webapp/src/views/flink/app/styles/View.less
index ec23bd1bc..393c23fbc 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/styles/View.less
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/styles/View.less
@@ -47,8 +47,9 @@
list-style: none;
font-feature-settings: 'tnum';
position: relative;
- border-radius: 2px;
+ border-radius: @border-radius-base;
transition: all 0.3s;
+ box-shadow: 0 2px 3px @shadow-color;
.ant-divider-horizontal {
margin: 10px 0;
@@ -81,7 +82,6 @@
}
.app_list {
-
.app_type {
display: inline-block;
text-align: center;
@@ -166,6 +166,6 @@
}
}
-[data-theme="dark"] .app_list .app_sql {
+[data-theme='dark'] .app_list .app_sql {
color: #f4f5f6;
}