@skyfox2000/webui 1.0.13 → 1.2.0

package/src/components/form/switch/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
-import { formValidate, useInputFactory, OptionItemProps, loadOption, unloadOption } from '@skyfox2000/webbase';
+import { formValidate, useInputFactory, OptionItemProps, loadOption, unloadOption } from '@/index';
 import { Switch } from 'ant-design-vue';
 import message from 'vue-m-message';
 
@@ -47,7 +47,11 @@ onUnmounted(() => {
 <template>
    <Switch
       v-if="switchOptions.length === 2"
-      :class="[errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '', 'bg-blue-300', 'w-[58px]']"
+      :class="[
+         errInfo?.errClass === 'error' ? 'error !border-red-300 shadow-[0_0_3px_0px_#ff4d4f]' : '',
+         'bg-blue-300',
+         'w-[58px]',
+      ]"
       :checkedChildren="switchOptions[0].label"
       :checkedValue="switchOptions[0].value"
       :unCheckedChildren="switchOptions[1].label"
@@ -55,4 +59,4 @@ onUnmounted(() => {
       @change="onChange"
       v-bind="$attrs"
    />
-</template>
+</template>

package/src/components/form/textarea/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { formValidate, useInputFactory } from '@skyfox2000/webbase';
+import { formValidate, useInputFactory } from '@/index';
 import { Textarea } from 'ant-design-vue';
 
 const { editorCtrl, labelText, errInfo } = useInputFactory();

package/src/components/form/transfer/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from 'vue';
-import { AnyControl, doQuery, formValidate, OptionItemProps, useInputFactory } from '@skyfox2000/webbase';
+import { AnyControl, doQuery, formValidate, OptionItemProps, useInputFactory } from '@/index';
 import { Transfer } from 'ant-design-vue';
 import { IUrlInfo, ReqParams } from '@skyfox2000/fapi';
 const props = defineProps<{

package/src/components/form/transfer/transferTable.vue

@@ -2,7 +2,7 @@
 import Transfer from './index.vue';
 import { Table } from 'ant-design-vue';
 import { AnyData } from '@skyfox2000/fapi';
-import { doQuery, GridControl, PrimaryKey } from '@skyfox2000/webbase';
+import { doQuery, GridControl, PrimaryKey } from '@/index';
 import { onMounted, PropType, ref, watch } from 'vue';
 const props = defineProps({
    /**
@@ -92,33 +92,53 @@ onMounted(async () => {
 });
 </script>
 <template>
-   <Transfer :data-source="transferData" :row-key="(record: AnyData) => record[primaryKey]" v-model:value="targetKeys"
+   <Transfer
+      :data-source="transferData"
+      :row-key="(record: AnyData) => record[primaryKey]"
+      v-model:value="targetKeys"
       :list-style="{
          width: '300px',
          height: '500px',
-}" :show-select-all="false" :show-search="true" :filter-option="(inputValue: string, item: AnyData) => {
-         for (const column of props.gridCtrl.columns.value) {
-            if (item[column.dataIndex].toString().indexOf(inputValue) !== -1) {
-               return true;
+      }"
+      :show-select-all="false"
+      :show-search="true"
+      :filter-option="
+         (inputValue: string, item: AnyData) => {
+            for (const column of props.gridCtrl.columns.value) {
+               if (item[column.dataIndex].toString().indexOf(inputValue) !== -1) {
+                  return true;
+               }
             }
+            return false;
          }
-         return false;
-      }
-         " v-bind="$attrs">
+      "
+      v-bind="$attrs"
+   >
       <template #children="{ filteredItems, onItemSelectAll, onItemSelect, selectedKeys }">
-         <Table :columns="gridCtrl.columns.value" :row-key="primaryKey" :row-selection="getRowSelection({
-            disabled: false,
-            selectedKeys,
-            onItemSelectAll,
-            onItemSelect,
-         })
-            " :bordered="false" size="small" :data-source="filteredItems" :scroll="{ x: 300 }" :custom-row="(record) => ({
-               onClick: () => {
-                  const key = record[primaryKey];
-                  onItemSelect(key, !selectedKeys.includes(key));
-               },
-            })
-               " />
+         <Table
+            :columns="gridCtrl.columns.value"
+            :row-key="primaryKey"
+            :row-selection="
+               getRowSelection({
+                  disabled: false,
+                  selectedKeys,
+                  onItemSelectAll,
+                  onItemSelect,
+               })
+            "
+            :bordered="false"
+            size="small"
+            :data-source="filteredItems"
+            :scroll="{ x: 300 }"
+            :custom-row="
+               (record) => ({
+                  onClick: () => {
+                     const key = record[primaryKey];
+                     onItemSelect(key, !selectedKeys.includes(key));
+                  },
+               })
+            "
+         />
       </template>
    </Transfer>
 </template>

package/src/components/form/treeSelect/index.vue

@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import { ref, watch, onMounted, PropType } from 'vue';
 import { TreeSelect } from 'ant-design-vue';
-import { queryTree } from '@skyfox2000/webbase';
-import type { SelectValue, TreeControl, TreeNode } from '@skyfox2000/webbase';
-import { useInputFactory } from '@skyfox2000/webbase';
+import type { SelectValue, TreeControl, TreeNode } from '@/index';
+import { queryTree, useInputFactory } from '@/index';
 import { fieldMapping } from '@skyfox2000/fapi';
 
 const props = defineProps({

package/src/components/form/upload/uploadList.vue

@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue';
 import message from 'vue-m-message';
 import type { UploadProps } from 'ant-design-vue';
 import { Upload, Progress, Tag } from 'ant-design-vue';
-import { UploadFile, UploadStatus, donwloadFromMinio, path } from '@skyfox2000/webbase';
+import { UploadFile, UploadStatus, donwloadFromMinio, path } from '@/index';
 import { IUrlInfo } from '@skyfox2000/fapi';
 
 export interface UploadListProps {

package/src/components/layout/breadcrumb/index.vue

@@ -2,7 +2,7 @@
 import { onMounted, watch } from 'vue';
 import { Breadcrumb, theme } from 'ant-design-vue';
 import { ToolIcon } from '../../common';
-import { BreadcrumbRoute, showBreadcrumb, crumbs, usePageInfo } from '@skyfox2000/webbase';
+import { BreadcrumbRoute, showBreadcrumb, crumbs, usePageInfo } from '@/index';
 
 const { useToken } = theme;
 const { token } = useToken();

package/src/components/layout/header/headerExits.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { Modal, Flex } from 'ant-design-vue';
-import { useUserInfo } from '@skyfox2000/webbase';
 import { mainAppApis } from '@skyfox2000/microbase';
 import { ToolIcon } from '../../common';
+import { useUserInfo } from '@/index';
 
 const userInfoStore = useUserInfo();
 

package/src/components/layout/header/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { LayoutHeader, theme, Space } from 'ant-design-vue';
-import { useSettingInfo } from '@skyfox2000/webbase';
+import { useSettingInfo } from '@/index';
 import { ToolIcon } from '../../common';
 import Breadcrumb from '../breadcrumb/index.vue';
 import HeaderExits from './headerExits.vue';

package/src/components/layout/header/user.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { useUserInfo } from '@/index';
 import { Tooltip, AppIcon } from '../../common';
-import { useUserInfo } from '@skyfox2000/webbase';
+
 const userInfo = useUserInfo().userInfo;
 </script>
 <template>

package/src/components/layout/menu/index.vue

@@ -2,7 +2,7 @@
 import { nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { ItemType, Menu } from 'ant-design-vue';
 import type { MenuProps } from 'ant-design-vue';
-import { AppRouter, initMenu, useSettingInfo, useAppInfo, usePageInfo } from '@skyfox2000/webbase';
+import { AppRouter, initMenu, useSettingInfo, useAppInfo, usePageInfo } from '@/index';
 
 import { ProjectIcon } from '../../common';
 
@@ -58,7 +58,13 @@ onMounted(() => {
 });
 </script>
 <template>
-   <Menu v-model:openKeys="showOpenKeys" v-model:selectedKeys="selectedKeys" mode="inline" theme="dark"
-      :items="menuData" @click="onMenuClick">
+   <Menu
+      v-model:openKeys="showOpenKeys"
+      v-model:selectedKeys="selectedKeys"
+      mode="inline"
+      theme="dark"
+      :items="menuData"
+      @click="onMenuClick"
+   >
    </Menu>
 </template>

package/src/components/layout/menu/menuTabs.vue

@@ -1,26 +1,24 @@
 <script setup lang="ts">
 import { Tabs, TabPane, theme } from 'ant-design-vue';
-import { useAppInfo, usePageInfo } from '@skyfox2000/webbase';
-// import { useRouter } from 'vue-router';
+import { useAppInfo, usePageInfo, AppRouter } from '@/index';
 import { ToolIcon, Tooltip } from '../../common';
-// import { watch } from 'vue';
+import { watch } from 'vue';
 
 const { useToken } = theme;
 const { token } = useToken();
 
 const pageInfoStore = usePageInfo();
-// const router = useRouter();
 
 // 通过路由设置当前激活页签
 // 避免通过浏览器后退按钮，导致页签不更新
-// watch(
-//    () => router.currentRoute.value.path,
-//    (newVal) => {
-//       if (newVal !== pageInfoStore.TabActive) {
-//          pageInfoStore.setTabActive(newVal);
-//       }
-//    },
-// );
+watch(
+   () => AppRouter.currentRoute.value.path,
+   (newVal) => {
+      if (newVal !== pageInfoStore.TabActive) {
+         pageInfoStore.setTabActive(newVal);
+      }
+   },
+);
 
 const onTabClicked = (tabKey: any) => {
    useAppInfo().push(tabKey as string);

package/src/components/layout/page/basicLayout.vue

@@ -7,7 +7,7 @@ import Menu from '../menu/index.vue';
 import Header from '../header/index.vue';
 import MenuTabs from '../menu/menuTabs.vue';
 import AppIcon from '../../common/icon/appicon.vue';
-import { useAppInfo, usePageInfo, useSettingInfo } from '@skyfox2000/webbase';
+import { useAppInfo, usePageInfo, useSettingInfo } from '@/index';
 import message from 'vue-m-message';
 
 const props = defineProps<{ routes: any }>();

package/src/const/options.ts

@@ -0,0 +1,114 @@
+/**
+ * 静态选项
+ */
+export class OPTIONS {
+   private static dict: Record<string, Record<string, any>[]> = {};
+   static Keys = {
+      EnableDisable: 'EnableDisable',
+      SuccessResult: 'SuccessResult',
+      YesNo: 'YesNo',
+      MaleFemale: 'MaleFemale',
+   };
+
+   /**
+    * 静态选择项列表
+    * @param key 名称
+    * @returns
+    */
+   static getOptions = (key: string) => {
+      return OPTIONS.dict[key];
+   };
+   /**
+    * 静态选择项对象
+    * @param key 名称
+    * @param value 值
+    * @returns
+    */
+   static getOptionItem = (key: string, value: string | number) => {
+      return OPTIONS.dict[key].find((item) => item.value === value);
+   };
+   /**
+    * 设置静态选择项
+    * @param key 名称
+    * @param list 列表
+    */
+   static setOptions = (key: string, list: Record<string, any>[]) => {
+      OPTIONS.dict[key] = list;
+   };
+   /**
+    * 启用/停用选项
+    * - 启用 1
+    * - 停用 0
+    */
+   static EnableDisable = [
+      {
+         label: '启用',
+         text: '✅ 启用',
+         value: 1,
+      },
+      {
+         label: '停用',
+         text: '🚫 停用',
+         value: 0,
+      },
+   ];
+
+   /**
+    * 成功/失败选项
+    * - 成功 1
+    * - 失败 0
+    */
+   static SuccessResult = [
+      {
+         label: '成功',
+         text: '✅ 成功',
+         value: 1,
+      },
+      {
+         label: '失败',
+         text: '🚫 失败',
+         value: 0,
+      },
+   ];
+
+   /**
+    * 是/否选项
+    * - 是 1
+    * - 否 0
+    */
+   static YesNo = [
+      {
+         label: '是',
+         text: '✅ 是',
+         value: 1,
+      },
+      {
+         label: '否',
+         text: '❎ 否',
+         value: 0,
+      },
+   ];
+
+   /**
+    * 男/女选项
+    * - 男 M
+    * - 女 F
+    */
+   static MaleFemale = [
+      {
+         label: '男',
+         text: '男 👨',
+         value: 'M',
+      },
+      {
+         label: '女',
+         text: '女 👩',
+         value: 'F',
+      },
+   ];
+}
+
+OPTIONS.setOptions('EnableDisable', OPTIONS.EnableDisable);
+OPTIONS.setOptions('SuccessResult', OPTIONS.SuccessResult);
+OPTIONS.setOptions('YesNo', OPTIONS.YesNo);
+OPTIONS.setOptions('MaleFemale', OPTIONS.MaleFemale);

package/src/directives/enter-submit.ts

@@ -0,0 +1,13 @@
+// 创建自定义指令监听回车键
+export const enterSubmit = {
+   mounted: (el: HTMLElement, binding: any) => {
+      el.addEventListener('keydown', (e) => {
+         if (e.key === 'Enter') {
+            binding.value();
+         }
+      });
+   },
+   unmounted: (el: HTMLElement) => {
+      el.removeEventListener('keydown', () => {});
+   },
+};

package/src/directives/index.ts

@@ -0,0 +1,26 @@
+import { App } from 'vue';
+import { vAuth } from './permission';
+import { enterSubmit } from './enter-submit';
+
+// 定义指令映射表，方便管理
+const directives = {
+   auth: vAuth,
+   submit: enterSubmit,
+};
+
+/**
+ * 初始化所有自定义指令
+ * @param app Vue 应用实例
+ * @param customs 自定义需要注册的指令，不传则注册全部
+ */
+export const initDirective = (app: App<Element>, customs?: string[]) => {
+   const directivesToRegister = customs || Object.keys(directives);
+
+   directivesToRegister.forEach((name) => {
+      if (name in directives) {
+         app.directive(name, directives[name as keyof typeof directives]);
+      }
+   });
+
+   return app;
+};

package/src/directives/permission.ts

@@ -0,0 +1,144 @@
+import { useUserInfo } from '@/index';
+import { isEmpty } from '@/utils/isEmpty';
+import { EnvConfig } from '@skyfox2000/microbase';
+import { DirectiveBinding, VNode } from 'vue';
+
+/**
+ * 组件行为类型
+ */
+type BehaviorType = 'remove' | 'disable';
+
+/**
+ * 权限参数类型
+ */
+interface PermissionParams {
+   url: string;
+   role?: string | string[];
+   permit?: string;
+   behavior?: BehaviorType;
+}
+
+/**
+ * 处理组件显示行为
+ * @param el 组件元素
+ * @param vnode Vue虚拟节点
+ * @param hasPermission 是否有权限
+ * @param behavior 权限控制行为
+ */
+const handleElementVisibility = (
+   el: HTMLElement,
+   vnode: VNode,
+   hasPermission: boolean,
+   behavior: BehaviorType = 'remove',
+) => {
+   if (!hasPermission) {
+      if (behavior === 'disable') {
+         // 获取组件实例
+         const component = vnode.component;
+         if (component) {
+            // 设置组件的 disabled 属性
+            component.props.disabled = true;
+         } else if (vnode.el) {
+            // 处理原生元素
+            el.setAttribute('disabled', 'disabled');
+            (el as HTMLButtonElement).disabled = true;
+         } else {
+            // 原生HTML元素
+            // 处理原生元素
+            el.setAttribute('disabled', 'disabled');
+            (el as HTMLButtonElement).disabled = true;
+         }
+         // 添加禁用样式
+         el.classList.add('disabled');
+      } else {
+         // 处理移除逻辑
+         const comment = document.createComment('No Permission');
+         const parent = el.parentNode;
+         if (parent) {
+            // 如果是组件，需要处理组件的显示状态
+            const component = vnode.component;
+            if (component) {
+               // 通过 v-show 来控制组件的显示
+               component.props.style = { display: 'none' };
+            } else {
+               parent.replaceChild(comment, el);
+            }
+         }
+      }
+   }
+};
+
+/**
+ * 检查权限
+ * @param params 权限参数
+ * @returns 是否有权限
+ */
+const checkPermission = (params: PermissionParams): boolean => {
+   const userInfoStore = useUserInfo();
+   const { url, role, permit } = params;
+
+   // 获取当前URL，优先使用传入的url，否则使用当前路由路径
+   const currentUrl = url;
+
+   if (EnvConfig.VITE_PERMISSION_MODE === 'role') {
+      // 仅判断角色权限
+      if (!isEmpty(role) && role !== undefined) {
+         return userInfoStore.hasRole(role);
+      }
+      // 如果没有配置角色，默认允许访问
+      return true;
+   } else if (EnvConfig.VITE_PERMISSION_MODE === 'permit') {
+      // 角色和权限任意一个有效即可
+      let hasRolePermission = false;
+      let hasPermitPermission = false;
+
+      // 检查角色权限
+      if (!isEmpty(role) && role !== undefined) {
+         hasRolePermission = userInfoStore.hasRole(role);
+      }
+
+      // 检查功能权限
+      if (!isEmpty(permit) && typeof permit === 'string') {
+         hasPermitPermission = userInfoStore.hasPermit(currentUrl, permit);
+      }
+
+      // 如果都没有配置，默认允许访问
+      if (isEmpty(role) && isEmpty(permit)) {
+         return true;
+      }
+
+      // 任意一个有权限即可
+      return hasRolePermission || hasPermitPermission;
+   }
+
+   // 默认不允许访问
+   return false;
+};
+
+/**
+ * 统一权限控制指令
+ * 使用方式：
+ * v-auth="{ url: '/path', role: 'admin', permit: ':edit' }"
+ * v-auth:disable="{ role: 'admin', permit: ':edit' }"
+ * v-auth="{ role: 'admin', permit: ':edit', behavior: 'disable' }"
+ */
+export const vAuth = {
+   mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
+      const params = binding.value || {};
+      const argBehavior = (binding.arg as BehaviorType) || 'remove';
+      // 参数中的behavior优先级更高，没有的话使用指令参数中的behavior
+      const behavior = params.behavior || argBehavior;
+
+      const hasPermission = checkPermission(params);
+      handleElementVisibility(el, vnode, hasPermission, behavior);
+   },
+   updated(el: HTMLElement, binding: DirectiveBinding, vnode: VNode) {
+      const params = binding.value || {};
+      const argBehavior = (binding.arg as BehaviorType) || 'remove';
+      // 参数中的behavior优先级更高，没有的话使用指令参数中的behavior
+      const behavior = params.behavior || argBehavior;
+
+      const hasPermission = checkPermission(params);
+      handleElementVisibility(el, vnode, hasPermission, behavior);
+   },
+};