af-mobile-client-vue3 1.0.54

package/.editorconfig

@@ -0,0 +1,38 @@
+[*]
+charset=utf-8
+end_of_line=lf
+insert_final_newline=false
+indent_style=space
+indent_size=2
+
+[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
+indent_style=space
+indent_size=2
+
+[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
+indent_style=space
+indent_size=2
+
+[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
+indent_style=space
+indent_size=2
+
+[*.svg]
+indent_style=space
+indent_size=2
+
+[*.js.map]
+indent_style=space
+indent_size=2
+
+[*.less]
+indent_style=space
+indent_size=2
+
+[{*.vue,*.ts,*.tsx}]
+indent_style=space
+indent_size=2
+
+[{.analysis_options,*.yml,*.yaml}]
+indent_style=space
+indent_size=2

package/.env

@@ -0,0 +1,7 @@
+VITE_APP_PUBLIC_PATH=/example-web
+VITE_APP_PREVIEW=true
+VITE_APP_API_BASE_URL=/api
+VITE_APP_WEB_CONFIG_KEY=admin.webconfig
+VITE_APP_SYSTEM_NAME=af-system
+# 最低兼容性 V4（最新产品）V3(V3产品) OA(公司OA)
+VITE_APP_COMPATIBLE=OA

package/.env.development

@@ -0,0 +1,4 @@
+NODE_ENV=development
+VITE_APP_PUBLIC_PATH=/
+VITE_APP_PREVIEW=true
+VITE_APP_API_BASE_URL=/api

package/.env.envoiceShow

@@ -0,0 +1,7 @@
+VITE_APP_PUBLIC_PATH=/invoiceShow
+VITE_APP_PREVIEW=true
+VITE_APP_API_BASE_URL=/api
+VITE_APP_WEB_CONFIG_KEY=admin.webconfig
+VITE_APP_SYSTEM_NAME=af-system
+# 最低兼容性 V4（最新产品）V3(V3产品) OA(公司OA)
+VITE_APP_COMPATIBLE=V4

package/.env.production

@@ -0,0 +1,7 @@
+VITE_APP_PUBLIC_PATH=/
+VITE_APP_PREVIEW=true
+VITE_APP_API_BASE_URL=/api
+VITE_APP_WEB_CONFIG_KEY=admin.webconfig
+VITE_APP_SYSTEM_NAME=af-system
+# 最低兼容性 V4（最新产品）V3(V3产品) OA(公司OA)
+VITE_APP_COMPATIBLE=V4

package/.husky/commit-msg

@@ -0,0 +1 @@
+node scripts/verifyCommit.js

package/.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint

package/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "antfu.unocss",
+    "simonhe.common-intellisense"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,61 @@
+{
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Disable the MD033 rule
+  "markdownlint.config": {
+    "default": true,
+    "MD033": false
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ],
+
+  // Specify the UI library you need to prompt
+  "common-intellisense.showSlots": false,
+  "common-intellisense.ui": [
+    "vant4"
+  ],
+
+  // Configuration of i18n i18n-ally
+  "i18n-ally.enabledParsers": ["json"],
+  "i18n-ally.displayLanguage": "zh-CN",
+  "i18n-ally.localesPaths": [
+    "src/locales"
+  ],
+  "i18n-ally.keystyle": "nested"
+}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Charlie Wang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,181 @@
+<h1 align="center">af-system-mobile-vue-web</h1>
+
+<p align="center">基于v4架构的vue移动端主应用</p>
+
+<h1 align="center">介绍</h1>
+
+🔥 脚手架选用Vue3-Vant-Mobile，一个集成 Vue3、Vite5、Vant4、Pinia2、Vitest、TypeScript 构建的集成最新技术栈、完整干净的移动端模板 -> [Github](https://github.com/CharleeWa/vue3-vant-mobile)
+
+🔥 UI框架选用Vant4，有赞团队开发的轻量、可定制的移动端 Vue 组件库 -> [官网](https://vant-contrib.gitee.io/vant/#/zh-CN)
+
+<h1 align="center">使用指南</h1>
+
+<p align="center">指南非常地详细，并非说明上手多么地复杂，只是更好地使用它做的说明而已</p>
+
+## 需要注意的地方
+- 本项目作为微前端框架micro-app的主应用，虽然同样派生自example项目，但example项目主要用于子应用的快速建设，因此本项目在微前端接入代码方面和example表现不一致
+
+## 特性
+
+- 🌓 支持暗黑模式
+- 💪 使用TypeScript编写
+- 🚀 Vue3 生态开箱即用
+- 🤖 自动导入组件
+- 📦 使用pnpm包管理器
+- 💾 支持Mock服务器
+- 🌈 支持Git hooks（lint和commit）
+- 💖 移动端UI组件（Vant4）
+- 🍍 Pinia，Vue的状态管理库
+
+### 包管理器
+
+推荐使用 [pnpm](https://pnpm.io/) 来进行包管理，可以极大地减少install时间, 而且非常节省磁盘空间。
+
+### 目录结构
+
+下面是模板的主要目录结构和一些简要地说明。
+
+```
+├── src
+│   ├── api                  # Api ajax 等
+│   ├── assets               # 本地静态资源
+│   ├── layouts              # 封装布局组件
+│   ├── components           # 业务通用组件和基础布局组件
+│   ├── router               # Vue-Router
+│   ├── store                # Pinia
+│   ├── utils                # 工具库
+│   ├── views                # 业务页面入口和常用模板
+│   ├── App.vue              # Vue 模板入口
+│   └── main.ts              # Vue 入口 JS
+│   └── app.less             # 全局样式
+│   └── env.d.ts             # 全局公用 TypeScript 类型
+├── build/mock               # mock 服务
+├── mock                     # mock 数据
+├── public                   # 静态文件
+├── scripts                  # 公共执行脚本
+├── tests                    # 单元测试
+├── auto-imports.d.ts        # Vue3 组合式API 类型声明文件
+├── components.d.ts          # 组件自注册类型声明文件
+├── vite.config.ts           # Vite 配置文件
+├── tsconfig.json            # TS 配置文件
+├── index.html               # 浏览器渲染入口
+├── README.md                # 简单介绍
+└── package.json             # 项目的依赖
+```
+
+### 本地开发
+
+最快的使用方式是在本项目的gitlab主页点击`派生`按钮，即可复制一份本项目结构
+
+随后请按照以下步骤完成对项目的修改
+
+1. 将`app.less`,`main.ts`,`progress.ts`,`vite.config.ts`,`index.html`中的`#example-app`改成你的业务模块实际名称，如`#safecheck-app`
+2. 将`.env`中的`VITE_APP_PUBLIC_PATH`值改成你的业务模块实际名称，如`/safecheck-web`
+3. 将`package.json`中的`af-example-mobile-vue-web`改成你的项目实际名称，如`af-safecheck-mobile-vue-web`
+4. 在`af-system-mobile-vue-web`项目的`microApps.ts`文件中注册微应用
+
+进入代码目录，安装项目的依赖。
+
+```bash
+# with pnpm
+pnpm install
+```
+
+> 如果网络状况不佳，可以设置 pnpm 的 npm 加载源，如 pnpm config set registry <https://registry.npmmirror.com>
+
+完成前面的步骤以后，就可以开始进行业务开发了。
+
+- 启动服务
+
+```bash
+pnpm dev
+```
+
+- 打包构建
+
+```bash
+pnpm build
+```
+
+## 浏览器支持
+
+支持现代浏览器
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
+|                                                                                             not support                                                                                              |                                                                                            last 2 versions                                                                                             |                                                                                                  last 2 versions                                                                                                  |                                                                                                last 2 versions                                                                                                |                                                                                                last 2 versions                                                                                                |
+
+### 新增页面
+
+这里的『页面』指配置了路由，能够通过链接直接访问的模块，要新建一个页面，通常只需要在脚手架的基础上进行简单的配置。
+
+- 手动创建
+
+在 src/views 下新建页面的vue文件，如果相关页面有多个，可以新建一个文件夹来放置相关文件。
+
+值得提醒的是，样式文件默认使用 `Less`，如果想要集成其它预处理器，如 `Sass` 和 `Stylus`，请自行安装。
+
+最后，记得将新建的文件加入路由 - router/index.ts
+
+### 新增业务组件
+
+对于一些可能被多处引用的功能模块，建议提炼成业务组件统一管理。这些组件一般有以下特征：
+
+- 只负责一块相对独立，稳定的功能；
+- 没有单独的路由配置；
+- 可能是纯静态的，也可能包含自己的 state，但不涉及 pinia 的数据流，仅受父组件（通常是一个页面）传递的参数控制。
+
+这里以一个简单的静态组件为例进行介绍。假设你的应用中经常需要展现图片，这些图片有固定的高度和宽度，有背景颜色，还有一段文字介绍。你可以用一个组件来实现这个功能，它有默认的样式，同时可以接收父组件传递过来的参数进行展示。
+
+- 1、新建文件
+
+在 src/components 下新建一个以组件名命名的文件夹，注意首字母大写，命名尽量体现组件的功能，这里就叫 image-wrapper。在此文件夹下新增 js/ts/vue 文件及样式文件（如果需要），命名为 index.ts和 index.less。
+
+> 如果你的组件比较复杂，可以分为多个文件，最后在 index.ts 中统一 export。
+
+你的代码大概是这个样子：
+
+```
+<template>
+ <div class="image-wrapper">
+  <img class="img" :src="src" :alt="desc" />
+    <!-- 如果使用该组件的使用者没用 slot，则默认 div.desc 来输出传递的 desc 属性 -->
+  <slot name="desc">
+   <div class="desc" v-if="desc">{{ desc }}</div>
+  </slot>
+ </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  src: String,
+  desc: String,
+})
+</script>
+```
+
+- 2、使用
+
+在要使用这个组件的地方，按照组件定义的 API 传入参数，直接使用就好:
+
+```
+<template>
+ <!-- 普通使用方式 -->
+ <image-wrapper :src="state.imageSrc" :desc="state.context"></image-wrapper>
+ <!-- 使用 slot 的 desc 方式 -->
+ <image-wrapper :src="state.imageSrc">
+  <template #desc>
+      <span>{{ state.context }}</span>
+  </template>
+ </image-wrapper>
+</template>
+
+<script setup lang="ts">
+const state = reactive({
+  context: '示意图',
+  imageSrc: 'xxxxxxxxx.png'
+})
+</script>
+```
+
+值得说明的是，我们不必先引入组件再使用组件，也不必先引入Vue3 API再使用API，因为这一切都由 `unplugin-vue-components` 和 `unplugin-auto-import` 帮我们做好了。

package/af-example-mobile-vue-web.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/build/vite/index.ts

@@ -0,0 +1,91 @@
+import path from 'node:path'
+import process from 'node:process'
+import vue from '@vitejs/plugin-vue'
+import legacy from '@vitejs/plugin-legacy'
+import UnoCSS from 'unocss/vite'
+import viteCompression from 'vite-plugin-compression'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import { VitePWA } from 'vite-plugin-pwa'
+import Sitemap from 'vite-plugin-sitemap'
+import mockDevServerPlugin from 'vite-plugin-mock-dev-server'
+import { createViteVConsole } from './vconsole'
+
+export function createVitePlugins() {
+  const root = process.cwd()
+
+  return [
+    vue({
+      template: {
+        compilerOptions: {
+          // 注册自定义组件micro-app 防止控制台警告
+          isCustomElement: tag => tag.startsWith('micro-app'),
+        },
+      },
+    }),
+
+    // https://github.com/jbaubree/vite-plugin-sitemap
+    Sitemap(),
+
+    // https://github.com/pengzhanbo/vite-plugin-mock-dev-server
+    mockDevServerPlugin(),
+
+    // svg icon
+    createSvgIconsPlugin({
+      // 指定图标文件夹
+      iconDirs: [path.resolve(root, 'src/icons/svg')],
+      // 指定 symbolId 格式
+      symbolId: 'icon-[dir]-[name]',
+    }),
+
+    // 生产环境 gzip 压缩资源
+    viteCompression({
+      algorithm: 'gzip',
+      // 文件大于10240b（10kb）时才压缩文件
+      threshold: 10240,
+      // 禁止在控制台输出压缩结果
+      verbose: false,
+      // 压缩完文件后删除源文件
+      deleteOriginFile: false,
+    }),
+
+    legacy({
+      targets: ['defaults', 'not IE 11'],
+    }),
+
+    // https://github.com/antfu/unocss
+    // see uno.config.ts for config
+    UnoCSS(),
+
+    // https://github.com/vadxq/vite-plugin-vconsole
+    createViteVConsole(),
+
+    // https://github.com/antfu/vite-plugin-pwa
+    VitePWA({
+      registerType: 'autoUpdate',
+      includeAssets: ['favicon.svg', 'safari-pinned-tab.svg'],
+      manifest: {
+        name: 'af-mobile-client-vue3',
+        short_name: 'af-mobile-client-vue3',
+        theme_color: '#ffffff',
+        icons: [
+          {
+            src: '/pwa-192x192.png',
+            sizes: '192x192',
+            type: 'image/png',
+          },
+          {
+            src: '/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+          },
+          {
+            src: '/pwa-512x512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'any maskable',
+          },
+        ],
+      },
+    }),
+  ]
+}

package/build/vite/vconsole.ts

@@ -0,0 +1,44 @@
+import path from 'node:path'
+import { viteVConsole } from 'vite-plugin-vconsole'
+
+export function createViteVConsole() {
+  return viteVConsole({
+    entry: [path.resolve('src/main.ts')],
+    enabled: false,
+    config: {
+      maxLogNumber: 1000,
+      theme: 'light',
+    },
+    // https://github.com/vadxq/vite-plugin-vconsole/issues/21
+    dynamicConfig: {
+      theme: `document.documentElement.classList.contains('dark') ? 'dark' : 'light'`,
+    },
+    eventListener: `
+      const targetElement = document.querySelector('html'); // 择要监听的元素
+      const observerOptions = {
+        attributes: true, // 监听属性变化
+        attributeFilter: ['class'] // 只监听class属性变化
+      };
+
+      // 定义回调函数来处理观察到的变化
+      function handleAttributeChange(mutationsList) {
+        for(let mutation of mutationsList) {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            if (window && window.vConsole) {
+              window.vConsole.dynamicChange.value = new Date().getTime();
+            }
+          }
+        }
+      }
+
+      // 创建观察者实例并传入回调函数
+      const observer = new MutationObserver(handleAttributeChange);
+
+      // 开始观察目标元素
+      observer.observe(targetElement, observerOptions);
+
+      // 当不再需要观察时，停止观察
+      // observer.disconnect();
+    `,
+  })
+}

package/eslint.config.js

@@ -0,0 +1,7 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  // enable UnoCSS support
+  // https://unocss.dev/integrations/vscode
+  unocss: true,
+})

package/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no"/>
+    <link rel="icon" href="/favicon.ico" />
+  </head>
+  <body>
+    <div id="system-app"></div>
+    <script type="module" src="/src/main.ts"></script>
+    <noscript>
+      This website requires JavaScript to function properly.
+      Please enable JavaScript to continue.
+    </noscript>
+  </body>
+</html>

package/mock/data.ts

@@ -0,0 +1,20 @@
+import { defineMockData } from 'vite-plugin-mock-dev-server'
+
+// defineMockData，用于在 mock 文件中使用 data.ts 作为共享数据源。
+export default defineMockData('proses', [
+  { prose: '🔖 躲在某一时间，想念一段时光的掌纹;躲在某一地点，想念一个站在来路也站在去路的，让我牵挂的人。' },
+  { prose: '🔖 天空一碧如洗，灿烂的阳光正从密密的松针的缝隙间射下来，形成一束束粗粗细细的光柱，把飘荡着轻纱般薄雾的林荫照得通亮。' },
+  { prose: '🔖 这一次相遇，美得彻骨，美得震颤，美得孤绝，美得惊艳。' },
+  { prose: '🔖 沉默的状态，能让我感觉到呼吸的自由和自己原来就处于的本色位置。' },
+  { prose: '🔖 青春，是一包象征着阳光的向日葵种子，在现在洒下，就会在未来得到收获，那一株株饱含青春的花朵。' },
+  { prose: '🔖 燕子去了，有再来的时候;杨柳枯了，有再青的时候;桃花谢了，有再开的时候。但是，聪明的，你告诉我，我们的日子为什么一去不复返呢?' },
+  { prose: '🔖 毕业了，青春在无形之中离去，我们即将翻开人生的另一页。' },
+  { prose: '🔖 成长，是每个孩子的权力，也是他们必经的征程，或平坦、或崎岖，有悲欢，有离合。' },
+  { prose: '🔖 旧时光里的人和事，琐碎而零乱。我的记忆很模糊，好像大部分都成了一种温馨的符号，静静的沉在我心底。' },
+  { prose: '🔖 生活是一部大百科全书，包罗万象;生活是一把六弦琴，弹奏出多重美妙的旋律：生活是一座飞马牌大钟，上紧发条，便会使人获得浓缩的生命。' },
+  { prose: '🔖 毕业了，身边的朋友一个个各奔东西，开始学会自己撑起生命的暖色。' },
+  { prose: '🔖 已经走到尽头的东西，重生也不过是再一次的消亡。就像所有的开始，其实都只是一个写好了的结局。' },
+  { prose: '🔖 下午茶的芬香熏陶着房内的任何一个角落，午后的阳光透过窗帘的间隙洒在木制的桌面上，一份思念随着红茶顺滑至心中。' },
+  { prose: '🔖 这里再不是我们的校园，当我们就此离开我们的青葱岁月。' },
+  { prose: '🔖 很久找你，一直没有找到，微风吹过的时候，我深深的呼吸，才感觉到你也在陪伴着我呼吸。' },
+])

package/mock/index.ts

@@ -0,0 +1,5 @@
+import prose from './modules/prose.mock'
+
+export default {
+  ...prose,
+}

package/mock/modules/prose.mock.ts

@@ -0,0 +1,16 @@
+// https://github.com/pengzhanbo/vite-plugin-mock-dev-server
+import { defineMock } from 'vite-plugin-mock-dev-server'
+import proses from '../data'
+
+export default defineMock({
+  url: '/api/project/prose',
+  delay: 100,
+  body: () => {
+    const prose = proses.value[Math.floor(Math.random() * 8)]
+    return {
+      code: 200,
+      data: prose,
+      msg: 'success',
+    }
+  },
+})