@pubinfo/core 2.0.0-beta.1

package/src/assets/styles/globals.scss

@@ -0,0 +1,189 @@
+// 页面布局 CSS 变量
+:root {
+  // 这是一个复合变量
+  // 当页宽模式为 adaption-min-width 时，它代表 最小宽度
+  // 当页宽模式为 center 时，它代表 固定宽度
+  // 当页宽模式为 center-max-width 时，它代表 最大宽度
+  --g-app-width: #{$g-app-width};
+
+  // 头部宽度（默认自适应宽度，可固定宽度，固定宽度后为居中显示）
+  --g-header-width: #{$g-header-width};
+
+  // 头部高度
+  --g-header-height: 56px;
+
+  // 侧边栏宽度
+  --g-main-sidebar-width: 63px;
+  --g-sub-sidebar-width: 220px;
+  --g-sub-sidebar-collapse-width: 64px;
+
+  // 侧边栏 Logo 区域高度
+  --g-sidebar-logo-height: 50px;
+
+  // 标签栏高度
+  --g-tabbar-height: 48px;
+
+  // 工具栏高度
+  --g-toolbar-height: 45px;
+
+  // 标签页最大最小宽度，两个宽度为同一数值时，则为固定宽度，反之将宽度设置为 unset 则为自适应
+  --g-tabbar-tab-max-width: 150px;
+  --g-tabbar-tab-min-width: 150px;
+}
+
+// 明暗模式 CSS 变量
+/* stylelint-disable-next-line no-duplicate-selectors */
+:root {
+  color-scheme: light;
+
+  --g-box-shadow-color: rgb(0 0 0 / 12%);
+
+  &::view-transition-old(root),
+  &::view-transition-new(root) {
+    mix-blend-mode: normal;
+    animation: none;
+  }
+
+  &::view-transition-old(root) {
+    z-index: 1;
+  }
+
+  &::view-transition-new(root) {
+    z-index: 9999;
+  }
+
+  &.dark {
+    color-scheme: dark;
+
+    --g-box-shadow-color: rgb(0 0 0 / 72%);
+
+    &::view-transition-old(root) {
+      z-index: 9999;
+    }
+
+    &::view-transition-new(root) {
+      z-index: 1;
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: rgb(0 0 0 / 40%);
+  background-clip: padding-box;
+  border: 3px solid transparent;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(0 0 0 / 50%);
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  box-sizing: border-box;
+  margin: 0;
+  font-family: Lato, "PingFang SC", "Microsoft YaHei", sans-serif;
+  background-color: var(--g-container-bg);
+  -webkit-tap-highlight-color: transparent;
+
+  &.overflow-hidden {
+    overflow: hidden;
+  }
+}
+
+* {
+  box-sizing: inherit;
+}
+
+// 右侧内容区针对fixed元素，有横向铺满的需求，可在fixed元素上设置 [data-fixed-calc-width]
+[data-fixed-calc-width] {
+  position: fixed;
+  right: 0;
+  left: 50%;
+}
+
+[data-app-width-mode="adaption"],
+[data-app-width-mode="adaption-min-width"] {
+  [data-fixed-calc-width] {
+    width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+    transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  }
+}
+
+[data-app-width-mode="center"],
+[data-app-width-mode="center-max-width"] {
+  [data-fixed-calc-width] {
+    width: calc(var(--g-app-width) - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+    transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+  }
+
+  @media screen and (max-width: $g-app-width) {
+    [data-fixed-calc-width] {
+      width: calc(100% - var(--g-main-sidebar-actual-width) - var(--g-sub-sidebar-actual-width));
+      transform: translateX(-50%) translateX(calc(var(--g-main-sidebar-actual-width) / 2)) translateX(calc(var(--g-sub-sidebar-actual-width) / 2));
+    }
+  }
+}
+
+[data-mode="mobile"] {
+  [data-fixed-calc-width] {
+    width: 100% !important;
+    transform: translateX(-50%) !important;
+  }
+}
+
+// textarea 字体跟随系统
+textarea {
+  font-family: inherit;
+}
+
+/* Overrides Floating Vue */
+.v-popper--theme-dropdown,
+.v-popper--theme-tooltip {
+  --at-apply: inline-flex;
+}
+
+.v-popper--theme-dropdown .v-popper__inner,
+.v-popper--theme-tooltip .v-popper__inner {
+  --at-apply: bg-white  dark:bg-dark-9 text-dark dark:text-white rounded shadow ring-1 ring-gray-200 dark:ring-gray-800 border border-solid border-stone/20 text-xs font-normal;
+
+  box-shadow: 0 6px 30px rgb(0 0 0 / 10%);
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-inner,
+.v-popper--theme-dropdown .v-popper__arrow-inner {
+  --at-apply: border-white dark:border-stone-8;
+}
+
+.v-popper--theme-tooltip .v-popper__arrow-outer,
+.v-popper--theme-dropdown .v-popper__arrow-outer {
+  --at-apply: border-stone/20;
+}
+
+.v-popper--theme-tooltip.v-popper--shown,
+.v-popper--theme-tooltip.v-popper--shown * {
+  transition: none !important;
+}
+
+[data-overlayscrollbars-contents] {
+  overscroll-behavior: contain;
+}
+
+// medium-zoom
+.medium-zoom-overlay,
+.medium-zoom-image {
+  z-index: 3000;
+}

package/src/assets/styles/index.ts

@@ -0,0 +1,6 @@
+import '@unocss/reset/normalize.css';
+import 'overlayscrollbars/overlayscrollbars.css';
+import './globals.scss';
+import './nprogress.scss';
+import './rbac.scss';
+import 'virtual:uno.css';

package/src/assets/styles/nprogress.scss

@@ -0,0 +1,63 @@
+#nprogress {
+  pointer-events: none;
+
+  .bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1031;
+    width: 100%;
+    height: 2px;
+    background: rgb(var(--ui-primary));
+  }
+
+  .peg {
+    position: absolute;
+    right: 0;
+    display: block;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px rgb(var(--ui-primary)), 0 0 5px rgb(var(--ui-primary));
+    opacity: 1;
+    transform: rotate(3deg) translate(0, -4px);
+  }
+
+  .spinner {
+    position: fixed;
+    top: 11px;
+    right: 14px;
+    z-index: 1031;
+    display: block;
+
+    .spinner-icon {
+      box-sizing: border-box;
+      width: 18px;
+      height: 18px;
+      border: solid 2px transparent;
+      border-top-color: rgb(var(--ui-primary));
+      border-left-color: rgb(var(--ui-primary));
+      border-radius: 50%;
+      animation: nprogress-spinner 400ms linear infinite;
+    }
+  }
+}
+
+.nprogress-custom-parent {
+  position: relative;
+  overflow: hidden;
+
+  #nprogress .spinner,
+  #nprogress .bar {
+    position: absolute;
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes nprogress-spinner {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

package/src/assets/styles/rbac.scss

@@ -0,0 +1,61 @@
+// 目前为rbac专用配置，添加自定义样式，在模板中移除
+[data-theme="classic"] {
+  #app-main {
+    // FIXME: 临时解决方案 --------
+    background-image: url("@/assets/images/slider-bg.png");
+    background-repeat: no-repeat;
+    background-position: left bottom;
+    background-size: 450px 89%;
+
+    .sub-sidebar-container {
+      background-color: transparent;
+    }
+
+    & > header {
+      background-image: url("@/assets/images/header-bg.png");
+      background-repeat: no-repeat;
+      background-position: left bottom;
+      background-size: cover;
+
+      .menu {
+        background-color: transparent !important;
+      }
+
+      .header-container {
+        .tools {
+          & > span {
+            background-color: #4173f9;
+          }
+        }
+      }
+    }
+
+    .page-container {
+      padding-left: 0;
+    }
+  }
+
+  .wrapper .sidebar-container {
+    box-shadow: none !important;
+  }
+
+  .wrapper .main-container {
+    box-shadow: none !important;
+  }
+}
+
+/* FIXME: Over rides @pubinfo/pro-components */
+.pro-table {
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+
+  .ant-card .ant-card-body {
+    padding: 16px;
+  }
+
+  .ant-card .ant-card-head {
+    min-height: 48px;
+    padding: 0 16px;
+  }
+}

package/src/assets/styles/resources/utils.scss

@@ -0,0 +1,53 @@
+// 文字超出隐藏，默认为单行超出隐藏，可设置多行
+@mixin text-overflow($line: 1, $fixed-width: true) {
+  @if $line == 1 and $fixed-width == true {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  } @else {
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    -webkit-line-clamp: $line;
+  }
+}
+
+// 定位居中，默认水平居中，可选择垂直居中，或者水平垂直都居中
+@mixin position-center($type: x) {
+  position: absolute;
+
+  @if $type == x {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  @if $type == y {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @if $type == xy {
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+}
+
+// 文字两端对齐
+%justify-align {
+  text-align: justify;
+  text-align-last: justify;
+}
+
+// 清除浮动
+%clearfix {
+  zoom: 1;
+
+  &::before,
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}

package/src/assets/styles/resources/variables.scss

@@ -0,0 +1,6 @@
+// 全局变量
+
+// 因为这两个变量会使用在 @media 上，而 @media 不支持使用 css var ，所以使用 scss var 代替
+// https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries
+$g-app-width: 1400px;
+$g-header-width: 100%;

package/src/components/NotAllowed/index.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { useSettingsStore, useTabbarStore } from '@/stores';
+
+defineOptions({
+  name: 'NotAllowed',
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const settingsStore = useSettingsStore();
+const tabbarStore = useTabbarStore();
+
+const data = ref({
+  inter: Number.NaN,
+  countdown: 5,
+});
+
+onUnmounted(() => {
+  if (data.value.inter) {
+    window.clearInterval(data.value.inter);
+  }
+});
+
+onMounted(() => {
+  if (settingsStore.settings.tabbar.enable) {
+    tabbarStore.remove(route.meta.activeMenu || route.fullPath);
+  }
+  data.value.inter = window.setInterval(() => {
+    data.value.countdown--;
+    if (data.value.countdown === 0) {
+      if (data.value.inter) {
+        window.clearInterval(data.value.inter);
+      }
+      goBack();
+    }
+  }, 1000);
+});
+
+function goBack() {
+  router.push('/');
+}
+</script>
+
+<template>
+  <div class="absolute left-[50%] top-[50%] flex flex-col items-center justify-between lg:flex-row -translate-x-50% -translate-y-50% lg:gap-12">
+    <div class="noPermissionIcon w-300px h-300px lg:w-400px lg:h-400px" />
+    <div class="flex flex-col gap-4">
+      <h1 class="m-0 text-6xl font-sans dark:text-[#C9D6EF]">
+        403
+      </h1>
+      <div class="desc mx-0 text-xl text-stone-5 dark:text-[#C9D6EF]">
+        抱歉，你无权访问该页面
+      </div>
+      <div>
+        <HButton @click="goBack">
+          {{ data.countdown }} 秒后，返回首页
+        </HButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.noPermissionIcon {
+  background: url("@/assets/icons/403.svg") no-repeat;
+  background-size: 100% 100%;
+}
+
+[data-theme="dark"] {
+  .noPermissionIcon {
+    background: url("@/assets/icons/403_dark.svg") no-repeat;
+    background-size: 100% 100%;
+  }
+}
+</style>

package/src/components/PageHeader/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'PageHeader',
+});
+
+defineProps<{
+  title?: string
+  content?: string
+}>();
+
+const slots = useSlots();
+</script>
+
+<template>
+  <div class="page-header mb-5 flex flex-wrap items-center justify-between gap-5 bg-[var(--g-container-bg)] px-5 py-4 transition-background-color-300">
+    <div class="main flex-[1_1_70%]">
+      <div class="text-2xl">
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div class="mt-2 text-sm text-stone-5 empty:hidden">
+        <slot name="content">
+          {{ content }}
+        </slot>
+      </div>
+    </div>
+    <div v-if="slots.default" class="ml-a flex-none">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/PageMain/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import PubinfoIcon from '../PubinfoIcon/index.vue';
+
+defineOptions({
+  name: 'PageMain',
+});
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    collaspe?: boolean
+    height?: string
+  }>(),
+  {
+    title: '',
+    collaspe: false,
+    height: '',
+  },
+);
+
+const titleSlot = !!useSlots().title;
+
+const isCollaspe = ref(props.collaspe);
+function unCollaspe() {
+  isCollaspe.value = false;
+}
+</script>
+
+<template>
+  <div
+    class="page-main relative m-4 flex flex-col bg-[var(--g-container-bg)] transition-background-color-300"
+    :class="{
+      'of-hidden': isCollaspe,
+    }"
+    :style="{
+      height: isCollaspe ? height : '',
+    }"
+  >
+    <div v-if="titleSlot || title" class="title-container border-b-1 border-b-[var(--g-bg)] border-b-solid px-5 py-4 transition-border-color-300">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </div>
+    <div class="main-container p-5">
+      <slot />
+    </div>
+    <div v-if="isCollaspe" class="collaspe absolute bottom-0 w-full cursor-pointer from-transparent to-[var(--g-container-bg)] bg-gradient-to-b pb-2 pt-10 text-center" @click="unCollaspe">
+      <PubinfoIcon name="i-ep-arrow-down" class="text-xl op-30 transition-opacity hover:op-100" />
+    </div>
+  </div>
+</template>