examples/sites/demos/pc/app/icon/list-composition-api.vue (1)

Line range hint 1-24: Consider architectural improvements for better performance

For better performance with large icon sets, consider these architectural improvements:

1. Implement virtual scrolling to handle large icon sets efficiently
2. Add debouncing to the search input to prevent excessive re-renders
3. Consider implementing a worker for search operations if the icon set is large

Example implementation for debouncing:

import { ref, watch } from 'vue'
import { debounce } from 'lodash-es'

const searchName = ref('')
const debouncedSearch = ref('')

watch(searchName, debounce((value) => {
  debouncedSearch.value = value
}, 300))

examples/sites/demos/pc/app/icon/list.vue (2)

50-50: Add input validation for search

Consider adding validation to prevent potential performance issues with complex search patterns.

Add a watcher to sanitize the search input:

+ watch: {
+   searchName: {
+     handler(val) {
+       // Trim whitespace and limit length
+       this.searchName = val.trim().slice(0, 50);
+     }
+   }
+ }

---

Line range hint 54-60: Consider extracting clipboard functionality

The clipboard interaction could be moved to a separate composable function for better reusability and testing.

Consider creating a composable:

// useClipboard.js
import { TinyModal } from '@opentiny/vue'

export function useClipboard() {
  const copyToClipboard = async (text, message) => {
    try {
      await navigator.clipboard.writeText(text)
      TinyModal.message({
        message,
        status: 'info'
      })
    } catch (error) {
      TinyModal.message({
        message: 'Failed to copy',
        status: 'error'
      })
    }
  }
  
  return { copyToClipboard }
}

Then use it in the component:

+ import { useClipboard } from './useClipboard'

export default {
  setup() {
+   const { copyToClipboard } = useClipboard()
    return {
+     copyToClipboard
    }
  },
  methods: {
    click(name) {
-     window.navigator.clipboard.writeText(name)
-     TinyModal.message({
-       message: `成功复制图标名称 ${name} `,
-       status: 'info'
-     })
+     this.copyToClipboard(name, `成功复制图标名称 ${name}`)
    }
  }
}

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Check if iconGroups.js exists and verify its exports
fd -t f "iconGroups.js" -x cat {} \;

# Check for other components that might be affected by this change
rg "iconGroupsMap" 

+ computed: {
+   shouldShowGroup() {
+     return (groupName) => {
+       return this.filteredIconGroups[groupName]?.length > 0;
+     };
+   }
+ }

- <div class="group-name">
+ <div class="group-name" :style="{ display: shouldShowGroup(groupName) ? 'block' : 'none' }">

#!/bin/bash
# Description: Check for :has() selector usage and browser compatibility info
rg -l "has\(\s*\+" | while read -r file; do
  echo "Found :has() usage in: $file"
done

echo "Browser compatibility for :has() selector:"
curl -s "https://caniuse.com/api/features" | jq '.data."css-has".usage_perc_y'

#!/bin/bash
# Check for browser support configuration or documentation
echo "Checking package.json for browserslist:"
fd package.json --exec cat {} | jq -r '.browserslist'

echo -e "\nChecking .browserslistrc:"
fd .browserslistrc --exec cat {}

echo -e "\nChecking README or documentation for browser support:"
rg -i "browser.*(support|compat)" README.md docs/

examples/sites/demos/pc/app/icon/list-composition-api.vue (1)

:has selector usage needs fallback for broader browser support

The project's browserslist configuration ("> 1%, last 2 versions") and documentation indicate support for mainstream browsers, but the CSS :has selector still has limited support in some browsers that fall within these requirements. Since no polyfills or JavaScript fallbacks were found in the codebase, you should:

• Add a JavaScript fallback for the group visibility logic to ensure compatibility with browsers that don't support :has
• Consider using a class-based approach with JavaScript to toggle visibility instead of relying solely on :has
• Example approach:

  // Add class to parent when child becomes visible
  function updateGroupVisibility(group) {
    const hasVisibleChild = group.querySelector('.svg-visible')
    group.classList.toggle('has-visible-child', hasVisibleChild)
  }

  .svgs-box.has-visible-child .group-name {
    display: block;
  }

🔗 Analysis chain

Line range hint 79-123: Verify browser support requirements

Let's check the project's browser support requirements to ensure the CSS approach aligns with them.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check package.json for browserslist config
if [ -f package.json ]; then
  echo "Checking browserslist configuration..."
  cat package.json | jq '.browserslist'
fi

# Check for separate browserslist config
if [ -f .browserslistrc ]; then
  echo "Checking .browserslistrc configuration..."
  cat .browserslistrc
fi

Length of output: 213

---

Script:

#!/bin/bash
# Check for any polyfills or fallbacks for :has selector
rg -i "has.*polyfill|feature.*detect.*has|modernizr.*has" -g "!*.{lock,min.js}"

# Check for any browser compatibility comments or documentation
fd . -e md -e txt -X rg -i "browser.*support|compatibility"

# Look for any JavaScript-based visibility toggle implementations that might serve as fallbacks
ast-grep --pattern 'function $FUNC($$$) {
  $$$
  display$$$
  $$$
}'

Length of output: 444

Configuration used: CodeRabbit UI
Review profile: CHILL

- <template v-for="name in nameList" :key="name">
-   <div
-     :class="{
-       'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
-       'svgs-item': true
-     }"
-     @click="click(name)"
-   >
+ <template v-for="name in filteredNames(nameList)" :key="name">
+   <div class="svgs-item" @click="click(name)">

const filteredNames = (nameList) => {
  return computed(() => 
    nameList.filter(name => 
      searchName.value === '' || 
      name.toLowerCase().includes(searchName.value.toLowerCase())
    )
  )
}

const hideEmptyGroups = () => {
  const groupNames = document.querySelectorAll('.group-name')
  groupNames.forEach(group => {
    const hasItems = group.nextElementSibling?.classList.contains('svg-visible')
    group.style.display = hasItems ? 'block' : 'none'
  })
}

onMounted(() => {
  if (!CSS.supports('selector(:has(*))')) {
    hideEmptyGroups()
    watch(searchName, hideEmptyGroups)
  }
})

- <div v-for="(nameList, groupName) in iconGroups" :key="groupName" class="svgs-box">
+ <div v-for="(nameList, groupName) in filteredIcons" :key="groupName" class="svgs-box">
   <div class="group-name">
     {{ groupName }}
   </div>
   <template v-for="name in nameList" :key="name">
     <div
-      :class="{
-        'svg-visible': searchName === '' || name.toLowerCase().includes(searchName.toLowerCase()),
-        'svgs-item': true
-      }"
+      class="svgs-item svg-visible"
       @click="click(name)"
     >

computed: {
  filteredIcons() {
    if (!this.searchName) return this.iconGroups;
    const searchLower = this.searchName.toLowerCase();
    
    return Object.entries(this.iconGroups).reduce((acc, [groupName, names]) => {
      const filtered = names.filter(name => 
        name.toLowerCase().includes(searchLower)
      );
      if (filtered.length) acc[groupName] = filtered;
      return acc;
    }, {});
  }
}

 .svgs-box:has(> .svg-visible) .group-name {
   display: block;
 }
+/* Fallback for browsers without :has() support */
+@supports not (selector(:has(*))) {
+  .svgs-box .group-name {
+    display: block;
+  }
+}

#!/bin/bash
# Check for browser compatibility comments in the codebase
rg -i "browser.?compat|support" --type md