skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(stores): simplify stores

Browse Source
This commit is contained in:
yangsy
2025-11-25 16:51:20 +08:00
parent 2dd599d2eb
commit 5e464f6e80
39 changed files with 195 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/device-page/device-card/camera-card.vue
View File

@@ -1,18 +1,19 @@
<script setup lang="ts">
import type { NdmCameraDiagInfo, NdmCameraResultVO } from '@/apis';
import { useDebugModeStore } from '@/stores';
import destr from 'destr';
import { CameraHistoryDiagCard, DeviceCommonCard, DeviceHeaderCard } from '@/components';
import { useSettingStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { computed, ref, toRefs } from 'vue';
import { DeviceCommonCard, DeviceHeaderCard } from './current-diag-card';
import { CameraHistoryDiagCard } from './history-diag-card';
import { storeToRefs } from 'pinia';
const props = defineProps<{
stationCode: string;
ndmCamera: NdmCameraResultVO;
}>();
const debugModeStore = useDebugModeStore();
const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);
const { stationCode, ndmCamera } = toRefs(props);
@@ -74,7 +75,7 @@ const selectedTab = ref('设备状态');
<CameraHistoryDiagCard :station-code="stationCode" :ndm-camera="ndmCamera" :key="ndmCamera.id" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
<pre class="raw-data">{{ { ...ndmCamera, lastDiagInfo } }}</pre>
</NTabPane>
</NTabs>

4
src/components/device-page/device-card/current-diag-card/device-header-card.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { detailDeviceApi, probeDeviceApi, type NdmDeviceResultVO } from '@/apis';
import { DeviceType, DeviceTypeName, tryGetDeviceTypeVal, type DeviceTypeVal } from '@/enums';
import { useLineDevicesStore } from '@/stores';
import { useDeviceStore } from '@/stores';
import { useMutation } from '@tanstack/vue-query';
import { ApiOutlined, ReloadOutlined } from '@vicons/antd';
import { NButton, NCard, NFlex, NIcon, NTag, NTooltip } from 'naive-ui';
@@ -62,7 +62,7 @@ const { mutate: getDeviceDetail, isPending: loading } = useMutation({
},
onSuccess: (device) => {
if (device) {
useLineDevicesStore().patch(stationCode.value, device);
useDeviceStore().patch(stationCode.value, device);
}
},
onError: (error) => {

8
src/components/device-page/device-card/decoder-card.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import type { NdmDecoderDiagInfo, NdmDecoderResultVO } from '@/apis';
import { DecoderHistoryDiagCard, DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { useSettingStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, ref, toRefs } from 'vue';
const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
ndmDecoder: NdmDecoderResultVO;
}>();
const debugModeStore = useDebugModeStore();
const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);
const { stationCode, ndmDecoder } = toRefs(props);
@@ -53,7 +55,7 @@ const selectedTab = ref('设备状态');
<DecoderHistoryDiagCard :station-code="stationCode" :ndm-decoder="ndmDecoder" :key="ndmDecoder.id" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
<pre class="raw-data">{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
</NTabPane>
</NTabs>

8
src/components/device-page/device-card/keyboard-card.vue
View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import type { NdmKeyboardResultVO } from '@/apis';
import { DeviceHeaderCard, KeyboardHistoryDiagCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { useSettingStore } from '@/stores';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { ref, toRefs } from 'vue';
const props = defineProps<{
@@ -10,7 +11,8 @@ const props = defineProps<{
ndmKeyboard: NdmKeyboardResultVO;
}>();
const debugModeStore = useDebugModeStore();
const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);
const { stationCode, ndmKeyboard } = toRefs(props);
@@ -30,7 +32,7 @@ const selectedTab = ref('设备状态');
<KeyboardHistoryDiagCard :station-code="stationCode" :ndm-keyboard="ndmKeyboard" :key="ndmKeyboard.id" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
<pre class="raw-data">{{ { ...ndmKeyboard } }}</pre>
</NTabPane>
</NTabs>

8
src/components/device-page/device-card/nvr-card.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import type { NdmNvrDiagInfo, NdmNvrResultVO } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, isNvrCluster, NvrDiskCard, NvrHistoryDiagCard, NvrRecordDiagCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { useSettingStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, ref, toRefs } from 'vue';
const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
ndmNvr: NdmNvrResultVO;
}>();
const debugModeStore = useDebugModeStore();
const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);
const { stationCode, ndmNvr } = toRefs(props);
@@ -63,7 +65,7 @@ const selectedTab = ref('设备状态');
<NvrHistoryDiagCard :station-code="stationCode" :ndm-nvr="ndmNvr" :key="ndmNvr.id" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
<pre class="raw-data">{{ { ...ndmNvr, lastDiagInfo } }}</pre>
</NTabPane>
</NTabs>

8
src/components/device-page/device-card/security-box-card.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import type { NdmSecurityBoxDiagInfo, NdmSecurityBoxResultVO } from '@/apis';
import { DeviceCommonCard, DeviceHardwareCard, DeviceHeaderCard, SecurityBoxCircuitCard, SecurityBoxHistoryDiagCard, SecurityBoxInfoCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { useSettingStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, ref, toRefs } from 'vue';
const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
ndmSecurityBox: NdmSecurityBoxResultVO;
}>();
const debugModeStore = useDebugModeStore();
const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);
const { stationCode, ndmSecurityBox } = toRefs(props);
@@ -62,7 +64,7 @@ const selectedTab = ref('设备状态');
<SecurityBoxHistoryDiagCard :station-code="stationCode" :ndm-security-box="ndmSecurityBox" :key="ndmSecurityBox.id" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
<pre class="raw-data">{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
</NTabPane>
</NTabs>

8
src/components/device-page/device-card/server-card.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import type { NdmServerDiagInfo, NdmServerResultVO } from '@/apis';
import { DeviceHardwareCard, DeviceHeaderCard, ServerHistoryDiagCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { useSettingStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, ref, toRefs } from 'vue';
const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
ndmServer: NdmServerResultVO;
}>();
const debugModeStore = useDebugModeStore();
const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);
const { stationCode, ndmServer } = toRefs(props);
@@ -44,7 +46,7 @@ const selectedTab = ref('设备状态');
<ServerHistoryDiagCard :station-code="stationCode" :ndm-server="ndmServer" :key="ndmServer.id" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
<pre class="raw-data">{{ { ...ndmServer, lastDiagInfo } }}</pre>
</NTabPane>
</NTabs>

8
src/components/device-page/device-card/switch-card.vue
View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import type { NdmSwitchDiagInfo, NdmSwitchResultVO } from '@/apis';
import { DeviceHardwareCard, DeviceHeaderCard, SwitchHistoryDiagCard, SwitchPortCard } from '@/components';
import { useDebugModeStore } from '@/stores';
import { useSettingStore } from '@/stores';
import { destr } from 'destr';
import { NCard, NFlex, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { computed, ref, toRefs } from 'vue';
const props = defineProps<{
@@ -11,7 +12,8 @@ const props = defineProps<{
ndmSwitch: NdmSwitchResultVO;
}>();
const debugModeStore = useDebugModeStore();
const settingStore = useSettingStore();
const { debugModeEnabled } = storeToRefs(settingStore);
const { stationCode, ndmSwitch } = toRefs(props);
@@ -45,7 +47,7 @@ const selectedTab = ref('设备状态');
<SwitchHistoryDiagCard :station-code="stationCode" :ndm-switch="ndmSwitch" :key="ndmSwitch.id" />
</NTabPane>
<!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
<NTabPane v-if="debugModeStore.debugEnabled" name="原始数据" tab="原始数据">
<NTabPane v-if="debugModeEnabled" name="原始数据" tab="原始数据">
<pre class="raw-data">{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
</NTabPane>
</NTabs>

32
src/components/global/settings-drawer.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { VersionInfo } from '@/apis';
import { ThemeSwitch } from '@/components';
import { STATION_LIST_QUERY_KEY } from '@/constants';
import { useDebugModeStore, useLayoutStore, useQueryControlStore } from '@/stores';
import { LINE_STATIONS_QUERY_KEY } from '@/constants';
import { useSettingStore, usePollingStore } from '@/stores';
import { getAppEnvConfig } from '@/utils';
import { useQueryClient } from '@tanstack/vue-query';
import { useEventListener } from '@vueuse/core';
@@ -16,16 +16,16 @@ const route = useRoute();
const show = defineModel<boolean>('show');
const layoutStore = useLayoutStore();
const { stationGridColumns } = storeToRefs(layoutStore);
const queryControlStore = useQueryControlStore();
const { stationVerifyMode } = storeToRefs(queryControlStore);
const settingStore = useSettingStore();
const { stationGridColumns, debugModeEnabled } = storeToRefs(settingStore);
const pollingStore = usePollingStore();
const { stationVerifyMode } = storeToRefs(pollingStore);
const queryClient = useQueryClient();
watch(stationVerifyMode, () => {
queryClient.cancelQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
queryClient.invalidateQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
queryClient.refetchQueries({ queryKey: [STATION_LIST_QUERY_KEY] });
queryClient.cancelQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
queryClient.invalidateQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
queryClient.refetchQueries({ queryKey: [LINE_STATIONS_QUERY_KEY] });
});
const versionInfo = ref<VersionInfo>({ version: '', buildTime: '' });
@@ -35,8 +35,6 @@ onMounted(async () => {
versionInfo.value = data;
});
const debugModeStore = useDebugModeStore();
const { debugEnabled } = storeToRefs(debugModeStore);
const debugCodeModalShow = ref(false);
const debugCode = ref('');
const enableDebug = () => {
@@ -47,11 +45,11 @@ const enableDebug = () => {
}
debugCodeModalShow.value = false;
debugCode.value = '';
debugModeStore.enableDebug();
settingStore.enableDebugMode();
};
const disableDebug = () => {
debugCodeModalShow.value = false;
debugModeStore.disableDebug();
settingStore.disableDebugMode();
};
useEventListener('keydown', (event) => {
@@ -76,7 +74,7 @@ useEventListener('keydown', (event) => {
<NInputNumber v-model:value="stationGridColumns" :min="1" :max="10" />
</NFormItem>
</template>
<template v-if="debugEnabled">
<template v-if="debugModeEnabled">
<NDivider>调试</NDivider>
<NFormItem label="车站Ping模式" label-placement="left">
<NRadioGroup v-model:value="stationVerifyMode">
@@ -96,13 +94,13 @@ useEventListener('keydown', (event) => {
<NModal v-model:show="debugCodeModalShow" preset="dialog" type="info">
<template #header>
<NText v-if="!debugEnabled">请输入调试授权码</NText>
<NText v-if="!debugModeEnabled">请输入调试授权码</NText>
<NText v-else>确认关闭调试模式</NText>
</template>
<NInput v-if="!debugEnabled" v-model:value="debugCode" placeholder="输入授权码" />
<NInput v-if="!debugModeEnabled" v-model:value="debugCode" placeholder="输入授权码" />
<template #action>
<NButton @click="debugCodeModalShow = false">取消</NButton>
<NButton v-if="!debugEnabled" type="primary" @click="enableDebug">启用</NButton>
<NButton v-if="!debugModeEnabled" type="primary" @click="enableDebug">启用</NButton>
<NButton v-else type="primary" @click="disableDebug">确认</NButton>
</template>
</NModal>

6
src/components/global/theme-switch.vue
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import { useThemeStore } from '@/stores';
import { useSettingStore } from '@/stores';
import { MoonOutline, SunnyOutline } from '@vicons/ionicons5';
import { NIcon, NSwitch } from 'naive-ui';
import { storeToRefs } from 'pinia';
import type { ComponentInstance } from 'vue';
const themeStore = useThemeStore();
const { darkThemeEnabled } = storeToRefs(themeStore);
const settingStore = useSettingStore();
const { darkThemeEnabled } = storeToRefs(settingStore);
defineExpose({} as ComponentInstance<typeof NSwitch>);
</script>