From 848a4075aaff130b9172c0f574125f445ea13f34 Mon Sep 17 00:00:00 2001 From: nutsjian Date: Sun, 9 Jul 2023 22:03:40 +0800 Subject: [PATCH] [style] eslint & prettier & workflow --- .github/workflows/web-frontend.yml | 43 +++ .../solidui/dao/entity/DataSourceTypeKey.java | 2 +- .../src/main/resources/application.yaml | 2 +- solidui-web/.eslintrc.js | 2 + solidui-web/package.json | 9 +- solidui-web/src/apis/service.ts | 32 +- .../src/assets/styles/antd-custom.less | 2 +- solidui-web/src/assets/styles/area.less | 41 ++- solidui-web/src/assets/styles/designer.less | 33 ++- solidui-web/src/assets/styles/iconfont.less | 71 ++--- solidui-web/src/assets/styles/layout.less | 22 +- solidui-web/src/assets/styles/normalize.css | 122 ++++---- .../src/assets/styles/solideditor.less | 34 +-- solidui-web/src/assets/styles/variables.less | 29 +- .../src/components/Checkbox/index.less | 4 +- .../components/ColorPicker/ColorPicker.less | 128 ++++---- .../components/ColorPicker/PointCircle.tsx | 2 +- .../src/components/ColorPicker/Pointer.tsx | 2 +- .../src/components/InputColor/InputColor.less | 40 +-- .../src/components/InputColor/InputColor.tsx | 2 +- .../components/InputNumber/InputNumber.less | 10 +- .../src/components/InputText/InputText.less | 10 +- .../InputTextArea/InputTextArea.less | 2 +- .../LeftRightExpander/LeftRightExpander.less | 9 +- .../components/Radio/ButtonGroupRadio.less | 68 ++--- solidui-web/src/components/Select/Select.less | 7 +- solidui-web/src/components/Select/Select.tsx | 2 +- solidui-web/src/components/Slider/slider.less | 18 +- .../components/SolidEditor/SolidEditor.tsx | 133 ++++----- .../SolidEditor/SolidEditorContext.tsx | 2 +- .../components/SolidEditor/SolidViewport.tsx | 3 + .../components/SolidEditor/style/index.less | 46 +-- .../SolidEditor/utils/MoveableManager.tsx | 8 +- .../SolidEditor/utils/SolidEditorManager.tsx | 7 +- .../src/components/SolidEditor/utils/index.ts | 5 +- solidui-web/src/components/Switch/Switch.less | 275 +++++++++--------- solidui-web/src/layouts/DefaultLayout.less | 11 +- solidui-web/src/layouts/DefaultLayout.tsx | 10 +- .../src/pages/DataSource/DataSourceList.less | 4 +- .../src/pages/DataSource/DataSourceList.tsx | 2 +- .../DataSource/_components/DataSource.less | 2 +- .../DataSource/_components/DataSourceEdit.tsx | 15 +- .../DataSource/_components/DataSourceView.tsx | 35 +-- .../src/pages/DataSource/useDataSource.tsx | 5 +- .../src/pages/Designer/Aside/aside.less | 28 +- solidui-web/src/pages/Designer/Designer.tsx | 13 +- .../src/pages/Designer/General/general.less | 39 ++- .../src/pages/Designer/Header/Header.tsx | 2 +- .../src/pages/Designer/Header/header.less | 103 ++++--- .../src/pages/Designer/Outline/Outline.tsx | 1 - .../src/pages/Designer/Outline/outline.less | 174 +++++------ .../src/pages/Designer/Outline/useOutline.ts | 96 +++--- .../pages/Designer/Preview/PreviewPopup.tsx | 79 +++-- .../src/pages/Designer/Preview/index.tsx | 72 ++--- .../src/pages/Designer/Preview/preview.less | 43 ++- .../Designer/Properties/configurations.less | 24 +- .../Properties/styles/StyleProperties.tsx | 11 +- .../styles/StyleTitleProperties.tsx | 4 +- .../Designer/Properties/useDataProperties.tsx | 110 +++++-- .../Designer/Properties/useProperties.tsx | 46 +-- solidui-web/src/pages/Login/login.less | 12 +- .../src/pages/Project/ProjectList.less | 4 +- .../Project/_components/ProjectCard.less | 2 - .../pages/Project/_components/ProjectCard.tsx | 5 +- solidui-web/src/utils/fullScreen.ts | 4 +- solidui-web/src/views/SolidView.tsx | 22 +- .../views/echarts/EChartsLineSolidView.tsx | 11 +- 67 files changed, 1158 insertions(+), 1058 deletions(-) create mode 100644 .github/workflows/web-frontend.yml diff --git a/.github/workflows/web-frontend.yml b/.github/workflows/web-frontend.yml new file mode 100644 index 0000000..4c296fd --- /dev/null +++ b/.github/workflows/web-frontend.yml @@ -0,0 +1,43 @@ +# +# Licensed to the Apache Software Foundation (ASF) under one or more +# contributor license agreements. See the NOTICE file distributed with +# this work for additional information regarding copyright ownership. +# The ASF licenses this file to You under the Apache License, Version 2.0 +# (the "License"); you may not use this file except in compliance with +# the License. You may obtain a copy of the License at +# +# http://www.apache.org/licenses/LICENSE-2.0 +# +# Unless required by applicable law or agreed to in writing, software +# distributed under the License is distributed on an "AS IS" BASIS, +# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +# See the License for the specific language governing permissions and +# limitations under the License. +# + +name: Frontend + +on: + push: + pull_request: + + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [14.17.3] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - name: Checkout + uses: actions/checkout@v2 + - name: lint + if: steps.check.outcome == 'failure' + working-directory: ./solidui-web + run: | + npm run lint -- --quiet + npm run prettier-check \ No newline at end of file diff --git a/solidui-dao/src/main/java/com/cloudorc/solidui/dao/entity/DataSourceTypeKey.java b/solidui-dao/src/main/java/com/cloudorc/solidui/dao/entity/DataSourceTypeKey.java index 2ec2c84..3a39ff3 100644 --- a/solidui-dao/src/main/java/com/cloudorc/solidui/dao/entity/DataSourceTypeKey.java +++ b/solidui-dao/src/main/java/com/cloudorc/solidui/dao/entity/DataSourceTypeKey.java @@ -79,7 +79,7 @@ public enum Scope { @TableId(value = "id", type = IdType.AUTO) private Long id; - @TableId(value = "datasource_type_id") +// @TableId(value = "datasource_type_id") private Long dataSourceTypeId; /** Key name */ diff --git a/solidui-entrance/src/main/resources/application.yaml b/solidui-entrance/src/main/resources/application.yaml index a81aebf..7bb7e56 100644 --- a/solidui-entrance/src/main/resources/application.yaml +++ b/solidui-entrance/src/main/resources/application.yaml @@ -45,7 +45,7 @@ spring: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/solidui?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai username: root - password: root + password: Qing@123456 hikari: connection-test-query: select 1 minimum-idle: 5 diff --git a/solidui-web/.eslintrc.js b/solidui-web/.eslintrc.js index ab84df8..6fe5eec 100644 --- a/solidui-web/.eslintrc.js +++ b/solidui-web/.eslintrc.js @@ -95,6 +95,8 @@ module.exports = { "allowSingleExtends": true, } ], + "@typescript-eslint/no-non-null-assertion": 0, // need discussion, temporary disable + // react "react/jsx-filename-extension": [1, { extensions: [".jsx", ".tsx"] }], "react/require-default-props": 0, diff --git a/solidui-web/package.json b/solidui-web/package.json index 50453ce..ad26903 100644 --- a/solidui-web/package.json +++ b/solidui-web/package.json @@ -6,10 +6,12 @@ "author": "solidui", "license": "Apache-2.0", "scripts": { - "dev": "cross-env NODE_ENV=development BASE_ENV=development webpack-dev-server -c scripts/webpack.dev.js", - "build": "cross-env NODE_ENV=production BASE_ENV=production webpack -c scripts/webpack.prod.js", + "dev": "cross-env NODE_ENV=development webpack-dev-server -c scripts/webpack.dev.js", + "build": "cross-env NODE_ENV=production webpack -c scripts/webpack.prod.js", "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx .", - "lint:fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx ." + "lint:fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx,.ts,.tsx .", + "prettier-check": "prettier './src/**/*{.js,.jsx,.ts,.tsx,.css,.less}' --check", + "prettier-fix": "prettier './src/**/*{.js,.jsx,.ts,.tsx,.css,.less}' --write" }, "devDependencies": { "@babel/core": "7.20.12", @@ -71,6 +73,7 @@ "@scena/matrix": "^1.1.1", "@scena/react-guides": "0.22.3", "@szhsin/react-menu": "^4.0.0", + "ahooks": "^3.7.8", "antd": "4.24.7", "axios": "1.3.2", "classnames": "2.3.2", diff --git a/solidui-web/src/apis/service.ts b/solidui-web/src/apis/service.ts index f9f610b..d44875c 100644 --- a/solidui-web/src/apis/service.ts +++ b/solidui-web/src/apis/service.ts @@ -128,7 +128,7 @@ function doRequest( break; } - return new Promise>((resolve, reject) => + return new Promise>((resolve, reject) => { response .then((res) => { const { data: mData } = res; @@ -151,8 +151,34 @@ function doRequest( const errText = JSON.stringify(err); message.warning(errText); reject(err); - }), - ); + }); + }); + + // return new Promise>((resolve, reject) => + // response + // .then((res) => { + // const { data: mData } = res; + // const { success } = mData; + // // const { code } = mData; + // const msg = mData.msg || ""; + // if (success) { + // resolve({ + // ok: true, + // data: mData.data, + // }); + // } else { + // message.warning(msg); + // resolve({ + // ok: false, + // }); + // } + // }) + // .catch((err) => { + // const errText = JSON.stringify(err); + // message.warning(errText); + // reject(err); + // }), + // ); } const service = { diff --git a/solidui-web/src/assets/styles/antd-custom.less b/solidui-web/src/assets/styles/antd-custom.less index 667f854..880b666 100644 --- a/solidui-web/src/assets/styles/antd-custom.less +++ b/solidui-web/src/assets/styles/antd-custom.less @@ -15,7 +15,7 @@ * limitations under the License. */ - .solidui-modal { +.solidui-modal { position: relative; width: 100%; height: 100%; diff --git a/solidui-web/src/assets/styles/area.less b/solidui-web/src/assets/styles/area.less index bba0c44..cdd94b2 100644 --- a/solidui-web/src/assets/styles/area.less +++ b/solidui-web/src/assets/styles/area.less @@ -16,29 +16,26 @@ */ .area-bottom { - .cu-b-l { + .cu-b-l { + } - } + .cu-b-r { + display: flex; + justify-content: space-between; + align-items: center; + margin-right: 24px; - .cu-b-r { - display: flex; - justify-content: space-between; - align-items: center; - margin-right: 24px; + .cu-b-r-nav { + display: flex; + align-items: center; + padding-right: 8px; + transition: all; - .cu-b-r-nav { - display: flex; - align-items: center; - padding-right: 8px; - transition: all; - - .cu-b-zoom-container { - display: flex; - align-items: center; - user-select: none; - - - } - } - } + .cu-b-zoom-container { + display: flex; + align-items: center; + user-select: none; + } + } + } } diff --git a/solidui-web/src/assets/styles/designer.less b/solidui-web/src/assets/styles/designer.less index dc3d119..adbd99a 100644 --- a/solidui-web/src/assets/styles/designer.less +++ b/solidui-web/src/assets/styles/designer.less @@ -15,30 +15,33 @@ * limitations under the License. */ - #dashboard { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - z-index: 1; - font-size: 12px; +#dashboard { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + z-index: 1; + font-size: 12px; overflow: hidden; } -ul, li { +ul, +li { list-style-type: none; } -ul, li, p { +ul, +li, +p { margin: 0; padding: 0; border: 0; } -@import './variables.less'; -@import './layout.less'; -@import './aside.less'; -@import './area.less'; -@import './iconfont.less'; +@import "./variables.less"; +@import "./layout.less"; +@import "./aside.less"; +@import "./area.less"; +@import "./iconfont.less"; @import "./antd-custom.less"; diff --git a/solidui-web/src/assets/styles/iconfont.less b/solidui-web/src/assets/styles/iconfont.less index b719fad..44e2fa9 100644 --- a/solidui-web/src/assets/styles/iconfont.less +++ b/solidui-web/src/assets/styles/iconfont.less @@ -15,53 +15,56 @@ * limitations under the License. */ - @import './variables.less'; +@import "./variables.less"; @font-face { - font-family: 'iconfont'; - src: url('//at.alicdn.com/t/c/font_3377463_euwvemrm6og.woff2?t=1672814149412') format('woff2'), - url('//at.alicdn.com/t/c/font_3377463_euwvemrm6og.woff?t=1672814149412') format('woff'), - url('//at.alicdn.com/t/c/font_3377463_euwvemrm6og.ttf?t=1672814149412') format('truetype'); + font-family: "iconfont"; + src: url("//at.alicdn.com/t/c/font_3377463_euwvemrm6og.woff2?t=1672814149412") + format("woff2"), + url("//at.alicdn.com/t/c/font_3377463_euwvemrm6og.woff?t=1672814149412") + format("woff"), + url("//at.alicdn.com/t/c/font_3377463_euwvemrm6og.ttf?t=1672814149412") + format("truetype"); } .@{prefixCls}-font { - font-family: 'iconfont' !important; - font-style: normal; - -webkit-font-smoothing: antialiased; - -webkit-text-stroke-width: 0.2px; - -moz-osx-font-smoothing: grayscale; + font-family: "iconfont" !important; + font-style: normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.2px; + -moz-osx-font-smoothing: grayscale; - &.f12 { - font-size: 12px; - } + &.f12 { + font-size: 12px; + } - &.f13 { - font-size: 13px; - } + &.f13 { + font-size: 13px; + } - &.f14 { - font-size: 14px; - } + &.f14 { + font-size: 14px; + } - &.f15 { - font-size: 15px; - } + &.f15 { + font-size: 15px; + } - &.f16 { - font-size: 16px; - } + &.f16 { + font-size: 16px; + } } .@{prefixCls}-font { - &.@{prefixCls}-chart-column::before { - content: '\e602'; - } + &.@{prefixCls}-chart-column::before { + content: "\e602"; + } - &.@{prefixCls}-eye::before { - content: '\e8c7'; - } + &.@{prefixCls}-eye::before { + content: "\e8c7"; + } - &.@{prefixCls}-lock::before { - content: '\e7b9'; - } + &.@{prefixCls}-lock::before { + content: "\e7b9"; + } } diff --git a/solidui-web/src/assets/styles/layout.less b/solidui-web/src/assets/styles/layout.less index 104e5be..12713db 100644 --- a/solidui-web/src/assets/styles/layout.less +++ b/solidui-web/src/assets/styles/layout.less @@ -21,19 +21,15 @@ height: 100%; } - - - - .workarea { - position: absolute; - top: @headerHeight; - left: @asideWidth; - bottom: 0; - right: @propertiesWidth; - z-index: 12; - background-color: #fff; - transition: all .3s; + position: absolute; + top: @headerHeight; + left: @asideWidth; + bottom: 0; + right: @propertiesWidth; + z-index: 12; + background-color: #fff; + transition: all 0.3s; } .flex-horizontal-layout { @@ -87,12 +83,10 @@ position: relative; } - .cursor-pointer { cursor: pointer; } - .solidui-icon-btn { cursor: pointer; } diff --git a/solidui-web/src/assets/styles/normalize.css b/solidui-web/src/assets/styles/normalize.css index 9ea0b06..1c4c0e1 100644 --- a/solidui-web/src/assets/styles/normalize.css +++ b/solidui-web/src/assets/styles/normalize.css @@ -25,9 +25,9 @@ * 2. Prevent adjustments of font size after orientation changes in iOS. */ - html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections @@ -38,7 +38,7 @@ */ body { - margin: 0; + margin: 0; } /** @@ -46,7 +46,7 @@ body { */ main { - display: block; + display: block; } /** @@ -55,8 +55,8 @@ main { */ h1 { - font-size: 2em; - margin: 0.67em 0; + font-size: 2em; + margin: 0.67em 0; } /* Grouping content @@ -68,9 +68,9 @@ h1 { */ hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ } /** @@ -79,8 +79,8 @@ hr { */ pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /* Text-level semantics @@ -91,7 +91,7 @@ pre { */ a { - background-color: transparent; + background-color: transparent; } /** @@ -100,9 +100,9 @@ a { */ abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ } /** @@ -111,7 +111,7 @@ abbr[title] { b, strong { - font-weight: bolder; + font-weight: bolder; } /** @@ -122,8 +122,8 @@ strong { code, kbd, samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } /** @@ -131,7 +131,7 @@ samp { */ small { - font-size: 80%; + font-size: 80%; } /** @@ -141,18 +141,18 @@ small { sub, sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -0.25em; + bottom: -0.25em; } sup { - top: -0.5em; + top: -0.5em; } /* Embedded content @@ -163,7 +163,7 @@ sup { */ img { - border-style: none; + border-style: none; } /* Forms @@ -179,10 +179,10 @@ input, optgroup, select, textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ } /** @@ -191,8 +191,9 @@ textarea { */ button, -input { /* 1 */ - overflow: visible; +input { + /* 1 */ + overflow: visible; } /** @@ -201,8 +202,9 @@ input { /* 1 */ */ button, -select { /* 1 */ - text-transform: none; +select { + /* 1 */ + text-transform: none; } /** @@ -213,7 +215,7 @@ button, [type="button"], [type="reset"], [type="submit"] { - -webkit-appearance: button; + -webkit-appearance: button; } /** @@ -224,8 +226,8 @@ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; + border-style: none; + padding: 0; } /** @@ -236,7 +238,7 @@ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; + outline: 1px dotted ButtonText; } /** @@ -244,7 +246,7 @@ button:-moz-focusring, */ fieldset { - padding: 0.35em 0.75em 0.625em; + padding: 0.35em 0.75em 0.625em; } /** @@ -255,12 +257,12 @@ fieldset { */ legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ } /** @@ -268,7 +270,7 @@ legend { */ progress { - vertical-align: baseline; + vertical-align: baseline; } /** @@ -276,7 +278,7 @@ progress { */ textarea { - overflow: auto; + overflow: auto; } /** @@ -286,8 +288,8 @@ textarea { [type="checkbox"], [type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ } /** @@ -296,7 +298,7 @@ textarea { [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; + height: auto; } /** @@ -305,8 +307,8 @@ textarea { */ [type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** @@ -314,7 +316,7 @@ textarea { */ [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; + -webkit-appearance: none; } /** @@ -323,8 +325,8 @@ textarea { */ ::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ } /* Interactive @@ -335,7 +337,7 @@ textarea { */ details { - display: block; + display: block; } /* @@ -343,7 +345,7 @@ details { */ summary { - display: list-item; + display: list-item; } /* Misc @@ -354,7 +356,7 @@ summary { */ template { - display: none; + display: none; } /** @@ -362,5 +364,5 @@ template { */ [hidden] { - display: none; + display: none; } diff --git a/solidui-web/src/assets/styles/solideditor.less b/solidui-web/src/assets/styles/solideditor.less index 05d22f5..659d657 100644 --- a/solidui-web/src/assets/styles/solideditor.less +++ b/solidui-web/src/assets/styles/solideditor.less @@ -15,20 +15,20 @@ * limitations under the License. */ - @import "./variables.less"; +@import "./variables.less"; @editorPrefix: visual; [class*="visual-"] { - font-family: "Open Sans", sans-serif; + font-family: "Open Sans", sans-serif; } .@{editorPrefix}-editor { - position: relative; - width: 100%; - height: 100%; - font-family: sans-serif; - transform-style: preserve-3d; + position: relative; + width: 100%; + height: 100%; + font-family: sans-serif; + transform-style: preserve-3d; .editor-guides { position: absolute !important; @@ -97,14 +97,14 @@ } .solid-view-dimension { - position: absolute; - background: @mainColor; - border-radius: 2px; - padding: 1px 3px; - color: white; - font-size: 13px; - white-space: nowrap; - font-weight: bold; - will-change: transform; - transform: translate(-50%) translateZ(0px); + position: absolute; + background: @mainColor; + border-radius: 2px; + padding: 1px 3px; + color: white; + font-size: 13px; + white-space: nowrap; + font-weight: bold; + will-change: transform; + transform: translate(-50%) translateZ(0px); } diff --git a/solidui-web/src/assets/styles/variables.less b/solidui-web/src/assets/styles/variables.less index 3c33a00..d33ede3 100644 --- a/solidui-web/src/assets/styles/variables.less +++ b/solidui-web/src/assets/styles/variables.less @@ -15,7 +15,7 @@ * limitations under the License. */ - @prefixCls: bi; +@prefixCls: bi; @menuWidth: 0px; @tabsWidth: 0px; @@ -31,34 +31,31 @@ @back5Color: #555; @back6Color: #666; -@bgColor: #FEFEFE; +@bgColor: #fefefe; @primaryColor: #1f7cc8; @textColor: #1a1a1a; -@infiniteViewBgColor: #EAECEE; -@canvasBgColor: #FFFFFF; +@infiniteViewBgColor: #eaecee; +@canvasBgColor: #ffffff; -@headerBgColor: #EAECEE; +@headerBgColor: #eaecee; @headerHeight: 54px; @asideWidth: 240px; @propertiesWidth: 326px; - -@titleColor: rgba(0, 0, 0, .85); -@primaryTextColor: rgba(0, 0, 0, .85); -@secondaryTextColor: rgba(0, 0, 0, .45); -@disableColor: rgba(0, 0, 0, .25); -@borderColor: rgba(0, 0, 0, .15); -@dividersColor: rgba(0, 0, 0, .06); -@backgroundColor: rgba(0, 0, 0, .04); -@tableHeaderColor: rgba(0, 0, 0, .02); - +@titleColor: rgba(0, 0, 0, 0.85); +@primaryTextColor: rgba(0, 0, 0, 0.85); +@secondaryTextColor: rgba(0, 0, 0, 0.45); +@disableColor: rgba(0, 0, 0, 0.25); +@borderColor: rgba(0, 0, 0, 0.15); +@dividersColor: rgba(0, 0, 0, 0.06); +@backgroundColor: rgba(0, 0, 0, 0.04); +@tableHeaderColor: rgba(0, 0, 0, 0.02); /** * designer variables */ @rulerGuidesSize: 30px; - @hoverBgColor: #f4f4f4; diff --git a/solidui-web/src/components/Checkbox/index.less b/solidui-web/src/components/Checkbox/index.less index 2ed4a5f..cb0b2fd 100644 --- a/solidui-web/src/components/Checkbox/index.less +++ b/solidui-web/src/components/Checkbox/index.less @@ -15,7 +15,7 @@ * limitations under the License. */ - .solid-checkbox { +.solid-checkbox { display: flex; flex-direction: row; justify-content: center; @@ -40,7 +40,7 @@ height: 14px; flex-shrink: 0; margin: 0; - border: 1px solid #9EA6B2; + border: 1px solid #9ea6b2; &::after { content: " "; diff --git a/solidui-web/src/components/ColorPicker/ColorPicker.less b/solidui-web/src/components/ColorPicker/ColorPicker.less index 9f7f212..34cad74 100644 --- a/solidui-web/src/components/ColorPicker/ColorPicker.less +++ b/solidui-web/src/components/ColorPicker/ColorPicker.less @@ -15,81 +15,81 @@ * limitations under the License. */ - .solid-colorpicker { - font-family: Menlo, sans-serif; - background-color: #ffffff; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3); - width: auto; - box-sizing: inherit; - margin-top: 0; +.solid-colorpicker { + font-family: Menlo, sans-serif; + background-color: #ffffff; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.3); + width: auto; + box-sizing: inherit; + margin-top: 0; - .body { - padding: 0; + .body { + padding: 0; - .controls { - display: flex; + .controls { + display: flex; - .toggles { - flex: 1; + .toggles { + flex: 1; - .hue-wrap { - position: relative; - height: 10px; - } - } - } + .hue-wrap { + position: relative; + height: 10px; + } + } + } - .fields-wrap { - display: flex; + .fields-wrap { + display: flex; - .fields { - flex: 1; - display: flex; - margin-left: -6px; + .fields { + flex: 1; + display: flex; + margin-left: -6px; - .field { - width: 100%; - padding-left: 6px; + .field { + width: 100%; + padding-left: 6px; - input { - font-size: 12px; - color: #333; - border-radius: 2px; - height: 22px; - text-align: center; - //box-shadow: inset 0 0 0 1px #dadada; - border: 1px solid rgb(232, 234, 237); - outline: none; - width: 100%; - } - } - } - } - } /* end body styles {controls fields} */ + input { + font-size: 12px; + color: #333; + border-radius: 2px; + height: 22px; + text-align: center; + //box-shadow: inset 0 0 0 1px #dadada; + border: 1px solid rgb(232, 234, 237); + outline: none; + width: 100%; + } + } + } + } + } /* end body styles {controls fields} */ - .pointer-circle { - width: 12px; - height: 12px; - border-radius: 6px; - transform: translate(-6px, -6px); - box-shadow: inset 0 0 0 1px #fff; - } + .pointer-circle { + width: 12px; + height: 12px; + border-radius: 6px; + transform: translate(-6px, -6px); + box-shadow: inset 0 0 0 1px #fff; + } - .pointer { - position: absolute; - width: 12px; - height: 12px; - border-radius: 6px; - transform: translate(-6px, -1px); - background-color: #f8f8f8; - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); - z-index: 3; - } + .pointer { + position: absolute; + width: 12px; + height: 12px; + border-radius: 6px; + transform: translate(-6px, -1px); + background-color: #f8f8f8; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); + z-index: 3; + } } .saturation-wrap { - position: relative; - width: 100%; - padding-bottom: 55%; - overflow: hidden; + position: relative; + width: 100%; + padding-bottom: 55%; + overflow: hidden; } diff --git a/solidui-web/src/components/ColorPicker/PointCircle.tsx b/solidui-web/src/components/ColorPicker/PointCircle.tsx index 7a872e6..aa64538 100644 --- a/solidui-web/src/components/ColorPicker/PointCircle.tsx +++ b/solidui-web/src/components/ColorPicker/PointCircle.tsx @@ -18,7 +18,7 @@ import * as React from "react"; function PointerCircle() { - return
; + return
; } export default PointerCircle; diff --git a/solidui-web/src/components/ColorPicker/Pointer.tsx b/solidui-web/src/components/ColorPicker/Pointer.tsx index 166f0b8..2efe65e 100644 --- a/solidui-web/src/components/ColorPicker/Pointer.tsx +++ b/solidui-web/src/components/ColorPicker/Pointer.tsx @@ -18,7 +18,7 @@ import * as React from "react"; function Pointer() { - return
; + return
; } export default Pointer; diff --git a/solidui-web/src/components/InputColor/InputColor.less b/solidui-web/src/components/InputColor/InputColor.less index 18c0cab..fe68829 100644 --- a/solidui-web/src/components/InputColor/InputColor.less +++ b/solidui-web/src/components/InputColor/InputColor.less @@ -16,27 +16,27 @@ */ .solid-color { - .swatch { - text-align: center; - font-weight: 700; - color: #fff; - text-shadow: rgba(0, 0, 0, 0.7) 0 1px 1px; + .swatch { + text-align: center; + font-weight: 700; + color: #fff; + text-shadow: rgba(0, 0, 0, 0.7) 0 1px 1px; padding: 3px 8px; - cursor: pointer; - outline: none; - } + cursor: pointer; + outline: none; + } - .cover { - position: fixed; - top: 0; - left: 0; - bottom: 0; - right: 0; - outline: none; - } + .cover { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + outline: none; + } - .popover { - position: fixed; - z-index: 9999; - } + .popover { + position: fixed; + z-index: 9999; + } } diff --git a/solidui-web/src/components/InputColor/InputColor.tsx b/solidui-web/src/components/InputColor/InputColor.tsx index c90f476..5ba9b6f 100644 --- a/solidui-web/src/components/InputColor/InputColor.tsx +++ b/solidui-web/src/components/InputColor/InputColor.tsx @@ -32,7 +32,7 @@ export interface InputColorProps { onChange?: (hex: string) => void; } -export default function ({ +export default function InputColor({ prefixCls = "solid", className, style, diff --git a/solidui-web/src/components/InputNumber/InputNumber.less b/solidui-web/src/components/InputNumber/InputNumber.less index 7408d25..75be1fe 100644 --- a/solidui-web/src/components/InputNumber/InputNumber.less +++ b/solidui-web/src/components/InputNumber/InputNumber.less @@ -15,15 +15,15 @@ * limitations under the License. */ - .solid-elem { - display: block; - user-select: none; +.solid-elem { + display: block; + user-select: none; } .solid-input-number { border: 1px solid rgba(0, 0, 0, 0.15); - input[type='number'] { + input[type="number"] { height: 20px; - } + } } diff --git a/solidui-web/src/components/InputText/InputText.less b/solidui-web/src/components/InputText/InputText.less index 6e71dcd..1d6697a 100644 --- a/solidui-web/src/components/InputText/InputText.less +++ b/solidui-web/src/components/InputText/InputText.less @@ -15,19 +15,19 @@ * limitations under the License. */ - .solid-elem { - display: block; - user-select: none; +.solid-elem { + display: block; + user-select: none; } .solid-input-text { border: 1px solid rgba(0, 0, 0, 0.15); background-color: #fff; - input[type='text']{ + input[type="text"] { height: 24px; padding: 0 4px; border: none; outline: none; - } + } } diff --git a/solidui-web/src/components/InputTextArea/InputTextArea.less b/solidui-web/src/components/InputTextArea/InputTextArea.less index 1e89b33..d60b88d 100644 --- a/solidui-web/src/components/InputTextArea/InputTextArea.less +++ b/solidui-web/src/components/InputTextArea/InputTextArea.less @@ -15,7 +15,7 @@ * limitations under the License. */ - .solid-textarea { +.solid-textarea { outline: none; border: 1px solid #000; } diff --git a/solidui-web/src/components/LeftRightExpander/LeftRightExpander.less b/solidui-web/src/components/LeftRightExpander/LeftRightExpander.less index 687b24f..dc48177 100644 --- a/solidui-web/src/components/LeftRightExpander/LeftRightExpander.less +++ b/solidui-web/src/components/LeftRightExpander/LeftRightExpander.less @@ -15,7 +15,7 @@ * limitations under the License. */ - @solid-expander-height: 32px; +@solid-expander-height: 32px; .solid-expander { position: relative; @@ -24,10 +24,10 @@ font-weight: 400; .solid-expander__node { - background-color: #FCFCFD; + background-color: #fcfcfd; padding: 0 5px; - border-top: 1px solid #E7E7E7; - border-bottom: 1px solid #E7E7E7; + border-top: 1px solid #e7e7e7; + border-bottom: 1px solid #e7e7e7; user-select: none; .left-node { @@ -72,7 +72,6 @@ word-break: break-all; } } - } .solid-expander__popupview { diff --git a/solidui-web/src/components/Radio/ButtonGroupRadio.less b/solidui-web/src/components/Radio/ButtonGroupRadio.less index 085e5d5..7b69ea8 100644 --- a/solidui-web/src/components/Radio/ButtonGroupRadio.less +++ b/solidui-web/src/components/Radio/ButtonGroupRadio.less @@ -15,49 +15,49 @@ * limitations under the License. */ - @import "@/assets/styles/variables.less"; +@import "@/assets/styles/variables.less"; .group-choose { - display: flex; - justify-content: space-around; - border: 1px solid #424858; - padding: 2px; - font-size: 12px; - width: 100%; + display: flex; + justify-content: space-around; + border: 1px solid #424858; + padding: 2px; + font-size: 12px; + width: 100%; border-color: @borderColor; - .group-choose-btn { - position: relative; - display: block; - flex: 1 1; - width: 33.3%; - height: 18px; - margin-right: 2px; + .group-choose-btn { + position: relative; + display: block; + flex: 1 1; + width: 33.3%; + height: 18px; + margin-right: 2px; background-color: @disableColor; - input[type=radio]:checked+.group-choose-text { - background-color: #3e7dff; - } - } + input[type="radio"]:checked + .group-choose-text { + background-color: #3e7dff; + } + } - .group-choose-text { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - color: #fff; - text-align: center; - line-height: 18px; + .group-choose-text { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + color: #fff; + text-align: center; + line-height: 18px; - user-select: none; + user-select: none; - &:hover { + &:hover { background-color: #a2c0fd; - } - } + } + } - input { - display: none; - } + input { + display: none; + } } diff --git a/solidui-web/src/components/Select/Select.less b/solidui-web/src/components/Select/Select.less index 7f8c2d8..39a0720 100644 --- a/solidui-web/src/components/Select/Select.less +++ b/solidui-web/src/components/Select/Select.less @@ -15,7 +15,7 @@ * limitations under the License. */ - .solid-select { +.solid-select { // height: 20px; border: 1px solid rgba(0, 0, 0, 0.15); width: 100%; @@ -31,15 +31,14 @@ // &:hover { // background-color: #3e7dff; - // color: #fff; + // color: #fff; // } &.rc-select-item-option-active { background-color: #3e7dff; - color: #fff; + color: #fff; } - .select-option__item { display: flex; align-items: center; diff --git a/solidui-web/src/components/Select/Select.tsx b/solidui-web/src/components/Select/Select.tsx index 330553b..00fa6d6 100644 --- a/solidui-web/src/components/Select/Select.tsx +++ b/solidui-web/src/components/Select/Select.tsx @@ -32,7 +32,7 @@ export default function SolidSelect(props: SelectProps) { function renderOptions() { const nodes: React.ReactNode[] = []; - items.forEach((item, index) => { + items.forEach((item) => { const { value: mValue, label } = item; nodes.push( > { - // public state: SolidEditorState; - constructor(props: SolidEditorProps) { super(props); this.clear = this.clear.bind(this); @@ -163,7 +157,7 @@ export default class SolidEditor extends React.PureComponent< public handleSelectPage = (event: OnSelectPageEventData) => { const pageId = event.id; const page = mm.getPage(pageId); - this.clear().then((removed) => { + this.clear().then(() => { const views = page?.views || []; views.forEach((view) => { const builder = this.factory.getBuilder(view.type); @@ -338,7 +332,7 @@ export default class SolidEditor extends React.PureComponent< return this.removeElements(this.getViewport().getElements(ids), isRestore); } - private appendComplete(infos: ElementInfo[], isRestore?: boolean) { + private appendComplete(infos: ElementInfo[]) { const targets1 = infos.map((info) => info.el!); this.setSelectedTargets(targets1, true); return targets1; @@ -387,10 +381,7 @@ export default class SolidEditor extends React.PureComponent< }); } - public setSelectedTargets( - targets: Array, - isRestore?: boolean, - ) { + public setSelectedTargets(targets: Array) { targets = targets.filter((target) => targets.every( (parnetTarget) => @@ -415,49 +406,35 @@ export default class SolidEditor extends React.PureComponent< public getSelectedTargets = () => this.state.selectedTargets; - private checkBlur() { - const { activeElement } = document; - if (activeElement) { - (activeElement as HTMLElement).blur(); - } - const selection = document.getSelection()!; + // private checkBlur() { + // const { activeElement } = document; + // if (activeElement) { + // (activeElement as HTMLElement).blur(); + // } + // const selection = document.getSelection()!; - if (selection) { - selection.removeAllRanges(); - } - // this.eventBus.trigger("blur"); - } + // if (selection) { + // selection.removeAllRanges(); + // } + // } - public removeElements( - targets: Array, - isRestore?: boolean, - ) { + public removeElements(targets: Array) { const viewport = this.getViewport(); - // const frameMap = this.removeFrames(targets); - const indexesList = viewport.getSortedIndexesList(targets); - const indexesListLength = indexesList.length; - let scopeId = ""; - let selectedInfo: ElementInfo | null = null; - - if (indexesListLength) { - const lastInfo = viewport.getInfoByIndexes( - indexesList[indexesListLength - 1], - ); - const nextInfo = viewport.getNextInfo(lastInfo.id!); - - scopeId = lastInfo.scopeId!; - selectedInfo = nextInfo; - } - return viewport.removeTargets(targets).then(({ removed }) => { - // let selectedTarget = - // selectedInfo || - // viewport.getLastChildInfo(scopeId)! || - // viewport.getInfo(scopeId); - - // this.setSelectedTargets( - // selectedTarget && selectedTarget.el ? [selectedTarget.el!] : [], - // true - // ); + // const indexesList = viewport.getSortedIndexesList(targets); + // const indexesListLength = indexesList.length; + // let scopeId = ""; + // let selectedInfo: ElementInfo | null = null; + + // if (indexesListLength) { + // const lastInfo = viewport.getInfoByIndexes( + // indexesList[indexesListLength - 1], + // ); + // const nextInfo = viewport.getNextInfo(lastInfo.id!); + + // scopeId = lastInfo.scopeId!; + // selectedInfo = nextInfo; + // } + return viewport.removeTargets(targets).then(() => { this.setSelectedTargets([]); return targets; }); @@ -522,7 +499,7 @@ export default class SolidEditor extends React.PureComponent<
{ + onClick={() => { infiniteViewer.current!.scrollCenter(); }} /> @@ -586,8 +563,8 @@ export default class SolidEditor extends React.PureComponent< verticalGuides.current!.scroll(e.scrollTop); verticalGuides.current!.scrollGuides(e.scrollLeft); }} - onDragStart={(e) => {}} - onDrag={(e) => {}} + // onDragStart={(e) => {}} + // onDrag={(e) => {}} usePinch onPinch={(e) => { eventbus.emit("onZoom", { zoom: e.zoom }); @@ -595,7 +572,7 @@ export default class SolidEditor extends React.PureComponent< zoom: e.zoom, }); }} - onPinchStart={(e) => {}} + // onPinchStart={(e) => {}} > { - // this.checkBlur(); - // e.stop(); - // if (e.inputEvent.target.nodeName === "BUTTON") { - // return false; - // } - // return true; - }} + // onDragStart={(e) => { + // this.checkBlur(); + // e.stop(); + // if (e.inputEvent.target.nodeName === "BUTTON") { + // return false; + // } + // return true; + // }} // onSelect={(e) => { // e.added.forEach((el) => { // el.classList.add("selected"); @@ -659,14 +636,14 @@ export default class SolidEditor extends React.PureComponent< // el.classList.remove("selected"); // }); // }} - onDrag={(e) => { - // e.stop(); - }} - onDragEnd={(e) => { - // e.stop(); - }} - onSelect={(e) => {}} - onSelectStart={(e) => {}} + // onDrag={(e) => { + // e.stop(); + // }} + // onDragEnd={(e) => { + // e.stop(); + // }} + // onSelect={(e) => {}} + // onSelectStart={(e) => {}} onSelectEnd={(e) => { const selected = e.selected || []; const { isDragStart } = e; @@ -682,12 +659,12 @@ export default class SolidEditor extends React.PureComponent< }); }} // onDrag={e => {}} - onScroll={(e) => { - // viewerRef.current?.scrollBy( - // e.direction[0] * 10, - // e.direction[1] * 10 - // ); - }} + // onScroll={(e) => { + // viewerRef.current?.scrollBy( + // e.direction[0] * 10, + // e.direction[1] * 10 + // ); + // }} />
); diff --git a/solidui-web/src/components/SolidEditor/SolidEditorContext.tsx b/solidui-web/src/components/SolidEditor/SolidEditorContext.tsx index 4b589e8..aa45dd8 100644 --- a/solidui-web/src/components/SolidEditor/SolidEditorContext.tsx +++ b/solidui-web/src/components/SolidEditor/SolidEditorContext.tsx @@ -25,7 +25,7 @@ function connectContext( context: React.Context, properties: readonly string[], ) { - return function (Component: any) { + return function connect(Component: any) { const { prototype } = Component; Component.contextType = context; diff --git a/solidui-web/src/components/SolidEditor/SolidViewport.tsx b/solidui-web/src/components/SolidEditor/SolidViewport.tsx index daf69ff..b84b9b7 100644 --- a/solidui-web/src/components/SolidEditor/SolidViewport.tsx +++ b/solidui-web/src/components/SolidEditor/SolidViewport.tsx @@ -18,7 +18,9 @@ import React from "react"; import { IObject, isString, isArray, isNumber } from "@daybrush/utils"; + import { eventbus } from "@/utils"; + import { isNil } from "lodash-es"; import { connectEditorContext } from "./SolidEditorContext"; import { @@ -30,6 +32,7 @@ import { EditorInterface, } from "./utils/types"; import { SOLIDUI_ELEMENT_ID } from "./utils/const"; + import { isVisualFunction, isVisualElement, diff --git a/solidui-web/src/components/SolidEditor/style/index.less b/solidui-web/src/components/SolidEditor/style/index.less index 8b508ca..d1a5090 100644 --- a/solidui-web/src/components/SolidEditor/style/index.less +++ b/solidui-web/src/components/SolidEditor/style/index.less @@ -15,20 +15,20 @@ * limitations under the License. */ - @import "@/assets/styles/variables.less"; +@import "@/assets/styles/variables.less"; @editorPrefix: visual; [class*="visual-"] { - font-family: "Open Sans", sans-serif; + font-family: "Open Sans", sans-serif; } .@{editorPrefix}-editor { - position: relative; - width: 100%; - height: 100%; - font-family: sans-serif; - transform-style: preserve-3d; + position: relative; + width: 100%; + height: 100%; + font-family: sans-serif; + transform-style: preserve-3d; .editor-guides { position: absolute !important; @@ -41,7 +41,7 @@ left: calc(@rulerGuidesSize); width: calc(100% - @rulerGuidesSize); height: @rulerGuidesSize !important; - border-bottom: 1px solid #D2D1D1; + border-bottom: 1px solid #d2d1d1; } .editor-guides.guides-vertical { @@ -49,7 +49,7 @@ left: 0; height: calc(100% - @rulerGuidesSize); width: @rulerGuidesSize !important; - border-right: 1px solid #D2D1D1; + border-right: 1px solid #d2d1d1; } .editor-guides-reset { @@ -57,7 +57,7 @@ // background: @back3Color; // background: #7f7f7f; // background: #6B6B6C; - background: #EAECEE; + background: #eaecee; width: @rulerGuidesSize; height: @rulerGuidesSize; z-index: 1; @@ -65,8 +65,8 @@ // border-bottom: 1px solid @back4Color; // border-right: 1px solid #6B6B6C; // border-bottom: 1px solid #6B6B6C; - border-bottom: 1px solid #D2D1D1; - border-right: 1px solid #D2D1D1; + border-bottom: 1px solid #d2d1d1; + border-right: 1px solid #d2d1d1; box-sizing: border-box; cursor: pointer; left: 0; @@ -81,7 +81,7 @@ height: calc(100% - @rulerGuidesSize); // background: rgb(13, 14, 14); // background: @infiniteViewBgColor; - background: #E6E5E6; + background: #e6e5e6; .editor-viewport-container { position: relative; @@ -109,14 +109,14 @@ } .solid-view-dimension { - position: absolute; - background: @mainColor; - border-radius: 2px; - padding: 1px 3px; - color: white; - font-size: 13px; - white-space: nowrap; - font-weight: bold; - will-change: transform; - transform: translate(-50%) translateZ(0px); + position: absolute; + background: @mainColor; + border-radius: 2px; + padding: 1px 3px; + color: white; + font-size: 13px; + white-space: nowrap; + font-weight: bold; + will-change: transform; + transform: translate(-50%) translateZ(0px); } diff --git a/solidui-web/src/components/SolidEditor/utils/MoveableManager.tsx b/solidui-web/src/components/SolidEditor/utils/MoveableManager.tsx index 0f6bc80..2e05b01 100644 --- a/solidui-web/src/components/SolidEditor/utils/MoveableManager.tsx +++ b/solidui-web/src/components/SolidEditor/utils/MoveableManager.tsx @@ -106,7 +106,7 @@ class MoveableManager extends React.PureComponent<{ }} isDisplaySnapDigit isDisplayInnerSnapDigit - snapDistFormat={(v, type) => `${v}px`} + snapDistFormat={(v) => `${v}px`} // Roundable roundable={false} // roundable={selectedTargets.length > 1 ? false : true} @@ -295,7 +295,7 @@ class MoveableManager extends React.PureComponent<{ e.datas.isRender = true; // this.eventBus.requestTrigger("render"); }} - onRenderEnd={(e) => { + onRenderEnd={() => { // this.eventBus.requestTrigger("render"); // if (!e.datas.isRender) { // return; @@ -311,11 +311,11 @@ class MoveableManager extends React.PureComponent<{ moveableData.getFrame(target).get(), ); }} - onRenderGroup={(e) => { + onRenderGroup={() => { // this.eventBus.requestTrigger("renderGroup", e); // e.datas.isRender = true; }} - onRenderGroupEnd={(e) => { + onRenderGroupEnd={() => { // this.eventBus.requestTrigger("renderGroup", e); // if (!e.datas.isRender) { // return; diff --git a/solidui-web/src/components/SolidEditor/utils/SolidEditorManager.tsx b/solidui-web/src/components/SolidEditor/utils/SolidEditorManager.tsx index 41ba07e..69e5a20 100644 --- a/solidui-web/src/components/SolidEditor/utils/SolidEditorManager.tsx +++ b/solidui-web/src/components/SolidEditor/utils/SolidEditorManager.tsx @@ -21,7 +21,6 @@ import { message } from "antd"; import { eventbus, mm } from "@/utils/index"; import { OnDrawEventData, - OnModelLoadEventData, OnSelectPageEventData, OnSelectViewEventData, } from "@/types/eventbus"; @@ -57,7 +56,7 @@ export default class SolidEditorManager { * 定制方法 this.editor | this.viewport (.updateView(....)) * @param event event {} */ - private handleUpdateViewPropertyValue(event: any) {} + // private handleUpdateViewPropertyValue(event: any) {} private handleOnDraw(event: OnDrawEventData) { if (!mm.getCurrentPage()) { @@ -95,7 +94,7 @@ export default class SolidEditorManager { private handleSelectPage(event: OnSelectPageEventData) { const pageId = event.id; const page = mm.getPage(pageId); - this.editor.clear().then((removed) => { + this.editor.clear().then(() => { const views = page?.views || []; views.forEach((view) => { const builder = this.factory.getBuilder(view.type); @@ -144,7 +143,7 @@ export default class SolidEditorManager { }); } - private handleModelLoad(event: OnModelLoadEventData) {} + private handleModelLoad() {} private handleSelectViewinViewList(event: OnSelectViewEventData) { const view = mm.getView(event.id); diff --git a/solidui-web/src/components/SolidEditor/utils/index.ts b/solidui-web/src/components/SolidEditor/utils/index.ts index db68fcb..5adc538 100644 --- a/solidui-web/src/components/SolidEditor/utils/index.ts +++ b/solidui-web/src/components/SolidEditor/utils/index.ts @@ -199,7 +199,10 @@ export function getOffsetOriginMatrix( return matrix3d(stack.offsetMatrix as any, translation); } -export function getScenaAttrs(el: HTMLElement | SVGElement) { +export function getScenaAttrs(el?: HTMLElement | SVGElement) { + if (!el) { + return {}; + } const { attributes } = el; const { length } = attributes; const attrs: IObject = {}; diff --git a/solidui-web/src/components/Switch/Switch.less b/solidui-web/src/components/Switch/Switch.less index 196113c..37fde0c 100644 --- a/solidui-web/src/components/Switch/Switch.less +++ b/solidui-web/src/components/Switch/Switch.less @@ -15,154 +15,155 @@ * limitations under the License. */ - .lingc-switch { - display: flex; - align-items: center; - - .switch-close { - transform: scale(1); - margin-right: 1px; - position: relative; - display: inline-block; - line-height: 0; - width: 20px; - height: 20px; - font-size: 26px; - color: #858e9e; - cursor: pointer; - - .span-close-area { - display: inline-flex; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - justify-content: center; - align-items: center; - - &:after { - position: absolute; - content: ""; - top: 0; - left: 0; - bottom: 0; - right: 0; - opacity: 0; - height: 100%; - z-index: 1; - } - } - } - - .switch-box { - position: relative; - - .switch-span { - position: relative; - display: block; - // height: 8px; - // width: 16px; +.lingc-switch { + display: flex; + align-items: center; + + .switch-close { + transform: scale(1); + margin-right: 1px; + position: relative; + display: inline-block; + line-height: 0; + width: 20px; + height: 20px; + font-size: 26px; + color: #858e9e; + cursor: pointer; + + .span-close-area { + display: inline-flex; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + justify-content: center; + align-items: center; + + &:after { + position: absolute; + content: ""; + top: 0; + left: 0; + bottom: 0; + right: 0; + opacity: 0; + height: 100%; + z-index: 1; + } + } + } + + .switch-box { + position: relative; + + .switch-span { + position: relative; + display: block; + // height: 8px; + // width: 16px; width: 22px; height: 10px; - float: right; - background-color: #3f4349; - border-radius: 8px; - // transform: translateX(-2px); - cursor: pointer; - - transform: scale(1); - margin-right: 1px; - - &::before { - display: block; - content: ""; - width: 0; - height: 100%; - background: #689df7; - border-radius: 8px; + float: right; + background-color: #3f4349; + border-radius: 8px; + // transform: translateX(-2px); + cursor: pointer; + + transform: scale(1); + margin-right: 1px; + + &::before { + display: block; + content: ""; + width: 0; + height: 100%; + background: #689df7; + border-radius: 8px; // border-radius: 4px; - } - - &::after { - position: absolute; - display: block; - content: ""; - // top: -1px; - // left: -2px; - // width: 10px; - // height: 10px; + } + + &::after { + position: absolute; + display: block; + content: ""; + // top: -1px; + // left: -2px; + // width: 10px; + // height: 10px; top: -2px; - left: -2px; - width: 14px; - height: 14px; - background: #858e9e; - border-radius: 50%; - z-index: 1; - } - - &.on { - &::before { - width: 100%; - animation: switch_on_width_animate .3s linear backwards; - } - - &::after { - background: #e1ebff; - transform: translateX(100%); - animation: switch_on_background_animate .3s linear backwards; - } - } - - &.off { - &::before { - width: 4px; - animation: switch_off_width_animate .3s linear backwards; - } - - &::after { - background: #858e9e; - animation: switch_off_background_animate .3s linear backwards; - } - } - } - } - + left: -2px; + width: 14px; + height: 14px; + background: #858e9e; + border-radius: 50%; + z-index: 1; + } + + &.on { + &::before { + width: 100%; + animation: switch_on_width_animate 0.3s linear backwards; + } + + &::after { + background: #e1ebff; + transform: translateX(100%); + animation: switch_on_background_animate 0.3s linear backwards; + } + } + + &.off { + &::before { + width: 4px; + animation: switch_off_width_animate 0.3s linear backwards; + } + + &::after { + background: #858e9e; + animation: switch_off_background_animate 0.3s linear backwards; + } + } + } + } } - -@keyframes switch_on_width_animate -{ - 0% { - width:0 - } to { - width:100% - } +@keyframes switch_on_width_animate { + 0% { + width: 0; + } + to { + width: 100%; + } } @keyframes switch_off_width_animate { - 0% { - width:100% - } to { - width:0 - } + 0% { + width: 100%; + } + to { + width: 0; + } } -@keyframes switch_on_background_animate{ - 0% { - transform:translateX(0); - background:#858e9e - } to { - transform:translateX(100%); - background:#e1ebff - } +@keyframes switch_on_background_animate { + 0% { + transform: translateX(0); + background: #858e9e; + } + to { + transform: translateX(100%); + background: #e1ebff; + } } -@keyframes switch_off_background_animate{ - 0% { - transform:translateX(100%); - background:#e1ebff - } to { - transform:translateX(0); - background:#858e9e - } +@keyframes switch_off_background_animate { + 0% { + transform: translateX(100%); + background: #e1ebff; + } + to { + transform: translateX(0); + background: #858e9e; + } } diff --git a/solidui-web/src/layouts/DefaultLayout.less b/solidui-web/src/layouts/DefaultLayout.less index 19bc4c8..9bfc44a 100644 --- a/solidui-web/src/layouts/DefaultLayout.less +++ b/solidui-web/src/layouts/DefaultLayout.less @@ -14,8 +14,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - @import "@/assets/styles/variables.less"; - @asideWidth: 160px; +@import "@/assets/styles/variables.less"; +@asideWidth: 160px; .solidui-layout { position: absolute; @@ -75,7 +75,6 @@ } } - .header-main { position: absolute; top: 0; @@ -98,7 +97,7 @@ height: 28px; margin-left: 20px; margin-bottom: 3px; - background: url('@/assets/images/logo.png') 50% no-repeat; + background: url("@/assets/images/logo.png") 50% no-repeat; background-size: contain; font-size: 20px; font-weight: 600; @@ -119,7 +118,7 @@ .version { display: inline-block; - background: linear-gradient(49deg,#2966cd,#33dbff); + background: linear-gradient(49deg, #2966cd, #33dbff); width: 58px; height: 20px; box-shadow: 0 0 4px 0 rgb(0 0 0 / 9%); @@ -141,7 +140,6 @@ } .header-center { - } .header-right { @@ -153,5 +151,4 @@ display: flex; align-items: center; } - } diff --git a/solidui-web/src/layouts/DefaultLayout.tsx b/solidui-web/src/layouts/DefaultLayout.tsx index afa488f..588eb3c 100644 --- a/solidui-web/src/layouts/DefaultLayout.tsx +++ b/solidui-web/src/layouts/DefaultLayout.tsx @@ -50,12 +50,10 @@ const items: MenuItem[] = [ export default function DefaultLayout() { const navigate = useNavigate(); const location = useLocation(); - const [value, updateCookie, deleteCookie] = useCookie( - "solidui_user_session_ticket_id_v1", - ); + const [value, deleteCookie] = useCookie("solidui_user_session_ticket_id_v1"); const [selectKeys, setSelectKeys] = useState(["home"]); - const [collapse, setCollapse] = useState(false); + // const [collapse, setCollapse] = useState(false); useEffect(() => { if (value === null || undefined === value || value === "") { @@ -65,7 +63,7 @@ export default function DefaultLayout() { const { pathname } = location; setSelectKeys([pathname]); // return () => {}; - }, []); + }, [location, navigate, value]); async function handleMenuClick(item: any) { const { key } = item; @@ -147,7 +145,7 @@ export default function DefaultLayout() { style={{ height: "100%", }} - inlineCollapsed={collapse} + inlineCollapsed={false} items={items} onClick={handleMenuClick} /> diff --git a/solidui-web/src/pages/DataSource/DataSourceList.less b/solidui-web/src/pages/DataSource/DataSourceList.less index 1de4a9b..32f5b2c 100644 --- a/solidui-web/src/pages/DataSource/DataSourceList.less +++ b/solidui-web/src/pages/DataSource/DataSourceList.less @@ -15,7 +15,7 @@ * limitations under the License. */ - .solidui-datasources { +.solidui-datasources { position: absolute; top: 0; left: 0; @@ -67,8 +67,6 @@ } } } - - } } } diff --git a/solidui-web/src/pages/DataSource/DataSourceList.tsx b/solidui-web/src/pages/DataSource/DataSourceList.tsx index 3141764..cd20d1d 100644 --- a/solidui-web/src/pages/DataSource/DataSourceList.tsx +++ b/solidui-web/src/pages/DataSource/DataSourceList.tsx @@ -25,7 +25,7 @@ import "./DataSourceList.less"; const { Search } = Input; -export default function () { +export default function DataSourceList() { const { loading, columns, diff --git a/solidui-web/src/pages/DataSource/_components/DataSource.less b/solidui-web/src/pages/DataSource/_components/DataSource.less index fd07bd5..e3e9a7d 100644 --- a/solidui-web/src/pages/DataSource/_components/DataSource.less +++ b/solidui-web/src/pages/DataSource/_components/DataSource.less @@ -32,7 +32,7 @@ left: 0; bottom: 0; width: @dsLeftWidth; - border-right: 1px solid #D2D1D1; + border-right: 1px solid #d2d1d1; } > .right { diff --git a/solidui-web/src/pages/DataSource/_components/DataSourceEdit.tsx b/solidui-web/src/pages/DataSource/_components/DataSourceEdit.tsx index b6c02ee..ebd11e8 100644 --- a/solidui-web/src/pages/DataSource/_components/DataSourceEdit.tsx +++ b/solidui-web/src/pages/DataSource/_components/DataSourceEdit.tsx @@ -17,6 +17,7 @@ import React, { useEffect, useState } from "react"; import { Form, Input, Button, message } from "antd"; +import { useMemoizedFn } from "ahooks"; import { Close } from "@icon-park/react"; import { map } from "lodash-es"; import { @@ -42,13 +43,7 @@ export default function DataSourceEdit(props: DataSourceEditProps) { const [dataSourceTypeId, setDataSourceTypeId] = useState(); const { item, handleClose } = props; - useEffect(() => () => {}, []); - - useEffect(() => { - load(item.id); - }, [item]); - - async function load(id: string) { + const handleLoad = useMemoizedFn(async (id: string) => { const res: ApiResult = await Apis.datasource.get(id); if (res.ok) { const { data } = res; @@ -91,7 +86,11 @@ export default function DataSourceEdit(props: DataSourceEditProps) { }); } } - } + }); + + useEffect(() => { + handleLoad(item.id); + }, [item, handleLoad]); function renderDataSourceCreationForm() { return ( diff --git a/solidui-web/src/pages/DataSource/_components/DataSourceView.tsx b/solidui-web/src/pages/DataSource/_components/DataSourceView.tsx index fa6c573..676f321 100644 --- a/solidui-web/src/pages/DataSource/_components/DataSourceView.tsx +++ b/solidui-web/src/pages/DataSource/_components/DataSourceView.tsx @@ -17,6 +17,7 @@ import React, { useEffect, useState } from "react"; import { Form, Input, Button } from "antd"; +import { useMemoizedFn } from "ahooks"; import { Close } from "@icon-park/react"; import { map } from "lodash-es"; import { @@ -35,22 +36,14 @@ export interface DataSourceViewProps { handleClose: () => void; } -export default function (props: DataSourceViewProps) { +export default function DataSourceView(props: DataSourceViewProps) { const [form] = Form.useForm(); const [dsFormElements, setDsFormElements] = useState< DataSourceFormElementDataType[] >([]); const { item, handleClose } = props; - useEffect(() => () => {}, []); - - useEffect(() => { - if (item) { - load(`${item.id}`); - } - }, [item]); - - async function load(id: string) { + const handleLoad = useMemoizedFn(async (id: string) => { const res: ApiResult = await Apis.datasource.get(id); if (res.ok) { const { data } = res; @@ -63,15 +56,7 @@ export default function (props: DataSourceViewProps) { if (res2.ok) { const data2 = res2.data || []; setDsFormElements(data2); - // let params = data.connectParams.params || {}; - // let paramsStr = map(params, (value, key) => `${key}=${value}`).join( - // ",", - // ); - const params = JSON.parse(data.parameter || "{}"); - // let params = data.connectParams.params || {}; - // let params = data.p - // const connectParams = params.params; const paramsStr = map( params.params || {}, (value, key) => `${key}=${value}`, @@ -83,12 +68,6 @@ export default function (props: DataSourceViewProps) { description: data.dataSourceDesc, dataSourceTypeId: id, params: paramsStr, - // host: data.connectParams.host, - // port: data.connectParams.port, - // driverClassName: data.connectParams.driver, - // username: data.connectParams.username, - // password: data.connectParams.password, - // databaseName: data.connectParams.database || "", host: params.host, port: params.port, driverClassName: params.driver, @@ -98,7 +77,13 @@ export default function (props: DataSourceViewProps) { }); } } - } + }); + + useEffect(() => { + if (item) { + handleLoad(`${item.id}`); + } + }, [item, handleLoad]); function renderDataSourceCreationForm() { return ( diff --git a/solidui-web/src/pages/DataSource/useDataSource.tsx b/solidui-web/src/pages/DataSource/useDataSource.tsx index 6203fd9..bc59389 100644 --- a/solidui-web/src/pages/DataSource/useDataSource.tsx +++ b/solidui-web/src/pages/DataSource/useDataSource.tsx @@ -91,7 +91,8 @@ function useDataSource() { title: "operation", dataIndex: "operation", align: "center", - render(value, record, index) { + // eslint-disable-next-line + render(value, record) { return (
{ confirm({ title: "Are you sure delete this item?", - icon: , + icon: , content: `${record.dataSourceName}`, okText: "Yes", okType: "danger", diff --git a/solidui-web/src/pages/Designer/Aside/aside.less b/solidui-web/src/pages/Designer/Aside/aside.less index ea24c44..426e6d9 100644 --- a/solidui-web/src/pages/Designer/Aside/aside.less +++ b/solidui-web/src/pages/Designer/Aside/aside.less @@ -18,20 +18,20 @@ @import "@/assets/styles/variables.less"; .aside { - position: absolute; - top: @headerHeight; - left: 0; - bottom: 0; - width: @asideWidth; - z-index: 13; + position: absolute; + top: @headerHeight; + left: 0; + bottom: 0; + width: @asideWidth; + z-index: 13; - .aside-main { - position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; - background-color: #EAECEE; - border-right: 1px solid #D2D1D1; + .aside-main { + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background-color: #eaecee; + border-right: 1px solid #d2d1d1; } } diff --git a/solidui-web/src/pages/Designer/Designer.tsx b/solidui-web/src/pages/Designer/Designer.tsx index 1d8f433..b507d1c 100644 --- a/solidui-web/src/pages/Designer/Designer.tsx +++ b/solidui-web/src/pages/Designer/Designer.tsx @@ -17,6 +17,7 @@ import React from "react"; import { useParams } from "react-router-dom"; +import { useMemoizedFn } from "ahooks"; import { eventbus, mm } from "@/utils"; import Apis from "@/apis"; import { ProjectDataType } from "@/apis/types/resp"; @@ -31,11 +32,7 @@ function Dashboard() { const params = useParams(); const { id } = params; - React.useEffect(() => { - load(); - }, []); - - async function load() { + const handleLoad = useMemoizedFn(async () => { const res: ApiResult = await Apis.model.queryPages( id || "", ); @@ -85,7 +82,11 @@ function Dashboard() { eventbus.emit("onModelLoad", { model }); } } - } + }); + + React.useEffect(() => { + handleLoad(); + }, [handleLoad]); return (
diff --git a/solidui-web/src/pages/Designer/General/general.less b/solidui-web/src/pages/Designer/General/general.less index f92320c..0818040 100644 --- a/solidui-web/src/pages/Designer/General/general.less +++ b/solidui-web/src/pages/Designer/General/general.less @@ -25,37 +25,35 @@ height: 366px; user-select: none; - .heading { - position: relative; - height: 38px; - background-color: #FCFCFD; - border-bottom: 1px solid #E7E7E7; + .heading { + position: relative; + height: 38px; + background-color: #fcfcfd; + border-bottom: 1px solid #e7e7e7; // background-color: @backgroundColor; color: @primaryTextColor; - text-align: center; - display: flex; - align-items: center; + text-align: center; + display: flex; + align-items: center; .btn__scene-create { color: @primaryTextColor; margin-right: 6px; } - } + } - .columns { - position: relative; - height: 328px; - } + .columns { + position: relative; + height: 328px; + } } - .ant-tree.scena-tree { .ant-tree-treenode { // display: block; width: 100%; cursor: pointer; - &.ant-tree-treenode-selected { background-color: #e0e0e0; } @@ -70,7 +68,6 @@ } } - .expander { .expander__head { display: flex; @@ -79,7 +76,7 @@ height: 32px; padding-left: 12px; padding-right: 12px; - border-bottom: 1px solid #E7E7E7; + border-bottom: 1px solid #e7e7e7; border-top-color: rgb(36, 36, 36); border-right-color: rgb(36, 36, 36); border-left-color: rgb(36, 36, 36); @@ -110,10 +107,10 @@ } > .expander__body { - border-bottom: 1px solid #E7E7E7; - border-top-color: #E7E7E7; - border-right-color: #E7E7E7; - border-left-color: #E7E7E7; + border-bottom: 1px solid #e7e7e7; + border-top-color: #e7e7e7; + border-right-color: #e7e7e7; + border-left-color: #e7e7e7; display: none; // padding-top: 16px; // padding-bottom: 32px; diff --git a/solidui-web/src/pages/Designer/Header/Header.tsx b/solidui-web/src/pages/Designer/Header/Header.tsx index 8c3e7f9..6111e1a 100644 --- a/solidui-web/src/pages/Designer/Header/Header.tsx +++ b/solidui-web/src/pages/Designer/Header/Header.tsx @@ -93,7 +93,7 @@ function Header() { if (projectName !== null) { setTitle(projectName); } - }, []); + }, [searchParams]); return (
diff --git a/solidui-web/src/pages/Designer/Header/header.less b/solidui-web/src/pages/Designer/Header/header.less index e3f6777..8702cf0 100644 --- a/solidui-web/src/pages/Designer/Header/header.less +++ b/solidui-web/src/pages/Designer/Header/header.less @@ -15,42 +15,42 @@ * limitations under the License. */ - @import "@/assets/styles/variables.less"; +@import "@/assets/styles/variables.less"; .header { - position: absolute; - top: 0; - left: 0; - right: 0; - height: @headerHeight; - z-index: 10; + position: absolute; + top: 0; + left: 0; + right: 0; + height: @headerHeight; + z-index: 10; background-color: @bgColor; - border-bottom: 1px solid #D2D1D1; + border-bottom: 1px solid #d2d1d1; - .header-main { - position: absolute; - top: 0; - left: 0; - bottom: 0; + .header-main { + position: absolute; + top: 0; + left: 0; + bottom: 0; right: 0; min-width: 1244px; - user-select: none; + user-select: none; background: @bgColor; border-bottom: 1px solid @bgColor; - .header-left { - position: relative; - display: flex; - align-items: center; - height: 100%; + .header-left { + position: relative; + display: flex; + align-items: center; + height: 100%; - .logo { - width: 29px; - height: 28px; - margin-left: 20px; + .logo { + width: 29px; + height: 28px; + margin-left: 20px; margin-bottom: 3px; - background: url('@/assets/images/logo.png') 50% no-repeat; - background-size: contain; + background: url("@/assets/images/logo.png") 50% no-repeat; + background-size: contain; font-size: 20px; font-weight: 600; color: #fff; @@ -58,7 +58,7 @@ justify-content: center; align-items: center; cursor: pointer; - } + } .logo-text { display: flex; @@ -70,30 +70,30 @@ cursor: pointer; } - .version { - display: inline-block; - background: linear-gradient(49deg,#2966cd,#33dbff); - width: 58px; - height: 20px; - box-shadow: 0 0 4px 0 rgb(0 0 0 / 9%); - border-radius: 12px 12px 12px 0; - margin-left: 12px; - font-size: 12px; - color: #fff; - text-align: center; - line-height: 20px; - cursor: pointer; - } + .version { + display: inline-block; + background: linear-gradient(49deg, #2966cd, #33dbff); + width: 58px; + height: 20px; + box-shadow: 0 0 4px 0 rgb(0 0 0 / 9%); + border-radius: 12px 12px 12px 0; + margin-left: 12px; + font-size: 12px; + color: #fff; + text-align: center; + line-height: 20px; + cursor: pointer; + } - .split-line { - margin-left: 16px; - width: 1px; - height: 30px; + .split-line { + margin-left: 16px; + width: 1px; + height: 30px; background-color: @dividersColor; - } - } + } + } - .header-center { + .header-center { position: absolute; top: 0; bottom: 0; @@ -101,9 +101,9 @@ width: 500px; display: flex; align-items: center; - } + } - .header-right { + .header-right { position: absolute; right: 20px; top: 0; @@ -113,7 +113,6 @@ max-width: 200px; display: flex; align-items: center; - } - - } + } + } } diff --git a/solidui-web/src/pages/Designer/Outline/Outline.tsx b/solidui-web/src/pages/Designer/Outline/Outline.tsx index 0d45bda..5cd2e2a 100644 --- a/solidui-web/src/pages/Designer/Outline/Outline.tsx +++ b/solidui-web/src/pages/Designer/Outline/Outline.tsx @@ -16,7 +16,6 @@ */ import React from "react"; -import { Tooltip } from "antd"; import { isNil } from "lodash-es"; import { mm } from "@/utils"; import { SolidViewDataType } from "@/types"; diff --git a/solidui-web/src/pages/Designer/Outline/outline.less b/solidui-web/src/pages/Designer/Outline/outline.less index 5982ea2..3723ae5 100644 --- a/solidui-web/src/pages/Designer/Outline/outline.less +++ b/solidui-web/src/pages/Designer/Outline/outline.less @@ -15,7 +15,7 @@ * limitations under the License. */ - @import "@/assets/styles/variables.less"; +@import "@/assets/styles/variables.less"; .aside-outline { position: absolute; @@ -24,18 +24,18 @@ bottom: 0; right: 0; - .heading { - position: relative; - height: 38px; - // background-color: #35373d; + .heading { + position: relative; + height: 38px; + // background-color: #35373d; // background-color: @backgroundColor; - background-color: #FCFCFD; - border-top: 1px solid #E7E7E7; - border-bottom: 1px solid #E7E7E7; + background-color: #fcfcfd; + border-top: 1px solid #e7e7e7; + border-bottom: 1px solid #e7e7e7; color: @primaryTextColor; - text-align: center; - display: flex; - align-items: center; + text-align: center; + display: flex; + align-items: center; span { position: relative; @@ -44,89 +44,89 @@ font-size: 14px; width: 100%; } - } - - .components { - position: absolute; - top: 38px; - left: 0; - right: 0; - bottom: 0; + } + + .components { + position: absolute; + top: 38px; + left: 0; + right: 0; + bottom: 0; background-color: #fff; ul.charts { - list-style: none; - list-style-type: none; - margin: 0; - padding: 0; - - li.chartview { - position: relative; - width: 100%; - height: 32px; - display: flex; - align-items: center; - - &:hover { - cursor: pointer; - // background: rgba(21,21,23,.4); + list-style: none; + list-style-type: none; + margin: 0; + padding: 0; + + li.chartview { + position: relative; + width: 100%; + height: 32px; + display: flex; + align-items: center; + + &:hover { + cursor: pointer; + // background: rgba(21,21,23,.4); // background-color: #e0e0e0; background-color: @hoverBgColor; - } + } - &.selected { - // background: #00a5cf; - // color: #fff; + &.selected { + // background: #00a5cf; + // color: #fff; background-color: #e2f5ff; // background-color: #e0e0e0; color: @primaryTextColor; - } - - > .eblock { - position: absolute; - left: 5px; - width: 16px; - height: 16px; - z-index: 2; - background: transparent; - display: inline-block; - } - - > .bi-font { - position: absolute; - left: 26px; - font-size: 12px; - margin-bottom: 1px; - } - - > .text { - width: calc((100% - 46px) - 12px); - margin-left: 46px; - } - - > .act { - position: absolute; - right: 12px; - cursor: pointer; - - > i.bi-font { - color: #757272; - - &.bi-eye { - font-size: 13px; - } - - &.bi-lock { - font-size: 12px; - } - } - - &.act-lock { - font-size: 12px; - right: 32px; - } - } - } - } - } + } + + > .eblock { + position: absolute; + left: 5px; + width: 16px; + height: 16px; + z-index: 2; + background: transparent; + display: inline-block; + } + + > .bi-font { + position: absolute; + left: 26px; + font-size: 12px; + margin-bottom: 1px; + } + + > .text { + width: calc((100% - 46px) - 12px); + margin-left: 46px; + } + + > .act { + position: absolute; + right: 12px; + cursor: pointer; + + > i.bi-font { + color: #757272; + + &.bi-eye { + font-size: 13px; + } + + &.bi-lock { + font-size: 12px; + } + } + + &.act-lock { + font-size: 12px; + right: 32px; + } + } + } + } + } } diff --git a/solidui-web/src/pages/Designer/Outline/useOutline.ts b/solidui-web/src/pages/Designer/Outline/useOutline.ts index 6272776..001fc35 100644 --- a/solidui-web/src/pages/Designer/Outline/useOutline.ts +++ b/solidui-web/src/pages/Designer/Outline/useOutline.ts @@ -17,15 +17,12 @@ import React, { useEffect, useState } from "react"; import { useUpdate } from "react-use"; +import { useMemoizedFn } from "ahooks"; import { eventbus, mm } from "@/utils"; import { - OnSelectPageEventData, - OnModelLoadEventData, OnSelectViewEventData, - // OnDrawEventData, OnDrawCompleteEventData, OnRemoveViewCompleteEventData, - OnUpdateViewPropertyValueEventData, } from "@/types"; type ViewStateDataType = { @@ -38,42 +35,50 @@ function useOutline() { const viewStatesMap = React.useRef>(new Map()); - function __handleSelectPage(evt: OnSelectPageEventData) { + // function handleSelectPage() { + // viewStatesMap.current.forEach((viewState) => { + // viewState.selected = false; + // }); + // forceUpdate(); + // } + + const handleSelectPage = useMemoizedFn(() => { viewStatesMap.current.forEach((viewState) => { viewState.selected = false; }); forceUpdate(); - } + }); - function __handleModelLoad(evt: OnModelLoadEventData) { - const { model } = evt; + const handleModelLoad = useMemoizedFn(() => { forceUpdate(); - } + }); - function __handleSelectViewInViewport(evt: OnSelectViewEventData) { - selectViewById(evt.id); - } + const handleSelectViewInViewport = useMemoizedFn( + (evt: OnSelectViewEventData) => { + selectViewById(evt.id); + }, + ); - function __handleDrawComplete(evt: OnDrawCompleteEventData) { + const handleDrawComplete = useMemoizedFn((evt: OnDrawCompleteEventData) => { selectViewById(evt.id); - } - - function __handleRemoveViewComplete(evt: OnRemoveViewCompleteEventData) { - setLoading(true); - if (evt.source !== "viewlist") { - viewStatesMap.current.forEach((viewState) => { - viewState.selected = false; - }); - forceUpdate(); - } - setLoading(false); - } - - function __handleUpdateViewPropertyValue( - evt: OnUpdateViewPropertyValueEventData, - ) { + }); + + const handleRemoveViewComplete = useMemoizedFn( + (evt: OnRemoveViewCompleteEventData) => { + setLoading(true); + if (evt.source !== "viewlist") { + viewStatesMap.current.forEach((viewState) => { + viewState.selected = false; + }); + forceUpdate(); + } + setLoading(false); + }, + ); + + const handleUpdateViewPropertyValue = useMemoizedFn(() => { forceUpdate(); - } + }); function selectViewById(id: string) { const view = mm.getView(id); @@ -87,21 +92,28 @@ function useOutline() { } useEffect(() => { - eventbus.on("onModelLoad", __handleModelLoad); - eventbus.on("onSelectPage", __handleSelectPage); - eventbus.on("onSelectViewInViewport", __handleSelectViewInViewport); - eventbus.on("onDrawComplete", __handleDrawComplete); - eventbus.on("onRemoveViewComplete", __handleRemoveViewComplete); - eventbus.on("onUpdateViewPropertyValue", __handleUpdateViewPropertyValue); + eventbus.on("onModelLoad", handleModelLoad); + eventbus.on("onSelectPage", handleSelectPage); + eventbus.on("onSelectViewInViewport", handleSelectViewInViewport); + eventbus.on("onDrawComplete", handleDrawComplete); + eventbus.on("onRemoveViewComplete", handleRemoveViewComplete); + eventbus.on("onUpdateViewPropertyValue", handleUpdateViewPropertyValue); return () => { - eventbus.off("onModelLoad", __handleModelLoad); - eventbus.off("onSelectPage", __handleSelectPage); - eventbus.off("onSelectViewInViewport", __handleSelectViewInViewport); - eventbus.off("onDrawComplete", __handleDrawComplete); - eventbus.off("onRemoveViewComplete", __handleRemoveViewComplete); + eventbus.off("onModelLoad", handleModelLoad); + eventbus.off("onSelectPage", handleSelectPage); + eventbus.off("onSelectViewInViewport", handleSelectViewInViewport); + eventbus.off("onDrawComplete", handleDrawComplete); + eventbus.off("onRemoveViewComplete", handleRemoveViewComplete); }; - }, []); + }, [ + handleModelLoad, + handleSelectPage, + handleSelectViewInViewport, + handleDrawComplete, + handleRemoveViewComplete, + handleUpdateViewPropertyValue, + ]); function selectView(id: string): void { viewStatesMap.current.forEach((viewState) => { diff --git a/solidui-web/src/pages/Designer/Preview/PreviewPopup.tsx b/solidui-web/src/pages/Designer/Preview/PreviewPopup.tsx index 47d64a3..e7f3655 100644 --- a/solidui-web/src/pages/Designer/Preview/PreviewPopup.tsx +++ b/solidui-web/src/pages/Designer/Preview/PreviewPopup.tsx @@ -16,7 +16,7 @@ */ import React, { useEffect } from "react"; -import { useSearchParams } from "react-router-dom"; +import { useMemoizedFn } from "ahooks"; import mitt from "mitt"; import Apis from "@/apis"; import { ApiResult, ProjectPageDataType, SolidViewDataType } from "@/types"; @@ -24,7 +24,6 @@ import { ProjectPageViewsResultData } from "@/apis/types/resp"; import SolidViewFactory from "@/views/SolidViewFactory"; import "./preview.less"; import { isNil } from "lodash-es"; -import { FeatureBar } from "./index"; interface Option { value: string | number; @@ -43,58 +42,50 @@ export interface PreviewPopupProps { export default function PreviewPopup(props: PreviewPopupProps) { const { projectId, pageId } = props; - const [scenePageOptions, setScenePageOptions] = React.useState([]); - const [views, setViews] = React.useState([]); - useEffect(() => { - load(projectId, pageId); - }, [projectId, pageId]); - - async function load(pProjectId: string, pPageId?: string) { - if (pProjectId) { - const res: ApiResult = await Apis.model.queryPages( - pProjectId, - ); - if (res.ok) { - const data = res.data || []; - const scenes: Option[] = []; - if (data.length > 0) { - for (let i = 0; i < data.length; i++) { - const scene: Option = { - value: data[i].id, - label: data[i].name, - children: [], - }; + const handleLoad = useMemoizedFn( + async (pProjectId: string, pPageId?: string) => { + if (pProjectId) { + const res: ApiResult = + await Apis.model.queryPages(pProjectId); + if (res.ok) { + const data = res.data || []; + const scenes: Option[] = []; + if (data.length > 0) { + for (let i = 0; i < data.length; i++) { + const scene: Option = { + value: data[i].id, + label: data[i].name, + children: [], + }; - if (data[i].children) { - for (let j = 0; j < data[i].children.length; j++) { - if (isNil(scene) || isNil(scene.children)) { - continue; + if (data[i].children) { + for (let j = 0; j < data[i].children.length; j++) { + if (isNil(scene) || isNil(scene.children)) { + continue; + } + scene.children.push({ + value: data[i].children[j].id, + label: data[i].children[j].name, + children: [], + }); } - scene.children.push({ - value: data[i].children[j].id, - label: data[i].children[j].name, - children: [], - }); } + scenes.push(scene); } - scenes.push(scene); + } + if (pPageId) { + await queryViews(pProjectId, pPageId); } } - if (pPageId) { - await queryViews(pProjectId, pPageId); - } - setScenePageOptions(scenes); } - } - } + }, + ); - async function onChange(value: string[]) { - if (value && value[0] && value[1]) { - queryViews(value[0], value[1]); - } - } + useEffect(() => { + handleLoad(projectId, pageId); + }, [handleLoad, projectId, pageId]); async function queryViews(pProjectId: string, pPageId: string) { const res: ApiResult = diff --git a/solidui-web/src/pages/Designer/Preview/index.tsx b/solidui-web/src/pages/Designer/Preview/index.tsx index e766607..47783cf 100644 --- a/solidui-web/src/pages/Designer/Preview/index.tsx +++ b/solidui-web/src/pages/Designer/Preview/index.tsx @@ -17,6 +17,7 @@ import React, { useEffect, useMemo, useState } from "react"; import { useParams, useSearchParams } from "react-router-dom"; +import { useMemoizedFn } from "ahooks"; import { CaretLeftOutlined, CaretUpOutlined, @@ -31,7 +32,7 @@ import { ApiResult, ProjectPageDataType, SolidViewDataType } from "@/types"; import { ProjectPageViewsResultData } from "@/apis/types/resp"; import SolidViewFactory from "@/views/SolidViewFactory"; import { get, isNil } from "lodash-es"; -import { FullScreen } from "@/utils/fullScreen"; +import FullScreen from "@/utils/fullScreen"; import "./preview.less"; import { message } from "antd"; @@ -50,11 +51,7 @@ export default function Preview() { const [scenePageOptions, setScenePageOptions] = React.useState([]); const [views, setViews] = React.useState([]); - useEffect(() => { - load(); - }, []); - - async function load() { + const handleLoad = useMemoizedFn(async () => { const { id } = params; const pageId = searchParams.get("pageId"); @@ -94,7 +91,11 @@ export default function Preview() { setScenePageOptions(scenes); } } - } + }); + + useEffect(() => { + handleLoad(); + }, [handleLoad]); async function onChange(value: string[]) { if (value && value[0] && value[1]) { @@ -151,10 +152,7 @@ export default function Preview() { right: 15, }} > - +
); @@ -165,15 +163,15 @@ interface IPointerProps { onPageChange: (page: any) => void; } -export const FeatureBar: React.FC = (props) => { +function FeatureBar(props: IPointerProps) { // scene const scenes = useMemo(() => { - const scenes: { [key: string]: any } = {}; + const mScenes: { [key: string]: any } = {}; for (let i = 0; i < props.data.length; i++) { const scene = props.data[i]; - scenes[scene.value] = scene; + mScenes[scene.value] = scene; } - return scenes; + return mScenes; }, [props.data]); // 当前scene const [currentScene, setCurrnetScene] = useState(null); @@ -218,6 +216,15 @@ export const FeatureBar: React.FC = (props) => { }); } } + + function renderIcon(p: any) { + return p.open ? ( + + ) : ( + + ); + } + return (
@@ -226,9 +233,7 @@ export const FeatureBar: React.FC = (props) => { value={currentScene?.value} onChange={onSceneChange} menuItemSelectedIcon={null} - inputIcon={(props) => - props.open ? : - } + inputIcon={renderIcon} direction="ltr" placeholder="please select scene" dropdownStyle={{ @@ -239,26 +244,24 @@ export const FeatureBar: React.FC = (props) => { minHeight: 0, }} > - {props.data.map((scene) => { - return ( - - ); - })} + {props.data.map((scene) => ( + + ))}
onPageChange("l")}> - + @@ -266,13 +269,14 @@ export const FeatureBar: React.FC = (props) => { onPageChange("r")}> - +
{ FullScreen.switchFullScreen(); }} @@ -280,4 +284,4 @@ export const FeatureBar: React.FC = (props) => {
); -}; +} diff --git a/solidui-web/src/pages/Designer/Preview/preview.less b/solidui-web/src/pages/Designer/Preview/preview.less index b884534..534c8a1 100644 --- a/solidui-web/src/pages/Designer/Preview/preview.less +++ b/solidui-web/src/pages/Designer/Preview/preview.less @@ -23,37 +23,38 @@ bottom: 0; background-color: #fff; } -.featbar-wrapper{ +.featbar-wrapper { display: flex; align-items: center; background-color: #38383890; padding-right: 15px; border: 1px solid #2f2f2f90; - .featbar-divider{ + .featbar-divider { width: 1px; height: 15px; - margin:0 15px; + margin: 0 15px; border-left: 1px solid #cfcfcf; } - .featbar-scene{ + .featbar-scene { display: flex; - .feature-select{ + .feature-select { min-width: 150px; height: 30px; font-size: 14px; - color: #CFCFCF; - .rc-select-arrow{ + color: #cfcfcf; + .rc-select-arrow { top: 4px; } - .rc-select-selector{ - .rc-select-selection-search-input{ + .rc-select-selector { + .rc-select-selection-search-input { height: 30px; font-size: 0px; cursor: pointer; } - .rc-select-selection-item,.rc-select-selection-placeholder{ + .rc-select-selection-item, + .rc-select-selection-placeholder { padding: 0 15px; - color: #CFCFCF; + color: #cfcfcf; opacity: 1; left: 0; top: 0; @@ -65,35 +66,33 @@ } } } - .featbar-page{ + .featbar-page { font-size: 14px; display: flex; justify-content: space-between; align-items: center; - .page_title{ + .page_title { display: inline-block; text-align: center; - color: #CFCFCF; + color: #cfcfcf; margin: 0 12px; } - .left_arrows,.right_arrows{ + .left_arrows, + .right_arrows { cursor: pointer; .anticon { font-size: 14px; - color: #CFCFCF; + color: #cfcfcf; } } } - .featbar-tools{ + .featbar-tools { display: flex; - color: #CFCFCF; + color: #cfcfcf; .anticon { cursor: pointer; font-size: 16px; - color: #CFCFCF; + color: #cfcfcf; } } - } - - diff --git a/solidui-web/src/pages/Designer/Properties/configurations.less b/solidui-web/src/pages/Designer/Properties/configurations.less index 5a495bd..f5fc692 100644 --- a/solidui-web/src/pages/Designer/Properties/configurations.less +++ b/solidui-web/src/pages/Designer/Properties/configurations.less @@ -18,16 +18,16 @@ @import "@/assets/styles/variables.less"; .aside-east { - position: absolute; - top: @headerHeight; - right: 0; - width: @propertiesWidth; - bottom: 0; - z-index: 13; - background-color: @bgColor; + position: absolute; + top: @headerHeight; + right: 0; + width: @propertiesWidth; + bottom: 0; + z-index: 13; + background-color: @bgColor; color: @textColor; - transition: all .3s; - border-left: 1px solid #D2D1D1; + transition: all 0.3s; + border-left: 1px solid #d2d1d1; .aside-east__container { position: absolute; @@ -42,9 +42,9 @@ .conf-header { position: relative; height: 36px; - background-color: #FCFCFD; + background-color: #fcfcfd; color: @primaryTextColor; - border-bottom: 1px solid #E7E7E7; + border-bottom: 1px solid #e7e7e7; .conf-header__tabs { position: absolute; @@ -124,7 +124,7 @@ margin-top: 10px; overflow: auto; // border: 1px solid #000; - border: 1px solid #E7E7E7; + border: 1px solid #e7e7e7; .sticky-table-table { width: 100%; diff --git a/solidui-web/src/pages/Designer/Properties/styles/StyleProperties.tsx b/solidui-web/src/pages/Designer/Properties/styles/StyleProperties.tsx index 5515705..6460460 100644 --- a/solidui-web/src/pages/Designer/Properties/styles/StyleProperties.tsx +++ b/solidui-web/src/pages/Designer/Properties/styles/StyleProperties.tsx @@ -17,6 +17,7 @@ import React, { useEffect } from "react"; import { useUpdate } from "react-use"; +import { useMemoizedFn } from "ahooks"; import { LeftRightExpander, PropertyElement, InputText } from "@/components"; import { eventbus, mm } from "@/utils"; import { isNil } from "lodash-es"; @@ -24,6 +25,10 @@ import { isNil } from "lodash-es"; export default function StyleProperties() { const forceUpdate = useUpdate(); + const handleSelectViewEvent = useMemoizedFn(() => { + forceUpdate(); + }); + useEffect(() => { eventbus.on("onSelectViewInViewList", handleSelectViewEvent); eventbus.on("onSelectViewInViewport", handleSelectViewEvent); @@ -32,11 +37,7 @@ export default function StyleProperties() { eventbus.off("onSelectViewInViewList", handleSelectViewEvent); eventbus.off("onSelectViewInViewport", handleSelectViewEvent); }; - }, []); - - function handleSelectViewEvent() { - forceUpdate(); - } + }, [handleSelectViewEvent]); return ( diff --git a/solidui-web/src/pages/Designer/Properties/styles/StyleTitleProperties.tsx b/solidui-web/src/pages/Designer/Properties/styles/StyleTitleProperties.tsx index 5174194..1435ea6 100644 --- a/solidui-web/src/pages/Designer/Properties/styles/StyleTitleProperties.tsx +++ b/solidui-web/src/pages/Designer/Properties/styles/StyleTitleProperties.tsx @@ -45,9 +45,7 @@ function updateViewAndEmitEvent( let view = mm.getCurrentView(); if (view) { const clonedView = cloneDeep(view); - set(clonedView, propertyKey, propertyValue); - // set(view, propertyKey, propertyValue); view = clonedView; eventbus.emit("onUpdateViewPropertyValue", { id: view.id, @@ -58,7 +56,7 @@ function updateViewAndEmitEvent( return Promise.resolve(); } -export default function () { +export default function StyleTitleProperties() { const forceUpdate = useUpdate(); return ( (); - useEffect(() => { - load(); - - eventbus.on("onSelectViewInViewList", handleSelectViewEvent); - eventbus.on("onSelectViewInViewport", handleSelectViewEvent); - - return () => { - eventbus.off("onSelectViewInViewList", handleSelectViewEvent); - eventbus.off("onSelectViewInViewport", handleSelectViewEvent); - }; - }, []); - - function handleSelectViewEvent() { - load(); - } - - async function load() { + const handleLoad = useMemoizedFn(async () => { const view = mm.getCurrentView(); if (isNil(view)) { return; @@ -146,7 +131,96 @@ function useDataProperties() { } } setLoading(false); - } + }); + + useEffect(() => { + handleLoad(); + + eventbus.on("onSelectViewInViewList", handleLoad); + eventbus.on("onSelectViewInViewport", handleLoad); + + return () => { + eventbus.off("onSelectViewInViewList", handleLoad); + eventbus.off("onSelectViewInViewport", handleLoad); + }; + }, [handleLoad]); + + // function handleSelectViewEvent() { + // load(); + // } + + // async function load() { + // const view = mm.getCurrentView(); + // if (isNil(view)) { + // return; + // } + // setLoading(true); + // const viewData = view?.data || { + // dataSourceId: undefined, + // table: undefined, + // sql: undefined, + // }; + + // const res: ApiResult = + // await Apis.datasource.types(); + // if (res.ok) { + // const mDataSourceTypes = res.data || []; + // const res2: ApiResult = await Apis.datasource.query({ + // pageNo: 1, + // pageSize: 10000, + // expire: false, + // name: "", + // }); + // if (res2.ok) { + // const data = res2.data || ({} as any); + // const records: DataSourceDataType[] = data.totalList || []; + // const mDataSourceOptions: Option[] = []; + // records.forEach((item: any) => { + // // item.key = item.id; + // mDataSourceOptions.push({ + // key: `${item.id}`, + // label: item.dataSourceName, + // value: item.id, + // isLeaf: false, + // children: [], + // }); + // }); + + // setDataSourceOptions(mDataSourceOptions); + // setDataSourceTypes(mDataSourceTypes); + // setDataSources(records || []); + // setColumns([]); + // setRows([]); + // const optionVals = []; + // if (viewData.dataSourceId) { + // optionVals.push(viewData.dataSourceId); + // } + // if (viewData.table) { + // optionVals.push(viewData.table); + // } + // setSelectedDataSourceOptions(optionVals); + + // const target = find(records, (d) => d.id === viewData.dataSourceId); + // if (target === null || undefined === target) { + // setLoading(false); + // return; + // } + // const dsType = find( + // mDataSourceTypes, + // (d) => d.id === `${target?.dataSourceTypeId}`, + // ); + // if (dsType === null || undefined === dsType) { + // setLoading(false); + // return; + // } + // setSelectedDataSource({ + // dataSourceName: target.dataSourceName, + // typeName: dsType.classifier, + // }); + // } + // } + // setLoading(false); + // } // async function queryDataSourceTypes() { // let res: ApiResult = diff --git a/solidui-web/src/pages/Designer/Properties/useProperties.tsx b/solidui-web/src/pages/Designer/Properties/useProperties.tsx index 9b2c426..e810f11 100644 --- a/solidui-web/src/pages/Designer/Properties/useProperties.tsx +++ b/solidui-web/src/pages/Designer/Properties/useProperties.tsx @@ -17,6 +17,7 @@ import React, { useEffect, useState } from "react"; import { useUpdate } from "react-use"; +import { useMemoizedFn } from "ahooks"; import { eventbus } from "@/utils"; type TabItemDataType = { @@ -38,6 +39,25 @@ function useProperties(initialData: InitialData) { const mainRef = React.createRef(); const asideRef = React.createRef(); + const handleSelectPageInViewPort = useMemoizedFn(() => { + setPropertyKey("page"); + }); + + const handleModelLoad = useMemoizedFn(() => { + setPropertyKey("top"); + forceUpdate(); + }); + + const handleSelectPage = useMemoizedFn(() => { + setPropertyKey("page"); + forceUpdate(); + }); + + const handleSelectViewEvent = useMemoizedFn(() => { + setPropertyKey("view"); + forceUpdate(); + }); + useEffect(() => { eventbus.on("onSelectViewInViewList", handleSelectViewEvent); eventbus.on("onSelectViewInViewport", handleSelectViewEvent); @@ -52,26 +72,12 @@ function useProperties(initialData: InitialData) { eventbus.off("onSelectPageInViewport", handleSelectPageInViewPort); eventbus.off("onModelLoad", handleModelLoad); }; - }, []); - - function handleSelectPageInViewPort() { - setPropertyKey("page"); - } - - function handleModelLoad() { - setPropertyKey("top"); - forceUpdate(); - } - - function handleSelectPage() { - setPropertyKey("page"); - forceUpdate(); - } - - function handleSelectViewEvent() { - setPropertyKey("view"); - forceUpdate(); - } + }, [ + handleModelLoad, + handleSelectPage, + handleSelectViewEvent, + handleSelectPageInViewPort, + ]); function renderTabs() { return ( diff --git a/solidui-web/src/pages/Login/login.less b/solidui-web/src/pages/Login/login.less index 47936e7..dceb272 100644 --- a/solidui-web/src/pages/Login/login.less +++ b/solidui-web/src/pages/Login/login.less @@ -15,7 +15,7 @@ * limitations under the License. */ -@boxShadowColor: #FCFDFE; +@boxShadowColor: #fcfdfe; @boxShadowWidth: 8px; .solidui-login { @@ -35,7 +35,7 @@ background-attachment: fixed; margin: 0; padding: 0; - opacity: .4; + opacity: 0.4; z-index: 10; } @@ -72,7 +72,11 @@ align-items: center; height: 260px; width: 100%; - box-shadow: @boxShadowWidth @boxShadowWidth @boxShadowWidth @boxShadowColor, @boxShadowWidth -@boxShadowWidth @boxShadowWidth @boxShadowColor, -@boxShadowWidth @boxShadowWidth @boxShadowWidth @boxShadowColor, -@boxShadowWidth -@boxShadowWidth @boxShadowWidth @boxShadowColor; + box-shadow: @boxShadowWidth @boxShadowWidth @boxShadowWidth + @boxShadowColor, + @boxShadowWidth -@boxShadowWidth @boxShadowWidth @boxShadowColor, + -@boxShadowWidth @boxShadowWidth @boxShadowWidth @boxShadowColor, + -@boxShadowWidth -@boxShadowWidth @boxShadowWidth @boxShadowColor; } } } @@ -80,6 +84,6 @@ .login-password { #basic_password { - background-color: #F5F9FC; + background-color: #f5f9fc; } } diff --git a/solidui-web/src/pages/Project/ProjectList.less b/solidui-web/src/pages/Project/ProjectList.less index 9bac0b3..0841113 100644 --- a/solidui-web/src/pages/Project/ProjectList.less +++ b/solidui-web/src/pages/Project/ProjectList.less @@ -15,7 +15,7 @@ * limitations under the License. */ - .solidui-projects { +.solidui-projects { position: absolute; top: 0; left: 0; @@ -67,8 +67,6 @@ } } } - - } } } diff --git a/solidui-web/src/pages/Project/_components/ProjectCard.less b/solidui-web/src/pages/Project/_components/ProjectCard.less index cd443fe..78c1ef2 100644 --- a/solidui-web/src/pages/Project/_components/ProjectCard.less +++ b/solidui-web/src/pages/Project/_components/ProjectCard.less @@ -79,5 +79,3 @@ color: #fff; } } - - diff --git a/solidui-web/src/pages/Project/_components/ProjectCard.tsx b/solidui-web/src/pages/Project/_components/ProjectCard.tsx index 009e604..2ea2a39 100644 --- a/solidui-web/src/pages/Project/_components/ProjectCard.tsx +++ b/solidui-web/src/pages/Project/_components/ProjectCard.tsx @@ -65,8 +65,6 @@ export default function ProjectCard(props: ProjectCardProps) { onUpdate, } = props; - // const editingProject = React.useRef(); - async function handleEdit(proj: ProjectDataType) { navigate(`/dashboard/${proj.id}?projectName=${proj.projectName}`); } @@ -221,8 +219,7 @@ export default function ProjectCard(props: ProjectCardProps) { }} > - } /> - {/*
none
*/} + } />
{item.userName}
diff --git a/solidui-web/src/utils/fullScreen.ts b/solidui-web/src/utils/fullScreen.ts index 1bedf16..1f24e0a 100644 --- a/solidui-web/src/utils/fullScreen.ts +++ b/solidui-web/src/utils/fullScreen.ts @@ -15,17 +15,19 @@ * limitations under the License. */ -export class FullScreen { +export default class FullScreen { public static requestFullScreen = () => { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } }; + public static exitFullScreen = () => { if (document.fullscreenElement) { document.exitFullscreen(); } }; + public static switchFullScreen = () => { if (document.fullscreenElement) { document.exitFullscreen(); diff --git a/solidui-web/src/views/SolidView.tsx b/solidui-web/src/views/SolidView.tsx index 1a93237..e0d5009 100644 --- a/solidui-web/src/views/SolidView.tsx +++ b/solidui-web/src/views/SolidView.tsx @@ -147,8 +147,6 @@ export default abstract class SolidView< this.eventbus.on("onDataSetChange", this.handleDataSetChange); } - // protected handleDrag = () => {}; - protected handleResize = () => { this.resize(); }; @@ -199,31 +197,17 @@ export default abstract class SolidView< this.resize(); } }); - - // no-restricted-syntax - // for (const key in evt) { - // if (key === this.id) { - // this.resize(); - // break; - // } - // } }; async componentWillUnmount() {} - async componentDidUpdate() // snapshot?: any, // prevState: Readonly<{}>, // prevProps: Readonly, - { - // let viewModel = this.state.viewModel; - // const viewModel = this.vm; - // let viewModel = this.props.viewModel; - // let metadata = viewModel.metadata || {}; - // if (viewModel.reFetch) { - // await this.fetchData(); - // } + async componentDidUpdate() { this.reRender(); } render() { + // TODO + /* eslint-disable @typescript-eslint/no-unused-vars */ const { viewModel, className, style, eventbus, scenaAttrs, ...restProps } = this.props; return ( diff --git a/solidui-web/src/views/echarts/EChartsLineSolidView.tsx b/solidui-web/src/views/echarts/EChartsLineSolidView.tsx index 23a3a72..549549e 100644 --- a/solidui-web/src/views/echarts/EChartsLineSolidView.tsx +++ b/solidui-web/src/views/echarts/EChartsLineSolidView.tsx @@ -70,7 +70,10 @@ export default class EChartsLineSolidView extends EChartsBaseSolidView o === headDimension.label); + const viewDimensionIdx = findIndex( + headRow, + (o) => o === headDimension.label, + ); if (viewDimensionIdx === -1) return {}; const xAxisData: any[] = []; @@ -93,7 +96,11 @@ export default class EChartsLineSolidView extends EChartsBaseSolidView { const series = this.getSeries(item);