github/basic
1
0
Fork 2
mirror of https://github.com/fantastic-admin/basic.git synced 2026-10-07 13:28:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor!: 移除 el-icon 使用

Browse Source
This commit is contained in:
Hooray Hu
2023-06-03 17:24:06 +08:00
parent 0f347b6d72
commit 1a8529fd99
19 changed files with 115 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FileUpload/index.vue
+1 -3
View File
@@ -73,9 +73,7 @@ const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
drag
>
<div class="slot">
<el-icon class="el-icon--upload">
<svg-icon name="ep:upload-filled" />
</el-icon>
<svg-icon name="ep:upload-filled" class="el-icon--upload" />
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
</div>
src/components/ImagePreview/index.vue
+1 -3
View File
@@ -28,9 +28,7 @@ const realHeight = computed(() => {
<el-image :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
<template #error>
<div class="image-slot">
<el-icon>
<svg-icon name="image-load-fail" />
</el-icon>
<svg-icon name="image-load-fail" />
</div>
</template>
</el-image>
src/components/ImageUpload/index.vue
+4 -10
View File
@@ -104,9 +104,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
<el-image v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
<template #error>
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
<el-icon>
<svg-icon name="ep:plus" />
</el-icon>
<svg-icon name="ep:plus" />
</div>
</template>
</el-image>
@@ -115,14 +113,10 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
<div class="mask">
<div class="actions">
<span title="预览" @click.stop="preview">
<el-icon>
<svg-icon name="ep:zoom-in" />
</el-icon>
<svg-icon name="ep:zoom-in" />
</span>
<span title="移除" @click.stop="remove">
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
<svg-icon name="ep:delete" />
</span>
</div>
</div>
@@ -185,7 +179,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
transform: scale(1.5);
}
.el-icon {
.icon {
font-size: 24px;
}
}
src/components/ImagesUpload/index.vue
+6 -16
View File
@@ -112,24 +112,16 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
<div class="mask">
<div class="actions">
<span title="预览" @click="preview(index)">
<el-icon>
<svg-icon name="ep:zoom-in" />
</el-icon>
<svg-icon name="ep:zoom-in" />
</span>
<span title="移除" @click="remove(index)">
<el-icon>
<svg-icon name="ep:delete" />
</el-icon>
<svg-icon name="ep:delete" />
</span>
<span v-show="url.length > 1" title="左移" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
<el-icon>
<svg-icon name="ep:back" />
</el-icon>
<svg-icon name="ep:back" />
</span>
<span v-show="url.length > 1" title="右移" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
<el-icon>
<svg-icon name="ep:right" />
</el-icon>
<svg-icon name="ep:right" />
</span>
</div>
</div>
@@ -148,9 +140,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
class="images-upload"
>
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
<el-icon>
<svg-icon name="ep:plus" />
</el-icon>
<svg-icon name="ep:plus" />
</div>
<div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
<el-image :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
@@ -218,7 +208,7 @@ const onSuccess: UploadProps['onSuccess'] = (res) => {
transform: scale(1.5);
}
.el-icon {
.icon {
font-size: 24px;
}
}
src/components/PageMain/index.vue
+1 -3
View File
@@ -40,9 +40,7 @@ function unCollaspe() {
</div>
<slot />
<div v-if="collaspeData" class="collaspe" title="展开" @click="unCollaspe">
<el-icon>
<svg-icon name="ep:arrow-down" />
</el-icon>
<svg-icon name="ep:arrow-down" />
</div>
</div>
</template>
src/components/SearchBar/index.vue
+1 -3
View File
@@ -44,9 +44,7 @@ function toggle() {
<div v-if="showToggle" class="toggle">
<el-button text size="small" @click="toggle">
<template #icon>
<el-icon>
<svg-icon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
</el-icon>
<svg-icon :name="isFold ? 'ep:caret-bottom' : 'ep:caret-top' " />
</template>
{{ isFold ? '展开' : '收起' }}
</el-button>
src/components/SvgIcon/index.vue
+45 -25
View File
@@ -1,48 +1,68 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue'
const props = withDefaults(
defineProps<{
name: string
flip?: 'horizontal' | 'vertical' | 'both' | ''
rotate?: number
}>(),
{
flip: '',
rotate: 0,
},
)
const props = defineProps<{
name: string
flip?: 'horizontal' | 'vertical' | 'both'
rotate?: number
color?: string
size?: string | number
}>()
defineOptions({
name: 'SvgIcon',
})
const transformStyle = computed(() => {
const style = []
if (props.flip !== '') {
const style = computed(() => {
const transform = []
if (props.flip) {
switch (props.flip) {
case 'horizontal':
style.push('rotateY(180deg)')
transform.push('rotateY(180deg)')
break
case 'vertical':
style.push('rotateX(180deg)')
transform.push('rotateX(180deg)')
break
case 'both':
style.push('rotateX(180deg)')
style.push('rotateY(180deg)')
transform.push('rotateX(180deg)')
transform.push('rotateY(180deg)')
break
}
}
if (props.rotate !== 0) {
style.push(`rotate(${props.rotate}deg)`)
if (props.rotate) {
transform.push(`rotate(${props.rotate % 360}deg)`)
}
return {
...(props.color && { color: props.color }),
...(props.size && { fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size }),
...(transform.length && { transform: transform.join(' ') }),
}
return `transform: ${style.join(' ')};`
})
</script>
<template>
<Icon v-if="name.indexOf('ep:') === 0" :icon="name" :style="transformStyle" />
<svg v-else :style="transformStyle" aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>
<i class="icon" :style="style">
<Icon v-if="name.indexOf('ep:') === 0" :icon="name" />
<svg v-else aria-hidden="true">
<use :xlink:href="`#icon-${name}`" />
</svg>
</i>
</template>
<style lang="scss" scoped>
.icon {
height: 1em;
width: 1em;
line-height: 1em;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
fill: currentcolor;
svg {
height: 1em;
width: 1em;
}
}
</style>
src/components/Trend/index.vue
+3 -5
View File
@@ -33,9 +33,7 @@ const isUp = computed(() => {
<span v-if="prefix" class="prefix">{{ prefix }}</span>
<span class="text">{{ value }}</span>
<span v-if="suffix" class="suffix">{{ suffix }}</span>
<el-icon>
<svg-icon name="ep:caret-top" />
</el-icon>
<svg-icon name="ep:caret-top" />
</div>
</template>
@@ -52,12 +50,12 @@ const isUp = computed(() => {
&.down {
color: var(--el-color-danger);
.el-icon {
.icon {
transform: rotate(180deg);
}
}
.el-icon {
.icon {
margin-left: 5px;
transition: transform 0.3s;
}
src/layouts/components/AppSetting/index.vue
+15 -45
View File
@@ -51,9 +51,7 @@ function handleCopy() {
<el-divider>颜色主题</el-divider>
<div class="color-scheme">
<div class="switch" :class="settingsStore.settings.app.colorScheme" @click="settingsStore.settings.app.colorScheme = settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark'">
<el-icon class="icon">
<svg-icon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
</el-icon>
<svg-icon :name="settingsStore.settings.app.colorScheme === 'light' ? 'ep:sunny' : 'ep:moon'" />
</div>
</div>
<el-divider v-if="settingsStore.mode === 'pc'">
@@ -63,25 +61,19 @@ function handleCopy() {
<el-tooltip content="侧边栏模式（含主导航）" placement="top" :show-after="500">
<div class="mode mode-side" :class="{ active: settingsStore.settings.menu.menuMode === 'side' }" @click="settingsStore.settings.menu.menuMode = 'side'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
<svg-icon name="ep:check" />
</div>
</el-tooltip>
<el-tooltip content="顶部模式" placement="top" :show-after="500">
<div class="mode mode-head" :class="{ active: settingsStore.settings.menu.menuMode === 'head' }" @click="settingsStore.settings.menu.menuMode = 'head'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
<svg-icon name="ep:check" />
</div>
</el-tooltip>
<el-tooltip content="侧边栏模式（不含主导航）" placement="top" :show-after="500">
<div class="mode mode-single" :class="{ active: settingsStore.settings.menu.menuMode === 'single' }" @click="settingsStore.settings.menu.menuMode = 'single'">
<div class="mode-container" />
<el-icon>
<svg-icon name="ep:check" />
</el-icon>
<svg-icon name="ep:check" />
</div>
</el-tooltip>
</div>
@@ -90,9 +82,7 @@ function handleCopy() {
<div class="label">
主导航切换跳转
<el-tooltip content="开启该功能后，切换主导航时，页面自动跳转至该主导航下，次导航里第一个导航" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.menu.switchMainMenuAndPageJump" :disabled="['single'].includes(settingsStore.settings.menu.menuMode)" />
@@ -101,9 +91,7 @@ function handleCopy() {
<div class="label">
次导航保持展开一个
<el-tooltip content="开启该功能后，次导航只保持单个菜单的展开" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.menu.subMenuUniqueOpened" />
@@ -148,9 +136,7 @@ function handleCopy() {
<div class="label">
全屏
<el-tooltip content="该功能使用场景极少，用户习惯于通过窗口“最大化”功能来扩大显示区域，以显示更多内容，并且使用 F11 键也可以进入全屏效果" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.toolbar.enableFullscreen" />
@@ -159,9 +145,7 @@ function handleCopy() {
<div class="label">
页面刷新
<el-tooltip content="开启时会阻止原生 F5 键刷新功能，并采用框架提供的刷新模式进行页面刷新" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.toolbar.enablePageReload" />
@@ -170,9 +154,7 @@ function handleCopy() {
<div class="label">
颜色主题
<el-tooltip content="开启后可在明亮/暗黑模式中切换" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.toolbar.enableColorScheme" />
@@ -191,9 +173,7 @@ function handleCopy() {
<div class="label">
是否启用
<el-tooltip content="对导航进行快捷搜索" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.navSearch.enable" />
@@ -240,9 +220,7 @@ function handleCopy() {
<div class="label">
是否开启
<el-tooltip content="该功能开启时，登录成功默认进入主页，反之则默认进入导航栏里第一个导航页面" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.home.enable" />
@@ -258,9 +236,7 @@ function handleCopy() {
<div class="label">
组件尺寸
<el-tooltip content="全局设置 Element Plus 组件的默认尺寸大小" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-radio-group v-model="settingsStore.settings.app.elementSize" size="small">
@@ -285,9 +261,7 @@ function handleCopy() {
<div class="label">
载入进度条
<el-tooltip content="该功能开启时，跳转路由会看到页面顶部有进度条" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.app.enableProgress" />
@@ -296,9 +270,7 @@ function handleCopy() {
<div class="label">
动态标题
<el-tooltip content="该功能开启时，页面标题会显示当前路由标题，格式为“页面标题 - 网站名称”；关闭时则显示网站名称，网站名称在项目根目录下 .env.* 文件里配置" placement="top">
<el-icon>
<svg-icon name="ep:question-filled" />
</el-icon>
<svg-icon name="ep:question-filled" />
</el-tooltip>
</div>
<el-switch v-model="settingsStore.settings.app.enableDynamicTitle" />
@@ -306,9 +278,7 @@ function handleCopy() {
<template v-if="isSupported" #footer>
<el-button type="primary" @click="handleCopy">
<template #icon>
<el-icon>
<svg-icon name="ep:document-copy" />
</el-icon>
<svg-icon name="ep:document-copy" />
</template>
复制配置
</el-button>
src/layouts/components/Header/index.vue
+3 -5
View File
@@ -34,9 +34,7 @@ function handlerMouserScroll(event: WheelEvent) {
<template v-for="(item, index) in menuStore.allMenus" :key="index">
<div v-if="item.children && item.children.length !== 0" class="item-container" :class="{ active: index === menuStore.actived }">
<div class="item" @click="switchTo(index)">
<el-icon v-if="item.meta?.icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<svg-icon v-if="item.meta?.icon" :name="item.meta.icon" />
<span v-if="item.meta?.title">{{ item.meta.title }}</span>
</div>
</div>
@@ -147,7 +145,7 @@ header {
background-color: var(--g-header-menu-hover-bg);
}
.el-icon {
.icon {
font-size: 24px;
vertical-align: middle;
}
@@ -171,7 +169,7 @@ header {
:deep(.tools) {
padding: 0;
.buttons .item .el-icon {
.buttons .item .icon {
color: var(--g-header-color);
}
src/layouts/components/MainSidebar/index.vue
+2 -4
View File
@@ -25,9 +25,7 @@ const { switchTo } = useMenu()
active: index === menuStore.actived,
}" :title="item.meta?.title ?? '[ 无标题 ]'" @click="switchTo(index)"
>
<el-icon v-if="item.meta?.icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<svg-icon v-if="item.meta?.icon" :name="item.meta.icon" />
<span>{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
</div>
</template>
@@ -89,7 +87,7 @@ const { switchTo } = useMenu()
background-color: var(--g-main-sidebar-menu-active-bg);
}
.el-icon {
.icon {
margin: 0 auto;
font-size: 24px;
}
src/layouts/components/Search/index.vue
+6 -18
View File
@@ -246,9 +246,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
<div class="search-box" @click.stop>
<el-input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" clearable @keydown.esc="eventBus.emit('global-search-toggle')" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
<template #prefix>
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
<svg-icon name="ep:search" />
</template>
</el-input>
<div v-if="settingsStore.mode === 'pc'" class="tips">
@@ -262,14 +260,10 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
</div>
<div class="tip">
<el-tag type="info" size="large">
<el-icon>
<svg-icon name="search-up" />
</el-icon>
<svg-icon name="search-up" />
</el-tag>
<el-tag type="info" size="large">
<el-icon>
<svg-icon name="search-down" />
</el-icon>
<svg-icon name="search-down" />
</el-tag>
<el-tag type="info" size="large">
切换搜索结果
@@ -277,9 +271,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
</div>
<div class="tip">
<el-tag type="info" size="large">
<el-icon>
<svg-icon name="search-enter" />
</el-icon>
<svg-icon name="search-enter" />
</el-tag>
<el-tag type="info" size="large">
访问页面
@@ -297,9 +289,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
</div>
<div ref="searchResultRef" class="result">
<a v-for="(item, index) in resultList" :key="item.path" :ref="setSearchResultItemRef" class="item" :class="{ actived: index === actived }" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
<el-icon class="icon">
<svg-icon v-if="item.icon" :name="item.icon" />
</el-icon>
<svg-icon v-if="item.icon" :name="item.icon" />
<div class="info">
<div class="title">
{{ item.title ?? '[ 无标题 ]' }}
@@ -307,9 +297,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
<div class="breadcrumb">
<span v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex">
{{ bc ?? '[ 无标题 ]' }}
<el-icon>
<svg-icon name="ep:arrow-right" />
</el-icon>
<svg-icon name="ep:arrow-right" />
</span>
</div>
<div class="path">{{ item.path }}</div>
src/layouts/components/SidebarItem/index.vue
+2 -6
View File
@@ -38,18 +38,14 @@ const hasChildren = computed(() => {
<router-link v-if="!hasChildren" v-slot="{ href, navigate, isActive, isExactActive }" custom :to="resolveRoutePath(basePath, item.path)">
<a :href="item.meta?.link ? item.meta.link : href" :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']" :target="item.meta?.link ? '_blank' : '_self'" @click="navigate">
<el-menu-item :title="item.meta?.title ?? '[ 无标题 ]'" :index="resolveRoutePath(basePath, item.path || '')">
<el-icon v-if="item.meta?.icon" class="title-icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<svg-icon v-if="item.meta?.icon" :name="item.meta.icon" class="title-icon" />
<span class="title">{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
</el-menu-item>
</a>
</router-link>
<el-sub-menu v-else :title="item.meta?.title ?? '[ 无标题 ]'" :index="settingsStore.settings.app.routeBaseOn !== 'filesystem' ? resolveRoutePath(basePath, item.path) : JSON.stringify(item)">
<template #title>
<el-icon v-if="item.meta?.icon" class="title-icon">
<svg-icon :name="item.meta.icon" />
</el-icon>
<svg-icon v-if="item.meta?.icon" :name="item.meta.icon" class="title-icon" />
<span class="title">{{ item.meta?.title ?? '[ 无标题 ]' }}</span>
</template>
<template v-for="route in (item.children as Menu.recordRaw[])">
src/layouts/components/Tools/index.vue
+8 -20
View File
@@ -42,38 +42,26 @@ function userCommand(command: 'home' | 'setting' | 'hotkeys' | 'logout') {
<div class="tools">
<div class="buttons">
<span v-if="settingsStore.settings.navSearch.enable" class="item" @click="eventBus.emit('global-search-toggle')">
<el-icon>
<svg-icon name="ep:search" />
</el-icon>
<svg-icon name="ep:search" />
</span>
<span v-if="settingsStore.mode === 'pc' && settingsStore.settings.toolbar.enableFullscreen" class="item" @click="toggle">
<el-icon>
<svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
</el-icon>
<svg-icon :name="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
</span>
<span v-if="settingsStore.settings.toolbar.enablePageReload" class="item" @click="mainPage.reload()">
<el-icon>
<svg-icon name="ep:refresh-right" />
</el-icon>
<svg-icon name="ep:refresh-right" />
</span>
<span v-if="settingsStore.settings.toolbar.enableColorScheme" class="item" @click="settingsStore.setColorScheme(settingsStore.settings.app.colorScheme === 'dark' ? 'light' : 'dark')">
<el-icon>
<svg-icon v-show="settingsStore.settings.app.colorScheme === 'light'" name="ep:sunny" />
<svg-icon v-show="settingsStore.settings.app.colorScheme === 'dark'" name="ep:moon" />
</el-icon>
<svg-icon v-show="settingsStore.settings.app.colorScheme === 'light'" name="ep:sunny" />
<svg-icon v-show="settingsStore.settings.app.colorScheme === 'dark'" name="ep:moon" />
</span>
</div>
<el-dropdown class="user-container" size="default" @command="userCommand">
<div class="user-wrapper">
<el-avatar size="small">
<el-icon>
<svg-icon name="ep:user-filled" />
</el-icon>
<svg-icon name="ep:user-filled" />
</el-avatar>
{{ userStore.account }}
<el-icon>
<svg-icon name="ep:caret-bottom" />
</el-icon>
<svg-icon name="ep:caret-bottom" />
</div>
<template #dropdown>
<el-dropdown-menu class="user-dropdown">
@@ -114,7 +102,7 @@ function userCommand(command: 'home' | 'setting' | 'hotkeys' | 'logout') {
cursor: pointer;
vertical-align: middle;
.el-icon {
.icon {
color: var(--el-text-color-primary);
transition: var(--el-transition-color);
}
src/layouts/components/Topbar/index.vue
+4 -6
View File
@@ -64,9 +64,7 @@ function pathCompile(path: string) {
>
<div class="left-box">
<div v-if="enableSubMenuCollapseButton" class="sidebar-collapse" :class="{ 'is-collapse': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
<el-icon>
<svg-icon name="toolbar-collapse" />
</el-icon>
<svg-icon name="toolbar-collapse" />
</div>
<el-breadcrumb v-if="settingsStore.settings.breadcrumb.enable && settingsStore.mode === 'pc' && settingsStore.settings.app.routeBaseOn !== 'filesystem'">
<transition-group name="breadcrumb">
@@ -119,16 +117,16 @@ function pathCompile(path: string) {
height: 50px;
cursor: pointer;
.el-icon {
.icon {
color: var(--el-text-color-primary);
transition: var(--el-transition-color), var(--el-transition-md-fade);
}
&:hover .el-icon {
&:hover .icon {
color: var(--el-color-primary);
}
&.is-collapse .el-icon {
&.is-collapse .icon {
transform: rotateZ(-180deg);
}
src/layouts/components/views/link.vue
+1 -3
View File
@@ -23,9 +23,7 @@ function open() {
</div>
<el-button type="primary" plain round @click="open">
<template #icon>
<el-icon>
<svg-icon name="ep:link" />
</el-icon>
<svg-icon name="ep:link" />
</template>
立即访问
</el-button>
src/layouts/index.vue
+2 -4
View File
@@ -95,9 +95,7 @@ onUnmounted(() => {
<Search />
<HotkeysIntro />
<div v-if="settingsStore.settings.app.enableAppSetting">
<el-icon class="app-setting" @click="eventBus.emit('global-app-setting-toggle')">
<svg-icon name="ep:setting" />
</el-icon>
<svg-icon name="ep:setting" class="app-setting" @click="eventBus.emit('global-app-setting-toggle')" />
<AppSetting />
</div>
</div>
@@ -247,7 +245,7 @@ header:not(.header-leave-active) + .wrapper {
background-color: var(--el-color-primary);
cursor: pointer;
svg {
:deep(svg) {
animation: rotate 5s linear infinite;
}
src/views/index.vue
+1 -3
View File
@@ -67,9 +67,7 @@ const oneStepAdminInfo = ref({
<el-dropdown>
<el-button type="primary" size="large">
代码仓库
<el-icon class="el-icon--right">
<svg-icon name="ep:arrow-down" />
</el-icon>
<svg-icon name="ep:arrow-down" class="el-icon--right" />
</el-button>
<template #dropdown>
<el-dropdown-menu>
src/views/login.vue
+9 -27
View File
@@ -165,18 +165,14 @@ function testAccount(account: string) {
<el-form-item prop="account">
<el-input v-model="loginForm.account" placeholder="用户名" text tabindex="1" autocomplete="on">
<template #prefix>
<el-icon>
<svg-icon name="ep:user" />
</el-icon>
<svg-icon name="ep:user" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" placeholder="密码" tabindex="2" autocomplete="on" show-password @keyup.enter="handleLogin">
<template #prefix>
<el-icon>
<svg-icon name="ep:lock" />
</el-icon>
<svg-icon name="ep:lock" />
</template>
</el-input>
</el-form-item>
@@ -218,18 +214,14 @@ function testAccount(account: string) {
<el-form-item prop="account">
<el-input v-model="registerForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
<template #prefix>
<el-icon>
<svg-icon name="ep:user" />
</el-icon>
<svg-icon name="ep:user" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-input v-model="registerForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
<template #prefix>
<el-icon>
<svg-icon name="ep:key" />
</el-icon>
<svg-icon name="ep:key" />
</template>
<template #append>
<el-button>发送验证码</el-button>
@@ -239,18 +231,14 @@ function testAccount(account: string) {
<el-form-item prop="password">
<el-input v-model="registerForm.password" type="password" placeholder="密码" tabindex="3" autocomplete="on" show-password>
<template #prefix>
<el-icon>
<svg-icon name="ep:lock" />
</el-icon>
<svg-icon name="ep:lock" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="checkPassword">
<el-input v-model="registerForm.checkPassword" type="password" placeholder="确认密码" tabindex="4" autocomplete="on" show-password>
<template #prefix>
<el-icon>
<svg-icon name="ep:lock" />
</el-icon>
<svg-icon name="ep:lock" />
</template>
</el-input>
</el-form-item>
@@ -275,18 +263,14 @@ function testAccount(account: string) {
<el-form-item prop="account">
<el-input v-model="resetForm.account" placeholder="用户名" tabindex="1" autocomplete="on">
<template #prefix>
<el-icon>
<svg-icon name="ep:user" />
</el-icon>
<svg-icon name="ep:user" />
</template>
</el-input>
</el-form-item>
<el-form-item prop="captcha">
<el-input v-model="resetForm.captcha" placeholder="验证码" tabindex="2" autocomplete="on">
<template #prefix>
<el-icon>
<svg-icon name="ep:key" />
</el-icon>
<svg-icon name="ep:key" />
</template>
<template #append>
<el-button>发送验证码</el-button>
@@ -296,9 +280,7 @@ function testAccount(account: string) {
<el-form-item prop="newPassword">
<el-input v-model="resetForm.newPassword" type="password" placeholder="新密码" tabindex="3" autocomplete="on" show-password>
<template #prefix>
<el-icon>
<svg-icon name="ep:lock" />
</el-icon>
<svg-icon name="ep:lock" />
</template>
</el-input>
</el-form-item>