ai-tagging/web

VUE2版本模块化框架底座，所有新研发产品使用该底座进行研发。

现在可以试试！

Vite4 Vue2 JavaScript Starter Template 需要 Node 版本 >= 16.14

使用

开发

只需要执行以下命令就可以在 http://localhost:3000 中看到

## 安装依赖
npm install -g pnpm
pnpm install

> 若已安装pnpm请忽略npm install -g pnpm，直接执行pnpm install, pnpm8要求最低node版本16.14，若pnpm为其他版本请安装合适版本node

## 运行
npm run dev

构建

## 构建
npm run build

低代码平台开发

启动低码服务器

## 单独启动低码本地服务器（后续会进行改造，改造后就不需要单独启动了）
pnpm yuxp

访问我的应用 目前配置了静态路由/yuxp-web/yuxp/myapps/index，通过浏览器地址栏可以进行访问

mock 模拟接口开发

1. 模拟接口文件路径遵循规范：/mock/[模块名]/[功能名].mock.js
2. CRUD模拟接口定义示例: mock/demo/demo.mock.js
3. 文件上传下载模拟接口定义示例: mock/file/file.mock.js
4. 更详细的文档

常见问题处理

执行npm install -g pnpm时，若报request to https://registry.npmjs.org/pnpm failed，执行：

npm config set _auth eXVzcC1ndWVzdDp5dXNwLWd1ZXN0== npm install -g pnpm@8.15.7 --registry=http://192.168.36.21:9018/repository/yx-npm-group/

husky -pre-commit hook 报‘node不是内部或外部命令，也不是可运行的程序

​ 在windows上，我们用nvm控制node版本，在提交代码时，可能会遇到如下报错信息

git commit -m"feat: add test
'node' 不是内部或外部命令，也不是可运行的程序或批处理文件。

husky - pre-commit hook exited with code 1 (error)

​ 导致无法进行提交代码，解决版本如下：项目根目录 .husky/pre-commit 和 .husky/commit-msg 将其中 npx 命令修改为 node_modules/bin/* 目录执行

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

node_modules/.bin/lint-staged
# npx lint-staged

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

# npx --no-install commitlint --edit 
node_modules/.bin/commitlint --edit

logo图标切换

src/style/images下带有logo的图：
  logo-full-black.svg （两处：登录页、忘记密码）
  logo-mini.svg （首页左上角logo图标）
标题：
  index.html
  baseFrameOptions.logoInfo.logoTitle

统一规范

输入框特殊符号限制

当前在@config/components.js中进行统一配置，不支持输入%，如确认输入框支持，则需要单独配置当前输入框

表单统一规范

查询条件

统一展示4列，若页面为左右结构，左边为树一类的页面，右侧的列表查询条件展示3列 查询条件label文案需全部展示，若换行或出现省略号，需调整整列的label-width，需整列对齐

详情表单非弹窗：统一展示3列

弹窗

根据弹窗内容自行调节:      若内容特别少（5个及以内），默认展示1列，弹窗设置size="tiny"；      若内容较少（6个-20个），默认展示2列，弹窗设置size="small"；      若内容较少（20个以上），默认展示3列

资保项目说明

xdjf-frame
  ├── mocks
  ├── packages                      # 平台框架npm包本地化（后续会删除）
  ├── public                        # 入口+静态资源位置
  ├── src                         
  │     ├── api                     # oca框架层api封装
  │     ├── assets                  # 静态资源 （样式、图片、字体图标）
  │     │    ├── common             # 字体图标，通用样式
  │     │    └── images             # 框架层图片
  │     ├── components              # 组件
  │     │    ├── base               # 通用组件
  │     │    │     └── ...                  
  │     │    ├── ToolBar            # 工具库
  │     │    │     └── ...                
  │     │    ├── layout             # 框架
  │     │    │     └── ...                
  │     │    └──  widgets           # 组件  
  │     │          └── ...     
  │     ├── config                  # 配置文件
  │     │    ├── constant           # 接口请求相关配置
  │     │    │     ├── app.data.service.js.     # 全局后台API服务映射
  │     │    │     ├── app.data.icons.js        # 图标
  │     │    │     └── app.datalookup.js        # 静态字典
  │     │    ├── axios              # 拦截器配置
  │     │    ├── other              # 其他配置
  │     │    │     ├── components.js     # 自定义组件全局导入
  │     │    │     ├── css.js       # 导入CSS
  │     │    │     └── other.js     # 其他辅助
  │     │    ├── yuxp               # 低码配置
  │     │    ├── index.js           # 配置入口
  │     │    └── ...                      
  │     ├── locale                  # 多语言配置 & 资保多语言内容
  │     ├── router                  # 产品/项目静态路由配置
  │     │    ├── modules            # 路由模块
  │     │    │     ├── dsamp-routes.js       # 资保静态路由
  │     │    │     └── ...                   # 其他静态路由
  │     ├── store                   # 存储器配置
  │     │    ├── modules            # 自定义组件全局导入
  │     │    │     ├── dsampStore.js       # 资保vuex存储文件
  │     │    │     └── ...                   # 其他静态路由
  │     ├── utils                   # 系统全局方法设定配置
  │     ├── views                   # 页面内容
  │     │    ├── dsamp-web          # 资保业务代码目录
  │     │    │     ├── api          # 资保接口api封装
  │     │    │     ├── assets       # 资保静态资源目录
  │     │    │     ├── auth         # auth业务页面代码
  │     │    │     ├── batch        # batch业务页面代码
  │     │    │     ├── common       # 资保原有目录公共模块业务页面代码
  │     │    │     ├── commonParam  # 资保原有目录公共模块字典相关业务代码
  │     │    │     ├── components   # 资保业务代码相关自定义组件和公共组件
  │     │    │     |       └── features     # 资保新增公共自定义组件（原老框架框架上组件）
  │     │    │     ├── config       # 资保模块入口相关配置
  │     │    │     │      └── main.js      # 资保模块入口启动相关设置
  │     │    │     ├── npam         # 资保模块业务代码
  │     │    │     └── ...          # 其他业务代码
  │     │    ├── framework          # 框架相关页面代码
  │     │    │     ├── oca首页代码              # oca首页代码内嵌资保首页代码
  │     │    │     ├── dsampDashboard          # 资保首页代码
  │     │    │     ├── login                   # 登录
  │     │    │     └── ...          # 其他页面代码
  │     │    ├── xpVue              # 低码页面配置
  │     ├── style                   # 样式
  │     ├── app.vue                 # 入口页面
  │     └── main.js                 # 入口文件
  ├── tests                         # 单元测试模块
  ├── .env.development              # 开发环境配置文件
  ├── .env.production               # 生产环境配置文件
  ├── .env.staging                  # 环境标识：自定义配置文件
  ├── jest.config.js                # 业务功能
  ├── vite.config.js                # vite配置文件
  ├── package.json                   
  ... 

• 项目业务代码位置：src/demo-web
• 引用demo-web目录下的文件，使用'@xdjf/demo-web/xxx'即可

常用用法

• 返回父级业务页面 核心逻辑：如果有需要返回历史页面标识，添加历史页面路由栈 location.needBackHistory = true 时，记录跳转父级页面，使用this.returnFn()方法进行返回

  this.$router.push({
  path: '/laonContInfo',
  query: {
  ctrNo: row.ctrNo
  },
  needBackHistory: true
  });