search

didi / xiaoju-survey

「快速」打造「专属」问卷系统, 让调研「更轻松」
https://xiaojusurvey.didi.cn
Apache License 2.0
1.9k stars 230 forks source link

Vue3风格统一认领：选项式升级成组合式API #108

Open sudoooooo opened 1 month ago

sudoooooo commented 1 month ago

由于工程是从vue2升级到vue3，目前项目里还保留了大部分选项式API的写法：[升级文档]()。 如果你想熟悉工程和组合式API写法，或者参与贡献，这是一个比较好的机会。

认领方式

为保障正常建设，认领1个月内无响应(沟通讨论/技术方案/PR)，任务自动释放

1、留言认领文件以免重复建设 2、改造后通过以下检测：

3、提交PR到develop分支

List

升级完成： @alwayrun refactor: 重构 render/pages 目录下三个文件, 使用 Vue3 组合式 API 写法 @alwayrun refactor: 重构 render/App.vue, 使用 Vue3 组合式 API 写法 @alwayrun refactor: 重构 render/components 目录下部分组件, 使用 Vue3 组合式 API 写法 @alwayrun refactor: 重构 materials/setters/widgets 目录下部分组件, 使用 Vue3 组合式 API 写法 @alwayrun refactor: 重构 management/components 目录下组件, 使用 Vue3 组合式 API 写法 @1004801012 refactor: Vue3 组合式 API 写法重构 @alwayrun refactor: 重构 management/pages/publishResult 目录下组件, 使用 Vue3 组合式 API 写法 @Codeniu refactor: 使用vue3组合式API重构登录页代码 @chaorenluo refactor: questionModule/PreviewPanel.vue和skin/PreviewPanel.vue 重构 @skique feat: 问卷空间协作能力前端 @alwayrun refactor: 重构 management/pages/edit 目录下组件, 使用 Vue3 组合式 API 写法 @Realabiha https://github.com/didi/xiaoju-survey/issues/108#issuecomment-2114840813

已认领待升级

alwayrun commented 1 month ago

使用 Vue3 组合式 API 写法, 重构下例三个文件 render/pages/ErrorPage.vue render/pages/IndexPage.vue render/pages/SuccessPage.vue

@sudoooooo

sudoooooo commented 1 month ago

使用 Vue3 组合式 API 写法, 重构下例三个文件 render/pages/ErrorPage.vue render/pages/IndexPage.vue render/pages/SuccessPage.vue

@sudoooooo

好的，升级后提PR即可

alwayrun commented 1 month ago

使用 Vue3 组合式 API 写法对 render/components 目录列表文件进行调整

render
├── components                                                
│   ├── AlertDialog.vue
│   ├── ConfirmDialog.vue
│   ├── HeaderSetter.vue
│   ├── LogoIcon.vue
│   ├── MainRenderer.vue
│   ├── MainTitle.vue
│   ├── SubmitSetter.vue

@sudoooooo

Realabiha commented 1 month ago

认领重构下列两个文件 render/pages/EmptyPage.vue management/components/EmptyIndex.vue

alwayrun commented 1 month ago

使用 Vue3 组合式 API 写法对 materials/setters/widgets 目录列表文件进行调整

materials
├── setters
│   └── widgets
│       ├── CheckBox.vue
│       ├── CheckboxGroup.vue
│       ├── ColorInput.vue
│       ├── ColorPicker.vue
│       ├── FormItem.vue
│       ├── FormdataBackFill.vue
│       ├── FreqAndNumberLimit.vue
│       ├── InputNumber.vue
│       ├── InputPercent.vue
│       ├── InputSetter.vue
│       ├── MultiInput.vue
│       ├── MultiSelect.vue
│       ├── QuestionTime.vue
│       ├── QuestionTimeHour.vue
│       ├── RadioGroup.vue
│       ├── RadioSetter.vue
│       ├── RangeSetter.vue
│       ├── RichText.vue
│       ├── SelectSetter.vue
│       └── SliderSetter.vue

@sudoooooo

sudoooooo commented 1 month ago

使用 Vue3 组合式 API 写法对 render/components 目录列表文件进行调整

render
├── components                                                
│   ├── AlertDialog.vue
│   ├── ConfirmDialog.vue
│   ├── HeaderSetter.vue
│   ├── LogoIcon.vue
│   ├── MainRenderer.vue
│   ├── MainTitle.vue
│   ├── SubmitSetter.vue

@sudoooooo

@alwayrun 这部分内容已CR，已备注有功能失效了，请查看下

alwayrun commented 1 month ago

@alwayrun 这部分内容已CR，已备注有功能失效了，请查看下

@sudoooooo 已解决

sudoooooo commented 1 month ago

@alwayrun 这部分内容已CR，已备注有功能失效了，请查看下

@sudoooooo 已解决

@alwayrun banner链接依然有问题，已截图备注，请查看下

alwayrun commented 1 month ago

@alwayrun banner链接依然有问题，已截图备注，请查看下

还是相同的问题吗？我这边只看到你之前截图备注，我目前测试是可以的 设置 banner链接相关值信息:

image

条件检测已跳过到 window.open 所在行:

image

@sudoooooo

alwayrun commented 1 month ago

@sudoooooo

setters/widgets/FreqAndNumberLimit.vue 这个组件目前没查到使用他的地方，这个组件主要是用做啥限制的，或者给我一段设置属性中的配置信息，我附加到某个组件中测试一下

sudoooooo commented 1 month ago

@sudoooooo

setters/widgets/FreqAndNumberLimit.vue 这个组件目前没查到使用他的地方，这个组件主要是用做啥限制的，或者给我一段设置属性中的配置信息，我附加到某个组件中测试一下

@alwayrun 次数限制的setter，后续会在问卷设置用到，改后提交即可，用到的时候再验证。

1004801012 commented 1 month ago

认领重构下列四个文件

management/pages/create/components/CreateForm.vue management/pages/create/components/NavHeader.vue management/pages/create/components/TypeList.vue management/pages/create/CreatePage.vue

alwayrun commented 1 month ago

使用 Vue3 组合式 API 写法对 management/components 目录列表文件进行调整

management                                        
│   ├── components
│   │   ├── EmptyIndex.vue
│   │   ├── LeftMenu.vue
│   │   └── LogoIcon.vue

@sudoooooo

alwayrun commented 1 month ago

使用 Vue3 组合式 API 写法对 management/pages/publishResult 目录列表文件进行调整

management/pages/publishResult
├── PublishResultPage.vue
└── components
    ├── ChannelRow.vue
    └── QRCode.vue

@sudoooooo

Codeniu commented 1 month ago

认领登录页代码风格统一： web\src\management\pages\login\LoginPage.vue

alwayrun commented 1 month ago

使用 Vue3 组合式 API 写法对 management/pages/edit 目录列表文件进行调整

src/management/pages/edit
├── components
│   ├── LogoPreview.vue
│   ├── MainTitle.vue
│   ├── ModuleNavbar.vue
│   ├── SetterField.vue
│   └── SubmitButton.vue
├── index.vue
├── modules
│   ├── contentModule
│   │   ├── HistoryPanel.vue
│   │   ├── PublishPanel.vue
│   │   └── SavePanel.vue
│   ├── generalModule
│   │   ├── BackPanel.vue
│   │   ├── NavPanel.vue
│   │   └── TitlePanel.vue
│   ├── questionModule
│   │   ├── CatalogPanel.vue
│   │   ├── SetterPanel.vue
│   │   └── components
│   │       ├── CatalogItem.vue
│   │       └── QuestionCatalog.vue
│   └── settingModule
│       ├── SettingPanel.vue
│       ├── components
│       │   ├── BannerContent.vue
│       │   ├── OverTime.vue
│       │   └── SuccessContent.vue
│       ├── result
│       │   ├── CatalogPanel.vue
│       │   ├── PreviewPanel.vue
│       │   └── SetterPanel.vue
│       └── skin
│           ├── CatalogPanel.vue
│           └── SetterPanel.vue
└── pages
    ├── edit
    │   ├── QuestionEditPage.vue
    │   └── index.vue
    ├── setting
    │   └── index.vue
    └── skin
        ├── ContentPage.vue
        ├── ResultPage.vue
        └── index.vue

@sudoooooo

sudoooooo commented 1 month ago

使用 Vue3 组合式 API 写法对 management/pages/edit 目录列表文件进行调整

src/management/pages/edit
├── components
│   ├── LogoPreview.vue
│   ├── MainTitle.vue
│   ├── ModuleNavbar.vue
│   ├── SetterField.vue
│   └── SubmitButton.vue
├── index.vue
├── modules
│   ├── contentModule
│   │   ├── HistoryPanel.vue
│   │   ├── PublishPanel.vue
│   │   └── SavePanel.vue
│   ├── generalModule
│   │   ├── BackPanel.vue
│   │   ├── NavPanel.vue
│   │   └── TitlePanel.vue
│   ├── questionModule
│   │   ├── CatalogPanel.vue
│   │   ├── SetterPanel.vue
│   │   └── components
│   │       ├── CatalogItem.vue
│   │       └── QuestionCatalog.vue
│   └── settingModule
│       ├── SettingPanel.vue
│       ├── components
│       │   ├── BannerContent.vue
│       │   ├── OverTime.vue
│       │   └── SuccessContent.vue
│       ├── result
│       │   ├── CatalogPanel.vue
│       │   ├── PreviewPanel.vue
│       │   └── SetterPanel.vue
│       └── skin
│           ├── CatalogPanel.vue
│           └── SetterPanel.vue
└── pages
    ├── edit
    │   ├── QuestionEditPage.vue
    │   └── index.vue
    ├── setting
    │   └── index.vue
    └── skin
        ├── ContentPage.vue
        ├── ResultPage.vue
        └── index.vue

@sudoooooo

@alwayrun 👍 头图、提示语、提交按钮和logo在B、C端渲染统一里做了调整，收拢到了物料里面，目前正在CR，优化过后就合并，所以这几个组件可以跳过：https://github.com/didi/xiaoju-survey/pull/168

skique commented 1 month ago

认领重构下列组件, 调整成 Vue3 组合式 API 写法 management/pages/list/components/BaseList.vue management/pages/list/index.vue management/pages/list/components/ToolBar.vue management/pages/list/components/TextSelect.vue management/pages/list/components/TextButton.vue.vue