@pubinfo/module-rbac 2.0.0-beta.3

package/src/views/layout_setting/index.vue

@@ -0,0 +1,306 @@
+<script setup lang="ts">
+import { postSysconfigAddOrEidtSysThemeStyleConfig } from '@/api/modules/configData';
+import { useSettingsStore } from '@/stores';
+import { message } from 'ant-design-vue';
+
+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 lang="scss" scoped>
+.item {
+  display: flex;
+  flex-direction: column;
+  place-items: center center;
+  padding-top: 26px;
+  cursor: pointer;
+  background: linear-gradient(180deg, var(--g-bg) 0%, var(--g-bg) 100%);
+  border: 1px solid var(--g-tabbar-tab-hover-bg);
+  border-radius: 8px;
+
+  .mode {
+    --at-apply: relative w-16 h-12 transition;
+
+    &::before,
+    &::after,
+    .mode-container {
+      --at-apply: absolute pointer-events-none;
+
+      border-width: 0.15rem;
+    }
+
+    &::before {
+      --at-apply: content-empty bg-ui-primary;
+    }
+
+    &::after {
+      --at-apply: content-empty bg-ui-primary/60;
+    }
+
+    .mode-container {
+      --at-apply: bg-ui-primary/20 border-dashed border-ui-primary;
+
+      &::before {
+        --at-apply: content-empty absolute w-full h-full;
+      }
+    }
+
+    &-side {
+      &::before {
+        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+      }
+
+      &::after {
+        --at-apply: top-2 bottom-2 left-4.5 w-3;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-8 rounded-tr-1 rounded-br-1;
+      }
+    }
+
+    &-head {
+      &::before {
+        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+      }
+
+      &::after {
+        --at-apply: top-4.5 left-2 bottom-2 w-3 rounded-bl-1;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-5.5 rounded-br-1;
+      }
+    }
+
+    &-single {
+      &::after {
+        --at-apply: top-2 left-2 bottom-2 w-3 rounded-tl-1 rounded-bl-1;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-5.5 rounded-tr-1 rounded-br-1;
+      }
+    }
+
+    &-only-side {
+      &::before {
+        --at-apply: top-2 bottom-2 left-2 w-2 rounded-tl-1 rounded-bl-1;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-2 inset-r-2 inset-b-2 inset-l-4.5 rounded-tr-1 rounded-br-1;
+      }
+    }
+
+    &-only-head {
+      &::before {
+        --at-apply: top-2 left-2 right-2 h-2 rounded-tl-1 rounded-tr-1;
+      }
+
+      .mode-container {
+        --at-apply: inset-t-4.5 inset-r-2 inset-b-2 inset-l-2 rounded-bl-1 rounded-br-1;
+      }
+    }
+  }
+
+  .jb {
+    background: linear-gradient(180deg, var(--g-container-bg) 0%, #fff0 100%);
+
+    .layout-demo {
+      width: 70%;
+    }
+  }
+
+  &-side {
+    .layout-demo {
+      background: url("@/assets/images/layout/item2.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &-head {
+    .layout-demo {
+      background: url("@/assets/images/layout/item1.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &-single {
+    .layout-demo {
+      background: url("@/assets/images/layout/item3.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &-only-side {
+    .layout-demo {
+      background: url("@/assets/images/layout/item4.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &-only-head {
+    .layout-demo {
+      background: url("@/assets/images/layout/item5.webp") no-repeat;
+      background-size: 100%;
+    }
+  }
+
+  &.active {
+    border: 2.6px solid rgb(var(--ui-primary));
+    border-radius: 8px;
+    box-shadow: 0 2.6px 13px 0 #59626940;
+  }
+}
+
+[data-theme="dark"],
+[data-theme="dracula"],
+[data-theme="luxury"],
+[data-theme="stone"],
+[data-theme="night"],
+[data-theme="synthwave"] {
+  .item {
+    background: #3a3e43;
+    border: 1px solid transparent;
+    // .jb {
+    //   background: linear-gradient(180deg, #ffffff1a 0%, #ffffff00 100%);
+    // }
+    &-side {
+      .layout-demo {
+        background: url("@/assets/images/layout/item2_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &-head {
+      .layout-demo {
+        background: url("@/assets/images/layout/item1_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &-single {
+      .layout-demo {
+        background: url("@/assets/images/layout/item3_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &-only-side {
+      .layout-demo {
+        background: url("@/assets/images/layout/item4_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &-only-head {
+      .layout-demo {
+        background: url("@/assets/images/layout/item5_dark.webp") no-repeat;
+        background-size: 100%;
+      }
+    }
+
+    &.active {
+      border: 2.6px solid rgb(var(--ui-primary));
+      border-radius: 8px;
+      box-shadow: 0 2.6px 13px 0 #59626940;
+    }
+  }
+}
+</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,71 @@
+<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 lang="scss" scoped>
+.detail-info {
+  :deep(.ant-descriptions-item-label) {
+    color: rgba($color: #000, $alpha: 60%);
+  }
+
+  :deep(.ant-descriptions-item-content) {
+    color: rgba($color: #000, $alpha: 100%);
+  }
+}
+</style>

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

@@ -0,0 +1,80 @@
+<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 lang="scss" scoped>
+.detail-info {
+  :deep(.ant-descriptions-item-label) {
+    color: rgba($color: #000, $alpha: 60%);
+  }
+
+  :deep(.ant-descriptions-item-content) {
+    color: rgba($color: #000, $alpha: 100%);
+  }
+}
+</style>