优化图片组件参数，增加属性面板文档

SuperMap · Nov 1, 2024 · 25fc969 · 25fc969
1 parent 7e4ace3
commit 25fc969
Show file tree

Hide file tree

Showing 9 changed files with 103 additions and 33 deletions.
diff --git a/docs/zh/api/common/attribute-panel.md b/docs/zh/api/common/attribute-panel.md
@@ -0,0 +1,33 @@
+# 属性面板
+
+```vue
+<sm-attribute-panel
+  :attrbiutes="[
+    {
+        "attribute": "链接",
+        "alias": "bbb",
+        "attributeValue": "www.test1.com"
+    },
+    {
+        "attribute": "文本",
+        "alias": "text",
+        "attributeValue": "test1"
+    }
+  ]"
+></sm-attribute-panel>
+```
+
+### Attributes
+
+| 参数           | 说明                                                                                   | 类型    | 可选值 | 默认值 |
+| :------------- | :------------------------------------------------------------------------------------- | :------ | :----- | :----- |
+| showIcon       | 显示分页                                                                               | boolean | -      | false  |
+| currentIndex   | 当前页索引                                                                             | number  | -      | 0      |
+| paginationText | 自定义分页文本                                                                         | string  | -      |
+| total          | 总分页数                                                                               | number  | -      | -      |
+| title          | 标题                                                                                   | string  | -      | -      |
+| attributes     | 属性数据                                                                               | array   | -      | []     |
+| columns        | 列配置, 具体属性参考[表格列配置文档](https://1x.antdv.com/components/table-cn/#Column) | array   | -      | []     |
+| showBorder     | 显示边框                                                                               | boolean | -      | true   |
+
+> 支持[主题混入参数](/zh/api/mixin/mixin.md#theme)
diff --git a/docs/zh/api/common/image.md b/docs/zh/api/common/image.md
@@ -10,6 +10,7 @@
 | :----- | :--------- | :----- | :------------------------------------------------------------- | :------- |
 | src    | 图片地址   | string | -                                                              | -        |
 | repeat | 图片重复   | string | 'center' \| 'noRepeat' \| 'repeatX' \| 'repeatY' \| 'repeatXY' | 'center' |
+| preivewMode | 图片预览   | string | 'none' \| 'popup' \| 'full' | 'none' |
 | href   | 超链接地址 | string | -                                                              | -        |
 | target | 跳转窗口   | string | -                                                              | '\_self' |
 

diff --git a/src/common/_lang/en.js b/src/common/_lang/en.js
@@ -37,7 +37,8 @@ export default {
   success: { copySucccess: 'copy success' },
   info: {
     loading: 'Loading...',
-    pressEscToExit: 'Press the ESC key or click the close button to exit'
+    pressEscToExit: 'Press the ESC key or click the close button to exit',
+    pressEscOrClickToExit: 'Press the ESC key or click anywhere to exit'
   },
   unit: {
     kilometers: 'km',

diff --git a/src/common/_lang/zh.js b/src/common/_lang/zh.js
@@ -39,7 +39,8 @@ export default {
   },
   info: {
     loading: '加载中',
-    pressEscToExit: '按下 ESC 键或点击关闭按钮退出'
+    pressEscToExit: '按下 ESC 键或点击关闭按钮退出',
+    pressEscOrClickToExit: '按下 ESC 键或点击任意位置退出'
   },
   unit: {
     kilometers: '千米',

diff --git a/src/common/attribute-panel/AttributePanel.vue b/src/common/attribute-panel/AttributePanel.vue
@@ -44,8 +44,6 @@ class SmAttributePanel extends Mixins(Theme) {
 
   @Prop() title: String;
 
-  @Prop({ default: true }) showHeader: Boolean;
-
   @Prop({ default: true }) showBorder: Boolean;
 
   @Prop({
@@ -78,7 +76,7 @@ class SmAttributePanel extends Mixins(Theme) {
     return {
       data: this.attributes,
       columns: this.columns,
-      showHeader: this.showHeader,
+      showHeader: false,
       background: 'transparent',
       textColor: this.textColor
     };

diff --git a/src/common/image/Image.vue b/src/common/image/Image.vue
@@ -1,24 +1,20 @@
 <template>
   <div class="sm-component-image" :style="[getBackgroundStyle, getTextColorStyle]">
-    <a
-      :class="['sm-component-image__link']"
-      :href="realHref"
-      @click="handleLinkClick"
-      :target="target"
-    >
+    <a :class="['sm-component-image__link']" :href="realHref" @click="handleLinkClick" :target="target">
       <div v-if="src" @click="startPreview" class="sm-component-image__content" :style="[repeatStyle, imgUrl]"></div>
       <i v-else class="sm-components-icon-tupian sm-component-image__defaultImg"></i>
     </a>
     <sm-modal
       v-model="previewVisible"
-      :zIndex="10000"
+      :zIndex="1009"
       centered
-      :dialogClass="dialogClass"
-      :dialogStyle="dialogStyle"
-      :bodyStyle="bodyStyle"
+      width="50%"
+      :dialogClass="fullScreenStyle.dialogClass"
+      :dialogStyle="fullScreenStyle.dialogStyle"
+      :bodyStyle="fullScreenStyle.bodyStyle"
       :footer="null"
     >
-      <img :src="src" @click="endPreview" :style="{'object-fit': 'contain', width: '100%', height: '100%'}"/>
+      <img :src="src" @click="endPreview" :style="{ 'object-fit': 'contain', width: '100%', height: '100%' }" />
     </sm-modal>
   </div>
 </template>
@@ -27,6 +23,7 @@
 import Theme from 'vue-iclient/src/common/_mixin/Theme';
 import { parseUrl } from 'vue-iclient/src/common/_utils/util';
 import SmModal from 'vue-iclient/src/common/modal/Modal.vue';
+import Message from 'vue-iclient/src/common/message/index.js';
 
 export default {
   name: 'SmImage',
@@ -44,9 +41,9 @@ export default {
       type: String,
       default: ''
     },
-    preview: {
-      type: Boolean,
-      default: true
+    previewMode: {
+      type: String,
+      default: 'none'
     },
     target: {
       type: String,
@@ -55,16 +52,6 @@ export default {
   },
   data() {
     return {
-      dialogStyle: {
-        backgroundColor: 'transparent',
-        height: '100%'
-      },
-      dialogClass: 'sm-component-image__preview',
-      bodyStyle: {
-        padding: 0,
-        width: '100%',
-        height: '100%'
-      },
       previewVisible: false,
       repeatOption: {
         center: {
@@ -92,6 +79,27 @@ export default {
     };
   },
   computed: {
+    fullScreenStyle() {
+      return this.previewMode === 'fullScreen'
+        ? {
+          dialogStyle: {
+            backgroundColor: 'transparent',
+            height: '100%'
+          },
+          dialogClass: 'sm-component-image__full',
+          bodyStyle: {
+            padding: 0,
+            width: '100%',
+            height: '100%'
+          }
+        }
+        : {
+          dialogClass: 'sm-component-image__preview',
+          bodyStyle: {
+            padding: 0
+          }
+        };
+    },
     repeatStyle() {
       return this.repeatOption[this.repeat];
     },
@@ -115,9 +123,10 @@ export default {
       }
     },
     startPreview() {
-      if (!this.preview) {
+      if (this.previewMode === 'none') {
         return;
       }
+      Message.info(this.previewMode === 'popup' ? this.$t('info.pressEscToExit') : this.$t('info.pressEscOrClickToExit'), 3);
       this.previewVisible = true;
     },
     endPreview() {

diff --git a/src/common/image/__tests__/Image.spec.js b/src/common/image/__tests__/Image.spec.js
@@ -38,12 +38,21 @@ describe('Image.vue', () => {
     expect(wrapper.find('.sm-component-image').exists()).toBe(true);
   });
 
-  it('preview', () => {
+  it('no preview', () => {
     wrapper = mount(Image);
     wrapper.setProps({
-      preview: false
+      previewMode: 'none'
     });
     wrapper.vm.startPreview();
     expect(wrapper.vm.previewVisible).toBeFalsy();
   });
+
+  it('preview', () => {
+    wrapper = mount(Image);
+    wrapper.setProps({
+      previewMode: 'popup'
+    });
+    wrapper.vm.startPreview();
+    expect(wrapper.vm.previewVisible).toBeTruthy();
+  });
 });
diff --git a/src/common/image/style/image.scss b/src/common/image/style/image.scss
@@ -18,6 +18,17 @@
     }
   }
   @include e(preview) {
+    .sm-component-modal-content {
+      .sm-component-modal-close {
+        margin-left: -64px;
+        .sm-component-modal-close-x {
+          font-size: 40px;
+        }
+      }
+
+    }
+  }
+  @include e(previewFull) {
     width: 100% !important;
     padding: 0 !important;
     .sm-component-modal-content {
@@ -28,6 +39,13 @@
       .sm-component-modal-close {
         display: none;
       }
+      .sm-component-modal-close {
+        margin-left: -64px;
+        .sm-component-modal-close-x {
+          font-size: 40px;
+        }
+      }
+
     }
   }
 

diff --git a/src/mapboxgl/web-map/LayerGroup.vue b/src/mapboxgl/web-map/LayerGroup.vue
@@ -21,7 +21,7 @@
               <div v-if="layerOperations.zoomToLayer" class="sm-component-layer-list__zoom">
                 <i
                   :class="['sm-components-icon-suofangzhituceng', (item.visible || !item.disabled) && 'highlight-icon']"
-                  :style="(!item.visible || item.disabled) && { cursor: 'not-allowed' }"
+                  :style="!item.visible && { cursor: 'not-allowed' }"
                   :title="$t('layerList.zoomToLayer')"
                   @click.stop="item.visible && zoomToBounds(item)"
                 />