fuse-code/src/components/view-setting/index.vue

<template>
  <div>
    <Dropdown placement="top">
      <div class="strengthen show-setting">
        <span>显示设置</span>
        <DownOutlined />
      </div>
      <template #overlay>
        <Menu>
          <menu-item v-for="option in showOptions">
            <ui-input
              @click.stop
              type="checkbox"
              :modelValue="option.stack.value"
              @update:modelValue="(s: boolean) => option.stack.value = s"
              :label="option.text"
            />
          </menu-item>
        </Menu>
      </template>
    </Dropdown>
  </div>
</template>

<script setup lang="ts">
import { Dropdown, Menu, MenuItem } from "ant-design-vue";
import {
  showMeasuresStack,
  showMonitorsStack,
  showPathsStack,
  showTaggingsStack,
} from "@/env";
import { DownOutlined } from "@ant-design/icons-vue";
import { computed, watch, watchEffect } from "vue";
import { selectPaths } from "@/store";

const props = defineProps<{ value?: Record<string, boolean> }>();
const emit = defineEmits<{ (e: "update:value", v: Record<string, boolean>): void }>();

const showOptions = [
  { key: "showTagging", text: "标签", stack: showTaggingsStack.current.value },
  { key: "showMeasure", text: "测量", stack: showMeasuresStack.current.value },
  {
    key: "showPath",
    text: "路径",
    stack: computed({
      get: () => {
        return selectPaths.all.value || selectPaths.selects.value.length > 0;
      },
      set: (val: boolean) => {
        selectPaths.all.value = val;
        console.log(selectPaths.selects.value);
      },
    }),
  },
];
watch(
  () => props.value,
  () => {
    if (!props.value) return;
    showOptions.forEach((item) => {
      item.stack.value = props.value![item.key];
    });
  },
  { immediate: true }
);

watchEffect(() => {
  emit(
    "update:value",
    Object.fromEntries(showOptions.map((item) => [item.key, item.stack.value] as const))
  );
});
</script>

<style lang="scss" scoped>
.show-setting {
  width: 160px;
  height: 34px;
  background: rgba(27, 27, 28, 0.9);
  border-radius: 4px;
  display: flex;
  padding: 8px;
  align-items: center;
  justify-content: space-between;
}
</style>