@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/log_center/login_history.vue

@@ -0,0 +1,239 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { postLogLoginPage } from '@/api/modules/log';
+import { ProTable } from '@pubinfo/pro-components';
+import LoginHistoryDetail from './components/loginHistoryDetail.vue';
+
+defineOptions({
+  name: 'LoginHistory',
+});
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerVisible = ref(false);
+const detailData = ref<API.PubLoginLogDto>();
+
+const columns: ProColumns<API.PubLoginLogDto> = [
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '人员账号',
+    dataIndex: 'loginName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '人员姓名',
+    dataIndex: 'realName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '部门',
+    dataIndex: 'orgName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '登录IP',
+    dataIndex: 'loginIp',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-range-picker',
+    hideInTable: true,
+    title: '登录时间',
+    dataIndex: 'loginTime',
+    fieldProps: {
+      placeholder: ['开始时间', '结束时间'],
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    width: 60,
+    title: '序号',
+    customRender: ({ index }) => index + 1,
+  },
+  {
+    hideInSearch: true,
+    title: '人员账号',
+    dataIndex: 'loginName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '人员姓名',
+    dataIndex: 'realName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '登录方式',
+    dataIndex: 'loginType',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '登录时间',
+    dataIndex: 'loginTime',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '登录人部门',
+    dataIndex: 'orgName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '登录IP',
+    dataIndex: 'loginIp',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '登录状态',
+    dataIndex: 'success',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    fixed: 'right',
+    hideInTable() {
+      return !auth('login_history_view');
+    },
+  },
+];
+
+onMounted(getListData);
+
+async function request(params: any) {
+  const { current, pageSize, loginName, loginTime, realName, orgName, loginIp } = params;
+  const ps: any = {
+    pageSize,
+    currentPage: current,
+    doSearchTotal: true,
+  };
+  if (loginName) {
+    Object.assign(ps, { loginName });
+  }
+  if (realName) {
+    Object.assign(ps, { realName });
+  }
+  if (orgName) {
+    Object.assign(ps, { orgName });
+  }
+  if (loginIp) {
+    Object.assign(ps, { loginIp });
+  }
+  if (loginTime && loginTime.length === 2) {
+    Object.assign(ps, {
+      loginStartTime: loginTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      loginEndTime: loginTime[1].format('YYYY-MM-DD HH:mm:ss'),
+    });
+  }
+
+  const res: API.ResponseDataPageDataPubLoginLogDto = await postLogLoginPage(ps);
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+function getListData() {
+  tableRef.value.reload();
+}
+
+function showDetailDrawer(record: API.PubLoginLogDto) {
+  drawerVisible.value = true;
+  detailData.value = record;
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+    flex
+    flex-col
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1000 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'success'">
+          <div class="flex items-center">
+            <i class="status-mark" :class="[{ active: record.success }]" />
+            <span class="ml-4px">{{ record.success ? '成功' : '失败' }}</span>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              class="flex items-center"
+              @click="() => showDetailDrawer(record)"
+            >
+              <PubinfoIcon name="view" class="text-20px" />
+              <span class="ml-4px">查看</span>
+            </a>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <LoginHistoryDetail
+      :visible="drawerVisible"
+      :data="detailData"
+      @close="drawerVisible = false"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.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/log_center/operate_history.vue

@@ -0,0 +1,233 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { postLogOperatePage } from '@/api/modules/log';
+import { ProTable } from '@pubinfo/pro-components';
+import OperateHistoryDetail from './components/operateHistoryDetail.vue';
+
+defineOptions({
+  name: 'OperateHistory',
+});
+
+const { auth } = useAuth();
+const tableRef = ref();
+const drawerVisible = ref(false);
+const detailData = ref<API.PubOperateLogDto>();
+
+const columns: ProColumns<API.PubOperateLogDto> = [
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '模块标题',
+    dataIndex: 'moduleName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '操作人姓名 ',
+    dataIndex: 'realName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '操作人账号 ',
+    dataIndex: 'loginName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-input',
+    hideInTable: true,
+    title: '部门',
+    dataIndex: 'orgName',
+    fieldProps: {
+      placeholder: '请输入',
+      allowClear: true,
+    },
+  },
+  {
+    valueType: 'a-range-picker',
+    hideInTable: true,
+    title: '操作时间',
+    dataIndex: 'operateTime',
+    fieldProps: {
+      placeholder: ['开始时间', '结束时间'],
+      showTime: true,
+      format: 'YYYY-MM-DD HH:mm:ss',
+      allowClear: true,
+    },
+  },
+  {
+    hideInSearch: true,
+    width: 60,
+    title: '序号',
+    customRender: ({ index }) => index + 1,
+  },
+  {
+    hideInSearch: true,
+    title: '模块标题',
+    dataIndex: 'moduleName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    width: 400,
+    title: '来源渠道',
+    dataIndex: 'requestUri',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作时间',
+    dataIndex: 'operateTime',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作人姓名',
+    dataIndex: 'realName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作人账号',
+    dataIndex: 'loginName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作人部门',
+    dataIndex: 'orgName',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作状态',
+    dataIndex: 'success',
+    ellipsis: true,
+  },
+  {
+    hideInSearch: true,
+    title: '操作',
+    dataIndex: 'action',
+    width: 100,
+    fixed: 'right',
+    hideInTable() {
+      return !auth('operate_history_view');
+    },
+  },
+];
+
+onMounted(getListData);
+
+async function request(params: any) {
+  const { current, pageSize, moduleName, realName, loginName, orgName, operateTime } = params;
+  const ps: any = {
+    pageSize,
+    currentPage: current,
+    doSearchTotal: true,
+  };
+  if (moduleName) {
+    Object.assign(ps, { moduleName });
+  }
+  if (realName) {
+    Object.assign(ps, { realName });
+  }
+  if (orgName) {
+    Object.assign(ps, { orgName });
+  }
+  if (loginName) {
+    Object.assign(ps, { loginName });
+  }
+  if (operateTime && operateTime.length === 2) {
+    Object.assign(ps, {
+      operateStartTime: operateTime[0].format('YYYY-MM-DD HH:mm:ss'),
+      operateEndTime: operateTime[1].format('YYYY-MM-DD HH:mm:ss'),
+    });
+  }
+  const res: API.ResponseDataPageDataPubOperateLogDto = await postLogOperatePage(ps);
+  return {
+    success: res.success,
+    data: res.data?.records ?? [],
+    total: res.data?.total ?? 0,
+  };
+}
+
+function getListData() {
+  tableRef.value.reload();
+}
+
+function showDetailDrawer(record: API.PubOperateLogDto) {
+  drawerVisible.value = true;
+  detailData.value = record;
+}
+</script>
+
+<template>
+  <div
+    w-full
+    h-full
+    py-10px
+    px-10px
+    flex
+    flex-col
+  >
+    <ProTable
+      ref="tableRef"
+      row-key="id"
+      :request="request"
+      :columns="columns"
+      auto-height
+      :scroll="{ x: 1000 }"
+    >
+      <template #bodyCell="{ column, record }">
+        <template v-if="column.dataIndex === 'success'">
+          <div class="flex items-center">
+            <i class="status-mark" :class="[{ active: record.success }]" />
+            <span class="ml-4px">{{ record.success ? '正常' : '异常' }}</span>
+          </div>
+        </template>
+        <template v-if="column.dataIndex === 'action'">
+          <a-space>
+            <a
+              class="flex items-center"
+              @click="() => showDetailDrawer(record)"
+            >
+              <PubinfoIcon name="view" class="text-20px" />
+              <span class="ml-4px">查看</span>
+            </a>
+          </a-space>
+        </template>
+      </template>
+    </ProTable>
+    <OperateHistoryDetail
+      :visible="drawerVisible"
+      :data="detailData"
+      @close="drawerVisible = false"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.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/menu_setting/animationData.ts

@@ -0,0 +1,27 @@
+import darkEnableHotkeysData from '@/assets/lottie/menu/dark/enableHotkeys.json?url';
+import darkEnableSubMenuCollapseButtonData from '@/assets/lottie/menu/dark/enableSubMenuCollapseButton.json?url';
+import darkIsRoundedData from '@/assets/lottie/menu/dark/isRounded.json?url';
+import darkMenuActiveStyleData from '@/assets/lottie/menu/dark/menuActiveStyle.json?url';
+import darkSubMenuCollapseData from '@/assets/lottie/menu/dark/subMenuCollapse.json?url';
+import darkSubMenuUniqueOpenedData from '@/assets/lottie/menu/dark/subMenuUniqueOpened.json?url';
+import lightEnableHotkeysData from '@/assets/lottie/menu/light/enableHotkeys.json?url';
+import lightEnableSubMenuCollapseButtonData from '@/assets/lottie/menu/light/enableSubMenuCollapseButton.json?url';
+import lightIsRoundedData from '@/assets/lottie/menu/light/isRounded.json?url';
+import lightMenuActiveStyleData from '@/assets/lottie/menu/light/menuActiveStyle.json?url';
+import lightSubMenuCollapseData from '@/assets/lottie/menu/light/subMenuCollapse.json?url';
+import lightSubMenuUniqueOpenedData from '@/assets/lottie/menu/light/subMenuUniqueOpened.json?url';
+
+export {
+  darkEnableHotkeysData,
+  darkEnableSubMenuCollapseButtonData,
+  darkIsRoundedData,
+  darkMenuActiveStyleData,
+  darkSubMenuCollapseData,
+  darkSubMenuUniqueOpenedData,
+  lightEnableHotkeysData,
+  lightEnableSubMenuCollapseButtonData,
+  lightIsRoundedData,
+  lightMenuActiveStyleData,
+  lightSubMenuCollapseData,
+  lightSubMenuUniqueOpenedData,
+};

package/src/views/menu_setting/index.vue

@@ -0,0 +1,207 @@
+<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 {
+  darkEnableHotkeysData,
+  darkEnableSubMenuCollapseButtonData,
+  darkIsRoundedData,
+  darkMenuActiveStyleData,
+  darkSubMenuCollapseData,
+  darkSubMenuUniqueOpenedData,
+  lightEnableHotkeysData,
+  lightEnableSubMenuCollapseButtonData,
+  lightIsRoundedData,
+  lightMenuActiveStyleData,
+  lightSubMenuCollapseData,
+  lightSubMenuUniqueOpenedData,
+} from './animationData.ts';
+
+defineOptions({
+  name: 'MenuAnimationSetting',
+});
+
+const settingsStore = useSettingsStore();
+const menuMode = toRef(settingsStore.globalSettings.menu, 'menuMode');
+
+const styleOptions = [
+  { icon: 'i-jam-stop-sign', value: '' },
+  { icon: ['head', 'only-head'].includes(menuMode.value) ? 'i-ep-caret-top' : 'i-ep-caret-left', value: 'arrow' },
+  { icon: ['side', 'only-side'].includes(menuMode.value) ? 'i-tabler-minus-vertical' : 'i-tabler-minus', value: 'line' },
+  { icon: 'i-icon-park-outline-dot', value: 'dot' },
+];
+
+type Val = Exclude<Settings.menu['menuActiveStyle'], undefined>;
+
+const menuAnimationList = reactive<
+  {
+    type: string
+    name: string
+    descripe: string
+    open: boolean
+    activeStyle: Val
+    styleOptions?: typeof styleOptions
+    lightData: string
+    darkData: string
+  }[]
+>([
+  {
+    type: 'switch',
+    name: '次导航保持展开一个',
+    descripe: '开启该功能后，次导航只保持单个菜单的展开',
+    open: settingsStore.globalSettings.menu.subMenuUniqueOpened,
+    activeStyle: '',
+    lightData: lightSubMenuUniqueOpenedData,
+    darkData: darkSubMenuUniqueOpenedData,
+  },
+  {
+    type: 'switch',
+    name: '次导航是否折叠',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.subMenuCollapse,
+    activeStyle: '',
+    lightData: lightSubMenuCollapseData,
+    darkData: darkSubMenuCollapseData,
+  },
+  {
+    type: 'switch',
+    name: '显示次导航折叠按钮',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.enableSubMenuCollapseButton,
+    activeStyle: '',
+    lightData: lightEnableSubMenuCollapseButtonData,
+    darkData: darkEnableSubMenuCollapseButtonData,
+  },
+  {
+    type: 'switch',
+    name: '是否圆角',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.isRounded,
+    activeStyle: '',
+    lightData: lightIsRoundedData,
+    darkData: darkIsRoundedData,
+  },
+  {
+    type: 'check',
+    name: '激活风格',
+    descripe: '',
+    open: true,
+    activeStyle: settingsStore.globalSettings.menu.menuActiveStyle,
+    styleOptions,
+    lightData: lightMenuActiveStyleData,
+    darkData: darkMenuActiveStyleData,
+  },
+  {
+    type: 'switch',
+    name: '是否启用快捷键',
+    descripe: '',
+    open: settingsStore.globalSettings.menu.enableHotkeys,
+    activeStyle: '',
+    lightData: lightEnableHotkeysData,
+    darkData: darkEnableHotkeysData,
+  },
+]);
+
+let jsonStr = '';
+function onChange(index: number, ck: boolean | Val) {
+  switch (index) {
+    case 0:
+      settingsStore.globalSettings.menu.subMenuUniqueOpened = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          subMenuUniqueOpened: ck,
+        },
+      });
+      break;
+    case 1:
+      settingsStore.globalSettings.menu.subMenuCollapse = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          subMenuCollapse: ck,
+        },
+      });
+      break;
+    case 2:
+      settingsStore.globalSettings.menu.enableSubMenuCollapseButton = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          enableSubMenuCollapseButton: ck,
+        },
+      });
+      break;
+    case 3:
+      settingsStore.globalSettings.menu.isRounded = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          isRounded: ck,
+        },
+      });
+      break;
+    case 4:
+      settingsStore.globalSettings.menu.menuActiveStyle = ck as Val;
+      jsonStr = JSON.stringify({
+        menu: {
+          menuActiveStyle: ck,
+        },
+      });
+      break;
+    case 5:
+      settingsStore.globalSettings.menu.enableHotkeys = ck as boolean;
+      jsonStr = JSON.stringify({
+        menu: {
+          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_menu" 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 menuAnimationList"
+          :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>