@skyfox2000/webui 0.1.0

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

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+import { Layout, LayoutSider } from 'ant-design-vue';
+import Tooltip from '../../common/tooltip/index.vue';
+import Icon from '../../common/icon/index.vue';
+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 message from 'vue-m-message';
+
+const props = defineProps<{ routes: any }>();
+
+const appInfoStore = useAppInfo();
+const settingInfoStore = useSettingInfo();
+const pageInfoStore = usePageInfo();
+
+const bodyClass = ref('h-[calc(100vh-80px)]');
+watch(
+   () => settingInfoStore.fullscreen,
+   (newVal) => {
+      bodyClass.value = newVal ? 'h-[calc(100vh-40px)]' : 'h-[calc(100vh-80px)]';
+   },
+);
+
+onMounted(() => {
+   message.closeAll();
+});
+</script>
+<template>
+   <Layout class="h-screen">
+      <LayoutSider
+         class="overflow-auto h-screen left-0 top-0 bottom-0"
+         v-model:collapsed="settingInfoStore.menuCollapse"
+         collapsible
+         v-if="!settingInfoStore.fullscreen"
+      >
+         <div
+            class="h-[40px] max-h-[40px] bg-[rgba(240,240,240,0.2)] flex flex-nowrap items-center justify-center text-white font-bold text-lg overflow-hidden text-ellipsis"
+         >
+            <Tooltip :title="settingInfoStore.menuCollapse ? appInfoStore.appInfo.Name : ''" placement="right">
+               <Icon
+                  v-if="appInfoStore.appInfo.Icon?.startsWith('sym-')"
+                  :icon="appInfoStore.appInfo.Icon"
+                  fontsize="30px"
+                  size="26px"
+               />
+               <AppIcon v-else :icon="appInfoStore.appInfo.Icon" class="mx-1" />
+            </Tooltip>
+            <span v-if="!settingInfoStore.menuCollapse" class="ml-[10px]">{{ appInfoStore.appInfo.Name }}</span>
+         </div>
+         <Menu :routes="props.routes"></Menu>
+      </LayoutSider>
+      <Layout class="overflow-y-auto block">
+         <Header v-if="!settingInfoStore.fullscreen"></Header>
+         <MenuTabs v-if="pageInfoStore.TabEnabled"></MenuTabs>
+         <div class="relative overflow-y-auto" :class="bodyClass">
+            <router-view v-slot="{ Component, route }">
+               <keep-alive :include="appInfoStore.CachedComponents" :exclude="appInfoStore.ExcludeComponents">
+                  <component :is="appInfoStore.cacheComponent(Component, route)" />
+               </keep-alive>
+            </router-view>
+         </div>
+      </Layout>
+   </Layout>
+</template>

package/src/vite-env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+//解决ts文件引入vue文件出现红色警告问题
+declare module '*.vue' {
+  import { defineComponent } from 'vue';
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}

package/tailwind.config.ts

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  corePlugins: {
+    preflight: false,
+  },
+  plugins: [],
+};

package/tsconfig.json

@@ -0,0 +1,53 @@
+{
+   "compilerOptions": {
+      "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+      "declaration": true,
+      "declarationMap": true,
+      "emitDeclarationOnly": false,
+      "esModuleInterop": true,
+      "target": "ESNext",
+      "useDefineForClassFields": true,
+      "module": "ESNext",
+      "lib": ["ES2020", "DOM", "DOM.Iterable"],
+      "skipLibCheck": true,
+      "removeComments": true,
+      "forceConsistentCasingInFileNames": true,
+
+      "composite": true,
+      "allowSyntheticDefaultImports": true,
+
+      /* Bundler mode */
+      "moduleResolution": "Bundler",
+      "resolveJsonModule": true,
+      "isolatedModules": true,
+      "noEmit": false,
+      "jsx": "preserve",
+
+      /* Linting */
+      "strict": true,
+      "noUnusedLocals": true,
+      "noUnusedParameters": true,
+      "noFallthroughCasesInSwitch": true,
+      "baseUrl": ".",
+      "paths": {
+         "@/*": ["src/*"]
+      },
+      "typeRoots": ["./node_modules/@types", "./types"],
+      "rootDir": "./",
+      "outDir": "lib",
+
+      "allowJs": true,
+      "types": ["vite/client", "node"],
+      "sourceMap": true,
+      "verbatimModuleSyntax": false
+   },
+   "include": [
+      "src/**/**.ts",
+      "src/**/**.d.ts",
+      "src/**/**.vue",
+      "types/**/*.d.ts",
+      "vite.config.ts",
+      "plugins/**/*.ts"
+   ],
+   "exclude": ["node_modules", "lib", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,117 @@
+import { ConfigEnv, defineConfig, loadEnv } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+// import tailwindcss from 'tailwindcss';
+// import autoGenerateVue from './plugins/vite-plugin-auto-generate-vue';
+import dts from 'vite-plugin-dts';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }: ConfigEnv) => {
+   const root = process.cwd();
+   const env = loadEnv(mode, root);
+   console.log(new Date().toLocaleTimeString(), ' ', env);
+
+   return {
+      plugins: [
+         // autoGenerateVue({
+         //    dir: './src/components',
+         //    skip: ['./src/components/error', './src/components/form/aceEditor', './src/components/layout/page'],
+         //    output: './src/components/index.ts',
+         // }),
+         vue(),
+         dts({
+            outDir: 'lib',
+            entryRoot: 'src',
+            // 确保Vue文件也能生成类型
+            include: ['src/components/**/*.ts', 'src/components/**/*.vue'],
+            // 排除不需要的文件
+            exclude: ['node_modules/**', 'src/components/**/*.test.ts'],
+            // 不使用API Extractor来生成类型
+            rollupTypes: false,
+            // 启用静态导入，避免某些Vue模块解析问题
+            staticImport: true,
+            // 生成.d.ts入口文件
+            insertTypesEntry: true,
+            // 复制外部.d.ts文件
+            copyDtsFiles: true,
+         }),
+      ],
+      // esmExternals: true,
+      // css: {
+      //    postcss: {
+      //       plugins: [tailwindcss()],
+      //    },
+      // },
+      resolve: {
+         alias: {
+            '@': path.resolve('./src'),
+            '@skyfox2000/fapi': path.resolve('../502417_fapi'),
+            '@skyfox2000/microbase': path.resolve('../502424_MicroBase'),
+            '@skyfox2000/webabase': path.resolve('../502428_WebBase'),
+         },
+         extensions: ['.js', '.ts', '.vue', 'json'],
+      },
+      build: {
+         outDir: 'lib',
+         assetsDir: 'assets',
+         lib: {
+            entry: {
+               index: 'src/components/index.ts',
+               AceEditor: 'src/components/form/aceEditor/index.vue',
+               ExcelForm: 'src/components/content/dialog/excelForm.vue',
+               UploadForm: 'src/components/content/dialog/uploadForm.vue',
+               Error403: 'src/components/error/error403.vue',
+               Error404: 'src/components/error/error404.vue',
+               BasicLayout: 'src/components/layout/page/basicLayout.vue',
+            },
+            fileName: (format, entryName) => {
+               if (entryName === 'index') return `webui.${format}.js`;
+               return `es/${entryName}/index.js`;
+            },
+         },
+         rollupOptions: {
+            // 外部化处理那些你并不打算打包进库的依赖
+            external: [
+               'pinia',
+               'pinia-plugin-persistedstate',
+               'dayjs',
+               'vue',
+               'vue-router',
+               'ant-design-vue',
+               'vue-m-message',
+               '@skyfox2000/fapi',
+               '@skyfox2000/webbase',
+               '@skyfox2000/microbase',
+
+               '@vue-office/excel',
+               // 添加ace相关的依赖为external
+               'ace-builds',
+               'vue3-ace-editor',
+               'ace-builds/src-min-noconflict/ext-language_tools',
+               'ace-builds/src-min-noconflict/mode-json',
+               'ace-builds/src-min-noconflict/mode-javascript',
+               'ace-builds/src-min-noconflict/mode-yaml',
+               'ace-builds/src-min-noconflict/theme-github',
+               'ace-builds/src-min-noconflict/theme-monokai',
+               'ace-builds/src-min-noconflict/theme-twilight',
+            ],
+            // 如果你使用 TypeScript，则需要提供类型声明文件的输出路径
+            output: [
+               {
+                  globals: {}, // 这里指定 crypto-js 的全局变量名为 CryptoJS
+                  extend: false,
+                  format: 'es',
+                  dir: 'lib',
+                  chunkFileNames: (assetInfo) => {
+                     let name = assetInfo.name;
+                     if (name.indexOf('.') > -1) name = name.substring(0, name.indexOf('.'));
+                     return `assets/modules/${name}-[hash].js`;
+                  },
+               },
+            ],
+         },
+         minify: true, // 开启压缩
+         sourcemap: false,
+      },
+   };
+});

package//344/273/243/347/240/201/350/247/204/350/214/203/345/217/212/351/243/216/346/240/274/346/214/207/345/215/227.md

@@ -0,0 +1,116 @@
+# 代码规范及风格指南
+
+1. 技术栈要求:
+
+    > 核心技术栈: Vue3 + TypeScript + Vite4 + Pinia + VueRouter
+    >
+    > UI组件: [AntDesign-vue v3.2.x](https://antdv.com/components/overview)
+    >
+    > CSS预处理器: [Windi CSS](https://windicss.org/integrations/vite.html)(优先), 其次`less`
+    >
+    > Vite插件:
+    >
+    > * [File system based route generator](https://github.com/hannoeru/vite-plugin-pages)
+    > * [Vue Layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
+    > * [Auto import APIs](https://github.com/antfu/unplugin-auto-import)
+    > * [Components auto importing](https://github.com/antfu/unplugin-vue-components)
+
+2. Git commit 风格指南
+
+    > - feat: 增加新功能
+    > - fix: 修复问题
+    > - style: 代码风格相关无影响运行结果的
+    > - perf: 优化/性能提升
+    > - refactor: 重构
+    > - revert: 撤销修改
+    > - test: 测试相关
+    > - docs: 文档/注释
+    > - chore: 依赖更新/脚手架配置修改等
+    > - ci: 持续集成
+
+3. 使用`pnpm`进行包管理
+
+4. `README.md`中要写清楚如下内容:
+
+   * 目录结构说明
+   * 使用到的技术栈: 如第三方组件库, UI库, 工具库等等
+   * 最低NodeJS的版本要求
+   * 初始化项目的过程: 如何安装NodeJS, pnpm, 如何安装依赖, 如何启用项目
+   * 打包: 打包的命令, 注意事项等
+
+5. 代码书写风格可以不使用perttier等插件进行约束, 但总体书写风格请参考prettierrc.json:
+
+    ```json
+    {
+      "semi": true,
+      "tabWidth": 2,
+      "useTabs": false,
+      "singleQuote": true,
+      "quoteProps": 'as-needed',
+      "printWidth": 120,
+      "trailingComma": "all",
+      "endOfLine": 'lf',
+    }
+    ```
+
+6. 项目中若用到了`ES6`之后更高级的特性, Build时请考虑是否需要`Polyfill`, 参考官方插件`@vitejs/plugin-legacy`
+
+    > `备注`: 需要支持Chrome 69以上
+
+7. 请使用MockJS进行API Mock, 参考插件`vite-plugin-mock`
+
+8. 参考Vite中关于dotenv章节的说明, 使用.env区分不同环境, 如: staing, dev, production. 同时结合第四点, 实现dev使用Mockjs, sating使用测试接口地址, production使用正式接口地址
+
+9.  TypeScript的typing类型声明, 如果是公用的, 统一放在 `src/typings`下, 如果是组件内部使用的类型声明, 定义在组件内部或者同级目录下
+
+10. 所有的 API 请求和响应参数, 都要申明ts的typings(放在统一的`api.d.ts`文件中), 同时入参和出参有公共参数, 请抽离, 参考如下:
+     ```typescript
+     export type AnyObject = Record<string | number, any> | Array | any;
+
+     export declare namespace Request {
+
+       interface SignableRequest<D = AnyObject> {
+         traceid: string;   // 跟踪ID
+         timestamp: string; // 请求时间: yyyy-MM-dd HH:mm:ss
+         data?: D;
+       }
+
+       interface PagingRequest {
+         pageNo: number;
+         pageSize: number;
+       }
+
+       interface QueryUserInfo extends SignableRequest {
+         userId: number;
+       }
+     }
+
+     export declare namespace Model {
+
+      interface UserInfo {
+        userName: string;
+        userId: string;
+      }
+     }
+
+     export declare namespace Response {
+
+       interface AbstractResponse<D = AnyObject> {
+         status: number; // 状态码
+         message?: string;
+         timestamp: string; // 请求时间: yyyy-MM-dd HH:mm:ss
+         data?: D;
+       }
+
+       declare type User = AbstractResponse<Model.UserInfo>;
+     }
+     ```
+
+11. API接口请统一封装在 `src/api`目录下, 根据模块进行文件分割, 避免各个API URL散落在各个页面和组件中
+
+12. Vue风格指南, 请参考: https://vuejs.org/style-guide/rules-strongly-recommended.html#priority-b-rules-strongly-recommended
+      1. 单文件组件, 首字母要大写, 不要仅用一个单词进行命名, 使用驼峰命名. 项目有这样的命名`left.vue`
+      2. Base组件, 请统一在组件命名时, 增加前缀, 如`Base`或`App`. 项目有这样的命名`header.vue`
+      3. pages下的Vue文件, 如果是自定义组件的, 参考上述要求, 如果是用作路由的, 请使用小写
+
+13. import 路径禁止出现这种 `import shangHaiMap from "./../../../assets/shanghai.json"`, 使用`@`符号代替根路径, 调整成 `import shangHaiMap from '@/assets/shanghai.json''`