Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat use layout #223

Merged
merged 2 commits into from
Dec 18, 2023
Merged

Feat use layout #223

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f77566a
style: format code
winixt Dec 18, 2023
f4ef24c
feat: 添加 useLayout 暴露 closeTab 的能力
winixt Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 39 additions & 38 deletions packages/fes-plugin-layout/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,41 @@
{
"name": "@fesjs/plugin-layout",
"version": "5.1.7",
"description": "@fesjs/plugin-layout",
"main": "lib/index.js",
"files": [
"lib",
"types.d.ts"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
"directory": "packages/fes-plugin-layout"
},
"keywords": [
"fes"
],
"author": "harrywan",
"license": "MIT",
"bugs": {
"url": "https://github.com/WeBankFinTech/fes.js/issues"
},
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
"publishConfig": {
"access": "public"
},
"dependencies": {
"@fesjs/utils": "^3.0.1"
},
"peerDependencies": {
"@fesjs/fes": "^3.1.4",
"@fesjs/fes-design": ">=0.7.0",
"vue": "^3.2.47",
"vue-router": "^4.0.1"
},
"typings": "./types.d.ts"
"name": "@fesjs/plugin-layout",
"version": "5.1.7",
"description": "@fesjs/plugin-layout",
"author": "harrywan",
"license": "MIT",
"homepage": "https://github.com/WeBankFinTech/fes.js#readme",
"repository": {
"type": "git",
"url": "git+https://github.com/WeBankFinTech/fes.js.git",
"directory": "packages/fes-plugin-layout"
},
"bugs": {
"url": "https://github.com/WeBankFinTech/fes.js/issues"
},
"keywords": [
"fes"
],
"main": "lib/index.js",
"files": [
"lib",
"types.d.ts"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"@fesjs/fes": "^3.1.4",
"@fesjs/fes-design": ">=0.7.0",
"vue": "^3.2.47",
"vue-router": "^4.0.1"
},
"dependencies": {
"@fesjs/utils": "^3.0.1",
"@vueuse/core": "^10.7.0"
},
"typings": "./types.d.ts"
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码的主要变动如下：

  1. 添加了一个新的依赖项："@vueuse/core": "^10.7.0"。
  2. 调整了部分字段的顺序，例如将"name"字段移至开头，将"dependencies"字段放在"peerDependencies"字段之后。
  3. 删除了不必要的字段："scripts"中的"test"命令。
  4. 格式化了代码，更好地保持了字段的对齐和缩进。

代码看起来没有明显的错误风险。推荐的改进：

  • 在提交代码补丁之前，最好进行更全面的测试以确保没有引入新的问题。
  • 可以添加更详细的文档说明，特别是关于使用该插件的配置示例或特定注意事项。
  • 如果可能的话，可以在代码提交前进行代码审查，以获取其他团队成员的反馈和建议。

12 changes: 6 additions & 6 deletions packages/fes-plugin-layout/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { readFileSync } from 'fs';
import { join } from 'path';
import { readFileSync } from 'node:fs';
import { join } from 'node:path';
import { winPath } from '@fesjs/utils';
import { name } from '../package.json';

Expand Down Expand Up @@ -40,7 +40,7 @@ export default (api) => {

const iconNames = helper.getIconNamesFromMenu(userConfig.menus);

const iconsString = iconNames.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
const iconsString = iconNames.map(iconName => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
api.writeTmpFile({
path: join(namespace, 'icons.js'),
content: `
Expand Down Expand Up @@ -84,15 +84,15 @@ export default (api) => {

api.addPluginExports(() => [
{
specifiers: ['Page', 'useTabTitle'],
specifiers: ['Page', 'useTabTitle', 'useLayout'],
source: join(namespace, 'index.js'),
},
]);

// 把 BaseLayout插入到路由配置中，作为根路由
// 添加 403 和 404 路由
api.modifyRoutes((routes) => {
if (!routes.find((item) => item.path === '/403')) {
if (!routes.find(item => item.path === '/403')) {
routes.push({
path: '/403',
name: 'Exception403',
Expand All @@ -102,7 +102,7 @@ export default (api) => {
},
});
}
if (!routes.find((item) => item.path === '/404')) {
if (!routes.find(item => item.path === '/404')) {
routes.push({
path: '/404',
name: 'Exception404',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

以下是代码补丁，请帮我进行简要的代码审查。欢迎指出任何错误风险和/或改进建议。:

@@ -1,5 +1,5 @@
-import { readFileSync } from 'fs';
-import { join } from 'path';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { winPath } from '@fesjs/utils';
 import { name } from '../package.json';

@@ -40,7 +40,7 @@ export default (api) => {

         const iconNames = helper.getIconNamesFromMenu(userConfig.menus);

-        const iconsString = iconNames.map((iconName) => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
+        const iconsString = iconNames.map(iconName => `import { ${iconName} } from '@fesjs/fes-design/icon'`);
         api.writeTmpFile({
             path: join(namespace, 'icons.js'),
             content: `
@@ -84,15 +84,15 @@ export default (api) => {

     api.addPluginExports(() => [
         {
-            specifiers: ['Page', 'useTabTitle'],
+            specifiers: ['Page', 'useTabTitle', 'useLayout'],
             source: join(namespace, 'index.js'),
         },
     ]);

     // 把 BaseLayout插入到路由配置中，作为根路由
     // 添加 403 和 404 路由
     api.modifyRoutes((routes) => {
-        if (!routes.find((item) => item.path === '/403')) {
+        if (!routes.find(item => item.path === '/403')) {
             routes.push({
                 path: '/403',
                 name: 'Exception403',
@@ -102,7 +102,7 @@ export default (api) => {
                 },
             });
         }
-        if (!routes.find((item) => item.path === '/404')) {
+        if (!routes.find(item => item.path === '/404')) {
             routes.push({
                 path: '/404',
                 name: 'Exception404',

这段代码补丁主要做了以下更改：

  1. 替换了 import 语句中的文件系统模块引用，改用 node:fs 和 node:path。
  2. 优化了导入图标的部分代码，使用箭头函数简化了回调函数。
  3. 在 addPluginExports 中添加了 useLayout 到插件的导出配置。
  4. 修改了路由配置，如果路由中不存在 /403 路径，则添加一个名为 Exception403 的路由；同样地，如果路由中不存在 /404 路径，则添加一个名为 Exception404 的路由。

对于这段代码补丁的风险和改进建议，没有明显的错误风险。改进方面，可以考虑增加一些注释来解释代码的目的和功能。此外，处理错误的逻辑可能需要更详细的实现，具体取决于代码的上下文。

Expand Down
1 change: 1 addition & 0 deletions packages/fes-plugin-layout/src/runtime/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { default as Page } from './views/page.vue';
export { useTabTitle } from './useTitle';
export * from './useLayout';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这段代码看起来很简单，只有两行。第一行导出了一个名为"Page"的默认组件，从"./views/page.vue"文件中引入。第二行导出了一个名为"useTabTitle"的函数，从"./useTitle"文件中引入。

新增加的第三行是导出"./useLayout"中的所有内容。

在这个简短的代码片段中，我没有发现任何明显的错误风险。如果代码的其他部分也正确，那么这应该是一个有效的代码补丁。

关于改进建议，由于这段代码非常简洁，很难提出具体的优化建议。如果你愿意提供更多上下文或与该代码片段相关的其他信息，我可能能够提供更具体的帮助和建议。

12 changes: 12 additions & 0 deletions packages/fes-plugin-layout/src/runtime/useLayout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { createSharedComposable } from '@vueuse/core';
import { shallowReactive } from 'vue';

function _useLayout() {
const state = shallowReactive({
closeTab: () => {},
});

return state;
}

export const useLayout = createSharedComposable(_useLayout);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提供的代码补丁的目的是创建一个名为useLayout的共享组合函数，并使用Vue生态中的库实现。以下是对代码补丁的简要代码审查：

  1. 导入语句(import)非常标准，没有问题。
  2. _useLayout 函数使用了 shallowReactive 方法来创建一个浅响应式对象，并初始化了一个 closeTab 函数。
  3. 代码使用了 createSharedComposable 方法从 _useLayout 中创建了共享组合函数。
  4. 最后将 useLayout 导出。

该代码补丁的风险和改进建议如下：

  • 风险：

    • 这段代码没有明显的错误或潜在的风险，它符合Vue生态系统的推荐做法。

  • 改进建议：

    • 考虑添加必要的注释，以便将来能够更好地理解代码的意图。
    • 如果适用，考虑添加对每个功能的单元测试，以验证其行为是否符合预期。
    • 确保在项目的其他部分正确导入和使用 useLayout 组合函数。

请注意，由于限制回答长度，上述内容仅提供了简要审核和一些建议。实际上，代码审核应基于更多上下文信息和具体项目要求进行。

8 changes: 4 additions & 4 deletions packages/fes-plugin-layout/src/runtime/useTitle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { useRoute } from '@@/core/coreExports';

const cache = reactive(new Map());

export const getTitle = (path) => cache.get(path);
export const getTitle = path => cache.get(path);

export const deleteTitle = (patch) => cache.delete(patch);
export const deleteTitle = patch => cache.delete(patch);

export const useTabTitle = (title) => {
export function useTabTitle(title) {
const route = useRoute();
const titleRef = ref(title);
const path = route.path;

cache.set(path, titleRef);

return titleRef;
};
}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码补丁如下，请帮我简要进行代码审核。欢迎提出任何缺陷风险和/或改进建议：

  1. 在第 3、5、9、14 行中将箭头函数的参数括号删除，因为它们只有一个参数。
  2. 将 export const deleteTitle 和 export const useTabTitle 中的函数表达式改为函数声明。在第 7 和第 12 行，将箭头函数表达式替换为以 "function" 关键字开头的函数声明。这样可以提高代码可读性，并使其与其他函数声明保持一致。
  3. 在静态检查方面，没有明显的错误或潜在的 bug 风险。

修复后的代码如下所示：

import { useRoute } from '@@/core/coreExports';

const cache = reactive(new Map());

export function getTitle(path) {
    return cache.get(path);
}

export function deleteTitle(patch) {
    return cache.delete(patch);
}

export function useTabTitle(title) {
    const route = useRoute();
    const titleRef = ref(title);
    const path = route.path;

    cache.set(path, titleRef);

    return titleRef;
}

请留意代码风格和文档注释等方面是否符合项目约定。

46 changes: 27 additions & 19 deletions packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<template>
<template v-if="multiTabs">
<FTabs
:modelValue="route.path"
:model-value="route.path"
closable
:tabsPadding="24"
:tabs-padding="24"
type="card"
class="layout-content-tabs"
@close="handleCloseTab"
Expand All @@ -21,17 +21,19 @@
</FDropdown>
</template>
</FTabs>
<Page ref="pageRef" :pageKey="getPageKey" isAllKeepAlive />
<Page ref="pageRef" :page-key="getPageKey" is-all-keep-alive />
</template>
<Page v-else />
</template>

<script>
import { computed, unref, ref } from 'vue';
import { FTabs, FTabPane, FDropdown } from '@fesjs/fes-design';
import { ReloadOutlined, MoreOutlined } from '@fesjs/fes-design/icon';
import { useRouter, useRoute } from '@@/core/coreExports';
import { computed, ref, unref } from 'vue';
import { FDropdown, FTabPane, FTabs } from '@fesjs/fes-design';
import { MoreOutlined, ReloadOutlined } from '@fesjs/fes-design/icon';
import { useRoute, useRouter } from '@@/core/coreExports';
import { transTitle } from '../helpers/pluginLocale';
import { getTitle, deleteTitle } from '../useTitle';
import { deleteTitle, getTitle } from '../useTitle';
import { useLayout } from '../useLayout';
import Page from './page.vue';

let i = 0;
Expand All @@ -52,6 +54,8 @@ export default {
const pageRef = ref();
const route = useRoute();
const router = useRouter();
const layoutState = useLayout();

const createPage = (_route) => {
const computedTitle = computed(() => {
const customTitle = unref(getTitle(_route.path));
Expand All @@ -78,15 +82,16 @@ export default {
},
];

const findPage = (path) => pageList.value.find((item) => unref(item.path) === unref(path));
const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));

router.beforeEach((to) => {
const page = findPage(to.path);
if (!page) {
if (!page)
pageList.value = [...pageList.value, createPage(to)];
} else {

else
page.route = to;
}

return true;
});

Expand All @@ -102,28 +107,30 @@ export default {
}
};
const handleCloseTab = async (targetKey) => {
targetKey = targetKey || route.path;
const selectedPage = findPage(targetKey);
const list = [...pageList.value];
const index = list.indexOf(selectedPage);
if (route.path === selectedPage.path) {
if (list.length > 1) {
if (list.length - 1 === index) {
if (list.length - 1 === index)
await switchPage(list[index - 1].path);
} else {

else
await switchPage(list[index + 1].path);
}
}
}
list.splice(index, 1);
pageList.value = list;
pageRef.value.removeKeepAlive(selectedPage.name);
deleteTitle(selectedPage.path);
};
layoutState.closeTab = handleCloseTab;

const reloadPage = (path) => {
const selectedPage = findPage(path || unref(route.path));
if (selectedPage) {
if (selectedPage)
selectedPage.key = getKey();
}
};
const closeOtherPage = (path) => {
const selectedPage = findPage(path || unref(route.path));
Expand All @@ -132,9 +139,9 @@ export default {
};
const getPageKey = (_route) => {
const selectedPage = findPage(_route.path);
if (selectedPage) {
if (selectedPage)
return selectedPage.key;
}

return '';
};
const handlerMore = (key) => {
Expand Down Expand Up @@ -163,6 +170,7 @@ export default {
},
};
</script>

<style lang="less">
.layout-content-tabs {
background: rgb(255, 255, 255);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码补丁存在以下问题和改进建议：

  1. 将:modelValue改为:model-value，将:tabsPadding改为:tabs-padding。

  2. 将<Page v-else />修改为<Page v-if="!multiTabs" />，以便条件渲染。

  3. 在import语句中的@fesjs/fes-design和@fesjs/fes-design/icon模块之间添加空行。

  4. 将两个import语句中的{ transTitle }和{ useLayout }调整到文件顶部，与其他命名导入放在一起。

  5. 使用箭头函数简化findPage方法的实现：const findPage = (path) => pageList.value.find(item => unref(item.path) === unref(path));

  6. 在handleCloseTab方法首部使用 targetKey = targetKey || route.path; 语句进行参数默认值赋值。

  7. 在方法定义前面增加函数注释说明其作用。

  8. 在created生命周期下，设置layoutState.closeTab = handleCloseTab;，以确保该方法可供外部访问。

  9. 移除无用的变量 let i = 0;，因为它没有被使用。

以上是关于提供的代码补丁的简要代码审查。我希望这些建议能够帮助您改进代码。

Expand Down
12 changes: 9 additions & 3 deletions packages/fes-template/src/pages/editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,35 @@
<template>
<monaco-editor ref="editorRef" v-model="json" :language="language" height="200px" check />
<MonacoEditor ref="editorRef" v-model="json" :language="language" height="200px" check />
{{ json }}
</template>

<config>
{
"name": "editor",
"title": "$editor"
}
</config>

<script>
import { onMounted, ref } from 'vue';
import { MonacoEditor } from '@fesjs/fes';
import { MonacoEditor, useLayout } from '@fesjs/fes';

export default {
components: {
MonacoEditor,
},
setup() {
console.log('editor.vue');
const { closeTab } = useLayout();

const editorRef = ref();
const json = ref('');
const language = ref('json');
onMounted(() => {
setTimeout(() => {
language.value = 'html';
}, 2000);
setTimeout(() => {
closeTab();
}, 3000);
});
return {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

代码补丁进行了如下的更改和添加：

  1. 模板部分：

    • 替换了<monaco-editor>标签为<MonacoEditor>标签。
    • 添加了显示json变量的内容。

  2. 配置部分：

    • 添加了一个配置块，其中包含了名为name和title的属性。

  3. 脚本部分：

    • 导入了@fesjs/fes库中的MonacoEditor组件和useLayout函数。
    • 在setup函数中，通过调用useLayout函数获得了closeTab方法。
    • 定义了一个名为editorRef的引用变量。
    • 定义了一个名为json的响应式变量，初始值为空字符串。
    • 定义了一个名为language的响应式变量，初始值为'json'。
    • 在onMounted钩子函数中，添加了两个定时器：
      • 第一个定时器在2秒后将language的值设置为'html'。
      • 第二个定时器在3秒后调用closeTab方法。
    • 返回editorRef、json和language变量。

在进行代码审核时，以下是可能存在的问题和改进建议：

  • 引用命名：可以使用更具描述性的名称来标识引用变量，例如将editorRef修改为monacoEditorRef或类似的名称。
  • 未使用的导入：脚本中导入的MonacoEditor并没有在组件中使用到，可能需要确保其用途或是否可以移除。
  • 配置块位置：配置块位于模板之后，但它通常应该位于脚本之前。请验证是否放置在正确的位置。
  • 定时器使用情况：请确保定时器的使用符合实际需求，并且在删除或修改代码时要特别注意它们的影响。
  • 缺少函数注释：提供一些简要的注释说明，来解释每个函数和代码块的目的和功能。

以上是对代码补丁的简要评审，希望对您有所帮助！

Expand Down
9 changes: 6 additions & 3 deletions packages/fes-template/src/pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<template>
<div class="page">
home
<FButton class="m-2" @click="go">Button</FButton>
<FButton class="m-2" @click="go">
Button
</FButton>
</div>
</template>

Expand All @@ -13,12 +15,13 @@ defineRouteMeta({
name: 'index',
title: '$home',
});

console.log('123123'.replaceAll('123', '234'));

const router = useRouter();
const go = () => {
function go() {
router.push('/editor');
};
}
</script>

<style>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

提供的代码补丁已经在模板和脚本部分进行了修改。以下是对代码的简洁审核和改进建议：

  1. 模板部分：

    • 在 <FButton> 组件中，将按钮文本 "Button" 放置在新的行内，以提高可读性。

  2. 脚本部分：

    • go 函数可以改为使用函数声明语法 function go() { ... }。
    • ; 分号可从函数体的末尾删除，因为它不是必需的。

总体而言，这些是较小的更改，没有明显的错误风险。可以考虑添加更多功能，如输入验证或错误处理，具体取决于代码的上下文和要求。

Expand Down
Loading