同步代码

Author: muyao1987

src/marsgis/common/uses/use-lifecycle.ts

@@ -3,11 +3,11 @@
  * @copyright 火星科技 mars3d.cn
  * @author 火星吴彦祖 2022-02-19
  */
-import { inject, onBeforeMount, onUnmounted } from "vue"
+import { inject, onMounted, onUnmounted } from "vue"
 
 export default function useLifecycle(mapWork: any): void {
   const getMapInstance = inject<any>("getMapInstance")
-  onBeforeMount(() => {
+  onMounted(() => {
     if (mapWork.onMounted) {
       const map = getMapInstance()
       mapWork.onMounted(map)

src/marsgis/components/mars-ui/base.less

@@ -2,6 +2,7 @@
 @mars-basecolor-reverse: #000; // 基础字体颜色-反色
 @primary-color: #4db3ff; // 主要颜色
 @mars-ordinary-color: #9fd9fd; // 普通颜色
+@mars-background-active: #000000d9; // 全局激活背景色
 @font-size-base: 12px; // 主要字体大小
 @border-color-ordinary: grey; // 基础边框颜色
 @border-color-base: #ececec; // 基础边框颜色
@@ -209,6 +210,10 @@
   .ant-select:not(.ant-select-customize-input) .ant-select-selector {
     background-color: transparent !important;
   }
+
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    background-color: @mars-background-active !important;
+  }
   // .ant-select:not(.ant-select-customize-input) .ant-select-selector {
   //   background-color: transparent !important;
   // }
@@ -247,3 +252,12 @@
 .ant-input-number-handler-wrap {
   background-color: @form-input-background !important;
 }
+
+//table表格滚动条
+.ant-table-body {
+  &::-webkit-scrollbar {
+    //整体样式
+    height: 0;
+    width: 0;
+  }
+}

src/marsgis/components/mars-ui/index.less

@@ -0,0 +1,167 @@
+/**
+ * 所有页面全局公共CSS
+ *
+ * @copyright 火星科技 mars3d.cn
+ * @author 火星吴彦祖 2022-01-01
+ */
+
+/* 清除内外边距 */
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+ pre, /* text formatting elements 文本格式元素 */
+ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
+ th, td {
+  /* table elements 表格元素 */
+  margin: 0;
+  padding: 0;
+  -moz-user-select: none; /*火狐*/
+  -webkit-user-select: none; /*webkit浏览器*/
+  -ms-user-select: none; /*IE10*/
+  -khtml-user-select: none; /*早期浏览器*/
+  user-select: none;
+  list-style: none;
+}
+
+#app {
+  height: 100%;
+}
+
+/*滚动条*/
+body,
+html {
+  background-color: @background-base;
+  color: @mars-basecolor;
+  overflow: hidden;
+  * {
+    scrollbar-base-color: #f4f7fc;
+    scrollbar-track-color: #f4f7fc;
+    scrollbar-face-color: #797979;
+    scrollbar-arrow-color: #f4f7fc;
+    scrollbar-shadow-color: #f4f7fc;
+    scrollbar-3dlight-color: #f4f7fc;
+    scrollbar-highlight-color: #f4f7fc;
+    scrollbar-darkshadow-color: #f4f7fc;
+    font-size: @font-size-base;
+    scrollbar-width: thin;
+  }
+}
+
+.layout-right__header {
+  background-color: @mars-background-active;
+  h3 {
+    color: @mars-basecolor !important;
+  }
+}
+.editor-container .editor-header {
+  background-color: @mars-background-active;
+  .fileTip {
+    color: @mars-basecolor !important;
+  }
+}
+
+.mars-link-btn-primary {
+  * {
+    color: @primary-color !important;
+  }
+}
+
+::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+  display: none;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 0;
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 4px;
+  background: transparent;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  padding-top: 100px;
+  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.07);
+  background-color: rgba(79, 79, 79, 0.8);
+  min-height: 28px;
+  border-radius: 4px;
+  background-clip: padding-box;
+}
+
+::-webkit-scrollbar-track,
+::-webkit-scrollbar-thumb {
+  border: 0;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25);
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+::-webkit-scrollbar-thumb:active {
+  -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.base-overlay {
+  .ant-dropdown-menu {
+    background-color: rgba(63, 72, 84, 0.7) !important;
+    .i-icon {
+      vertical-align: middle;
+      margin-right: 4px;
+    }
+  }
+}
+
+/* Popup样式*/
+.mars3d-popup-btn-custom {
+  padding: 3px 10px;
+  border: 1px solid #209ffd;
+  background: #209ffd1c;
+}
+
+.mars3d-template-content label {
+  padding-right: 6px;
+}
+
+.mars3d-template-titile a {
+  font-size: 16px;
+}
+
+.icon-vertical-a {
+  width: 20px;
+  height: 20px;
+  vertical-align: -0.3em !important;
+}
+
+.ant-popover {
+  .ant-popover-title {
+    color: @mars-basecolor;
+  }
+}
+.ant-popover-inner-content {
+  a {
+    color: @primary-color !important;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.mars-primary-table {
+  width: 100%;
+  tr td:nth-of-type(1) {
+    width: 100px;
+  }
+  td {
+    padding: 5px;
+  }
+}

src/marsgis/components/mars-ui/index.ts

@@ -61,6 +61,7 @@ import {
 
 import "./mars-echarts"
 
+import "./index.less"
 import "./function.less"
 
 export const $alert = marsAlert

src/marsgis/components/mars-ui/mars-dialog/index.vue

@@ -18,13 +18,7 @@
           </div>
         </div>
       </div>
-      <div
-        v-for="handle in actualHandles"
-        :key="handle"
-        class="handle"
-        :class="['handle-' + handle]"
-        @mousedown="handleDown(handle, $event)"
-      >
+      <div v-for="handle in actualHandles" :key="handle" class="handle" :class="['handle-' + handle]" @mousedown="handleDown(handle, $event)">
         <slot :name="handle"></slot>
       </div>
     </div>
@@ -63,7 +57,7 @@ interface Props {
   right?: number | string // 定位right值
   top?: number | string // 定位top值
   bottom?: number | string // 定位bottom值
-  position?: Position
+  position?: Position // 统一设置位置属性，优先级高于 left right top bottom
 
   handles?: boolean | string // 缩放控制器 默认 [x, y, xy]
   minWidth?: number // 最小宽度
@@ -83,7 +77,7 @@ const props = withDefaults(defineProps<Props>(), {
   minHeight: 100,
   maxWidth: 1000,
   maxHeight: 1000,
-  zIndex: 200
+  zIndex: 900
 })
 
 const mergeProps = computed(() => {
@@ -341,7 +335,7 @@ export default {
 <style lang="less" scoped>
 .pannel-model {
   position: absolute;
-  padding: 0 5px 10px 10px;
+  padding: 0;
   border-radius: 4px;
   border: 1px solid #4db3ff70;
   z-index: 100;
@@ -357,8 +351,10 @@ export default {
   line-height: 40px;
   cursor: move;
   overflow: hidden;
-  border-bottom: 1px solid #3b4d5e;
-  color: #fff;
+  padding: 0 5px 0px 15px;
+  border-bottom: 1px solid @border-color-ordinary;
+  background-color: @collapse-header-color;
+  color: @mars-basecolor;
   .icon {
     vertical-align: middle;
     margin-right: 5px;
@@ -377,6 +373,7 @@ export default {
 .pannel-model__body {
   width: 100%;
   height: calc(100% - 40px);
+  padding: 0 5px 10px 10px;
   overflow: hidden;
 }
 .content {
@@ -398,7 +395,7 @@ export default {
     bottom: 0;
     display: flex;
     align-items: center;
-    background: rgb(64, 65, 70);
+    background: @background-base;
   }
 }
 

src/marsgis/components/mars-ui/mars-notify/index.ts

@@ -15,6 +15,7 @@ export const $notify = (message: any, description: any, options: any = {}, type:
     return new Promise((resolve) => {
       notification.config({
         placement: "bottomRight",
+        right: 20,
         duration: undefined,
         ...options
       })

src/marsgis/components/mars-ui/mars-notify/notify.less

@@ -1,40 +1,41 @@
-// 功能提示和已知问题提示框
-.mars-notify-message {
-  * {
-    color: @mars-basecolor;
-  }
-  padding: 15px 10px;
-  border: 1px solid @border-color-base;
-  background: @background-base !important;
-
-  .ant-notification-notice-icon {
-    margin: 0;
-    font-size: 22px;
-    line-height: 22px;
-  }
-  .ant-notification-notice-message {
-    height: 30px;
-    margin-left: 30px;
-    color: @mars-basecolor;
-    font-size: 16px;
-    border-color: @border-color-base;
-  }
-  .ant-notification-notice-description {
-    color: @mars-basecolor;
-    margin-left: 5px;
-    line-height: 21px;
-    text-indent: 25px;
-  }
-  .ant-notification-notice-close {
-    color: @mars-basecolor;
-    top: 10px;
-    right: 10px;
-  }
-
-  .anticon {
-    * {
-      color: @primary-color !important;
-      font-size: 20px;
-    }
-  }
-}
+// 功能提示和已知问题提示框
+.mars-notify-message {
+  * {
+    color: @mars-basecolor;
+  }
+  right: 30px !important;
+  padding: 15px 10px;
+  border: 1px solid @border-color-base;
+  background: @background-base !important;
+
+  .ant-notification-notice-icon {
+    margin: 0;
+    font-size: 22px;
+    line-height: 22px;
+  }
+  .ant-notification-notice-message {
+    height: 30px;
+    margin-left: 30px;
+    color: @mars-basecolor;
+    font-size: 16px;
+    border-color: @border-color-base;
+  }
+  .ant-notification-notice-description {
+    color: @mars-basecolor;
+    margin-left: 5px;
+    line-height: 21px;
+    text-indent: 25px;
+  }
+  .ant-notification-notice-close {
+    color: @mars-basecolor;
+    top: 10px;
+    right: 10px;
+  }
+
+  .anticon {
+    * {
+      color: @primary-color !important;
+      font-size: 20px;
+    }
+  }
+}

src/marsgis/components/mars-ui/mars-pannel/index.vue

@@ -55,7 +55,7 @@ const props = withDefaults(defineProps<Props>(), {
   warpper: "app",
   visible: false,
   closeable: false,
-  zIndex: 200
+  zIndex: 900
 })
 
 const mergeProps = computed(() => {