Skip to content

perf: Partial icon updates #3847

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 1 commit into from
Aug 12, 2025
Merged

perf: Partial icon updates #3847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 21 additions & 0 deletions ui/src/components/app-icon/icons/menu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,27 @@ export default {
])
},
},
'app-user-chat-active': {
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: 'M213.333333 298.666667a213.333333 213.333333 0 1 0 426.752-0.085334A213.333333 213.333333 0 0 0 213.333333 298.666667zM298.666667 554.666667a256 256 0 0 0-256 256v108.330666c0 23.552 19.2 42.666667 42.666666 42.666667h682.666667c23.466667 0 42.666667-19.114667 42.666667-42.666667V810.666667a256 256 0 0 0-256-256H298.666667zM960 384h-213.333333a21.333333 21.333333 0 0 0-21.333334 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333334 21.333333h213.333333a21.333333 21.333333 0 0 0 21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 0-21.333333-21.333333zM960 554.666667h-85.333333a21.333333 21.333333 0 0 0-21.333334 21.333333v42.666667a21.333333 21.333333 0 0 0 21.333334 21.333333h85.333333a21.333333 21.333333 0 0 0 21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 0-21.333333-21.333333z',
fill: 'currentColor',
}),
],
),
])
},
},
'app-resource-management': {
iconReader: () => {
return h('i', [
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 12, 2025

Choose a reason for hiding this comment

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

The code snippet appears to be part of a Vue component's configuration file, likely used in Element Plus or Vaadin applications. Here’s a brief review:

Irregularities:

  • Duplicate Icon Definition: The iconReader function is defined twice under different keys ('app-user-chat-active' and 'app-resource-management'). If you intend these icons to have different functionality, consider consolidating them.

Potential Issues:

  • SVG Syntax: There seems to be an issue with the SVG data. Ensure that it correctly defines the path attributes without any syntax errors.

Optimization Suggestions:

  1. Consolidate Icons: Combine the two similar iconReader functions into one if they have different functionalities:

    'app-user-chat-active-and-management': {
  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',
        },
        [
          // Existing paths...
        ],
      ),
    ])
  },
},

  2. Error Handling: Add basic error handling within the SVG definition to catch and display any rendering errors:

    'app-user-chat-active-and-management': {
  iconReader: () => {
    try {
      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',
          },
          [
            // Existing paths...
          ],
        ),
      ]);
    } catch (error) {
      console.error('Failed to render SVG:', error);
      return null; // Return a default content or element if needed
    }
  },
},

These changes will help ensure smooth rendering of both icons while maintaining consistency in your application’s design.

Expand Down
2 changes: 1 addition & 1 deletion ui/src/router/modules/application-detail.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ const ApplicationDetailRouter = {
name: 'applicationChatUser',
meta: {
icon: 'app-user-chat',
iconActive: 'app-user-chat',
iconActive: 'app-user-chat-active',
title: 'views.chatUser.title',
active: 'chat-user',
parentPath: '/application/:from/:id/:type',
Expand Down
4 changes: 2 additions & 2 deletions ui/src/router/modules/document.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -201,9 +201,9 @@ const DocumentRouter = {
name: 'KnowledgeChatUser',
meta: {
icon: 'app-user-chat',
iconActive: 'app-user-chat',
iconActive: 'app-user-chat-active',
title: 'views.chatUser.title',
active: 'chat-log',
active: 'chat-user',
parentPath: '/knowledge/:id/:folderId',
parentName: 'KnowledgeDetail',
resourceType: SourceTypeEnum.KNOWLEDGE,
Expand Down
9 changes: 8 additions & 1 deletion ui/src/views/system-resource-management/ModelResourceIndex.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,14 @@
<!-- <el-table-column type="selection" width="55" /> -->
<el-table-column width="220" :label="$t('common.name')" show-overflow-tooltip>
<template #default="{ row }">
{{ row.name }}
<el-space :size="8">
<span
style="width: 24px; height: 24px; display: inline-block"
:innerHTML="getRowProvider(row)?.icon"
>
</span>
<span> {{ row.name }}</span>
</el-space>
</template>
</el-table-column>
<el-table-column
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Aug 12, 2025

Choose a reason for hiding this comment

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

The code has minor improvements to improve readability and user experience:

  1. Use of slot-scope instead of #default: While [#default] is allowed, using slot-scope="props" explicitly can make the template more readable. This approach also allows access to additional properties like index in future versions.

    

    2. 



-<template #default="{ row }">

+




    

  • 

       <!-- Added comment to explain why this isn't necessary -->

    

    • 




2. **Consistent Styling:** The styles for the icons and text should remain consistent unless there's specific reason to change them. You might want to review the `.el-avatar` class or add a custom one if needed.

3. **Avoiding Inline HTML with Templates:** Directly assigning an icon via innerHTML within a Vue component is generally discouraged because it bypasses Vue's data binding system. If you need to render dynamic content, consider using Vue components, slots, mixins, etc., to ensure proper reactivity and maintainability.

   ```xml
-          <span
-            style="width: 24px; height: 24px; display: inline-block"
-            :innerHTML="getRowProvider(row)?.icon"
-          >
+          <div v-if="row.icon">
             // Alternatively, use a custom avatar component
             <my-custom-icon :icon="'user'" />
           </div>
           <span> {{ row.name }}</span>
     ```

Here is the modified part of the code following these suggestions:

```vue
<el-table-column width="240" :label="$t('common.name')" show-overflow-tooltip>
  <template slot-scope="props">
    <el-space :size="8">
      <div v-if="getRowProvider(props.row)?.icon"> 
        // Optionally replace 'my-custom-icon' with actual component name
        <my-custom-icon :icon="'user'" />
      </div>
      <span> {{ props.row.name }} </span>
    </el-space>
  </template>
</el-table-column>


    

  
  




    


        

      
  
  

    
  
    
    

  

  

  



          

      
    








    


  









  


    


  		



  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



    
  

    

      

        


          

            
            
          


          



          
            5 changes: 5 additions & 0 deletions
          
          

        

  ui/src/views/system-setting/theme/index.vue

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
          
            
          
          Expand Up
    
    @@ -421,5 +421,10 @@ onMounted(() => {
  


    

    

    

  
          background: var(--app-header-bg-color);






    

    

    

  
        }






    

    

    

  
      }






    

    

    

  
      .theme-form {






    

    

    

  
        :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {






    

    

    

  
          color: var(--el-checkbox-text-color);






    

    

    

  
        }






    

    

    

  
      }






    

    

    

  
    }






    

    

    

  
    </style>






      


  
        

      
  
    
    

      
      
          



  

    

        

        

  

    

      

          
    
    

  


        
            
  
      
              Copy link

  

        
      

    


    

        

  
    Contributor


        

  Author


    

  


  

    

      
          @shaohuzhang1
      

      
            shaohuzhang1
  

      

      

      


        Aug 12, 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 is already mostly correct, but you can add some minor optimizations:


<style>
/* Additions to optimize specificity */
.theme-form .el-checkbox__label:hover,
.theme-form .el-checkbox__inner:focus {
  background-color: transparent;
}

.theme-form label.el-checkbox--mini+.el-checkbox__label{
  font-size: 1rem; /* Apply consistent font size for all labels regardless of size */
}
</style>


Key Suggestions:


    

  • 

    Specificity: The added rules have higher specificity than generic ones with * selectors. This ensures they take precedence over potentially less specific styles elsewhere.
    

    • 

  • 

    Hover and Focus Styles: Added hover and focus styles to .el-checkbox__label, which might be useful for enhancing user interaction experiences.
    

    • 

  • 

    Consistent Label Size: Applied a consistent font size (1rem) to .el-checkbox__label, assuming this aligns with your design requirements or UI guidelines.
    

    • 



Make sure these changes do not conflict with existing styles in other parts of your application. Adjust the properties as necessary to fit your project's style guide or theme conventions.

    

  
  




    


        

      
  
  

    
  
    
    

  

  

  



          

      
    








    


  









  


    


  		





                
              


          


    

  



    
  

    

      

        



          



          
            2 changes: 1 addition & 1 deletion
          
          

        

  ui/src/views/tool/ToolDebugDrawer.vue

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
    
    @@ -1,5 +1,5 @@
  


    

    

    

  
    <template>






    

    

    

  
      <el-drawer v-model="debugVisible" size="60%" :append-to-body="true">






    

    

    

  
      <el-drawer v-model="debugVisible" size="60%" :append-to-body="true" :modal="false">






    

    

    

  
        <template #header>






    

    

    

  
          <div class="flex align-center" style="margin-left: -8px">






    

    

    

  
            <el-button class="cursor mr-4" link @click.prevent="debugVisible = false">






  

    
          
            
          
          Expand Down
    
    
  



                
              


          


    

  



    
  

    

      

        



          



          
            2 changes: 1 addition & 1 deletion
          
          

        

  ui/src/workflow/icons/chat-icon.vue

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
    
    @@ -1,4 +1,4 @@
  


    

    

    

  
    <template>






    

    

    

  
      <img src="@/assets/workflow/icon_globe_color.svg" style="width: 18px" alt="" />






    

    

    

  
      <img src="@/assets/workflow/icon_chat_color.svg" style="width: 18px" alt="" />






    

    

    

  
    </template>






    

    

    

  
    <script setup lang="ts"></script>








                
              


          


    

  



    
  

    

      

        



          



          
            2 changes: 1 addition & 1 deletion
          
          

        

  ui/src/workflow/icons/global-icon.vue

  
  
      
      
  





        
      


      

        











            


          

          

            
              

                
    

              

            
            
                            

                            


                              
   View file



                                    


                                  


                            


                            

                            

    Open in desktop



                
            
          

        

      

    



    



          

            




              
      
    
              

                
                  

                      Original file line number
                      Diff line number
                      Diff line change
                  

                
                
                      
      

    
    
    @@ -1,4 +1,4 @@
  


    

    

    

  
    <template>






    

    

    

  
      <img src="@/assets/workflow/icon_chat_color.svg" style="width: 18px" alt="" />






    

    

    

  
      <img src="@/assets/workflow/icon_globe_color.svg" style="width: 18px" alt="" />






    

    

    

  
    </template>






    

    

    

  
    <script setup lang="ts"></script>








                
              


          


    

  



  



    

  
  
    
      Loading