Skip to content

M
mars3d
Commit 9cdc942f by wanghao
Options

同步代码

parent f7a50b44
正在显示 包含 700 行增加 和 387 行删除
.eslintignore
/lib/
*.sh
node_modules
*.md
......
README.md
......@@ -87,11 +87,12 @@ git clone git@gitee.com:marsgis/mars3d-react-example.git
#### 首次运行前安装依赖
```
npm install
npm install
//或使用代理
npm i --registry=http://registry.taobao.org
```
> 注意：尽量使用 npm 安装依赖
#### 启动开发环境
......@@ -137,7 +138,6 @@ npm run serve:dist //测试dist运行状态
- [ESlint](https://eslint.bootcss.com/)：代码检查工具
- [IconPark](https://iconpark.oceanengine.com/official)：UI 图标库
> 需要有一定的知识储备，包括 react hook 等，建议浏览下[Web 前端知识视频讲解](https://www.bilibili.com/video/BV1xr4y1U73r/)
### 主要目录说明
......@@ -240,6 +240,23 @@ mars3d-react-example
> 注：上述配置`main`为`src\example`下的相对路径
一个示例所有的配置文件的类型定义如下
```typescript
interface ConfigSubChildren {
name: string // 示例名称
thumbnail?: string // 缩略图
main: string // 入口，example下的相对路径
hasPannel?: boolean // 该示例是否存在ui面板
pannelFiles?: any[] // ui面板的依赖文件数组
libs?: string[] // 外部依赖
resources?: string[] // 内部依赖
params?: string // 此示例的url后面的额外参数
hidden?: boolean // 列表中隐藏此示例
}
```
### 2. 新建示例对应目录
在`src\example`示例目录下新建对应示例的子目录，因为示例众多，建议多级目录来管理，当前我们新建了`src\example\map\sample\`目录。
......@@ -275,6 +292,13 @@ hideLoading(type) // 关闭loading
完成后我们即可访问 [http://localhost:8080/editor.html?id=map/sample](http://localhost:8080/editor.html?id=map/sample)来查看示例的效果。
#### map.js 中的几个特殊的变量和函数
- onMounted：是 ui 整个示例的入口函数，只能在这里获取到地图对象
- initMap：覆盖框架默认的初始化地图的方法（较少使用）
- mapOptions 覆盖默认的地图配置，可以是一个函数，参数为默认的地图配置，返回值为新的配置
### 4. (按需可选)配置其他依赖资源
按示例本身需要来配置 libs 和 resources 依赖。
......@@ -286,6 +310,13 @@ hideLoading(type) // 关闭loading
同时在 example.json 中的对应示例增加配置`hasPannel:true`
#### GUI控件
- gui控件是为了快速实现复杂可交互表单的组件
- 通过 `import {MarsGUI} from "@mars/components/MarsUI"` 导入后即可使用
#### 5.1. `index.tsx`面板操作`map.js`内地图相关对象时。
需要在 react 中加上下面代码进行访问
......
package.json
......@@ -15,8 +15,8 @@
"prepare": "husky install"
},
"dependencies": {
"@icon-park/react": "^1.3.5",
"@marsgis/editor": "^1.0.7",
"@icon-park/svg": "^1.4.0",
"@marsgis/editor": "^1.0.9",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"antd": "^4.19.3",
......@@ -30,10 +30,9 @@
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react": "^7.29.4",
"http-server": "^14.1.0",
"lodash": "^4.17.21",
"mars3d": "^3.3.0",
"monaco-editor": "^0.29.1",
"monaco-editor": "^0.33.0",
"nprogress": "^0.2.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
......@@ -43,6 +42,7 @@
"uuid": "^8.3.2"
},
"devDependencies": {
"http-server": "^14.1.0",
"@types/node": "^17.0.22",
"@types/react": "^18.0.8",
"@types/react-dom": "^18.0.3",
......
public/config/config.json
......@@ -70,7 +70,7 @@
"id": 2021,
"pid": 10,
"name": "天地图影像",
"icon": "img/basemaps/tdt_img.png",
"icon": "/img/basemaps/tdt_img.png",
"type": "group",
"layers": [
{ "name": "底图", "type": "tdt", "layer": "img_d" },
......@@ -81,7 +81,7 @@
{
"pid": 10,
"name": "天地图电子",
"icon": "img/basemaps/tdt_vec.png",
"icon": "/img/basemaps/tdt_vec.png",
"type": "group",
"layers": [
{ "name": "底图", "type": "tdt", "layer": "vec_d" },
......@@ -92,7 +92,7 @@
"pid": 10,
"name": "高德影像",
"type": "group",
"icon": "img/basemaps/gaode_img.png",
"icon": "/img/basemaps/gaode_img.png",
"layers": [
{ "name": "底图", "type": "gaode", "layer": "img_d" },
{ "name": "注记", "type": "gaode", "layer": "img_z" }
......@@ -102,14 +102,14 @@
"pid": 10,
"name": "高德电子",
"type": "gaode",
"icon": "img/basemaps/gaode_vec.png",
"icon": "/img/basemaps/gaode_vec.png",
"layer": "vec"
},
{
"pid": 10,
"name": "百度影像",
"type": "group",
"icon": "img/basemaps/bd-img.png",
"icon": "/img/basemaps/bd-img.png",
"layers": [
{ "name": "底图", "type": "baidu", "layer": "img_d" },
{ "name": "注记", "type": "baidu", "layer": "img_z" }
......@@ -118,14 +118,14 @@
{
"pid": 10,
"name": "百度电子",
"icon": "img/basemaps/bd-vec.png",
"icon": "/img/basemaps/bd-vec.png",
"type": "baidu",
"layer": "vec"
},
{
"pid": 10,
"name": "腾讯影像",
"icon": "img/basemaps/tencent_img.png",
"icon": "/img/basemaps/tencent_img.png",
"type": "group",
"layers": [
{ "name": "底图", "type": "tencent", "layer": "img_d" },
......@@ -135,14 +135,14 @@
{
"pid": 10,
"name": "腾讯电子",
"icon": "img/basemaps/tencent_vec.png",
"icon": "/img/basemaps/tencent_vec.png",
"type": "tencent",
"layer": "vec"
},
{
"pid": 10,
"name": "ArcGIS影像",
"icon": "img/basemaps/esriWorldImagery.png",
"icon": "/img/basemaps/esriWorldImagery.png",
"type": "xyz",
"url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
"enablePickFeatures": false
......@@ -150,7 +150,7 @@
{
"pid": 10,
"name": "微软影像",
"icon": "img/basemaps/bingAerial.png",
"icon": "/img/basemaps/bingAerial.png",
"type": "bing",
"layer": "Aerial"
},
......@@ -158,7 +158,7 @@
"pid": 10,
"name": "OSM地图",
"type": "xyz",
"icon": "img/basemaps/osm.png",
"icon": "/img/basemaps/osm.png",
"url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
"subdomains": "abc"
},
......@@ -167,7 +167,7 @@
"pid": 10,
"name": "暗色底图",
"type": "gaode",
"icon": "img/basemaps/blackMarble.png",
"icon": "/img/basemaps/blackMarble.png",
"layer": "vec",
"invertColor": true,
"filterColor": "#4e70a6",
......@@ -180,7 +180,7 @@
{
"pid": 10,
"name": "蓝色底图",
"icon": "img/basemaps/bd-c-midnight.png",
"icon": "/img/basemaps/bd-c-midnight.png",
"type": "xyz",
"url": "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
"chinaCRS": "GCJ02",
......@@ -189,7 +189,7 @@
{
"pid": 10,
"name": "黑色底图",
"icon": "img/basemaps/bd-c-dark.png",
"icon": "/img/basemaps/bd-c-dark.png",
"type": "tencent",
"layer": "custom",
"style": "4"
......@@ -198,7 +198,7 @@
"pid": 10,
"name": "离线地图 (供参考)",
"type": "group",
"icon": "img/basemaps/google_img.png",
"icon": "/img/basemaps/google_img.png",
"layers": [
{
"name": "全球",
......@@ -230,7 +230,7 @@
{
"pid": 10,
"name": "单张图片 (本地离线)",
"icon": "img/basemaps/offline.png",
"icon": "/img/basemaps/offline.png",
"type": "image",
"url": "//data.mars3d.cn/file/img/world/world.jpg"
}
......@@ -900,6 +900,7 @@
{ "id": 2050, "pid": 20, "name": "点云", "type": "group" },
{
"id": 202016,
"pid": 2050,
"type": "3dtiles",
"name": "高压线塔杆",
......
public/config/example.json
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/includeLibs.js
/* eslint-disable */
/**
* 第3方公共类库配置文件
*
......@@ -54,18 +56,19 @@ window.configLibs = {
"mars3d/plugins/supermap/mars3d-supermap.js" // mars3d-supermap简化调用封装
],
/// ///////////////////////cesium相关第3方插件////////////////////////
"cesium-pbf": [
//////////////////////////cesium相关第3方插件////////////////////////
"cesium-pbf-ol": [
// pbf矢量瓦片支持
"mars3d/thirdParty/pbf/ol.js",
"mars3d/thirdParty/pbf/olms.js",
"mars3d/thirdParty/pbf/mvt.js",
"mars3d/thirdParty/pbf/style/MapboxStreetsV6.js"
"mars3d/thirdParty/pbf-ol/ol.js",
"mars3d/thirdParty/pbf-ol/olms.js",
"mars3d/thirdParty/pbf-ol/mvt.js",
"mars3d/thirdParty/pbf-ol/style/MapboxStreetsV6.js",
],
"cesium-weiVectorTile": [
// 项目矢量瓦片方式加载GeoJson插件
"mars3d/thirdParty/weiVectorTile/CesiumVectorTile.js",
"mars3d/thirdParty/weiVectorTile/WeiVectorTileLayer.js"
"mars3d/thirdParty/weiVectorTile/CesiumVectorTile.min.js",
"mars3d/thirdParty/weiVectorTile/WeiVectorTileLayer.js",
],
"cesium-meshVisualizer": [
// ammo物理引擎支持
......@@ -86,27 +89,47 @@ window.configLibs = {
"ol/ol-cesium/olcesium.js"
],
/// ///////////////////////mars2d及其插件////////////////////////
mars2d: [
// 地图 主库
"https://unpkg.com/leaflet/dist/leaflet.css", // leaflet
//////////////////////////mars2d及其插件////////////////////////
'mars2d': [//地图 主库
"https://unpkg.com/leaflet/dist/leaflet.css", //leaflet
"https://unpkg.com/leaflet/dist/leaflet.js",
"http://mars2d.cn/lib/mars2d/mars2d.css", // mars2d
"http://mars2d.cn/lib/mars2d/mars2d.css", //mars2d
"http://mars2d.cn/lib/mars2d/mars2d.js",
"http://mars2d.cn/lib/mars2d/plugins/esri/mars2d-esri.js"
],
/// ///////////////////////其他地图渲染相关库////////////////////////
echarts: ["echarts/echarts.min.js", "echarts/dark.js"],
"echarts-gl": ["echarts/echarts.min.js", "echarts/echarts-gl/echarts-gl.min.js"],
"echarts-liquidfill": ["echarts/echarts.min.js", "echarts/echarts-liquidfill/echarts-liquidfill.js"],
terraformer: ["terraformer/terraformer-1.0.9.min.js", "terraformer/terraformer-wkt-parser-1.2.0.min.js"],
kmlGeojson: [
//////////////////////////其他地图渲染相关库////////////////////////
'echarts': [
"echarts/echarts.min.js",
"echarts/dark.js"
],
'echarts-gl': [
"echarts/echarts.min.js",
"echarts/echarts-gl/echarts-gl.min.js"
],
'echarts-liquidfill': [
"echarts/echarts.min.js",
"echarts/echarts-liquidfill/echarts-liquidfill.js"
],
'terraformer': [
"terraformer/terraformer-1.0.9.min.js",
"terraformer/terraformer-wkt-parser-1.2.0.min.js",
],
'kriging': [
"kriging/kriging.min.js"
],
'three': [
"three/three.js"
],
'kmlGeojson': [
// 项目KML/KMZ解析加载GeoJson插件
"kml/kml-geojson.js"
],
kriging: ["kriging/kriging.min.js"],
three: ["three/three.js"],
hls: ["video/hls/hls.js"],
flv: ["video/flv/flv.min.js"]
'hls': ["video/hls/hls.js"],
'flv': ["video/flv/flv.min.js"],
}
public/lib/mars3d/mars3d.css
/**
* Mars3D三维可视化平台 mars3d
*
* 版本信息：v3.3.9
* 编译日期：2022-05-23 10:15:38
* 版本信息：v3.3.11
* 编译日期：2022-05-29 09:17:26
* 版权所有：Copyright by 火星科技 http://mars3d.cn
* 使用单位：免费公开版 ，2022-02-01
* 使用单位：免费公开版 ，2022-06-01
*/
/**地球容器div*/
......@@ -24,7 +24,7 @@
}
/**隐藏的div对象，如 DivBillboardEntity、HeatLayer 等*/
.mars3d-hideDiv {
z-index: -1;
z-index: -99;
position: absolute !important;
top: 0;
left: 0;
......@@ -881,9 +881,6 @@
transform: scale(1, 1);
}
}
.mars3d-popup-background {
background: rgba(41, 84, 141, 0.9) !important;
}
.mars3d-popup-btn {
padding: 3px 10px;
border: 1px solid #209ffd;
......
public/lib/mars3d/mars3d.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/plugins/space/mars3d-space.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/plugins/supermap/SuperMap3D.js
......@@ -14516,7 +14516,9 @@
function getContentFailedFunction(_0x471910) {
return function (_0x3c1587) {
const _0x2ed6dd = _0x203b
;(_0x471910[_0x2ed6dd(0xd3)] = _0x1dc358[_0x2ed6dd(0xff)]), _0x471910[_0x2ed6dd(0x165)][_0x2ed6dd(0xf4)](_0x3c1587)
_0x471910[_0x2ed6dd(0xd3)] = _0x1dc358[_0x2ed6dd(0xff)]
if (!_0x471910[_0x2ed6dd(0x165)]) _0x471910[_0x2ed6dd(0x165)]
if (!_0x2ed6dd(0xf4)) [_0x2ed6dd(0xf4)](_0x3c1587)
}
}
function createChildren(_0x955d73, _0x92ee62) {
public/lib/mars3d/plugins/wind/mars3d-wind.js
This source diff could not be displayed because it is too large. You can view the blob instead.
public/lib/mars3d/thirdParty/pbf-mapbox/PbfLayer.js 0 → 100644
//按mars3d规范，封装的pbf图层
;(function (window) {
let BasicRenderer = window.mapboxRenderer.BasicRenderer
// 创建一个全局变量作为pbfBasicRenderer渲染模板，避免出现16个canvas上下文的浏览器限制，以便Cesium ImageLayer.destory()正常工作。
// https://github.com/mapbox/mapbox-gl-js/issues/7332
const OFFSCREEN_CANV_SIZE = 1024
const baseCanv = document.createElement("canvas")
baseCanv.style.imageRendering = "pixelated"
baseCanv.addEventListener("webglcontextlost", () => console.log("webglcontextlost"), false)
baseCanv.width = OFFSCREEN_CANV_SIZE
baseCanv.height = OFFSCREEN_CANV_SIZE
class MVTImageryProvider {
/**
* create a MVTImageryProvider Object
* @param options MVTImageryProvider options
* @param options.style - mapbox style object
* @param options.sourceFilter - sourceFilter is used to filter which source participate in pickFeature process.
* @param options.maximumLevel - if cesium zoom level exceeds maximumLevel, layer will be invisible.
* @param options.minimumLevel - if cesium zoom level belows minimumLevel, layer will be invisible.
* @param options.tileSize - can be 256 or 512. 256 default
* @param options.headers - url fetch request headers
* @param options.tilingScheme - Cesium tilingScheme, default WebMercatorTilingScheme(EPSG: 3857)
*/
constructor(options) {
this.options = options
let pbfStyle = options.style
this.mapboxRenderer = new BasicRenderer({
style: pbfStyle
})
this.mapboxRenderer._transformRequest = (url, resourceType) => {
return this.transformRequest(url, resourceType)
}
console.log( this.mapboxRenderer)
this.mapboxRenderer._canvas = baseCanv
this.mapboxRenderer._canvas.addEventListener("webglcontextrestored", () => this.mapboxRenderer._createGlContext(), false)
this.mapboxRenderer._createGlContext()
if (options.showCanvas) {
this.mapboxRenderer.showCanvasForDebug()
}
this.ready = false
this.readyPromise = this.mapboxRenderer._style.loadedPromise.then(() => {
this.ready = true
})
this.tilingScheme = options.tilingScheme ?? new Cesium.WebMercatorTilingScheme()
this.rectangle = this.tilingScheme.rectangle
this.tileSize = this.tileWidth = this.tileHeight = options.tileSize || 1024
this.maximumLevel = options.maximumLevel || Number.MAX_SAFE_INTEGER
this.minimumLevel = options.minimumLevel || 0
this.tileDiscardPolicy = undefined
//this.errorEvent = new Cesium.Event();
this.credit = new Cesium.Credit(options.credit || "", false)
this.proxy = new Cesium.DefaultProxy("")
this.hasAlphaChannel = options.hasAlphaChannel ?? true
this.sourceFilter = options.sourceFilter
}
transformRequest = (url) => {
if (this.options.transformUrl) {
url = this.options.transformUrl(url)
}
return { url: url, headers: this.options.headers || {}, credentials: "" }
}
createTile() {
const canv = document.createElement("canvas")
canv.width = this.tileSize
canv.height = this.tileSize
canv.style.imageRendering = "pixelated"
const ctx = canv.getContext("2d")
if (ctx) {
ctx.globalCompositeOperation = "copy"
}
return canv
}
async canvasToImage(canvas) {
const img = new Image()
return new Promise((resolve) => {
img.onload = function () {
resolve(img)
}
img.crossOrigin = ""
img.src = canvas.toDataURL("image/png")
})
}
requestImage(x, y, zoom, releaseTile = true) {
if (zoom > this.maximumLevel || zoom < this.minimumLevel) {
return Promise.reject(undefined)
}
this.mapboxRenderer.filterForZoom(zoom)
const tilesSpec = []
this.mapboxRenderer.getVisibleSources(zoom).forEach((s) => {
tilesSpec.push({
source: s,
z: zoom,
x: x,
y: y,
left: 0,
top: 0,
size: this.tileSize
})
})
return new Promise((resolve, reject) => {
const canv = this.createTile()
const renderRef = this.mapboxRenderer.renderTiles(
canv.getContext("2d"),
{
srcLeft: 0,
srcTop: 0,
width: this.tileSize,
height: this.tileSize,
destLeft: 0,
destTop: 0
},
tilesSpec,
async (err) => {
if (!!err) {
switch (err) {
case "canceled":
case "fully-canceled":
reject(undefined)
break
default:
reject(undefined)
}
} else {
if (releaseTile) {
renderRef.consumer.ctx = null
const img = await this.canvasToImage(canv)
resolve(img)
// releaseTile默认为true，对应Cesium请求图像的情形
this.mapboxRenderer.releaseRender(renderRef)
this.mapboxRenderer._style.sourceCaches?.origin?._tileCache.reset()
} else {
// releaseTile为false时在由pickFeature手动调用，在渲染完成之后在pickFeature里边手动释放tile
resolve(renderRef)
}
}
}
)
})
}
pickFeatures(x, y, zoom, longitude, latitude) {
return this.requestImage(x, y, zoom, false)?.then((renderRef) => {
let targetSources = this.mapboxRenderer.getVisibleSources(zoom)
targetSources = this.sourceFilter ? this.sourceFilter(targetSources) : targetSources
const queryResult = []
const lng = Cesium.Math.toDegrees(longitude)
const lat = Cesium.Math.toDegrees(latitude)
targetSources.forEach((s) => {
queryResult.push({
data: this.mapboxRenderer.queryRenderedFeatures({
source: s,
renderedZoom: zoom,
lng,
lat,
tileZ: zoom
})
})
})
console.log(queryResult)
// release tile
renderRef.consumer.ctx = undefined
this.mapboxRenderer.releaseRender(renderRef)
this.mapboxRenderer._style.sourceCaches?.origin?._tileCache.reset()
return queryResult
})
}
}
class PbfLayer extends mars3d.layer.BaseTileLayer {
//构建ImageryProvider
_createImageryProvider(options) {
return createImageryProvider(options)
}
}
function createImageryProvider(options) {
if (options.url) {
return Cesium.Resource.fetchJson(options).then((data) => {
return new MVTImageryProvider({ ...options, style: data })
})
} else {
return new MVTImageryProvider(options)
}
}
PbfLayer.createImageryProvider = createImageryProvider
//注册下
const layerType = "pbf" //图层类型
mars3d.LayerUtil.register(layerType, PbfLayer)
mars3d.LayerUtil.registerImageryProvider(layerType, createImageryProvider)
//对外接口
window.mars3d.layer.PbfLayer = PbfLayer
})(window)
public/lib/mars3d/thirdParty/pbf-mapbox/README.md 0 → 100644
# Cesium对mvt的pbf的矢量瓦片图层的扩展插件
基于openlayer框架对pbf的解析，引接到cesium中来。
https://github.com/kikitte/MVTImageryProvider
其中底层依赖 https://github.com/landtechnologies/Mapbox-vector-tiles-basic-js-renderer
public/lib/mars3d/thirdParty/pbf-mapbox/mapbox-gl.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
public/temp/styles/style.css → public/temp/css/style.css
......@@ -79,9 +79,7 @@ li {
box-sizing: border-box;
}
.mars3d-divGraphic:hover{
z-index: 999 !important;
}
/*滚动条*/
body,
......@@ -145,17 +143,20 @@ html {
/**cesium 工具按钮栏*/
.cesium-viewer-toolbar {
top: auto;
bottom: 35px;
left: 12px;
right: auto;
}
.cesium-toolbar-button img {
height: 100%;
vertical-align: middle;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-viewer-toolbar>.cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
......@@ -163,20 +164,28 @@ html {
clear: both;
text-align: center;
}
.cesium-button {
background-color: #3f4854;
color: #e6e6e6;
background-color: rgba(23, 49, 71, 0.7);
border: none;
color: #ffffff;
fill: #e6e6e6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px;
}
.cesium-button:hover {
background-color: rgba(0, 138, 255, 0.7);
box-shadow: none;
border: none;
}
/**cesium 底图切换面板*/
.cesium-baseLayerPicker-dropDown {
bottom: 0;
left: 40px;
max-height: 700px;
margin-bottom: 5px;
background-color: rgba(23, 49, 71, 0.7);
}
/**cesium 帮助面板*/
......@@ -186,11 +195,18 @@ html {
left: 40px;
transform-origin: left bottom;
}
.cesium-navigation-help-instructions,.cesium-navigation-button{
background-color: rgba(23, 49, 71, 0.8);
}
.cesium-navigation-button-selected,.cesium-navigation-button-unselected:hover {
background-color: rgba(23, 49, 71, 1.0);
}
/**cesium 二维三维切换*/
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: right;
margin: 0 3px;
......@@ -203,17 +219,21 @@ html {
width: auto;
z-index: 9999;
}
.cesium-geocoder-searchButton {
background-color: #3f4854;
background-color: rgba(23, 49, 71, 0.8);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854;
background-color: rgba(23, 49, 71, 0.8);
}
/**cesium info信息框*/
......@@ -221,8 +241,9 @@ html {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
.cesium-infoBox-title {
background-color: #3f4854;
background-color: rgba(23, 49, 71, 0.8);
}
/**cesium 任务栏的FPS信息*/
......@@ -231,15 +252,70 @@ html {
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium tileset调试信息面板*/
.cesium-viewer-cesiumInspectorContainer{
.cesium-viewer-cesiumInspectorContainer {
top: 10px;
left: 10px;
right: auto;
background-color: #3f4854;
}
.cesium-cesiumInspector{
background-color: rgba(23, 49, 71, 0.8);
}
/**覆盖mars3d内部控件的颜色等样式*/
.mars3d-compass .mars3d-compass-outer {
fill: rgba(23, 49, 71, 0.8);
}
.mars3d-contextmenu-ul,
.mars3d-sub-menu {
background-color: rgba(23, 49, 71, 0.8);
}
.mars3d-contextmenu-ul > li > a:hover,
.mars3d-sub-menu > li > a:hover,
.mars3d-contextmenu-ul > li > a:focus,
.mars3d-sub-menu > li > a:focus,
.mars3d-contextmenu-ul > li > .active,
.mars3d-sub-menu > li > .active {
background-color: #3ea6ff;
}
.mars3d-contextmenu-ul > .active > a,
.mars3d-sub-menu > .active > a,
.mars3d-contextmenu-ul > .active > a:hover,
.mars3d-sub-menu > .active > a:hover,
.mars3d-contextmenu-ul > .active > a:focus,
.mars3d-sub-menu > .active > a:focus {
background-color: #3ea6ff;
}
/* Popup样式*/
.mars3d-popup-color {
color: #ffffff;
}
.mars3d-popup-background {
background: rgba(23, 49, 71, 0.8);
}
.mars3d-template-content label {
padding-right: 6px;
}
.mars3d-template-titile {
border-bottom: 1px solid #3ea6ff;
}
.mars3d-template-titile a {
font-size: 16px;
}
.mars3d-popup-btn-custom {
padding: 3px 10px;
border: 1px solid #209ffd;
background: #209ffd1c;
}
.mars3d-divGraphic:hover {
z-index: 999 !important;
}
public/temp/template.html
......@@ -9,8 +9,8 @@
<link href="/lib/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" crossorigin="anonymous" >
<!-- resource-output -->
<link rel="stylesheet" href="temp/styles/style.css" />
<script src="temp/scripts/common.js"></script>
<link rel="stylesheet" href="temp/css/style.css" />
<script src="temp/js/common.js"></script>
</head>
<body>
......
src/assets/style/index.less
......@@ -30,7 +30,7 @@ html {
font-size: @font-size-base;
line-height: 1 !important;
overflow: hidden;
background-color: @mars-basecolor;
background-color: @mars-base-color;
}
*,
*::before,
......
src/components/MarsEditor/MarsExampleList.tsx
// @ts-nocheck
import { useState, useEffect, useCallback, useMemo } from "react"
import { Agreement, Close, Help, Right, Search } from "@icon-park/react"
import { MarsIcon } from "@mars/components/MarsUI"
import { downloadFile } from "@mars/utils/file-util"
import _ from "lodash"
import reactIcon from "./reactIcon.svg"
......@@ -154,7 +154,7 @@ function MarsExampleList({ exampleList, jump, packageName, totalCount }) {
<p className="name">
{item.name} ({item.count})
</p>
<Right size="24" fill="#fff"></Right>
<MarsIcon icon="right" size="24" fill="#fff"></MarsIcon>
</div>
<div className="sidebar-2">
{item.children.map((item, index) => (
......@@ -186,22 +186,22 @@ function MarsExampleList({ exampleList, jump, packageName, totalCount }) {
<div className="search-l">
<input value={inputValue} onChange={(e) => searchText(e)} className="search-i" color="#fff" placeholder="请输入示例名称筛选..." />
<div className="ss-pic">
<Search size="24" fill="#fff" />
<MarsIcon icon="search" size="24" fill="#fff"></MarsIcon>
</div>
<div className="clear-value" style={{ display: inputValue ? "block" : "none" }} onClick={() => setInputValue("")}>
<Close size="18" />
<MarsIcon icon="close" size="24"></MarsIcon>
</div>
</div>
<div className="search-r">
<Help className="icon" size="20" fill="#bbbbbb" />
<MarsIcon className="help" icon="search" size="20" fill="#bbbbbb"></MarsIcon>
<p className="look">查看说明</p>
<div className="sanjiao"></div>
<div className="sanjiao-1"></div>
<div className="explain">
<div className="explain-wrap">
<div className="sm-pic">
<Agreement size="24" fill="#008aff" />
<MarsIcon icon="agreement" size="24" fill="#008aff"></MarsIcon>
</div>
<div className="sm">说明</div>
<div className="line1">
......@@ -264,7 +264,7 @@ function MarsExampleList({ exampleList, jump, packageName, totalCount }) {
<h3>
{item1.name} ({item1.children.length})
<div className="question" v-if="item1.details">
<Help className="icon" size="20" fill="#bbbbbb" />
<MarsIcon className="icon" icon="help" size="20" fill="#bbbbbb"></MarsIcon>
<div className="sanjiao1"></div>
<div className="sanjiao2"></div>
<div className="tan1">
......@@ -276,23 +276,26 @@ function MarsExampleList({ exampleList, jump, packageName, totalCount }) {
</div>
</h3>
<ul>
{item1.children.map((item2, index) => (
<li key={item2.id} onClick={() => jump && jump(item2)}>
{/* <span title="这是最近新加的功能">新</span> */}
<div className="pic">
<img src={item2.thumbnail} alt="" />
</div>
<p>
{item2.name}
{item2.hasPannel === true && (
<span className="iconPic">
<img src={reactIcon} alt="react"></img>
</span>
)}
{item2.plugins && <span>[{item2.plugins}插件]</span>}
</p>
</li>
))}
{item1.children.map(
(item2, index) =>
item2.hidden !== true && (
<li key={item2.id} onClick={() => jump && jump(item2)}>
{/* <span title="这是最近新加的功能">新</span> */}
<div className="pic">
<img src={item2.thumbnail} alt="" />
</div>
<p>
{item2.name}
{item2.hasPannel === true && (
<span className="iconPic">
<img src={reactIcon} alt="react"></img>
</span>
)}
{item2.plugins && <span>[{item2.plugins}插件]</span>}
</p>
</li>
)
)}
</ul>
</div>
))}
......
src/components/MarsSample/DataLoad.tsx
......@@ -4,16 +4,24 @@ import { useState } from "react"
const mapWork = window.mapWork
export const DataLoad = (props) => {
const [num, setNum] = useState(props.num || 1)
return (
<Space>
<span className="mars-pannel-item-label">数据加载:</span>
<MarsInputNumber {...{ min: props.min || 0, max: props.max || 100, step: props.step || 0.1, defaultValue: props.num || 1 }} onChange={(data: number) => setNum(data)
}></MarsInputNumber>{props.unit || "条"}
<MarsButton onClick={() => mapWork.addDemoGraphic(num)}>生成</MarsButton>
<MarsButton onClick={() => mapWork.graphicLayer.clear()}>清除</MarsButton>
</Space>
)
export const DataLoad = (props) => {
const [num, setNum] = useState(props.num || 1)
return (
<Space>
<span className="mars-pannel-item-label">数据加载:</span>
<MarsInputNumber
{...{
min: props.min || 0,
max: props.max || 100,
step: props.step || 0.1,
defaultValue: props.num || 1,
title: "请输入不大于" + (props.max || 100) + "的值"
}}
onChange={(data: number) => setNum(data)}
></MarsInputNumber>
{props.unit || "条"}
<MarsButton onClick={() => mapWork.addDemoGraphic(num)}>生成</MarsButton>
<MarsButton onClick={() => mapWork.graphicLayer.clear()}>清除</MarsButton>
</Space>
)
}
src/components/MarsSample/RoamLine/index.less
.ant-col {
color: @mars-basecolor;
color: @mars-base-color;
}
.ant-progress-text {
color: @mars-basecolor;
color: @mars-base-color;
}
src/components/MarsUI/MarsAlert/index.less
// alert
.mars-global-alert {
* {
color: @mars-basecolor;
}
.mars-global-alert.ant-modal {
.ant-modal-confirm-title {
margin: 0;
font-size: 16px;
color: @mars-basecolor !important;
.mars-msg-title();
}
.ant-modal-confirm-content {
font-size: 14px;
color: @mars-basecolor !important;
font-size: 16px;
padding: 10px 14px;
margin: 0;
color: @mars-base-border;
user-select: text;
}
.ant-modal-confirm-btns {
margin-top: 20px;
margin: 0;
width: 100%;
text-align: center;
.ant-btn {
background: @background-base;
background-color: @background-base;
background: @mars-primary-color;
background-color: @mars-primary-color;
color: @mars-base-color;
border: none;
}
}
.ant-modal-content {
background: @background-base;
border: 1px solid @border-color-base;
background-color: transparent;
padding-bottom: 10px;
.mars-msg-bg();
}
.ant-modal-body {
padding: 15px;
padding: 0;
}
.anticon {
* {
......
src/components/MarsUI/MarsAlert/index.tsx
......@@ -18,6 +18,7 @@ export const $alert = (content: any, title = "提示", type: keyof typeof Modal
content,
okType: "default",
okText: "确定",
icon: null,
className: "mars-global-alert",
onOk() {
resolve(true)
......
src/components/MarsUI/MarsButton/index.less
// 按钮
.mars-button {
.mars-button.ant-btn {
font-size: 14px;
background: @button-background-base;
border-color: #20a0ff;
background: @mars-primary-color-half;
border: none;
padding-left: 10px;
padding-right: 10px;
color: @button-color-base;
&.ant-btn-primary {
background: @primary-color;
border: none;
}
&.ant-btn-link {
border: none !important;
background: none !important;
padding: 0;
height: initial;
}
.mars-icon {
margin-right: 5px;
color: @mars-base-color;
:deep(.mars-icon) {
font-size: 18px !important;
line-height: 18px;
vertical-align: middle !important;
padding-left: 2px;
padding-right: 2px;
}
}
.mars-button:not([disabled]) {
&:hover {
color: @button-color-active;
color: @mars-base-color;
border-color: #89bceb;
background: @button-background-active;
background: @mars-hover-btn-bg;
}
&:focus {
color: @button-color-active;
color: @mars-base-color;
border-color: #89bceb;
background: @button-background-active;
background: @mars-click-btn-bg;
}
}
.mars-btn:disabled {
color: @button-color-base;
border-color: #89bceb;
background: rgba(32, 160, 255, 0.2);
color: @mars-base-color;
background: @mars-disable-btn-bg;
&:hover {
background: rgba(32, 160, 255, 0.2);
color: @mars-disable-color;
background: @mars-disable-btn-bg;
color: @mars-base-color;
}
}
......
src/components/MarsUI/MarsCheckBox/index.less
.mars-checkbox {
color: @mars-basecolor;
.mars-checkbox, .mars-main-view .ant-checkbox-wrapper {
color: @mars-base-color;
.ant-checkbox-inner {
background-color: #fff;
border-color: @border-color-ordinary;
background-color: @mars-bg-base;
border-color: @mars-base-border-color;
}
.ant-checkbox-checked {
background: @primary-color;
background: @mars-primary-color;
.ant-checkbox-inner {
background-color: @primary-color;
border-color: @primary-color;
background-color: @mars-primary-color;
border-color: @mars-primary-color;
}
}
}
......
src/components/MarsUI/MarsCollapse/index.less
// collapse 折叠面板相关样式
.mars-collapse {
.mars-collapse.ant-collapse {
// collapse 折叠面板相关样式
&,
.ant-collapse-item,
.ant-collapse-content {
background: none !important;
border: none;
}
.ant-collapse-content-box {
padding: 5px;
padding: 5px 5px 10px 5px;
}
.ant-collapse-header {
background-color: @collapse-header-color !important;
padding: 5px 10px !important;
border-bottom: 1px solid @mars-basecolor-reverse;
background-image: url(../assets/images/tab-title.png);
margin-bottom: 10px;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 16px;
padding: 5px 15px !important;
color: #fff !important;
.i-icon {
font-size: 16px !important;
line-height: 16px;
vertical-align: middle !important;
}
}
.ant-collapse-content {
color: @mars-basecolor !important;
color: @mars-base-color !important;
}
.ant-collapse-extra {
.i-icon {
.mars-icon {
font-size: 16px;
line-height: 16px;
vertical-align: middle;
......
src/components/MarsUI/MarsDatePicker/index.less
.mars-date-picker {
color: @mars-basecolor;
color: @mars-base-color;
border-color: @border-color-ordinary !important;
background-color: @form-input-background !important;
:deep(.ant-picker-input > input) {
color: @mars-basecolor !important;
color: @mars-base-color !important;
}
:deep(.ant-picker-clear) {
......@@ -12,6 +12,6 @@
}
* {
color: @mars-basecolor !important;
color: @mars-base-color !important;
}
}
\ No newline at end of file
src/components/MarsUI/MarsDialog/index.less
......@@ -2,24 +2,28 @@
position: absolute;
padding: 0;
border-radius: 4px;
border: 1px solid #4db3ff70;
z-index: 100;
background: linear-gradient(to left, #4db3ff, #4db3ff) left top no-repeat, linear-gradient(to bottom, #4db3ff, #4db3ff) left top no-repeat,
linear-gradient(to left, #4db3ff, #4db3ff) right top no-repeat, linear-gradient(to bottom, #4db3ff, #4db3ff) right top no-repeat,
linear-gradient(to left, #4db3ff, #4db3ff) left bottom no-repeat, linear-gradient(to bottom, #4db3ff, #4db3ff) left bottom no-repeat,
linear-gradient(to left, #4db3ff, #4db3ff) right bottom no-repeat, linear-gradient(to left, #4db3ff, #4db3ff) right bottom no-repeat;
background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
background-color: rgba(20, 20, 20, 0.5);
border-bottom: 1px solid #008aff70;
border-left: 1px solid #008aff70;
border-right: 1px solid #008aff70;
z-index: 100;
background: linear-gradient(to left, @mars-content-color, @mars-content-color) left bottom no-repeat,
linear-gradient(to bottom, @mars-content-color, @mars-content-color) left bottom no-repeat,
linear-gradient(to left, @mars-content-color, @mars-content-color) right bottom no-repeat,
linear-gradient(to left, @mars-content-color, @mars-content-color) right bottom no-repeat;
background-size: 1px 10px, 10px 1px, 1px 10px, 10px 1px;
background-color: @mars-bg-base;
.mars-dialog__header {
height: 40px;
line-height: 40px;
height: 44px;
line-height: 44px;
cursor: move;
overflow: hidden;
padding: 0 5px 0px 15px;
border-bottom: 1px solid @border-color-ordinary;
background-color: @collapse-header-color;
color: @mars-basecolor;
background-image: url(../assets/images/dialog-title.png);
background-size: 100% 100%;
background-repeat: no-repeat;
color: @mars-base-color;
.icon {
vertical-align: middle;
margin-right: 5px;
......
src/components/MarsUI/MarsForm/index.less
.mars-form-item {
margin-bottom: 10px !important;
color: @mars-basecolor;
color: @mars-base-color;
.ant-form-item-extra {
color: @mars-basecolor;
color: @mars-base-color;
}
.ant-form-item-label > label {
color: @mars-basecolor;
color: @mars-base-color;
}
.ant-form-item-tooltip {
color: @mars-basecolor !important;
color: @mars-base-color !important;
}
}
src/components/MarsUI/MarsForm/index.tsx
......@@ -4,6 +4,6 @@ import "./index.less"
export const MarsForm = Form
export const MarsFormItem = (props: FormItemProps) => {
return <Form.Item className="mars-form-item" {...props}></Form.Item>
export const MarsFormItem = ({ className, ...props }: FormItemProps & { className?: string }) => {
return <Form.Item className={["mars-form-item", className].join(" ")} {...props}></Form.Item>
}
src/components/MarsUI/MarsIcon/index.tsx
import { useMemo } from "react"
import { useEffect, useMemo } from "react"
import _ from "lodash"
import Icon from "@icon-park/react/es/all"
import type { IconType } from "@icon-park/react/es/all"
import * as svgModule from "@icon-park/svg"
import "./index.less"
interface MarsIconProps extends Record<string, any> {
icon: IconType | string
icon: string
color?: string
width?: string | number
}
console.log(svgModule)
export const MarsIcon = ({ icon, color = "#fff", width = "14", ...props }: MarsIconProps) => {
export const MarsIcon = ({ icon, color, fill, width = "14", theme = "outline", size, ...props }: MarsIconProps) => {
const iconName = useMemo(() => _.upperFirst(_.camelCase(icon)), [icon])
return <Icon className="mars-icon" type={iconName} theme="outline" fill={color} size={width} {...props} />
const svgComponent = useMemo(
() =>
svgModule[iconName]({
theme,
fill: fill || color,
size: size || width,
...props
}),
[iconName]
)
return <span className="mars-icon" dangerouslySetInnerHTML={{ __html: svgComponent }}></span>
}
src/components/MarsUI/MarsInput/index.less
......@@ -2,24 +2,24 @@
.mars-textarea,
.mars-input-password,
.mars-input-search {
color: @mars-basecolor;
background-color: @form-input-background !important;
border-color: @border-color-ordinary;
font-size: 12px !important;
.ant-input {
background-color: @form-input-background !important;
border-color: @border-color-ordinary;
color: @mars-basecolor;
&.ant-input,&.ant-input-affix-wrapper {
color: @mars-base-color;
background-color: transparent !important;
font-size: 12px !important;
.ant-input-suffix .anticon {
color: @mars-base-color;
}
}
.ant-input-suffix .anticon {
color: @mars-basecolor;
.ant-input {
background-color: transparent !important;
border-color: @mars-base-border-color;
color: @mars-base-color;
}
}
.mars-input[disabled] {
color: @mars-disable-color;
.mars-input.ant-input[disabled] {
color: @mars-disable-btn-bg;
}
.mars-input-color{
.mars-input-color {
background-color: @form-input-background;
padding: 0;
width: 80px;
......
src/components/MarsUI/MarsInputNumber/index.less
.mars-input-number {
color: @mars-basecolor;
background-color: @form-input-background !important;
border-color: @border-color-ordinary;
.ant-input-number-handler {
.anticon {
color: @mars-basecolor;
}
}
.mars-input-number.ant-input-number {
color: @mars-base-color;
background-color: transparent !important;
border-color: @mars-base-border-color;
width: 100%;
.ant-input-number-handler-wrap {
background: none;
.anticon {
color: @mars-base-color;
}
}
}
src/components/MarsUI/MarsMessage/index.less
/*提示*/
.mars-message {
.mars-message.ant-message-notice {
.ant-message-notice-content {
background: @background-base !important;
color: @mars-basecolor;
border: 1px solid @border-color-base;
}
.ant-message-info .anticon {
* {
color: #4db3ff !important;
background: none;
color: @mars-base-color;
padding: 15px 20px;
.mars-msg-bg();
.ant-message-info span {
font-size: 16px;
}
.mars-icon {
margin-right: 10px;
}
}
}
src/components/MarsUI/MarsNotify/index.less
// 功能提示和已知问题提示框
.mars-notify-message {
* {
color: @mars-basecolor;
}
.mars-notify-message.ant-notification-notice {
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;
}
padding: 0;
background: none;
.mars-msg-bg();
.ant-notification-notice-message {
height: 30px;
margin-left: 30px;
color: @mars-basecolor;
font-size: 16px;
border-color: @border-color-base;
margin: 0;
.mars-msg-title();
}
.ant-notification-notice-description {
color: @mars-basecolor;
margin-left: 5px;
line-height: 21px;
text-indent: 25px;
color: @mars-base-color;
margin: 0;
padding: 20px;
user-select: text;
}
.ant-notification-notice-close {
color: @mars-basecolor;
color: @mars-primary-color;
top: 10px;
right: 10px;
}
.anticon {
* {
color: @primary-color !important;
font-size: 20px;
}
}
}
src/components/MarsUI/MarsNotify/index.tsx
......@@ -14,13 +14,13 @@ export const $notify = (message: any, description: any, options: any = {}, type:
notification.config({
placement: "bottomRight",
right: 20,
duration: undefined,
...options
})
const func = notification[type] as (a: any) => any
func({
message,
description,
icon: <></>,
className: "mars-notify-message",
onClose() {
resolve(true)
......
src/components/MarsUI/MarsPannel/index.less
......@@ -2,17 +2,11 @@
position: absolute;
padding: 10px 10px;
border-radius: 4px;
overflow-y: auto;
z-index: 1000;
border: 1px solid #4db3ff70;
background: linear-gradient(to left, #4db3ff, #4db3ff) left top no-repeat, linear-gradient(to bottom, #4db3ff, #4db3ff) left top no-repeat,
linear-gradient(to left, #4db3ff, #4db3ff) right top no-repeat, linear-gradient(to bottom, #4db3ff, #4db3ff) right top no-repeat,
linear-gradient(to left, #4db3ff, #4db3ff) left bottom no-repeat, linear-gradient(to bottom, #4db3ff, #4db3ff) left bottom no-repeat,
linear-gradient(to left, #4db3ff, #4db3ff) right bottom no-repeat, linear-gradient(to left, #4db3ff, #4db3ff) right bottom no-repeat;
background-size: 1px 20px, 20px 1px, 1px 20px, 20px 1px;
// background-color: @background-base;
background-color: #14141480;
background-image: url(../assets/images/pannel-bg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
.pannel-content {
overflow-y: auto;
......
src/components/MarsUI/MarsRadio/index.less
.mars-radio {
color: @mars-basecolor;
color: @mars-base-color;
.ant-radio-inner {
background-color: #fff;
border-color: @border-color-ordinary;
background-color: @mars-bg-base;
border-color: @mars-base-border-color;
box-shadow: none !important;
outline: none !important;
}
.ant-radio-checked {
.ant-radio-inner {
border-color: @primary-color;
border-color: @mars-primary-color;
}
}
.ant-radio-input {
box-shadow: none !important;
outline: none !important;
......
src/components/MarsUI/MarsSelect/index.less
.mars-select {
color: @mars-basecolor;
background-color: @form-input-background !important;
color: @mars-base-color;
background-color: transparent !important;
background: none;
.ant-select-arrow {
color: @mars-basecolor;
color: @mars-base-color;
}
.ant-select-selector {
border-color: @border-color-ordinary !important;
border-color: @mars-base-border-color !important;
background: none;
background-color: transparent !important;
&:hover,
&:focus {
border-color: #4db3ff !important;
}
}
& .ant-select:not(.ant-select-disabled) {
......@@ -21,3 +25,19 @@
}
}
}
.mars-select-dropdown {
padding: 0 !important;
.mars-drop-bg();
.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
background: @mars-list-active;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
font-weight: 700;
background: @mars-list-active;
}
.ant-select-item {
transition: none;
color: @mars-base-color !important;
text-align: center;
}
}
src/components/MarsUI/MarsSelect/index.tsx
......@@ -5,7 +5,7 @@ import type { BaseSelectRef } from "rc-select"
import "./index.less"
export const MarsSelect = forwardRef<BaseSelectRef, SelectProps>((props, ref) => {
return <Select className="mars-select" ref={ref} {...props}></Select>
return <Select className="mars-select" dropdownClassName="mars-select-dropdown" ref={ref} {...props}></Select>
})
export const MarsOption = Select.Option
......
src/components/MarsUI/MarsSlider/index.less
/*滑动条 输入面板内时修改高度等*/
.mars-slider {
margin: 0px 10px 6px 6px;
margin: 0px 6px 6px 6px;
.ant-slider-mark-text {
color: @mars-basecolor !important;
color: @mars-base-color !important;
top: 5px;
}
/*滑动条 未选择、已选择部分 高度*/
/*滑动条 未选择部分*/
.ant-slider-rail {
height: 10px;
border-radius: 5px;
background-color: @mars-ordinary-color !important;
background-color: #284660 !important;
}
.ant-slider-track {
height: 10px;
border-radius: 5px;
background-color: @primary-color !important;
background-color: @mars-primary-color !important;
}
/*滑动条 刻度点*/
.ant-slider-dot {
border-color: @border-color-base;
background-color: #16212c7d;
top: -1px;
height: 12px;
width: 12px;
top: 12px;
height: 6px;
width: 1px;
border-radius: 0 0;
border: none;
background-color: #fff;
}
.ant-slider-dot:first-child {
margin-left: -1px;
}
.ant-slider-dot:last-child {
right: -1px;
left: auto !important;
margin-left: 2px;
}
/*滑动条 拖拽点*/
......@@ -37,10 +34,11 @@
position: absolute;
width: 16px;
height: 16px;
margin-top: -4px;
margin-top: -3px;
border: 4px solid @mars-primary-color;
}
.ant-slider-dot-active,
.ant-slider-handle {
border-color: @primary-color !important;
border-color: @mars-primary-color !important;
}
}
src/components/MarsUI/MarsSwitch/index.less
// 开关
.mars-switch {
background-color: hsla(0, 0%, 100%, 0.3);
background-color: @mars-disable-btn-bg;
&.ant-switch-checked {
background-color: #4db3ff !important;
background-color: @mars-primary-color !important;
}
}
src/components/MarsUI/MarsSwitch/index.tsx
......@@ -7,9 +7,9 @@ interface MarsSwitchProps extends SwitchProps {
value?: boolean
}
export const MarsSwitch = forwardRef<HTMLElement, MarsSwitchProps>(({ value, ...props }, ref) => {
export const MarsSwitch = forwardRef<HTMLElement, MarsSwitchProps & { className?: string }>(({ value, className, ...props }, ref) => {
if (typeof value === "boolean") {
props.checked = value
}
return <Switch className="mars-switch" ref={ref} {...props}></Switch>
return <Switch className={["mars-switch", className].join(" ")} ref={ref} {...props}></Switch>
})
src/components/MarsUI/MarsTable/index.less
// 表格
.ant-table,
.ant-table-thead > tr > th {
color: @mars-basecolor;
background: none !important;
}
.ant-table .ant-table-thead {
background-color: rgba(32, 160, 255, 0.2);
}
.ant-table-tbody > tr.ant-table-placeholder > td {
background: #141414;
}
.ant-table-row:hover > td,
.ant-table-row-selected > td {
background-color: @mars-ordinary-color !important;
}
.ant-table-container,
.ant-table-cell {
border-color: #cde1de !important;
background: transparent !important;
}
.ant-table-container {
border: 1px solid #cde1de !important;
}
.ant-table-cell:last-child {
border-right: 0 !important;
}
.ant-table-placeholder > td {
background: rgba(32, 42, 68, 0.3) !important;
}
.ant-table-row:nth-last-child(1) .ant-table-cell {
border-bottom: none;
}
// 分页
.ant-pagination {
* {
color: @mars-basecolor !important;
}
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
background: none;
background-color: transparent !important;
}
.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
background: none;
background-color: transparent !important;
.mars-table {
.ant-table,
.ant-table-thead > tr > th {
color: @mars-base-color;
background: none !important;
}
.ant-pagination-simple-pager {
input {
background: none;
background-color: transparent !important;
}
.ant-table-row:nth-of-type(even) {
background-color: @mars-bg-base;
}
}
.ant-select-dropdown {
background-color: @border-color-ordinary !important;
.ant-table .ant-table-thead {
background-color: @mars-select-bg;
}
.ant-select-item {
transition: none;
.ant-table-tbody > tr.ant-table-placeholder > td {
background: #141414;
}
&:hover,
&:focus {
background-color: @input-background-active;
}
.ant-table-row:hover > td,
.ant-table-row-selected > td {
background-color: @mars-select-bg !important;
}
.ant-select-item-option-active {
background-color: @primary-color !important;
.ant-table-cell {
border: none !important;
background: transparent !important;
}
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
background-color: transparent !important;
}
.ant-table-container {
border: 1px solid @mars-primary-color !important;
background: transparent !important;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: @primary-color !important;
}
.ant-table-placeholder > td {
background: @mars-bg-base !important;
}
//table表格滚动条
.ant-table-body {
&::-webkit-scrollbar {
//整体样式
height: 0;
width: 0;
.ant-table-row:nth-last-child(1) .ant-table-cell {
border-bottom: none;
}
}
src/components/MarsUI/MarsTable/index.tsx
......@@ -3,10 +3,10 @@ import { forwardRef } from "react"
import type { TableProps } from "antd/lib/table"
import zhCN from "antd/es/locale/zh_CN"
import "./index.less"
export const MarsTable = forwardRef<HTMLDivElement, TableProps<any>>((props, ref) => {
export const MarsTable = forwardRef<HTMLDivElement & { className?: string }, TableProps<any>>(({ className, ...props }, ref) => {
return (
<ConfigProvider locale={zhCN}>
<Table className="mars-table" {...props} ref={ref}></Table>
<Table className={["mars-table", className].join(" ")} {...props} ref={ref}></Table>
</ConfigProvider>
)
})
src/components/MarsUI/MarsTabs/index.less
......@@ -7,7 +7,7 @@
}
}
.ant-tabs-tab {
color: @mars-basecolor !important;
color: @mars-base-color !important;
}
.ant-tabs-nav-wrap {
line-height: 1;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论