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/17 13:34:11 UTC
[incubator-streampark] branch dev updated: [refactor] Remove redundant files and fix application submit loading bug (#2044)
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 7bcf74ef9 [refactor] Remove redundant files and fix application submit loading bug (#2044)
7bcf74ef9 is described below
commit 7bcf74ef9bc0268d6ecb1b1ce9b78f2b628097e4
Author: WSZ <wa...@outlook.com>
AuthorDate: Thu Nov 17 21:34:04 2022 +0800
[refactor] Remove redundant files and fix application submit loading bug (#2044)
* [refactor] Remove redundant files
* [fix] upload job jar
* [fix]: edit loading bug
---
.../build/vite/plugin/index.ts | 8 -
.../streampark-console-webapp/package.json | 3 -
.../src/components/Application/index.ts | 2 -
.../Application/src/search/AppSearch.vue | 49 --
.../Application/src/search/AppSearchFooter.vue | 72 ---
.../Application/src/search/AppSearchKeyItem.vue | 27 -
.../Application/src/search/AppSearchModal.vue | 283 -----------
.../Application/src/search/useMenuSearch.ts | 182 -------
.../src/components/CardList/index.ts | 20 -
.../src/components/CardList/src/CardList.vue | 193 -------
.../src/components/CardList/src/data.ts | 41 --
.../src/components/ClickOutSide/index.ts | 20 -
.../components/ClickOutSide/src/ClickOutSide.vue | 35 --
.../src/components/CountDown/index.ts | 22 -
.../src/components/CountDown/src/CountButton.vue | 78 ---
.../components/CountDown/src/CountdownInput.vue | 70 ---
.../src/components/CountDown/src/useCountdown.ts | 67 ---
.../src/components/Form/src/componentMap.ts | 6 -
.../src/components/Form/src/types/index.ts | 1 -
.../src/components/Preview/index.ts | 18 -
.../src/components/Preview/src/Functional.vue | 560 ---------------------
.../src/components/Preview/src/Preview.vue | 110 ----
.../src/components/Preview/src/functional.ts | 33 --
.../src/components/Preview/src/typing.ts | 65 ---
.../src/components/StrengthMeter/index.ts | 20 -
.../components/StrengthMeter/src/StrengthMeter.vue | 158 ------
.../src/components/Time/index.ts | 20 -
.../src/components/Time/src/Time.vue | 124 -----
.../src/components/Upload/index.ts | 20 -
.../src/components/Upload/src/BasicUpload.vue | 137 -----
.../src/components/Upload/src/FileList.vue | 120 -----
.../src/components/Upload/src/ThumbUrl.vue | 45 --
.../src/components/Upload/src/UploadModal.vue | 327 ------------
.../components/Upload/src/UploadPreviewModal.vue | 115 -----
.../src/components/Upload/src/data.tsx | 164 ------
.../src/components/Upload/src/helper.ts | 43 --
.../src/components/Upload/src/props.ts | 97 ----
.../src/components/Upload/src/typing.ts | 70 ---
.../src/components/Upload/src/useUpload.ts | 76 ---
.../src/components/VirtualScroll/index.ts | 20 -
.../components/VirtualScroll/src/VirtualScroll.vue | 206 --------
.../src/directives/repeatClick.ts | 47 --
.../src/directives/ripple/index.less | 37 --
.../src/directives/ripple/index.ts | 207 --------
.../src/hooks/web/useMessage.tsx | 2 +-
.../src/layouts/default/feature/index.vue | 2 -
.../src/layouts/default/header/index.vue | 10 -
.../src/layouts/default/setting/SettingDrawer.tsx | 443 ----------------
.../default/setting/components/InputNumberItem.vue | 72 ---
.../default/setting/components/SelectItem.vue | 91 ----
.../default/setting/components/SettingFooter.vue | 115 -----
.../default/setting/components/SwitchItem.vue | 82 ---
.../setting/components/ThemeColorPicker.vue | 104 ----
.../default/setting/components/TypePicker.vue | 194 -------
.../layouts/default/setting/components/index.ts | 24 -
.../src/layouts/default/setting/enum.ts | 172 -------
.../src/layouts/default/setting/handler.ts | 190 -------
.../src/layouts/default/setting/index.vue | 42 --
.../src/layouts/iframe/index.vue | 45 --
.../src/layouts/iframe/useFrameKeepAlive.ts | 75 ---
.../src/layouts/page/index.vue | 4 -
.../src/router/helper/routeHelper.ts | 2 -
.../src/views/base/iframe/FrameBlank.vue | 25 -
.../src/views/base/iframe/index.vue | 138 -----
.../src/views/base/login/LoginForm.vue | 2 +-
.../src/views/flink/app/Add.vue | 3 +-
.../src/views/flink/app/EditFlink.vue | 3 +-
.../src/views/flink/app/EditStreamPark.vue | 8 +-
.../src/views/flink/app/View.vue | 8 +-
.../views/flink/app/components/UploadJobJar.vue | 6 +-
.../src/views/flink/app/hooks/useApp.tsx | 2 +-
.../views/flink/app/hooks/useEditFlinkSchema.ts | 4 +-
.../src/views/flink/app/hooks/useEditStreamPark.ts | 4 +-
.../streampark-console-webapp/vite.config.ts | 2 +-
74 files changed, 24 insertions(+), 5868 deletions(-)
diff --git a/streampark-console/streampark-console-webapp/build/vite/plugin/index.ts b/streampark-console/streampark-console-webapp/build/vite/plugin/index.ts
index 6cdba9364..ed322ac03 100644
--- a/streampark-console/streampark-console-webapp/build/vite/plugin/index.ts
+++ b/streampark-console/streampark-console-webapp/build/vite/plugin/index.ts
@@ -20,8 +20,6 @@ import vueJsx from '@vitejs/plugin-vue-jsx';
import legacy from '@vitejs/plugin-legacy';
import purgeIcons from 'vite-plugin-purge-icons';
import windiCSS from 'vite-plugin-windicss';
-import VitePluginCertificate from 'vite-plugin-mkcert';
-import vueSetupExtend from 'vite-plugin-vue-setup-extend';
import { configHtmlPlugin } from './html';
import { configCompressPlugin } from './compress';
import { configStyleImportPlugin } from './styleImport';
@@ -43,12 +41,6 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
vue(),
// have to
vueJsx(),
- // support name
- vueSetupExtend(),
-
- VitePluginCertificate({
- source: 'coding',
- }),
];
// vite-plugin-windicss
diff --git a/streampark-console/streampark-console-webapp/package.json b/streampark-console/streampark-console-webapp/package.json
index df181e67e..5a2cb4c2a 100644
--- a/streampark-console/streampark-console-webapp/package.json
+++ b/streampark-console/streampark-console-webapp/package.json
@@ -94,7 +94,6 @@
"fs-extra": "^10.1.0",
"less": "^4.1.2",
"lint-staged": "12.3.7",
- "npm-run-all": "^4.1.5",
"picocolors": "^1.0.0",
"postcss": "^8.4.18",
"postcss-html": "^1.5.0",
@@ -115,12 +114,10 @@
"vite-plugin-compression": "^0.5.1",
"vite-plugin-html": "^3.2.0",
"vite-plugin-imagemin": "^0.6.1",
- "vite-plugin-mkcert": "^1.10.1",
"vite-plugin-purge-icons": "^0.9.1",
"vite-plugin-style-import": "^2.0.0",
"vite-plugin-svg-icons": "^2.0.1",
"vite-plugin-theme": "^0.8.6",
- "vite-plugin-vue-setup-extend": "^0.4.0",
"vite-plugin-windicss": "^1.8.8",
"vue-eslint-parser": "^9.1.0",
"vue-tsc": "^1.0.9"
diff --git a/streampark-console/streampark-console-webapp/src/components/Application/index.ts b/streampark-console/streampark-console-webapp/src/components/Application/index.ts
index 0095a4094..c319fa805 100644
--- a/streampark-console/streampark-console-webapp/src/components/Application/index.ts
+++ b/streampark-console/streampark-console-webapp/src/components/Application/index.ts
@@ -18,7 +18,6 @@ import { withInstall } from '/@/utils';
import appLogo from './src/AppLogo.vue';
import appProvider from './src/AppProvider.vue';
-import appSearch from './src/search/AppSearch.vue';
import appLocalePicker from './src/AppLocalePicker.vue';
import appDarkModeToggle from './src/AppDarkModeToggle.vue';
@@ -26,6 +25,5 @@ export { useAppProviderContext } from './src/useAppContext';
export const AppLogo = withInstall(appLogo);
export const AppProvider = withInstall(appProvider);
-export const AppSearch = withInstall(appSearch);
export const AppLocalePicker = withInstall(appLocalePicker);
export const AppDarkModeToggle = withInstall(appDarkModeToggle);
diff --git a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearch.vue b/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearch.vue
deleted file mode 100644
index 60d523d5a..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearch.vue
+++ /dev/null
@@ -1,49 +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
-
- https://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.
--->
-<script lang="tsx">
- import { defineComponent, ref, unref } from 'vue';
- import { Tooltip } from 'ant-design-vue';
- import { SearchOutlined } from '@ant-design/icons-vue';
- import AppSearchModal from './AppSearchModal.vue';
- import { useI18n } from '/@/hooks/web/useI18n';
-
- export default defineComponent({
- name: 'AppSearch',
- setup() {
- const showModal = ref(false);
- const { t } = useI18n();
-
- function changeModal(show: boolean) {
- showModal.value = show;
- }
-
- return () => {
- return (
- <div class="p-1" onClick={changeModal.bind(null, true)}>
- <Tooltip>
- {{
- title: () => t('common.searchText'),
- default: () => <SearchOutlined />,
- }}
- </Tooltip>
- <AppSearchModal onClose={changeModal.bind(null, false)} visible={unref(showModal)} />
- </div>
- );
- };
- },
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchFooter.vue b/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchFooter.vue
deleted file mode 100644
index 9a8ec183b..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchFooter.vue
+++ /dev/null
@@ -1,72 +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
-
- https://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.
--->
-<template>
- <div :class="`${prefixCls}`">
- <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
- <span>{{ t('component.app.toSearch') }}</span>
- <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
- <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-down-outline" />
- <span>{{ t('component.app.toNavigate') }}</span>
- <AppSearchKeyItem :class="`${prefixCls}-item`" icon="mdi:keyboard-esc" />
- <span>{{ t('common.closeText') }}</span>
- </div>
-</template>
-
-<script lang="ts" setup>
- import AppSearchKeyItem from './AppSearchKeyItem.vue';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useI18n } from '/@/hooks/web/useI18n';
- const { prefixCls } = useDesign('app-search-footer');
- const { t } = useI18n();
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-app-search-footer';
-
- .@{prefix-cls} {
- position: relative;
- display: flex;
- height: 44px;
- padding: 0 16px;
- font-size: 12px;
- color: #666;
- background-color: @component-background;
- border-top: 1px solid @border-color-base;
- border-radius: 0 0 16px 16px;
- align-items: center;
- flex-shrink: 0;
-
- &-item {
- display: flex;
- width: 20px;
- height: 18px;
- padding-bottom: 2px;
- margin-right: 0.4em;
- background-color: linear-gradient(-225deg, #d5dbe4, #f8f8f8);
- border-radius: 2px;
- box-shadow: inset 0 -2px 0 0 #cdcde6, inset 0 0 1px 1px #fff,
- 0 1px 2px 1px rgb(30 35 90 / 40%);
- align-items: center;
- justify-content: center;
-
- &:nth-child(2),
- &:nth-child(3),
- &:nth-child(6) {
- margin-left: 14px;
- }
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchKeyItem.vue b/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchKeyItem.vue
deleted file mode 100644
index 5d3d18199..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchKeyItem.vue
+++ /dev/null
@@ -1,27 +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
-
- https://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.
--->
-<template>
- <span :class="$attrs.class">
- <Icon :icon="icon" />
- </span>
-</template>
-<script lang="ts" setup>
- import { Icon } from '/@/components/Icon';
- defineProps({
- icon: String,
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchModal.vue b/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchModal.vue
deleted file mode 100644
index 6fd8a2638..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Application/src/search/AppSearchModal.vue
+++ /dev/null
@@ -1,283 +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
-
- https://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.
--->
-<template>
- <Teleport to="body">
- <transition name="zoom-fade" mode="out-in">
- <div :class="getClass" @click.stop v-if="visible">
- <div :class="`${prefixCls}-content`" v-click-outside="handleClose">
- <div :class="`${prefixCls}-input__wrapper`">
- <a-input
- :class="`${prefixCls}-input`"
- :placeholder="t('common.searchText')"
- ref="inputRef"
- allow-clear
- @change="handleSearch"
- >
- <template #prefix>
- <SearchOutlined />
- </template>
- </a-input>
- <span :class="`${prefixCls}-cancel`" @click="handleClose">
- {{ t('common.cancelText') }}
- </span>
- </div>
-
- <div :class="`${prefixCls}-not-data`" v-show="getIsNotData">
- {{ t('component.app.searchNotData') }}
- </div>
-
- <ul :class="`${prefixCls}-list`" v-show="!getIsNotData" ref="scrollWrap">
- <li
- :ref="setRefs(index)"
- v-for="(item, index) in searchResult"
- :key="item.path"
- :data-index="index"
- @mouseenter="handleMouseenter"
- @click="handleEnter"
- :class="[
- `${prefixCls}-list__item`,
- {
- [`${prefixCls}-list__item--active`]: activeIndex === index,
- },
- ]"
- >
- <div :class="`${prefixCls}-list__item-icon`">
- <Icon :icon="item.icon || 'mdi:form-select'" :size="20" />
- </div>
- <div :class="`${prefixCls}-list__item-text`">
- {{ item.name }}
- </div>
- <div :class="`${prefixCls}-list__item-enter`">
- <Icon icon="ant-design:enter-outlined" :size="20" />
- </div>
- </li>
- </ul>
- <AppSearchFooter />
- </div>
- </div>
- </transition>
- </Teleport>
-</template>
-
-<script lang="ts" setup>
- import { computed, unref, ref, watch, nextTick } from 'vue';
- import { SearchOutlined } from '@ant-design/icons-vue';
- import AppSearchFooter from './AppSearchFooter.vue';
- import Icon from '/@/components/Icon';
- // @ts-ignore
- import vClickOutside from '/@/directives/clickOutside';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useRefs } from '/@/hooks/core/useRefs';
- import { useMenuSearch } from './useMenuSearch';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useAppInject } from '/@/hooks/web/useAppInject';
-
- const props = defineProps({
- visible: { type: Boolean },
- });
-
- const emit = defineEmits(['close']);
-
- const scrollWrap = ref(null);
- const inputRef = ref<Nullable<HTMLElement>>(null);
-
- const { t } = useI18n();
- const { prefixCls } = useDesign('app-search-modal');
- const [refs, setRefs] = useRefs();
- const { getIsMobile } = useAppInject();
-
- const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
- useMenuSearch(refs, scrollWrap, emit);
-
- const getIsNotData = computed(() => !keyword || unref(searchResult).length === 0);
-
- const getClass = computed(() => {
- return [
- prefixCls,
- {
- [`${prefixCls}--mobile`]: unref(getIsMobile),
- },
- ];
- });
-
- watch(
- () => props.visible,
- (visible: boolean) => {
- visible &&
- nextTick(() => {
- unref(inputRef)?.focus();
- });
- },
- );
-
- function handleClose() {
- searchResult.value = [];
- emit('close');
- }
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-app-search-modal';
- @footer-prefix-cls: ~'@{namespace}-app-search-footer';
- .@{prefix-cls} {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 800;
- display: flex;
- width: 100%;
- height: 100%;
- padding-top: 50px;
- background-color: rgb(0 0 0 / 25%);
- justify-content: center;
-
- &--mobile {
- padding: 0;
-
- > div {
- width: 100%;
- }
-
- .@{prefix-cls}-input {
- width: calc(100% - 38px);
- }
-
- .@{prefix-cls}-cancel {
- display: inline-block;
- }
-
- .@{prefix-cls}-content {
- width: 100%;
- height: 100%;
- border-radius: 0;
- }
-
- .@{footer-prefix-cls} {
- display: none;
- }
-
- .@{prefix-cls}-list {
- height: calc(100% - 80px);
- max-height: unset;
-
- &__item {
- &-enter {
- opacity: 0% !important;
- }
- }
- }
- }
-
- &-content {
- position: relative;
- width: 632px;
- margin: 0 auto auto;
- background-color: @component-background;
- border-radius: 16px;
- box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
- flex-direction: column;
- }
-
- &-input__wrapper {
- display: flex;
- padding: 14px 14px 0;
- justify-content: space-between;
- align-items: center;
- }
-
- &-input {
- width: 100%;
- height: 48px;
- font-size: 1.5em;
- color: #1c1e21;
- border-radius: 6px;
-
- span[role='img'] {
- color: #999;
- }
- }
-
- &-cancel {
- display: none;
- font-size: 1em;
- color: #666;
- }
-
- &-not-data {
- display: flex;
- width: 100%;
- height: 100px;
- font-size: 0.9;
- color: rgb(150 159 175);
- align-items: center;
- justify-content: center;
- }
-
- &-list {
- max-height: 472px;
- padding: 0 14px;
- padding-bottom: 20px;
- margin: 0 auto;
- margin-top: 14px;
- overflow: auto;
-
- &__item {
- position: relative;
- display: flex;
- width: 100%;
- height: 56px;
- padding-bottom: 4px;
- padding-left: 14px;
- margin-top: 8px;
- font-size: 14px;
- color: @text-color-base;
- cursor: pointer;
- background-color: @component-background;
- border-radius: 4px;
- box-shadow: 0 1px 3px 0 #d4d9e1;
- align-items: center;
-
- > div:first-child,
- > div:last-child {
- display: flex;
- align-items: center;
- }
-
- &--active {
- color: #fff;
- background-color: @primary-color;
-
- .@{prefix-cls}-list__item-enter {
- opacity: 100%;
- }
- }
-
- &-icon {
- width: 30px;
- }
-
- &-text {
- flex: 1;
- }
-
- &-enter {
- width: 30px;
- opacity: 0%;
- }
- }
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Application/src/search/useMenuSearch.ts b/streampark-console/streampark-console-webapp/src/components/Application/src/search/useMenuSearch.ts
deleted file mode 100644
index b3ac5f078..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Application/src/search/useMenuSearch.ts
+++ /dev/null
@@ -1,182 +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
- *
- * https://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.
- */
-import type { Menu } from '/@/router/types';
-import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
-import { getMenus } from '/@/router/menus';
-import { cloneDeep } from 'lodash-es';
-import { filter, forEach } from '/@/utils/helper/treeHelper';
-import { useGo } from '/@/hooks/web/usePage';
-import { useScrollTo } from '/@/hooks/event/useScrollTo';
-import { onKeyStroke, useDebounceFn } from '@vueuse/core';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-export interface SearchResult {
- name: string;
- path: string;
- icon?: string;
-}
-
-// Translate special characters
-function transform(c: string) {
- const code: string[] = ['$', '(', ')', '*', '+', '.', '[', ']', '?', '\\', '^', '{', '}', '|'];
- return code.includes(c) ? `\\${c}` : c;
-}
-
-function createSearchReg(key: string) {
- const keys = [...key].map((item) => transform(item));
- const str = ['', ...keys, ''].join('.*');
- return new RegExp(str);
-}
-
-export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>, emit: EmitType) {
- const searchResult = ref<SearchResult[]>([]);
- const keyword = ref('');
- const activeIndex = ref(-1);
-
- let menuList: Menu[] = [];
-
- const { t } = useI18n();
- const go = useGo();
- const handleSearch = useDebounceFn(search, 200);
-
- onBeforeMount(async () => {
- const list = await getMenus();
- menuList = cloneDeep(list);
- forEach(menuList, (item) => {
- item.name = t(item.name);
- });
- });
-
- function search(e: ChangeEvent) {
- e?.stopPropagation();
- const key = e.target.value;
- keyword.value = key.trim();
- if (!key) {
- searchResult.value = [];
- return;
- }
- const reg = createSearchReg(unref(keyword));
- const filterMenu = filter(menuList, (item) => {
- return reg.test(item.name) && !item.hideMenu;
- });
- searchResult.value = handlerSearchResult(filterMenu, reg);
- activeIndex.value = 0;
- }
-
- function handlerSearchResult(filterMenu: Menu[], reg: RegExp, parent?: Menu) {
- const ret: SearchResult[] = [];
- filterMenu.forEach((item) => {
- const { name, path, icon, children, hideMenu, meta } = item;
- if (!hideMenu && reg.test(name) && (!children?.length || meta?.hideChildrenInMenu)) {
- ret.push({
- name: parent?.name ? `${parent.name} > ${name}` : name,
- path,
- icon,
- });
- }
- if (!meta?.hideChildrenInMenu && Array.isArray(children) && children.length) {
- ret.push(...handlerSearchResult(children, reg, item));
- }
- });
- return ret;
- }
-
- // Activate when the mouse moves to a certain line
- function handleMouseenter(e: any) {
- const index = e.target.dataset.index;
- activeIndex.value = Number(index);
- }
-
- // Arrow key up
- function handleUp() {
- if (!searchResult.value.length) return;
- activeIndex.value--;
- if (activeIndex.value < 0) {
- activeIndex.value = searchResult.value.length - 1;
- }
- handleScroll();
- }
-
- // Arrow key down
- function handleDown() {
- if (!searchResult.value.length) return;
- activeIndex.value++;
- if (activeIndex.value > searchResult.value.length - 1) {
- activeIndex.value = 0;
- }
- handleScroll();
- }
-
- // When the keyboard up and down keys move to an invisible place
- // the scroll bar needs to scroll automatically
- function handleScroll() {
- const refList = unref(refs);
- if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) {
- return;
- }
-
- const index = unref(activeIndex);
- const currentRef = refList[index];
- if (!currentRef) {
- return;
- }
- const wrapEl = unref(scrollWrap);
- if (!wrapEl) {
- return;
- }
- const scrollHeight = currentRef.offsetTop + currentRef.offsetHeight;
- const wrapHeight = wrapEl.offsetHeight;
- const { start } = useScrollTo({
- el: wrapEl,
- duration: 100,
- to: scrollHeight - wrapHeight,
- });
- start();
- }
-
- // enter keyboard event
- async function handleEnter() {
- if (!searchResult.value.length) {
- return;
- }
- const result = unref(searchResult);
- const index = unref(activeIndex);
- if (result.length === 0 || index < 0) {
- return;
- }
- const to = result[index];
- handleClose();
- await nextTick();
- go(to.path);
- }
-
- // close search modal
- function handleClose() {
- searchResult.value = [];
- emit('close');
- }
-
- // enter search
- onKeyStroke('Enter', handleEnter);
- // Monitor keyboard arrow keys
- onKeyStroke('ArrowUp', handleUp);
- onKeyStroke('ArrowDown', handleDown);
- // esc close
- onKeyStroke('Escape', handleClose);
-
- return { handleSearch, searchResult, keyword, activeIndex, handleMouseenter, handleEnter };
-}
diff --git a/streampark-console/streampark-console-webapp/src/components/CardList/index.ts b/streampark-console/streampark-console-webapp/src/components/CardList/index.ts
deleted file mode 100644
index d3bf551f2..000000000
--- a/streampark-console/streampark-console-webapp/src/components/CardList/index.ts
+++ /dev/null
@@ -1,20 +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
- *
- * https://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.
- */
-import { withInstall } from '/@/utils';
-import cardList from './src/CardList.vue';
-
-export const CardList = withInstall(cardList);
diff --git a/streampark-console/streampark-console-webapp/src/components/CardList/src/CardList.vue b/streampark-console/streampark-console-webapp/src/components/CardList/src/CardList.vue
deleted file mode 100644
index a11104d9b..000000000
--- a/streampark-console/streampark-console-webapp/src/components/CardList/src/CardList.vue
+++ /dev/null
@@ -1,193 +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
-
- https://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.
--->
-<template>
- <div class="p-2">
- <div class="p-4 mb-2 bg-white">
- <BasicForm @register="registerForm" />
- </div>
- <div class="p-2 bg-white">
- <List
- :grid="{ gutter: 5, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: grid }"
- :data-source="data"
- :pagination="paginationProp"
- >
- <template #header>
- <div class="flex justify-end space-x-2">
- <slot name="header"></slot>
- <Tooltip>
- <template #title>
- <div class="w-50">Display quantity per line</div
- ><Slider
- id="slider"
- v-bind="sliderProp"
- v-model:value="grid"
- @change="sliderChange"
- /></template>
- <Button><TableOutlined /></Button>
- </Tooltip>
- <Tooltip @click="fetch">
- <template #title>refresh</template>
- <Button><RedoOutlined /></Button>
- </Tooltip>
- </div>
- </template>
- <template #renderItem="{ item }">
- <ListItem>
- <Card>
- <template #title></template>
- <template #cover>
- <div :class="height">
- <Image :src="item.imgs[0]" />
- </div>
- </template>
- <template #actions>
- <!-- <SettingOutlined key="setting" />-->
- <EditOutlined key="edit" />
- <Dropdown
- :trigger="['hover']"
- :dropMenuList="[
- {
- text: 'delete',
- event: '1',
- popConfirm: {
- title: 'Whether to confirm the deletion',
- confirm: handleDelete.bind(null, item.id),
- },
- },
- ]"
- popconfirm
- >
- <EllipsisOutlined key="ellipsis" />
- </Dropdown>
- </template>
-
- <CardMeta>
- <template #title>
- <TypographyText :content="item.name" :ellipsis="{ tooltip: item.address }" />
- </template>
- <template #avatar>
- <Avatar :src="item.avatar" />
- </template>
- <template #description>{{ item.time }}</template>
- </CardMeta>
- </Card>
- </ListItem>
- </template>
- </List>
- </div>
- </div>
-</template>
-<script lang="ts" setup>
- import { computed, onMounted, ref } from 'vue';
- import {
- EditOutlined,
- EllipsisOutlined,
- RedoOutlined,
- TableOutlined,
- } from '@ant-design/icons-vue';
- import { List, Card, Image, Typography, Tooltip, Slider, Avatar } from 'ant-design-vue';
- import { Dropdown } from '/@/components/Dropdown';
- import { BasicForm, useForm } from '/@/components/Form';
- import { propTypes } from '/@/utils/propTypes';
- import { Button } from '/@/components/Button';
- import { isFunction } from '/@/utils/is';
- import { useSlider, grid } from './data';
- const ListItem = List.Item;
- const CardMeta = Card.Meta;
- const TypographyText = Typography.Text;
- // Get slider property
- const sliderProp = computed(() => useSlider(4));
- // Component receives parameters
- const props = defineProps({
- // Request API parameters
- params: propTypes.object.def({}),
- //api
- api: propTypes.func,
- });
- // expose internal methods
- const emit = defineEmits(['getMethod', 'delete']);
- // data
- const data = ref([]);
- // Switch the number of lines per line
- // cover image adaptive height
- // Modify pageSize and re-request data
-
- const height = computed(() => {
- return `h-${120 - grid.value * 6}`;
- });
- // form
- const [registerForm, { validate }] = useForm({
- schemas: [{ field: 'type', component: 'Input', label: 'type' }],
- labelWidth: 80,
- baseColProps: { span: 6 },
- actionColOptions: { span: 24 },
- autoSubmitOnEnter: true,
- submitFunc: handleSubmit,
- });
- // form submit
- async function handleSubmit() {
- const data = await validate();
- await fetch(data);
- }
- function sliderChange(n) {
- pageSize.value = n * 4;
- fetch();
- }
-
- // Automatically request and expose internal methods
- onMounted(() => {
- fetch();
- emit('getMethod', fetch);
- });
-
- async function fetch(p = {}) {
- const { api, params } = props;
- if (api && isFunction(api)) {
- const res = await api({ ...params, page: page.value, pageSize: pageSize.value, ...p });
- data.value = res.items;
- total.value = res.total;
- }
- }
- // Pagination related
- const page = ref(1);
- const pageSize = ref(36);
- const total = ref(0);
- const paginationProp = ref({
- showSizeChanger: false,
- showQuickJumper: true,
- pageSize,
- current: page,
- total,
- showTotal: (total) => `total ${total} records`,
- onChange: pageChange,
- onShowSizeChange: pageSizeChange,
- });
-
- function pageChange(p, pz) {
- page.value = p;
- pageSize.value = pz;
- fetch();
- }
- function pageSizeChange(_current, size) {
- pageSize.value = size;
- fetch();
- }
-
- async function handleDelete(id) {
- emit('delete', id);
- }
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/components/CardList/src/data.ts b/streampark-console/streampark-console-webapp/src/components/CardList/src/data.ts
deleted file mode 100644
index d47498e06..000000000
--- a/streampark-console/streampark-console-webapp/src/components/CardList/src/data.ts
+++ /dev/null
@@ -1,41 +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
- *
- * https://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.
- */
-import { ref } from 'vue';
-// number of lines
-export const grid = ref(12);
-// slider property
-export const useSlider = (min = 6, max = 12) => {
- // Display count sliders per line
- const getMarks = () => {
- const l = {};
- for (let i = min; i < max + 1; i++) {
- l[i] = {
- style: {
- color: '#fff',
- },
- label: i,
- };
- }
- return l;
- };
- return {
- min,
- max,
- marks: getMarks(),
- step: 1,
- };
-};
diff --git a/streampark-console/streampark-console-webapp/src/components/ClickOutSide/index.ts b/streampark-console/streampark-console-webapp/src/components/ClickOutSide/index.ts
deleted file mode 100644
index 644271dbb..000000000
--- a/streampark-console/streampark-console-webapp/src/components/ClickOutSide/index.ts
+++ /dev/null
@@ -1,20 +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
- *
- * https://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.
- */
-import { withInstall } from '/@/utils';
-import clickOutSide from './src/ClickOutSide.vue';
-
-export const ClickOutSide = withInstall(clickOutSide);
diff --git a/streampark-console/streampark-console-webapp/src/components/ClickOutSide/src/ClickOutSide.vue b/streampark-console/streampark-console-webapp/src/components/ClickOutSide/src/ClickOutSide.vue
deleted file mode 100644
index ded14c1c5..000000000
--- a/streampark-console/streampark-console-webapp/src/components/ClickOutSide/src/ClickOutSide.vue
+++ /dev/null
@@ -1,35 +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
-
- https://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.
--->
-<template>
- <div ref="wrap">
- <slot></slot>
- </div>
-</template>
-<script lang="ts" setup>
- import { ref, onMounted } from 'vue';
- import { onClickOutside } from '@vueuse/core';
- const emit = defineEmits(['mounted', 'clickOutside']);
- const wrap = ref<ElRef>(null);
-
- onClickOutside(wrap, () => {
- emit('clickOutside');
- });
-
- onMounted(() => {
- emit('mounted');
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/components/CountDown/index.ts b/streampark-console/streampark-console-webapp/src/components/CountDown/index.ts
deleted file mode 100644
index c7309c6f1..000000000
--- a/streampark-console/streampark-console-webapp/src/components/CountDown/index.ts
+++ /dev/null
@@ -1,22 +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
- *
- * https://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.
- */
-import { withInstall } from '/@/utils';
-import countButton from './src/CountButton.vue';
-import countdownInput from './src/CountdownInput.vue';
-
-export const CountdownInput = withInstall(countdownInput);
-export const CountButton = withInstall(countButton);
diff --git a/streampark-console/streampark-console-webapp/src/components/CountDown/src/CountButton.vue b/streampark-console/streampark-console-webapp/src/components/CountDown/src/CountButton.vue
deleted file mode 100644
index 722aad1ec..000000000
--- a/streampark-console/streampark-console-webapp/src/components/CountDown/src/CountButton.vue
+++ /dev/null
@@ -1,78 +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
-
- https://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.
--->
-<template>
- <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
- {{ getButtonText }}
- </Button>
-</template>
-<script lang="ts">
- import { defineComponent, ref, watchEffect, computed, unref } from 'vue';
- import { Button } from 'ant-design-vue';
- import { useCountdown } from './useCountdown';
- import { isFunction } from '/@/utils/is';
- import { useI18n } from '/@/hooks/web/useI18n';
-
- const props = {
- value: { type: [Object, Number, String, Array] },
- count: { type: Number, default: 60 },
- beforeStartFunc: {
- type: Function as PropType<() => Promise<boolean>>,
- default: null,
- },
- };
-
- export default defineComponent({
- name: 'CountButton',
- components: { Button },
- props,
- setup(props) {
- const loading = ref(false);
-
- const { currentCount, isStart, start, reset } = useCountdown(props.count);
- const { t } = useI18n();
-
- const getButtonText = computed(() => {
- return !unref(isStart)
- ? t('component.countdown.normalText')
- : t('component.countdown.sendText', [unref(currentCount)]);
- });
-
- watchEffect(() => {
- props.value === undefined && reset();
- });
-
- /**
- * @description: Judge whether there is an external function before execution, and decide whether to start after execution
- */
- async function handleStart() {
- const { beforeStartFunc } = props;
- if (beforeStartFunc && isFunction(beforeStartFunc)) {
- loading.value = true;
- try {
- const canStart = await beforeStartFunc();
- canStart && start();
- } finally {
- loading.value = false;
- }
- } else {
- start();
- }
- }
- return { handleStart, currentCount, loading, getButtonText, isStart };
- },
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/components/CountDown/src/CountdownInput.vue b/streampark-console/streampark-console-webapp/src/components/CountDown/src/CountdownInput.vue
deleted file mode 100644
index dbe3e919c..000000000
--- a/streampark-console/streampark-console-webapp/src/components/CountDown/src/CountdownInput.vue
+++ /dev/null
@@ -1,70 +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
-
- https://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.
--->
-<template>
- <a-input v-bind="$attrs" :class="prefixCls" :size="size" :value="state">
- <template #addonAfter>
- <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
- </template>
- <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
- <slot :name="item" v-bind="data || {}"></slot>
- </template>
- </a-input>
-</template>
-<script lang="ts">
- import { defineComponent, PropType } from 'vue';
- import CountButton from './CountButton.vue';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useRuleFormItem } from '/@/hooks/component/useFormItem';
-
- const props = {
- value: { type: String },
- size: { type: String, validator: (v) => ['default', 'large', 'small'].includes(v) },
- count: { type: Number, default: 60 },
- sendCodeApi: {
- type: Function as PropType<() => Promise<boolean>>,
- default: null,
- },
- };
-
- export default defineComponent({
- name: 'CountDownInput',
- components: { CountButton },
- inheritAttrs: false,
- props,
- setup(props) {
- const { prefixCls } = useDesign('countdown-input');
- const [state] = useRuleFormItem(props);
-
- return { prefixCls, state };
- },
- });
-</script>
-<style lang="less">
- @prefix-cls: ~'@{namespace}-countdown-input';
-
- .@{prefix-cls} {
- .ant-input-group-addon {
- padding-right: 0;
- background-color: transparent;
- border: none;
-
- button {
- font-size: 14px;
- }
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/CountDown/src/useCountdown.ts b/streampark-console/streampark-console-webapp/src/components/CountDown/src/useCountdown.ts
deleted file mode 100644
index 426f85d86..000000000
--- a/streampark-console/streampark-console-webapp/src/components/CountDown/src/useCountdown.ts
+++ /dev/null
@@ -1,67 +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
- *
- * https://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.
- */
-import { ref, unref } from 'vue';
-import { tryOnUnmounted } from '@vueuse/core';
-
-export function useCountdown(count: number) {
- const currentCount = ref(count);
-
- const isStart = ref(false);
-
- let timerId: ReturnType<typeof setInterval> | null;
-
- function clear() {
- timerId && window.clearInterval(timerId);
- }
-
- function stop() {
- isStart.value = false;
- clear();
- timerId = null;
- }
-
- function start() {
- if (unref(isStart) || !!timerId) {
- return;
- }
- isStart.value = true;
- timerId = setInterval(() => {
- if (unref(currentCount) === 1) {
- stop();
- currentCount.value = count;
- } else {
- currentCount.value -= 1;
- }
- }, 1000);
- }
-
- function reset() {
- currentCount.value = count;
- stop();
- }
-
- function restart() {
- reset();
- start();
- }
-
- tryOnUnmounted(() => {
- reset();
- });
-
- return { start, reset, restart, clear, stop, currentCount, isStart };
-}
diff --git a/streampark-console/streampark-console-webapp/src/components/Form/src/componentMap.ts b/streampark-console/streampark-console-webapp/src/components/Form/src/componentMap.ts
index 1110bf716..f08894e14 100644
--- a/streampark-console/streampark-console-webapp/src/components/Form/src/componentMap.ts
+++ b/streampark-console/streampark-console-webapp/src/components/Form/src/componentMap.ts
@@ -43,10 +43,7 @@ import ApiSelect from './components/ApiSelect.vue';
import ApiTree from './components/ApiTree.vue';
import ApiTreeSelect from './components/ApiTreeSelect.vue';
import ApiCascader from './components/ApiCascader.vue';
-import { BasicUpload } from '/@/components/Upload';
-import { StrengthMeter } from '/@/components/StrengthMeter';
import { IconPicker } from '/@/components/Icon';
-import { CountdownInput } from '/@/components/CountDown';
const componentMap = new Map<ComponentType, Component>();
@@ -80,11 +77,8 @@ componentMap.set('MonthPicker', DatePicker.MonthPicker);
componentMap.set('RangePicker', DatePicker.RangePicker);
componentMap.set('WeekPicker', DatePicker.WeekPicker);
componentMap.set('TimePicker', TimePicker);
-componentMap.set('StrengthMeter', StrengthMeter);
componentMap.set('IconPicker', IconPicker);
-componentMap.set('InputCountDown', CountdownInput);
-componentMap.set('Upload', BasicUpload);
componentMap.set('Divider', Divider);
export function add(compName: ComponentType, component: Component) {
diff --git a/streampark-console/streampark-console-webapp/src/components/Form/src/types/index.ts b/streampark-console/streampark-console-webapp/src/components/Form/src/types/index.ts
index 227603665..e3629d2ac 100644
--- a/streampark-console/streampark-console-webapp/src/components/Form/src/types/index.ts
+++ b/streampark-console/streampark-console-webapp/src/components/Form/src/types/index.ts
@@ -124,7 +124,6 @@ export type ComponentType =
| 'WeekPicker'
| 'TimePicker'
| 'Switch'
- | 'StrengthMeter'
| 'Upload'
| 'IconPicker'
| 'Render'
diff --git a/streampark-console/streampark-console-webapp/src/components/Preview/index.ts b/streampark-console/streampark-console-webapp/src/components/Preview/index.ts
deleted file mode 100644
index a43b19063..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Preview/index.ts
+++ /dev/null
@@ -1,18 +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
- *
- * https://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.
- */
-export { default as ImagePreview } from './src/Preview.vue';
-export { createImgPreview } from './src/functional';
diff --git a/streampark-console/streampark-console-webapp/src/components/Preview/src/Functional.vue b/streampark-console/streampark-console-webapp/src/components/Preview/src/Functional.vue
deleted file mode 100644
index 1c4f951e3..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Preview/src/Functional.vue
+++ /dev/null
@@ -1,560 +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
-
- https://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.
--->
-<script lang="tsx">
- import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue';
- import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
- import resumeSvg from '/@/assets/svg/preview/resume.svg';
- import rotateSvg from '/@/assets/svg/preview/p-rotate.svg';
- import scaleSvg from '/@/assets/svg/preview/scale.svg';
- import unScaleSvg from '/@/assets/svg/preview/unscale.svg';
- import unRotateSvg from '/@/assets/svg/preview/unrotate.svg';
-
- enum StatueEnum {
- LOADING,
- DONE,
- FAIL,
- }
- interface ImgState {
- currentUrl: string;
- imgScale: number;
- imgRotate: number;
- imgTop: number;
- imgLeft: number;
- currentIndex: number;
- status: StatueEnum;
- moveX: number;
- moveY: number;
- show: boolean;
- }
- const props = {
- show: {
- type: Boolean as PropType<boolean>,
- default: false,
- },
- imageList: {
- type: [Array] as PropType<string[]>,
- default: null,
- },
- index: {
- type: Number as PropType<number>,
- default: 0,
- },
- scaleStep: {
- type: Number as PropType<number>,
- },
- defaultWidth: {
- type: Number as PropType<number>,
- },
- maskClosable: {
- type: Boolean as PropType<boolean>,
- },
- rememberState: {
- type: Boolean as PropType<boolean>,
- },
- };
-
- const prefixCls = 'img-preview';
- export default defineComponent({
- name: 'ImagePreview',
- props,
- emits: ['img-load', 'img-error'],
- setup(props, { expose, emit }) {
- interface stateInfo {
- scale: number;
- rotate: number;
- top: number;
- left: number;
- }
- const stateMap = new Map<string, stateInfo>();
- const imgState = reactive<ImgState>({
- currentUrl: '',
- imgScale: 1,
- imgRotate: 0,
- imgTop: 0,
- imgLeft: 0,
- status: StatueEnum.LOADING,
- currentIndex: 0,
- moveX: 0,
- moveY: 0,
- show: props.show,
- });
-
- const wrapElRef = ref<HTMLDivElement | null>(null);
- const imgElRef = ref<HTMLImageElement | null>(null);
-
- function init() {
- initMouseWheel();
- const { index, imageList } = props;
-
- if (!imageList || !imageList.length) {
- throw new Error('imageList is undefined');
- }
- imgState.currentIndex = index;
- handleIChangeImage(imageList[index]);
- }
-
- // reset
- function initState() {
- imgState.imgScale = 1;
- imgState.imgRotate = 0;
- imgState.imgTop = 0;
- imgState.imgLeft = 0;
- }
-
- // Initialize the mouse wheel event
- function initMouseWheel() {
- const wrapEl = unref(wrapElRef);
- if (!wrapEl) {
- return;
- }
- (wrapEl as any).onmousewheel = scrollFunc;
- // Firefox does not have an onmousewheel event, use DOMMouseScroll instead
- document.body.addEventListener('DOMMouseScroll', scrollFunc);
- // Default event to disable dragging and dropping images in Firefox
- document.ondragstart = function () {
- return false;
- };
- }
-
- const getScaleStep = computed(() => {
- const scaleStep = props?.scaleStep ?? 0;
- if (scaleStep ?? (0 > 0 && scaleStep < 100)) {
- return scaleStep / 100;
- } else {
- return imgState.imgScale / 10;
- }
- });
-
- // Listen to the mouse wheel
- function scrollFunc(e: any) {
- e = e || window.event;
- e.delta = e.wheelDelta || -e.detail;
-
- e.preventDefault();
- if (e.delta > 0) {
- // The pulley rolls up
- scaleFunc(getScaleStep.value);
- }
- if (e.delta < 0) {
- // The pulley rolls down
- scaleFunc(-getScaleStep.value);
- }
- }
- // The zoom function
- function scaleFunc(num: number) {
- if (imgState.imgScale <= 0.2 && num < 0) return;
- imgState.imgScale += num;
- }
-
- // rotate image
- function rotateFunc(deg: number) {
- imgState.imgRotate += deg;
- }
-
- // Mouse events
- function handleMouseUp() {
- const imgEl = unref(imgElRef);
- if (!imgEl) return;
- imgEl.onmousemove = null;
- }
-
- // Replace the picture
- function handleIChangeImage(url: string) {
- imgState.status = StatueEnum.LOADING;
- const img = new Image();
- img.src = url;
- img.onload = (e: Event) => {
- if (imgState.currentUrl !== url) {
- const ele: any[] = e.composedPath();
- if (props.rememberState) {
- // Saves the zoom information for the current picture
- stateMap.set(imgState.currentUrl, {
- scale: imgState.imgScale,
- top: imgState.imgTop,
- left: imgState.imgLeft,
- rotate: imgState.imgRotate,
- });
- // If the scaling information has been previously stored, it is applied
- const stateInfo = stateMap.get(url);
- if (stateInfo) {
- imgState.imgScale = stateInfo.scale;
- imgState.imgTop = stateInfo.top;
- imgState.imgRotate = stateInfo.rotate;
- imgState.imgLeft = stateInfo.left;
- } else {
- initState();
- if (props.defaultWidth) {
- imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
- }
- }
- } else {
- if (props.defaultWidth) {
- imgState.imgScale = props.defaultWidth / ele[0].naturalWidth;
- }
- }
-
- ele &&
- emit('img-load', {
- index: imgState.currentIndex,
- dom: ele[0] as HTMLImageElement,
- url,
- });
- }
- imgState.currentUrl = url;
- imgState.status = StatueEnum.DONE;
- };
- img.onerror = (e: Event) => {
- const ele: EventTarget[] = e.composedPath();
- ele &&
- emit('img-error', {
- index: imgState.currentIndex,
- dom: ele[0] as HTMLImageElement,
- url,
- });
- imgState.status = StatueEnum.FAIL;
- };
- }
-
- function handleClose(e: MouseEvent) {
- e && e.stopPropagation();
- close();
- }
-
- function close() {
- imgState.show = false;
- // Remove the mouse scroll event under Firefox
- document.body.removeEventListener('DOMMouseScroll', scrollFunc);
- // Restore image dragging and dropping in Firefox and Safari
- document.ondragstart = null;
- }
-
- // Image restoration
- function resume() {
- initState();
- }
-
- expose({
- resume,
- close,
- prev: handleChange.bind(null, 'left'),
- next: handleChange.bind(null, 'right'),
- setScale: (scale: number) => {
- if (scale > 0 && scale <= 10) imgState.imgScale = scale;
- },
- setRotate: (rotate: number) => {
- imgState.imgRotate = rotate;
- },
- });
-
- // Last page, next page
- function handleChange(direction: 'left' | 'right') {
- const { currentIndex } = imgState;
- const { imageList } = props;
- if (direction === 'left') {
- imgState.currentIndex--;
- if (currentIndex <= 0) {
- imgState.currentIndex = imageList.length - 1;
- }
- }
- if (direction === 'right') {
- imgState.currentIndex++;
- if (currentIndex >= imageList.length - 1) {
- imgState.currentIndex = 0;
- }
- }
- handleIChangeImage(imageList[imgState.currentIndex]);
- }
-
- function handleAddMoveListener(e: MouseEvent) {
- e = e || window.event;
- imgState.moveX = e.clientX;
- imgState.moveY = e.clientY;
- const imgEl = unref(imgElRef);
- if (imgEl) {
- imgEl.onmousemove = moveFunc;
- }
- }
-
- function moveFunc(e: MouseEvent) {
- e = e || window.event;
- e.preventDefault();
- const movementX = e.clientX - imgState.moveX;
- const movementY = e.clientY - imgState.moveY;
- imgState.imgLeft += movementX;
- imgState.imgTop += movementY;
- imgState.moveX = e.clientX;
- imgState.moveY = e.clientY;
- }
-
- // Gets the picture style
- const getImageStyle = computed(() => {
- const { imgScale, imgRotate, imgTop, imgLeft } = imgState;
- return {
- transform: `scale(${imgScale}) rotate(${imgRotate}deg)`,
- marginTop: `${imgTop}px`,
- marginLeft: `${imgLeft}px`,
- maxWidth: props.defaultWidth ? 'unset' : '100%',
- };
- });
-
- const getIsMultipleImage = computed(() => {
- const { imageList } = props;
- return imageList.length > 1;
- });
-
- watchEffect(() => {
- if (props.show) {
- init();
- }
- if (props.imageList) {
- initState();
- }
- });
-
- const handleMaskClick = (e: MouseEvent) => {
- if (
- props.maskClosable &&
- e.target &&
- (e.target as HTMLDivElement).classList.contains(`${prefixCls}-content`)
- ) {
- handleClose(e);
- }
- };
-
- const renderClose = () => {
- return (
- <div class={`${prefixCls}__close`} onClick={handleClose}>
- <CloseOutlined class={`${prefixCls}__close-icon`} />
- </div>
- );
- };
-
- const renderIndex = () => {
- if (!unref(getIsMultipleImage)) {
- return null;
- }
- const { currentIndex } = imgState;
- const { imageList } = props;
- return (
- <div class={`${prefixCls}__index`}>
- {currentIndex + 1} / {imageList.length}
- </div>
- );
- };
-
- const renderController = () => {
- return (
- <div class={`${prefixCls}__controller`}>
- <div
- class={`${prefixCls}__controller-item`}
- onClick={() => scaleFunc(-getScaleStep.value)}
- >
- <img src={unScaleSvg} />
- </div>
- <div
- class={`${prefixCls}__controller-item`}
- onClick={() => scaleFunc(getScaleStep.value)}
- >
- <img src={scaleSvg} />
- </div>
- <div class={`${prefixCls}__controller-item`} onClick={resume}>
- <img src={resumeSvg} />
- </div>
- <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(-90)}>
- <img src={unRotateSvg} />
- </div>
- <div class={`${prefixCls}__controller-item`} onClick={() => rotateFunc(90)}>
- <img src={rotateSvg} />
- </div>
- </div>
- );
- };
-
- const renderArrow = (direction: 'left' | 'right') => {
- if (!unref(getIsMultipleImage)) {
- return null;
- }
- return (
- <div class={[`${prefixCls}__arrow`, direction]} onClick={() => handleChange(direction)}>
- {direction === 'left' ? <LeftOutlined /> : <RightOutlined />}
- </div>
- );
- };
-
- return () => {
- return (
- imgState.show && (
- <div
- class={prefixCls}
- ref={wrapElRef}
- onMouseup={handleMouseUp}
- onClick={handleMaskClick}
- >
- <div class={`${prefixCls}-content`}>
- {/*<Spin*/}
- {/* indicator={<LoadingOutlined style="font-size: 24px" spin />}*/}
- {/* spinning={true}*/}
- {/* class={[*/}
- {/* `${prefixCls}-image`,*/}
- {/* {*/}
- {/* hidden: imgState.status !== StatueEnum.LOADING,*/}
- {/* },*/}
- {/* ]}*/}
- {/*/>*/}
- <img
- style={unref(getImageStyle)}
- class={[
- `${prefixCls}-image`,
- imgState.status === StatueEnum.DONE ? '' : 'hidden',
- ]}
- ref={imgElRef}
- src={imgState.currentUrl}
- onMousedown={handleAddMoveListener}
- />
- {renderClose()}
- {renderIndex()}
- {renderController()}
- {renderArrow('left')}
- {renderArrow('right')}
- </div>
- </div>
- )
- );
- };
- },
- });
-</script>
-<style lang="less">
- .img-preview {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: @preview-comp-z-index;
- background: rgb(0 0 0 / 50%);
- user-select: none;
-
- &-content {
- display: flex;
- width: 100%;
- height: 100%;
- color: @white;
- justify-content: center;
- align-items: center;
- }
-
- &-image {
- cursor: pointer;
- transition: transform 0.3s;
- }
-
- &__close {
- position: absolute;
- top: -40px;
- right: -40px;
- width: 80px;
- height: 80px;
- overflow: hidden;
- color: @white;
- cursor: pointer;
- background-color: rgb(0 0 0 / 50%);
- border-radius: 50%;
- transition: all 0.2s;
-
- &-icon {
- position: absolute;
- top: 46px;
- left: 16px;
- font-size: 16px;
- }
-
- &:hover {
- background-color: rgb(0 0 0 / 80%);
- }
- }
-
- &__index {
- position: absolute;
- bottom: 5%;
- left: 50%;
- padding: 0 22px;
- font-size: 16px;
- background: rgb(109 109 109 / 60%);
- border-radius: 15px;
- transform: translateX(-50%);
- }
-
- &__controller {
- position: absolute;
- bottom: 10%;
- left: 50%;
- display: flex;
- width: 260px;
- height: 44px;
- padding: 0 22px;
- margin-left: -139px;
- background: rgb(109 109 109 / 60%);
- border-radius: 22px;
- justify-content: center;
-
- &-item {
- display: flex;
- height: 100%;
- padding: 0 9px;
- font-size: 24px;
- cursor: pointer;
- transition: all 0.2s;
-
- &:hover {
- transform: scale(1.2);
- }
-
- img {
- width: 1em;
- }
- }
- }
-
- &__arrow {
- position: absolute;
- top: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- width: 50px;
- height: 50px;
- font-size: 28px;
- cursor: pointer;
- background-color: rgb(0 0 0 / 50%);
- border-radius: 50%;
- transition: all 0.2s;
-
- &:hover {
- background-color: rgb(0 0 0 / 80%);
- }
-
- &.left {
- left: 50px;
- }
-
- &.right {
- right: 50px;
- }
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Preview/src/Preview.vue b/streampark-console/streampark-console-webapp/src/components/Preview/src/Preview.vue
deleted file mode 100644
index 432466c6e..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Preview/src/Preview.vue
+++ /dev/null
@@ -1,110 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls">
- <PreviewGroup>
- <slot v-if="!imageList || $slots.default"></slot>
- <template v-else>
- <template v-for="item in getImageList" :key="item.src">
- <Image v-bind="item">
- <template #placeholder v-if="item.placeholder">
- <Image v-bind="item" :src="item.placeholder" :preview="false" />
- </template>
- </Image>
- </template>
- </template>
- </PreviewGroup>
- </div>
-</template>
-<script lang="ts">
- import type { PropType } from 'vue';
- import { defineComponent, computed } from 'vue';
-
- import { Image } from 'ant-design-vue';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { propTypes } from '/@/utils/propTypes';
- import { isString } from '/@/utils/is';
-
- interface ImageProps {
- alt?: string;
- fallback?: string;
- src: string;
- width: string | number;
- height?: string | number;
- placeholder?: string | boolean;
- preview?:
- | boolean
- | {
- visible?: boolean;
- onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
- getContainer: string | HTMLElement | (() => HTMLElement);
- };
- }
-
- type ImageItem = string | ImageProps;
-
- export default defineComponent({
- name: 'ImagePreview',
- components: {
- Image,
- PreviewGroup: Image.PreviewGroup,
- },
- props: {
- functional: propTypes.bool,
- imageList: {
- type: Array as PropType<ImageItem[]>,
- },
- },
- setup(props) {
- const { prefixCls } = useDesign('image-preview');
-
- const getImageList = computed((): any[] => {
- const { imageList } = props;
- if (!imageList) {
- return [];
- }
- return imageList.map((item) => {
- if (isString(item)) {
- return {
- src: item,
- placeholder: false,
- };
- }
- return item;
- });
- });
-
- return {
- prefixCls,
- getImageList,
- };
- },
- });
-</script>
-<style lang="less">
- @prefix-cls: ~'@{namespace}-image-preview';
-
- .@{prefix-cls} {
- .ant-image {
- margin-right: 10px;
- }
-
- .ant-image-preview-operations {
- background-color: rgb(0 0 0 / 40%);
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Preview/src/functional.ts b/streampark-console/streampark-console-webapp/src/components/Preview/src/functional.ts
deleted file mode 100644
index f5b307126..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Preview/src/functional.ts
+++ /dev/null
@@ -1,33 +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
- *
- * https://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.
- */
-import type { Options, Props } from './typing';
-import ImgPreview from './Functional.vue';
-import { isClient } from '/@/utils/is';
-import { createVNode, render } from 'vue';
-
-let instance: ReturnType<typeof createVNode> | null = null;
-export function createImgPreview(options: Options) {
- if (!isClient) return;
- const propsData: Partial<Props> = {};
- const container = document.createElement('div');
- Object.assign(propsData, { show: true, index: 0, scaleStep: 100 }, options);
-
- instance = createVNode(ImgPreview, propsData);
- render(instance, container);
- document.body.appendChild(container);
- return instance.component?.exposed;
-}
diff --git a/streampark-console/streampark-console-webapp/src/components/Preview/src/typing.ts b/streampark-console/streampark-console-webapp/src/components/Preview/src/typing.ts
deleted file mode 100644
index 00afdd812..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Preview/src/typing.ts
+++ /dev/null
@@ -1,65 +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
- *
- * https://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.
- */
-export interface Options {
- show?: boolean;
- imageList: string[];
- index?: number;
- scaleStep?: number;
- defaultWidth?: number;
- maskClosable?: boolean;
- rememberState?: boolean;
- onImgLoad?: ({ index, url, dom }: { index: number; url: string; dom: HTMLImageElement }) => void;
- onImgError?: ({ index, url, dom }: { index: number; url: string; dom: HTMLImageElement }) => void;
-}
-
-export interface Props {
- show: boolean;
- instance: Props;
- imageList: string[];
- index: number;
- scaleStep: number;
- defaultWidth: number;
- maskClosable: boolean;
- rememberState: boolean;
-}
-
-export interface PreviewActions {
- resume: () => void;
- close: () => void;
- prev: () => void;
- next: () => void;
- setScale: (scale: number) => void;
- setRotate: (rotate: number) => void;
-}
-
-export interface ImageProps {
- alt?: string;
- fallback?: string;
- src: string;
- width: string | number;
- height?: string | number;
- placeholder?: string | boolean;
- preview?:
- | boolean
- | {
- visible?: boolean;
- onVisibleChange?: (visible: boolean, prevVisible: boolean) => void;
- getContainer: string | HTMLElement | (() => HTMLElement);
- };
-}
-
-export type ImageItem = string | ImageProps;
diff --git a/streampark-console/streampark-console-webapp/src/components/StrengthMeter/index.ts b/streampark-console/streampark-console-webapp/src/components/StrengthMeter/index.ts
deleted file mode 100644
index 098e6e98b..000000000
--- a/streampark-console/streampark-console-webapp/src/components/StrengthMeter/index.ts
+++ /dev/null
@@ -1,20 +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
- *
- * https://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.
- */
-import { withInstall } from '/@/utils';
-import strengthMeter from './src/StrengthMeter.vue';
-
-export const StrengthMeter = withInstall(strengthMeter);
diff --git a/streampark-console/streampark-console-webapp/src/components/StrengthMeter/src/StrengthMeter.vue b/streampark-console/streampark-console-webapp/src/components/StrengthMeter/src/StrengthMeter.vue
deleted file mode 100644
index 0eb2a34bc..000000000
--- a/streampark-console/streampark-console-webapp/src/components/StrengthMeter/src/StrengthMeter.vue
+++ /dev/null
@@ -1,158 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls" class="relative">
- <InputPassword
- v-if="showInput"
- v-bind="$attrs"
- allowClear
- :value="innerValueRef"
- @change="handleChange"
- :disabled="disabled"
- >
- <template #[item]="data" v-for="item in Object.keys($slots)">
- <slot :name="item" v-bind="data || {}"></slot>
- </template>
- </InputPassword>
- <div :class="`${prefixCls}-bar`">
- <div :class="`${prefixCls}-bar--fill`" :data-score="getPasswordStrength"></div>
- </div>
- </div>
-</template>
-
-<script lang="ts">
- import { defineComponent, computed, ref, watch, unref, watchEffect } from 'vue';
- import { Input } from 'ant-design-vue';
- import { zxcvbn } from '@zxcvbn-ts/core';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { propTypes } from '/@/utils/propTypes';
-
- export default defineComponent({
- name: 'StrengthMeter',
- components: { InputPassword: Input.Password },
- props: {
- value: propTypes.string,
- showInput: propTypes.bool.def(true),
- disabled: propTypes.bool,
- },
- emits: ['score-change', 'change'],
- setup(props, { emit }) {
- const innerValueRef = ref('');
- const { prefixCls } = useDesign('strength-meter');
-
- const getPasswordStrength = computed(() => {
- const { disabled } = props;
- if (disabled) return -1;
- const innerValue = unref(innerValueRef);
- const score = innerValue ? zxcvbn(unref(innerValueRef)).score : -1;
- emit('score-change', score);
- return score;
- });
-
- function handleChange(e: ChangeEvent) {
- innerValueRef.value = e.target.value;
- }
-
- watchEffect(() => {
- innerValueRef.value = props.value || '';
- });
-
- watch(
- () => unref(innerValueRef),
- (val) => {
- emit('change', val);
- },
- );
-
- return {
- getPasswordStrength,
- handleChange,
- prefixCls,
- innerValueRef,
- };
- },
- });
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-strength-meter';
-
- .@{prefix-cls} {
- &-bar {
- position: relative;
- height: 6px;
- margin: 10px auto 6px;
- background-color: @disabled-color;
- border-radius: 6px;
-
- &::before,
- &::after {
- position: absolute;
- z-index: 10;
- display: block;
- width: 20%;
- height: inherit;
- background-color: transparent;
- border-color: @white;
- border-style: solid;
- border-width: 0 5px;
- content: '';
- }
-
- &::before {
- left: 20%;
- }
-
- &::after {
- right: 20%;
- }
-
- &--fill {
- position: absolute;
- width: 0;
- height: inherit;
- background-color: transparent;
- border-radius: inherit;
- transition: width 0.5s ease-in-out, background 0.25s;
-
- &[data-score='0'] {
- width: 20%;
- background-color: darken(@error-color, 10%);
- }
-
- &[data-score='1'] {
- width: 40%;
- background-color: @error-color;
- }
-
- &[data-score='2'] {
- width: 60%;
- background-color: @warning-color;
- }
-
- &[data-score='3'] {
- width: 80%;
- background-color: fade(@success-color, 50%);
- }
-
- &[data-score='4'] {
- width: 100%;
- background-color: @success-color;
- }
- }
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Time/index.ts b/streampark-console/streampark-console-webapp/src/components/Time/index.ts
deleted file mode 100644
index 7da17f2bc..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Time/index.ts
+++ /dev/null
@@ -1,20 +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
- *
- * https://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.
- */
-import { withInstall } from '/@/utils/index';
-import time from './src/Time.vue';
-
-export const Time = withInstall(time);
diff --git a/streampark-console/streampark-console-webapp/src/components/Time/src/Time.vue b/streampark-console/streampark-console-webapp/src/components/Time/src/Time.vue
deleted file mode 100644
index a08f17c54..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Time/src/Time.vue
+++ /dev/null
@@ -1,124 +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
-
- https://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.
--->
-<template>
- <span>{{ date }}</span>
-</template>
-<script lang="ts">
- import { defineComponent, ref, watch } from 'vue';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useIntervalFn } from '@vueuse/core';
- import { formatToDateTime, formatToDate, dateUtil } from '/@/utils/dateUtil';
- import { isNumber, isObject, isString } from '/@/utils/is';
- import { propTypes } from '/@/utils/propTypes';
-
- const ONE_SECONDS = 1000;
- const ONE_MINUTES = ONE_SECONDS * 60;
- const ONE_HOUR = ONE_MINUTES * 60;
- const ONE_DAY = ONE_HOUR * 24;
-
- export default defineComponent({
- name: 'Time',
- props: {
- value: propTypes.oneOfType([propTypes.number, propTypes.instanceOf(Date), propTypes.string])
- .isRequired,
- step: propTypes.number.def(60),
- mode: propTypes.oneOf(['date', 'datetime', 'relative']).def('relative'),
- },
- setup(props) {
- const date = ref('');
-
- const { t } = useI18n();
-
- useIntervalFn(setTime, props.step * ONE_SECONDS);
-
- watch(
- () => props.value,
- () => {
- setTime();
- },
- { immediate: true },
- );
-
- function getTime() {
- const { value } = props;
- let time = 0;
- if (isNumber(value)) {
- const timestamp = value.toString().length > 10 ? value : value * 1000;
- time = new Date(timestamp).getTime();
- } else if (isString(value)) {
- time = new Date(value).getTime();
- } else if (isObject(value)) {
- time = value.getTime();
- }
- return time;
- }
-
- function setTime() {
- const { mode, value } = props;
- const time = getTime();
- if (mode === 'relative') {
- date.value = getRelativeTime(time);
- } else {
- if (mode === 'datetime') {
- date.value = formatToDateTime(value);
- } else if (mode === 'date') {
- date.value = formatToDate(value);
- }
- }
- }
-
- function getRelativeTime(timeStamp: number) {
- const currentTime = new Date().getTime();
-
- // Determine whether the incoming timestamp is earlier than the current timestamp
- const isBefore = dateUtil(timeStamp).isBefore(currentTime);
-
- let diff = currentTime - timeStamp;
- if (!isBefore) {
- diff = -diff;
- }
-
- let resStr = '';
- let dirStr = isBefore ? t('component.time.before') : t('component.time.after');
-
- if (diff < ONE_SECONDS) {
- resStr = t('component.time.just');
- // Less than or equal to 59 seconds
- } else if (diff < ONE_MINUTES) {
- resStr = parseInt(diff / ONE_SECONDS) + t('component.time.seconds') + dirStr;
- // More than 59 seconds, less than or equal to 59 minutes and 59 seconds
- } else if (diff >= ONE_MINUTES && diff < ONE_HOUR) {
- resStr = Math.floor(diff / ONE_MINUTES) + t('component.time.minutes') + dirStr;
- // More than 59 minutes and 59 seconds, less than or equal to 23 hours, 59 minutes and 59 seconds
- } else if (diff >= ONE_HOUR && diff < ONE_DAY) {
- resStr = Math.floor(diff / ONE_HOUR) + t('component.time.hours') + dirStr;
- // More than 23 hours, 59 minutes and 59 seconds, less than or equal to 29 days, 59 minutes and 59 seconds
- } else if (diff >= ONE_DAY && diff < 2623860000) {
- resStr = Math.floor(diff / ONE_DAY) + t('component.time.days') + dirStr;
- // More than 29 days, 59 minutes, 59 seconds, less than 364 days, 23 hours, 59 minutes, 59 seconds, and the incoming timestamp is earlier than the current
- } else if (diff >= 2623860000 && diff <= 31567860000 && isBefore) {
- resStr = dateUtil(timeStamp).format('MM-DD-HH-mm');
- } else {
- resStr = dateUtil(timeStamp).format('YYYY');
- }
- return resStr;
- }
-
- return { date };
- },
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/index.ts b/streampark-console/streampark-console-webapp/src/components/Upload/index.ts
deleted file mode 100644
index 7a24df609..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/index.ts
+++ /dev/null
@@ -1,20 +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
- *
- * https://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.
- */
-import { withInstall } from '/@/utils';
-import basicUpload from './src/BasicUpload.vue';
-
-export const BasicUpload = withInstall(basicUpload);
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/BasicUpload.vue b/streampark-console/streampark-console-webapp/src/components/Upload/src/BasicUpload.vue
deleted file mode 100644
index c77c696a0..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/BasicUpload.vue
+++ /dev/null
@@ -1,137 +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
-
- https://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.
--->
-<template>
- <div>
- <Space>
- <a-button type="primary" @click="openUploadModal" preIcon="carbon:cloud-upload">
- {{ t('component.upload.upload') }}
- </a-button>
- <Tooltip placement="bottom" v-if="showPreview">
- <template #title>
- {{ t('component.upload.uploaded') }}
- <template v-if="fileList.length">
- {{ fileList.length }}
- </template>
- </template>
- <a-button @click="openPreviewModal">
- <Icon icon="bi:eye" />
- <template v-if="fileList.length && showPreviewNumber">
- {{ fileList.length }}
- </template>
- </a-button>
- </Tooltip>
- </Space>
- <UploadModal
- v-bind="bindValue"
- :previewFileList="fileList"
- @register="registerUploadModal"
- @change="handleChange"
- @delete="handleDelete"
- />
-
- <UploadPreviewModal
- :value="fileList"
- @register="registerPreviewModal"
- @list-change="handlePreviewChange"
- @delete="handlePreviewDelete"
- />
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, ref, watch, unref, computed } from 'vue';
- import { Icon } from '/@/components/Icon';
- import { Tooltip, Space } from 'ant-design-vue';
- import { useModal } from '/@/components/Modal';
- import { uploadContainerProps } from './props';
- import { omit } from 'lodash-es';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { isArray } from '/@/utils/is';
- import UploadModal from './UploadModal.vue';
- import UploadPreviewModal from './UploadPreviewModal.vue';
-
- export default defineComponent({
- name: 'BasicUpload',
- components: { UploadModal, Space, UploadPreviewModal, Icon, Tooltip },
- props: uploadContainerProps,
- emits: ['change', 'delete', 'preview-delete', 'update:value'],
-
- setup(props, { emit, attrs }) {
- const { t } = useI18n();
- // upload modal
- const [registerUploadModal, { openModal: openUploadModal }] = useModal();
-
- // preview modal
- const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
-
- const fileList = ref<string[]>([]);
-
- const showPreview = computed(() => {
- const { emptyHidePreview } = props;
- if (!emptyHidePreview) return true;
- return emptyHidePreview ? fileList.value.length > 0 : true;
- });
-
- const bindValue = computed(() => {
- const value = { ...attrs, ...props };
- return omit(value, 'onChange');
- });
-
- watch(
- () => props.value,
- (value = []) => {
- fileList.value = isArray(value) ? value : [];
- },
- { immediate: true },
- );
-
- function handleChange(urls: string[]) {
- fileList.value = [...unref(fileList), ...(urls || [])];
- emit('update:value', fileList.value);
- emit('change', fileList.value);
- }
-
- function handlePreviewChange(urls: string[]) {
- fileList.value = [...(urls || [])];
- emit('update:value', fileList.value);
- emit('change', fileList.value);
- }
-
- function handleDelete(record: Recordable) {
- emit('delete', record);
- }
-
- function handlePreviewDelete(url: string) {
- emit('preview-delete', url);
- }
-
- return {
- registerUploadModal,
- openUploadModal,
- handleChange,
- handlePreviewChange,
- registerPreviewModal,
- openPreviewModal,
- fileList,
- showPreview,
- bindValue,
- handleDelete,
- handlePreviewDelete,
- t,
- };
- },
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/FileList.vue b/streampark-console/streampark-console-webapp/src/components/Upload/src/FileList.vue
deleted file mode 100644
index 77b1e49b3..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/FileList.vue
+++ /dev/null
@@ -1,120 +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
-
- https://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.
--->
-<script lang="tsx">
- import { defineComponent, CSSProperties, watch, nextTick } from 'vue';
- import { fileListProps } from './props';
- import { isFunction } from '/@/utils/is';
- import { useModalContext } from '/@/components/Modal/src/hooks/useModalContext';
-
- export default defineComponent({
- name: 'FileList',
- props: fileListProps,
- setup(props) {
- const modalFn = useModalContext();
- watch(
- () => props.dataSource,
- () => {
- nextTick(() => {
- modalFn?.redoModalHeight?.();
- });
- },
- );
- return () => {
- const { columns, actionColumn, dataSource } = props;
- const columnList = [...columns, actionColumn];
- return (
- <table class="file-table">
- <colgroup>
- {columnList.map((item) => {
- const { width = 0, dataIndex } = item;
- const style: CSSProperties = {
- width: `${width}px`,
- minWidth: `${width}px`,
- };
- return <col style={width ? style : {}} key={dataIndex} />;
- })}
- </colgroup>
- <thead>
- <tr class="file-table-tr">
- {columnList.map((item) => {
- const { title = '', align = 'center', dataIndex } = item;
- return (
- <th class={['file-table-th', align]} key={dataIndex}>
- {title}
- </th>
- );
- })}
- </tr>
- </thead>
- <tbody>
- {dataSource.map((record = {}, index) => {
- return (
- <tr class="file-table-tr" key={`${index + record.name || ''}`}>
- {columnList.map((item) => {
- const { dataIndex = '', customRender, align = 'center' } = item;
- const render = customRender && isFunction(customRender);
- return (
- <td class={['file-table-td', align]} key={dataIndex}>
- {render
- ? customRender?.({ text: record[dataIndex], record })
- : record[dataIndex]}
- </td>
- );
- })}
- </tr>
- );
- })}
- </tbody>
- </table>
- );
- };
- },
- });
-</script>
-<style lang="less">
- .file-table {
- width: 100%;
- border-collapse: collapse;
-
- .center {
- text-align: center;
- }
-
- .left {
- text-align: left;
- }
-
- .right {
- text-align: right;
- }
-
- &-th,
- &-td {
- padding: 12px 8px;
- }
-
- thead {
- background-color: @background-color-light;
- }
-
- table,
- td,
- th {
- border: 1px solid @border-color-base;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/ThumbUrl.vue b/streampark-console/streampark-console-webapp/src/components/Upload/src/ThumbUrl.vue
deleted file mode 100644
index 59b0c5626..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/ThumbUrl.vue
+++ /dev/null
@@ -1,45 +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
-
- https://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.
--->
-<template>
- <span class="thumb">
- <Image v-if="fileUrl" :src="fileUrl" :width="104" />
- </span>
-</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
- import { propTypes } from '/@/utils/propTypes';
- import { Image } from 'ant-design-vue';
-
- export default defineComponent({
- components: { Image },
- props: {
- fileUrl: propTypes.string.def(''),
- fileName: propTypes.string.def(''),
- },
- });
-</script>
-<style lang="less">
- .thumb {
- img {
- position: static;
- display: block;
- cursor: zoom-in;
- border-radius: 4px;
- object-fit: cover;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/UploadModal.vue b/streampark-console/streampark-console-webapp/src/components/Upload/src/UploadModal.vue
deleted file mode 100644
index 5f982b8a1..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/UploadModal.vue
+++ /dev/null
@@ -1,327 +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
-
- https://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.
--->
-<template>
- <BasicModal
- width="800px"
- :title="t('component.upload.upload')"
- :okText="t('component.upload.save')"
- v-bind="$attrs"
- @register="register"
- @ok="handleOk"
- :closeFunc="handleCloseFunc"
- :maskClosable="false"
- :keyboard="false"
- class="upload-modal"
- :okButtonProps="getOkButtonProps"
- :cancelButtonProps="{ disabled: isUploadingRef }"
- >
- <template #centerFooter>
- <a-button
- @click="handleStartUpload"
- color="success"
- :disabled="!getIsSelectFile"
- :loading="isUploadingRef"
- >
- {{ getUploadBtnText }}
- </a-button>
- </template>
-
- <div class="upload-modal-toolbar">
- <Alert :message="getHelpText" type="info" banner class="upload-modal-toolbar__text" />
-
- <Upload
- :accept="getStringAccept"
- :multiple="multiple"
- :before-upload="beforeUpload"
- :show-upload-list="false"
- class="upload-modal-toolbar__btn"
- >
- <a-button type="primary">
- {{ t('component.upload.choose') }}
- </a-button>
- </Upload>
- </div>
- <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
- </BasicModal>
-</template>
-<script lang="ts">
- import { defineComponent, reactive, ref, toRefs, unref, computed, PropType } from 'vue';
- import { Upload, Alert } from 'ant-design-vue';
- import { BasicModal, useModalInner } from '/@/components/Modal';
- // import { BasicTable, useTable } from '/@/components/Table';
- // hooks
- import { useUploadType } from './useUpload';
- import { useMessage } from '/@/hooks/web/useMessage';
- // types
- import { FileItem, UploadResultStatus } from './typing';
- import { basicProps } from './props';
- import { createTableColumns, createActionColumn } from './data';
- // utils
- import { checkImgType, getBase64WithFile } from './helper';
- import { buildUUID } from '/@/utils/uuid';
- import { isFunction } from '/@/utils/is';
- import { warn } from '/@/utils/log';
- import FileList from './FileList.vue';
- import { useI18n } from '/@/hooks/web/useI18n';
-
- export default defineComponent({
- components: { BasicModal, Upload, Alert, FileList },
- props: {
- ...basicProps,
- previewFileList: {
- type: Array as PropType<string[]>,
- default: () => [],
- },
- },
- emits: ['change', 'register', 'delete'],
- setup(props, { emit }) {
- const state = reactive<{ fileList: FileItem[] }>({
- fileList: [],
- });
-
- // Whether it is uploading
- const isUploadingRef = ref(false);
- const fileListRef = ref<FileItem[]>([]);
- const { accept, helpText, maxNumber, maxSize } = toRefs(props);
-
- const { t } = useI18n();
- const [register, { closeModal }] = useModalInner();
-
- const { getStringAccept, getHelpText } = useUploadType({
- acceptRef: accept,
- helpTextRef: helpText,
- maxNumberRef: maxNumber,
- maxSizeRef: maxSize,
- });
-
- const { createMessage } = useMessage();
-
- const getIsSelectFile = computed(() => {
- return (
- fileListRef.value.length > 0 &&
- !fileListRef.value.every((item) => item.status === UploadResultStatus.SUCCESS)
- );
- });
-
- const getOkButtonProps = computed(() => {
- const someSuccess = fileListRef.value.some(
- (item) => item.status === UploadResultStatus.SUCCESS,
- );
- return {
- disabled: isUploadingRef.value || fileListRef.value.length === 0 || !someSuccess,
- };
- });
-
- const getUploadBtnText = computed(() => {
- const someError = fileListRef.value.some(
- (item) => item.status === UploadResultStatus.ERROR,
- );
- return isUploadingRef.value
- ? t('component.upload.uploading')
- : someError
- ? t('component.upload.reUploadFailed')
- : t('component.upload.startUpload');
- });
-
- function beforeUpload(file: File) {
- const { size, name } = file;
- const { maxSize } = props;
- // Set the maximum value, then judge
- if (maxSize && file.size / 1024 / 1024 >= maxSize) {
- createMessage.error(t('component.upload.maxSizeMultiple', [maxSize]));
- return false;
- }
-
- const commonItem = {
- uuid: buildUUID(),
- file,
- size,
- name,
- percent: 0,
- type: name.split('.').pop(),
- };
- // Generate a thumbnail of the picture
- if (checkImgType(file)) {
- // beforeUpload, if asynchronous, the out-of-the-box upload method is called
- // file.thumbUrl = await getBase64(file);
- getBase64WithFile(file).then(({ result: thumbUrl }) => {
- fileListRef.value = [
- ...unref(fileListRef),
- {
- thumbUrl,
- ...commonItem,
- },
- ];
- });
- } else {
- fileListRef.value = [...unref(fileListRef), commonItem];
- }
- return false;
- }
-
- function handleRemove(record: FileItem) {
- const index = fileListRef.value.findIndex((item) => item.uuid === record.uuid);
- index !== -1 && fileListRef.value.splice(index, 1);
- emit('delete', record);
- }
-
- async function uploadApiByItem(item: FileItem) {
- const { api } = props;
- if (!api || !isFunction(api)) {
- return warn('upload api must exist and be a function');
- }
- try {
- item.status = UploadResultStatus.UPLOADING;
- const { data } = await props.api?.(
- {
- data: {
- ...(props.uploadParams || {}),
- },
- file: item.file,
- name: props.name,
- filename: props.filename,
- },
- function onUploadProgress(progressEvent: ProgressEvent) {
- const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
- item.percent = complete;
- },
- );
- item.status = UploadResultStatus.SUCCESS;
- item.responseData = data;
- return {
- success: true,
- error: null,
- };
- } catch (e) {
- console.log(e);
- item.status = UploadResultStatus.ERROR;
- return {
- success: false,
- error: e,
- };
- }
- }
-
- // Click to start uploading
- async function handleStartUpload() {
- const { maxNumber } = props;
- if ((fileListRef.value.length + props.previewFileList?.length ?? 0) > maxNumber) {
- return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
- }
- try {
- isUploadingRef.value = true;
- // Only uploads are not successful
- const uploadFileList =
- fileListRef.value.filter((item) => item.status !== UploadResultStatus.SUCCESS) || [];
- const data = await Promise.all(
- uploadFileList.map((item) => {
- return uploadApiByItem(item);
- }),
- );
- isUploadingRef.value = false;
- // Production environment: Throws an error
- const errorList = data.filter((item: any) => !item.success);
- if (errorList.length > 0) throw errorList;
- } catch (e) {
- isUploadingRef.value = false;
- throw e;
- }
- }
-
- function handleOk() {
- const { maxNumber } = props;
-
- if (fileListRef.value.length > maxNumber) {
- return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
- }
- if (isUploadingRef.value) {
- return createMessage.warning(t('component.upload.saveWarn'));
- }
- const fileList: string[] = [];
-
- for (const item of fileListRef.value) {
- const { status, responseData } = item;
- if (status === UploadResultStatus.SUCCESS && responseData) {
- fileList.push(responseData.url);
- }
- }
- // If there is a successful upload, it can be saved
- if (fileList.length <= 0) {
- return createMessage.warning(t('component.upload.saveError'));
- }
- fileListRef.value = [];
- closeModal();
- emit('change', fileList);
- }
-
- // Click Close: All operations are not saved, including uploaded
- async function handleCloseFunc() {
- if (!isUploadingRef.value) {
- fileListRef.value = [];
- return true;
- } else {
- createMessage.warning(t('component.upload.uploadWait'));
- return false;
- }
- }
-
- return {
- columns: createTableColumns() as any[],
- actionColumn: createActionColumn(handleRemove) as any,
- register,
- closeModal,
- getHelpText,
- getStringAccept,
- getOkButtonProps,
- beforeUpload,
- // registerTable,
- fileListRef,
- state,
- isUploadingRef,
- handleStartUpload,
- handleOk,
- handleCloseFunc,
- getIsSelectFile,
- getUploadBtnText,
- t,
- };
- },
- });
-</script>
-<style lang="less">
- .upload-modal {
- .ant-upload-list {
- display: none;
- }
-
- .ant-table-wrapper .ant-spin-nested-loading {
- padding: 0;
- }
-
- &-toolbar {
- display: flex;
- align-items: center;
- margin-bottom: 8px;
-
- &__btn {
- margin-left: 8px;
- text-align: right;
- flex: 1;
- }
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/UploadPreviewModal.vue b/streampark-console/streampark-console-webapp/src/components/Upload/src/UploadPreviewModal.vue
deleted file mode 100644
index 5d95ec9d9..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/UploadPreviewModal.vue
+++ /dev/null
@@ -1,115 +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
-
- https://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.
--->
-<template>
- <BasicModal
- width="800px"
- :title="t('component.upload.preview')"
- class="upload-preview-modal"
- v-bind="$attrs"
- @register="register"
- :showOkBtn="false"
- >
- <FileList :dataSource="fileListRef" :columns="columns" :actionColumn="actionColumn" />
- </BasicModal>
-</template>
-<script lang="ts">
- import { defineComponent, watch, ref } from 'vue';
- // import { BasicTable, useTable } from '/@/components/Table';
- import FileList from './FileList.vue';
- import { BasicModal, useModalInner } from '/@/components/Modal';
- import { previewProps } from './props';
- import { PreviewFileItem } from './typing';
- import { downloadByUrl } from '/@/utils/file/download';
- import { createPreviewColumns, createPreviewActionColumn } from './data';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { isArray } from '/@/utils/is';
-
- export default defineComponent({
- components: { BasicModal, FileList },
- props: previewProps,
- emits: ['list-change', 'register', 'delete'],
- setup(props, { emit }) {
- const [register, { closeModal }] = useModalInner();
- const { t } = useI18n();
-
- const fileListRef = ref<PreviewFileItem[]>([]);
- watch(
- () => props.value,
- (value) => {
- if (!isArray(value)) value = [];
- fileListRef.value = value
- .filter((item) => !!item)
- .map((item) => {
- return {
- url: item,
- type: item.split('.').pop() || '',
- name: item.split('/').pop() || '',
- };
- });
- },
- { immediate: true },
- );
-
- // remove
- function handleRemove(record: PreviewFileItem) {
- const index = fileListRef.value.findIndex((item) => item.url === record.url);
- if (index !== -1) {
- const removed = fileListRef.value.splice(index, 1);
- emit('delete', removed[0].url);
- emit(
- 'list-change',
- fileListRef.value.map((item) => item.url),
- );
- }
- }
-
- // preview
- // function handlePreview(record: PreviewFileItem) {
- // const { url = '' } = record;
- // createImgPreview({
- // imageList: [url],
- // });
- // }
-
- // download
- function handleDownload(record: PreviewFileItem) {
- const { url = '' } = record;
- downloadByUrl({ url });
- }
-
- return {
- t,
- register,
- closeModal,
- fileListRef,
- columns: createPreviewColumns() as any[],
- actionColumn: createPreviewActionColumn({ handleRemove, handleDownload }) as any,
- };
- },
- });
-</script>
-<style lang="less">
- .upload-preview-modal {
- .ant-upload-list {
- display: none;
- }
-
- .ant-table-wrapper .ant-spin-nested-loading {
- padding: 0;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/data.tsx b/streampark-console/streampark-console-webapp/src/components/Upload/src/data.tsx
deleted file mode 100644
index f3fcac0be..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/data.tsx
+++ /dev/null
@@ -1,164 +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
- *
- * https://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.
- */
-import type { BasicColumn, ActionItem } from '/@/components/Table';
-import { FileItem, PreviewFileItem, UploadResultStatus } from './typing';
-import {
- // checkImgType,
- isImgTypeByName,
-} from './helper';
-import { Progress, Tag } from 'ant-design-vue';
-import TableAction from '/@/components/Table/src/components/TableAction.vue';
-import ThumbUrl from './ThumbUrl.vue';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-const { t } = useI18n();
-
-// File upload list
-export function createTableColumns(): BasicColumn[] {
- return [
- {
- dataIndex: 'thumbUrl',
- title: t('component.upload.legend'),
- width: 100,
- customRender: ({ record }) => {
- const { thumbUrl } = (record as FileItem) || {};
- return thumbUrl && <ThumbUrl fileUrl={thumbUrl} />;
- },
- },
- {
- dataIndex: 'name',
- title: t('component.upload.fileName'),
- align: 'left',
- customRender: ({ text, record }) => {
- const { percent, status: uploadStatus } = (record as FileItem) || {};
- let status: 'normal' | 'exception' | 'active' | 'success' = 'normal';
- if (uploadStatus === UploadResultStatus.ERROR) {
- status = 'exception';
- } else if (uploadStatus === UploadResultStatus.UPLOADING) {
- status = 'active';
- } else if (uploadStatus === UploadResultStatus.SUCCESS) {
- status = 'success';
- }
- return (
- <span>
- <p class="truncate mb-1" title={text}>
- {text}
- </p>
- <Progress percent={percent} size="small" status={status} />
- </span>
- );
- },
- },
- {
- dataIndex: 'size',
- title: t('component.upload.fileSize'),
- width: 100,
- customRender: ({ text = 0 }) => {
- return text && (text / 1024).toFixed(2) + 'KB';
- },
- },
- {
- dataIndex: 'status',
- title: t('component.upload.fileStatue'),
- width: 100,
- customRender: ({ text }) => {
- if (text === UploadResultStatus.SUCCESS) {
- return <Tag color="green">{() => t('component.upload.uploadSuccess')}</Tag>;
- } else if (text === UploadResultStatus.ERROR) {
- return <Tag color="red">{() => t('component.upload.uploadError')}</Tag>;
- } else if (text === UploadResultStatus.UPLOADING) {
- return <Tag color="blue">{() => t('component.upload.uploading')}</Tag>;
- }
-
- return text;
- },
- },
- ];
-}
-export function createActionColumn(handleRemove: Function): BasicColumn {
- return {
- width: 120,
- title: t('component.upload.operating'),
- dataIndex: 'action',
- fixed: false,
- customRender: ({ record }) => {
- const actions: ActionItem[] = [
- {
- label: t('component.upload.del'),
- color: 'error',
- onClick: handleRemove.bind(null, record),
- },
- ];
- // if (checkImgType(record)) {
- // actions.unshift({
- // label: t('component.upload.preview'),
- // onClick: handlePreview.bind(null, record),
- // });
- // }
- return <TableAction actions={actions} outside={true} />;
- },
- };
-}
-// A list of file previews
-export function createPreviewColumns(): BasicColumn[] {
- return [
- {
- dataIndex: 'url',
- title: t('component.upload.legend'),
- width: 100,
- customRender: ({ record }) => {
- const { url } = (record as PreviewFileItem) || {};
- return isImgTypeByName(url) && <ThumbUrl fileUrl={url} />;
- },
- },
- {
- dataIndex: 'name',
- title: t('component.upload.fileName'),
- align: 'left',
- },
- ];
-}
-
-export function createPreviewActionColumn({
- handleRemove,
- handleDownload,
-}: {
- handleRemove: Fn;
- handleDownload: Fn;
-}): BasicColumn {
- return {
- width: 160,
- title: t('component.upload.operating'),
- dataIndex: 'action',
- fixed: false,
- customRender: ({ record }) => {
- const actions: ActionItem[] = [
- {
- label: t('component.upload.del'),
- color: 'error',
- onClick: handleRemove.bind(null, record),
- },
- {
- label: t('component.upload.download'),
- onClick: handleDownload.bind(null, record),
- },
- ];
-
- return <TableAction actions={actions} outside={true} />;
- },
- };
-}
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/helper.ts b/streampark-console/streampark-console-webapp/src/components/Upload/src/helper.ts
deleted file mode 100644
index 17da8ac91..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/helper.ts
+++ /dev/null
@@ -1,43 +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
- *
- * https://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.
- */
-export function checkFileType(file: File, accepts: string[]) {
- const newTypes = accepts.join('|');
- // const reg = /\.(jpg|jpeg|png|gif|txt|doc|docx|xls|xlsx|xml)$/i;
- const reg = new RegExp('\\.(' + newTypes + ')$', 'i');
-
- return reg.test(file.name);
-}
-
-export function checkImgType(file: File) {
- return isImgTypeByName(file.name);
-}
-
-export function isImgTypeByName(name: string) {
- return /\.(jpg|jpeg|png|gif)$/i.test(name);
-}
-
-export function getBase64WithFile(file: File) {
- return new Promise<{
- result: string;
- file: File;
- }>((resolve, reject) => {
- const reader = new FileReader();
- reader.readAsDataURL(file);
- reader.onload = () => resolve({ result: reader.result as string, file });
- reader.onerror = (error) => reject(error);
- });
-}
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/props.ts b/streampark-console/streampark-console-webapp/src/components/Upload/src/props.ts
deleted file mode 100644
index 7c136b75b..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/props.ts
+++ /dev/null
@@ -1,97 +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
- *
- * https://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.
- */
-import type { PropType } from 'vue';
-import { FileBasicColumn } from './typing';
-
-export const basicProps = {
- helpText: {
- type: String as PropType<string>,
- default: '',
- },
- maxSize: {
- type: Number as PropType<number>,
- default: 2,
- },
- // The maximum number of files is not limited by Infinity
- maxNumber: {
- type: Number as PropType<number>,
- default: Infinity,
- },
- accept: {
- type: Array as PropType<string[]>,
- default: () => [],
- },
- multiple: {
- type: Boolean as PropType<boolean>,
- default: true,
- },
- uploadParams: {
- type: Object as PropType<any>,
- default: () => ({}),
- },
- api: {
- type: Function as PropType<PromiseFn>,
- default: null,
- required: true,
- },
- name: {
- type: String as PropType<string>,
- default: 'file',
- },
- filename: {
- type: String as PropType<string>,
- default: null,
- },
-};
-
-export const uploadContainerProps = {
- value: {
- type: Array as PropType<string[]>,
- default: () => [],
- },
- ...basicProps,
- showPreviewNumber: {
- type: Boolean as PropType<boolean>,
- default: true,
- },
- emptyHidePreview: {
- type: Boolean as PropType<boolean>,
- default: false,
- },
-};
-
-export const previewProps = {
- value: {
- type: Array as PropType<string[]>,
- default: () => [],
- },
-};
-
-export const fileListProps = {
- columns: {
- type: [Array] as PropType<FileBasicColumn[]>,
- default: null,
- },
- actionColumn: {
- type: Object as PropType<FileBasicColumn>,
- default: null,
- },
- dataSource: {
- type: Array as PropType<any[]>,
- default: null,
- },
-};
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/typing.ts b/streampark-console/streampark-console-webapp/src/components/Upload/src/typing.ts
deleted file mode 100644
index cc2eff980..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/typing.ts
+++ /dev/null
@@ -1,70 +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
- *
- * https://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.
- */
-
-export enum UploadResultStatus {
- SUCCESS = 'success',
- ERROR = 'error',
- UPLOADING = 'uploading',
-}
-
-export interface FileItem {
- thumbUrl?: string;
- name: string;
- size: string | number;
- type?: string;
- percent: number;
- file: File;
- status?: UploadResultStatus;
- responseData?: any;
- uuid: string;
-}
-
-export interface PreviewFileItem {
- url: string;
- name: string;
- type: string;
-}
-
-export interface FileBasicColumn {
- /**
- * Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config
- * @type Function | ScopedSlot
- */
- customRender?: Function;
- /**
- * Title of this column
- * @type any (string | slot)
- */
- title: string;
-
- /**
- * Width of this column
- * @type string | number
- */
- width?: number;
- /**
- * Display field of the data record, could be set like a.b.c
- * @type string
- */
- dataIndex: string;
- /**
- * specify how content is aligned
- * @default 'left'
- * @type string
- */
- align?: 'left' | 'right' | 'center';
-}
diff --git a/streampark-console/streampark-console-webapp/src/components/Upload/src/useUpload.ts b/streampark-console/streampark-console-webapp/src/components/Upload/src/useUpload.ts
deleted file mode 100644
index bebcb4bae..000000000
--- a/streampark-console/streampark-console-webapp/src/components/Upload/src/useUpload.ts
+++ /dev/null
@@ -1,76 +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
- *
- * https://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.
- */
-import { Ref, unref, computed } from 'vue';
-import { useI18n } from '/@/hooks/web/useI18n';
-const { t } = useI18n();
-export function useUploadType({
- acceptRef,
- helpTextRef,
- maxNumberRef,
- maxSizeRef,
-}: {
- acceptRef: Ref<string[]>;
- helpTextRef: Ref<string>;
- maxNumberRef: Ref<number>;
- maxSizeRef: Ref<number>;
-}) {
- // File type restrictions
- const getAccept = computed(() => {
- const accept = unref(acceptRef);
- if (accept && accept.length > 0) {
- return accept;
- }
- return [];
- });
- const getStringAccept = computed(() => {
- return unref(getAccept)
- .map((item) => {
- if (item.indexOf('/') > 0 || item.startsWith('.')) {
- return item;
- } else {
- return `.${item}`;
- }
- })
- .join(',');
- });
-
- // Support jpg, jpeg, png format, no more than 2M, up to 10 pictures.
- const getHelpText = computed(() => {
- const helpText = unref(helpTextRef);
- if (helpText) {
- return helpText;
- }
- const helpTexts: string[] = [];
-
- const accept = unref(acceptRef);
- if (accept.length > 0) {
- helpTexts.push(t('component.upload.accept', [accept.join(',')]));
- }
-
- const maxSize = unref(maxSizeRef);
- if (maxSize) {
- helpTexts.push(t('component.upload.maxSize', [maxSize]));
- }
-
- const maxNumber = unref(maxNumberRef);
- if (maxNumber && maxNumber !== Infinity) {
- helpTexts.push(t('component.upload.maxNumber', [maxNumber]));
- }
- return helpTexts.join('，');
- });
- return { getAccept, getStringAccept, getHelpText };
-}
diff --git a/streampark-console/streampark-console-webapp/src/components/VirtualScroll/index.ts b/streampark-console/streampark-console-webapp/src/components/VirtualScroll/index.ts
deleted file mode 100644
index 18bf523af..000000000
--- a/streampark-console/streampark-console-webapp/src/components/VirtualScroll/index.ts
+++ /dev/null
@@ -1,20 +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
- *
- * https://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.
- */
-import { withInstall } from '/@/utils/index';
-import vScroll from './src/VirtualScroll.vue';
-
-export const VScroll = withInstall(vScroll);
diff --git a/streampark-console/streampark-console-webapp/src/components/VirtualScroll/src/VirtualScroll.vue b/streampark-console/streampark-console-webapp/src/components/VirtualScroll/src/VirtualScroll.vue
deleted file mode 100644
index 6ce28a0ec..000000000
--- a/streampark-console/streampark-console-webapp/src/components/VirtualScroll/src/VirtualScroll.vue
+++ /dev/null
@@ -1,206 +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
-
- https://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.
--->
-<script lang="tsx">
- import {
- defineComponent,
- computed,
- ref,
- unref,
- reactive,
- onMounted,
- watch,
- nextTick,
- CSSProperties,
- } from 'vue';
- import { useEventListener } from '/@/hooks/event/useEventListener';
- import { getSlot } from '/@/utils/helper/tsxHelper';
-
- type NumberOrNumberString = PropType<string | number | undefined>;
-
- const props = {
- height: [Number, String] as NumberOrNumberString,
- maxHeight: [Number, String] as NumberOrNumberString,
- maxWidth: [Number, String] as NumberOrNumberString,
- minHeight: [Number, String] as NumberOrNumberString,
- minWidth: [Number, String] as NumberOrNumberString,
- width: [Number, String] as NumberOrNumberString,
- bench: {
- type: [Number, String] as NumberOrNumberString,
- default: 0,
- },
- itemHeight: {
- type: [Number, String] as NumberOrNumberString,
- required: true,
- },
- items: {
- type: Array as PropType<any[]>,
- default: () => [],
- },
- };
-
- const prefixCls = 'virtual-scroll';
-
- function convertToUnit(str: string | number | null | undefined, unit = 'px'): string | undefined {
- if (str == null || str === '') {
- return undefined;
- } else if (isNaN(+str!)) {
- return String(str);
- } else {
- return `${Number(str)}${unit}`;
- }
- }
-
- export default defineComponent({
- name: 'VirtualScroll',
- props,
- setup(props, { slots }) {
- const wrapElRef = ref<HTMLDivElement | null>(null);
- const state = reactive({
- first: 0,
- last: 0,
- scrollTop: 0,
- });
-
- const getBenchRef = computed(() => {
- return parseInt(props.bench as string, 10);
- });
-
- const getItemHeightRef = computed(() => {
- return parseInt(props.itemHeight as string, 10);
- });
-
- const getFirstToRenderRef = computed(() => {
- return Math.max(0, state.first - unref(getBenchRef));
- });
-
- const getLastToRenderRef = computed(() => {
- return Math.min((props.items || []).length, state.last + unref(getBenchRef));
- });
-
- const getContainerStyleRef = computed((): CSSProperties => {
- return {
- height: convertToUnit((props.items || []).length * unref(getItemHeightRef)),
- };
- });
-
- const getWrapStyleRef = computed((): CSSProperties => {
- const styles: Recordable<string> = {};
- const height = convertToUnit(props.height);
- const minHeight = convertToUnit(props.minHeight);
- const minWidth = convertToUnit(props.minWidth);
- const maxHeight = convertToUnit(props.maxHeight);
- const maxWidth = convertToUnit(props.maxWidth);
- const width = convertToUnit(props.width);
-
- if (height) styles.height = height;
- if (minHeight) styles.minHeight = minHeight;
- if (minWidth) styles.minWidth = minWidth;
- if (maxHeight) styles.maxHeight = maxHeight;
- if (maxWidth) styles.maxWidth = maxWidth;
- if (width) styles.width = width;
- return styles;
- });
-
- watch([() => props.itemHeight, () => props.height], () => {
- onScroll();
- });
-
- function getLast(first: number): number {
- const wrapEl = unref(wrapElRef);
- if (!wrapEl) {
- return 0;
- }
- const height = parseInt(props.height || 0, 10) || wrapEl.clientHeight;
-
- return first + Math.ceil(height / unref(getItemHeightRef));
- }
-
- function getFirst(): number {
- return Math.floor(state.scrollTop / unref(getItemHeightRef));
- }
-
- function onScroll() {
- const wrapEl = unref(wrapElRef);
- if (!wrapEl) {
- return;
- }
- state.scrollTop = wrapEl.scrollTop;
- state.first = getFirst();
- state.last = getLast(state.first);
- }
-
- function renderChildren() {
- const { items = [] } = props;
- return items.slice(unref(getFirstToRenderRef), unref(getLastToRenderRef)).map(genChild);
- }
-
- function genChild(item: any, index: number) {
- index += unref(getFirstToRenderRef);
- const top = convertToUnit(index * unref(getItemHeightRef));
- return (
- <div class={`${prefixCls}__item`} style={{ top }} key={index}>
- {getSlot(slots, 'default', { index, item })}
- </div>
- );
- }
-
- onMounted(() => {
- state.last = getLast(0);
- nextTick(() => {
- const wrapEl = unref(wrapElRef);
- if (!wrapEl) {
- return;
- }
- useEventListener({
- el: wrapEl,
- name: 'scroll',
- listener: onScroll,
- wait: 0,
- });
- });
- });
-
- return () => (
- <div class={prefixCls} style={unref(getWrapStyleRef)} ref={wrapElRef}>
- <div class={`${prefixCls}__container`} style={unref(getContainerStyleRef)}>
- {renderChildren()}
- </div>
- </div>
- );
- },
- });
-</script>
-<style scoped lang="less">
- .virtual-scroll {
- position: relative;
- display: block;
- width: 100%;
- max-width: 100%;
- overflow: auto;
- flex: 1 1 auto;
-
- &__container {
- display: block;
- }
-
- &__item {
- position: absolute;
- right: 0;
- left: 0;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/directives/repeatClick.ts b/streampark-console/streampark-console-webapp/src/directives/repeatClick.ts
deleted file mode 100644
index 4886514af..000000000
--- a/streampark-console/streampark-console-webapp/src/directives/repeatClick.ts
+++ /dev/null
@@ -1,47 +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
- *
- * https://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.
- */
-/**
- * Prevent repeated clicks
- * @Example v-repeat-click="()=>{}"
- */
-import { on, once } from '/@/utils/domUtils';
-import type { Directive, DirectiveBinding } from 'vue';
-
-const repeatDirective: Directive = {
- beforeMount(el: Element, binding: DirectiveBinding<any>) {
- let interval: Nullable<IntervalHandle> = null;
- let startTime = 0;
- const handler = (): void => binding?.value();
- const clear = (): void => {
- if (Date.now() - startTime < 100) {
- handler();
- }
- interval && clearInterval(interval);
- interval = null;
- };
-
- on(el, 'mousedown', (e: MouseEvent): void => {
- if ((e as any).button !== 0) return;
- startTime = Date.now();
- once(document as any, 'mouseup', clear);
- interval && clearInterval(interval);
- interval = setInterval(handler, 100);
- });
- },
-};
-
-export default repeatDirective;
diff --git a/streampark-console/streampark-console-webapp/src/directives/ripple/index.less b/streampark-console/streampark-console-webapp/src/directives/ripple/index.less
deleted file mode 100644
index 35b7f4119..000000000
--- a/streampark-console/streampark-console-webapp/src/directives/ripple/index.less
+++ /dev/null
@@ -1,37 +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
- *
- * https://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.
- */
-.ripple-container {
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- height: 0;
- overflow: hidden;
- pointer-events: none;
-}
-
-.ripple-effect {
- position: relative;
- z-index: 9999;
- width: 1px;
- height: 1px;
- margin-top: 0;
- margin-left: 0;
- pointer-events: none;
- border-radius: 50%;
- transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
-}
diff --git a/streampark-console/streampark-console-webapp/src/directives/ripple/index.ts b/streampark-console/streampark-console-webapp/src/directives/ripple/index.ts
deleted file mode 100644
index 53f34f27a..000000000
--- a/streampark-console/streampark-console-webapp/src/directives/ripple/index.ts
+++ /dev/null
@@ -1,207 +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
- *
- * https://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.
- */
-import type { Directive } from 'vue';
-import './index.less';
-export interface RippleOptions {
- event: string;
- transition: number;
-}
-
-export interface RippleProto {
- background?: string;
- zIndex?: string;
-}
-
-export type EventType = Event & MouseEvent & TouchEvent;
-
-const options: RippleOptions = {
- event: 'mousedown',
- transition: 400,
-};
-
-const RippleDirective: Directive & RippleProto = {
- beforeMount: (el: HTMLElement, binding) => {
- if (binding.value === false) return;
-
- const bg = el.getAttribute('ripple-background');
- setProps(Object.keys(binding.modifiers), options);
-
- const background = bg || RippleDirective.background;
- const zIndex = RippleDirective.zIndex;
-
- el.addEventListener(options.event, (event: EventType) => {
- rippler({
- event,
- el,
- background,
- zIndex,
- });
- });
- },
- updated(el, binding) {
- if (!binding.value) {
- el?.clearRipple?.();
- return;
- }
- const bg = el.getAttribute('ripple-background');
- el?.setBackground?.(bg);
- },
-};
-
-function rippler({
- event,
- el,
- zIndex,
- background,
-}: { event: EventType; el: HTMLElement } & RippleProto) {
- const targetBorder = parseInt(getComputedStyle(el).borderWidth.replace('px', ''));
- const clientX = event.clientX || event.touches[0].clientX;
- const clientY = event.clientY || event.touches[0].clientY;
-
- const rect = el.getBoundingClientRect();
- const { left, top } = rect;
- const { offsetWidth: width, offsetHeight: height } = el;
- const { transition } = options;
- const dx = clientX - left;
- const dy = clientY - top;
- const maxX = Math.max(dx, width - dx);
- const maxY = Math.max(dy, height - dy);
- const style = window.getComputedStyle(el);
- const radius = Math.sqrt(maxX * maxX + maxY * maxY);
- const border = targetBorder > 0 ? targetBorder : 0;
-
- const ripple = document.createElement('div');
- const rippleContainer = document.createElement('div');
-
- // Styles for ripple
- ripple.className = 'ripple';
-
- Object.assign(ripple.style ?? {}, {
- marginTop: '0px',
- marginLeft: '0px',
- width: '1px',
- height: '1px',
- transition: `all ${transition}ms cubic-bezier(0.4, 0, 0.2, 1)`,
- borderRadius: '50%',
- pointerEvents: 'none',
- position: 'relative',
- zIndex: zIndex ?? '9999',
- backgroundColor: background ?? 'rgba(0, 0, 0, 0.12)',
- });
-
- // Styles for rippleContainer
- rippleContainer.className = 'ripple-container';
- Object.assign(rippleContainer.style ?? {}, {
- position: 'absolute',
- left: `${0 - border}px`,
- top: `${0 - border}px`,
- height: '0',
- width: '0',
- pointerEvents: 'none',
- overflow: 'hidden',
- });
-
- const storedTargetPosition =
- el.style.position.length > 0 ? el.style.position : getComputedStyle(el).position;
-
- if (storedTargetPosition !== 'relative') {
- el.style.position = 'relative';
- }
-
- rippleContainer.appendChild(ripple);
- el.appendChild(rippleContainer);
-
- Object.assign(ripple.style, {
- marginTop: `${dy}px`,
- marginLeft: `${dx}px`,
- });
-
- const {
- borderTopLeftRadius,
- borderTopRightRadius,
- borderBottomLeftRadius,
- borderBottomRightRadius,
- } = style;
- Object.assign(rippleContainer.style, {
- width: `${width}px`,
- height: `${height}px`,
- direction: 'ltr',
- borderTopLeftRadius,
- borderTopRightRadius,
- borderBottomLeftRadius,
- borderBottomRightRadius,
- });
-
- setTimeout(() => {
- const wh = `${radius * 2}px`;
- Object.assign(ripple.style ?? {}, {
- width: wh,
- height: wh,
- marginLeft: `${dx - radius}px`,
- marginTop: `${dy - radius}px`,
- });
- }, 0);
-
- function clearRipple() {
- setTimeout(() => {
- ripple.style.backgroundColor = 'rgba(0, 0, 0, 0)';
- }, 250);
-
- setTimeout(() => {
- rippleContainer?.parentNode?.removeChild(rippleContainer);
- }, 850);
- el.removeEventListener('mouseup', clearRipple, false);
- el.removeEventListener('mouseleave', clearRipple, false);
- el.removeEventListener('dragstart', clearRipple, false);
- setTimeout(() => {
- let clearPosition = true;
- for (let i = 0; i < el.childNodes.length; i++) {
- if ((el.childNodes[i] as Recordable).className === 'ripple-container') {
- clearPosition = false;
- }
- }
-
- if (clearPosition) {
- el.style.position = storedTargetPosition !== 'static' ? storedTargetPosition : '';
- }
- }, options.transition + 260);
- }
-
- if (event.type === 'mousedown') {
- el.addEventListener('mouseup', clearRipple, false);
- el.addEventListener('mouseleave', clearRipple, false);
- el.addEventListener('dragstart', clearRipple, false);
- } else {
- clearRipple();
- }
-
- (el as Recordable).setBackground = (bgColor: string) => {
- if (!bgColor) {
- return;
- }
- ripple.style.backgroundColor = bgColor;
- };
-}
-
-function setProps(modifiers: Recordable, props: Recordable) {
- modifiers.forEach((item: Recordable) => {
- if (isNaN(Number(item))) props.event = item;
- else props.transition = item;
- });
-}
-
-export default RippleDirective;
diff --git a/streampark-console/streampark-console-webapp/src/hooks/web/useMessage.tsx b/streampark-console/streampark-console-webapp/src/hooks/web/useMessage.tsx
index 6557dbb4a..a153ae351 100644
--- a/streampark-console/streampark-console-webapp/src/hooks/web/useMessage.tsx
+++ b/streampark-console/streampark-console-webapp/src/hooks/web/useMessage.tsx
@@ -66,7 +66,7 @@ function getIcon(iconType: string) {
function renderContent({ content }: Pick<ModalOptionsEx, 'content'>) {
if (isString(content)) {
- return <div innerHTML={`<div>${content as string}</div>`}></div>;
+ return <div innerHTML={`<div class='pt-20px'>${content as string}</div>`}></div>;
} else {
return content;
}
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/feature/index.vue b/streampark-console/streampark-console-webapp/src/layouts/default/feature/index.vue
index 77ff5c127..01e117ddd 100644
--- a/streampark-console/streampark-console-webapp/src/layouts/default/feature/index.vue
+++ b/streampark-console/streampark-console-webapp/src/layouts/default/feature/index.vue
@@ -32,7 +32,6 @@
components: {
BackTop,
LayoutLockPage: createAsyncComponent(() => import('/@/views/base/lock/index.vue')),
- SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue')),
SessionTimeoutLogin,
},
setup() {
@@ -70,7 +69,6 @@
<template>
<LayoutLockPage />
<BackTop v-if="getUseOpenBackTop" :target="getTarget" />
- <SettingDrawer v-if="getIsFixedSettingDrawer" :class="prefixCls" />
<SessionTimeoutLogin v-if="getIsSessionTimeout" />
</template>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue b/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue
index 730224ffa..3b31270f5 100755
--- a/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue
+++ b/streampark-console/streampark-console-webapp/src/layouts/default/header/index.vue
@@ -62,8 +62,6 @@
<!-- Theme Switch -->
<appDarkModeToggle />
- <AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
-
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
@@ -78,8 +76,6 @@
/>
<UserTeam />
<UserDropDown :theme="getHeaderTheme" />
-
- <SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
</div>
</Header>
</template>
@@ -92,7 +88,6 @@
import LayoutMenu from '../menu/index.vue';
import LayoutTrigger from '../trigger/index.vue';
- import { AppSearch } from '/@/components/Application';
import { AppDarkModeToggle } from '/@/components/Application';
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
@@ -116,7 +111,6 @@
import { useAppInject } from '/@/hooks/web/useAppInject';
import { useDesign } from '/@/hooks/web/useDesign';
- import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
import { useLocale } from '/@/locales/useLocale';
import { version } from '../../../../package.json';
import { useI18n } from '/@/hooks/web/useI18n';
@@ -134,15 +128,11 @@
AppLocalePicker,
FullScreen,
Notify,
- AppSearch,
ErrorAction,
Github,
Slogan,
Divider,
AppDarkModeToggle,
- SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
- loading: true,
- }),
},
props: {
fixed: propTypes.bool,
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/SettingDrawer.tsx b/streampark-console/streampark-console-webapp/src/layouts/default/setting/SettingDrawer.tsx
deleted file mode 100644
index 0738299e5..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/SettingDrawer.tsx
+++ /dev/null
@@ -1,443 +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
- *
- * https://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.
- */
-import { defineComponent, computed, unref } from 'vue';
-import { BasicDrawer } from '/@/components/Drawer/index';
-import { Divider } from 'ant-design-vue';
-import {
- TypePicker,
- ThemeColorPicker,
- SettingFooter,
- SwitchItem,
- SelectItem,
- InputNumberItem,
-} from './components';
-
-import { AppDarkModeToggle } from '/@/components/Application';
-
-import { MenuTypeEnum, TriggerEnum } from '/@/enums/menuEnum';
-
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
-import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
-import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
-import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
-import { useI18n } from '/@/hooks/web/useI18n';
-
-import { baseHandler } from './handler';
-
-import {
- HandlerEnum,
- contentModeOptions,
- topMenuAlignOptions,
- getMenuTriggerOptions,
- routerTransitionOptions,
- menuTypeList,
- mixSidebarTriggerOptions,
-} from './enum';
-
-import {
- HEADER_PRESET_BG_COLOR_LIST,
- SIDE_BAR_BG_COLOR_LIST,
- APP_PRESET_COLOR_LIST,
-} from '/@/settings/designSetting';
-
-const { t } = useI18n();
-
-export default defineComponent({
- name: 'SettingDrawer',
- setup(_, { attrs }) {
- const {
- getContentMode,
- getShowFooter,
- getShowBreadCrumb,
- getShowBreadCrumbIcon,
- getShowLogo,
- getFullContent,
- getColorWeak,
- getGrayMode,
- getLockTime,
- getShowDarkModeToggle,
- getThemeColor,
- } = useRootSetting();
-
- const { getOpenPageLoading, getBasicTransition, getEnableTransition, getOpenNProgress } =
- useTransitionSetting();
-
- const {
- getIsHorizontal,
- getShowMenu,
- getMenuType,
- getTrigger,
- getCollapsedShowTitle,
- getMenuFixed,
- getCollapsed,
- getCanDrag,
- getTopMenuAlign,
- getAccordion,
- getMenuWidth,
- getMenuBgColor,
- getIsTopMenu,
- getSplit,
- getIsMixSidebar,
- getCloseMixSidebarOnChange,
- getMixSideTrigger,
- getMixSideFixed,
- } = useMenuSetting();
-
- const {
- getShowHeader,
- getFixed: getHeaderFixed,
- getHeaderBgColor,
- getShowSearch,
- } = useHeaderSetting();
-
- const { getShowMultipleTab, getShowQuick, getShowRedo, getShowFold } = useMultipleTabSetting();
-
- const getShowMenuRef = computed(() => {
- return unref(getShowMenu) && !unref(getIsHorizontal);
- });
-
- function renderSidebar() {
- return (
- <>
- <TypePicker
- menuTypeList={menuTypeList}
- handler={(item: typeof menuTypeList[0]) => {
- baseHandler(HandlerEnum.CHANGE_LAYOUT, {
- mode: item.mode,
- type: item.type,
- split: unref(getIsHorizontal) ? false : undefined,
- });
- }}
- def={unref(getMenuType)}
- />
- </>
- );
- }
-
- function renderHeaderTheme() {
- return (
- <ThemeColorPicker
- colorList={HEADER_PRESET_BG_COLOR_LIST}
- def={unref(getHeaderBgColor)}
- event={HandlerEnum.HEADER_THEME}
- />
- );
- }
-
- function renderSiderTheme() {
- return (
- <ThemeColorPicker
- colorList={SIDE_BAR_BG_COLOR_LIST}
- def={unref(getMenuBgColor)}
- event={HandlerEnum.MENU_THEME}
- />
- );
- }
-
- function renderMainTheme() {
- return (
- <ThemeColorPicker
- colorList={APP_PRESET_COLOR_LIST}
- def={unref(getThemeColor)}
- event={HandlerEnum.CHANGE_THEME_COLOR}
- />
- );
- }
-
- /**
- * @description:
- */
- function renderFeatures() {
- let triggerDef = unref(getTrigger);
-
- const triggerOptions = getMenuTriggerOptions(unref(getSplit));
- const some = triggerOptions.some((item) => item.value === triggerDef);
- if (!some) {
- triggerDef = TriggerEnum.FOOTER;
- }
-
- return (
- <>
- <SwitchItem
- title={t('layout.setting.splitMenu')}
- event={HandlerEnum.MENU_SPLIT}
- def={unref(getSplit)}
- disabled={!unref(getShowMenuRef) || unref(getMenuType) !== MenuTypeEnum.MIX}
- />
- <SwitchItem
- title={t('layout.setting.mixSidebarFixed')}
- event={HandlerEnum.MENU_FIXED_MIX_SIDEBAR}
- def={unref(getMixSideFixed)}
- disabled={!unref(getIsMixSidebar)}
- />
-
- <SwitchItem
- title={t('layout.setting.closeMixSidebarOnChange')}
- event={HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE}
- def={unref(getCloseMixSidebarOnChange)}
- disabled={!unref(getIsMixSidebar)}
- />
- <SwitchItem
- title={t('layout.setting.menuCollapse')}
- event={HandlerEnum.MENU_COLLAPSED}
- def={unref(getCollapsed)}
- disabled={!unref(getShowMenuRef)}
- />
-
- <SwitchItem
- title={t('layout.setting.menuDrag')}
- event={HandlerEnum.MENU_HAS_DRAG}
- def={unref(getCanDrag)}
- disabled={!unref(getShowMenuRef)}
- />
- <SwitchItem
- title={t('layout.setting.menuSearch')}
- event={HandlerEnum.HEADER_SEARCH}
- def={unref(getShowSearch)}
- disabled={!unref(getShowHeader)}
- />
- <SwitchItem
- title={t('layout.setting.menuAccordion')}
- event={HandlerEnum.MENU_ACCORDION}
- def={unref(getAccordion)}
- disabled={!unref(getShowMenuRef)}
- />
-
- <SwitchItem
- title={t('layout.setting.collapseMenuDisplayName')}
- event={HandlerEnum.MENU_COLLAPSED_SHOW_TITLE}
- def={unref(getCollapsedShowTitle)}
- disabled={!unref(getShowMenuRef) || !unref(getCollapsed) || unref(getIsMixSidebar)}
- />
-
- <SwitchItem
- title={t('layout.setting.fixedHeader')}
- event={HandlerEnum.HEADER_FIXED}
- def={unref(getHeaderFixed)}
- disabled={!unref(getShowHeader)}
- />
- <SwitchItem
- title={t('layout.setting.fixedSideBar')}
- event={HandlerEnum.MENU_FIXED}
- def={unref(getMenuFixed)}
- disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
- />
- <SelectItem
- title={t('layout.setting.mixSidebarTrigger')}
- event={HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR}
- def={unref(getMixSideTrigger)}
- options={mixSidebarTriggerOptions}
- disabled={!unref(getIsMixSidebar)}
- />
- <SelectItem
- title={t('layout.setting.topMenuLayout')}
- event={HandlerEnum.MENU_TOP_ALIGN}
- def={unref(getTopMenuAlign)}
- options={topMenuAlignOptions}
- disabled={
- !unref(getShowHeader) ||
- unref(getSplit) ||
- (!unref(getIsTopMenu) && !unref(getSplit)) ||
- unref(getIsMixSidebar)
- }
- />
- <SelectItem
- title={t('layout.setting.menuCollapseButton')}
- event={HandlerEnum.MENU_TRIGGER}
- def={triggerDef}
- options={triggerOptions}
- disabled={!unref(getShowMenuRef) || unref(getIsMixSidebar)}
- />
- <SelectItem
- title={t('layout.setting.contentMode')}
- event={HandlerEnum.CONTENT_MODE}
- def={unref(getContentMode)}
- options={contentModeOptions}
- />
- <InputNumberItem
- title={t('layout.setting.autoScreenLock')}
- min={0}
- event={HandlerEnum.LOCK_TIME}
- defaultValue={unref(getLockTime)}
- formatter={(value: string) => {
- return parseInt(value) === 0
- ? `0(${t('layout.setting.notAutoScreenLock')})`
- : `${value}${t('layout.setting.minute')}`;
- }}
- />
- <InputNumberItem
- title={t('layout.setting.expandedMenuWidth')}
- max={600}
- min={100}
- step={10}
- event={HandlerEnum.MENU_WIDTH}
- disabled={!unref(getShowMenuRef)}
- defaultValue={unref(getMenuWidth)}
- formatter={(value: string) => `${parseInt(value)}px`}
- />
- </>
- );
- }
-
- function renderContent() {
- return (
- <>
- <SwitchItem
- title={t('layout.setting.breadcrumb')}
- event={HandlerEnum.SHOW_BREADCRUMB}
- def={unref(getShowBreadCrumb)}
- disabled={!unref(getShowHeader)}
- />
-
- <SwitchItem
- title={t('layout.setting.breadcrumbIcon')}
- event={HandlerEnum.SHOW_BREADCRUMB_ICON}
- def={unref(getShowBreadCrumbIcon)}
- disabled={!unref(getShowHeader)}
- />
-
- <SwitchItem
- title={t('layout.setting.tabs')}
- event={HandlerEnum.TABS_SHOW}
- def={unref(getShowMultipleTab)}
- />
-
- <SwitchItem
- title={t('layout.setting.tabsRedoBtn')}
- event={HandlerEnum.TABS_SHOW_REDO}
- def={unref(getShowRedo)}
- disabled={!unref(getShowMultipleTab)}
- />
-
- <SwitchItem
- title={t('layout.setting.tabsQuickBtn')}
- event={HandlerEnum.TABS_SHOW_QUICK}
- def={unref(getShowQuick)}
- disabled={!unref(getShowMultipleTab)}
- />
- <SwitchItem
- title={t('layout.setting.tabsFoldBtn')}
- event={HandlerEnum.TABS_SHOW_FOLD}
- def={unref(getShowFold)}
- disabled={!unref(getShowMultipleTab)}
- />
-
- <SwitchItem
- title={t('layout.setting.sidebar')}
- event={HandlerEnum.MENU_SHOW_SIDEBAR}
- def={unref(getShowMenu)}
- disabled={unref(getIsHorizontal)}
- />
-
- <SwitchItem
- title={t('layout.setting.header')}
- event={HandlerEnum.HEADER_SHOW}
- def={unref(getShowHeader)}
- />
- <SwitchItem
- title="Logo"
- event={HandlerEnum.SHOW_LOGO}
- def={unref(getShowLogo)}
- disabled={unref(getIsMixSidebar)}
- />
- <SwitchItem
- title={t('layout.setting.footer')}
- event={HandlerEnum.SHOW_FOOTER}
- def={unref(getShowFooter)}
- />
- <SwitchItem
- title={t('layout.setting.fullContent')}
- event={HandlerEnum.FULL_CONTENT}
- def={unref(getFullContent)}
- />
-
- <SwitchItem
- title={t('layout.setting.grayMode')}
- event={HandlerEnum.GRAY_MODE}
- def={unref(getGrayMode)}
- />
-
- <SwitchItem
- title={t('layout.setting.colorWeak')}
- event={HandlerEnum.COLOR_WEAK}
- def={unref(getColorWeak)}
- />
- </>
- );
- }
-
- function renderTransition() {
- return (
- <>
- <SwitchItem
- title={t('layout.setting.progress')}
- event={HandlerEnum.OPEN_PROGRESS}
- def={unref(getOpenNProgress)}
- />
- <SwitchItem
- title={t('layout.setting.switchLoading')}
- event={HandlerEnum.OPEN_PAGE_LOADING}
- def={unref(getOpenPageLoading)}
- />
-
- <SwitchItem
- title={t('layout.setting.switchAnimation')}
- event={HandlerEnum.OPEN_ROUTE_TRANSITION}
- def={unref(getEnableTransition)}
- />
-
- <SelectItem
- title={t('layout.setting.animationType')}
- event={HandlerEnum.ROUTER_TRANSITION}
- def={unref(getBasicTransition)}
- options={routerTransitionOptions}
- disabled={!unref(getEnableTransition)}
- />
- </>
- );
- }
-
- return () => (
- <BasicDrawer
- {...attrs}
- title={t('layout.setting.drawerTitle')}
- width={330}
- class="setting-drawer"
- >
- {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.darkMode')}</Divider>}
- {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
- <Divider>{() => t('layout.setting.navMode')}</Divider>
- {renderSidebar()}
- <Divider>{() => t('layout.setting.sysTheme')}</Divider>
- {renderMainTheme()}
- <Divider>{() => t('layout.setting.headerTheme')}</Divider>
- {renderHeaderTheme()}
- <Divider>{() => t('layout.setting.sidebarTheme')}</Divider>
- {renderSiderTheme()}
- <Divider>{() => t('layout.setting.interfaceFunction')}</Divider>
- {renderFeatures()}
- <Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
- {renderContent()}
- <Divider>{() => t('layout.setting.animation')}</Divider>
- {renderTransition()}
- <Divider />
- <SettingFooter />
- </BasicDrawer>
- );
- },
-});
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/InputNumberItem.vue b/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/InputNumberItem.vue
deleted file mode 100644
index 81bcc0aea..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/InputNumberItem.vue
+++ /dev/null
@@ -1,72 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls">
- <span> {{ title }}</span>
- <InputNumber
- v-bind="$attrs"
- size="small"
- :class="`${prefixCls}-input-number`"
- @change="handleChange"
- />
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, PropType } from 'vue';
-
- import { InputNumber } from 'ant-design-vue';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { baseHandler } from '../handler';
- import { HandlerEnum } from '../enum';
-
- export default defineComponent({
- name: 'InputNumberItem',
- components: { InputNumber },
- props: {
- event: {
- type: Number as PropType<HandlerEnum>,
- },
- title: {
- type: String,
- },
- },
- setup(props) {
- const { prefixCls } = useDesign('setting-input-number-item');
-
- function handleChange(e) {
- props.event && baseHandler(props.event, e);
- }
- return {
- prefixCls,
- handleChange,
- };
- },
- });
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-setting-input-number-item';
-
- .@{prefix-cls} {
- display: flex;
- justify-content: space-between;
- margin: 16px 0;
-
- &-input-number {
- width: 126px;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SelectItem.vue b/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SelectItem.vue
deleted file mode 100644
index 60f77c2f7..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SelectItem.vue
+++ /dev/null
@@ -1,91 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls">
- <span> {{ title }}</span>
- <Select
- v-bind="getBindValue"
- :class="`${prefixCls}-select`"
- @change="handleChange"
- :disabled="disabled"
- size="small"
- :options="options"
- />
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, PropType, computed } from 'vue';
-
- import { Select } from 'ant-design-vue';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { baseHandler } from '../handler';
- import { HandlerEnum } from '../enum';
-
- export default defineComponent({
- name: 'SelectItem',
- components: { Select },
- props: {
- event: {
- type: Number as PropType<HandlerEnum>,
- },
- disabled: {
- type: Boolean,
- },
- title: {
- type: String,
- },
- def: {
- type: [String, Number] as PropType<string | number>,
- },
- initValue: {
- type: [String, Number] as PropType<string | number>,
- },
- options: {
- type: Array as PropType<LabelValueOptions>,
- default: () => [],
- },
- },
- setup(props) {
- const { prefixCls } = useDesign('setting-select-item');
- const getBindValue = computed(() => {
- return props.def ? { value: props.def, defaultValue: props.initValue || props.def } : {};
- });
-
- function handleChange(e) {
- props.event && baseHandler(props.event, e);
- }
- return {
- prefixCls,
- handleChange,
- getBindValue,
- };
- },
- });
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-setting-select-item';
-
- .@{prefix-cls} {
- display: flex;
- justify-content: space-between;
- margin: 16px 0;
-
- &-select {
- width: 126px;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SettingFooter.vue b/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SettingFooter.vue
deleted file mode 100644
index e33536e9a..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SettingFooter.vue
+++ /dev/null
@@ -1,115 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls">
- <a-button type="primary" block @click="handleCopy">
- <CopyOutlined class="mr-2" />
- {{ t('layout.setting.copyBtn') }}
- </a-button>
-
- <a-button color="warning" block @click="handleResetSetting" class="my-3">
- <RedoOutlined class="mr-2" />
- {{ t('common.resetText') }}
- </a-button>
-
- <a-button color="error" block @click="handleClearAndRedo">
- <RedoOutlined class="mr-2" />
- {{ t('layout.setting.clearBtn') }}
- </a-button>
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, unref } from 'vue';
-
- import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
-
- import { useAppStore } from '/@/store/modules/app';
- import { usePermissionStore } from '/@/store/modules/permission';
- import { useMultipleTabStore } from '/@/store/modules/multipleTab';
- import { useUserStore } from '/@/store/modules/user';
-
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { useMessage } from '/@/hooks/web/useMessage';
- import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-
- import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
- import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
- import defaultSetting from '/@/settings/projectSetting';
-
- export default defineComponent({
- name: 'SettingFooter',
- components: { CopyOutlined, RedoOutlined },
- setup() {
- const permissionStore = usePermissionStore();
- const { prefixCls } = useDesign('setting-footer');
- const { t } = useI18n();
- const { createSuccessModal, createMessage } = useMessage();
- const tabStore = useMultipleTabStore();
- const userStore = useUserStore();
- const appStore = useAppStore();
-
- function handleCopy() {
- const { isSuccessRef } = useCopyToClipboard(
- JSON.stringify(unref(appStore.getProjectConfig), null, 2),
- );
- unref(isSuccessRef) &&
- createSuccessModal({
- title: t('layout.setting.operatingTitle'),
- content: t('layout.setting.operatingContent'),
- });
- }
- function handleResetSetting() {
- try {
- appStore.setProjectConfig(defaultSetting);
- const { colorWeak, grayMode } = defaultSetting;
- // updateTheme(themeColor);
- updateColorWeak(colorWeak);
- updateGrayMode(grayMode);
- createMessage.success(t('layout.setting.resetSuccess'));
- } catch (error: any) {
- createMessage.error(error);
- }
- }
-
- function handleClearAndRedo() {
- localStorage.clear();
- appStore.resetAllState();
- permissionStore.resetState();
- tabStore.resetState();
- userStore.resetState();
- location.reload();
- }
- return {
- prefixCls,
- t,
- handleCopy,
- handleResetSetting,
- handleClearAndRedo,
- };
- },
- });
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-setting-footer';
-
- .@{prefix-cls} {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SwitchItem.vue b/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SwitchItem.vue
deleted file mode 100644
index 9fe83086f..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/SwitchItem.vue
+++ /dev/null
@@ -1,82 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls">
- <span> {{ title }}</span>
- <Switch
- v-bind="getBindValue"
- @change="handleChange"
- :disabled="disabled"
- :checkedChildren="t('layout.setting.on')"
- :unCheckedChildren="t('layout.setting.off')"
- />
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, PropType, computed } from 'vue';
-
- import { Switch } from 'ant-design-vue';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useI18n } from '/@/hooks/web/useI18n';
- import { baseHandler } from '../handler';
- import { HandlerEnum } from '../enum';
-
- export default defineComponent({
- name: 'SwitchItem',
- components: { Switch },
- props: {
- event: {
- type: Number as PropType<HandlerEnum>,
- },
- disabled: {
- type: Boolean,
- },
- title: {
- type: String,
- },
- def: {
- type: Boolean,
- },
- },
- setup(props) {
- const { prefixCls } = useDesign('setting-switch-item');
- const { t } = useI18n();
-
- const getBindValue = computed(() => {
- return props.def ? { checked: props.def } : {};
- });
- function handleChange(e) {
- props.event && baseHandler(props.event, e);
- }
- return {
- prefixCls,
- t,
- handleChange,
- getBindValue,
- };
- },
- });
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-setting-switch-item';
-
- .@{prefix-cls} {
- display: flex;
- justify-content: space-between;
- margin: 16px 0;
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/ThemeColorPicker.vue b/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/ThemeColorPicker.vue
deleted file mode 100644
index 29f1487d8..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/ThemeColorPicker.vue
+++ /dev/null
@@ -1,104 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls">
- <template v-for="color in colorList || []" :key="color">
- <span
- @click="handleClick(color)"
- :class="[
- `${prefixCls}__item`,
- {
- [`${prefixCls}__item--active`]: def === color,
- },
- ]"
- :style="{ background: color }"
- >
- <CheckOutlined />
- </span>
- </template>
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, PropType } from 'vue';
- import { CheckOutlined } from '@ant-design/icons-vue';
-
- import { useDesign } from '/@/hooks/web/useDesign';
-
- import { baseHandler } from '../handler';
- import { HandlerEnum } from '../enum';
-
- export default defineComponent({
- name: 'ThemeColorPicker',
- components: { CheckOutlined },
- props: {
- colorList: {
- type: Array as PropType<string[]>,
- default: () => [],
- },
- event: {
- type: Number as PropType<HandlerEnum>,
- },
- def: {
- type: String,
- },
- },
- setup(props) {
- const { prefixCls } = useDesign('setting-theme-picker');
-
- function handleClick(color: string) {
- props.event && baseHandler(props.event, color);
- }
- return {
- prefixCls,
- handleClick,
- };
- },
- });
-</script>
-<style lang="less">
- @prefix-cls: ~'@{namespace}-setting-theme-picker';
-
- .@{prefix-cls} {
- display: flex;
- flex-wrap: wrap;
- margin: 16px 0;
- justify-content: space-around;
-
- &__item {
- width: 20px;
- height: 20px;
- cursor: pointer;
- border: 1px solid #ddd;
- border-radius: 2px;
-
- svg {
- display: none;
- }
-
- &--active {
- border: 1px solid lighten(@primary-color, 10%);
-
- svg {
- display: inline-block;
- margin: 0 0 3px 3px;
- font-size: 12px;
- fill: @white !important;
- }
- }
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/TypePicker.vue b/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/TypePicker.vue
deleted file mode 100644
index 2c32e0ac5..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/TypePicker.vue
+++ /dev/null
@@ -1,194 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls">
- <template v-for="item in menuTypeList || []" :key="item.title">
- <Tooltip :title="item.title" placement="bottom">
- <div
- @click="handler(item)"
- :class="[
- `${prefixCls}__item`,
- `${prefixCls}__item--${item.type}`,
- {
- [`${prefixCls}__item--active`]: def === item.type,
- },
- ]"
- >
- <div class="mix-sidebar"></div>
- </div>
- </Tooltip>
- </template>
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, PropType } from 'vue';
-
- import { Tooltip } from 'ant-design-vue';
- import { useDesign } from '/@/hooks/web/useDesign';
-
- import { menuTypeList } from '../enum';
- export default defineComponent({
- name: 'MenuTypePicker',
- components: { Tooltip },
- props: {
- menuTypeList: {
- type: Array as PropType<typeof menuTypeList>,
- default: () => [],
- },
- handler: {
- type: Function as PropType<Fn>,
- default: () => ({}),
- },
- def: {
- type: String,
- default: '',
- },
- },
- setup() {
- const { prefixCls } = useDesign('setting-menu-type-picker');
-
- return {
- prefixCls,
- };
- },
- });
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-setting-menu-type-picker';
-
- .@{prefix-cls} {
- display: flex;
-
- &__item {
- position: relative;
- width: 56px;
- height: 48px;
- margin-right: 16px;
- overflow: hidden;
- cursor: pointer;
- background-color: #f0f2f5;
- border-radius: 4px;
- box-shadow: 0 1px 2.5px 0 rgb(0 0 0 / 18%);
-
- &::before,
- &::after {
- position: absolute;
- content: '';
- }
-
- &--sidebar,
- &--light {
- &::before {
- top: 0;
- left: 0;
- z-index: 1;
- width: 33%;
- height: 100%;
- background-color: #273352;
- border-radius: 4px 0 0 4px;
- }
-
- &::after {
- top: 0;
- left: 0;
- width: 100%;
- height: 25%;
- background-color: #fff;
- }
- }
-
- &--mix {
- &::before {
- top: 0;
- left: 0;
- width: 33%;
- height: 100%;
- background-color: #fff;
- border-radius: 4px 0 0 4px;
- }
-
- &::after {
- top: 0;
- left: 0;
- z-index: 1;
- width: 100%;
- height: 25%;
- background-color: #273352;
- }
- }
-
- &--top-menu {
- &::after {
- top: 0;
- left: 0;
- width: 100%;
- height: 25%;
- background-color: #273352;
- }
- }
-
- &--dark {
- background-color: #273352;
- }
-
- &--mix-sidebar {
- &::before {
- top: 0;
- left: 0;
- z-index: 1;
- width: 25%;
- height: 100%;
- background-color: #273352;
- border-radius: 4px 0 0 4px;
- }
-
- &::after {
- top: 0;
- left: 0;
- width: 100%;
- height: 25%;
- background-color: #fff;
- }
-
- .mix-sidebar {
- position: absolute;
- left: 25%;
- width: 15%;
- height: 100%;
- background-color: #fff;
- }
- }
-
- &:hover,
- &--active {
- padding: 12px;
- border: 2px solid @primary-color;
-
- &::before,
- &::after {
- border-radius: 0;
- }
- }
- }
-
- img {
- width: 100%;
- height: 100%;
- cursor: pointer;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/index.ts b/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/index.ts
deleted file mode 100644
index 4e3e88048..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/components/index.ts
+++ /dev/null
@@ -1,24 +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
- *
- * https://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.
- */
-import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
-
-export const TypePicker = createAsyncComponent(() => import('./TypePicker.vue'));
-export const ThemeColorPicker = createAsyncComponent(() => import('./ThemeColorPicker.vue'));
-export const SettingFooter = createAsyncComponent(() => import('./SettingFooter.vue'));
-export const SwitchItem = createAsyncComponent(() => import('./SwitchItem.vue'));
-export const SelectItem = createAsyncComponent(() => import('./SelectItem.vue'));
-export const InputNumberItem = createAsyncComponent(() => import('./InputNumberItem.vue'));
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/enum.ts b/streampark-console/streampark-console-webapp/src/layouts/default/setting/enum.ts
deleted file mode 100644
index adc1f8fe9..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/enum.ts
+++ /dev/null
@@ -1,172 +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
- *
- * https://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.
- */
-import { ContentEnum, RouterTransitionEnum } from '/@/enums/appEnum';
-import {
- MenuModeEnum,
- MenuTypeEnum,
- TopMenuAlignEnum,
- TriggerEnum,
- MixSidebarTriggerEnum,
-} from '/@/enums/menuEnum';
-
-import { useI18n } from '/@/hooks/web/useI18n';
-
-const { t } = useI18n();
-
-export enum HandlerEnum {
- CHANGE_LAYOUT,
- CHANGE_THEME_COLOR,
- CHANGE_THEME,
- // menu
- MENU_HAS_DRAG,
- MENU_ACCORDION,
- MENU_TRIGGER,
- MENU_TOP_ALIGN,
- MENU_COLLAPSED,
- MENU_COLLAPSED_SHOW_TITLE,
- MENU_WIDTH,
- MENU_SHOW_SIDEBAR,
- MENU_THEME,
- MENU_SPLIT,
- MENU_FIXED,
- MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE,
- MENU_TRIGGER_MIX_SIDEBAR,
- MENU_FIXED_MIX_SIDEBAR,
-
- // header
- HEADER_SHOW,
- HEADER_THEME,
- HEADER_FIXED,
-
- HEADER_SEARCH,
-
- TABS_SHOW_QUICK,
- TABS_SHOW_REDO,
- TABS_SHOW,
- TABS_SHOW_FOLD,
-
- LOCK_TIME,
- FULL_CONTENT,
- CONTENT_MODE,
- SHOW_BREADCRUMB,
- SHOW_BREADCRUMB_ICON,
- GRAY_MODE,
- COLOR_WEAK,
- SHOW_LOGO,
- SHOW_FOOTER,
-
- ROUTER_TRANSITION,
- OPEN_PROGRESS,
- OPEN_PAGE_LOADING,
- OPEN_ROUTE_TRANSITION,
-}
-
-export const contentModeOptions = [
- {
- value: ContentEnum.FULL,
- label: t('layout.setting.contentModeFull'),
- },
- {
- value: ContentEnum.FIXED,
- label: t('layout.setting.contentModeFixed'),
- },
-];
-
-export const topMenuAlignOptions = [
- {
- value: TopMenuAlignEnum.CENTER,
- label: t('layout.setting.topMenuAlignRight'),
- },
- {
- value: TopMenuAlignEnum.START,
- label: t('layout.setting.topMenuAlignLeft'),
- },
- {
- value: TopMenuAlignEnum.END,
- label: t('layout.setting.topMenuAlignCenter'),
- },
-];
-
-export const getMenuTriggerOptions = (hideTop: boolean) => {
- return [
- {
- value: TriggerEnum.NONE,
- label: t('layout.setting.menuTriggerNone'),
- },
- {
- value: TriggerEnum.FOOTER,
- label: t('layout.setting.menuTriggerBottom'),
- },
- ...(hideTop
- ? []
- : [
- {
- value: TriggerEnum.HEADER,
- label: t('layout.setting.menuTriggerTop'),
- },
- ]),
- ];
-};
-
-export const routerTransitionOptions = [
- RouterTransitionEnum.ZOOM_FADE,
- RouterTransitionEnum.FADE,
- RouterTransitionEnum.ZOOM_OUT,
- RouterTransitionEnum.FADE_SIDE,
- RouterTransitionEnum.FADE_BOTTOM,
- RouterTransitionEnum.FADE_SCALE,
-].map((item) => {
- return {
- label: item,
- value: item,
- };
-});
-
-export const menuTypeList = [
- {
- title: t('layout.setting.menuTypeSidebar'),
- mode: MenuModeEnum.INLINE,
- type: MenuTypeEnum.SIDEBAR,
- },
- {
- title: t('layout.setting.menuTypeMix'),
- mode: MenuModeEnum.INLINE,
- type: MenuTypeEnum.MIX,
- },
-
- {
- title: t('layout.setting.menuTypeTopMenu'),
- mode: MenuModeEnum.HORIZONTAL,
- type: MenuTypeEnum.TOP_MENU,
- },
- {
- title: t('layout.setting.menuTypeMixSidebar'),
- mode: MenuModeEnum.INLINE,
- type: MenuTypeEnum.MIX_SIDEBAR,
- },
-];
-
-export const mixSidebarTriggerOptions = [
- {
- value: MixSidebarTriggerEnum.HOVER,
- label: t('layout.setting.triggerHover'),
- },
- {
- value: MixSidebarTriggerEnum.CLICK,
- label: t('layout.setting.triggerClick'),
- },
-];
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/handler.ts b/streampark-console/streampark-console-webapp/src/layouts/default/setting/handler.ts
deleted file mode 100644
index 749c6697a..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/handler.ts
+++ /dev/null
@@ -1,190 +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
- *
- * https://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.
- */
-import { HandlerEnum } from './enum';
-import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
-import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
-import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
-
-import { useAppStore } from '/@/store/modules/app';
-import { ProjectConfig } from '/#/config';
-import { changeTheme } from '/@/logics/theme';
-import { updateDarkTheme } from '/@/logics/theme/dark';
-import { useRootSetting } from '/@/hooks/setting/useRootSetting';
-
-export function baseHandler(event: HandlerEnum, value: any) {
- const appStore = useAppStore();
- const config = handler(event, value);
- appStore.setProjectConfig(config);
- if (event === HandlerEnum.CHANGE_THEME) {
- updateHeaderBgColor();
- updateSidebarBgColor();
- }
-}
-
-export function handler(event: HandlerEnum, value: any): DeepPartial<ProjectConfig> {
- const appStore = useAppStore();
-
- const { getThemeColor, getDarkMode } = useRootSetting();
- switch (event) {
- case HandlerEnum.CHANGE_LAYOUT:
- const { mode, type, split } = value;
- const splitOpt = split === undefined ? { split } : {};
-
- return {
- menuSetting: {
- mode,
- type,
- collapsed: false,
- show: true,
- hidden: false,
- ...splitOpt,
- },
- };
-
- case HandlerEnum.CHANGE_THEME_COLOR:
- if (getThemeColor.value === value) {
- return {};
- }
- changeTheme(value);
-
- return { themeColor: value };
-
- case HandlerEnum.CHANGE_THEME:
- if (getDarkMode.value === value) {
- return {};
- }
- updateDarkTheme(value);
-
- return {};
-
- case HandlerEnum.MENU_HAS_DRAG:
- return { menuSetting: { canDrag: value } };
-
- case HandlerEnum.MENU_ACCORDION:
- return { menuSetting: { accordion: value } };
-
- case HandlerEnum.MENU_TRIGGER:
- return { menuSetting: { trigger: value } };
-
- case HandlerEnum.MENU_TOP_ALIGN:
- return { menuSetting: { topMenuAlign: value } };
-
- case HandlerEnum.MENU_COLLAPSED:
- return { menuSetting: { collapsed: value } };
-
- case HandlerEnum.MENU_WIDTH:
- return { menuSetting: { menuWidth: value } };
-
- case HandlerEnum.MENU_SHOW_SIDEBAR:
- return { menuSetting: { show: value } };
-
- case HandlerEnum.MENU_COLLAPSED_SHOW_TITLE:
- return { menuSetting: { collapsedShowTitle: value } };
-
- case HandlerEnum.MENU_THEME:
- updateSidebarBgColor(value);
- return { menuSetting: { bgColor: value } };
-
- case HandlerEnum.MENU_SPLIT:
- return { menuSetting: { split: value } };
-
- case HandlerEnum.MENU_CLOSE_MIX_SIDEBAR_ON_CHANGE:
- return { menuSetting: { closeMixSidebarOnChange: value } };
-
- case HandlerEnum.MENU_FIXED:
- return { menuSetting: { fixed: value } };
-
- case HandlerEnum.MENU_TRIGGER_MIX_SIDEBAR:
- return { menuSetting: { mixSideTrigger: value } };
-
- case HandlerEnum.MENU_FIXED_MIX_SIDEBAR:
- return { menuSetting: { mixSideFixed: value } };
-
- // ============transition==================
- case HandlerEnum.OPEN_PAGE_LOADING:
- appStore.setPageLoading(false);
- return { transitionSetting: { openPageLoading: value } };
-
- case HandlerEnum.ROUTER_TRANSITION:
- return { transitionSetting: { basicTransition: value } };
-
- case HandlerEnum.OPEN_ROUTE_TRANSITION:
- return { transitionSetting: { enable: value } };
-
- case HandlerEnum.OPEN_PROGRESS:
- return { transitionSetting: { openNProgress: value } };
- // ============root==================
-
- case HandlerEnum.LOCK_TIME:
- return { lockTime: value };
-
- case HandlerEnum.FULL_CONTENT:
- return { fullContent: value };
-
- case HandlerEnum.CONTENT_MODE:
- return { contentMode: value };
-
- case HandlerEnum.SHOW_BREADCRUMB:
- return { showBreadCrumb: value };
-
- case HandlerEnum.SHOW_BREADCRUMB_ICON:
- return { showBreadCrumbIcon: value };
-
- case HandlerEnum.GRAY_MODE:
- updateGrayMode(value);
- return { grayMode: value };
-
- case HandlerEnum.SHOW_FOOTER:
- return { showFooter: value };
-
- case HandlerEnum.COLOR_WEAK:
- updateColorWeak(value);
- return { colorWeak: value };
-
- case HandlerEnum.SHOW_LOGO:
- return { showLogo: value };
-
- // ============tabs==================
- case HandlerEnum.TABS_SHOW_QUICK:
- return { multiTabsSetting: { showQuick: value } };
-
- case HandlerEnum.TABS_SHOW:
- return { multiTabsSetting: { show: value } };
-
- case HandlerEnum.TABS_SHOW_REDO:
- return { multiTabsSetting: { showRedo: value } };
-
- case HandlerEnum.TABS_SHOW_FOLD:
- return { multiTabsSetting: { showFold: value } };
-
- // ============header==================
- case HandlerEnum.HEADER_THEME:
- updateHeaderBgColor(value);
- return { headerSetting: { bgColor: value } };
-
- case HandlerEnum.HEADER_SEARCH:
- return { headerSetting: { showSearch: value } };
-
- case HandlerEnum.HEADER_FIXED:
- return { headerSetting: { fixed: value } };
-
- case HandlerEnum.HEADER_SHOW:
- return { headerSetting: { show: value } };
- default:
- return {};
- }
-}
diff --git a/streampark-console/streampark-console-webapp/src/layouts/default/setting/index.vue b/streampark-console/streampark-console-webapp/src/layouts/default/setting/index.vue
deleted file mode 100644
index b752b4c73..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/default/setting/index.vue
+++ /dev/null
@@ -1,42 +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
-
- https://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.
--->
-<template>
- <div @click="openDrawer(true)">
- <Icon icon="ion:settings-outline" />
- <SettingDrawer @register="register" />
- </div>
-</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
- import SettingDrawer from './SettingDrawer';
- import Icon from '/@/components/Icon';
-
- import { useDrawer } from '/@/components/Drawer';
-
- export default defineComponent({
- name: 'SettingButton',
- components: { SettingDrawer, Icon },
- setup() {
- const [register, { openDrawer }] = useDrawer();
-
- return {
- register,
- openDrawer,
- };
- },
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/iframe/index.vue b/streampark-console/streampark-console-webapp/src/layouts/iframe/index.vue
deleted file mode 100644
index 11eabc26c..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/iframe/index.vue
+++ /dev/null
@@ -1,45 +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
-
- https://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.
--->
-<template>
- <div v-if="showFrame">
- <template v-for="frame in getFramePages" :key="frame.path">
- <FramePage
- v-if="frame.meta.frameSrc && hasRenderFrame(frame.name)"
- v-show="showIframe(frame)"
- :frameSrc="frame.meta.frameSrc"
- />
- </template>
- </div>
-</template>
-<script lang="ts">
- import { defineComponent, unref, computed } from 'vue';
- import FramePage from '/@/views/base/iframe/index.vue';
-
- import { useFrameKeepAlive } from './useFrameKeepAlive';
-
- export default defineComponent({
- name: 'FrameLayout',
- components: { FramePage },
- setup() {
- const { getFramePages, hasRenderFrame, showIframe } = useFrameKeepAlive();
-
- const showFrame = computed(() => unref(getFramePages).length > 0);
-
- return { getFramePages, hasRenderFrame, showIframe, showFrame };
- },
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/layouts/iframe/useFrameKeepAlive.ts b/streampark-console/streampark-console-webapp/src/layouts/iframe/useFrameKeepAlive.ts
deleted file mode 100644
index e8f36d310..000000000
--- a/streampark-console/streampark-console-webapp/src/layouts/iframe/useFrameKeepAlive.ts
+++ /dev/null
@@ -1,75 +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
- *
- * https://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.
- */
-import type { AppRouteRecordRaw } from '/@/router/types';
-
-import { computed, toRaw, unref } from 'vue';
-
-import { useMultipleTabStore } from '/@/store/modules/multipleTab';
-
-import { uniqBy } from 'lodash-es';
-
-import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
-
-import { useRouter } from 'vue-router';
-
-export function useFrameKeepAlive() {
- const router = useRouter();
- const { currentRoute } = router;
- const { getShowMultipleTab } = useMultipleTabSetting();
- const tabStore = useMultipleTabStore();
- const getFramePages = computed(() => {
- const ret = getAllFramePages(toRaw(router.getRoutes()) as unknown as AppRouteRecordRaw[]) || [];
- return ret;
- });
-
- const getOpenTabList = computed((): string[] => {
- return tabStore.getTabList.reduce((prev: string[], next) => {
- if (next.meta && Reflect.has(next.meta, 'frameSrc')) {
- prev.push(next.name as string);
- }
- return prev;
- }, []);
- });
-
- function getAllFramePages(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] {
- let res: AppRouteRecordRaw[] = [];
- for (const route of routes) {
- const { meta: { frameSrc } = {}, children } = route;
- if (frameSrc) {
- res.push(route);
- }
- if (children && children.length) {
- res.push(...getAllFramePages(children));
- }
- }
- res = uniqBy(res, 'name');
- return res;
- }
-
- function showIframe(item: AppRouteRecordRaw) {
- return item.name === unref(currentRoute).name;
- }
-
- function hasRenderFrame(name: string) {
- if (!unref(getShowMultipleTab)) {
- return router.currentRoute.value.name === name;
- }
- return unref(getOpenTabList).includes(name);
- }
-
- return { hasRenderFrame, getFramePages, showIframe, getAllFramePages };
-}
diff --git a/streampark-console/streampark-console-webapp/src/layouts/page/index.vue b/streampark-console/streampark-console-webapp/src/layouts/page/index.vue
index 61293ce46..add345df3 100644
--- a/streampark-console/streampark-console-webapp/src/layouts/page/index.vue
+++ b/streampark-console/streampark-console-webapp/src/layouts/page/index.vue
@@ -37,14 +37,11 @@
</transition>
</template>
</RouterView>
- <FrameLayout v-if="getCanEmbedIFramePage" />
</template>
<script lang="ts">
import { computed, defineComponent, unref } from 'vue';
- import FrameLayout from '/@/layouts/iframe/index.vue';
-
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
@@ -55,7 +52,6 @@
export default defineComponent({
name: 'PageLayout',
- components: { FrameLayout },
setup() {
const { getShowMultipleTab } = useMultipleTabSetting();
const tabStore = useMultipleTabStore();
diff --git a/streampark-console/streampark-console-webapp/src/router/helper/routeHelper.ts b/streampark-console/streampark-console-webapp/src/router/helper/routeHelper.ts
index 02b53f867..fd83cde74 100644
--- a/streampark-console/streampark-console-webapp/src/router/helper/routeHelper.ts
+++ b/streampark-console/streampark-console-webapp/src/router/helper/routeHelper.ts
@@ -23,12 +23,10 @@ import { warn } from '/@/utils/log';
import { createRouter, createWebHashHistory } from 'vue-router';
export type LayoutMapKey = 'LAYOUT';
-const IFRAME = () => import('/@/views/base/iframe/FrameBlank.vue');
const LayoutMap = new Map<string, () => Promise<typeof import('*.vue')>>();
LayoutMap.set('LAYOUT', LAYOUT);
-LayoutMap.set('IFRAME', IFRAME);
LayoutMap.set('PAGEVIEW', LAYOUT);
LayoutMap.set('BASICVIEW', LAYOUT);
diff --git a/streampark-console/streampark-console-webapp/src/views/base/iframe/FrameBlank.vue b/streampark-console/streampark-console-webapp/src/views/base/iframe/FrameBlank.vue
deleted file mode 100644
index e82b6630e..000000000
--- a/streampark-console/streampark-console-webapp/src/views/base/iframe/FrameBlank.vue
+++ /dev/null
@@ -1,25 +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
-
- https://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.
--->
-<template>
- <div></div>
-</template>
-<script lang="ts">
- import { defineComponent } from 'vue';
- export default defineComponent({
- name: 'FrameBlank',
- });
-</script>
diff --git a/streampark-console/streampark-console-webapp/src/views/base/iframe/index.vue b/streampark-console/streampark-console-webapp/src/views/base/iframe/index.vue
deleted file mode 100644
index 155d8daff..000000000
--- a/streampark-console/streampark-console-webapp/src/views/base/iframe/index.vue
+++ /dev/null
@@ -1,138 +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
-
- https://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.
--->
-<template>
- <div :class="prefixCls" :style="getWrapStyle">
- <Spin :spinning="loading" size="large" :style="getWrapStyle">
- <iframe
- :src="frameSrc"
- :class="`${prefixCls}__main`"
- ref="frameRef"
- @load="hideLoading"
- ></iframe>
- </Spin>
- </div>
-</template>
-<script lang="ts" setup>
- import { CSSProperties, onMounted } from 'vue';
- import { ref, unref, computed } from 'vue';
- import { Spin, Modal, message, notification } from 'ant-design-vue';
- import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
- import { propTypes } from '/@/utils/propTypes';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';
-
- defineProps({
- frameSrc: propTypes.string.def(''),
- // TODO
- // onLoad: { type: Function as PropType<(...args) => any>, default: null },
- });
-
- const loading = ref(true);
- const topRef = ref(50);
- const heightRef = ref(window.innerHeight);
- const frameRef = ref<HTMLFrameElement>();
- const { headerHeightRef } = useLayoutHeight();
-
- const { prefixCls } = useDesign('iframe-page');
- useWindowSizeFn(calcHeight, 150, { immediate: true });
-
- const getWrapStyle = computed((): CSSProperties => {
- return {
- height: `${unref(heightRef)}px`,
- };
- });
-
- onMounted(() => {
- calcHeight();
- });
-
- function calcHeight() {
- const iframe = unref(frameRef);
- if (!iframe) {
- return;
- }
- const top = headerHeightRef.value;
- topRef.value = top;
- heightRef.value = window.innerHeight - top;
- const clientHeight = document.documentElement.clientHeight - top;
- iframe.style.height = `${clientHeight}px`;
- }
-
- function onLoad(iframe) {
- import('penpal/lib/parent/connectToChild').then(({ default: connectToChild }) => {
- connectToChild({
- iframe,
- methods: {
- // ant-design-vue
- $messageSuccess: message.success,
- $messageInfo: message.info,
- $messageWarning: message.warning,
- $messageError: message.error,
- $messageLoading: message.loading,
-
- $notificationSuccess: notification.success,
- $notificationWarn: notification.warn,
- $notificationError: notification.error,
-
- $confirm: Modal.confirm,
- $info: Modal.info,
- $success: Modal.success,
- $error: Modal.error,
- $warning: Modal.warning,
- },
- });
- });
- }
-
- function hideLoading() {
- loading.value = false;
- onLoad(unref(frameRef));
- }
-</script>
-<style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-iframe-page';
-
- .@{prefix-cls} {
- .ant-spin-nested-loading {
- position: relative;
- height: 100%;
-
- .ant-spin-container {
- width: 100%;
- height: 100%;
- padding: 10px;
- }
- }
-
- &__mask {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }
-
- &__main {
- width: 100%;
- height: 100%;
- overflow: hidden;
- background-color: @component-background;
- border: 0;
- box-sizing: border-box;
- }
- }
-</style>
diff --git a/streampark-console/streampark-console-webapp/src/views/base/login/LoginForm.vue b/streampark-console/streampark-console-webapp/src/views/base/login/LoginForm.vue
index 351721cd3..cd924b71d 100644
--- a/streampark-console/streampark-console-webapp/src/views/base/login/LoginForm.vue
+++ b/streampark-console/streampark-console-webapp/src/views/base/login/LoginForm.vue
@@ -186,7 +186,7 @@
userStore.teamId = lastTeamId || '';
sessionStorage.setItem(APP_TEAMID_KEY_, userStore.teamId);
localStorage.setItem(APP_TEAMID_KEY_, userStore.teamId);
- successText += `: ${nickName}`;
+ if (nickName) successText += `: ${nickName}`;
}
const loginSuccess = await userStore.afterLoginAction(true);
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue
index 0f533b565..38e3b8818 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/Add.vue
@@ -132,15 +132,14 @@
formData.append('file', data.file);
try {
const path = await fetchUpload(formData);
- uploadLoading.value = false;
uploadJar.value = data.file.name;
const res = await fetchMain({
jar: path,
});
+ uploadLoading.value = false;
setFieldsValue({ mainClass: res });
} catch (error) {
console.error(error);
- } finally {
uploadLoading.value = false;
}
}
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/EditFlink.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/EditFlink.vue
index 64ae30f90..33729ed3f 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/EditFlink.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/EditFlink.vue
@@ -127,15 +127,14 @@
formData.append('file', data.file);
try {
const path = await fetchUpload(formData);
- uploadLoading.value = false;
uploadJar.value = data.file.name;
const res = await fetchMain({
jar: path,
});
+ uploadLoading.value = false;
setFieldsValue({ mainClass: res, jar: unref(uploadJar) });
} catch (error) {
console.error(error);
- } finally {
uploadLoading.value = false;
}
}
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue
index bfba6498e..5d4970830 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/EditStreamPark.vue
@@ -141,13 +141,12 @@
formData.append('file', data.file);
try {
const path = await fetchUpload(formData);
- uploadLoading.value = false;
uploadJar.value = data.file.name;
const res = await fetchMain({ jar: path });
+ uploadLoading.value = false;
setFieldsValue({ jar: uploadJar.value, mainClass: res });
} catch (error) {
console.error(error);
- } finally {
uploadLoading.value = false;
}
}
@@ -164,7 +163,10 @@
createMessage.warning(t('flink.app.editStreamPark.flinkSqlRequired'));
} else {
const access = await flinkSql?.value?.handleVerifySql();
- if (!access) return;
+ if (!access) {
+ createMessage.warning(t('flink.app.editStreamPark.sqlCheck'));
+ throw new Error(access);
+ }
handleSubmitSQL(values);
}
}
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 d9b1b2f9c..5e0fdf8fc 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
@@ -135,8 +135,10 @@
/* view */
async function handleJobView(app: AppListRecord) {
// Task is running, restarting, in savePoint
- if ([4, 5].includes(app.state) || app['optionState'] === OptionStateEnum.SAVEPOINTING) {
- console.log(app);
+ if (
+ [AppStateEnum.RESTARTING, AppStateEnum.RUNNING].includes(app.state) ||
+ app['optionState'] === OptionStateEnum.SAVEPOINTING
+ ) {
// yarn-per-job|yarn-session|yarn-application
handleView(app, unref(yarn));
}
@@ -191,7 +193,7 @@
<span
class="link"
:class="{
- pointer:
+ 'cursor-pointer':
[AppStateEnum.RESTARTING, AppStateEnum.RUNNING].includes(record.state) ||
record['optionState'] === OptionStateEnum.SAVEPOINTING,
}"
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/components/UploadJobJar.vue b/streampark-console/streampark-console-webapp/src/views/flink/app/components/UploadJobJar.vue
index 75953452c..d84913e40 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/components/UploadJobJar.vue
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/components/UploadJobJar.vue
@@ -43,10 +43,12 @@
});
function handleUploadJar(info) {
const status = info.file.status;
- if (status === 'error') {
+ if (status === 'done') {
+ emit('update:loading', false);
+ } else if (status === 'error') {
+ emit('update:loading', false);
createMessage.error(`${info.file.name} file upload failed.`);
}
- emit('update:loading', false);
}
/* Callback before file upload */
function handleBeforeUpload(file) {
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 d927c6e4e..53b199f8b 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
@@ -324,7 +324,7 @@ export const useFlinkApplication = (openStartModal: Fn) => {
<Form.Item
label="JobId"
name="jobId"
- rules={[{ required: true, message: 'ApplicationId is required' }]}
+ rules={[{ required: true, message: 'jobId is required' }]}
>
<Input type="text" placeholder="JobId" v-model:value={formValue.jobId} />
</Form.Item>
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditFlinkSchema.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditFlinkSchema.ts
index e76bced57..38fbe688c 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditFlinkSchema.ts
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditFlinkSchema.ts
@@ -68,14 +68,14 @@ export const useEditFlinkSchema = (jars: Ref) => {
label: 'Project',
component: 'Input',
render: ({ model }) => h(Alert, { message: model.projectName, type: 'info' }),
- ifShow: ({ model }) => model.resourceFrom == ResourceFromEnum.CICD,
+ ifShow: ({ model }) => model.resourceFrom == ResourceFromEnum.CICD && model.projectName,
},
{
field: 'module',
label: 'Module',
component: 'Input',
render: ({ model }) => h(Alert, { message: model.module, type: 'info' }),
- ifShow: ({ model }) => model.resourceFrom == ResourceFromEnum.CICD,
+ ifShow: ({ model }) => model.resourceFrom == ResourceFromEnum.CICD && model.module,
},
{
field: 'jar',
diff --git a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts
index 50a903bb6..663c621af 100644
--- a/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts
+++ b/streampark-console/streampark-console-webapp/src/views/flink/app/hooks/useEditStreamPark.ts
@@ -146,7 +146,7 @@ export const useEditStreamParkSchema = (
label: 'Project',
component: 'Input',
render: ({ model }) => h(Alert, { message: model.projectName, type: 'info' }),
- ifShow: ({ values }) => values.jobType != JobTypeEnum.SQL,
+ ifShow: ({ model, values }) => values.jobType != JobTypeEnum.SQL && model.projectName,
},
{ field: 'project', label: 'ProjectId', component: 'Input', show: false },
{
@@ -154,7 +154,7 @@ export const useEditStreamParkSchema = (
label: 'Application',
component: 'Input',
render: ({ model }) => h(Alert, { message: model.module, type: 'info' }),
- ifShow: ({ values }) => values.jobType != JobTypeEnum.SQL,
+ ifShow: ({ model, values }) => values.jobType != JobTypeEnum.SQL && model.module,
},
{ field: 'configId', label: 'configId', component: 'Input', show: false },
{
diff --git a/streampark-console/streampark-console-webapp/vite.config.ts b/streampark-console/streampark-console-webapp/vite.config.ts
index 2a06a3b98..33ea92570 100644
--- a/streampark-console/streampark-console-webapp/vite.config.ts
+++ b/streampark-console/streampark-console-webapp/vite.config.ts
@@ -69,7 +69,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
],
},
server: {
- https: true,
+ https: false,
// Listening on all local IPs
host: true,
port: VITE_PORT,