优化部分提示内容以及构建的测试

hslr-s · Dec 14, 2023 · a1c7e98 · a1c7e98
1 parent 62ca5f8
commit a1c7e98
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 5 deletions.
diff --git a/src/utils/cmn/index.ts b/src/utils/cmn/index.ts
@@ -131,6 +131,43 @@ export async function getNotice(displayType: number | number[]) {
   }
 }
 
+// 权限受限暂时不用
+// export async function getFaviconUrl(url: string, extName = 'ico'): Promise<string | null> {
+//   try {
+//     // 获取网址的域名
+//     const { protocol, host } = new URL(url)
+//     const domain = `${protocol}//${host}`
+
+//     // 构建 favicon URL
+//     const faviconUrl = `${domain}/favicon.${extName}`
+
+//     // 检查 favicon 是否存在，包含 CORS 头部
+//     const response = await fetch(faviconUrl, { method: 'HEAD', mode: 'cors' })
+
+//     // 如果请求成功，返回 favicon URL
+//     if (response.ok) {
+//       return faviconUrl
+//     }
+//     else {
+//       console.log('Favicon not found.')
+//       return null
+//     }
+//   }
+//   catch (error) {
+//     // 如果出现错误，返回 null，表示找不到 favicon
+//     console.error('Error:', error)
+//     return null
+//   }
+// }
+
+export function getFaviconUrl(url: string): string {
+  // 获取网址的域名
+  const { protocol, host } = new URL(url)
+  const domain = `${protocol}//${host}`
+  // 构建 favicon URL
+  return `${domain}/favicon.ico`
+}
+
 /**
  * @description: 获取随机码
  * @param {number} size

diff --git a/src/views/home/components/EditItem/IconEditor.vue b/src/views/home/components/EditItem/IconEditor.vue
@@ -101,7 +101,7 @@ watch(itemIconInfo.value, () => {
         name="iconType"
         @change="handleIconTypeRadioChange(3)"
       >
-        图标
+        在线图标
       </NRadio>
     </div>
 
@@ -124,7 +124,7 @@ watch(itemIconInfo.value, () => {
               <NInput v-model:value="itemIconInfo.text" class="mb-[5px]" size="small" type="text" placeholder="请输入图标名字" @input="handleChange" />
 
               <NButton quaternary type="info">
-                <a target="_blank" href="https://icon-sets.iconify.design/">图标库</a>
+                <a target="_blank" href="https://icon-sets.iconify.design/">在线图标库</a>
               </NButton>
             </div>
           </div>

diff --git a/src/views/home/components/EditItem/index.vue b/src/views/home/components/EditItem/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, defineEmits, defineProps, ref, watch } from 'vue'
 import type { FormInst, FormRules } from 'naive-ui'
-import { NButton, NForm, NFormItem, NGrid, NGridItem, NInput, NModal, NSelect, useMessage } from 'naive-ui'
+import { NButton, NForm, NFormItem, NGrid, NGridItem, NInput, NInputGroup, NModal, NSelect, useMessage } from 'naive-ui'
 import IconEditor from './IconEditor.vue'
 import { edit } from '@/api/panel/itemIcon'
 import { getList as getGroupList } from '@/api/panel/itemIconGroup'
@@ -119,6 +119,23 @@ const handleValidateButtonClick = (e: MouseEvent) => {
   })
 }
 
+// async function getIconByUrl(url: string) {
+//   let iconUrl = await getFaviconUrl(url)
+//   if (iconUrl === null)
+//     iconUrl = await getFaviconUrl(url)
+
+//   if (iconUrl === null) {
+//     ms.error('无法获取该站点图标')
+//   }
+//   else {
+//     if (model.value.icon)
+//       model.value.icon.src = iconUrl
+//     else
+//     model.value.icon={}
+//       console.log('怒涛有')
+//   }
+// }
+
 watch(() => props.itemInfo, (newValue) => {
   model.value = newValue || { ...restoreDefault }
   getGroupListOptions()
@@ -176,10 +193,20 @@ function getGroupListOptions() {
         </NFormItem>
         <NFormItem path="url" label="跳转地址">
           <!-- <NSelect :style="{ width: '100px' }" :options="urlProtocolOptions" /> -->
-          <NInput v-model:value="model.url" type="text" :maxlength="1000" placeholder="http(s)://" />
+          <NInputGroup>
+            <NInput v-model:value="model.url" type="text" :maxlength="1000" placeholder="http(s)://" />
+            <!-- <NButton @click="getIconByUrl(model.url)">
+              获取图标
+            </NButton> -->
+          </NInputGroup>
         </NFormItem>
         <NFormItem path="lanUrl" label="局域网跳转地址">
-          <NInput v-model:value="model.lanUrl" type="text" :maxlength="1000" placeholder="http(s)://（可以留空，切换到局域网模式，点击会使用该地址）" />
+          <NInputGroup>
+            <NInput v-model:value="model.lanUrl" type="text" :maxlength="1000" placeholder="http(s)://（可以留空，切换到局域网模式，点击会使用该地址）" />
+            <!-- <NButton @click="getIconByUrl(model.lanUrl || '')">
+              获取图标
+            </NButton> -->
+          </NInputGroup>
         </NFormItem>
         <NFormItem path="description" label="描述信息">
           <NInput v-model:value="model.description" type="text" show-count :maxlength="100" placeholder="请填写描述信息" />