feat: update icons

oeyoews · Jul 21, 2024 · 8ec8d6f · 8ec8d6f
1 parent d566118
commit 8ec8d6f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 27 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -8,7 +8,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
@@ -19,7 +18,6 @@ declare module 'vue' {
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
-    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']

diff --git a/entrypoints/sidepanel/components/SearchPage.vue b/entrypoints/sidepanel/components/SearchPage.vue
@@ -1,6 +1,11 @@
 <!-- history -->
 <script setup lang="ts">
-import { LogosChrome, LogosMicrosoftEdge } from '@/utils/icons';
+import {
+  MaterialSymbolsHouseOutlineRounded,
+  MaterialSymbolsSearchRounded,
+  LogosChrome,
+  LogosBing,
+} from '@/utils/icons';
 const props = defineProps<{
   port: number;
 }>();
@@ -13,33 +18,19 @@ const engines = [
   {
     name: 'Google',
     value: 'https://www.google.com/search?q=',
-    icon: 'LogosChrome',
+    icon: LogosChrome,
   },
   {
     name: 'Bing',
     value: 'https://www.bing.com/search?q=',
-    icon: 'LogosMicrosoftEdge',
+    icon: LogosBing,
   },
-];
-const getIcon = (name: string) => {
-  switch (name) {
-    case 'Google':
-      return LogosChrome;
-    case 'Bing':
-      return LogosMicrosoftEdge;
-    default:
-      return LogosChrome;
-  }
-};
+] as const;
 
 const getCurrentIcon = (value: string) => {
-  const icon = engines.find((engine) => engine.value === value)?.icon;
-  if (icon === 'LogosChrome') {
-    return LogosChrome;
-  } else {
-    return LogosMicrosoftEdge;
-  }
+  return engines.find((engine) => engine.value === value)?.icon;
 };
+
 const searchEngine = ref(engines[0].value);
 const openweb = (url: string) => {
   if (!url.startsWith('http')) {
@@ -78,19 +69,23 @@ const openweb = (url: string) => {
                     :label="engine.name"
                     :value="engine.value">
                     <div class="flex items-center gap-2">
-                      <component :is="getIcon(engine.name)" />
+                      <component :is="engine.icon" />
                       {{ engine.name }}
                     </div>
                   </el-option>
                 </el-select>
               </template>
             </el-input>
-            <el-button @click="openweb(targetLink)">搜索</el-button>
+            <el-button
+              @click="openweb(targetLink)"
+              class="aspect-square">
+              <material-symbols-search-rounded />
+            </el-button>
             <el-button
               @click="$emit('goHome')"
-              class="!ml-1"
-              >主页</el-button
-            >
+              class="!ml-1 aspect-square">
+              <material-symbols-house-outline-rounded />
+            </el-button>
           </div>
         </el-form-item>
       </el-form>

diff --git a/utils/icons/index.ts b/utils/icons/index.ts
@@ -31,3 +31,7 @@ export { default as GameIconsHole } from '~icons/game-icons/hole';
 
 export { default as LogosChrome } from '~icons/logos/chrome';
 export { default as LogosMicrosoftEdge } from '~icons/logos/microsoft-edge';
+export { default as LogosBing } from '~icons/logos/bing';
+
+export { default as MaterialSymbolsHouseOutlineRounded } from '~icons/material-symbols/house-outline-rounded';
+export { default as MaterialSymbolsSearchRounded } from '~icons/material-symbols/search-rounded';