企企通产品部V6

Appearance

On this page

一、介绍 ​

产品 v6 版本从技术架构和选型上进行了重构和升级，目的是解决底层的技术栈以及产品、项目组、客户三者之间核心价值的问题，延续 v5 版本的全部功能，对接新的技术潮流，更加模块化、简洁化，易学易用，互联互通

二、开始使用 ​

建议使用与线上构建的一致的版本nodejs@17.0.1、npm@8.1.0、pnpm@8.6.8版本

  1. 全局安装 pnpm(默认以及安装 npm)

    bash
    npm install -g pnpm@8.6.8

  2. 拉取 gitlab 代码

    bash
    git clone 'gitlab代码地址'

  3. 将代码导入 vscode 或者其他的 ide 开发工具，在当前的项目目录下，安装全部依赖，执行

    bash
    // 对应产品
pnpm install
// 对应项目,同步版本并安装
pnpm run syncVersion:install

  4. 打包所有依赖模块，用于本地开发,在当前的项目目录下，执行

    bash
    // 对应产品
pnpm run build:all
// 对应项目
pnpm run build

  5. 本地运行 v6 主项目，在当前的项目目录，执行

    bash
    // 对应产品
pnpm run v6
// 对应项目
pnpm run dev

  6. 访问本地运行的地址，默认对接后端 sit 环境的数据，进入到 v6 的主应用进行开发，本地服务支持热加载更新

    tex
    // 对应产品
v6的主应用的目录路径在当前项目/apps/v6下

// 对应项目
可直接在当前项目开发

三、主应用 v6 项目 ​

主应用对应的是项目使用的版本，所以给主应用的方法和工具类都可以在项目中使用

1. 使用国际化： ​

  1. 引入已封装的国际化方法

    typescript
    import { srmI18n } from "@/utils/srmI18n";

  2. 调用国际化方法 srmI18n

    typescript
    // 例如：srmI18n('i18n_title_see', '查看')
srmI18n("国际化key", "国际化默认值");
2. 使用主题色 ​

主题色分为明/暗两种主题色，整合 ant-design-vue 和 vxe-table 主题色方案，采用 css 的 var 变量的方式控制换肤,

可通过定义样式进行 var 变量覆盖或者赋值

stylus
color: var(--qLayoutSiderMenuColor, #7b7d7c)

目前提供的 css 的 var 有：

json
{
  "light": {
    "qHeaderBackgroundColor": "#fff",
    "qHeaderBorderBottomColor": "#f3f3f3",
    "qHeaderBtnColor": "#4e5d78",
    "qHeaderBtnHoverColor": "#f2f3f5",
    "qHeaderLangSwitchBackgroundColor": "#eff2f5",
    "qHeaderLangSwitchColor": "#1c1d22",
    "qHeaderCustomPersonDownArrowColor": "#171832",
    "qLayoutSiderBackgroundColor": "#ffffff",
    "qLayoutSiderFrostingBackgroundColor": "rgba(255, 255, 255, 0.5)",
    "qLayoutSiderBorderRightColor": "#f3f3f3",
    "qLayoutSiderVersionColor": "#8a94a6",
    "qLayoutSiderMenuColor": "#7b7d7c",
    "qLayoutSiderScheduleBackgroundColor": "rgba(94, 99, 102, 0.1)",
    "qLayoutSiderScheduleHoverBackgroundColor": "rgba(94, 99, 102, 0.3)",
    "qLayoutSiderServicesBackgroundColor": "rgba(255, 204, 145, 0.2)",
    "qLayoutSiderServicesHoverBackgroundColor": "rgba(255, 204, 145, 0.5)",
    "qLayoutSiderSearchMenuBackgroundColor": "#f2f3f5",
    "qLayoutSiderSearchMenuColor": "#8a94a6",
    "qTabLayoutTabColor": "rgba(0, 0, 0, 0.85)",
    "qTabLayoutTabBackgroundColor": "#f5f6f7",
    "qTabLayoutTabBorderColor": "#f0f0f0",
    "qTabLayoutTabActiveBackgroundColor": "#ecf4fe",
    "qTabLayoutTabActiveColor": "#5570f1",
    "qTabLayoutContentBoxBackgroundColor": "#eff2f5",
    "primaryColor": "#1890ff",
    "errorColor": "#ff4d4f",
    "warningColor": "#faad14",
    "successColor": "#52c41a",
    "infoColor": "#1890ff",
    "qButtonDefaultColor": "#53545c",
    "qButtonDefaultBorderColor": "#bec0ca",
    "qButtonDefaultBackgroundColor": "#fff",
    "qButtonPrimaryColor": "#5570f1",
    "qButtonErrorColor": "#cc5F5f",
    "qRequiredBorderColor": "rgba(249, 60, 0, 0.4)",
    "qRequiredBackgroundColor": "#fff9f7",
    "qPageHeaderColor": "#000000",
    "qPageHeaderBackgroundColor": "#ffffff",
    "qPageListHeaderBackgroundColor": "#F5F9FF",
    "qBackgroundColor": "#eff2f5",
    "qAntAnchorLinkTitleColor": "#000000",
    "qVxeHeaderLinkColor": "#B6BFE8",
    "qAntAnchorLinkTitleActiveBackgroundColor": "#ecf4ff",
    "qItemWrapTextColor": "rgba(0, 0, 0, 0.50)",
    "qItemWrapLabelColor": "#454F59",
    "qItemWrapLabelBackgroundColor": "#fff9f7",
    "qItemWrapBorderColor": "#d9d9d9",
    "qItemWrapBackgroundColor": "#ffffff",
    "qItemWrapDisabledBackgroundColor": "#f5f5f5",
    "qPageHeaderBackIconBackgroundColor": "#f2f3f5",
    "qDetailFormDescriptionsItemLabelColor": "#fafafa",
    "qDetailFormDescriptionsBorderColor": "#f0f0f0",
    "qDetailFormDescriptionsItemLabelTextColor": "rgba(0,0,0,.85)",
    "qDetailFormDescriptionsItemContentTextColor": "rgba(0,0,0,.85)",
    "qCarouselArrowBackgroundColor": "#f1f3f9",
    "qCarouselArrowColor": "#e1e2e9",
    "qCarouselItemackgroundColor": "#F8F7F7",
    "qWorkPlaceMoreBtnBackgroundColor": "#f0f2f5",
    "qWorkPlaceMoreBtnColor": "#817f7f",
    "qWorkPlacePlatFormTitleColor": "#33343a",
    "qWorkTableHeaderBackgroundColor": "#f8f8f9",
    "qWorkTableHeaderFontColor": "#606266",
    "qWorkTablebodyBackgroundColor": "#fff",
    "vxeTableHeaderBackgroundColor": "#f5f6f7",
    "vxeTableBodyBackgroundColor": "#fff",
    "vxeTableBorderColor": "#e1e2e9",
    "vxeTableHeadColor": "#2c2d33",
    "vxeTableBodyColor": "#6e7079",
    "vxeTableRowStripedBackgroundColor": "#fafafa",
    "vxeTableRowHoverBackgroundColor": "#f6fef8",
    "vxeTableRowCheckboxCheckedBackgroundColor": "#fbf2f2"
  },
  "dark": {
    "qHeaderBackgroundColor": "#292a2f",
    "qHeaderBorderBottomColor": "#45464e",
    "qHeaderBtnColor": "#fff",
    "qHeaderBtnHoverColor": "#37393f",
    "qHeaderLangSwitchBackgroundColor": "#37393f",
    "qHeaderLangSwitchColor": "#ebc0ca",
    "qHeaderCustomPersonDownArrowColor": "#bec0ca",
    "qLayoutSiderBackgroundColor": "#292a2f",
    "qLayoutSiderFrostingBackgroundColor": "rgba(41, 42, 47, 0.9)",
    "qLayoutSiderBorderRightColor": "#45464e",
    "qLayoutSiderVersionColor": "#6e7079",
    "qLayoutSiderMenuColor": "#bec0ca",
    "qLayoutSiderScheduleBackgroundColor": "rgba(255, 255, 255, 0.1)",
    "qLayoutSiderScheduleHoverBackgroundColor": "rgba(94, 99, 102, 0.6)",
    "qLayoutSiderServicesBackgroundColor": "rgba(255, 204, 145, 0.2)",
    "qLayoutSiderServicesHoverBackgroundColor": "rgba(255, 204, 145, 0.6)",
    "qLayoutSiderSearchMenuBackgroundColor": "#37393F",
    "qLayoutSiderSearchMenuColor": "#8a94a6",
    "qTabLayoutTabColor": "#bec0ca",
    "qTabLayoutTabBackgroundColor": "#37393f",
    "qTabLayoutTabBorderColor": "#45464e",
    "qTabLayoutTabActiveBackgroundColor": "rgba(21, 112, 255, 0.2)",
    "qTabLayoutTabActiveColor": "#5570f1",
    "qTabLayoutContentBoxBackgroundColor": "#1c1d22",
    "primaryColor": "#1890ff",
    "errorColor": "#ff4d4f",
    "warningColor": "#faad14",
    "successColor": "#52c41a",
    "infoColor": "#1890ff",
    "qButtonDefaultColor": "#bec0ca",
    "qButtonDefaultBorderColor": "#45464e",
    "qButtonDefaultBackgroundColor": "#37393f",
    "qButtonPrimaryColor": "#5570f1",
    "qButtonErrorColor": "#cc5F5f",
    "qRequiredBorderColor": "rgba(249, 60, 0, 0.4)",
    "qRequiredBackgroundColor": "rgba(249, 60, 0, 0.04)",
    "qPageHeaderColor": "#ffffff",
    "qPageHeaderBackgroundColor": "#292a2f",
    "qPageListHeaderBackgroundColor": "#292a2f",
    "qBackgroundColor": "#1c1d22",
    "qAntAnchorLinkTitleColor": "#bec0ca",
    "qAntAnchorLinkTitleActiveBackgroundColor": "rgba(21, 112, 255, 0.2)",
    "qItemWrapTextColor": "#8b8d97",
    "qItemWrapLabelColor": "#bec0ca",
    "qItemWrapLabelBackgroundColor": "#292a2f",
    "qItemWrapBorderColor": "#45464e",
    "qItemWrapBackgroundColor": "#292a2f",
    "qItemWrapDisabledBackgroundColor": "#33343a",
    "qPageHeaderBackIconBackgroundColor": "#37393f",
    "qDetailFormDescriptionsItemLabelColor": "#37393F",
    "qDetailFormDescriptionsBorderColor": "#45464E",
    "qDetailFormDescriptionsItemLabelTextColor": "#8B8D97",
    "qDetailFormDescriptionsItemContentTextColor": "#BEC0CA",
    "qCarouselArrowBackgroundColor": "#37393f",
    "qCarouselArrowColor": "#adafb9",
    "qCarouselItemackgroundColor": "#37393F",
    "qtodogroundColor": "#292a2f",
    "qWorkPlaceMoreBtnBackgroundColor": "#37393F",
    "qWorkPlaceMoreBtnColor": "#fff",
    "qWorkPlacePlatFormTitleColor": "#fff",
    "qWorkTableHeaderBackgroundColor": "#37393F",
    "qWorkTableHeaderFontColor": "#fff",
    "qWorkTablebodyBackgroundColor": "#292A2F",
    "qVxeHeaderLinkColor": "#4557AA",
    "vxeTableHeaderBackgroundColor": "#37393f",
    "vxeTableBodyBackgroundColor": "#292A2F",
    "vxeTableBorderColor": "#45464e",
    "vxeTableHeadColor": "#fff",
    "vxeTableBodyColor": "#bec0ca",
    "vxeTableRowStripedBackgroundColor": "rgba(85, 112, 241, 0.4)",
    "vxeTableRowHoverBackgroundColor": "#2e2f35",
    "vxeTableRowCheckboxCheckedBackgroundColor": "#3d3035"
  }
}

四、扩展 ​

  1. 接入腾讯地图
tsx
// 引入腾讯地图实例的封装工具类
import map from '@/utils/tencentMap'
// 调用地图工具类map暴露的方法init初始化地图
map.init().then(async (mapInstance) => {
    // mapInstance就是地图的实例TMap，可以调用腾讯地图的原生api
   let geocoder = new mapInstance.service.Geocoder()
   let shoppingAddressObj = await geocoder.getLocation({address: row.fbk1 || ''})

}）