mirror of
https://github.com/un-pany/v3-admin-vite.git
synced 2025-04-21 19:39:19 +08:00
Compare commits
10 Commits
v5.0.0-bet
...
main
Author | SHA1 | Date | |
---|---|---|---|
|
4c2e01e320 | ||
|
ce9918b21a | ||
|
f314c04a59 | ||
|
8d3b688a5f | ||
|
138def830f | ||
|
546d29c39b | ||
|
cf24e82e53 | ||
|
5dcd7105c0 | ||
|
7cca118cfd | ||
|
97d1e288a9 |
21
README.md
21
README.md
@ -27,6 +27,9 @@ V3 Admin Vite is a well-crafted backend management system template, built with p
|
|||||||
> [!TIP]
|
> [!TIP]
|
||||||
> Paid services are officially launched! If you don’t want to do it yourself but want to remove TS or other modules, try the lazy package! [Click to check it out](https://github.com/un-pany/v3-admin-vite/issues/225)
|
> Paid services are officially launched! If you don’t want to do it yourself but want to remove TS or other modules, try the lazy package! [Click to check it out](https://github.com/un-pany/v3-admin-vite/issues/225)
|
||||||
|
|
||||||
|
> [!TIP]
|
||||||
|
> If you have mobile web app needs, try the new open-source template. [MobVue](https://github.com/un-pany/mobvue)
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
@ -133,21 +136,23 @@ pnpm test
|
|||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
**Online Preview**:[github-pages](https://un-pany.github.io/v3-admin-vite)
|
**Online Preview**: [github-pages](https://un-pany.github.io/v3-admin-vite)
|
||||||
|
|
||||||
**Chinese Documentation**:[link](https://juejin.cn/post/7089377403717287972)
|
**Chinese Documentation**: [link](https://juejin.cn/post/7089377403717287972)
|
||||||
|
|
||||||
**Zero to Hero Tutorial**:[link](https://juejin.cn/column/7207659644487139387)
|
**Zero to Hero Tutorial**: [link](https://juejin.cn/column/7207659644487139387)
|
||||||
|
|
||||||
|
**Mobile Web App**: [mobvue](https://github.com/un-pany/mobvue)
|
||||||
|
|
||||||
**Electron Desktop Version**: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
|
**Electron Desktop Version**: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
|
||||||
|
|
||||||
**Chinese Repository**:[gitee](https://gitee.com/un-pany/v3-admin-vite)
|
**Chinese Repository**: [gitee](https://gitee.com/un-pany/v3-admin-vite)
|
||||||
|
|
||||||
**Optional Group**:[check how to join](https://github.com/un-pany/v3-admin-vite/issues/191)
|
**Optional Group**: [check how to join](https://github.com/un-pany/v3-admin-vite/issues/191)
|
||||||
|
|
||||||
**Donations**:[buy a coffee for the author](https://github.com/un-pany/v3-admin-vite/issues/69)
|
**Donations**: [buy a coffee for the author](https://github.com/un-pany/v3-admin-vite/issues/69)
|
||||||
|
|
||||||
**Releases & Changelog**:[releases](https://github.com/un-pany/v3-admin-vite/releases)
|
**Releases & Changelog**: [releases](https://github.com/un-pany/v3-admin-vite/releases)
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
@ -199,7 +204,7 @@ pnpm test
|
|||||||
|
|
||||||
**CSS Variables**: Primarily controls layout and color in the project
|
**CSS Variables**: Primarily controls layout and color in the project
|
||||||
|
|
||||||
**ESlint**: Code linting and formatting
|
**ESLint**: Code linting and formatting
|
||||||
|
|
||||||
**Axios**: Sends network requests
|
**Axios**: Sends network requests
|
||||||
|
|
||||||
|
@ -27,6 +27,9 @@ V3 Admin Vite 是一个精心制作的后台管理系统模板,基于 Vue3、V
|
|||||||
> [!TIP]
|
> [!TIP]
|
||||||
> 正式推出付费服务,如果不想自己动手,但想移除 TS 或其他模块?试试懒人套餐
|
> 正式推出付费服务,如果不想自己动手,但想移除 TS 或其他模块?试试懒人套餐
|
||||||
|
|
||||||
|
> [!TIP]
|
||||||
|
> 如果你有移动端 H5 需求,试试新的开源模板。[MobVue](https://github.com/un-pany/mobvue)
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
<details>
|
<details>
|
||||||
@ -139,7 +142,9 @@ pnpm test
|
|||||||
|
|
||||||
**零基础教程**:[链接](https://juejin.cn/column/7207659644487139387)
|
**零基础教程**:[链接](https://juejin.cn/column/7207659644487139387)
|
||||||
|
|
||||||
**Electron 桌面版**: [v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
|
**移动端 H5**:[mobvue](https://github.com/un-pany/mobvue)
|
||||||
|
|
||||||
|
**Electron 桌面版**:[v3-electron-vite](https://github.com/un-pany/v3-electron-vite)
|
||||||
|
|
||||||
**国内仓库**:[gitee](https://gitee.com/un-pany/v3-admin-vite)
|
**国内仓库**:[gitee](https://gitee.com/un-pany/v3-admin-vite)
|
||||||
|
|
||||||
@ -155,9 +160,9 @@ pnpm test
|
|||||||
|
|
||||||
**详细的注释**:各个配置项都写有尽可能详细的注释
|
**详细的注释**:各个配置项都写有尽可能详细的注释
|
||||||
|
|
||||||
**最新的依赖**: 及时更新所有三方依赖至最新版
|
**最新的依赖**:及时更新所有三方依赖至最新版
|
||||||
|
|
||||||
**有一点规范**: 代码风格统一、命名风格统一、注释风格统一
|
**有一点规范**:代码风格统一、命名风格统一、注释风格统一
|
||||||
|
|
||||||
## 内置功能
|
## 内置功能
|
||||||
|
|
||||||
@ -173,9 +178,9 @@ pnpm test
|
|||||||
|
|
||||||
**首页**:根据不同用户显示不同的 Dashboard 页面
|
**首页**:根据不同用户显示不同的 Dashboard 页面
|
||||||
|
|
||||||
**错误页**: 403、404
|
**错误页**:403、404
|
||||||
|
|
||||||
**兼容移动端**: 布局兼容移动端页面分辨率
|
**兼容移动端**:布局兼容移动端页面分辨率
|
||||||
|
|
||||||
**其他**:SVG 雪碧图、动态侧边栏、动态面包屑、标签页快捷导航、内容区放大与全屏、组合式函数
|
**其他**:SVG 雪碧图、动态侧边栏、动态面包屑、标签页快捷导航、内容区放大与全屏、组合式函数
|
||||||
|
|
||||||
@ -185,7 +190,7 @@ pnpm test
|
|||||||
|
|
||||||
**Element Plus**:Element UI 的 Vue3 版本
|
**Element Plus**:Element UI 的 Vue3 版本
|
||||||
|
|
||||||
**Pinia**: 传说中的 Vuex5
|
**Pinia**:传说中的 Vuex5
|
||||||
|
|
||||||
**Vite**:真的很快
|
**Vite**:真的很快
|
||||||
|
|
||||||
@ -199,7 +204,7 @@ pnpm test
|
|||||||
|
|
||||||
**CSS 变量**:主要控制项目的布局和颜色
|
**CSS 变量**:主要控制项目的布局和颜色
|
||||||
|
|
||||||
**ESlint**:代码校验与格式化
|
**ESLint**:代码校验与格式化
|
||||||
|
|
||||||
**Axios**:发送网络请求(已封装好)
|
**Axios**:发送网络请求(已封装好)
|
||||||
|
|
||||||
|
@ -36,7 +36,8 @@ export default antfu(
|
|||||||
"no-console": "off",
|
"no-console": "off",
|
||||||
"no-debugger": "off",
|
"no-debugger": "off",
|
||||||
"symbol-description": "off",
|
"symbol-description": "off",
|
||||||
"antfu/if-newline": "off"
|
"antfu/if-newline": "off",
|
||||||
|
"unicorn/no-instanceof-builtins": "off"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
36
package.json
36
package.json
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "v3-admin-vite",
|
"name": "v3-admin-vite",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "5.0.0-beta.5",
|
"version": "5.0.0-beta.6",
|
||||||
"description": "A crafted admin template, built with Vue3, Vite, TypeScript, Element Plus, and more",
|
"description": "A crafted admin template, built with Vue3, Vite, TypeScript, Element Plus, and more",
|
||||||
"author": "pany <939630029@qq.com> (https://github.com/pany-ang)",
|
"author": "pany <939630029@qq.com> (https://github.com/pany-ang)",
|
||||||
"repository": "https://github.com/un-pany/v3-admin-vite",
|
"repository": "https://github.com/un-pany/v3-admin-vite",
|
||||||
@ -16,9 +16,9 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "2.3.1",
|
"@element-plus/icons-vue": "2.3.1",
|
||||||
"axios": "1.7.9",
|
"axios": "1.8.4",
|
||||||
"dayjs": "1.11.13",
|
"dayjs": "1.11.13",
|
||||||
"element-plus": "2.9.5",
|
"element-plus": "2.9.7",
|
||||||
"js-cookie": "3.0.5",
|
"js-cookie": "3.0.5",
|
||||||
"lodash-es": "4.17.21",
|
"lodash-es": "4.17.21",
|
||||||
"mitt": "3.0.1",
|
"mitt": "3.0.1",
|
||||||
@ -26,37 +26,37 @@
|
|||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"path-browserify": "1.0.1",
|
"path-browserify": "1.0.1",
|
||||||
"path-to-regexp": "8.2.0",
|
"path-to-regexp": "8.2.0",
|
||||||
"pinia": "3.0.1",
|
"pinia": "3.0.2",
|
||||||
"screenfull": "6.0.2",
|
"screenfull": "6.0.2",
|
||||||
"vue": "3.5.13",
|
"vue": "3.5.13",
|
||||||
"vue-router": "4.5.0",
|
"vue-router": "4.5.0",
|
||||||
"vxe-table": "4.6.25"
|
"vxe-table": "4.6.25"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@antfu/eslint-config": "4.3.0",
|
"@antfu/eslint-config": "4.12.0",
|
||||||
"@types/js-cookie": "3.0.6",
|
"@types/js-cookie": "3.0.6",
|
||||||
"@types/lodash-es": "4.17.12",
|
"@types/lodash-es": "4.17.12",
|
||||||
"@types/node": "22.13.4",
|
"@types/node": "22.14.1",
|
||||||
"@types/nprogress": "0.2.3",
|
"@types/nprogress": "0.2.3",
|
||||||
"@types/path-browserify": "1.0.3",
|
"@types/path-browserify": "1.0.3",
|
||||||
"@vitejs/plugin-vue": "5.2.1",
|
"@vitejs/plugin-vue": "5.2.3",
|
||||||
"@vitejs/plugin-vue-jsx": "4.1.1",
|
"@vitejs/plugin-vue-jsx": "4.1.2",
|
||||||
"@vue/test-utils": "2.4.6",
|
"@vue/test-utils": "2.4.6",
|
||||||
"eslint": "9.20.1",
|
"eslint": "9.24.0",
|
||||||
"eslint-plugin-format": "1.0.1",
|
"eslint-plugin-format": "1.0.1",
|
||||||
"happy-dom": "17.1.1",
|
"happy-dom": "17.4.4",
|
||||||
"husky": "9.1.7",
|
"husky": "9.1.7",
|
||||||
"lint-staged": "15.4.3",
|
"lint-staged": "15.5.1",
|
||||||
"sass": "1.78.0",
|
"sass": "1.78.0",
|
||||||
"typescript": "5.7.3",
|
"typescript": "5.8.3",
|
||||||
"unocss": "66.0.0",
|
"unocss": "66.1.0-beta.12",
|
||||||
"unplugin-auto-import": "19.1.0",
|
"unplugin-auto-import": "19.1.2",
|
||||||
"unplugin-svg-component": "0.12.1",
|
"unplugin-svg-component": "0.12.1",
|
||||||
"unplugin-vue-components": "28.4.0",
|
"unplugin-vue-components": "28.5.0",
|
||||||
"vite": "6.1.1",
|
"vite": "6.3.2",
|
||||||
"vite-svg-loader": "5.1.0",
|
"vite-svg-loader": "5.1.0",
|
||||||
"vitest": "3.0.6",
|
"vitest": "3.1.1",
|
||||||
"vue-tsc": "2.2.2"
|
"vue-tsc": "2.2.8"
|
||||||
},
|
},
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*": "eslint --fix"
|
"*": "eslint --fix"
|
||||||
|
2677
pnpm-lock.yaml
generated
2677
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -1,24 +1,8 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import type { ThemeName } from "@@/composables/useTheme"
|
|
||||||
import { useTheme } from "@@/composables/useTheme"
|
import { useTheme } from "@@/composables/useTheme"
|
||||||
import { MagicStick } from "@element-plus/icons-vue"
|
import { MagicStick } from "@element-plus/icons-vue"
|
||||||
|
|
||||||
const { themeList, activeThemeName, setTheme } = useTheme()
|
const { themeList, activeThemeName, setTheme } = useTheme()
|
||||||
|
|
||||||
function handleChangeTheme({ clientX, clientY }: MouseEvent, themeName: ThemeName) {
|
|
||||||
const maxRadius = Math.hypot(
|
|
||||||
Math.max(clientX, window.innerWidth - clientX),
|
|
||||||
Math.max(clientY, window.innerHeight - clientY)
|
|
||||||
)
|
|
||||||
const style = document.documentElement.style
|
|
||||||
style.setProperty("--v3-theme-x", `${clientX}px`)
|
|
||||||
style.setProperty("--v3-theme-y", `${clientY}px`)
|
|
||||||
style.setProperty("--v3-theme-r", `${maxRadius}px`)
|
|
||||||
const handler = () => {
|
|
||||||
setTheme(themeName)
|
|
||||||
}
|
|
||||||
document.startViewTransition ? document.startViewTransition(handler) : handler()
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -36,7 +20,7 @@ function handleChangeTheme({ clientX, clientY }: MouseEvent, themeName: ThemeNam
|
|||||||
v-for="(theme, index) in themeList"
|
v-for="(theme, index) in themeList"
|
||||||
:key="index"
|
:key="index"
|
||||||
:disabled="activeThemeName === theme.name"
|
:disabled="activeThemeName === theme.name"
|
||||||
@click="(e: MouseEvent) => handleChangeTheme(e, theme.name)"
|
@click="(e: MouseEvent) => setTheme(e, theme.name)"
|
||||||
>
|
>
|
||||||
<span>{{ theme.title }}</span>
|
<span>{{ theme.title }}</span>
|
||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import { getActiveThemeName, setActiveThemeName } from "@@/utils/cache/local-storage"
|
import { getActiveThemeName, setActiveThemeName } from "@@/utils/cache/local-storage"
|
||||||
|
import { setCssVar } from "@@/utils/css"
|
||||||
|
|
||||||
const DEFAULT_THEME_NAME = "normal"
|
const DEFAULT_THEME_NAME = "normal"
|
||||||
|
|
||||||
@ -32,8 +33,18 @@ const themeList: ThemeList[] = [
|
|||||||
const activeThemeName = ref<ThemeName>(getActiveThemeName() || DEFAULT_THEME_NAME)
|
const activeThemeName = ref<ThemeName>(getActiveThemeName() || DEFAULT_THEME_NAME)
|
||||||
|
|
||||||
/** 设置主题 */
|
/** 设置主题 */
|
||||||
function setTheme(value: ThemeName) {
|
function setTheme({ clientX, clientY }: MouseEvent, value: ThemeName) {
|
||||||
|
const maxRadius = Math.hypot(
|
||||||
|
Math.max(clientX, window.innerWidth - clientX),
|
||||||
|
Math.max(clientY, window.innerHeight - clientY)
|
||||||
|
)
|
||||||
|
setCssVar("--v3-theme-x", `${clientX}px`)
|
||||||
|
setCssVar("--v3-theme-y", `${clientY}px`)
|
||||||
|
setCssVar("--v3-theme-r", `${maxRadius}px`)
|
||||||
|
const handler = () => {
|
||||||
activeThemeName.value = value
|
activeThemeName.value = value
|
||||||
|
}
|
||||||
|
document.startViewTransition ? document.startViewTransition(handler) : handler()
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 在 html 根元素上挂载 class */
|
/** 在 html 根元素上挂载 class */
|
||||||
|
2
types/auto/auto-imports.d.ts
vendored
2
types/auto/auto-imports.d.ts
vendored
@ -87,6 +87,6 @@ declare global {
|
|||||||
// for type re-export
|
// for type re-export
|
||||||
declare global {
|
declare global {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||||
import('vue')
|
import('vue')
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user