You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@seatunnel.apache.org by zh...@apache.org on 2022/07/19 14:16:22 UTC
[incubator-seatunnel] branch dev updated: [Feat][UI] Add the header component in the dashboard layout. (#2218)
This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-seatunnel.git
The following commit(s) were added to refs/heads/dev by this push:
new b8c9bb2f0 [Feat][UI] Add the header component in the dashboard layout. (#2218)
b8c9bb2f0 is described below
commit b8c9bb2f0122a602f8b9cfe8a0a78c19d932f3a3
Author: songjianet <17...@qq.com>
AuthorDate: Tue Jul 19 22:16:17 2022 +0800
[Feat][UI] Add the header component in the dashboard layout. (#2218)
---
seatunnel-ui/package.json | 3 +
seatunnel-ui/pnpm-lock.yaml | 174 +++++++++++++++++++++
.../styles/default.scss => postcss.config.js} | 23 +--
.../src/{assets/styles/default.scss => index.css} | 25 +--
.../src/layouts/dashboard/header/index.tsx | 14 +-
.../src/layouts/dashboard/header/logo/index.tsx | 5 +-
.../src/layouts/dashboard/header/menu/index.tsx | 27 +++-
.../src/layouts/dashboard/header/setting/index.tsx | 10 +-
.../src/layouts/dashboard/header/user/index.tsx | 5 +-
seatunnel-ui/src/main.ts | 2 +-
seatunnel-ui/src/views/login/index.tsx | 2 +-
.../header/menu/index.tsx => tailwind.config.js} | 23 ++-
12 files changed, 248 insertions(+), 65 deletions(-)
diff --git a/seatunnel-ui/package.json b/seatunnel-ui/package.json
index dd1b8631e..2b6eaf6d5 100644
--- a/seatunnel-ui/package.json
+++ b/seatunnel-ui/package.json
@@ -22,6 +22,9 @@
"vfonts": "^0.0.3",
"vue": "^3.2.37",
"vue-i18n": "^9.1.10",
+ "tailwindcss": "^3.1.6",
+ "postcss": "^8.4.14",
+ "autoprefixer": "^10.4.7",
"vue-router": "^4.0.16"
},
"devDependencies": {
diff --git a/seatunnel-ui/pnpm-lock.yaml b/seatunnel-ui/pnpm-lock.yaml
index c5818fed9..1196b0833 100644
--- a/seatunnel-ui/pnpm-lock.yaml
+++ b/seatunnel-ui/pnpm-lock.yaml
@@ -27,6 +27,7 @@ specifiers:
'@vitejs/plugin-vue': ^2.3.3
'@vitejs/plugin-vue-jsx': ^1.3.10
'@vueuse/core': ^8.7.5
+ autoprefixer: ^10.4.7
axios: ^0.27.2
dart-sass: ^1.25.0
date-fns: ^2.28.0
@@ -41,9 +42,11 @@ specifiers:
nprogress: ^0.2.0
pinia: ^2.0.14
pinia-plugin-persistedstate: ^1.6.1
+ postcss: ^8.4.14
prettier: ^2.7.1
sass: ^1.53.0
sass-loader: ^13.0.2
+ tailwindcss: ^3.1.6
typescript: ^4.7.4
typescript-plugin-css-modules: ^3.4.0
vfonts: ^0.0.3
@@ -79,14 +82,17 @@ devDependencies:
'@vicons/antd': 0.12.0
'@vitejs/plugin-vue': 2.3.3_vite@2.9.13+vue@3.2.37
'@vitejs/plugin-vue-jsx': 1.3.10
+ autoprefixer: 10.4.7_postcss@8.4.14
dart-sass: 1.25.0
eslint: 8.18.0
eslint-config-prettier: 8.5.0_eslint@8.18.0
eslint-plugin-prettier: 4.1.0_xu6ewijrtliw5q5lksq5uixwby
eslint-plugin-vue: 9.1.1_eslint@8.18.0
+ postcss: 8.4.14
prettier: 2.7.1
sass: 1.53.0
sass-loader: 13.0.2_sass@1.53.0
+ tailwindcss: 3.1.6
typescript: 4.7.4
typescript-plugin-css-modules: 3.4.0_typescript@4.7.4
vite: 2.9.13_sass@1.53.0
@@ -934,6 +940,25 @@ packages:
acorn: 8.7.1
dev: true
+ /acorn-node/1.8.2:
+ resolution: {integrity: sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==}
+ dependencies:
+ acorn: 7.4.1
+ acorn-walk: 7.2.0
+ xtend: 4.0.2
+ dev: true
+
+ /acorn-walk/7.2.0:
+ resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==}
+ engines: {node: '>=0.4.0'}
+ dev: true
+
+ /acorn/7.4.1:
+ resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==}
+ engines: {node: '>=0.4.0'}
+ hasBin: true
+ dev: true
+
/acorn/8.7.1:
resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
engines: {node: '>=0.4.0'}
@@ -979,6 +1004,10 @@ packages:
picomatch: 2.3.1
dev: true
+ /arg/5.0.2:
+ resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+ dev: true
+
/argparse/2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
dev: true
@@ -1002,6 +1031,22 @@ packages:
hasBin: true
dev: true
+ /autoprefixer/10.4.7_postcss@8.4.14:
+ resolution: {integrity: sha512-ypHju4Y2Oav95SipEcCcI5J7CGPuvz8oat7sUtYj3ClK44bldfvtvcxK6IEK++7rqB7YchDGzweZIBG+SD0ZAA==}
+ engines: {node: ^10 || ^12 || >=14}
+ hasBin: true
+ peerDependencies:
+ postcss: ^8.1.0
+ dependencies:
+ browserslist: 4.21.1
+ caniuse-lite: 1.0.30001361
+ fraction.js: 4.2.0
+ normalize-range: 0.1.2
+ picocolors: 1.0.0
+ postcss: 8.4.14
+ postcss-value-parser: 4.2.0
+ dev: true
+
/axios/0.27.2:
resolution: {integrity: sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==}
dependencies:
@@ -1058,6 +1103,11 @@ packages:
engines: {node: '>=6'}
dev: true
+ /camelcase-css/2.0.1:
+ resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+ engines: {node: '>= 6'}
+ dev: true
+
/camelcase/6.3.0:
resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
engines: {node: '>=10'}
@@ -1258,11 +1308,29 @@ packages:
resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
dev: true
+ /defined/1.0.0:
+ resolution: {integrity: sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==}
+ dev: true
+
/delayed-stream/1.0.0:
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
engines: {node: '>=0.4.0'}
dev: false
+ /detective/5.2.1:
+ resolution: {integrity: sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==}
+ engines: {node: '>=0.8.0'}
+ hasBin: true
+ dependencies:
+ acorn-node: 1.8.2
+ defined: 1.0.0
+ minimist: 1.2.6
+ dev: true
+
+ /didyoumean/1.2.2:
+ resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+ dev: true
+
/diff-sequences/27.5.1:
resolution: {integrity: sha512-k1gCAXAsNgLwEL+Y8Wvl+M6oEFj5bgazfZULpS5CneoPPXRaCCW7dm+q21Ky2VEE5X+VeRDBVg1Pcvvsr4TtNQ==}
engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -1275,6 +1343,10 @@ packages:
path-type: 4.0.0
dev: true
+ /dlv/1.1.3:
+ resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+ dev: true
+
/doctrine/3.0.0:
resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
engines: {node: '>=6.0.0'}
@@ -1786,6 +1858,10 @@ packages:
mime-types: 2.1.35
dev: false
+ /fraction.js/4.2.0:
+ resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
+ dev: true
+
/fs-extra/10.1.0:
resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
engines: {node: '>=12'}
@@ -2294,6 +2370,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /normalize-range/0.1.2:
+ resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
+ engines: {node: '>=0.10.0'}
+ dev: true
+
/nprogress/0.2.0:
resolution: {integrity: sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==}
dev: false
@@ -2309,6 +2390,11 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
+ /object-hash/3.0.0:
+ resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+ engines: {node: '>= 6'}
+ dev: true
+
/once/1.4.0:
resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
dependencies:
@@ -2366,6 +2452,11 @@ packages:
engines: {node: '>=8.6'}
dev: true
+ /pify/2.3.0:
+ resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+ engines: {node: '>=0.10.0'}
+ dev: true
+
/pify/4.0.1:
resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
engines: {node: '>=6'}
@@ -2422,6 +2513,28 @@ packages:
postcss: 6.0.23
dev: true
+ /postcss-import/14.1.0_postcss@8.4.14:
+ resolution: {integrity: sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==}
+ engines: {node: '>=10.0.0'}
+ peerDependencies:
+ postcss: ^8.0.0
+ dependencies:
+ postcss: 8.4.14
+ postcss-value-parser: 4.2.0
+ read-cache: 1.0.0
+ resolve: 1.22.1
+ dev: true
+
+ /postcss-js/4.0.0_postcss@8.4.14:
+ resolution: {integrity: sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==}
+ engines: {node: ^12 || ^14 || >= 16}
+ peerDependencies:
+ postcss: ^8.3.3
+ dependencies:
+ camelcase-css: 2.0.1
+ postcss: 8.4.14
+ dev: true
+
/postcss-load-config/3.1.4_postcss@8.4.14:
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
engines: {node: '>= 10'}
@@ -2439,6 +2552,16 @@ packages:
yaml: 1.10.2
dev: true
+ /postcss-nested/5.0.6_postcss@8.4.14:
+ resolution: {integrity: sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==}
+ engines: {node: '>=12.0'}
+ peerDependencies:
+ postcss: ^8.2.14
+ dependencies:
+ postcss: 8.4.14
+ postcss-selector-parser: 6.0.10
+ dev: true
+
/postcss-selector-parser/6.0.10:
resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
engines: {node: '>=4'}
@@ -2451,6 +2574,10 @@ packages:
resolution: {integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==}
dev: true
+ /postcss-value-parser/4.2.0:
+ resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+ dev: true
+
/postcss/6.0.23:
resolution: {integrity: sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==}
engines: {node: '>=4.0.0'}
@@ -2509,10 +2636,21 @@ packages:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: true
+ /quick-lru/5.1.1:
+ resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
+ engines: {node: '>=10'}
+ dev: true
+
/react-is/17.0.2:
resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
dev: false
+ /read-cache/1.0.0:
+ resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+ dependencies:
+ pify: 2.3.0
+ dev: true
+
/readdirp/3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
@@ -2749,6 +2887,37 @@ packages:
resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
dev: true
+ /tailwindcss/3.1.6:
+ resolution: {integrity: sha512-7skAOY56erZAFQssT1xkpk+kWt2NrO45kORlxFPXUt3CiGsVPhH1smuH5XoDH6sGPXLyBv+zgCKA2HWBsgCytg==}
+ engines: {node: '>=12.13.0'}
+ hasBin: true
+ dependencies:
+ arg: 5.0.2
+ chokidar: 3.5.3
+ color-name: 1.1.4
+ detective: 5.2.1
+ didyoumean: 1.2.2
+ dlv: 1.1.3
+ fast-glob: 3.2.11
+ glob-parent: 6.0.2
+ is-glob: 4.0.3
+ lilconfig: 2.0.5
+ normalize-path: 3.0.0
+ object-hash: 3.0.0
+ picocolors: 1.0.0
+ postcss: 8.4.14
+ postcss-import: 14.1.0_postcss@8.4.14
+ postcss-js: 4.0.0_postcss@8.4.14
+ postcss-load-config: 3.1.4_postcss@8.4.14
+ postcss-nested: 5.0.6_postcss@8.4.14
+ postcss-selector-parser: 6.0.10
+ postcss-value-parser: 4.2.0
+ quick-lru: 5.1.1
+ resolve: 1.22.1
+ transitivePeerDependencies:
+ - ts-node
+ dev: true
+
/text-table/0.2.0:
resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
dev: true
@@ -3046,6 +3215,11 @@ packages:
engines: {node: '>=12'}
dev: true
+ /xtend/4.0.2:
+ resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+ engines: {node: '>=0.4'}
+ dev: true
+
/yallist/4.0.0:
resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
dev: true
diff --git a/seatunnel-ui/src/assets/styles/default.scss b/seatunnel-ui/postcss.config.js
similarity index 86%
copy from seatunnel-ui/src/assets/styles/default.scss
copy to seatunnel-ui/postcss.config.js
index 54c9b7806..6ae9aea43 100644
--- a/seatunnel-ui/src/assets/styles/default.scss
+++ b/seatunnel-ui/postcss.config.js
@@ -15,22 +15,9 @@
* limitations under the License.
*/
-* {
- outline: 0;
-}
-
-html,
-body {
- width: 100%;
- height: 100%;
-}
-
-html,
-body,
-p,
-dl,
-dd,
-dt {
- margin: 0;
- padding: 0;
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {}
+ }
}
\ No newline at end of file
diff --git a/seatunnel-ui/src/assets/styles/default.scss b/seatunnel-ui/src/index.css
similarity index 86%
rename from seatunnel-ui/src/assets/styles/default.scss
rename to seatunnel-ui/src/index.css
index 54c9b7806..4b0aa3dd9 100644
--- a/seatunnel-ui/src/assets/styles/default.scss
+++ b/seatunnel-ui/src/index.css
@@ -15,22 +15,9 @@
* limitations under the License.
*/
-* {
- outline: 0;
-}
-
-html,
-body {
- width: 100%;
- height: 100%;
-}
-
-html,
-body,
-p,
-dl,
-dd,
-dt {
- margin: 0;
- padding: 0;
-}
\ No newline at end of file
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind screens;
+@tailwind fonts;
+@tailwind colors;
\ No newline at end of file
diff --git a/seatunnel-ui/src/layouts/dashboard/header/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/index.tsx
index 76d78dcda..61bad2d8d 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/index.tsx
@@ -26,11 +26,15 @@ const Header = defineComponent({
setup() {},
render() {
return (
- <NSpace>
- <Logo />
- <Menu />
- <Setting />
- <User />
+ <NSpace justify='space-between' class='h-16 border-b border-gray-200'>
+ <NSpace>
+ <Logo />
+ <Menu />
+ </NSpace>
+ <NSpace>
+ <Setting />
+ <User />
+ </NSpace>
</NSpace>
)
}
diff --git a/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
index 8db3a48ad..a8ad7f2a7 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/logo/index.tsx
@@ -16,12 +16,15 @@
*/
import { defineComponent } from 'vue'
+import { NSpace } from 'naive-ui'
const Logo = defineComponent({
setup() {},
render() {
return (
- <h2>SeaTunnel</h2>
+ <NSpace justify='center' align='center' class='h-16 w-48'>
+ <h2 class='text-2xl font-bold'>SeaTunnel</h2>
+ </NSpace>
)
}
})
diff --git a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
index 06f463dc5..b8e4a30b9 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
@@ -15,13 +15,34 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
+import { defineComponent, toRefs } from 'vue'
+import { NMenu, NSpace } from 'naive-ui'
+import { useRouter } from 'vue-router'
+import { useMenu } from './use-menu'
const Menu = defineComponent({
- setup() {},
+ setup() {
+ const { state } = useMenu()
+ const router = useRouter()
+
+ const handleMenuClick = (key: string) => {
+ router.push({ path: `/${key}` })
+ }
+
+ return {
+ ...toRefs(state),
+ handleMenuClick
+ }
+ },
render() {
return (
- <div></div>
+ <NSpace align='center' class='h-16'>
+ <NMenu
+ mode='horizontal'
+ options={this.menuOptions}
+ onUpdateValue={this.handleMenuClick}
+ />
+ </NSpace>
)
}
})
diff --git a/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx
index 84bd0de1b..c20cf4bd2 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/setting/index.tsx
@@ -16,16 +16,18 @@
*/
import { defineComponent } from 'vue'
-import { NIcon } from 'naive-ui'
+import { NIcon, NSpace } from 'naive-ui'
import { SettingOutlined } from '@vicons/antd'
const Setting = defineComponent({
setup() {},
render() {
return (
- <NIcon>
- <SettingOutlined />
- </NIcon>
+ <NSpace align='center' justify='center' class='h-16 w-12' style={{ cursor: 'pointer' }}>
+ <NIcon size='20'>
+ <SettingOutlined />
+ </NIcon>
+ </NSpace>
)
}
})
diff --git a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
index dc3e2c6dc..c2af88f83 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
+++ b/seatunnel-ui/src/layouts/dashboard/header/user/index.tsx
@@ -16,12 +16,15 @@
*/
import { defineComponent } from 'vue'
+import { NSpace } from 'naive-ui'
const User = defineComponent({
setup() {},
render() {
return (
- <img src="" alt=""/>
+ <NSpace justify='center' align='center' class='h-16 w-12 mr-2'>
+ <img class='h-10 w-10 rounded-full' src='https://avatars.githubusercontent.com/u/19239641?s=64&v=4' alt='' />
+ </NSpace>
)
}
})
diff --git a/seatunnel-ui/src/main.ts b/seatunnel-ui/src/main.ts
index 0f0cb7573..84ec552c6 100644
--- a/seatunnel-ui/src/main.ts
+++ b/seatunnel-ui/src/main.ts
@@ -22,7 +22,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import i18n from '@/locales'
import router from './router'
import utils from '@/utils'
-import './assets/styles/default.scss'
+import './index.css'
const app = createApp(App)
const pinia = createPinia()
diff --git a/seatunnel-ui/src/views/login/index.tsx b/seatunnel-ui/src/views/login/index.tsx
index 3205abf71..bf7c0dde4 100644
--- a/seatunnel-ui/src/views/login/index.tsx
+++ b/seatunnel-ui/src/views/login/index.tsx
@@ -39,7 +39,7 @@ const Login = defineComponent({
},
render() {
return (
- <NSpace justify='center' align='center' style={{ width: '100%', height: '100vh' }}>
+ <NSpace justify='center' align='center' class='w-full h-screen'>
<div>
<h2>{this.t('login.login_to_sea_tunnel')}</h2>
<NForm rules={this.rules} ref='loginFormRef'>
diff --git a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx b/seatunnel-ui/tailwind.config.js
similarity index 81%
copy from seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
copy to seatunnel-ui/tailwind.config.js
index 06f463dc5..90a1a03f0 100644
--- a/seatunnel-ui/src/layouts/dashboard/header/menu/index.tsx
+++ b/seatunnel-ui/tailwind.config.js
@@ -15,15 +15,14 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
-
-const Menu = defineComponent({
- setup() {},
- render() {
- return (
- <div></div>
- )
- }
-})
-
-export default Menu
\ No newline at end of file
+module.exports = {
+ content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+ darkMode: 'media',
+ theme: {
+ extend: {}
+ },
+ variants: {
+ extend: {}
+ },
+ plugins: []
+}
\ No newline at end of file