@pubinfo-nightly/module-rbac 2025.11.14

package/src/views/layout_setting/index.vue

@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue';
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+
+defineOptions({
+  name: 'LayoutSetting',
+});
+
+const settingsStore = useSettingsStore();
+const menu = ref(settingsStore.globalSettings.menu.menuMode);
+
+const modeSide = reactive<
+  {
+    describe: string
+    placement: string
+    active: Settings.menu['menuMode']
+  }[]
+>([
+  {
+    describe: '顶部模式',
+    placement: 'bottom',
+    active: 'head',
+  },
+  {
+    describe: '侧边栏模式 (含主导航)',
+    placement: 'bottom',
+    active: 'side',
+  },
+  {
+    describe: '侧边栏模式 (不含主导航)',
+    placement: 'bottom',
+    active: 'single',
+  },
+  {
+    describe: '侧边栏精简模式',
+    placement: 'bottom',
+    active: 'only-side',
+  },
+  {
+    describe: '顶部精简模式',
+    placement: 'bottom',
+    active: 'only-head',
+  },
+]);
+
+function clickHandle(item: Settings.menu['menuMode']) {
+  if (item) {
+    menu.value = item;
+    settingsStore.globalSettings.menu.menuMode = item;
+    const jsonStr = JSON.stringify({
+      menu: {
+        menuMode: item,
+      },
+    });
+    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="bg-[#F0F4FF] h-[38px] pl-[16px] flex flex-row items-center dark:bg-[#32353B]">
+        <PubinfoIcon name="icon_layout" class="text-base mr-[6px]" :size="22" />
+        <span class="text-[16px] text-[#1d2129] dark:text-[#C9CDD4]">布局模式</span>
+      </div>
+      <div class="mt-[15px] flex-1 flex flex-row">
+        <div class="flex-none w-[110px] text-right font-400 text-[#4e5969] text-[14px] pt-10px dark:text-[#C9CDD4]">
+          模式选择
+        </div>
+        <div class="flex-auto grid grid-cols-3 gap-[20px] px-30px w-full h-0 max-w-1500px" aspect="[3/2]">
+          <div
+            v-for="mode in modeSide"
+            :key="mode.active"
+            class="item"
+            :class="[menu === mode.active ? 'active' : '', `item-${mode.active}`]"
+            aspect="[9/6]"
+            @click="clickHandle(mode.active)"
+          >
+            <div class="text-[#4E5969] text-[14px] dark:text-[#C9CDD4]">
+              {{ mode.describe }}
+            </div>
+            <div class="my-[6px] mode" :class="`mode-${mode.active}`">
+              <div class="mode-container" />
+            </div>
+            <div class="flex-1 w-[75%] rounded-[8px] jb py-[10px] flex justify-center">
+              <div class="layout-demo" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  --at-apply: flex flex-col cursor-pointer border border-[color:var(--g-tabbar-tab-hover-bg)] pt-[26px] rounded-lg border-solid;
+  place-items: center center;
+  background: linear-gradient(180deg, var(--g-bg) 0%, var(--g-bg) 100%);
+}
+
+.item .mode {
+  --at-apply: relative w-16 h-12 transition;
+}
+
+.item .mode::before,
+.item .mode::after,
+.item .mode .mode-container {
+  --at-apply: absolute pointer-events-none border-[0.15rem];
+}
+
+.item .mode::before {
+  --at-apply: content-empty bg-ui-primary;
+}
+
+.item .mode::after {
+  --at-apply: content-empty bg-ui-primary/60;
+}
+
+.item .mode .mode-container {
+  --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+}
+
+.item .mode .mode-container::before {
+  --at-apply: content-empty absolute w-full h-full;
+}
+
+.item .mode-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
+
+.item .mode-side::after {
+  --at-apply: top-2 bottom-2 left-4.5 w-3;
+}
+
+.item .mode-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+}
+
+.item .mode-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
+
+.item .mode-head::after {
+  --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+}
+
+.item .mode-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+}
+
+.item .mode-single::after {
+  --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+}
+
+.item .mode-single .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+}
+
+.item .mode-only-side::before {
+  --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+}
+
+.item .mode-only-side .mode-container {
+  --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
+}
+
+.item .mode-only-head::before {
+  --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+}
+
+.item .mode-only-head .mode-container {
+  --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
+}
+
+.item .jb {
+  background: linear-gradient(180deg, var(--g-container-bg) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.item .jb .layout-demo {
+  --at-apply: w-70%;
+}
+
+.item-side .layout-demo {
+  background: url("@/assets/images/layout/item2.webp") no-repeat;
+  background-size: 100%;
+}
+
+.item-head .layout-demo {
+  background: url("@/assets/images/layout/item1.webp") no-repeat;
+  background-size: 100%;
+}
+
+.item-single .layout-demo {
+  background: url("@/assets/images/layout/item3.webp") no-repeat;
+  background-size: 100%;
+}
+
+.item-only-side .layout-demo {
+  background: url("@/assets/images/layout/item4.webp") no-repeat;
+  background-size: 100%;
+}
+
+.item-only-head .layout-demo {
+  background: url("@/assets/images/layout/item5.webp") no-repeat;
+  background-size: 100%;
+}
+
+.item.active {
+  border: 2.6px solid rgb(var(--ui-primary));
+  border-radius: 8px;
+  box-shadow: 0 2.6px 13px 0 #59626940;
+}
+
+/* 深色主题样式 */
+:deep([data-theme="dark"]) .item,
+:deep([data-theme="dracula"]) .item,
+:deep([data-theme="luxury"]) .item,
+:deep([data-theme="stone"]) .item,
+:deep([data-theme="night"]) .item,
+:deep([data-theme="synthwave"]) .item {
+  background: #3a3e43;
+  border: 1px solid transparent;
+}
+
+:deep([data-theme="dark"]) .item-side .layout-demo,
+:deep([data-theme="dracula"]) .item-side .layout-demo,
+:deep([data-theme="luxury"]) .item-side .layout-demo,
+:deep([data-theme="stone"]) .item-side .layout-demo,
+:deep([data-theme="night"]) .item-side .layout-demo,
+:deep([data-theme="synthwave"]) .item-side .layout-demo {
+  background: url("@/assets/images/layout/item2_dark.webp") no-repeat;
+  background-size: 100%;
+}
+
+:deep([data-theme="dark"]) .item-head .layout-demo,
+:deep([data-theme="dracula"]) .item-head .layout-demo,
+:deep([data-theme="luxury"]) .item-head .layout-demo,
+:deep([data-theme="stone"]) .item-head .layout-demo,
+:deep([data-theme="night"]) .item-head .layout-demo,
+:deep([data-theme="synthwave"]) .item-head .layout-demo {
+  background: url("@/assets/images/layout/item1_dark.webp") no-repeat;
+  background-size: 100%;
+}
+
+:deep([data-theme="dark"]) .item-single .layout-demo,
+:deep([data-theme="dracula"]) .item-single .layout-demo,
+:deep([data-theme="luxury"]) .item-single .layout_demo,
+:deep([data-theme="stone"]) .item-single .layout-demo,
+:deep([data-theme="night"]) .item-single .layout-demo,
+:deep([data-theme="synthwave"]) .item-single .layout-demo {
+  background: url("@/assets/images/layout/item3_dark.webp") no-repeat;
+  background-size: 100%;
+}
+
+:deep([data-theme="dark"]) .item-only-side .layout-demo,
+:deep([data-theme="dracula"]) .item-only-side .layout-demo,
+:deep([data-theme="luxury"]) .item-only-side .layout-demo,
+:deep([data-theme="stone"]) .item-only-side .layout-demo,
+:deep([data-theme="night"]) .item-only-side .layout-demo,
+:deep([data-theme="synthwave"]) .item-only-side .layout-demo {
+  background: url("@/assets/images/layout/item4_dark.webp") no-repeat;
+  background-size: 100%;
+}
+
+:deep([data-theme="dark"]) .item-only-head .layout-demo,
+:deep([data-theme="dracula"]) .item-only-head .layout-demo,
+:deep([data-theme="luxury"]) .item-only-head .layout-demo,
+:deep([data-theme="stone"]) .item-only-head .layout-demo,
+:deep([data-theme="night"]) .item-only-head .layout-demo,
+:deep([data-theme="synthwave"]) .item-only-head .layout-demo {
+  background: url("@/assets/images/layout/item5_dark.webp") no-repeat;
+  background-size: 100%;
+}
+
+:deep([data-theme="dark"]) .item.active,
+:deep([data-theme="dracula"]) .item.active,
+:deep([data-theme="luxury"]) .item.active,
+:deep([data-theme="stone"]) .item.active,
+:deep([data-theme="night"]) .item.active,
+:deep([data-theme="synthwave"]) .item.active {
+  border: 2.6px solid rgb(var(--ui-primary));
+  border-radius: 8px;
+  box-shadow: 0 2.6px 13px 0 rgba(89, 98, 105, 0.25);
+}
+</style>

package/src/views/log_center/components/browserType.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps({
+  browserName: {
+    type: String,
+    required: true,
+  },
+});
+
+function getBrowserType(browser: string) {
+  if (browser.includes('Chrome')) {
+    return 'chrome';
+  }
+
+  if (browser.includes('Edge')) {
+    return 'edge';
+  }
+
+  if (browser.includes('Safari')) {
+    return 'safari';
+  }
+
+  if (browser.includes('Internet Explorer')) {
+    return 'ie';
+  }
+
+  return 'other';
+}
+</script>
+
+<template>
+  <div flex items-center>
+    <PubinfoIcon :name="`browser-${getBrowserType(browserName)}`" class="text-20px mr-5px" />
+    <span>{{ browserName }}</span>
+  </div>
+</template>

package/src/views/log_center/components/loginHistoryDetail.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import BrowserType from './browserType.vue';
+
+defineProps({
+  visible: Boolean,
+  data: Object,
+});
+const emit = defineEmits(['close']);
+
+function notifyClose() {
+  emit('close');
+}
+</script>
+
+<template>
+  <a-drawer
+    :open="visible"
+    title="登录日志"
+    placement="right"
+    :width="900"
+    :footer-style="{ textAlign: 'right' }"
+    @close="notifyClose"
+  >
+    <div class="detail-info">
+      <a-descriptions :column="2">
+        <a-descriptions-item label="用户id">
+          {{ data?.userId }}
+        </a-descriptions-item>
+        <a-descriptions-item label="账号名">
+          {{ data?.loginName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="用户姓名">
+          {{ data?.realName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="登录组织名称">
+          {{ data?.orgName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="登录IP">
+          {{ data?.loginIp }}
+        </a-descriptions-item>
+        <a-descriptions-item label="登录时间">
+          {{ data?.loginTime }}
+        </a-descriptions-item>
+        <a-descriptions-item label="登录类型">
+          {{ data?.loginType }}
+        </a-descriptions-item>
+        <a-descriptions-item label="操作设备/操作系统类型">
+          {{ data?.deviceType }}
+        </a-descriptions-item>
+        <a-descriptions-item label="登录浏览器">
+          <BrowserType :browser-name="data?.browserName" />
+        </a-descriptions-item>
+        <a-descriptions-item label="登录是否成功">
+          {{ data?.success ? '是' : '否' }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped>
+.detail-info :deep(.ant-descriptions-item-label) {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-info :deep(.ant-descriptions-item-content) {
+  color: rgba(0, 0, 0, 1);
+}
+</style>

package/src/views/log_center/components/operateHistoryDetail.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import BrowserType from './browserType.vue';
+
+defineProps({
+  visible: Boolean,
+  data: Object,
+});
+const emit = defineEmits(['close']);
+
+function notifyClose() {
+  emit('close');
+}
+</script>
+
+<template>
+  <a-drawer
+    :open="visible"
+    title="操作日志"
+    placement="right"
+    :width="900"
+    :footer-style="{ textAlign: 'right' }"
+    @close="notifyClose"
+  >
+    <div class="detail-info">
+      <a-descriptions :column="2">
+        <a-descriptions-item label="操作说明">
+          {{ data?.title }}
+        </a-descriptions-item>
+        <a-descriptions-item label="操作类型">
+          {{ data?.operateType }}
+        </a-descriptions-item>
+        <a-descriptions-item label="操作时间">
+          {{ data?.operateTime }}
+        </a-descriptions-item>
+        <a-descriptions-item label="操作模块">
+          {{ data?.moduleName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="请求参数">
+          {{ data?.requestParams }}
+        </a-descriptions-item>
+        <a-descriptions-item label="请求方法">
+          {{ data?.requestMethod }}
+        </a-descriptions-item>
+        <a-descriptions-item label="请求地址">
+          {{ data?.requestUri }}
+        </a-descriptions-item>
+        <a-descriptions-item label="操作人IP">
+          {{ data?.remoteAddr }}
+        </a-descriptions-item>
+        <a-descriptions-item label="服务端IP">
+          {{ data?.serverAddr }}
+        </a-descriptions-item>
+        <a-descriptions-item label="是否异常">
+          {{ data?.success ? '否' : '是' }}
+        </a-descriptions-item>
+        <a-descriptions-item label="执行时间">
+          {{ data?.executeTime }}ms
+        </a-descriptions-item>
+        <a-descriptions-item label="操作设备/操作系统类型">
+          {{ data?.deviceType }}
+        </a-descriptions-item>
+        <a-descriptions-item label="浏览器名称">
+          <BrowserType :browser-name="data?.browserName" />
+        </a-descriptions-item>
+      </a-descriptions>
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped>
+.detail-info ::v-deep(.ant-descriptions-item-label) {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.detail-info ::v-deep(.ant-descriptions-item-content) {
+  color: rgba(0, 0, 0, 1);
+}
+</style>

package/src/views/log_center/login_history.vue

@@ -0,0 +1,234 @@
+<script setup lang="tsx">
+import type { ProColumns } from '@pubinfo/pro-components';
+import { ProTable } from '@pubinfo/pro-components';
+import { postLogLoginPage } from '@/api/modules/log';
+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 scoped>
+.status-mark {
+  --at-apply: inline-block w-2 h-2 bg-[#aeaeae] mr-1 rounded-[50%];
+}
+
+.status-mark.active {
+  --at-apply: [background:#01d689];
+}
+</style>