diff --git a/CHANGELOG.md b/CHANGELOG.md index 6470328e3bc3588b04dc6ff782d1b3f1afefd97c..91b7ace7acbb655b13284cf74195dc48c6877f97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,12 @@ - 合并项目util - 更新标签墙文档 +### Fixed + +- 修复标签墙插件未配置指定部件参数时导致初次加载数据异常 +- 修复搜索栏未配置图片时搜索框样式异常 +- 修复自定义边框8边框样式导致轮播列表项间隔样式异常 + ## [0.0.3] - 2024-08-23 ### Added diff --git a/README.md b/README.md index c2d069b4b30649e777cee235545b1d796a4e137c..04e48e607c04a98ac9542a8933622b3a87af0c16 100644 --- a/README.md +++ b/README.md @@ -24,7 +24,7 @@ iBiz数据大屏插件，提供以下核心功能模块： │ ├─ custom-border 自定义边框样式（1-13） │ ├─ custom-button 自定义按钮样式（1-6） │ ├─ custom-decoration 自定义装饰器样式（1-6，11） -│ ├─ custom-image-search-box 图片搜索框 +│ ├─ custom-search-box 搜索框 │ ├─ digital-flop 数字翻牌器 │ ├─ index.ts │ ├─ percent-pond 百分比进度条 diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index c3f362615d25d83afc870de6cbce82cc99a5ccc8..c455244d678c6c9d7b8963b49395b0cefbec24eb 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -89,7 +89,7 @@ export default defineConfig({ }, { text: '图片搜索框', - link: '/guide/custom-image-search-box', + link: '/guide/custom-search-box', }, { text: '水位图', diff --git a/docs/guide/custom-image-search-box.md b/docs/guide/custom-search-box.md similarity index 53% rename from docs/guide/custom-image-search-box.md rename to docs/guide/custom-search-box.md index dddcb06da84954c695ac64a1968f1121d4ed41bb..e8e89ee8a93412021266efb1cb811a16e6e8b233 100644 --- a/docs/guide/custom-image-search-box.md +++ b/docs/guide/custom-search-box.md @@ -1,6 +1,6 @@ -# 图片搜索框 +# 搜索框 -图片搜索框为输入框编辑器的扩展模式，主要应用于需要自定义背景的搜索框。 +自定义搜索框为输入框编辑器的扩展模式，可同时让所有部件进行搜索。 ## 效果呈现 @@ -12,20 +12,6 @@ ::: details 点我查看代码 -编辑器样式 - -```json -[ - { - "codename": "CUSTOM_IMAGE_SEARCH_BOX", - "pssyspfpluginid": "UsrPFPlugin0815614534", - "repdefault": 0, - "validflag": 1, - "pssyseditorstylename": "自定义图片搜索框", - "pseditortypeid": "RAW" - } -] -``` 编辑器插件 @@ -34,8 +20,8 @@ { "plugintype": "EDITOR_CUSTOMSTYLE", "codename": "UsrPFPlugin0815614534", - "plugintag": "CUSTOM_IMAGE_SEARCH_BOX", - "pssyspfpluginname": "自定义图片搜索框" + "plugintag": "CUSTOM_SEARCH_BOX", + "pssyspfpluginname": "自定义搜索框" } ] ``` @@ -50,9 +36,6 @@ ![配置](../public/img/custom-image-search-box_configStyle.png) -插件自定义图片配置截图 - -![配置](../public/img/custom-image-search-box_config_img.png) ## 成员参数配置 @@ -62,5 +45,5 @@ ## 功能说明 -- 支持自定义图片输入框背景(可不配置自定义图片，输入框背景展示为透明色) - 支持占位提示配置 +- 搜索时可使所有部件进行搜索 diff --git a/src/custom-border/custom-dv-8/custom-dv-8.tsx b/src/custom-border/custom-dv-8/custom-dv-8.tsx index d9c1d295392d61d1ed14cdc7f7615cd51f358f9c..0c31b20783e72c376abccff82777a9805d41dbb8 100644 --- a/src/custom-border/custom-dv-8/custom-dv-8.tsx +++ b/src/custom-border/custom-dv-8/custom-dv-8.tsx @@ -63,12 +63,13 @@ export const CustomDV8 = defineComponent({ }); const pathD = (padding: number) => { + const borderWidth = 0.5; if (props.reverse) { // 当reverse为true时，从左上角开始，逆时针方向绘制 - return `M ${2.5 + padding},${2.5 + padding} L ${2.5 + padding},${height.value - 2.5 - props.offsetY - padding} L ${width.value - 2.5 - padding},${height.value - 2.5 - props.offsetY - padding} L ${width.value - 2.5 - padding},${2.5 + padding} Z`; + return `M ${borderWidth + padding},${borderWidth + padding} L ${borderWidth + padding},${height.value - borderWidth - props.offsetY - padding} L ${width.value - borderWidth - padding},${height.value - borderWidth - props.offsetY - padding} L ${width.value - borderWidth - padding},${borderWidth + padding} Z`; } // 当reverse为false时，从左上角开始，顺时针方向绘制 - return `M ${2.5 + padding},${2.5 + padding} L ${width.value - 2.5 - padding},${2.5 + padding} L ${width.value - 2.5 - padding},${height.value - 2.5 - props.offsetY - padding} L ${2.5 + padding},${height.value - 2.5 - props.offsetY - padding} Z`; + return `M ${borderWidth + padding},${borderWidth + padding} L ${width.value - borderWidth - padding},${borderWidth + padding} L ${width.value - borderWidth - padding},${height.value - borderWidth - props.offsetY - padding} L ${borderWidth + padding},${height.value - borderWidth - props.offsetY - padding} Z`; }; /** @@ -178,7 +179,7 @@ export const CustomDV8 = defineComponent({ const renderBorder = () => { const _width = width.value - props.offsetX; const _height = height.value - props.offsetY; - const padding = 8; + const padding = 2; return ( { - v.component(CustomImageSearchBox.name, CustomImageSearchBox); - registerPortletProvider( - 'EDITOR_CUSTOMSTYLE_CUSTOM_IMAGE_SEARCH_BOX', - () => new CustomImageSearchBoxEditorProvider(), - ); - }, -); diff --git a/src/custom-image-search-box/custom-image-search-box.controller.ts b/src/custom-search-box/custom-search-box.controller.ts similarity index 87% rename from src/custom-image-search-box/custom-image-search-box.controller.ts rename to src/custom-search-box/custom-search-box.controller.ts index b10408cb4959181df819e3cf5dee9f2eb72f4138..3117df1e3a2214ce10ba34dd3dcc93225df43a85 100644 --- a/src/custom-image-search-box/custom-image-search-box.controller.ts +++ b/src/custom-search-box/custom-search-box.controller.ts @@ -8,7 +8,7 @@ import { IDBToolbarPortlet } from '@ibiz/model-core'; * @class RawActivityEditorController * @extends {EditorController} */ -export class CustomImageSearchBoxEditorController extends PortletPartController { +export class CustomSearchBoxEditorController extends PortletPartController { /** * 占位提示 * diff --git a/src/custom-image-search-box/custom-image-search-box.provider.ts b/src/custom-search-box/custom-search-box.provider.ts similarity index 64% rename from src/custom-image-search-box/custom-image-search-box.provider.ts rename to src/custom-search-box/custom-search-box.provider.ts index d0d1e70f497d3e2b1b2aa8caaecf4fbbe572684f..57075624823e5a9b181627457eca0c3db99a95c9 100644 --- a/src/custom-image-search-box/custom-image-search-box.provider.ts +++ b/src/custom-search-box/custom-search-box.provider.ts @@ -5,7 +5,7 @@ import { IPortletProvider, } from '@ibiz-template/runtime'; import { IDBToolbarPortlet } from '@ibiz/model-core'; -import { CustomImageSearchBoxEditorController } from './custom-image-search-box.controller'; +import { CustomSearchBoxEditorController } from './custom-search-box.controller'; /** * 直接内容(活动)编辑器适配器 @@ -14,15 +14,15 @@ import { CustomImageSearchBoxEditorController } from './custom-image-search-box. * @class RawActivityEditorProvider * @implements {EditorProvider} */ -export class CustomImageSearchBoxEditorProvider implements IPortletProvider { - component: string = 'CustomImageSearchBox'; +export class CustomSearchBoxEditorProvider implements IPortletProvider { + component: string = 'CustomSearchBox'; async createController( portletModel: IDBToolbarPortlet, dashboard: IDashboardController, parent?: IPortletContainerController, - ): Promise { - const c = new CustomImageSearchBoxEditorController( + ): Promise { + const c = new CustomSearchBoxEditorController( portletModel, dashboard, parent, diff --git a/src/custom-search-box/custom-search-box.scss b/src/custom-search-box/custom-search-box.scss new file mode 100644 index 0000000000000000000000000000000000000000..0c47f6b949c16a50cf86c3dd5b533dd9f7214c41 --- /dev/null +++ b/src/custom-search-box/custom-search-box.scss @@ -0,0 +1,35 @@ +/* stylelint-disable selector-class-pattern */ +@include b('custom-search-box') { + width: 100%; + min-width: 200px; + height: 34px; + + @include e('input') { + .el-input__wrapper { + .el-input__suffix::before { + position: absolute; + top: 9px; + right: 37px; + display: block; + width: 4px; + height: 13px; + content: ''; + background-color: var(--ibiz-screen-dashboard-primary-active-color,#00e2f4); + border-radius: 4px; + } + + &.is-focus { + box-shadow: 0 0 0 1px var(--ibiz-screen-dashboard-border-color, var(--el-input-hover-border-color)) inset; + } + + &:hover { + box-shadow: 0 0 0 1px var(--ibiz-screen-dashboard-border-color, var(--el-input-hover-border-color)) inset; + } + } + } + + @include e(search-icon) { + color: var(--ibiz-screen-dashboard-primary-active-color,#2ce8e1); + cursor: pointer; + } + } \ No newline at end of file diff --git a/src/custom-image-search-box/custom-image-search-box.tsx b/src/custom-search-box/custom-search-box.tsx similarity index 72% rename from src/custom-image-search-box/custom-image-search-box.tsx rename to src/custom-search-box/custom-search-box.tsx index 223e5a7105e5dbcc1fce27a43b93fa5a465f8fc7..046ac18f7092cb6d1a7a043b492cc373d19ada5a 100644 --- a/src/custom-image-search-box/custom-image-search-box.tsx +++ b/src/custom-search-box/custom-search-box.tsx @@ -5,15 +5,15 @@ import { getRawProps, useNamespace, } from '@ibiz-template/vue3-util'; -import './custom-image-search-box.scss'; -import { CustomImageSearchBoxEditorController } from './custom-image-search-box.controller'; +import './custom-search-box.scss'; +import { CustomSearchBoxEditorController } from './custom-search-box.controller'; -export const CustomImageSearchBox = defineComponent({ - name: 'CustomImageSearchBox', - props: getRawProps(), +export const CustomSearchBox = defineComponent({ + name: 'CustomSearchBox', + props: getRawProps(), emits: getEditorEmits(), setup(props) { - const ns = useNamespace('custom-image-search-box'); + const ns = useNamespace('custom-search-box'); const c = props.controller; const searchValue = ref(''); @@ -43,8 +43,6 @@ export const CustomImageSearchBox = defineComponent({ }; }, render() { - const data = this.c.model.sysImage?.rawContent; - return (
- {data ? : null} { + v.component(CustomSearchBox.name!, CustomSearchBox); + registerPortletProvider( + 'EDITOR_CUSTOMSTYLE_CUSTOM_SEARCH_BOX', + () => new CustomSearchBoxEditorProvider(), + ); +}); diff --git a/src/index.ts b/src/index.ts index a567cde9f1c907c3f81135536f512150e79c29be..ac33ccfe8f244cc7c3cdf5d40782a37b36987ac8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,7 +11,7 @@ import { IBizCarouselGrid } from './carousel-grid'; import { IBizPercentPond } from './percent-pond'; import { IBizCustomButton } from './custom-button'; import { IBizWaterLevelPond } from './water-level-pond'; -import { IBizCustomImageSearchBox } from './custom-image-search-box'; +import { IBizCustomSearchBox } from './custom-search-box'; import { IBizTaggedWall } from './tagged-wall'; // 自定义边框 @@ -56,7 +56,7 @@ export default { _app.use(IBizPercentPond); _app.use(IBizCustomButton); _app.use(IBizWaterLevelPond); - _app.use(IBizCustomImageSearchBox); + _app.use(IBizCustomSearchBox); _app.use(IBizTaggedWall); // 自定义边框 diff --git a/src/screen-dashboard/screen-dashboard.scss b/src/screen-dashboard/screen-dashboard.scss index 27279ef349546b74b5aad8b149a1ae5991bd2d6d..6a00fdd13845a6bda8665752d7ea4d91b30c4ed6 100644 --- a/src/screen-dashboard/screen-dashboard.scss +++ b/src/screen-dashboard/screen-dashboard.scss @@ -36,12 +36,12 @@ $screen-dashboard: ( } .ibiz-portlet-layout { - --ibiz-portlet-layout-header-bg-color: getCssVar('screen-dashboard', 'bg-color'); - --ibiz-portlet-layout-content-bg-color: getCssVar('screen-dashboard', 'bg-color'); + --ibiz-portlet-layout-header-bg-color: #{getCssVar('screen-dashboard', 'bg-color')}; + --ibiz-portlet-layout-content-bg-color: #{getCssVar('screen-dashboard', 'bg-color')}; } .ibiz-view { - --ibiz-view-bg-color: getCssVar('screen-dashboard', 'bg-color'); + --ibiz-view-bg-color: #{getCssVar('screen-dashboard', 'bg-color')}; } .#{bem(no-data)}{ @@ -53,14 +53,14 @@ $screen-dashboard: ( } .ibiz-control-grid { - --ibiz-control-grid-row-bg-color: getCssVar('screen-dashboard', 'bg-color'); - --ibiz-control-grid-row-bg-color-2: getCssVar('screen-dashboard', 'bg-color'); - --ibiz-control-grid-row-hover-color: getCssVar('screen-dashboard', 'bg-color'); - --ibiz-control-grid-header-bg-color: getCssVar('screen-dashboard', 'bg-color'); + --ibiz-control-grid-row-bg-color: #{getCssVar('screen-dashboard', 'bg-color')}; + --ibiz-control-grid-row-bg-color-2: #{getCssVar('screen-dashboard', 'bg-color')}; + --ibiz-control-grid-row-hover-color: #{getCssVar('screen-dashboard', 'bg-color')}; + --ibiz-control-grid-header-bg-color: #{getCssVar('screen-dashboard', 'bg-color')}; .el-table { - --el-table-header-bg-color: getCssVar('screen-dashboard', 'bg-color'); - --el-table-current-row-bg-color: getCssVar('screen-dashboard', 'bg-color'); + --el-table-header-bg-color: #{getCssVar('screen-dashboard', 'bg-color')}; + --el-table-current-row-bg-color: #{getCssVar('screen-dashboard', 'bg-color')}; } } } diff --git a/src/tagged-wall/tagged-wall.controller.ts b/src/tagged-wall/tagged-wall.controller.ts index f3b09c657d43fbf4103eaabc4315a2d40d27783a..cce6f228de79052862c61726cef64576c7375e21 100644 --- a/src/tagged-wall/tagged-wall.controller.ts +++ b/src/tagged-wall/tagged-wall.controller.ts @@ -49,7 +49,9 @@ export class TaggedWallController extends ListController { protected async onCreated(): Promise { await super.onCreated(); - + if (!this.model.controlParam?.ctrlParams) { + return; + } const { ENABLEFONTSIZERANDOM, RANDOMFONTSIZERANGE,