初始化 ui.

orion-ops-ui/src/components/global-setting/block.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="block">
+    <h5 class="title">{{ title }}</h5>
+    <div v-for="option in options" :key="option.name" class="switch-wrapper">
+      <span>{{ $t(option.name) }}</span>
+      <form-wrapper
+        :type="option.type || 'switch'"
+        :name="option.key"
+        :default-value="option.defaultVal"
+        @input-change="handleChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { PropType } from 'vue';
+  import { useAppStore } from '@/store';
+  import FormWrapper from './form-wrapper.vue';
+
+  interface OptionsProps {
+    name: string;
+    key: string;
+    type?: string;
+    defaultVal?: boolean | string | number;
+  }
+  defineProps({
+    title: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array as PropType<OptionsProps[]>,
+      default() {
+        return [];
+      },
+    },
+  });
+  const appStore = useAppStore();
+  const handleChange = async ({
+    key,
+    value,
+  }: {
+    key: string;
+    value: unknown;
+  }) => {
+    if (key === 'colorWeak') {
+      document.body.style.filter = value ? 'invert(80%)' : 'none';
+    }
+    if (key === 'menuFromServer' && value) {
+      await appStore.fetchServerMenuConfig();
+    }
+    if (key === 'topMenu') {
+      appStore.updateSettings({
+        menuCollapse: false,
+      });
+    }
+    appStore.updateSettings({ [key]: value });
+  };
+</script>
+
+<style scoped lang="less">
+  .block {
+    margin-bottom: 24px;
+  }
+
+  .title {
+    margin: 10px 0;
+    padding: 0;
+    font-size: 14px;
+  }
+
+  .switch-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 32px;
+  }
+</style>