Vue3 意见收集 是否需要加入微前端架构？

[LengYXin]

Vue3

rc 版本已发布一段时间 WTM 的 Vue3 分离版本已提上日程。

在此收集 一些 基础架构的意见和规则方便后续开发

有什么需求都可以提出来 多多益善

常见的路由&多语言等配置现在都是自动化 根据 路径名称匹配 当然也可以手动设置

UI 集成 Antd

Grid 集成 AgGrid

富文本 集成 Ckeditor

页面目前的结构如下

 ── page
    │  
    │── controller        | 控制器 或者说 store 状态存储
    │   ├── entity.ts     | 实体类
    │   ├── index.ts      | 页面控制器
    │── views
    │   ├── action.vue    | 页面操作& 行数据操作
    │   ├── details.vue   | 详情&预览&编辑表单
    │   ├── filter.vue    | 搜索条件
    │   ├── grid.vue      | 表格
    │── index.vue         | page 入口
    │── locales.ts        | 多语言配置 枚举
   

基本上都是 Vue3 文件推荐语法 当然默认情况下以 @vue-class-component 的 class 组件为主

比较关键的位置 为

entity.ts 配置

import { $i18n, WTM_EntitiesField } from '@/client';
import { EnumLocaleLabel } from '../locales';

/**
 * 页面实体
 */
class Entity {
    ITCode: WTM_EntitiesField = {
        // form 的 name 属性 解析为 Entity.ITCode
        name: ['Entity', 'ITCode'],
        // label 字段描述
        label: EnumLocaleLabel.ITCode,
        // 输入框提示
        placeholder: $i18n.toPlaceholder(EnumLocaleLabel.ITCode),
        // 校验规则
        rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.ITCode) }],
    }
    Password: WTM_EntitiesField = {
        name: ['Entity', 'Password'],
        label: EnumLocaleLabel.Password,
        placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Password),
        rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Password) }],
    }
    Email: WTM_EntitiesField = {
        name: ['Entity', 'Email'],
        label: EnumLocaleLabel.Email,
        placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Email),
        rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Email) }],
    }
    Name: WTM_EntitiesField = {
        name: ['Entity', 'Name'],
        label: EnumLocaleLabel.Name,
        placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Name),
        rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Name) }],
    }
    Gender: WTM_EntitiesField = {
        name: ['Entity', 'Gender'],
        label: EnumLocaleLabel.Sex,
        placeholder: $i18n.toPlaceholder(EnumLocaleLabel.Sex),
        // 字段 输入类型 radio表现 单选按钮
        valueType: "radio",
        // 远程数据
        request: async () => [
            { label: $i18n.t(EnumLocaleLabel.Sex_Male), value: 'Male' },
            { label: $i18n.t(EnumLocaleLabel.Sex_Female), value: 'Female' }
        ],
        rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.Sex) }],
    }
    SelectedGroupCodes: WTM_EntitiesField = {
        name: 'SelectedGroupCodes',
        label: EnumLocaleLabel.GroupName,
        placeholder: $i18n.toPlaceholder(EnumLocaleLabel.GroupName),
        // 字段 输入类型 radio表现 单选按钮
        valueType: "checkbox",
        // 远程数据
        request: async () => Ajax.get('/api/_FrameworkUserBase/GetFrameworkRoles'),
        rules: [{ required: true, message: $i18n.toRulesMessage(EnumLocaleLabel.GroupName) }],
    }
}
export const PageEntity = new Entity()

使用实体 WtmField 组件 传入 entityKey

<template>
  <WtmDetails @finish="onFinish">
    <WtmField entityKey="ITCode" />
    <WtmField entityKey="Password" />
    <WtmField entityKey="Email" />
    <WtmField entityKey="Name" />
    <WtmField entityKey="Gender" />
  </WtmDetails>
</template>
<script lang="ts">
import { Vue, Options, Inject, Provide } from "vue-property-decorator";
@Options({ components: {} })
export default class extends Vue {
  @Inject() PageController;
  @Provide() formState = {
    Entity: {
      ITCode: "",
      Password: "",
    },
  };
  onFinish(values) {
    console.log("LENG ~ extends ~ onFinish ~ values", values);
  }
  created() {}
}
</script>
<style lang="less">
</style>

源代码 在 WalkingTec.Mvvm.Vue3Demo 中

是否需要微前端架构？这是一个问题

[LengYXin]

这里顺便贴一个 React 版本

结构和vue3一致

entity.ts

import { action, observable } from 'mobx';
import React from 'react';
import { EnumLocaleLabel } from '../locales';
/**
 * 页面实体
 * 配置参考 https://procomponents.ant.design/components/field-set/
 */
class Entity {
    /**
     * 当前表单 的值
     * @memberof Entity
     */
    @observable values = {};
    /** 
     * 更改 value
     */
    @action.bound
    onValuesChange(values) {
        console.log("LENG ~ frameworkuser", values)
        this.values = values
    }
    /**
     * ITCode
     * @readonly
     * @memberof Entity
     */
    get ITCode(): React.WTM_EntitiesField {
        const label = React.$i18n.t(EnumLocaleLabel.ITCode)
        return {
            name: ['Entity', 'ITCode'],
            label,
            placeholder: React.$i18n.t(`tips.placeholder.input`, { label }),
            rules: [{ required: true }],
        }
    }
    ...
    /**
     * 角色
     * @readonly
     * @memberof Entity
     */
    get SelectedRolesCodes(): React.WTM_EntitiesField {
        const label = React.$i18n.t(EnumLocaleLabel.RoleName)
        return {
            name: 'SelectedRolesCodes',
            label,
            // valueType: "checkbox",
            request: this.GetFrameworkRoles,
            placeholder: React.$i18n.t(`tips.placeholder.input`, { label }),
            rules: [],
        }
    }
    /**
     * 用户组
     * @readonly
     * @memberof Entity
     */
    get SelectedGroupCodes(): React.WTM_EntitiesField {
        const label = React.$i18n.t(EnumLocaleLabel.GroupName)
        return {
            name: 'SelectedGroupCodes',
            label,
            // valueType: "checkbox",
            request: this.GetFrameworkGroups,
            placeholder: React.$i18n.t(`tips.placeholder.input`, { label }),
            rules: [],
        }
    }
    async GetFrameworkRoles(params, props) {
        return React.Ajax.get<any>('/api/_FrameworkUserBase/GetFrameworkRoles')
    }
    async GetFrameworkGroups(params, props) {
        return React.Ajax.get<any>('/api/_FrameworkUserBase/GetFrameworkGroups')
    }
}
export const PageEntity = new Entity()

使用

class ReadonlyFields extends React.Component {
  componentDidMount() {
    console.log("LENG ~ index ~ componentDidMount ~ componentDidMount", this)
  }
  render() {
    return (

      <React.Fragment>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.ITCode} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.Password} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.Name} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.Gender} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.Email} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.Address} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.CellPhone} />
          <React.ant.ProFormField readonly width="md" {...PageEntity.HomePhone} />
        </React.ant.ProForm.Group>
        <React.ant.ProForm.Group>
          <React.ant.ProFormField readonly width="md" {...PageEntity.ZipCode} />
        </React.ant.ProForm.Group>
        <React.ant.ProFormField readonly {...PageEntity.PhotoId} >
          <React.ant.Upload listType="picture-card" >
            <div>
              <React.icons.PlusOutlined />
            </div>
          </React.ant.Upload>
        </React.ant.ProFormField>
        <React.ant.ProFormField readonly {...PageEntity.SelectedGroupCodes} />
        <React.ant.ProFormField readonly {...PageEntity.SelectedRolesCodes} />
      </React.Fragment>
    )
  }
}

[zxr-cn]

大佬 wtm-vue3版本发布日程有了吗？

[LengYXin]

大佬 wtm-vue3版本发布日程有了吗？

已开发完成，待发布

[strugglesharp]

大佬. 2022年喽. VUE3 望眼欲穿哦

[liuliang-wt]

plus里已经可以生成vue3的项目了

[ZenJune]

plus里已经可以生成vue3的项目了

试用了一下. 看到plus里的layui是有代码生成的, 但下载为vue3时 , 没有了本地代码生成器. 这个代码本地生成器还挺重要的.
大部分情况下,程序员还是喜欢写code first. 而且很多时候,是上不了网的.

[ZenJune]

还有layui,官方已经放弃了. 在WTM项目中是否还有坚持的必要?

[2821840032]

接楼上，layui是我这种后端唯一改前端的方式了

[AtlantisDe]

https://github.com/tabler/tabler 用这个?