Skip to content

perf: Optimize login page #3805

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

Merged
wangdan-fit2cloud merged 2 commits into from
Aug 4, 2025
Merged

perf: Optimize login page #3805

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
dd0daeb
perf: icon optimize
wangdan-fit2cloud Aug 4, 2025
0375b9d
perf: Optimize login page
wangdan-fit2cloud Aug 4, 2025
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
26 changes: 26 additions & 0 deletions ui/src/components/app-icon/icons/application.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -713,4 +713,30 @@ export default {
])
},
},

'app-clock': {
iconReader: () => {
return h('i', [
h(
'svg',
{
style: { height: '100%', width: '100%' },
viewBox: '0 0 1024 1024',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg',
},
[
h('path', {
d: 'M469.333333 320a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333V469.333333h149.333333a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334h-213.333333a21.333333 21.333333 0 0 1-21.333334-21.333334v-213.333333z',
fill: 'currentColor',
}),
h('path', {
d: 'M512 981.333333c259.2 0 469.333333-210.133333 469.333333-469.333333S771.2 42.666667 512 42.666667 42.666667 252.8 42.666667 512s210.133333 469.333333 469.333333 469.333333z m0-85.333333a384 384 0 1 1 0-768 384 384 0 0 1 0 768z',
fill: 'currentColor',
}),
],
),
])
},
},
}
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 4, 2025

Choose a reason for hiding this comment

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

The provided code snippet has several issues:

Issues:

  1. Duplicate iconReader Functionality: The same iconReader function is defined twice for different components ('app-catalogue' and 'app-clock'). Ensure that each component uses its own unique identifier for icons.

  2. SVG Path Length: The SVG paths have been simplified to reduce the file size. However, this could impact rendering quality, especially if the original paths were more complex and necessary for precise visual representation.

  3. Version Number and ViewBox Attributes: While including these attributes can be beneficial, they should be reviewed to ensure compatibility with older browsers or specific requirements of the application.

  4. Path Duplicates: There are duplicate path specifications within the SVG definitions. These duplicates might cause unexpected behavior in some render engines. Consider removing redundant elements if they are not required.

  5. Icon Naming: Ensure that the icons used across different components do not conflict in naming or functionality as specified by other developers or stakeholders.

Optimization Suggestions:

  • Component Specific Logic: If applicable, separate logic related to icon generation into individual functions within each component. This makes it easier to manage updates or changes without affecting multiple parts of the codebase.

  • SVG Minification: While the current approach reduces file size, consider additional optimization techniques such as using fewer colors, simplifying shapes, or reducing line thicknesses to further minimize file size while maintaining clarity.

  • Consistent Styling: Ensure consistent styling for all SVG elements, particularly the height, width, fill, etc., to maintain uniformity across the project.

Example Correction (if needed):

If you need to define an icon reader specifically for the clock app, consider renaming the key:

'clock-icon-reader': {
  // Icon reading function here
}

By addressing these points, the code will become cleaner, leaner, and potentially less error-prone.

21 changes: 21 additions & 0 deletions ui/src/components/app-icon/icons/system.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,4 +60,25 @@ export default {
])
},
},

'app-operate-log': {
iconReader: () => {
return h('i', [
h(
'svg',
{
viewBox: '0 0 1024 1024',
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg',
},
[
h('path', {
d: 'M213.333333 128v768h597.333334V128H213.333333zM170.666667 42.666667h682.666666c23.552 0 42.666667 20.010667 42.666667 44.714666v849.237334c0 24.704-19.114667 44.714667-42.666667 44.714666H170.666667c-23.552 0-42.666667-20.010667-42.666667-44.714666V87.381333C128 62.677333 147.114667 42.666667 170.666667 42.666667z m149.333333 256h170.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-170.666667a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333z m0 170.666666h384a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334h-384a21.333333 21.333333 0 0 1-21.333333-21.333334v-42.666666a21.333333 21.333333 0 0 1 21.333333-21.333334z m0 170.666667h384a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-384a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333z',
fill: 'currentColor',
}),
],
),
])
},
},
}
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 4, 2025

Choose a reason for hiding this comment

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

The provided code contains some minor corrections and optimizations:

  1. Syntax Correction:

    • Replace const with let or var if you intend to modify the variable inside the function.

  2. HTML Tags:

    • Ensure that all HTML tags are properly closed. This is not strictly necessary but recommended for readability.
    let svg = h('svg', { ... }, [ /* child elements */ ]);

  3. SVG Path Data:

    • The SVG path data seems incomplete and does not fully represent a recognizable shape within its viewBox. It might need further adjustments to be meaningful.

  4. Styling:

    • The color attribute uses 'currentColor', which is appropriate when referencing CSS styles defined elsewhere. However, ensure there's a corresponding style definition in your CSS file or inline CSS.

Here’s an updated and optimized version of the code snippet:

export default {
  components: {
    // Add any component definitions here
  },
  'app-operate-log': {
    iconReader() {
      return h('i',[
        h(
          'svg',
          {
            viewBox: '0 0 1024 1024',
            version: '1.1',
            xmlns: 'http://www.w3.org/2000/svg'
          },
          [
            h('path',
              {
                d:',
                "M213.333333 128v768h597.333334V128H213.333333",
                fill: 'red' // Example color, adjust as needed
              })
          ]
        )
      );
    }
  }
}

Optimization Suggestions:

  • Use Component Properly: If this object represents an application operate log icon, it would make more sense to place it under a components key instead of directly inheriting from it. For example: 
    ...
components: {
  appOperateLogIcon: (props) => ({
    template: `<i><svg viewBox="0 0 1024 1024"><path d="{ props.iconData }" fill="black"></path></svg></i>`,
    computed: {
      iconData: () => ({ d:', "M213.333333 128v768h597.333334V128H213.333333", fill: 'black' }))
    }
  })
},

This approach organizes similar icons effectively, making it easier to manage and extend.

2 changes: 1 addition & 1 deletion ui/src/components/folder-tree/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<template #default="{ node, data }">
<div class="flex-between w-full" @mouseenter.stop="handleMouseEnter(data)">
<div class="flex align-center">
<AppIcon iconName="app-folder" style="font-size: 16px"></AppIcon>
<AppIcon iconName="app-folder" style="font-size: 20px"></AppIcon>
<span class="ml-8 ellipsis" style="max-width: 110px" :title="node.label">{{
node.label
}}</span>
Expand Down
5 changes: 2 additions & 3 deletions ui/src/views/application/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,9 +219,8 @@
{{ $t('views.application.status.published') }}
</span>
<el-divider direction="vertical" />
<el-icon class="mr-8">
<Clock />
</el-icon>
<AppIcon iconName="app-clock" class="color-secondary mr-8"></AppIcon>

<span class="color-secondary">{{ dateFormat(item.update_time) }}</span>
</div>
<div v-else class="flex align-center">
Expand Down
2 changes: 0 additions & 2 deletions ui/src/views/login/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,6 @@ const loginHandle = () => {
.asyncLdapLogin(loginForm.value)
.then(() => {
locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
loading.value = false
router.push({ name: 'home' })
})
.catch(() => {
Expand All @@ -203,7 +202,6 @@ const loginHandle = () => {
.then(() => {
locale.value = localStorage.getItem('MaxKB-locale') || getBrowserLang() || 'en-US'
localStorage.setItem('workspace_id', 'default')
loading.value = false
router.push({ name: 'home' })
})
.catch(() => {
Expand Down
10 changes: 6 additions & 4 deletions ui/src/views/system/operate-log/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,12 +230,14 @@
{{ datetimeFormat(row.create_time) }}
</template>
</el-table-column>
<el-table-column :label="$t('common.operation')" width="110" align="left" fixed="right">
<el-table-column :label="$t('common.operation')" width="60" align="left" fixed="right">
<template #default="{ row }">
<span class="mr-4">
<el-button type="primary" text @click.stop="showDetails(row)" class="text-button">
{{ $t('views.operateLog.table.opt.label') }}
</el-button>
<el-tooltip effect="dark" :content="$t('views.operateLog.table.opt.label')" placement="top">
<el-button type="primary" text @click.stop="showDetails(row)" class="text-button">
<AppIcon iconName="app-operate-log"></AppIcon>
</el-button>
</el-tooltip>
</span>
</template>
</el-table-column>
Expand Down
1 change: 0 additions & 1 deletion ui/src/views/tool/ToolDebugDrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,6 @@
:class="isSuccess ? '' : 'color-danger'"
class="pre-wrap"
shadow="never"
style="max-height: 350px; overflow: scroll"
>
{{ String(result) == '0' ? 0 : result || '-' }}
</el-card>
Expand Down
14 changes: 7 additions & 7 deletions ui/src/workflow/common/NodeControl.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
<el-button link @click="zoomOut">
<el-button link @click="zoomOut" style="border: none">
<el-tooltip
effect="dark"
:content="$t('views.applicationWorkflow.control.zoomOut')"
Expand All @@ -11,7 +11,7 @@
/></el-icon>
</el-tooltip>
</el-button>
<el-button link @click="zoomIn">
<el-button link @click="zoomIn" style="border: none">
<el-tooltip
effect="dark"
:content="$t('views.applicationWorkflow.control.zoomIn')"
Expand All @@ -22,7 +22,7 @@
/></el-icon>
</el-tooltip>
</el-button>
<el-button link @click="fitView">
<el-button link @click="fitView" style="border: none">
<el-tooltip
effect="dark"
:content="$t('views.applicationWorkflow.control.fitView')"
Expand All @@ -35,7 +35,7 @@
</el-tooltip>
</el-button>
<el-divider direction="vertical" />
<el-button link @click="retract">
<el-button link @click="retract" style="border: none">
<el-tooltip
effect="dark"
:content="$t('views.applicationWorkflow.control.retract')"
Expand All @@ -48,7 +48,7 @@
></AppIcon>
</el-tooltip>
</el-button>
<el-button link @click="extend">
<el-button link @click="extend" style="border: none">
<el-tooltip
effect="dark"
:content="$t('views.applicationWorkflow.control.extend')"
Expand All @@ -61,7 +61,7 @@
></AppIcon>
</el-tooltip>
</el-button>
<el-button link @click="layout">
<el-button link @click="layout" style="border: none">
<el-tooltip
effect="dark"
:content="$t('views.applicationWorkflow.control.beautify')"
Expand All @@ -79,7 +79,7 @@

<script setup lang="ts">
const props = defineProps({
lf: Object || String || null
lf: Object || String || null,
})
function zoomIn() {
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 4, 2025

Choose a reason for hiding this comment

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

The provided changes look fine overall from a syntax perspective and generally do not introduce any significant issues. However, there is one small suggestion related to border styling.

Suggestion: Remove the style="border: none" from all buttons other than the first two (zoomIn), as they already have default link styles that usually include borders unless explicitly styled differently elsewhere in your application.

Here's an example of how you can adjust these lines:

<template>
  <el-card shadow="always" style="--el-card-padding: 8px 12px; --el-card-border-radius: 8px">
    <el-button link @click="zoomOut">
      <el-tooltip effect="dark"
                :content="$t('views.applicationWorkflow.control.zoomOut')"></el-tooltip>
    </el-button>

    <el-button link @click="zoomIn">
      <el-tooltip effect="dark"
                :content="$t('views.applicationWorkflow.control.zoomIn')"></el-tooltip>
    </el-button>

    <el-button link @click="fitView">
      <el-tooltip effect="dark"
                :content="$t('views.applicationWorkflow.control.fitView')"></el-tooltip>
    </el-button>

    <el-divider direction="vertical" />

    <!-- Keep this button with border -->
    <el-button link @click="retract">
      <el-tooltip effect="dark"
                :content="$t('views.applicationWorkflow.control.retract')"></el-tooltip>
    </el-button>

    <!-- Keep this button with border -->
    <el-button link @click="extend">
      <el-tooltip effect="dark"
                :content="$t('views.applicationWorkflow.control.extend')"></el-tooltip>
    </el-button>

    <!-- Keep this button with border -->
    <el-button link @click="layout">
      <el-tooltip effect="dark"
                :content="$t('views.applicationWorkflow.control.beautify')"></el-tooltip>
    </el-button>
  </el-card>
</template>

This change ensures consistency across the layout elements by applying default styles where applicable while making necessary adjustments as needed.

Expand Down
Loading