@skyfox2000/webui 0.1.0

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

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { Button } from '../../common';
+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 { IUrlInfo } from '@skyfox2000/fapi';
+
+export interface UploadListProps {
+   /**
+    * 是否自动上传
+    */
+   autoUpload?: boolean;
+   /*
+    * 下载Url
+    */
+   downloadUrl: IUrlInfo;
+   /**
+    * 文件列表
+    */
+   fileList: UploadFile<any>[];
+   /**
+    * 提示文字
+    */
+   placeholder?: string;
+   /**
+    * 文件后缀列表
+    */
+   fileExt?: string[];
+   /**
+    * 最大文件大小
+    */
+   maxFileSize?: number;
+   /**
+    * 最大数量
+    */
+   maxCount?: number;
+   /**
+    * 文件路径
+    */
+   parentPath?: string;
+}
+
+const props = withDefaults(defineProps<UploadListProps>(), {
+   autoUpload: false,
+   fileList: () => [],
+   placeholder: '',
+   maxFileSize: 20,
+   maxCount: 5,
+});
+
+const fileList = ref<UploadFile[]>(props.fileList);
+const fileUploader = ref();
+const emit = defineEmits(['update:file-list']);
+
+const acceptString = computed(() => (props.fileExt?.length ? props.fileExt.map((ext) => `.${ext}`).join(',') : ''));
+
+const beforeUpload: UploadProps['beforeUpload'] = (file) => {
+   if (props.fileExt && props.fileExt.length > 0) {
+      const extension = file.name.split('.').pop()?.toLowerCase() || '';
+      if (!props.fileExt.includes(extension)) {
+         message.error('文件类型不支持');
+         return false;
+      }
+   }
+
+   if (file.size / 1024 / 1024 > props.maxFileSize) {
+      message.error(`文件大小超过 ${props.maxFileSize}MB 限制`);
+      return false;
+   }
+
+   if (props.maxCount > 1 && fileList.value.length >= props.maxCount) {
+      message.error(`最多上传 ${props.maxCount} 个文件`);
+      return false;
+   }
+
+   return props.autoUpload;
+};
+
+const updateFileList: UploadProps['onUpdate:fileList'] = (fileList) => {
+   fileList.forEach((file) => {
+      if (!file.fileName) file.fileName = file.name;
+      if (props.parentPath) file.name = path.join('/', props.parentPath, file.fileName);
+   });
+};
+
+const uploadProps = computed<UploadProps>(() => ({
+   accept: acceptString.value,
+   multiple: true,
+   fileList: fileList.value as UploadProps['fileList'],
+   'onUpdate:fileList': updateFileList,
+   beforeUpload: beforeUpload,
+   listType: 'text',
+   maxCount: props.maxCount,
+   showUploadList: false,
+   onChange: (info) => {
+      if (!props.autoUpload) {
+         fileList.value = info.fileList as unknown as UploadFile[];
+      }
+   },
+}));
+
+watch(
+   () => fileList.value,
+   (newVal) => {
+      emit('update:file-list', newVal);
+   },
+   { deep: true },
+);
+
+const downloadFile = (index: number) => {
+   const fileInfo = fileList.value[index].minioFile!;
+   const url: IUrlInfo = {
+      api: props.downloadUrl.api,
+      authorize: props.downloadUrl.authorize,
+      url: props.downloadUrl.url,
+      // url: props.pageData.urls.download!.url,
+      params: {
+         Query: {
+            FileKey: fileInfo.Key,
+         },
+      },
+   };
+
+   donwloadFromMinio(url);
+};
+
+const onlineOrOffline = (file: UploadFile) => {
+   file.status = file.status === UploadStatus.Offline ? UploadStatus.Online : UploadStatus.Offline;
+   file.minioFile!.Status = file.status;
+};
+
+// const previewFile = (index: number) => {
+//    const fileInfo = fileList.value[index].minioFile;
+//    console.log(fileInfo);
+// };
+
+const removeFile = (index: number) => {
+   fileList.value.splice(index, 1);
+};
+
+const getPlaceholder = (): string => {
+   const typeMsg = props.fileExt && props.fileExt.length ? `文件必须为 ${props.fileExt.join('/')}` : '';
+   const sizeMsg = props.maxFileSize !== 0 ? `单文件最大 ${props.maxFileSize}MB` : '';
+   const countMsg = props.maxCount !== 0 ? `最多 ${props.maxCount} 个文件` : '';
+
+   return [sizeMsg, typeMsg, countMsg].filter(Boolean).join('，');
+};
+
+const getStatusColor = (status?: UploadStatus) => {
+   switch (status) {
+      case UploadStatus.Uploading:
+         return 'blue';
+      case UploadStatus.Success:
+         return 'green';
+      case UploadStatus.Error:
+         return 'red';
+      case UploadStatus.Online:
+         return 'green';
+      case UploadStatus.Offline:
+         return 'pink';
+      default:
+         return 'cyan';
+   }
+};
+const getStatus = (status?: UploadStatus) => {
+   switch (status) {
+      case UploadStatus.Uploading:
+         return '上传中';
+      case UploadStatus.Success:
+         return '已完成';
+      case UploadStatus.Error:
+         return '上传失败';
+      case UploadStatus.Online:
+         return '在线';
+      case UploadStatus.Offline:
+         return '已下线';
+      default:
+         return '待上传';
+   }
+};
+</script>
+
+<template>
+   <div class="w-full border border-solid border-gray-100 mt-1 rounded-md py-5">
+      <div class="flex items-center justify-between w-full">
+         <div class="w-35 mx-3">
+            <Upload ref="fileUploader" v-bind="uploadProps">
+               <Button>选择文件</Button>
+            </Upload>
+         </div>
+         <div class="flex-1 text-sm text-gray-500">{{ getPlaceholder() }}</div>
+         <!-- <Button v-if="!autoUpload" @click="manualUpload" class="mr-3">开始上传</Button> -->
+      </div>
+
+      <div class="mt-4 px-3">
+         <div v-for="(file, index) in fileList" :key="index" class="mb-2 pb-1">
+            <div class="flex items-center justify-between">
+               <div class="flex items-center">
+                  <span
+                     class="text-gray-700 mr-2"
+                     :class="[file.status == UploadStatus.Offline ? 'line-through' : '']"
+                     >{{ file.fileName ?? file.name }}</span
+                  >
+                  <span>
+                     <Tag :color="getStatusColor(file.status)">{{ getStatus(file.status) }}</Tag>
+                  </span>
+               </div>
+               <div class="flex items-center">
+                  <span
+                     class="text-blue-500 hover:text-blue-700 mr-4 cursor-pointer"
+                     v-if="file.status == UploadStatus.Offline || file.status == UploadStatus.Online"
+                     @click="onlineOrOffline(file)"
+                     >{{ file.status == UploadStatus.Offline ? '上线' : '下线' }}</span
+                  >
+                  <span
+                     v-if="file.status == UploadStatus.Offline || file.status == UploadStatus.Online"
+                     class="text-blue-500 hover:text-blue-700 mr-4 cursor-pointer"
+                     @click="downloadFile(index)"
+                     >下载</span
+                  >
+                  <!-- <span class="text-blue-500 hover:text-blue-700 mr-4" @click="previewFile(index)">预览</span> -->
+                  <span class="text-red-500 hover:text-red-700 cursor-pointer" @click="removeFile(index)">删除</span>
+               </div>
+            </div>
+
+            <!-- 上传进度条 -->
+            <div>
+               <Progress :percent="file.percent" :stroke-width="2" :show-info="false" style="height: 2px"></Progress>
+            </div>
+         </div>
+      </div>
+   </div>
+</template>

package/src/components/index.ts

@@ -0,0 +1,97 @@
+import '../assets/global.css';
+
+import { Button, Tooltip, AppIcon, Fullscreen, Helper, Icon, LayoutIcon, ProjectIcon, ToolIcon } from './common';
+import {
+   Dialog,
+   UploadForm,
+   ExcelForm,
+   Drawer,
+   Form,
+   FormItem,
+   Search,
+   SearchItem,
+   Table,
+   TableOperate,
+   Toolbar,
+   Icontool,
+   Tree,
+} from './content';
+import {
+   AutoComplete,
+   Cascader,
+   Checkbox,
+   DatePicker,
+   Input,
+   InputIcon,
+   InputPassword,
+   InputNumber,
+   PropEditor,
+   Radio,
+   RadioStatus,
+   RangePicker,
+   Select,
+   Switch,
+   Textarea,
+   Transfer,
+   TransferTable,
+   TreeSelect,
+   UploadList,
+} from './form';
+
+import { Breadcrumb, Content, Datetime, Header, HeaderExits, Menu, MenuTabs, BasicLayout } from './layout';
+
+export {
+   Button,
+   Tooltip,
+   AppIcon,
+   Fullscreen,
+   Helper,
+   Icon,
+   LayoutIcon,
+   ProjectIcon,
+   ToolIcon,
+   Dialog,
+   UploadForm,
+   ExcelForm,
+   Drawer,
+   Form,
+   FormItem,
+   Search,
+   SearchItem,
+   Table,
+   TableOperate,
+   Toolbar,
+   Icontool,
+   Tree,
+   AutoComplete,
+   Cascader,
+   Checkbox,
+   DatePicker,
+   Input,
+   InputIcon,
+   InputPassword,
+   InputNumber,
+   PropEditor,
+   Radio,
+   RadioStatus,
+   RangePicker,
+   Select,
+   Switch,
+   Textarea,
+   Transfer,
+   TransferTable,
+   TreeSelect,
+   UploadList,
+   Breadcrumb,
+   Content,
+   Datetime,
+   Header,
+   HeaderExits,
+   Menu,
+   MenuTabs,
+   BasicLayout,
+};
+
+import Error403 from './error/error403.vue';
+import Error404 from './error/error404.vue';
+export { Error403, Error404 };

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+import { Breadcrumb, theme } from 'ant-design-vue';
+import { ToolIcon } from '../../common';
+import { BreadcrumbRoute, showBreadcrumb, crumbs, usePageInfo } from '@skyfox2000/webbase';
+
+const { useToken } = theme;
+const { token } = useToken();
+
+const pageInfoStore = usePageInfo();
+watch(
+   () => pageInfoStore.TabActive,
+   () => showBreadcrumb(),
+);
+onMounted(() => {
+   showBreadcrumb();
+});
+</script>
+<template>
+   <div
+      class="ml-5 h-fit p-0 flex items-center justify-between"
+      :style="{
+         backgroundColor: token.colorBgContainer,
+      }"
+   >
+      <ToolIcon icon="icon-home" class="w-[15px] h-[15px]" />
+      <span class="leading-[2.5] mx-[6px] text-[rgba(0,0,0,0.45)]">&gt;</span>
+      <Breadcrumb :routes="crumbs" separator="">
+         <template #itemRender="{ route }: { route: BreadcrumbRoute }">
+            <span class="text-xs leading-[3]">{{ route.breadcrumbName }}</span>
+            <ToolIcon :icon="route.icon" fontsize="15px" />
+            <span v-if="route.index! < crumbs.length - 1" class="leading-[2.5] mx-[6px] text-[rgba(0,0,0,0.45)]"
+               >&gt;</span
+            >
+         </template>
+      </Breadcrumb>
+   </div>
+</template>

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

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { LayoutContent, theme } from 'ant-design-vue';
+const { useToken } = theme;
+const { token } = useToken();
+
+defineProps<{
+   left?: boolean;
+}>();
+</script>
+<template>
+   <div class="relative h-[calc(100vh-80px)] overflow-y-auto">
+      <LayoutContent
+         class="m-[10px] p-[10px] h-[calc(100vh-100px)] !min-h-[calc(100vh-100px)]"
+         :style="{
+            backgroundColor: token.colorBgContainer,
+         }"
+      >
+         <div class="flex w-full h-full min-h-full">
+            <div class="w-1/4 pr-4 min-h-full min-w-[170px] max-w-[200px]" v-if="left">
+               <slot name="left"></slot>
+            </div>
+            <div class="flex-1 h-full overflow-y-auto">
+               <slot></slot>
+            </div>
+         </div>
+      </LayoutContent>
+   </div>
+</template>

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

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+const DateTime = ref("")
+onMounted(() => {
+  setInterval(() => {
+    const curTime = new Date()
+    const options: any = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit' };
+    const formattedTime = curTime.toLocaleString(undefined, options).replace(/\//g, '-').replace(',', '');
+    DateTime.value = curTime.getFullYear() + "-" + formattedTime
+  }, 1000);
+})
+</script>
+
+<template>
+  <div class="font-['Courier'] text-[#666]">{{ DateTime }}</div>
+</template>

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

@@ -0,0 +1,28 @@
+<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';
+
+const userInfoStore = useUserInfo();
+
+const open = ref(false);
+const confirmExit = () => {
+   open.value = false;
+   if (mainAppApis.value) {
+      mainAppApis.value.userLogout!();
+   } else {
+      userInfoStore.logout();
+   }
+};
+</script>
+<template>
+   <ToolIcon icon="icon-logout" @click="open = true" clickable class="w-5 h-5" />
+   <Modal v-model:open="open" title="确定退出？" ok-text="确定" cancel-text="取消" :width="380" @ok="confirmExit">
+      <Flex align="center" justify="flex-start" :style="{ padding: '0 32px', margin: '20px 0' }">
+         <ToolIcon icon="icon-question-circle" color="orange" class="w-[60px] h-[60px]" />
+         <div style="margin: 0 0 0 20px; font-weight: 400; font-size: 16px">是否退出系统，<br />清除用户缓存信息？</div>
+      </Flex>
+   </Modal>
+</template>

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

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { LayoutHeader, Avatar, theme, Space } from 'ant-design-vue';
+import { useSettingInfo } from '@skyfox2000/webbase';
+import { ToolIcon } from '../../common';
+import Breadcrumb from '../breadcrumb/index.vue';
+import HeaderExits from './headerExits.vue';
+
+const { useToken } = theme;
+const { token } = useToken();
+
+const settingInfoStore = useSettingInfo();
+const onCollapseClick = () => {
+   settingInfoStore.setMenuCollapse(!settingInfoStore.menuCollapse);
+};
+</script>
+<template>
+   <LayoutHeader
+      class="w-full relative z-[1] shadow-[0_-3px_6px_#000] py-0 flex items-center justify-between"
+      :style="{
+         height: '40px',
+         lineHeight: '1',
+         paddingLeft: '10px',
+         paddingRight: '10px',
+         backgroundColor: token.colorBgContainer,
+      }"
+   >
+      <div class="flex items-center">
+         <ToolIcon
+            icon="icon-menu"
+            class="w-[18px] h-[18px] cursor-pointer"
+            :angle="settingInfoStore.menuCollapse ? 90 : 0"
+            @click="onCollapseClick"
+         />
+         <Breadcrumb></Breadcrumb>
+      </div>
+      <div>
+         <Space size="middle" class="flex items-center">
+            <Avatar class="avatar" :style="{ backgroundColor: '#f56a00', fontSize: '14px' }" :size="24"> U </Avatar>
+            <HeaderExits />
+         </Space>
+      </div>
+   </LayoutHeader>
+</template>

package/src/components/layout/index.ts

@@ -0,0 +1,16 @@
+import Breadcrumb from './breadcrumb/index.vue';
+export { Breadcrumb };
+import Content from './content/index.vue';
+export { Content };
+import Datetime from './datetime/index.vue';
+export { Datetime };
+import Header from './header/index.vue';
+export { Header };
+import HeaderExits from './header/headerExits.vue';
+export { HeaderExits };
+import Menu from './menu/index.vue';
+export { Menu };
+import MenuTabs from './menu/menuTabs.vue';
+export { MenuTabs };
+import BasicLayout from './page/basicLayout.vue';
+export { BasicLayout };

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

@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+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 { ProjectIcon } from '../../common';
+
+const props = defineProps<{ routes: any }>();
+
+const openKeys = ref<string[]>([]);
+const selectedKeys = ref<string[]>([]);
+
+// 转换为树形结构
+const menuData: Array<ItemType> = reactive([]);
+
+const pageInfoStore = usePageInfo();
+const onMenuClick: MenuProps['onClick'] = (menuInfo) => {
+   useAppInfo().push(menuInfo.key.toString());
+};
+
+const settingInfoStore = useSettingInfo();
+const showOpenKeys = ref<string[]>([]);
+const activeMenu = () => {
+   let subPath = pageInfoStore.TabActive;
+   const paths = subPath.split('/');
+   paths.pop();
+   openKeys.value = [paths.join('/')];
+   if (!settingInfoStore.menuCollapse) {
+      showOpenKeys.value = [paths.join('/')];
+   }
+   selectedKeys.value = [subPath];
+};
+
+watch(
+   () => settingInfoStore.menuCollapse,
+   (newVal) => {
+      if (!newVal) {
+         showOpenKeys.value = [];
+         nextTick(() => {
+            showOpenKeys.value = [...openKeys.value];
+         });
+      }
+   },
+);
+watch(
+   () => pageInfoStore.TabActive,
+   () => {
+      activeMenu();
+   },
+);
+
+onMounted(() => {
+   initMenu<ItemType>(props.routes, menuData, ProjectIcon, { class: '!w-5 !h-5' });
+   pageInfoStore.setTabActive(AppRouter.currentRoute.value.path);
+
+   activeMenu();
+});
+</script>
+<template>
+   <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

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Tabs, TabPane, theme } from 'ant-design-vue';
+import { useAppInfo, usePageInfo } from '@skyfox2000/webbase';
+
+import { ToolIcon, Tooltip } from '../../common';
+
+const { useToken } = theme;
+const { token } = useToken();
+
+const pageInfoStore = usePageInfo();
+
+const onTabClicked = (tabKey: any) => {
+   useAppInfo().push(tabKey as string);
+};
+
+const closeTab = (key: string) => {
+   pageInfoStore.removeTabPane(key);
+   useAppInfo().push(pageInfoStore.TabActive);
+};
+</script>
+<template>
+   <div :style="{ height: '38px', backgroundColor: token.colorBgBase }">
+      <Tabs
+         :activeKey="pageInfoStore.TabActive"
+         hide-add
+         size="small"
+         :tabBarStyle="{ padding: '0 20px' }"
+         @tabClick="onTabClicked"
+      >
+         <TabPane v-for="pane in pageInfoStore.TabPanes" :key="pane.key">
+            <template #tab>
+               <div class="flex items-center">
+                  <span class="flex">
+                     {{ pane.title }}
+                  </span>
+                  <Tooltip title="关闭" placement="top" size="small">
+                     <div
+                        class="inline-block mx-auto relative flex items-center"
+                        v-if="pageInfoStore.TabPanes.length > 1 && pane.closable"
+                        @click.stop="closeTab(pane.key)"
+                     >
+                        <ToolIcon
+                           icon="icon-new"
+                           :angle="45"
+                           clickable
+                           class="w-[15px] h-[15px] ml-1"
+                           :tipcolor="token.colorBgSpotlight"
+                        />
+                     </div>
+                  </Tooltip>
+               </div>
+            </template>
+         </TabPane>
+      </Tabs>
+   </div>
+</template>