feat: 用户操作日志.

orion-ops-ui/src/components/user/role/user-selector.vue

@@ -0,0 +1,61 @@
+<template>
+  <a-select v-model:model-value="value as any"
+            :options="optionData()"
+            :allow-search="true"
+            :multiple="multiple"
+            :loading="loading"
+            :disabled="loading"
+            :filter-option="filterOption"
+            placeholder="请选择用户" />
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'user-selector'
+  };
+</script>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue';
+  import type { SelectOptionData } from '@arco-design/web-vue';
+  import { computed } from 'vue';
+  import { useCacheStore } from '@/store';
+  import { RoleStatus } from '@/views/user/role/types/const';
+
+  const props = defineProps({
+    modelValue: [Number, Array] as PropType<number | Array<number>>,
+    loading: Boolean,
+    multiple: Boolean,
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const value = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(e) {
+      emits('update:modelValue', e);
+    }
+  });
+
+  // 选项数据
+  const cacheStore = useCacheStore();
+  const optionData = (): SelectOptionData[] => {
+    return cacheStore.users.map(s => {
+      return {
+        label: `${s.nickname} (${s.username})`,
+        value: s.id,
+      };
+    });
+  };
+
+  // 搜索
+  const filterOption = (searchValue: string, option: { label: string; }) => {
+    return option.label.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+  };
+</script>
+
+<style scoped>
+
+</style>

orion-ops-ui/src/components/view/json/json-view-modal.vue

@@ -0,0 +1,71 @@
+<template>
+  <a-modal v-model:visible="visible"
+           title-align="start"
+           :width="width"
+           :body-style="{padding: '16px 8px'}"
+           :top="80"
+           :title="title"
+           :align-center="false"
+           :draggable="true"
+           :mask-closable="false"
+           :unmount-on-close="true"
+           :footer="false"
+           @close="handleClose">
+    <div :style="{width: '100%', 'height': height}">
+      <editor v-model="value" readonly />
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  export default {
+    name: 'json-view-modal'
+  };
+</script>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import useVisible from '@/hooks/visible';
+  import { isString } from '@/utils/is';
+
+  const props = defineProps({
+    width: {
+      type: [String, Number],
+      default: '60%'
+    },
+    height: {
+      type: String,
+      default: 'calc(100vh - 240px)'
+    }
+  });
+
+  const { visible, setVisible } = useVisible();
+
+  const title = ref<string>();
+  const value = ref<string | any>();
+
+
+  // 打开
+  const open = (editorValue: string | any, editorTitle = 'json') => {
+    title.value = editorTitle;
+    if (isString(editorValue)) {
+      value.value = editorValue;
+    } else {
+      value.value = JSON.stringify(editorValue, undefined, 4);
+    }
+    setVisible(true);
+  };
+
+  defineExpose({ open });
+
+  // 关闭
+  const handleClose = () => {
+    setVisible(false);
+  };
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-modal-title) {
+    font-size: 14px;
+  }
+</style>