feat(SAT): add SAT page and viewer component; update dependencies

2025-02-07 18:09:32 +08:00
parent 1d5a387ae0
commit d4b8585143
7 changed files with 1100 additions and 1078 deletions
--- a/.npmrc
+++ b/.npmrc
@ -7,7 +7,6 @@ registry=https://nexus.oo1.dev/repository/npm/
 # https://pnpm.io/zh/npmrc#node-mirrorltreleasedir
 use-node-version=22.13.1
 node-mirror:release=https://npmmirror.com/mirrors/node/ # pnpm config set node-mirror:release=https://npmmirror.com/mirrors/node/
-node-mirror:release=https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/
 node-mirror:rc=https://npmmirror.com/mirrors/node-rc/
 node-mirror:nightly=https://npmmirror.com/mirrors/node-nightly/

--- a/package.json
+++ b/package.json
@ -40,7 +40,7 @@
    "@alova/adapter-axios": "^2.0.12",
    "@formkit/auto-animate": "^0.8.2",
    "@intlify/unplugin-vue-i18n": "^6.0.3",
-    "@pinia/colada": "^0.13.3",
+    "@pinia/colada": "^0.13.5",
    "@primevue/themes": "^4.2.5",
    "@unhead/vue": "^1.11.18",
    "@vant/use": "^1.6.0",
@ -53,34 +53,35 @@
    "jsencrypt": "^3.3.2",
    "mitt": "^3.0.1",
    "nprogress": "^0.2.0",
+    "orbpro": "^1.123.7",
    "page-stack-vue3": "^2.5.6",
    "pinia": "^2.3.1",
    "pinia-plugin-persistedstate": "^4.2.0",
    "primeicons": "^7.0.0",
-    "primelocale": "^1.4.0",
-    "primevue": "4.2.6-fix.202501210331",
+    "primelocale": "^1.6.0",
+    "primevue": "^4.2.5",
    "radash": "^12.1.0",
-    "taze": "^18.3.0",
+    "taze": "^18.4.0",
    "tdesign-icons-vue-next": "^0.3.4",
    "ts-enum-util": "^4.1.0",
    "utils4u": "^3.3.0",
    "vant": "^4.9.16",
    "vite-plugin-webfont-dl": "^3.10.4",
    "vue": "^3.5.13",
-    "vue-i18n": "11.0.1",
+    "vue-i18n": "^11.1.0",
    "vue-page-stack": "^3.2.0",
    "vue-router": "^4.5.0"
  },
  "devDependencies": {
-    "@eslint/compat": "^1.2.5",
+    "@eslint/compat": "^1.2.6",
    "@faker-js/faker": "^9.4.0",
-    "@iconify-json/carbon": "^1.2.5",
-    "@iconify/utils": "^2.2.1",
-    "@playwright/test": "^1.49.1",
+    "@iconify-json/carbon": "^1.2.6",
+    "@iconify/utils": "^2.3.0",
+    "@playwright/test": "^1.50.1",
    "@primevue/auto-import-resolver": "^4.2.5",
    "@tsconfig/node22": "^22.0.0",
    "@types/mockjs": "^1.0.10",
-    "@types/node": "^22.10.7",
+    "@types/node": "^22.13.1",
    "@types/nprogress": "^0.2.3",
    "@unocss/preset-rem-to-px": "^65.4.3",
    "@vant/auto-import-resolver": "^1.2.1",
@ -94,33 +95,33 @@
    "cz-conventional-changelog": "^3.3.0",
    "depcheck": "^1.4.7",
    "eruda": "^3.4.1",
-    "eslint": "^9.18.0",
-    "eslint-plugin-oxlint": "^0.15.7",
-    "eslint-plugin-perfectionist": "^4.7.0",
+    "eslint": "^9.19.0",
+    "eslint-plugin-oxlint": "^0.15.10",
+    "eslint-plugin-perfectionist": "^4.8.0",
    "eslint-plugin-vue": "^9.32.0",
    "husky": "^9.1.7",
    "less": "^4.2.2",
-    "lint-staged": "^15.4.1",
+    "lint-staged": "^15.4.3",
    "mockjs": "^1.1.0",
    "npm-run-all2": "^7.0.2",
-    "oxlint": "^0.15.7",
+    "oxlint": "^0.15.10",
    "prettier": "^3.4.2",
    "sass-embedded": "^1.83.4",
    "surge": "^0.24.6",
-    "terser": "^5.37.0",
+    "terser": "^5.38.1",
    "typescript": "~5.7.3",
    "unocss": "^65.4.3",
    "unplugin-auto-import": "^19.0.0",
    "unplugin-icons": "^22.0.0",
    "unplugin-vue-components": "^28.0.0",
-    "unplugin-vue-macros": "^2.13.11",
-    "unplugin-vue-markdown": "^28.1.0",
-    "unplugin-vue-router": "^0.11.1",
-    "vercel": "^39.3.0",
-    "vite": "^6.0.11",
+    "unplugin-vue-macros": "^2.14.2",
+    "unplugin-vue-markdown": "^28.3.0",
+    "unplugin-vue-router": "^0.11.2",
+    "vercel": "^39.4.2",
+    "vite": "^6.1.0",
    "vite-plugin-cdn-import": "^1.0.1",
    "vite-plugin-fake-server": "^2.2.0",
-    "vite-plugin-vue-devtools": "^7.7.0",
+    "vite-plugin-vue-devtools": "^7.7.1",
    "vite-plugin-vue-layouts": "^0.11.0",
    "vite-plugin-vue-meta-layouts": "^0.5.1",
    "vue-tsc": "^2.2.0"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/pages/SAT/Initialization
+++ b/src/pages/SAT/Initialization
@ -0,0 +1,57 @@
+/**
+ * Initialization options for the Viewer constructor
+ * @property [animation = true] - If set to false, the Animation widget will not be created.
+ * @property [baseLayerPicker = true] - If set to false, the BaseLayerPicker widget will not be created.
+ * @property [fullscreenButton = true] - If set to false, the FullscreenButton widget will not be created.
+ * @property [vrButton = false] - If set to true, the VRButton widget will be created.
+ * @property [geocoder = IonGeocodeProviderType.DEFAULT] - The geocoding service or services to use when searching with the Geocoder widget. If set to false, the Geocoder widget will not be created.
+ * @property [homeButton = true] - If set to false, the HomeButton widget will not be created.
+ * @property [infoBox = true] - If set to false, the InfoBox widget will not be created.
+ * @property [sceneModePicker = true] - If set to false, the SceneModePicker widget will not be created.
+ * @property [selectionIndicator = true] - If set to false, the SelectionIndicator widget will not be created.
+ * @property [timeline = true] - If set to false, the Timeline widget will not be created.
+ * @property [navigationHelpButton = true] - If set to false, the navigation help button will not be created.
+ * @property [navigationInstructionsInitiallyVisible = true] - True if the navigation instructions should initially be visible, or false if the should not be shown until the user explicitly clicks the button.
+ * @property [scene3DOnly = false] - When <code>true</code>, each geometry instance will only be rendered in 3D to save GPU memory.
+ * @property [shouldAnimate = false] - <code>true</code> if the clock should attempt to advance simulation time by default, <code>false</code> otherwise.  This option takes precedence over setting {@link Viewer#clockViewModel}.
+ * @property [clockViewModel = new ClockViewModel(clock)] - The clock view model to use to control current time.
+ * @property [selectedImageryProviderViewModel] - The view model for the current base imagery layer, if not supplied the first available base layer is used.  This value is only valid if `baseLayerPicker` is set to true.
+ * @property [imageryProviderViewModels = createDefaultImageryProviderViewModels()] - The array of ProviderViewModels to be selectable from the BaseLayerPicker.  This value is only valid if `baseLayerPicker` is set to true.
+ * @property [selectedTerrainProviderViewModel] - The view model for the current base terrain layer, if not supplied the first available base layer is used.  This value is only valid if `baseLayerPicker` is set to true.
+ * @property [terrainProviderViewModels = createDefaultTerrainProviderViewModels()] - The array of ProviderViewModels to be selectable from the BaseLayerPicker.  This value is only valid if `baseLayerPicker` is set to true.
+ * @property [baseLayer = ImageryLayer.fromWorldImagery()] - The bottommost imagery layer applied to the globe. If set to <code>false</code>, no imagery provider will be added. This value is only valid if `baseLayerPicker` is set to false. Cannot be used when `globe` is set to false.
+ * @property [ellipsoid = Ellipsoid.default] - The default ellipsoid.
+ * @property [terrainProvider = new EllipsoidTerrainProvider()] - The terrain provider to use
+ * @property [terrain] - A terrain object which handles asynchronous terrain provider. Can only specify if options.terrainProvider is undefined.
+ * @property [skyBox] - The skybox used to render the stars. When <code>undefined</code> and the WGS84 ellipsoid used, the default stars are used. If set to <code>false</code>, no skyBox, Sun, or Moon will be added.
+ * @property [skyAtmosphere] - Blue sky, and the glow around the Earth's limb. Enabled when the WGS84 ellipsoid used. Set to <code>false</code> to turn it off.
+ * @property [fullscreenElement = document.body] - The element or id to be placed into fullscreen mode when the full screen button is pressed.
+ * @property [useDefaultRenderLoop = true] - True if this widget should control the render loop, false otherwise.
+ * @property [targetFrameRate] - The target frame rate when using the default render loop.
+ * @property [showRenderLoopErrors = true] - If true, this widget will automatically display an HTML panel to the user containing the error, if a render loop error occurs.
+ * @property [useBrowserRecommendedResolution = true] - If true, render at the browser's recommended resolution and ignore <code>window.devicePixelRatio</code>.
+ * @property [automaticallyTrackDataSourceClocks = true] - If true, this widget will automatically track the clock settings of newly added DataSources, updating if the DataSource's clock changes.  Set this to false if you want to configure the clock independently.
+ * @property [contextOptions] - Context and WebGL creation properties passed to {@link Scene}.
+ * @property [sceneMode = SceneMode.SCENE3D] - The initial scene mode.
+ * @property [mapProjection = new GeographicProjection(options.ellipsoid)] - The map projection to use in 2D and Columbus View modes.
+ * @property [globe = new Globe(options.ellipsoid)] - The globe to use in the scene.  If set to <code>false</code>, no globe will be added and the sky atmosphere will be hidden by default.
+ * @property [orderIndependentTranslucency = true] - If true and the configuration supports it, use order independent translucency.
+ * @property [creditContainer] - The DOM element or ID that will contain the {@link CreditDisplay}.  If not specified, the credits are added to the bottom of the widget itself.
+ * @property [creditViewport] - The DOM element or ID that will contain the credit pop up created by the {@link CreditDisplay}.  If not specified, it will appear over the widget itself.
+ * @property [dataSources = new DataSourceCollection()] - The collection of data sources visualized by the widget.  If this parameter is provided,
+ *                               the instance is assumed to be owned by the caller and will not be destroyed when the viewer is destroyed.
+ * @property [shadows = false] - Determines if shadows are cast by light sources.
+ * @property [terrainShadows = ShadowMode.RECEIVE_ONLY] - Determines if the terrain casts or receives shadows from light sources.
+ * @property [mapMode2D = MapMode2D.INFINITE_SCROLL] - Determines if the 2D map is rotatable or can be scrolled infinitely in the horizontal direction.
+ * @property [projectionPicker = false] - If set to true, the ProjectionPicker widget will be created.
+ * @property [blurActiveElementOnCanvasFocus = true] - If true, the active element will blur when the viewer's canvas is clicked. Setting this to false is useful for cases when the canvas is clicked only for retrieving position or an entity data without actually meaning to set the canvas to be the active element.
+ * @property [requestRenderMode = false] - If true, rendering a frame will only occur when needed as determined by changes within the scene. Enabling reduces the CPU/GPU usage of your application and uses less battery on mobile, but requires using {@link Scene#requestRender} to render a new frame explicitly in this mode. This will be necessary in many cases after making changes to the scene in other parts of the API. See {@link https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/|Improving Performance with Explicit Rendering}.
+ * @property [maximumRenderTimeChange = 0.0] - If requestRenderMode is true, this value defines the maximum change in simulation time allowed before a render is requested. See {@link https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/|Improving Performance with Explicit Rendering}.
+ * @property [depthPlaneEllipsoidOffset = 0.0] - Adjust the DepthPlane to address rendering artefacts below ellipsoid zero elevation.
+ * @property [msaaSamples = 1] - If provided, this value controls the rate of multisample antialiasing. Typical multisampling rates are 2, 4, and sometimes 8 samples per pixel. Higher sampling rates of MSAA may impact performance in exchange for improved visual quality. This value only applies to WebGL2 contexts that support multisample render targets.
+ * @property [animationContainer = false] - If provided, will include the animationContainer without the widget.
+ * @property [timelineContainer = false] - If provided, will include the timelineContainer without the widget.
+ * @property [bottomContainer] - The DOM element or ID that will contain the bottomContainer.  If not specified, the bottomContainer is added to the widget itself.
+ */
+
+export {};
--- a/src/pages/SAT/Viewer.vue
+++ b/src/pages/SAT/Viewer.vue
@ -0,0 +1,57 @@
+<script setup lang="ts">
+import 'orbpro/style/widgets.css';
+import {
+  Viewer,
+  GoogleMaps,
+  Math as CesiumMath,
+  Cartographic,
+  Cartesian3,
+  viewerReferenceFrameMixin,
+  TileMapServiceImageryProvider,
+  ImageryLayer,
+  // VERSION,
+  EmbeddedTileServiceImageryProvider,
+} from 'orbpro';
+
+// let viewer: Viewer;
+
+onMounted(() => {
+  new Viewer('cesiumContainer', {
+    // globe: false, // 地球
+    baseLayerPicker: true,
+    homeButton: true, // Home按钮
+    fullscreenButton: !true, // 全屏按钮
+    geocoder: true, // = IonGeocodeProviderType.DEFAULT] - 在使用Geocoder小部件进行搜索时使用的地理编码服务或服务。如果设置为false，则不会创建Geocoder小部件。
+    infoBox: true, // InfoBox小部件。
+    navigationHelpButton: !true, // 是否显示导航帮助按钮
+    projectionPicker: !true, // 投影选择器
+    sceneModePicker: true, // 是否显示场景模式选择器(2D/3D切换)
+    animation: !true, // 是否创建动画小部件
+    animationContainer: !true,
+    timeline: !true, // If set to false, the Timeline widget will not be created.
+    timelineContainer: !true,
+    selectionIndicator: true,
+    requestRenderMode: !true, // 如果为真，渲染帧将仅在场景内部发生变化时需要时发生。启用此功能可以减少应用程序的CPU/GPU使用率，并在移动设备上节省更多电量，但在此模式下需要使用{@link Scene#requestRender}显式渲染新帧。在API的其他部分对场景进行更改后，在许多情况下都需要这样做。请参阅{@link https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/|使用显式渲染提高性能}。
+    showRenderLoopErrors: true, // 如果为真，当发生渲染循环错误时，此小部件将自动向用户显示包含错误的HTML面板。
+    bottomContainer: document.createElement('p'), // The DOM element or ID that will contain the bottomContainer.  If not specified, the bottomContainer is added to the widget itself.
+    orderIndependentTranslucency: false, // 顺序无关透明度
+    shadows: true, // Determines if shadows are cast by light sources.
+  });
+});
+</script>
+
+<template>
+  <div id="cesiumContainer" />
+  <!--
+  {#if $selectedEntity}
+    <SelectionWidget {viewer} />
+  {/if}
+  -->
+</template>
+
+<style>
+#cesiumContainer {
+  height: 100%;
+  width: 100%;
+}
+</style>
--- a/src/pages/SAT/index.page.vue
+++ b/src/pages/SAT/index.page.vue
@ -0,0 +1,41 @@
+<script setup lang="ts">
+import Viewer from './Viewer.vue';
+
+const $datatableShow = ref(false);
+</script>
+
+<template>
+  <div class="relative w-full h-full SAT">
+    <div id="container" class="absolute w-full h-full select-none">
+      <div class="viewer" :style="$datatableShow ? 'height:70%' : 'height: 100%'">
+        <Viewer />
+      </div>
+      <div
+        :class="[$datatableShow ? 'visible' : 'hidden', 'datatable absolute w-full b-0 l-0']"
+        :style="{
+          height: $datatableShow ? '30%' : '0',
+          overflow: 'hidden',
+          transition: 'height 0.3s ease',
+        }"
+      >
+        <!-- <DataTable /> -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.layout-main {
+  display: flex;
+  flex-direction: column;
+}
+.layout-main .SAT {
+  flex: 1;
+}
+</style>
+
+<style scoped>
+#container {
+  background-color: pink;
+}
+</style>
--- a/typed-router.d.ts
+++ b/typed-router.d.ts
@ -31,6 +31,7 @@ declare module 'vue-router/auto-routes' {
    'JSPage': RouteRecordInfo<'JSPage', '/JSPage', Record<never, never>, Record<never, never>>,
    'MDPage': RouteRecordInfo<'MDPage', '/MDPage', Record<never, never>, Record<never, never>>,
    'Primevue': RouteRecordInfo<'Primevue', '/primevue', Record<never, never>, Record<never, never>>,
+    'SAT': RouteRecordInfo<'SAT', '/SAT', Record<never, never>, Record<never, never>>,
    'TsEnumUtil': RouteRecordInfo<'TsEnumUtil', '/ts-enum-util', Record<never, never>, Record<never, never>>,
    'VueMacrosDefineRender': RouteRecordInfo<'VueMacrosDefineRender', '/VueMacros/DefineRender', Record<never, never>, Record<never, never>>,
    'VueMacrosReactivityTransform': RouteRecordInfo<'VueMacrosReactivityTransform', '/VueMacros/ReactivityTransform', Record<never, never>, Record<never, never>>,