From 4be83524b3053427030b096b25e4b25d68579585 Mon Sep 17 00:00:00 2001 From: zhf <1204297681@qq.com> Date: Tue, 15 Oct 2024 20:40:09 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E8=A1=A5=E5=85=85=E5=9F=BA=E7=A1=80=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E5=86=85=E5=AE=B9=E9=A1=B9=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/index.ts | 4 + .../panel-content-item-default.scss | 3 - .../panel-content-item.scss | 29 +++ .../panel-content-item/panel-content-item.tsx | 63 ++++++ .../panel-identity-check.scss | 51 +++++ .../panel-identity-check.tsx | 201 ++++++++++++++++++ .../panel-input-interaction.scss | 2 - .../panel-design-content.scss | 2 + .../panel-design-material-page.controller.ts | 11 +- .../panel-design-material-page.tsx | 6 +- .../util/create-provider/create-provider.ts | 4 +- 11 files changed, 366 insertions(+), 10 deletions(-) create mode 100644 packages/view-design/src/components/common/panel-content-item/panel-content-item.scss create mode 100644 packages/view-design/src/components/common/panel-content-item/panel-content-item.tsx create mode 100644 packages/view-design/src/components/common/panel-identity-check/panel-identity-check.scss create mode 100644 packages/view-design/src/components/common/panel-identity-check/panel-identity-check.tsx diff --git a/packages/view-design/src/components/common/index.ts b/packages/view-design/src/components/common/index.ts index 068f4ea6..579d25c8 100644 --- a/packages/view-design/src/components/common/index.ts +++ b/packages/view-design/src/components/common/index.ts @@ -7,7 +7,9 @@ import IBizPanelContentItemText from './panel-content-item-text/panel-content-it import IBizPanelContentItemImage from './panel-content-item-image/panel-content-item-image'; import IBizPanelInputInteraction from './panel-input-interaction/panel-input-interaction'; import IBizPanelContentItemButtonList from './panel-content-item-button-list/panel-content-item-button-list'; +import IBizPanelIdentityCheck from './panel-identity-check/panel-identity-check'; import IBizPanelEditorItem from './panel-editor-item/panel-editor-item'; +import IBizPanelContentItem from './panel-content-item/panel-content-item'; export default { install(app: App): void { @@ -22,6 +24,8 @@ export default { 'IBizPanelContentItemButtonList', IBizPanelContentItemButtonList, ); + app.component('IBizPanelIdentityCheck', IBizPanelIdentityCheck); app.component('IBizPanelEditorItem', IBizPanelEditorItem); + app.component('IBizPanelContentItem', IBizPanelContentItem); }, }; diff --git a/packages/view-design/src/components/common/panel-content-item-default/panel-content-item-default.scss b/packages/view-design/src/components/common/panel-content-item-default/panel-content-item-default.scss index 8f2bfc0f..ab39bec8 100644 --- a/packages/view-design/src/components/common/panel-content-item-default/panel-content-item-default.scss +++ b/packages/view-design/src/components/common/panel-content-item-default/panel-content-item-default.scss @@ -1,6 +1,3 @@ @include b(panel-content-item-default) { - display: flex; - align-items: center; min-height: 38px; - padding-left: 6px; } diff --git a/packages/view-design/src/components/common/panel-content-item/panel-content-item.scss b/packages/view-design/src/components/common/panel-content-item/panel-content-item.scss new file mode 100644 index 00000000..934e9b84 --- /dev/null +++ b/packages/view-design/src/components/common/panel-content-item/panel-content-item.scss @@ -0,0 +1,29 @@ +/* stylelint-disable selector-class-pattern */ +@include b(panel-content-item) { + display: flex; + align-items: center; + width: 100%; + height: 100%; + min-height: 38px; + padding: 0 6px; + + .el-divider__text { + max-width: 100%; + overflow: hidden; + color: rgb(0 0 0 / 25%); + text-overflow: ellipsis; + white-space: nowrap; + background-color: #fff; + } + + .el-divider--horizontal { + margin: 0; + } + + @include m(info) { + overflow: hidden; + color: #909399; + text-overflow: ellipsis; + white-space: nowrap; + } +} diff --git a/packages/view-design/src/components/common/panel-content-item/panel-content-item.tsx b/packages/view-design/src/components/common/panel-content-item/panel-content-item.tsx new file mode 100644 index 00000000..bc2bd9ba --- /dev/null +++ b/packages/view-design/src/components/common/panel-content-item/panel-content-item.tsx @@ -0,0 +1,63 @@ +import { PropType, defineComponent } from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { + PanelContentProvider, + PanelItemDataProvider, +} from '../../../providers'; +import './panel-content-item.scss'; + +// 面板内容项 +export default defineComponent({ + name: 'IBizPanelContentItem', + props: { + context: { type: Object as PropType, required: true }, + params: { type: Object as PropType, default: () => ({}) }, + parent: { + type: Object as PropType, + }, + data: { + type: Object as PropType, + required: true, + }, + provider: { + type: Object as PropType, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('panel-content-item'); + + // 渲染内容项 + const renderContentItem = () => { + const data = props.data; + if (data) { + const type = data.data?.contenttype; + const text = data.label || ''; + switch (type) { + case 'DIVIDER': + return ( + + {text} + + ); + case 'INFO': + return ( +
+ {text} +
+ ); + default: + return null; + } + } + }; + + return { + ns, + renderContentItem, + }; + }, + render() { + return
{this.renderContentItem()}
; + }, +}); diff --git a/packages/view-design/src/components/common/panel-identity-check/panel-identity-check.scss b/packages/view-design/src/components/common/panel-identity-check/panel-identity-check.scss new file mode 100644 index 00000000..662b097c --- /dev/null +++ b/packages/view-design/src/components/common/panel-identity-check/panel-identity-check.scss @@ -0,0 +1,51 @@ +@include b(panel-identity-check) { + .el-button { + width: 100%; + } + + @include e(user-id-input) { + justify-content: flex-start; + } + + @include e(password-input) { + justify-content: flex-start; + } + + @include e(sms-verification-code) { + justify-content: flex-start; + } + + @include e(login-check) { + height: 56px; + text-align: left; + } + + @include e(user-info) { + height: 48px; + overflow: hidden; + line-height: 48px; + text-overflow: ellipsis; + white-space: nowrap; + } + + @include e(user-info-title) { + display: inline-block; + width: 38px; + height: 38px; + margin-right: 8px; + font-size: 30px; + text-align: center; + border-radius: 50%; + + > svg { + width: 1em; + height: 1em; + } + } + + @include e(user-info-content) { + font-size: 16px; + text-align: center; + vertical-align: top; + } +} diff --git a/packages/view-design/src/components/common/panel-identity-check/panel-identity-check.tsx b/packages/view-design/src/components/common/panel-identity-check/panel-identity-check.tsx new file mode 100644 index 00000000..92818019 --- /dev/null +++ b/packages/view-design/src/components/common/panel-identity-check/panel-identity-check.tsx @@ -0,0 +1,201 @@ +import { PropType, defineComponent } from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { + PanelContentProvider, + PanelItemDataProvider, +} from '../../../providers'; +import { getContentStyle } from '../../../utils'; +import { resource } from '../../../global'; +import './panel-identity-check.scss'; + +// 面板身份校验项 +export default defineComponent({ + name: 'IBizPanelIdentityCheck', + props: { + context: { type: Object as PropType, required: true }, + params: { type: Object as PropType, default: () => ({}) }, + parent: { + type: Object as PropType, + }, + data: { + type: Object as PropType, + required: true, + }, + provider: { + type: Object as PropType, + required: true, + }, + }, + setup(props) { + const ns = useNamespace('panel-identity-check'); + + // 绘制用户id输入 + const renderUserIdInput = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return ( + + {data.label} + + ); + }; + + // 绘制密码输入 + const renderPasswordInput = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return ( + + {data.label} + + ); + }; + + // 绘制组织选择 + const renderOrganizationalChoice = ( + _data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return ( + + 选项一 + + ); + }; + + // 绘制登录按钮 + const renderLogin = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return {data.label}; + }; + + // 绘制注册按钮 + const renderRegistered = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return {data.label}; + }; + + // 绘制重置输入按钮 + const renderResetInput = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return {data.label}; + }; + + // 绘制登出按钮 + const renderLoginOut = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return {data.label}; + }; + + // 绘制人机识别控件 + const renderHumanIdentification = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return
{data.label}
; + }; + + // 绘制短信验证码输入 + const renderSMSVerificationCode = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return ( + + {data.label} + + ); + }; + + // 绘制登录校验信息 + const renderLoginCheck = ( + _data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return ( +
+ +
+ ); + }; + + // 绘制第三方登录 + const renderThirdPartyLogin = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return
{data.label}
; + }; + + // 绘制用户信息 + const renderUserInfo = ( + data: PanelItemDataProvider, + _contentStyle: string, + ) => { + return ( +
+ + + + + + {data.label} +
+ ); + }; + + // 根据类型渲染内容 + const renderContentByType = () => { + const contentStyle = getContentStyle(props.data.rawCssStyle); + switch (props.data.type) { + case 'AUTH_USERID': + return renderUserIdInput(props.data, contentStyle); + case 'AUTH_PASSWORD': + return renderPasswordInput(props.data, contentStyle); + case 'AUTH_ORGPICK': + return renderOrganizationalChoice(props.data, contentStyle); + case 'AUTH_LOGINBUTTON': + return renderLogin(props.data, contentStyle); + case 'AUTH_REGISTBUTTON': + return renderRegistered(props.data, contentStyle); + case 'AUTH_RESETINPUT': + return renderResetInput(props.data, contentStyle); + case 'AUTH_LOGOUT': + return renderLoginOut(props.data, contentStyle); + case 'AUTH_CAPTCHA': + return renderHumanIdentification(props.data, contentStyle); + case 'AUTH_VERIFICATIONCODE': + return renderSMSVerificationCode(props.data, contentStyle); + case 'AUTH_LOGINMSG': + return renderLoginCheck(props.data, contentStyle); + case 'AUTH_SSO': + return renderThirdPartyLogin(props.data, contentStyle); + case 'AUTH_USERINFO': + return renderUserInfo(props.data, contentStyle); + default: + return null; + } + }; + + return { + ns, + renderContentByType, + }; + }, + render() { + return
{this.renderContentByType()}
; + }, +}); diff --git a/packages/view-design/src/components/common/panel-input-interaction/panel-input-interaction.scss b/packages/view-design/src/components/common/panel-input-interaction/panel-input-interaction.scss index 2d84ae17..5af8017d 100644 --- a/packages/view-design/src/components/common/panel-input-interaction/panel-input-interaction.scss +++ b/packages/view-design/src/components/common/panel-input-interaction/panel-input-interaction.scss @@ -2,8 +2,6 @@ @include b(panel-input-interaction) { display: flex; align-items: center; - width: 100%; - height: 100%; min-height: 38px; p, diff --git a/packages/view-design/src/panel-items/panel-design-content/panel-design-content.scss b/packages/view-design/src/panel-items/panel-design-content/panel-design-content.scss index c6cc671a..90c50513 100644 --- a/packages/view-design/src/panel-items/panel-design-content/panel-design-content.scss +++ b/packages/view-design/src/panel-items/panel-design-content/panel-design-content.scss @@ -128,6 +128,8 @@ 1 ); + --el-border-color-light: #{getCssVar(color, border)}; + .el-button.el-button { &.el-button { --el-button-text-color: #{getCssVar(color, primary, text)}; diff --git a/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.controller.ts b/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.controller.ts index 7a048ff3..a3b3de83 100644 --- a/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.controller.ts +++ b/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.controller.ts @@ -182,7 +182,6 @@ export class PanelDesignMaterialPageController extends PanelItemController { } const { width } = calcLayoutHeightWidth(layoutPos); parent.state.layout.width = `${width}`; - this.updateMaterialState('isCollapse', false); this.updateMaterialState('activePage', value); return; } @@ -207,8 +206,16 @@ export class PanelDesignMaterialPageController extends PanelItemController { } return; } + this.onSelect(this.state.isCollapse ? '$single' : '$multiple'); if (value === '$component') { - this.updateMaterialState('activeGroup', []); + if (activeGroup.length > 0) { + this.updateMaterialState('activeGroup', []); + } else { + this.updateMaterialState( + 'activeGroup', + this.state.menuItems.map(item => item.id), + ); + } return; } if (value === '$all') { diff --git a/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.tsx b/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.tsx index fe5bcc2b..5efc51fc 100644 --- a/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.tsx +++ b/packages/view-design/src/panel-items/panel-design-material-page/panel-design-material-page.tsx @@ -52,7 +52,11 @@ export default defineComponent({ popper-class={this.ns.b('popper')} index={page.id} onClick={() => { - this.controller.onSelect('$multiple'); + this.controller.onSelect( + this.controller.state.isCollapse + ? '$single' + : '$multiple', + ); const result = this.controller.state.menuItems.every(item => this.controller.state.activeGroup.includes(item.id), ); diff --git a/packages/view-design/src/providers/util/create-provider/create-provider.ts b/packages/view-design/src/providers/util/create-provider/create-provider.ts index 230a6152..78f4bc03 100644 --- a/packages/view-design/src/providers/util/create-provider/create-provider.ts +++ b/packages/view-design/src/providers/util/create-provider/create-provider.ts @@ -182,7 +182,7 @@ export function createProvider( model, type, panelDesignMetaData, - 'panel-identity-check', + 'IBizPanelIdentityCheck', ); case 'FIELD_TEXT_DYNAMIC': case 'VIEW_PAGECAPTION': @@ -211,7 +211,7 @@ export function createProvider( model, type, panelDesignMetaData, - 'panel-content-item', + 'IBizPanelContentItem', ); default: if (type.startsWith('CONTAINER')) { -- Gitee