hrp-ui-base 1.0.1 → 1.0.3

package/src/components/layout/sideMenuSonList.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="sidebar-menu-son-list-box">
+    <div
+      class="sidebar-menu-son-list"
+      v-for="(item, index) in currentData"
+      :key="index"
+    >
+      <!-- 分组标题 -->
+      <div class="sidebar-menu-son-list-title">{{ item.menuName }}</div>
+      
+      <!-- 子菜单列表 -->
+      <div class="sidebar-menu-son-list-little-menu">
+        <div
+          v-for="(child, childIndex) in item.children"
+          :key="childIndex"
+          class="menu-item"
+          :class="{ 'is-active': isActive(child.url) }"
+          @click="handleMenuClick(child)"
+        >
+          <span class="menu-name">{{ child.menuName }}</span>
+          <i class="el-icon-arrow-right menu-arrow"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType } from "vue";
+import type HomeMenu from "../../../api/bms/home/bo/HomeMenu";
+
+const props = defineProps({
+  currentData: {
+    type: Object as PropType<HomeMenu[]>,
+    required: true,
+  },
+  currentPath: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits<{
+  (e: 'menu-click', menu: HomeMenu): void
+}>();
+
+// 判断菜单是否激活
+const isActive = (url: string) => {
+  if (!url) return false;
+  return props.currentPath === url;
+};
+
+// 处理菜单点击
+const handleMenuClick = (menu: HomeMenu) => {
+  if (!menu.url) {
+    return;
+  }
+  emit('menu-click', menu);
+};
+</script>
+
+<style lang="scss" scoped>
+.sidebar-menu-son-list-box {
+  width: 100%;
+  max-height: none;
+  overflow-y: visible;
+  padding: 12px;
+  background: transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--el-border-color-light);
+    border-radius: 3px;
+    &:hover {
+      background: var(--el-border-color);
+    }
+  }
+}
+
+.sidebar-menu-son-list {
+  margin-bottom: 24px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.sidebar-menu-son-list-title {
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--el-text-color-primary);
+  background: var(--el-fill-color-light);
+  border-left: 4px solid var(--el-color-primary-light-7);
+  border-radius: 4px;
+  user-select: none;
+}
+
+.sidebar-menu-son-list-little-menu {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 0 4px;
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 250px;
+    padding: 10px 12px;
+    cursor: pointer;
+    border-radius: 6px;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    user-select: none;
+    min-width: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+    color: var(--el-text-color-primary);
+    background: transparent;
+
+    .menu-name {
+      flex: 1;
+      min-width: 0;
+      font-size: 14px;
+      font-weight: 400;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .menu-arrow {
+      flex-shrink: 0;
+      margin-left: 6px;
+      font-size: 12px;
+      color: var(--el-text-color-placeholder);
+      opacity: 0;
+      transform: translateX(-4px);
+      transition: all 0.2s;
+    }
+
+    &:hover {
+      background: var(--el-fill-color-light);
+      transform: translateX(2px);
+      .menu-arrow {
+        opacity: 1;
+        transform: translateX(0);
+        color: var(--el-color-primary);
+      }
+    }
+
+    &.is-active {
+      background: linear-gradient(135deg, var(--el-color-primary-light-9) 0%, var(--el-color-primary-light-8) 100%);
+      color: var(--el-color-primary);
+      font-weight: 500;
+      border: 1px solid var(--el-color-primary-light-7);
+      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+
+      .menu-arrow {
+        opacity: 1;
+        transform: translateX(0);
+        color: var(--el-color-primary);
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        right: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6px;
+        height: 6px;
+        background: var(--el-color-primary);
+        border-radius: 50%;
+        box-shadow: 0 0 0 2px var(--el-color-primary-light-8);
+      }
+    }
+
+    &:active {
+      transform: translateX(2px) scale(0.98);
+    }
+  }
+}
+</style>

package/src/components/layout/styles/icon.scss

@@ -0,0 +1,72 @@
+.icon-box-component-box {
+  position: relative;
+}
+
+.icon-box {
+  width: 34px;
+  height: 34px;
+  margin: 0 18px 0 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 4px 4px 4px 4px;
+  overflow: hidden;
+
+  img {
+    width: 28px;
+  }
+}
+
+.icon-box:focus-visible {
+  outline: none;
+}
+
+.common-switch-box {
+  padding: 8px;
+
+  .common-switch-box-span {
+    margin-right: 8px;
+  }
+}
+
+.icon-box:hover {
+  background: var(--custom-theme-fill-1);
+}
+
+.icon-box-active:hover {
+  background: var(--custom-theme-fill-1);
+}
+
+.icon-box-active {
+  background: var(--custom-theme-normal-5);
+}
+
+// 弹出层提示词
+.popover-tooltip-custom {
+  position: absolute;
+  top: 46px;
+  left: -31%;
+  z-index: 999;
+  background: #303133;
+  color: #ffffff;
+  padding: 8px;
+  font-size: 12px;
+  width: max-content;
+  max-width: 100vh;
+  border-radius: 6px;
+
+  .triangle-top {
+    width: 0;
+    height: 0;
+    border-left:
+      5px solid transparent;
+    border-right:
+      5px solid transparent;
+    border-bottom:
+      7px solid black;
+    position: absolute;
+    top: -7px;
+    left: calc(50% - 5px);
+  }
+}

package/src/components/layout/types.ts

@@ -0,0 +1,98 @@
+import type HomeMenu from "../../api/bms/home/bo/HomeMenu";
+import type NoticeVO from "../../api/notice/bo/NoticeVO";
+
+/** 用户配置接口 */
+export interface UserConfig {
+  /** 字体大小 */
+  fontSize: string;
+  /** 昼夜模式 */
+  dayOrNight: string;
+  /** 是否跟随系统 */
+  followSystem: boolean;
+  /** 菜单位置 */
+  menuPosition: string;
+  /** 导航栏折叠状态 */
+  navigationBar: boolean;
+  /** 是否新手引导 */
+  noviceGuide: boolean;
+  /** 暗黑模式状态 */
+  isDark?: string;
+  /** 用户头像 */
+  avatar?: string;
+  /** 文件上传类型 */
+  fileUploadType?: string;
+}
+
+/** Tab 接口 */
+export interface TabItem {
+  /** 标签标题 */
+  title: string;
+  /** 路由路径 */
+  path: string;
+  /** 完整路径 */
+  fullPath?: string;
+  /** 路由查询参数 */
+  query?: Record<string, any>;
+  /** 路由name */
+  name?: string;
+  /** 缓存code */
+  cachedCode?: string;
+  /** 是否可关闭 */
+  closable?: boolean;
+}
+
+/** 域信息接口 */
+export interface DomainInfo {
+  /** 域名 */
+  domainName: string;
+  /** 域ID */
+  domainId?: string;
+  /** 其他属性 */
+  [key: string]: any;
+}
+
+/** 用户信息接口 */
+export interface UserInfo {
+  /** 用户名 */
+  userName?: string;
+  /** 头像 */
+  avatar?: string;
+  /** 其他属性 */
+  [key: string]: any;
+}
+
+/** SysHeader Props */
+export interface SysHeaderProps {
+  /** 用户配置 */
+  userConfig: UserConfig;
+  /** 菜单列表 */
+  menuList: HomeMenu[];
+  /** 当前应用 */
+  currentApplication: DomainInfo;
+  /** 是否显示子菜单抽屉 */
+  showSubmenuDrawer?: boolean;
+  /** 未读消息数量 */
+  noticeCount?: number;
+  /** 审批数量 */
+  approvalCount?: number;
+}
+
+/** SysHeaderTabs Props */
+export interface SysHeaderTabsProps {
+  /** 标签列表 */
+  tabs: TabItem[];
+  /** 当前激活的标签路径 */
+  activeTab: string;
+  /** 首页路径 */
+  homeUrl?: string;
+}
+
+/** PersonalizationGuide Props */
+export interface PersonalizationGuideProps {
+  /** 是否显示 */
+  visible: boolean;
+  /** 用户配置 */
+  userConfig: UserConfig;
+}
+
+export type { HomeMenu, NoticeVO };

package/src/components/list-search-content/components/search-date-range.vue

@@ -23,7 +23,7 @@
 
 <script setup lang='ts'>
 import { ref, reactive, PropType, watch, onMounted } from 'vue'
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 import { ElMessage } from 'element-plus'
 import moment from 'moment/moment';
 const props = defineProps({

package/src/components/list-search-content/components/search-date-time-range.vue

@@ -13,7 +13,7 @@
 
 <script setup lang='ts'>
 import { ref, reactive, PropType, watch, onMounted } from 'vue'
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 import { ElMessage } from 'element-plus'
 const props = defineProps({
   option: {

package/src/components/list-search-content/components/search-date.vue

@@ -19,7 +19,7 @@
 
 <script setup lang='ts'>
 import { ref, PropType, watch, computed } from 'vue'
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 
 const props = defineProps({
   option: {

package/src/components/list-search-content/components/search-input-number.vue

@@ -15,7 +15,7 @@
 
 <script setup lang='ts'>
 import { ref, reactive, PropType, watch, onMounted } from 'vue'
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 import { ElMessage } from 'element-plus'
 const props = defineProps({
   option: {

package/src/components/list-search-content/components/search-input.vue

@@ -12,7 +12,7 @@
 
 <script setup lang='ts'>
 import { ref, reactive, PropType, watch,onMounted  } from 'vue'
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 const props = defineProps({
   option: {
     type: Object as PropType<SearchVO>,

package/src/components/list-search-content/components/search-multiple_select.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { ref, PropType, watch } from 'vue'
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 
 /** 搜索下拉框 */
 const props = defineProps({

package/src/components/list-search-content/components/search-select.vue

@@ -15,7 +15,7 @@
 
 <script setup lang='ts'>
 import { ref, reactive, PropType, watch, onMounted } from 'vue'
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 /** 搜索下拉框 */
 const props = defineProps({
   option: {

package/src/components/list-search-content/index.vue

@@ -221,13 +221,13 @@ import ViewsPackageManage from "./modules/views-package-manage-dialog.vue";
 import AddViewsPackageDialog from "./modules/add-views-package-dialog.vue";
 import SeachConditionArea from "./modules/search-condition-area.vue";
 /** controller  */
-import TabulationController from "@/api/bms/tabulation/TabulationController"
+import TabulationController from "hrp-ui-base/api/bms/tabulation/TabulationController"
 /** bo */
-import PersonViewVO from "@/api/bms/tabulation/bo/PersonViewVO";
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
-import FieldConditionBO from "@/api/bms/tabulation/bo/FieldConditionBO";
-import TabulationBO from "@/api/bms/tabulation/bo/TabulationBO";
-import FunPointVo from "@/api/bms/permission-manage/bo/FunPointVo"
+import PersonViewVO from "hrp-ui-base/api/bms/tabulation/bo/PersonViewVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
+import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
+import TabulationBO from "hrp-ui-base/api/bms/tabulation/bo/TabulationBO";
+import FunPointVo from "hrp-ui-base/api/bms/permission-manage/bo/FunPointVo"
 
 const props = defineProps({
   routeId: { type: String, default: "", require: true },

package/src/components/list-search-content/modules/add-views-package-dialog.vue

@@ -26,9 +26,9 @@
 <script lang="ts" name="checkManageDialogAll" setup>
 import { ref, reactive, PropType } from "vue";
 import { ElMessage } from "element-plus";
-import FieldConditionBO from "@/api/bms/tabulation/bo/FieldConditionBO";
-import TabulationController from "@/api/bms/tabulation/TabulationController"
-import TabulationBO from "@/api/bms/tabulation/bo/TabulationBO";
+import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
+import TabulationController from "hrp-ui-base/api/bms/tabulation/TabulationController"
+import TabulationBO from "hrp-ui-base/api/bms/tabulation/bo/TabulationBO";
 const emits = defineEmits(['success'])
 const dialogVisible = ref(false); // 弹窗的是否展示
 const dialogTitle = ref(""); // 弹窗的标题

package/src/components/list-search-content/modules/search-condition-area.vue

@@ -33,9 +33,9 @@
 <script lang="ts" name="SystemTenantForm" setup>
 import { ref, onActivated, reactive, watch, defineAsyncComponent, nextTick } from 'vue'
 import { debounce } from 'lodash';
-import SearchVO from "@/api/bms/tabulation/bo/SearchVO";
+import SearchVO from "hrp-ui-base/api/bms/tabulation/bo/SearchVO";
 import SearchComponents from '../components'
-import FieldConditionBO from "@/api/bms/tabulation/bo/FieldConditionBO";
+import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
 
 const searchContent = ref<string>('')
 const ruleFormRef = ref()

package/src/components/list-search-content/modules/views-package-manage-dialog.vue

@@ -51,12 +51,12 @@ import { ref, reactive } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import draggable from "vuedraggable";
 import AddViewsPackageDialog from './add-views-package-dialog.vue'
-import TabulationBO from "@/api/bms/tabulation/bo/TabulationBO";
-import FieldConditionBO from "@/api/bms/tabulation/bo/FieldConditionBO";
-import PersonViewVO from "@/api/bms/tabulation/bo/PersonViewVO";
-import ViewVO from "@/api/bms/tabulation/bo/ViewVO";
+import TabulationBO from "hrp-ui-base/api/bms/tabulation/bo/TabulationBO";
+import FieldConditionBO from "hrp-ui-base/api/bms/tabulation/bo/FieldConditionBO";
+import PersonViewVO from "hrp-ui-base/api/bms/tabulation/bo/PersonViewVO";
+import ViewVO from "hrp-ui-base/api/bms/tabulation/bo/ViewVO";
 
-import TabulationController from "@/api/bms/tabulation/TabulationController"
+import TabulationController from "hrp-ui-base/api/bms/tabulation/TabulationController"
 
 const dialogVisible = ref(false); // 弹窗的是否展示
 const dialogTitle = ref(""); // 弹窗的标题

package/src/components.ts

@@ -6,6 +6,10 @@ import AnnexUpload from './components/annex-upload/index.vue'
 import AnnexImgUpload from './components/annex-img-upload/index.vue'
 import ListSearchContent from './components/list-search-content/index.vue'
 import AnnexUploadWeijian from './components/annex-upload-weijian/index.vue'
+import BaseLayout from './components/base-layout/index.vue'
+
+// Layout components
+import { SysHeader, SysHeaderTabs, PersonalizationGuideDialog, SideMenu } from './components/layout'
 
 /**
  * 这里默认导出一个vue支持的install方法
@@ -18,13 +22,16 @@ import AnnexUploadWeijian from './components/annex-upload-weijian/index.vue'
 export default {
   install(app: App) {
     app.component("CustomButton", CustomButton);
-    // 如果还有更多的组件需要注册，可以在这里继续添加
     app.component("CustonSwitch", CustonSwitch);
     app.component("AnnexUpload", AnnexUpload);
     app.component("AnnexImgUpload", AnnexImgUpload);
     app.component("ListSearchContent", ListSearchContent);
     app.component("AnnexUploadWeijian", AnnexUploadWeijian);
-
+    app.component("BaseLayout", BaseLayout);
+    app.component("SysHeader", SysHeader);
+    app.component("SysHeaderTabs", SysHeaderTabs);
+    app.component("PersonalizationGuideDialog", PersonalizationGuideDialog);
+    app.component("SideMenu", SideMenu);
   }
 }
 
@@ -33,7 +40,10 @@ export default {
  * 为了将来支持类似这样按需使用 import {AnnexUpload} from "hrp-ui-base";
  * 有多少个组件就添加多少个组件
  */
-export { CustomButton, CustonSwitch, AnnexUpload, ListSearchContent, AnnexImgUpload, AnnexUploadWeijian };
+export { CustomButton, CustonSwitch, AnnexUpload, ListSearchContent, AnnexImgUpload, AnnexUploadWeijian, BaseLayout };
+
+// 重新导出布局组件
+export * from './components/layout';
 
 /**
  * 这里是重点，需要将这些组件在ts中声明为全局组件；
@@ -45,6 +55,11 @@ declare module "vue" {
     AnnexUpload: typeof AnnexUpload,
     AnnexImgUpload: typeof AnnexImgUpload,
     ListSearchContent: typeof ListSearchContent,
-    AnnexUploadWeijian: typeof AnnexUploadWeijian
+    AnnexUploadWeijian: typeof AnnexUploadWeijian,
+    BaseLayout: typeof BaseLayout,
+    SysHeader: typeof SysHeader,
+    SysHeaderTabs: typeof SysHeaderTabs,
+    PersonalizationGuideDialog: typeof PersonalizationGuideDialog,
+    SideMenu: typeof SideMenu
   }
 }

package/src/index.ts

@@ -1,3 +1,4 @@
 export { default } from "./components";
 export * from "./components";
+export * from "./api/index";
 export * from "./utils";

package/src/utils/dd-utils.ts

@@ -1,5 +1,5 @@
 import dd from "dingtalk-jsapi";
-import FileBaseInfo from "@/api/bms/file/bo/FileBaseInfo"
+import FileBaseInfo from "hrp-ui-base/api/bms/file/bo/FileBaseInfo"
 import { IsPc } from "./get-env";
 import { ElMessage } from "element-plus";
 /**

package/src/utils/get-dict.ts

@@ -1,5 +1,5 @@
-import DictController from "@/api/bms/dict/dict-controller";
-import DictConfigBO from "@/api/bms/dict/bo/DictConfigBO";
+import DictController from "hrp-ui-base/api/bms/dict/dict-controller";
+import DictConfigBO from "hrp-ui-base/api/bms/dict/bo/DictConfigBO";
 // 获取字典配置
 export const getDictConfigs = async (
   pageId: string,

package/src/utils/permit-utils.ts

@@ -1,8 +1,8 @@
 import { ElMessage } from "element-plus";
 // @ts-ignore
 import ImgDay from "../assets/no-permiss-day.svg"
-import PermissionGroupController from "@/api/bms/permission-manage/PermissionController"
-import FunPointVo from "@/api/bms/permission-manage/bo/FunPointVo";
+import PermissionGroupController from "hrp-ui-base/api/bms/permission-manage/PermissionController"
+import FunPointVo from "hrp-ui-base/api/bms/permission-manage/bo/FunPointVo";
 
 /** 没权限 */
 export const toNoPermitPage = (dom: any, isDark?: 'day' | 'night') => {

package/src/api/bms/dict/bo/TotalDictSearchBO.ts

@@ -1,8 +0,0 @@
-export default class TotalDictSearchBO {
-    //关键字
-    keyValue: string | null = null;
-    //页码
-    pageNum: number | null = 1;
-    //每页条数
-    pageSize: number | null = 10;
-}

package/src/api/bms/file/FileExportController.ts

@@ -1,18 +0,0 @@
-import HttpUtil from "../../../utils/HttpUtil";
-import type { ResponseBean, ResponseBeanList, ResponseBeanTablePage, TableQueryCriteriaVO } from "../../../index";
-import FileExportVO from "./bo/FileExportVO"
-/**文件上传 */
-export default class FileExportController {
-  /**
-   * 获取文件导出列表
-   */
-  static selectExportList(
-    queryCriteriaVO: TableQueryCriteriaVO
-  ): Promise<ResponseBeanTablePage<FileExportVO[]>> {
-    return HttpUtil.postJson(
-      "/bms/export/file/select-export-list",
-      queryCriteriaVO
-    );
-  }
-
-}

package/src/api/bms/file/bo/FileExportVO.ts

@@ -1,17 +0,0 @@
-/**
-*文件基本信息
-**/
-export default class FileBaseInfo {
-  /**文件id */
-  fileId: string = "";
-  /**文件名称 */
-  fileName: string = "";
-  /**文件类型 */
-  fileType: string = "";
-  /**文件大小 */
-  fileSize: string = "";
-  /**创建时间 */
-  createTime: string = "";
-  /**进度条 */
-  progressBar: number = 0;
-}