blackteay/vue3-vant4-mobile
1
0
Fork 0
mirror of https://github.com/xiangshu233/vue3-vant4-mobile.git synced 2025-04-06 03:57:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: ♻️ 移除 vicons 使用 unocss 的 icons preset 以获得纯 css icon

Browse Source
This commit is contained in:
xiangshu233 2024-03-02 17:54:00 +08:00
parent facaf8e43c
commit 10115a5331
11 changed files with 55 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -41,9 +41,6 @@
"dependencies": {
"@types/lodash-es": "^4.17.12",
"@unocss/reset": "^0.58.5",
"@vicons/antd": "^0.12.0",
"@vicons/ionicons5": "^0.12.0",
"@vicons/utils": "^0.1.4",
"@vueuse/core": "^10.7.0",
"axios": "^1.4.0",
"date-fns": "^3.0.6",
@ -61,6 +58,7 @@
"@antfu/eslint-config": "^2.6.3",
"@commitlint/cli": "^18.4.3",
"@commitlint/config-conventional": "^18.4.3",
"@iconify/json": "^2.2.188",
"@types/fs-extra": "^11.0.4",
"@types/mockjs": "^1.0.10",
"@types/node": "^20.10.5",

10
pnpm-lock.yaml generated
View File

@ -67,6 +67,9 @@ devDependencies:
'@commitlint/config-conventional':
specifier: ^18.4.3
version: 18.4.3
'@iconify/json':
specifier: ^2.2.188
version: 2.2.188
'@types/fs-extra':
specifier: ^11.0.4
version: 11.0.4
@ -1292,6 +1295,13 @@ packages:
resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
dev: true
/@iconify/json@2.2.188:
resolution: {integrity: sha512-gsJwZ60Vb5IrtjYu+Al4qMaML9ZKUnop6Gi0537ZcA6nEhe3Nb58WH4c6b1+mXOHwOkFlLA8AFBXJUHY5nKMdA==}
dependencies:
'@iconify/types': 2.0.0
pathe: 1.1.2
dev: true
/@iconify/types@2.0.0:
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
dev: true

5
src/layout/index.vue
View File

@ -23,9 +23,10 @@
:key="menu.name"
replace
:to="menu.path"
:icon="(menu.meta?.icon as string)"
>
{{ menu.meta?.title }}
<template #icon>
<i :class="menu.meta?.icon" />
</template>
</van-tabbar-item>
</van-tabbar>
</div>

8
src/router/modules.ts
View File

@ -10,7 +10,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
component: Layout,
meta: {
title: '主控台',
icon: 'wap-home',
icon: 'i-simple-icons:atlassian',
},
children: [
{
@ -29,8 +29,8 @@ const routeModuleList: Array<RouteRecordRaw> = [
redirect: '/message/index',
component: Layout,
meta: {
title: '消息',
icon: 'chat',
title: '图表',
icon: 'i-simple-icons:soundcharts',
},
children: [
{
@ -50,7 +50,7 @@ const routeModuleList: Array<RouteRecordRaw> = [
component: Layout,
meta: {
title: '我的',
icon: 'manager',
icon: 'i-simple-icons:docsify',
},
children: [
{

1
src/views/dashboard/index.vue
View File

@ -5,7 +5,6 @@
<div class="text-darkBlue dark:text-garyWhite mb-4 mt-12 text-center text-2xl font-black">
{{ title }}
</div>
<div class="mb-6 mt-4 w-full">
<van-swipe class="h-30" :autoplay="3000" :indicator-color="designStore.appTheme">
<van-swipe-item

14
src/views/login/ForgetPasswordForm.vue
View File

@ -8,9 +8,7 @@
:rules="getFormRules.username"
>
<template #left-icon>
<Icon>
<UserOutlined />
</Icon>
<i class="i-ph:user-bold mr-2 text-lg" />
</template>
</van-field>
@ -22,9 +20,7 @@
:rules="getFormRules.mobile"
>
<template #left-icon>
<Icon>
<MobileOutlined />
</Icon>
<i class="i-ic:twotone-smartphone mr-2 text-lg" />
</template>
</van-field>
@ -37,9 +33,7 @@
:rules="getFormRules.sms"
>
<template #left-icon>
<Icon>
<EditOutlined />
</Icon>
<i class="i-material-symbols:edit-square-outline-rounded mr-2 text-lg" />
</template>
<template #button>
<van-button size="small" type="primary">
@ -72,8 +66,6 @@
<script setup lang="ts">
import { computed, reactive, ref, unref } from 'vue'
import type { FormInstance } from 'vant'
import { Icon } from '@vicons/utils'
import { EditOutlined, MobileOutlined, UserOutlined } from '@vicons/antd'
import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
const { handleBackLogin, getLoginState } = useLoginState()

18
src/views/login/LoginForm.vue
View File

@ -8,9 +8,7 @@
:rules="getFormRules.username"
>
<template #left-icon>
<Icon>
<UserOutlined />
</Icon>
<i class="i-ph:user-bold mr-2 text-lg" />
</template>
</van-field>
<van-field
@ -23,17 +21,11 @@
@click-right-icon="switchPassType = !switchPassType"
>
<template #left-icon>
<Icon>
<LockOutlined />
</Icon>
<i class="i-iconamoon:lock-bold mr-2 text-lg" />
</template>
<template #right-icon>
<Icon v-if="switchPassType">
<EyeInvisibleOutlined />
</Icon>
<Icon v-else>
<EyeOutlined />
</Icon>
<i v-if="switchPassType" class="i-mdi:eye-outline mr-2 text-lg" />
<i v-else class="i-mdi:eye-off mr-2 text-lg" />
</template>
</van-field>
@ -71,8 +63,6 @@ import { computed, onMounted, reactive, ref, unref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showFailToast, showLoadingToast, showSuccessToast } from 'vant'
import type { FormInstance } from 'vant'
import { Icon } from '@vicons/utils'
import { EyeInvisibleOutlined, EyeOutlined, LockOutlined, UserOutlined } from '@vicons/antd'
import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
import { useUserStore } from '@/store/modules/user'
import { ResultEnum } from '@/enums/httpEnum'

4
src/views/login/LoginTitle.vue
View File

@ -1,9 +1,9 @@
<template>
<div class="flex flex-col items-center justify-center">
<div class="logo enter-y mb-2 mt-8">
<div class="logo enter-y mb-8 mt-8">
<SvgIcon class="!h-30 !w-30" name="logo" />
</div>
<div class="text-darkBlue dark:text-garyWhite enter-y mb-8 text-2xl font-black">
<div class="text-darkBlue dark:text-garyWhite enter-y mb-12 text-2xl font-black">
{{ title }}
</div>
</div>

46
src/views/login/RegisterForm.vue
View File

@ -9,9 +9,7 @@
:rules="getFormRules.username"
>
<template #left-icon>
<Icon>
<UserOutlined />
</Icon>
<i class="i-ph:user-bold mr-2 text-lg" />
</template>
</van-field>
@ -23,9 +21,7 @@
:rules="getFormRules.mobile"
>
<template #left-icon>
<Icon>
<MobileOutlined />
</Icon>
<i class="i-ic:twotone-smartphone mr-2 text-lg" />
</template>
</van-field>
@ -38,9 +34,7 @@
:rules="getFormRules.sms"
>
<template #left-icon>
<Icon>
<EditOutlined />
</Icon>
<i class="i-material-symbols:edit-square-outline-rounded mr-2 text-lg" />
</template>
<template #button>
<van-button size="small" type="primary">
@ -59,17 +53,11 @@
@click-right-icon="switchPassType = !switchPassType"
>
<template #left-icon>
<Icon>
<LockOutlined />
</Icon>
<i class="i-iconamoon:lock-bold mr-2 text-lg" />
</template>
<template #right-icon>
<Icon v-if="switchPassType">
<EyeInvisibleOutlined />
</Icon>
<Icon v-else>
<EyeOutlined />
</Icon>
<i v-if="switchPassType" class="i-mdi:eye-outline mr-2 text-lg" />
<i v-else class="i-mdi:eye-off mr-2 text-lg" />
</template>
</van-field>
@ -83,17 +71,11 @@
@click-right-icon="switchConfirmPassType = !switchConfirmPassType"
>
<template #left-icon>
<Icon>
<LockOutlined />
</Icon>
<i class="i-iconamoon:lock-bold mr-2 text-lg" />
</template>
<template #right-icon>
<Icon v-if="switchConfirmPassType">
<EyeInvisibleOutlined />
</Icon>
<Icon v-else>
<EyeOutlined />
</Icon>
<i v-if="switchConfirmPassType" class="i-mdi:eye-outline mr-2 text-lg" />
<i v-else class="i-mdi:eye-off mr-2 text-lg" />
</template>
</van-field>
@ -135,15 +117,7 @@
<script setup lang="ts">
import { computed, reactive, ref, unref } from 'vue'
import type { FormInstance } from 'vant'
import { Icon } from '@vicons/utils'
import {
EditOutlined,
EyeInvisibleOutlined,
EyeOutlined,
LockOutlined,
MobileOutlined,
UserOutlined,
} from '@vicons/antd'
import { LoginStateEnum, useFormRules, useLoginState } from './useLogin'
const { handleBackLogin, getLoginState } = useLoginState()

29
src/views/my/index.vue
View File

@ -22,41 +22,31 @@
<van-cell :border="false" title="个人信息" is-link to="/editUserInfo">
<template #icon>
<Icon>
<IdcardFilled />
</Icon>
<i class="i-mingcute:idcard-fill mr-2 text-xl" />
</template>
</van-cell>
<van-cell :border="false" title="账号与安全" is-link to="/accountSetting">
<template #icon>
<Icon>
<Person />
</Icon>
<i class="i-material-symbols:account-box mr-2 text-xl" />
</template>
</van-cell>
<van-cell :border="false" title="主题设置" is-link to="/themeSetting">
<template #icon>
<Icon>
<ColorPalette />
</Icon>
<i class="i-material-symbols:palette mr-2 text-xl" />
</template>
</van-cell>
<van-cell :border="false" title="隐私政策" is-link>
<template #icon>
<Icon>
<DocumentText />
</Icon>
<i class="i-material-symbols:list-alt-rounded mr-2 text-xl" />
</template>
</van-cell>
<van-cell :border="false" title="退出登录" is-link @click="showLogoutAction = true">
<template #icon>
<Icon>
<LogOut />
</Icon>
<i class="i-solar:logout-3-bold mr-2 text-xl" />
</template>
</van-cell>
@ -74,9 +64,6 @@
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { Icon } from '@vicons/utils'
import { IdcardFilled } from '@vicons/antd'
import { ColorPalette, DocumentText, LogOut, Person } from '@vicons/ionicons5'
import { showToast } from 'vant'
import { useUserStore } from '@/store/modules/user'
@ -102,7 +89,7 @@ const getUserCoverBg = computed(() => {
</script>
<style lang="less" scoped>
.my-bg {
.my-bg {
clip-path: inset(0 -55% 0 -55% round 0 0 100% 100%);
background-size: cover;
@ -125,9 +112,5 @@ const getUserCoverBg = computed(() => {
&:active {
background-color: var(--van-cell-active-color);
}
.xicon {
margin-right: 10px;
}
}
</style>

13
uno.config.ts
View File

@ -26,7 +26,7 @@ export default defineConfig({
// 图标预设: https://unocss.dev/presets/icons
presetIcons({
cdn: 'https://esm.sh/',
// cdn: 'https://esm.sh/',
extraProperties: {
'display': 'inline-block',
'vertical-align': 'middle',
@ -68,4 +68,15 @@ export default defineConfig({
'text-overflow': 'overflow-hidden whitespace-nowrap text-ellipsis', // 文本溢出显示省略号
'text-break': 'whitespace-normal break-all break-words', // 文本溢出换行
},
// 由于 UnoCSS 在构建时工作，这意味着只会生成静态呈现的 icon 并将其发送到你的组件中
// 通过模板字符串 :class="menu.meta?.icon" 来动态生成 CSS 类名。
// 这个类名是在运行时计算的，UnoCSS 在构建时无法知道 menu.meta?.icon 的具体值，
// 因此无法生成对应的 CSS。为了解决这个问题，你可以使用 UnoCSS 的 safelist 选项来指定一些始终需要生成的 CSS 类。
// https://unocss.dev/guide/advanced#safelist
safelist: [
'i-simple-icons:atlassian',
'i-simple-icons:soundcharts',
'i-simple-icons:docsify',
],
})