@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/blackWhiteList/components/drawerBlackWhiteList.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { FormExpose } from 'ant-design-vue/es/form/Form';
+import { postBlackWhiteListAddBlackWhiteList, postBlackWhiteListUpdateBlackWhiteList } from '@/api/modules/configData';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+
+defineOptions({
+  name: 'DrawerBlackWhiteList',
+});
+
+const props = defineProps<{
+  type: number
+}>();
+
+const emit = defineEmits(['submit']);
+
+const rules: Record<string, Rule[]> = {
+  ip: [{ required: true, validator: checkIP, trigger: ['blur', 'change'] }],
+  enable: [{ required: true, message: '请选择是否开启', trigger: ['blur', 'change'] }],
+};
+const dialogTitle = ref('');
+const [open, setOpen] = useToggle(false);
+const formRef = ref<FormExpose>();
+const defaultFormData = {
+  enable: true,
+};
+const form = ref<Partial<API.PubBlackWhiteList>>({});
+const isEdit = ref(false);
+
+function checkIP(rule: any, value: any, callback: any) {
+  const ipReg = /^(25[0-5]|2[0-4]\d|[01]?\d{1,2})\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})$/;
+  if (!value) {
+    callback(new Error('请输入ip地址'));
+  }
+  else if (!ipReg.test(value)) {
+    callback(new Error('ip地址格式不正确'));
+  }
+  else {
+    callback();
+  }
+}
+
+async function onOpen(title: string, edit: boolean, record?: API.PubBlackWhiteList) {
+  dialogTitle.value = title;
+
+  setOpen(true);
+
+  if (edit) {
+    isEdit.value = true;
+    form.value = { ...record ?? {} };
+  }
+  else {
+    isEdit.value = false;
+    form.value = { ...defaultFormData };
+  }
+}
+
+const [loading, setLoading] = useToggle(false);
+function onSubmit() {
+  formRef.value?.validate().then(() => {
+    setLoading(true);
+    const submitFn = isEdit.value ? postBlackWhiteListUpdateBlackWhiteList : postBlackWhiteListAddBlackWhiteList;
+    const params: any = {
+      ...form.value,
+      type: props.type,
+    };
+
+    submitFn(params)
+      .then((res: API.ResponseDataBoolean) => {
+        if (res.success) {
+          message.success(`${dialogTitle.value}成功！`);
+          setOpen(false);
+          emit('submit');
+        }
+      })
+      .finally(() => setLoading(false));
+  });
+}
+
+function close() {
+  setOpen(false);
+}
+
+defineExpose({
+  open: onOpen,
+});
+</script>
+
+<template>
+  <a-drawer
+    v-model:open="open"
+    :title="`${dialogTitle}信息`"
+    placement="right"
+    :width="600"
+    destroy-on-close
+    :footer-style="{ textAlign: 'right' }"
+    @close="close"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 4 }"
+    >
+      <a-form-item label="来源ip地址" name="ip">
+        <a-input v-model:value="form.ip" :maxlength="20" />
+      </a-form-item>
+      <a-form-item label="状态" name="enable">
+        <a-switch v-model:checked="form.enable" />
+      </a-form-item>
+      <a-form-item label="描述" name="description">
+        <a-textarea
+          v-model:value="form.description"
+          :rows="3"
+          show-count
+          :maxlength="200"
+        />
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-space>
+        <a-button @click="close">
+          取消
+        </a-button>
+        <a-button type="primary" :loading="loading" @click="onSubmit()">
+          提交
+        </a-button>
+      </a-space>
+    </template>
+  </a-drawer>
+</template>

package/src/views/blackWhiteList/enum.ts

@@ -0,0 +1,7 @@
+export enum ACTION {
+  ADD = '新增',
+  EDIT = '编辑',
+  REMOVE = '删除',
+  ENABLE = '启用',
+  DISABLE = '停用',
+}

package/src/views/blackWhiteList/index.vue

@@ -0,0 +1,309 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { getBlackWhiteListDeleteById, postBlackWhiteListGetBlackWhiteListPageList, postBlackWhiteListUpdateBlackWhiteList } from '@/api/modules/configData';
+import { ProTable } from '@pubinfo/pro-components';
+import { useToggle } from '@vueuse/core';
+import { message, Modal } from 'ant-design-vue';
+import DrawerBlackWhiteList from './components/drawerBlackWhiteList.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'BlackWhiteList',
+});
+
+const route = useRoute();
+const isBlacklistMode = ref(route.meta.type === 'black');
+
+// 黑名单0，白名单1
+const currentType = computed(() => {
+  if (isBlacklistMode.value) {
+    return 0; // 黑名单
+  }
+  else {
+    return 1; // 白名单
+  }
+});
+
+const isblank = computed(() => {
+  if (isBlacklistMode.value) {
+    return 'blacklist';
+  }
+  else {
+    return 'whitelist';
+  }
+});
+
+// rights
+const addRights = computed(() => `${isblank.value}_add`);
+const editRights = computed(() => `${isblank.value}_edit`);
+const deleteRights = computed(() => `${isblank.value}_delete`);
+const enableRights = computed(() => `${isblank.value}_enable`);
+const disableRights = computed(() => `${isblank.value}_disable`);
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerRef = ref();
+const statusOptions = [
+  { label: '启用', value: 1 },
+  { label: '停用', value: 0 },
+];
+const columns: ProColumns<API.PubBlackWhiteList> = [
+  {
+    valueType: 'a-input',
+    minWidth: 60,
+    hideInTable: false,
+    title: 'IP地址',
+    dataIndex: 'ip',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 200,
+    title: '描述',
+    dataIndex: 'description',
+    ellipsis: true,
+  },
+  {
+    valueType: 'a-select',
+    minWidth: 100,
+    title: '状态',
+    dataIndex: 'enable',
+    fieldProps: {
+      placeholder: '请选择',
+      allowClear: true,
+      options: statusOptions,
+    },
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 200,
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        addRights.value,
+        editRights.value,
+        deleteRights.value,
+        enableRights.value,
+        disableRights.value,
+      ]);
+    },
+  },
+];
+
+async function request(params: any) {
+  const { current, pageSize, ip, enable } = params;
+  const ps: any = {
+    ip,
+    pageSize,
+    currentPage: current,
+    doSearchTotal: true,
+    type: currentType.value,
+  };
+  if (enable !== undefined) {
+    // 为1时代表启用，传true, 否则传false
+    ps.enable = enable;
+  }
+  const res = await postBlackWhiteListGetBlackWhiteListPageList(ps);
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+function getListData() {
+  tableRef.value.reload();
+}
+
+const [loading, setLoading] = useToggle(false);
+
+function actionRemove(subKey: string, record?: API.PubBlackWhiteList) {
+  Modal.confirm({
+    title: '删除',
+    content: `确定要删除该条${subKey}数据吗？`,
+    async onOk() {
+      setLoading(true);
+      getBlackWhiteListDeleteById({ id: record?.id as string })
+        .then((res: API.ResponseDataBoolean) => {
+          if (res.success) {
+            message.success('删除成功');
+            getListData();
+          }
+        })
+        .finally(() => setLoading(false));
+    },
+  });
+}
+
+function actionDisable(record?: API.PubBlackWhiteList) {
+  setLoading(true);
+  postBlackWhiteListUpdateBlackWhiteList(
+    { id: record?.id, enable: !record?.enable } as any)
+    .then((res: API.ResponseDataBoolean) => {
+      if (res.success) {
+        let msg = '';
+        if (!record?.enable) {
+          msg = '启用成功！';
+        }
+        else {
+          msg = '停用成功！';
+        }
+        message.success(msg);
+        getListData();
+      }
+    })
+    .finally(() =>
+      setLoading(false),
+    );
+}
+
+function onAction(key: string, record?: API.PubBlackWhiteList): void {
+  if (loading.value) {
+    return;
+  }
+  let subKey = '';
+
+  if (isBlacklistMode.value) {
+    subKey = '黑名单';
+  }
+  else {
+    subKey = '白名单';
+  }
+
+  switch (key) {
+    case ACTION.ADD:
+      drawerRef.value.open(key + subKey, false);
+      break;
+    case ACTION.EDIT:
+      drawerRef.value.open(key + subKey, true, record);
+      break;
+    case ACTION.REMOVE:
+      actionRemove(subKey, record);
+      break;
+    case ACTION.ENABLE:
+    case ACTION.DISABLE:
+      actionDisable(record);
+      break;
+  }
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+    flex
+    flex-col
+    class="page-black-white-list"
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1000 }"
+    >
+      <template #toolbar>
+        <a-button
+          v-auth="addRights"
+          type="primary"
+          @click="onAction(ACTION.ADD)"
+        >
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'enable'">
+          <div class="flex items-center">
+            <i class="status-mark" :class="[{ active: record.enable }]" />
+            <span class="ml-4px">{{ record.enable ? '启用' : '停用' }}</span>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              v-auth="editRights"
+              class="flex items-center hover:opacity-80"
+              @click="onAction(ACTION.EDIT, record)"
+            >
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <a
+              v-auth="deleteRights"
+              flex
+              items-center
+              text-red-500
+              hover:cursor-pointer
+              hover:text-red-500
+              hover:opacity-80
+              @click="onAction(ACTION.REMOVE, record)"
+            >
+              <PubinfoIcon name="remove" class="text-base" />
+              <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+            </a>
+            <a
+              v-if="record.enable"
+              v-auth="disableRights"
+              flex
+              items-center
+              class="text-#1D2129"
+              hover:cursor-pointer
+              hover:opacity-80
+              @click="onAction(ACTION.DISABLE, record)"
+            >
+              <PubinfoIcon name="blacklist-disable" class="text-20px" />
+              <span class="ml-4px">{{ ACTION.DISABLE }}</span>
+            </a>
+            <a
+              v-else
+              v-auth="enableRights"
+              class="flex items-center"
+              @click="onAction(ACTION.ENABLE, record)"
+            >
+              <PubinfoIcon name="blacklist-enable" class="text-20px" />
+              <span class="ml-4px">{{ ACTION.ENABLE }}</span>
+            </a>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <DrawerBlackWhiteList
+      ref="drawerRef"
+      :type="currentType"
+      @submit="getListData()"
+    />
+  </div>
+</template>
+
+<style lang="scss">
+.page-black-white-list {
+  .ant-card.pro-table {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .status-mark {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+    background-color: #aeaeae;
+    border-radius: 50%;
+
+    &.active {
+      background: #01d689;
+    }
+  }
+}
+</style>

package/src/views/blackWhiteList/types.ts

@@ -0,0 +1,4 @@
+export interface OptionItem {
+  label: string
+  value: string
+}

package/src/views/breadcrumb_setting/animationData.ts

@@ -0,0 +1,15 @@
+import darkEnableData from '@/assets/lottie/breadcrumb/dark/enable.json?url';
+import darkEnableMainMenuData from '@/assets/lottie/breadcrumb/dark/enableMainMenu.json?url';
+import darkStyleData from '@/assets/lottie/breadcrumb/dark/style.json?url';
+import lightEnableData from '@/assets/lottie/breadcrumb/light/enable.json?url';
+import lightEnableMainMenuData from '@/assets/lottie/breadcrumb/light/enableMainMenu.json?url';
+import lightStyleData from '@/assets/lottie/breadcrumb/light/style.json?url';
+
+export {
+  darkEnableData,
+  darkEnableMainMenuData,
+  darkStyleData,
+  lightEnableData,
+  lightEnableMainMenuData,
+  lightStyleData,
+};

package/src/views/breadcrumb_setting/index.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+
+import { message } from 'ant-design-vue';
+import SetItem from '../components/setItem.vue';
+import {
+  darkEnableData,
+  darkEnableMainMenuData,
+  darkStyleData,
+  lightEnableData,
+  lightEnableMainMenuData,
+  lightStyleData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'BreadcrumbSetting',
+});
+
+const settingsStore = useSettingsStore();
+type Val = Exclude<Settings.breadcrumb['style'], undefined>;
+
+const styleOptions = [
+  { label: '默认', value: '' },
+  { label: '现代', value: 'modern' },
+];
+
+const breadcrumbList = reactive<
+  {
+    name: string
+    type: string
+    descripe: string
+    open: boolean
+    activeStyle: Val
+    styleOptions?: typeof styleOptions
+    lightData: string
+    darkData: string
+  }[]
+>([
+  {
+    name: '是否启用',
+    type: 'switch',
+    descripe: '',
+    open: settingsStore.globalSettings.breadcrumb.enable,
+    activeStyle: '',
+    lightData: lightEnableData,
+    darkData: darkEnableData,
+  },
+  {
+    name: '风格',
+    type: 'check',
+    descripe: '',
+    open: true,
+    activeStyle: settingsStore.globalSettings.breadcrumb.style,
+    styleOptions,
+    lightData: lightStyleData,
+    darkData: darkStyleData,
+  },
+  {
+    name: '是否显示主导航',
+    type: 'switch',
+    descripe: '',
+    open: settingsStore.globalSettings.breadcrumb.enableMainMenu,
+    activeStyle: '',
+    lightData: lightEnableMainMenuData,
+    darkData: darkEnableMainMenuData,
+  },
+]);
+
+let jsonStr = '';
+
+function onChange(index: number, ck: boolean | Val) {
+  switch (index) {
+    case 0:
+      settingsStore.globalSettings.breadcrumb.enable = ck as boolean;
+      jsonStr = JSON.stringify({
+        breadcrumb: {
+          enable: ck,
+        },
+      });
+      break;
+    case 1:
+      settingsStore.globalSettings.breadcrumb.style = ck as Val;
+      jsonStr = JSON.stringify({
+        breadcrumb: {
+          style: ck,
+        },
+      });
+      break;
+    case 2:
+      settingsStore.globalSettings.breadcrumb.enableMainMenu = ck as boolean;
+      jsonStr = JSON.stringify({
+        breadcrumb: {
+          enableMainMenu: ck,
+        },
+      });
+      break;
+  }
+  setStyle(jsonStr);
+}
+
+function setStyle(jsonStr: string) {
+  postSysconfigAddOrEidtSysThemeStyleConfig({ content: jsonStr }).then((res: API.ResponseDataBoolean) => {
+    if (res.success) {
+      message.success('设置成功');
+    }
+  });
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    p-10px
+  >
+    <div class="w-full h-full bg-white overflow-y-auto p-10px flex flex-col box-border dark:bg-[#141414]">
+      <div class="h-[38px] pl-[16px] flex flex-row items-center bar-header">
+        <PubinfoIcon name="icon_breadcrumb" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">面包屑导航</span>
+      </div>
+      <div class="mt-[22px] grid grid-cols-3 gap-[20px] px-30px w-full h-0 max-w-1500px" aspect="[3/2] ">
+        <SetItem
+          v-for="(item, index) in breadcrumbList"
+          :key="item.name"
+          class="mb-20px"
+          aspect="[9/6]"
+          :name="item.name"
+          :descripe="item.descripe"
+          :open="item.open"
+          :type="item.type"
+          :active-style="item.activeStyle"
+          :style-options="item.styleOptions"
+          :light-animation-data="item.lightData"
+          :dark-animation-data="item.darkData"
+          @change="(val) => onChange(index, val)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bar-header {
+  background: var(--g-bg);
+}
+</style>

package/src/views/components/HCheckList.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    modelValue: string | number | undefined
+    options: {
+      label?: string | number
+      icon?: string
+      value: string | number
+      disabled?: boolean
+    }[]
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [string | number]
+  'change': [string | number | undefined]
+}>();
+
+watch(() => props.modelValue, (val) => {
+  emit('change', val);
+});
+function update(value: string | number) {
+  emit('update:modelValue', value);
+}
+</script>
+
+<template>
+  <div class="inline-flex select-none items-center justify-center of-hidden rounded-md bg-stone-3 dark:bg-stone-7">
+    <button
+      v-for="option in options"
+      :key="option.value"
+      :disabled="disabled || option.disabled"
+      class="flex cursor-pointer items-center truncate border-size-0 bg-inherit px-2 py-1.5 text-sm disabled:cursor-not-allowed disabled:opacity-50 hover:not-disabled:(bg-ui-primary text-ui-text)"
+      :class="{ 'text-ui-text bg-ui-primary': modelValue === option.value }"
+      @click="update(option.value)"
+    >
+      <PubinfoIcon v-if="option.icon" :name="option.icon" />
+      <template v-else>
+        {{ option.label }}
+      </template>
+    </button>
+  </div>
+</template>

package/src/views/components/animation_item.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useLottie } from '@/composables/useLottie';
+
+defineOptions({
+  name: 'AnimationItem',
+});
+
+const props = withDefaults(
+  defineProps<{
+    lightAnimationData: string
+    darkAnimationData: string
+  }>(),
+  {
+    lightAnimationData: () => { return ''; },
+    darkAnimationData: () => { return ''; },
+  },
+);
+
+const AnimationRef = ref<HTMLElement | null>(null);
+
+const { play, stop } = useLottie(
+  AnimationRef,
+  {
+    lightAnimationData: props.lightAnimationData,
+    darkAnimationData: props.darkAnimationData,
+  },
+);
+
+defineExpose({
+  play,
+  stop,
+});
+</script>
+
+<template>
+  <div ref="AnimationRef" class="w-[70%]" />
+</template>