feat: 修改图标说明

Author: vampirefan

app.config.ts

@@ -1,6 +1,6 @@
 export default defineAppConfig({
   title: 'wiki3',
   version: '1.2.19',
-  sourceUrl: 'http://10.102.81.50/gitlab/admin3/wiki3',
-  demoUrl: 'http://10.102.81.15:30294/Home',
+  sourceUrl: 'https://github.com/vampirefan/admin3-docs',
+  demoUrl: 'https://admin3.netlify.app',
 })

components/Navbar.vue

@@ -38,7 +38,7 @@ onMounted(() => {
     <div class="flex-grow" />
     <el-sub-menu v-for="link of navTree" :key="link._path" :index="link._path">
       <template #title>
-        <AdminIcon :name="link.icon" />
+        <Icon :name="link.icon" />
         <span class="text-lg font-bold">{{ link.title }}</span>
       </template>
       <el-menu-item
@@ -51,7 +51,7 @@ onMounted(() => {
 
     <el-tooltip content="项目源码">
       <el-link :underline="false" @click="openUrl(appConfig.sourceUrl)">
-        <AdminIcon name="i-logos-gitlab" class="mx-2 text-xl" />
+        <Icon :name="appConfig.sourceUrl?.includes('github') ? 'i-logos-github-icon' : 'i-logos-gitlab'" class="mx-2 text-xl" />
       </el-link>
     </el-tooltip>
 

components/Sidebar.vue

@@ -11,12 +11,12 @@ const route = useRoute()
   <aside class="sidebar">
     <el-menu class="mt" router :ellipsis="false" :default-active="route.path" unique-opened>
       <el-menu-item index="/" @click="navigateTo('/')">
-        <AdminIcon name="i-twemoji-house-with-garden" />
+        <Icon name="i-twemoji-house-with-garden" />
         <span class="text-base font-600">介绍</span>
       </el-menu-item>
       <el-sub-menu v-for="link of navTree" :key="link._path" :index="link._path">
         <template #title>
-          <AdminIcon :name="link.icon" />
+          <Icon :name="link.icon" />
           <span class="text-base font-600">{{ link.title }}</span>
         </template>
         <el-menu-item

components/admin/AdminDarkToggle.vue

@@ -7,7 +7,7 @@ function toggleDark() {
 
 <template>
   <el-link :underline="false" @click="toggleDark">
-    <AdminIcon v-if="color === 'dark'" name="i-twemoji-last-quarter-moon-face" />
-    <AdminIcon v-else name="i-twemoji-sun" />
+    <Icon v-if="color === 'dark'" name="i-twemoji-last-quarter-moon-face" />
+    <Icon v-else name="i-twemoji-sun" />
   </el-link>
 </template>

components/global/AdminIcon.vue renamed to components/global/Icon.vue

@@ -33,7 +33,7 @@ function handleClickLink(link: string) {
         @click="handleClickLink(link)"
       >
         <div>
-          <AdminIcon v-if="icon" :name="icon" class="el-icon text-2xl" />
+          <Icon v-if="icon" :name="icon" class="el-icon text-2xl" />
           <img v-if="image" :src="image" class="m-0 m-auto h-8 w-8">
         </div>
         <div class="mt1 text-sm">

components/global/LinkCard.vue

@@ -3,88 +3,67 @@ title: 图标
 icon: i-twemoji-beaming-face-with-smiling-eyes
 ---
 
-图标是前端的灵魂，你可以直接使用官方的 `@iconify/vue` 组件来引入在线图标。或者使用项目封装的 `<AdminIcon />` 组件来使用离线打包进项目的 svg 和 iconify 图标。也可以直接使用 `unocss` 提供的图标预设。此外，项目还封装了`<AdminIconOnline />` 组件来使用在线图标。
+图标是前端的灵魂，你可以直接使用官方的 `@iconify/vue` 组件来引入在线图标。或者使用项目封装的 `<Icon />` 组件来使用离线打包进项目的 svg 和 iconify 图标。也可以直接使用 `unocss` 提供的图标预设。
 
-## 使用`@iconify/vue` 组件来引入在线图标
+## 使用 `<Icon />` 图标组件
 
-1. 在入口页面 `app.vue` 中初始化在线图标的 api 服务地址
-```ts
-import { addAPIProvider, disableCache } from '@iconify/vue'
-addAPIProvider('', {
-  resources: ['https://api.iconify.design'],
-})
-disableCache('all')
-```
-
-2. 在页面中引用图标组件
-```vue
-<script setup lang="ts">
-import { Icon as IconifyIcon } from '@iconify/vue'
-</script>
-
-<template>
-  <IconifyIcon icon="ep:element-plus" />
-</template>
-```
-
-## 直接使用 `<AdminIcon />` 图标组件
-
-项目注册了可以全局使用的 `<AdminIcon />` 图标组件。
+项目封装了 `<Icon />` 图标组件来方便图标的引用。
 
 ::alert{type="danger" title="特别注意"}
-因为离线图标是按需引入的，UnoCSS无法通过动态的方式解析除`.jsx`, `.tsx`, `.vue` 等以外的如 `.ts`, `.js` 文件中的图标，所以如果出现无法显示icon图标的时候，可以尝试将图标的名称添加到 `@/unocss.config.ts` 的 `safelist` 属性中：
+因为离线图标是按需引入的，UnoCSS无法通过动态的方式解析除`.jsx`, `.tsx`, `.vue` 等以外的如 `.ts`, `.js` 文件中的图标，所以如果出现无法显示icon图标的时候，可以修改 `@/unocss.config.ts` 来实现手动引入：
 ```ts{}[@/unocss.config.ts]
 export default defineConfig({
-  ...
+  // 方式 1. 添加 unocss 扫描文件类型，开发时需重启
+  content: {
+    pipeline: {
+      include: [
+        /\.(ts|vue|html)($|\?)/,
+      ]
+    }
+  },
+  // 方式 2. 添加图标名称到 safelist 中
   safelist: [
     'i-twemoji-blue-book',
     'i-twemoji-books',
     'i-twemoji-rocket',
   ],
-  ...
+  // 方式 3. 在需要引入的文件中添加扫描标识：@unocss-include
 })
 ```
 ::
-### 使用 Svg 图标
+## 使用 Svg 图标
 将下载的 `.svg` 图标放在项目 `@/assets/svg` 文件夹下，然后就可以直接在代码中引用到了。`name` 属性为 `svg-${svgFileName}`
 **输入**
 ```html
-<AdminIcon name="svg-train" class="text-2xl" />
+<Icon name="svg-train" class="text-2xl" />
 ```
 **输出**
-<AdminIcon name="svg-train" class="text-2xl" />
+<Icon name="svg-train" class="text-2xl" />
 
 **输入**
 ```html
-<AdminIcon name="svg-train" filled class="text-4xl" />
+<Icon name="svg-train" filled class="text-4xl" />
 ```
 **输出**
-<AdminIcon name="svg-train" filled class="text-4xl" />
+<Icon name="svg-train" filled class="text-4xl" />
 
 ### 使用 iconify 图标
-当 `<AdminIcon />` 图标组件的 `name` 属性为 `i-${iconifyName}` 的时候，图标将解析为 iconify 图标。
+当 `<Icon />` 图标组件的 `name` 属性为 `i-${iconifyName}` 的时候，图标将解析为 iconify 图标。
 **输入**
 ```html
-<AdminIcon name="i-twemoji-sun" class="text-2xl"></AdminIcon>
-<AdminIcon name="i-twemoji-rocket" class="text-2xl"></AdminIcon>
-<AdminIcon name="i-twemoji-blue-book" class="text-2xl"></AdminIcon>
-<AdminIcon name="i-twemoji-books" class="text-2xl"></AdminIcon>
+<Icon name="i-twemoji-sun" class="text-2xl"></Icon>
+<Icon name="i-twemoji-rocket" class="text-2xl"></Icon>
+<Icon name="i-twemoji-blue-book" class="text-2xl"></Icon>
+<Icon name="i-twemoji-books" class="text-2xl"></Icon>
 ```
 **输出**
-<AdminIcon name="i-twemoji-sun" class="text-2xl"></AdminIcon>
-<AdminIcon name="i-twemoji-rocket" class="text-2xl"></AdminIcon>
-<AdminIcon name="i-twemoji-blue-book" class="text-2xl"></AdminIcon>
-<AdminIcon name="i-twemoji-books" class="text-2xl"></AdminIcon>
+<Icon name="i-twemoji-sun" class="text-2xl"></Icon>
+<Icon name="i-twemoji-rocket" class="text-2xl"></Icon>
+<Icon name="i-twemoji-blue-book" class="text-2xl"></Icon>
+<Icon name="i-twemoji-books" class="text-2xl"></Icon>
 
-## 通过 `unocss` 和 `iconify` 使用图标
-项目预先安装了以下4套图标：
-::list{type="success"}
-- `@iconify-json/ep` ，element-plus 图标库
-- `@iconify-json/carbon` ，carbon 图标库
-- `@iconify-json/logos` ，各类 logo 图标
-- `@iconify-json/twemoji` ，twitter emoji 图标
-::
-使用的时候给`<div>` 或 `<i>` 加上 `class="i-icon-name"` 的样式即可：
+## 通过 `unocss` 和 `iconify` 来使用图标
+可以根据 `unocss` 的文档，给`<div>` 或 `<i>` 加上 `class="i-icon-name"` 的样式即可渲染出图标：
 **输入**
 ```html
 <div class="i-twemoji-sun inline-block text-2xl"></div>
@@ -97,22 +76,3 @@ export default defineConfig({
 <div class="i-twemoji-rocket inline-block text-2xl"></div>
 <div class="i-twemoji-blue-book inline-block text-2xl"></div>
 <div class="i-twemoji-books inline-block text-2xl"></div>
-
-## 通过 `<AdminIconOnline />` 使用在线图标
-
-在线图标是指在渲染时通过互联网获取的图标，没有打包和引入项目，直接使用图标名字（不用提前引入项目）。
-::alert{type="tip"}
-**`iconify`** 集成了上千种图标，都可以通过 `API` 在线获取，具体实现可以看[https://docs.iconify.design/icon-components/vue/](https://docs.iconify.design/icon-components/vue/)
-
-::
-使用方法是在 [iconify 图标集网站](https://icones.js.org/) 上找到所需的图标，直接复制到 name 属性即可：
-**输入**
-```html
-<AdminIconOnline name="vscode-icons:file-type-azurepipelines" class="text-4xl"></AdminIconOnline>
-<AdminIconOnline name="logos:steam" class="text-4xl"></AdminIconOnline>
-<AdminIconOnline name="logos:tiktok" class="text-4xl"></AdminIconOnline>
-```
-**输出**
-<AdminIconOnline name="vscode-icons:file-type-azurepipelines" class="text-4xl"></AdminIconOnline>
-<AdminIconOnline name="logos:steam" class="text-4xl"></AdminIconOnline>
-<AdminIconOnline name="logos:tiktok" class="text-4xl"></AdminIconOnline>

content/1.guide/6.icon.md

@@ -1,9 +1,7 @@
 import antfu from '@antfu/eslint-config'
 
 export default antfu(
-  {
-    unocss: true,
-  },
+  { unocss: true },
   {
     rules: {
       'unocss/order': 'error',

deploy.sh

@@ -31,7 +31,6 @@ export default defineNuxtConfig({
     '@nuxt/content',
     '@unocss/nuxt',
     '@vueuse/nuxt',
-    // '@pinia/nuxt',
   ],
 
   content: {

eslint.config.js

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "2.0.0",
   "anthor": "vampirefan",
-  "packageManager": "[email protected].19",
+  "packageManager": "[email protected].22",
   "license": "MIT",
   "engines": {
     "node": ">=18.18.0"
@@ -19,16 +19,13 @@
     "taze": "taze -wIr"
   },
   "dependencies": {
-    "element-plus": "^2.8.4",
-    "pdfobject": "^2.3.0"
+    "element-plus": "^2.8.5"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^3.7.3",
-    "@iconify/json": "^2.2.259",
-    "@nuxt/content": "^2.13.2",
-    "@pinia/nuxt": "^0.5.4",
+    "@iconify/json": "^2.2.260",
+    "@nuxt/content": "^2.13.4",
     "@types/node": "20.10.5",
-    "@types/pdfobject": "^2.2.5",
     "@unocss/eslint-plugin": "^0.63.4",
     "@unocss/nuxt": "^0.63.4",
     "@vueuse/core": "^11.1.0",

nuxt.config.ts

@@ -23,33 +23,8 @@ export default defineConfig({
     'i-ep-edit-pen',
     'i-ep-magic-stick',
     'i-ep-menu',
-    'i-logos-adobe',
-    'i-logos-astro',
-    'i-logos-chrome',
-    'i-logos-docker-icon',
-    'i-logos-element',
-    'i-logos-git-icon',
     'i-logos-gitlab',
-    'i-logos-hexo',
-    'i-logos-intellij-idea',
-    'i-logos-java',
-    'i-logos-markdown',
-    'i-logos-microsoft-icon',
-    'i-logos-mongodb-icon',
-    'i-logos-nodejs-icon',
-    'i-logos-nvidia',
-    'i-logos-openai-icon',
-    'i-logos-python',
-    'i-logos-stability-ai-icon',
-    'i-logos-tailwindcss-icon',
-    'i-logos-terminal',
-    'i-logos-typescript-icon',
-    'i-logos-ubuntu',
-    'i-logos-unocss',
-    'i-logos-visual-studio-code',
-    'i-logos-vitejs',
-    'i-logos-vue',
-    'i-logos-vueuse',
+    'i-logos-github-icon',
     'i-twemoji-beaming-face-with-smiling-eyes',
     'i-twemoji-blue-book',
     'i-twemoji-books',