@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/role_group/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { deleteRbacPubRoleGroupDelete, postRbacPubRoleGroupPageQuery } from '@/api/modules/rbac';
+import { ProTable } from '@pubinfo/pro-components';
+import { Badge, message, Modal } from 'ant-design-vue';
+import DrawerRole from './components/drawerRole.vue';
+import { ACTION } from './enum';
+
+defineOptions({
+  name: 'Role',
+});
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerRoleRef = ref();
+
+function getRoleData() {
+  tableRef.value.reload();
+}
+
+async function request(params: any) {
+  const { current, pageSize, ...rest } = params;
+  const res = await postRbacPubRoleGroupPageQuery({
+    currentPage: current,
+    pageSize,
+    ...rest,
+  });
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+const columns: ProColumns<API.PubRole> = [
+  {
+    valueType: 'a-input',
+    bind: 'value',
+    minWidth: 200,
+    title: '角色组名称',
+    dataIndex: 'name',
+    ellipsis: true,
+    fieldProps: {
+      placeholder: '请输入角色组名称',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    minWidth: 80,
+    title: '创建人',
+    dataIndex: 'createUserName',
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '创建部门',
+    dataIndex: 'createOrgName',
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '创建时间',
+    dataIndex: 'createTime',
+  },
+  {
+    hideInSearch: true,
+    minWidth: 100,
+    title: '修改时间',
+    dataIndex: 'updateTime',
+  },
+  {
+    valueType: 'a-select',
+    minWidth: 80,
+    title: '角色组状态',
+    dataIndex: 'enable',
+    customRender: ({ text }: { text: boolean }) => {
+      return (
+        text
+          ? <Badge status="success" text="正常" />
+          : <Badge status="error" text="关闭" />
+      );
+    },
+    fieldProps: {
+      placeholder: '请选择是否启用',
+      allowClear: true,
+      options: [
+        { value: 1, label: '正常' },
+        { value: 0, label: '关闭' },
+      ],
+    },
+  },
+  {
+    hideInSearch: true,
+    width: 140,
+    title: '操作',
+    dataIndex: 'action',
+    fixed: 'right',
+    hideInTable() {
+      return !auth([
+        'role_group_edit',
+        'role_group_remove',
+      ]);
+    },
+  },
+];
+function onAction(key: string, record?: API.PubRole): void {
+  switch (key) {
+    case ACTION.EDIT:
+      drawerRoleRef.value.open(key, record);
+      break;
+    case ACTION.ADD:
+      drawerRoleRef.value.open(key);
+      break;
+    case ACTION.REMOVE:
+      Modal.confirm({
+        title: '删除',
+        content: '确定要删除该角色组吗？',
+        onOk() {
+          deleteRbacPubRoleGroupDelete({ id: record?.id as string }).then((res) => {
+            if (res.success) {
+              message.success('删除成功');
+              getRoleData();
+            }
+          });
+        },
+      });
+      break;
+  }
+}
+</script>
+
+<template>
+  <div
+    py-10px
+    px-10px
+    w-full
+    h-full
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1100 }"
+    >
+      <template #toolbar>
+        <a-button v-auth="'role_group_add'" type="primary" @click="onAction(ACTION.ADD)">
+          <PlusCircleOutlined />
+          {{ ACTION.ADD }}
+        </a-button>
+      </template>
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a v-auth="'role_edit'" class="flex items-center" @click="onAction(ACTION.EDIT, record)">
+              <PubinfoIcon name="edit" class="text-base" />
+              <span class="ml-4px">{{ ACTION.EDIT }}</span>
+            </a>
+            <span v-auth="'role_remove'" class="flex items-center text-red-500 hover:cursor-pointer hover:opacity-80" @click="onAction(ACTION.REMOVE, record)">
+              <PubinfoIcon name="remove" class="text-base" />
+              <span class="ml-4px">{{ ACTION.REMOVE }}</span>
+            </span>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <DrawerRole ref="drawerRoleRef" @submit="getRoleData()" />
+  </div>
+</template>

package/src/views/role_group/interface.ts

@@ -0,0 +1,6 @@
+export type Form = API.PubResource;
+export type AddForm = API.PubResourceAddDto;
+export type EditForm = API.PubResourceUpdateDto;
+export type TreeNode = Form & {
+  children?: TreeNode[]
+};

package/src/views/safe_setting/index.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import type { Rule } from 'ant-design-vue/es/form';
+import type { UnwrapRef } from 'vue';
+import { getSysconfigGetSysSecurityConfig, postSysconfigEditSysSecurityConfig } from '@/api/modules/configData';
+import { useToggle } from '@vueuse/core';
+import { message } from 'ant-design-vue';
+import { PassStrengthValidator } from 'pubinfo';
+import { reactive, ref } from 'vue';
+
+interface FormState {
+  blackWhiteListMode: string
+  // 是否开启密码错误后锁定账号: true开 false关
+  // 选择开的时候出现allowFailCount 和 lockMinutes 2个选项
+  lockEnable: boolean
+  allowFailCounts: number
+  lockMinutes: number
+  defaultPassword: string
+  expireDays: number
+  // 是否开启强制修改初始化密码: true开 false关
+  forceChangeInitPwd: boolean
+}
+
+const rules: Record<string, Rule[]> = {
+  blackWhiteListMode: [
+    { required: true, message: '请选择黑白名单模式', trigger: 'change' },
+  ],
+  lockEnable: [
+    { required: true, message: '请选择密码错误后是否锁定账号', trigger: 'change' },
+  ],
+  lockMinutes: [{ required: true, validator: validateLockMinutes, trigger: 'change' }],
+  allowFailCounts: [{ required: true, validator: validateAllowFailCount, trigger: 'change' }],
+  defaultPassword: [{ required: true, validator: validatePassword, trigger: 'change' }],
+  expireDays: [{ required: true, validator: validateExpireDays, trigger: 'change' }],
+  forceChangeInitPwd: [
+    { required: true, message: '请选择是否开启强制修改初始化密码', trigger: 'change' },
+  ],
+};
+
+const formRef = ref();
+const labelCol = { style: { width: '240px' } };
+const wrapperCol = { span: 9 };
+const modeOptions = [
+  {
+    label: '无模式',
+    value: '0',
+  },
+  {
+    label: '黑名单模式',
+    value: '1',
+  },
+  {
+    label: '白名单模式',
+    value: '2',
+  },
+];
+
+const formState: UnwrapRef<FormState> = reactive({
+  // 黑白名单模式:'0'.无模式, '1':黑名单模式, '2':白名单模式
+  blackWhiteListMode: '0',
+  // 密码错误后是否锁定账号, true开 false关
+  lockEnable: true,
+  // 允许密码连续错误的次数
+  allowFailCounts: 5,
+  // 锁定多少分钟
+  lockMinutes: 10,
+  // 默认密码
+  defaultPassword: '',
+  // 密码过期天数
+  expireDays: 30,
+  // 是否强制初始化密码,即登录后必须修改默认密码. 1开 0关,
+  forceChangeInitPwd: true,
+});
+
+const isDefaultPasswordValid = ref(false);
+
+onMounted(getSystemSafeConfig);
+
+async function validateLockMinutes(_rule: Rule, value: string) {
+  if (formState.lockEnable && !value) {
+    return Promise.reject(new Error('请输入锁定分钟数'));
+  }
+  if (Number.isNaN(+value) || +value < 1 || +value > 360) {
+    return Promise.reject(new Error('锁定分钟数应为[1~360]之间的正整数'));
+  }
+  return Promise.resolve();
+};
+
+async function validateAllowFailCount(_rule: Rule, value: string) {
+  if (formState.lockEnable && !value) {
+    return Promise.reject(new Error('请输入允许密码连续错误次数'));
+  }
+  if (Number.isNaN(+value) || +value < 1 || +value > 20) {
+    return Promise.reject(new Error('允许密码连续错误次数应为[1~20]之间的正整数'));
+  }
+  return Promise.resolve();
+};
+
+async function validateExpireDays(_rule: Rule, value: string) {
+  if (formState.lockEnable && !value) {
+    return Promise.reject(new Error('请输入密码过期天数'));
+  }
+  if (Number.isNaN(+value) || +value < 30 || +value > 360) {
+    return Promise.reject(new Error('密码过期天数应为[30~360]之间的正整数'));
+  }
+  return Promise.resolve();
+};
+
+async function validatePassword(_rule: Rule, value: string) {
+  if (!value) {
+    return Promise.reject(new Error('请输入默认密码'));
+  }
+  if (!isDefaultPasswordValid.value) {
+    return Promise.reject(new Error('密码规则校验不通过'));
+  }
+  return Promise.resolve();
+};
+
+function getSystemSafeConfig() {
+  getSysconfigGetSysSecurityConfig().then((res) => {
+    if (res && res.data && res.data.content && res.success) {
+      Object.assign(formState, JSON.parse(res.data.content));
+    }
+  });
+}
+
+const [loading, setLoading] = useToggle(false);
+async function onSubmit() {
+  if (loading.value) {
+    return;
+  }
+  setLoading(true);
+  try {
+    await formRef.value?.validate();
+    const {
+      blackWhiteListMode,
+      lockEnable,
+      allowFailCounts,
+      lockMinutes,
+      defaultPassword,
+      expireDays,
+      forceChangeInitPwd,
+    } = formState;
+
+    const params = {
+      blackWhiteListMode,
+      lockEnable,
+      defaultPassword,
+      expireDays,
+      forceChangeInitPwd,
+    };
+
+    if (lockEnable) {
+      Object.assign(params, {
+        allowFailCounts,
+        lockMinutes,
+      });
+    }
+
+    await postSysconfigEditSysSecurityConfig({ content: JSON.stringify(params) });
+    setLoading(false);
+    message.success('配置更改成功');
+  }
+  catch (error) {
+    setLoading(false);
+  }
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    pt-10px
+    px-10px
+    overflow-auto
+  >
+    <div h-full min-w-1130px>
+      <div
+        class="pt-20px flex flex-col box-border bg-white dark:bg-[#141414] text-[#4e5969] dark:text-[#C9CDD4]"
+      >
+        <a-form
+          ref="formRef"
+          :model="formState"
+          :rules="rules"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          class="safe-rule-form"
+        >
+          <a-form-item label="黑白名单模式" name="blackWhiteListMode">
+            <a-select v-model:value="formState.blackWhiteListMode" placeholder="请选择" :options="modeOptions" />
+          </a-form-item>
+          <a-form-item label="是否开启密码错误后锁定账号" name="lockEnable">
+            <a-switch v-model:checked="formState.lockEnable" />
+          </a-form-item>
+          <!-- 应该用formState.lockEnable 但会导致formRef.value.validate不存在 -->
+          <template v-if="formState.lockEnable">
+            <!-- v-if="formState.lockEnable" key="allowFailCounts" 或 v-show -->
+            <a-form-item label="允许密码连续错误次数" name="allowFailCounts">
+              <a-input v-model:value="formState.allowFailCounts" mr-12px />次
+            </a-form-item>
+            <!-- v-if="formState.lockEnable" key="lockMinutes" 或 v-show -->
+            <a-form-item label="锁定多少分钟" name="lockMinutes">
+              <span><a-input v-model:value="formState.lockMinutes" mr-12px />分钟</span>
+            </a-form-item>
+          </template>
+          <a-form-item label="默认密码设置" name="defaultPassword">
+            <a-input v-model:value="formState.defaultPassword" />
+          </a-form-item>
+          <a-form-item label="密码过期天数" name="expireDays">
+            <a-input v-model:value="formState.expireDays" mr-12px />天
+          </a-form-item>
+          <a-form-item label="是否开启强制修改初始化密码" name="forceChangeInitPwd">
+            <a-switch v-model:checked="formState.forceChangeInitPwd" />
+          </a-form-item>
+          <div v-auth="'change_safe_setting'" class="p-16px text-right b-t-1 b-t-style-solid b-t-color-[#e5e6eb] dark:b-t-color-[#424242]">
+            <a-button type="primary" @click="onSubmit">
+              更改配置
+            </a-button>
+          </div>
+        </a-form>
+      </div>
+
+      <div class="mt-10px bg-white dark:bg-[#141414] text-[#4e5969] dark:text-[#C9CDD4]">
+        <PassStrengthValidator v-model="formState.defaultPassword" v-model:validate="isDefaultPasswordValid" vertical />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.safe-rule-form {
+  .ant-input,
+  .ant-select {
+    width: 90%;
+  }
+}
+</style>

package/src/views/tabbar_setting/animationData.ts

@@ -0,0 +1,23 @@
+import darkEnableData from '@/assets/lottie/tabbar/dark/enable.json?url';
+import darkEnableHotkeysData from '@/assets/lottie/tabbar/dark/enableHotkeys.json?url';
+import darkEnableIconData from '@/assets/lottie/tabbar/dark/enableIcon.json?url';
+import darkEnableMemoryData from '@/assets/lottie/tabbar/dark/enableMemory.json?url';
+import darkStyleData from '@/assets/lottie/tabbar/dark/style.json?url';
+import lightEnableData from '@/assets/lottie/tabbar/light/enable.json?url';
+import lightEnableHotkeysData from '@/assets/lottie/tabbar/light/enableHotkeys.json?url';
+import lightEnableIconData from '@/assets/lottie/tabbar/light/enableIcon.json?url';
+import lightEnableMemoryData from '@/assets/lottie/tabbar/light/enableMemory.json?url';
+import lightStyleData from '@/assets/lottie/tabbar/light/style.json?url';
+
+export {
+  darkEnableData,
+  darkEnableHotkeysData,
+  darkEnableIconData,
+  darkEnableMemoryData,
+  darkStyleData,
+  lightEnableData,
+  lightEnableHotkeysData,
+  lightEnableIconData,
+  lightEnableMemoryData,
+  lightStyleData,
+};

package/src/views/tabbar_setting/index.vue

@@ -0,0 +1,186 @@
+<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,
+  darkEnableHotkeysData,
+  darkEnableIconData,
+  darkEnableMemoryData,
+  darkStyleData,
+  lightEnableData,
+  lightEnableHotkeysData,
+  lightEnableIconData,
+  lightEnableMemoryData,
+  lightStyleData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'TabbarAnimationSetting',
+});
+
+const settingsStore = useSettingsStore();
+
+const styleOptions = [
+  { label: '时尚', value: 'fashion' },
+  { label: '卡片', value: 'card' },
+  { label: '方块', value: 'square' },
+];
+type RelVal = Exclude<Settings.tabbar['style'], undefined>;
+type Val = RelVal | '';
+
+const tabbarAnimationList = 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.tabbar.enable,
+    activeStyle: '',
+    lightData: lightEnableData,
+    darkData: darkEnableData,
+  },
+  {
+    name: '风格',
+    type: 'check',
+    descripe: '',
+    open: true,
+    activeStyle: settingsStore.globalSettings.tabbar.style,
+    styleOptions,
+    lightData: lightStyleData,
+    darkData: darkStyleData,
+  },
+  {
+    name: '是否显示图标',
+    type: 'switch',
+    descripe: '',
+    open: settingsStore.globalSettings.tabbar.enableIcon,
+    activeStyle: '',
+    lightData: lightEnableIconData,
+    darkData: darkEnableIconData,
+  },
+  {
+    name: '是否启用记忆功能',
+    type: 'switch',
+    descripe: '开启该功能后，非固定和非常驻的标签页将在本次会话窗口中始终存在，刷新浏览器或重新登录时不会丢失',
+    open: settingsStore.globalSettings.tabbar.enableMemory,
+    activeStyle: '',
+    lightData: lightEnableMemoryData,
+    darkData: darkEnableMemoryData,
+  },
+
+  {
+    name: '是否启用快捷键',
+    type: 'switch',
+    descripe: '',
+    open: settingsStore.globalSettings.tabbar.enableHotkeys,
+    activeStyle: '',
+    lightData: lightEnableHotkeysData,
+    darkData: darkEnableHotkeysData,
+  },
+]);
+
+let jsonStr = '';
+function onChange(index: number, ck: boolean | Val) {
+  switch (index) {
+    case 0:
+      settingsStore.globalSettings.tabbar.enable = ck as boolean;
+      jsonStr = JSON.stringify({
+        tabbar: {
+          enable: ck,
+        },
+      });
+      break;
+    case 1:
+      settingsStore.globalSettings.tabbar.style = ck as RelVal;
+      jsonStr = JSON.stringify({
+        tabbar: {
+          style: ck,
+        },
+      });
+      break;
+    case 2:
+      settingsStore.globalSettings.tabbar.enableIcon = ck as boolean;
+      jsonStr = JSON.stringify({
+        tabbar: {
+          enableIcon: ck,
+        },
+      });
+      break;
+    case 3:
+      settingsStore.globalSettings.tabbar.enableMemory = ck as boolean;
+      jsonStr = JSON.stringify({
+        tabbar: {
+          enableMemory: ck,
+        },
+      });
+      break;
+    case 4:
+      settingsStore.globalSettings.tabbar.enableHotkeys = ck as boolean;
+      jsonStr = JSON.stringify({
+        tabbar: {
+          enableHotkeys: 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_tabbar" 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 tabbarAnimationList"
+          :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: Val) => onChange(index, val)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bar-header {
+  background: var(--g-bg);
+}
+</style>