Skip to content

V
vue3_ts_naiveui
Commit be828929 by pangchong
Options

Initial commit

parents
Showing with 1016 additions and 0 deletions
.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
pnpm-lock.yaml
.husky/commit-msg 0 → 100644
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint
.husky/pre-commit 0 → 100644
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
echo '***************************************************'
echo '********************注意提交格式*******************'
echo '***************************************************'
echo 'git commit -m <type>[optional scope]: <description>'
echo '***************************************************
'feat'： 新功能 feature
'fix'： 修复 bug
'docs'： 文档注释
'style'： 代码格式(不影响代码运行的变动)
'refactor'： 重构(既不增加新功能，也不是修复bug)
'perf'： 性能优化
'test'： 增加测试
'chore'： 构建过程或辅助工具的变动
'revert'： 回退
'build'： 打包'
echo '***************************************************'
.prettierrc.json 0 → 100644
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "none",
"arrowParens": "always",
"tabWidth": 4,
"printWidth": 150
}
commitlint.config.cjs 0 → 100644
module.exports = {
extends: ['@commitlint/config-conventional'],
// 校验规则
rules: {
'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build']],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
}
components.d.ts 0 → 100644
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module 'vue' {
export interface GlobalComponents {
NAlert: typeof import('naive-ui')['NAlert']
NButton: typeof import('naive-ui')['NButton']
NCard: typeof import('naive-ui')['NCard']
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
NDataTable: typeof import('naive-ui')['NDataTable']
NLayout: typeof import('naive-ui')['NLayout']
NLayoutContent: typeof import('naive-ui')['NLayoutContent']
NLayoutFooter: typeof import('naive-ui')['NLayoutFooter']
NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
NResult: typeof import('naive-ui')['NResult']
NSpace: typeof import('naive-ui')['NSpace']
NSpin: typeof import('naive-ui')['NSpin']
NTable: (typeof import('naive-ui'))['NTable']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}
index.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Cache-Control" content="no-cache, no-store">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
\ No newline at end of file
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "vue-ts-init",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"preview": "vite preview",
"prepare": "husky install",
"commitlint": "commitlint --config commitlint.config.cjs -e -V"
},
"dependencies": {
"@types/qs": "^6.9.15",
"@vueuse/core": "^10.9.0",
"dayjs": "^1.11.11",
"less": "^4.2.0",
"lodash": "^4.17.21",
"mitt": "^3.0.1",
"naive-ui": "^2.41.0",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.1",
"qs": "^6.12.1",
"vite-plugin-compression": "^0.5.1",
"vue": "^3.4.19",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@commitlint/cli": "^19.8.0",
"@commitlint/config-conventional": "^19.8.0",
"@types/lodash": "^4.17.5",
"@types/node": "^20.14.2",
"@vitejs/plugin-vue": "^5.0.4",
"autoprefixer": "^10.4.17",
"husky": "^8.0.0",
"postcss": "^8.4.35",
"prettier": "^3.3.2",
"tailwindcss": "^3.4.1",
"typescript": "^5.2.2",
"unplugin-auto-import": "^0.17.5",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.1.4",
"vue-tsc": "^1.8.27"
}
}
postcss.config.js 0 → 100644
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
}
prettierignore 0 → 100644
/dist/*
/html/*
.local
/node_modules/**
**/*.svg
**/*.sh
/public/*
\ No newline at end of file
public/favicon.svg 0 → 100644
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1724118561720" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4707" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M922.85749971 610.25000029C845.74999971 509.75 730.62500029 406.54999971 698.89249971 381.42500029 676.25 363.5 654.46250029 354.5 632.69749971 354.5a95.30250029 95.30250029 0 0 0-61.65749971 25.12500029c-3.62999971 3.59250029-9.0675 8.0775-15.4125 13.46249971-45.3375 37.69499971-186.795 166.0275-190.4175 169.61249971a58.94250029 58.94250029 0 0 1-39.89999971 16.155 69.21749971 69.21749971 0 0 1-43.50000058-20.63999971A1055.0475 1055.0475 0 0 1 166.625 448.73c-34.45499971-38.5875-63.4725-72.69000029-63.4725-72.69000029s-6.345 12.56249971-9.97499971 22.4325a17.02500029 17.02500029 0 0 0 0.90749971 14.36250058C113.12749971 439.75999971 199.25 541.16749971 317.15 642.57499971A100.26749971 100.26749971 0 0 0 383.33750029 669.5a95.30250029 95.30250029 0 0 0 61.65749971-25.12500029c3.62999971-3.59250029 9.0675-8.0775 15.4125-13.46249971 45.3375-37.69499971 131.48250029-115.76999971 171.37500029-152.56500029 9.0675-8.0775 15.4125-13.46249971 18.135-16.155a58.94250029 58.94250029 0 0 1 39.89999971-16.155 74.295 74.295 0 0 1 43.49999971 20.64000058c25.38749971 21.53999971 66.195 59.24999971 115.155 109.49999942 35.36250029 37.69499971 63.4725 71.7975 63.4725 72.69000029 0 0 6.345-13.46249971 9.97500058-22.4325a16.12500029 16.12500029 0 0 0 0.93749942-16.18499971z" fill="#8DC21F" p-id="4708"></path><path d="M469.61 235.0475c-39.8025 28.95000029-202.635 180.0225-234.29999971 216.20999971a550.50000029 550.50000029 0 0 0 56.99999971 53.40000058 19.8 19.8 0 0 0 28.95000029-3.61500029c62.42249971-63.32249971 190.88250029-176.40749971 208.06499971-189.97499971 47.9475-40.70999971 104.94-44.325 155.59499971-6.33000058 124.83749971 94.05 236.10750029 241.50750029 255.105 268.65 0 0 2.71500029-13.5675 4.5-25.32749942a28.5975 28.5975 0 0 0-3.61499942-20.80500029c-117.60000029-169.1775-242.42249971-274.11000029-290.37000058-300.34500029-54.27749971-28.04249971-117.60000029-38.0025-180.92999971 8.13750029z" fill="#0084CF" p-id="4709"></path><path d="M337.50500029 147.2975c-80.4825 65.13000029-184.5 161.02500029-210.75000029 189.97499971a706.5 706.5 0 0 0 50.66250029 54.27750058 11.12249971 11.12249971 0 0 0 17.19-1.80750058c79.605-76.89750029 165.54750029-155.60250029 216.2025-194.50499942 84.13499971-65.1375 183.645-71.46749971 280.44 5.42999971a1192.66499971 1192.66499971 0 0 1 114.89249971 104.94 1622.99999971 1622.99999971 0 0 1 141.12 180 206.505 206.505 0 0 0-4.5-37.99500029 57.83249971 57.83249971 0 0 0-5.42999971-14.47499971 857.025 857.025 0 0 0-100.43250029-145.59000029C728.3375 160.865 660.49250029 122.86999971 616.16750029 99.35 557.36 69.49999971 444.28249971 60.4475 337.50500029 147.2975z" fill="#0084CF" p-id="4710"></path><path d="M554.6375 782.36c39.8025-28.95000029 202.64249971-180 234.29999971-216.20999971a615.465 615.465 0 0 0-56.99999971-54.27750058 19.8 19.8 0 0 0-28.95000029 3.61500029c-62.3925 63.32249971-190.85249971 176.40749971-208.04249971 189.97499971-47.9475 40.70999971-104.94 44.325-156.50250029 6.33000058C213.605 617.71249971 103.23500029 470.25500029 84.23749971 442.21249971c0 0-2.71500029 13.5675-4.5 25.32750029a28.5975 28.5975 0 0 0 3.6 20.8125c117.60000029 169.16249971 242.4375 274.11000029 290.385 300.35999971 54.27749971 29.82750029 117.6075 39.75000029 180.91500029-6.35249971z" fill="#0084CF" p-id="4711"></path><path d="M686.75000029 870.10250029c80.51249971-65.1375 184.545-161.02500029 210.74999942-189.97500058a706.5 706.5 0 0 0-50.66249942-54.27749971 11.12249971 11.12249971 0 0 0-17.19 1.80749971C750.05 704.555 664.10749971 783.26 613.4525 822.1625c-84.13499971 65.1375-183.645 71.46749971-280.44-5.42999971a1192.67250029 1192.67250029 0 0 1-114.89249971-104.9625A1622.99999971 1622.99999971 0 0 1 77.00000029 531.77000029a214.43249971 214.43249971 0 0 0 4.5 37.99499942 57.83249971 57.83249971 0 0 0 5.45249971 14.50500029 857.025 857.025 0 0 0 100.4175 145.64999971c108.55500029 126.60000029 176.4 164.61 220.725 188.1 58.80750029 29.88749971 171.88499971 38.93249971 278.65500029-47.91749942z" fill="#0084CF" p-id="4712"></path></svg>
\ No newline at end of file
src/App.vue 0 → 100644
<template>
<n-config-provider class="w-full h-full" :theme="appStore.theme" :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="themeOverrides">
<router-view></router-view>
</n-config-provider>
</template>
<script setup lang="ts">
import { zhCN, dateZhCN } from 'naive-ui'
import useAppStore from './store/app'
import { darkThemeConfig, lightThemeConfig } from './configs/tailwind.ui.config'
const appStore = useAppStore()
const themeOverrides = computed(() => {
return {
common: appStore.theme ? darkThemeConfig : lightThemeConfig
}
})
onMounted(() => {
appStore.setTheme()
})
</script>
<style lang="less" scoped></style>
src/assets/css/index.less 0 → 100644
@import './reset.less';
@import './style.less';
@import './tailwind.less';
src/assets/css/reset.less 0 → 100644
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
src/assets/css/style.less 0 → 100644
html,
body,
#app {
width: 100%;
height: 100%;
overflow: hidden;
font-size: 14px;
font-family: 'PuHuiRegular';
}
div {
box-sizing: border-box;
}
/* 滚动轴 */
::-webkit-scrollbar {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: var(--scrollbar-color);
background-clip: padding-box;
min-height: 28px;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: var(--scrollbar-color-hover);
}
src/assets/css/tailwind.less 0 → 100644
@tailwind base;
@tailwind components;
@layer components {
.flex-center {
@apply flex items-center justify-center;
}
}
@tailwind utilities;
@layer utilities {
}
src/auto-import.d.ts 0 → 100644
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']
const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
const defineComponent: typeof import('vue')['defineComponent']
const effectScope: typeof import('vue')['effectScope']
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
const getCurrentScope: typeof import('vue')['getCurrentScope']
const h: typeof import('vue')['h']
const inject: typeof import('vue')['inject']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
const isReadonly: typeof import('vue')['isReadonly']
const isRef: typeof import('vue')['isRef']
const markRaw: typeof import('vue')['markRaw']
const nextTick: typeof import('vue')['nextTick']
const onActivated: typeof import('vue')['onActivated']
const onBeforeMount: typeof import('vue')['onBeforeMount']
const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
const onDeactivated: typeof import('vue')['onDeactivated']
const onErrorCaptured: typeof import('vue')['onErrorCaptured']
const onMounted: typeof import('vue')['onMounted']
const onRenderTracked: typeof import('vue')['onRenderTracked']
const onRenderTriggered: typeof import('vue')['onRenderTriggered']
const onScopeDispose: typeof import('vue')['onScopeDispose']
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
const ref: typeof import('vue')['ref']
const resolveComponent: typeof import('vue')['resolveComponent']
const shallowReactive: typeof import('vue')['shallowReactive']
const shallowReadonly: typeof import('vue')['shallowReadonly']
const shallowRef: typeof import('vue')['shallowRef']
const toRaw: typeof import('vue')['toRaw']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
const triggerRef: typeof import('vue')['triggerRef']
const unref: typeof import('vue')['unref']
const useAttrs: typeof import('vue')['useAttrs']
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useDialog: typeof import('naive-ui')['useDialog']
const useEventBus: typeof import('@/hooks/useEventBus')['useEventBus']
const useId: typeof import('vue')['useId']
const useLink: typeof import('vue-router')['useLink']
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
const useMessage: typeof import('naive-ui')['useMessage']
const useModel: typeof import('vue')['useModel']
const useNotification: typeof import('naive-ui')['useNotification']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const useTemplateRef: typeof import('vue')['useTemplateRef']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
import('vue')
}
src/configs/tailwind.ui.config.ts 0 → 100644
export const tailwindUiConfig: any = {
colors: {
baseColor: 'var(--base-color)',
primaryColor: 'var(--primary-color)',
primaryColorHover: 'var(--primary-color-hover)',
primaryColorPressed: 'var(--primary-color-pressed)',
primaryColorSuppl: 'var(--primary-color-suppl)',
infoColor: 'var(--info-color)',
infoColorHover: 'var(--info-color-hover)',
infoColorPressed: 'var(--info-color-pressed)',
infoColorSuppl: 'var(--info-color-suppl)',
successColor: 'var(--success-color)',
successColorHover: 'var(--success-color-hover)',
successColorPressed: 'var(--success-color-pressed)',
successColorSuppl: 'var(--success-color-suppl)',
warningColor: 'var(--warning-color)',
warningColorHover: 'var(--warning-color-hover)',
warningColorPressed: 'var(--warning-color-pressed)',
warningColorSuppl: 'var(--warning-color-suppl)',
errorColor: 'var(--error-color)',
errorColorHover: 'var(--error-color-hover)',
errorColorPressed: 'var(--error-color-pressed)',
errorColorSuppl: 'var(--error-color-suppl)',
textColorBase: 'var(--text-color-base)',
textColor1: 'var(--text-color-1)',
textColor2: 'var(--text-color-2)',
textColor3: 'var(--text-color-3)',
textColorDisabled: 'var(--text-color-disabled)',
placeholderColor: 'var(--placeholder-color)',
placeholderColorDisabled: 'var(--placeholder-color-disabled)',
iconColor: 'var(--icon-color)',
iconColorHover: 'var(--icon-color-hover)',
iconColorPressed: 'var(--icon-color-pressed)',
iconColorDisabled: 'var(--icon-color-disabled)',
dividerColor: 'var(--divider-color)',
borderColor: 'var(--border-color)',
closeIconColorHover: 'var(--close-icon-color-hover)',
closeIconColor: 'var(--close-icon-color)',
closeIconColorPressed: 'var(--close-icon-color-pressed)',
closeColorHover: 'var(--close-color-hover)',
closeColorPressed: 'var(--close-color-pressed)',
clearColor: 'var(--clear-color)',
clearColorHover: 'var(--clear-color-hover)',
clearColorPressed: 'var(--clear-color-pressed)',
scrollbarColor: 'var(--scrollbar-color)',
scrollbarColorHover: 'var(--scrollbar-color-hover)',
progressRailColor: 'var(--progress-rail-color)',
railColor: 'var(--rail-color)',
popoverColor: 'var(--popover-color)',
tableColor: 'var(--table-color)',
cardColor: 'var(--card-color)',
modalColor: 'var(--modal-color)',
bodyColor: 'var(--body-color)',
tagColor: 'var(--tag-color)',
avatarColor: 'var(--avatar-color)',
invertedColor: 'var(--inverted-color)',
inputColor: 'var(--input-color)',
codeColor: 'var(--code-color)',
tabColor: 'var(--tab-color)',
actionColor: 'var(--action-color)',
tableHeaderColor: 'var(--table-header-color)',
hoverColor: 'var(--hover-color)',
tableColorHover: 'var(--table-color-hover)',
tableColorStriped: 'var(--table-color-striped)',
pressedColor: 'var(--pressed-color)',
opacityDisabled: 'var(--opacity-disabled)',
inputColorDisabled: 'var(--input-color-disabled)',
buttonColor2: 'var(--button-color2)',
buttonColor2Hover: 'var(--button-color2-hover)',
buttonColor2Pressed: 'var(--button-color2-pressed)'
}
}
export const lightThemeConfig: any = {
baseColor: '#FFF',
primaryColor: '#18a058',
primaryColorHover: '#36ad6a',
primaryColorPressed: '#0c7a43',
primaryColorSuppl: '#36ad6a',
infoColor: '#2080f0',
infoColorHover: '#4098fc',
infoColorPressed: '#1060c9',
infoColorSuppl: '#4098fc',
successColor: '#18a058',
successColorHover: '#36ad6a',
successColorPressed: '#0c7a43',
successColorSuppl: '#36ad6a',
warningColor: '#f0a020',
warningColorHover: '#fcb040',
warningColorPressed: '#c97c10',
warningColorSuppl: '#fcb040',
errorColor: '#d03050',
errorColorHover: '#de576d',
errorColorPressed: '#ab1f3f',
errorColorSuppl: '#de576d',
textColorBase: '#000',
textColor1: 'rgb(31, 34, 37)',
textColor2: 'rgb(51, 54, 57)',
textColor3: 'rgb(118, 124, 130)',
textColorDisabled: 'rgba(194, 194, 194, 1)',
placeholderColor: 'rgba(194, 194, 194, 1)',
placeholderColorDisabled: 'rgba(209, 209, 209, 1)',
iconColor: 'rgba(194, 194, 194, 1)',
iconColorHover: 'rgba(146, 146, 146, 1)',
iconColorPressed: 'rgba(175, 175, 175, 1)',
iconColorDisabled: 'rgba(209, 209, 209, 1)',
dividerColor: 'rgb(239, 239, 245)',
borderColor: 'rgb(224, 224, 230)',
closeIconColor: 'rgba(102, 102, 102, 1)',
closeIconColorHover: 'rgba(102, 102, 102, 1)',
closeIconColorPressed: 'rgba(102, 102, 102, 1)',
closeColorHover: 'rgba(0, 0, 0, .09)',
closeColorPressed: 'rgba(0, 0, 0, .13)',
clearColor: 'rgba(194, 194, 194, 1)',
clearColorHover: 'rgba(146, 146, 146, 1)',
clearColorPressed: 'rgba(175, 175, 175, 1)',
scrollbarColor: 'rgba(0, 0, 0, 0.25)',
scrollbarColorHover: 'rgba(0, 0, 0, 0.4)',
progressRailColor: 'rgba(235, 235, 235, 1)',
railColor: 'rgb(219, 219, 223)',
popoverColor: '#fff',
tableColor: '#fff',
cardColor: '#fff',
modalColor: '#fff',
bodyColor: '#fff',
tagColor: '#eee',
avatarColor: 'rgba(204, 204, 204, 1)',
invertedColor: 'rgb(0, 20, 40)',
inputColor: 'rgba(255, 255, 255, 1)',
codeColor: 'rgb(244, 244, 248)',
tabColor: 'rgb(247, 247, 250)',
actionColor: 'rgb(250, 250, 252)',
tableHeaderColor: 'rgb(250, 250, 252)',
hoverColor: 'rgb(243, 243, 245)',
tableColorHover: 'rgba(0, 0, 100, 0.03)',
tableColorStriped: 'rgba(0, 0, 100, 0.02)',
pressedColor: 'rgb(237, 237, 239)',
opacityDisabled: '0.5',
inputColorDisabled: 'rgb(250, 250, 252)',
buttonColor2: 'rgba(46, 51, 56, .05)',
buttonColor2Hover: 'rgba(46, 51, 56, .09)',
buttonColor2Pressed: 'rgba(46, 51, 56, .13)'
}
export const darkThemeConfig: any = {
baseColor: '#000',
primaryColor: '#63e2b7',
primaryColorHover: '#7fe7c4',
primaryColorPressed: '#5acea7',
primaryColorSuppl: 'rgb(42, 148, 125)',
infoColor: '#70c0e8',
infoColorHover: '#8acbec',
infoColorPressed: '#66afd3',
infoColorSuppl: 'rgb(56, 137, 197)',
successColor: '#63e2b7',
successColorHover: '#7fe7c4',
successColorPressed: '#5acea7',
successColorSuppl: 'rgb(42, 148, 125)',
warningColor: '#f2c97d',
warningColorHover: '#f5d599',
warningColorPressed: '#e6c260',
warningColorSuppl: 'rgb(240, 138, 0)',
errorColor: '#e88080',
errorColorHover: '#e98b8b',
errorColorPressed: '#e57272',
errorColorSuppl: 'rgb(208, 58, 82)',
textColorBase: '#fff',
textColor1: 'rgba(255, 255, 255, 0.9)',
textColor2: 'rgba(255, 255, 255, 0.82)',
textColor3: 'rgba(255, 255, 255, 0.52)',
textColorDisabled: 'rgba(255, 255, 255, 0.38)',
placeholderColor: 'rgba(255, 255, 255, 0.38)',
placeholderColorDisabled: 'rgba(255, 255, 255, 0.28)',
iconColor: 'rgba(255, 255, 255, 0.38)',
iconColorDisabled: 'rgba(255, 255, 255, 0.28)',
iconColorHover: 'rgba(255, 255, 255, 0.475)',
iconColorPressed: 'rgba(255, 255, 255, 0.30400000000000005)',
dividerColor: 'rgba(255, 255, 255, 0.09)',
borderColor: 'rgba(255, 255, 255, 0.24)',
closeIconColorHover: 'rgba(255, 255, 255, 0.52)',
closeIconColor: 'rgba(255, 255, 255, 0.52)',
closeIconColorPressed: 'rgba(255, 255, 255, 0.52)',
closeColorHover: 'rgba(255, 255, 255, .12)',
closeColorPressed: 'rgba(255, 255, 255, .08)',
clearColor: 'rgba(255, 255, 255, 0.38)',
clearColorHover: 'rgba(255, 255, 255, 0.48)',
clearColorPressed: 'rgba(255, 255, 255, 0.3)',
scrollbarColor: 'rgba(255, 255, 255, 0.2)',
scrollbarColorHover: 'rgba(255, 255, 255, 0.3)',
progressRailColor: 'rgba(255, 255, 255, 0.12)',
railColor: 'rgba(255, 255, 255, 0.2)',
popoverColor: 'rgb(72, 72, 78)',
tableColor: 'rgb(24, 24, 28)',
cardColor: 'rgb(24, 24, 28)',
modalColor: 'rgb(44, 44, 50)',
bodyColor: 'rgb(16, 16, 20)',
tagColor: 'rgba(51, 51, 51, 1)',
avatarColor: 'rgba(255, 255, 255, 0.18)',
invertedColor: '#000',
inputColor: 'rgba(255, 255, 255, 0.1)',
codeColor: 'rgba(255, 255, 255, 0.12)',
tabColor: 'rgba(255, 255, 255, 0.04)',
actionColor: 'rgba(255, 255, 255, 0.06)',
tableHeaderColor: 'rgba(255, 255, 255, 0.06)',
hoverColor: 'rgba(255, 255, 255, 0.09)',
tableColorHover: 'rgba(255, 255, 255, 0.06)',
tableColorStriped: 'rgba(255, 255, 255, 0.05)',
pressedColor: 'rgba(255, 255, 255, 0.05)',
opacityDisabled: '0.38',
inputColorDisabled: 'rgba(255, 255, 255, 0.06)',
buttonColor2: 'rgba(255, 255, 255, .08)',
buttonColor2Hover: 'rgba(255, 255, 255, .12)',
buttonColor2Pressed: 'rgba(255, 255, 255, .08)'
}
src/hooks/useEventBus.ts 0 → 100644
import mitt, { Emitter, EventType } from 'mitt'
import { onBeforeUnmount } from 'vue'
interface Fn {
(...args: any[]): void
}
interface Option {
name: string // 事件名称
callback: Fn // 回调
}
const emitter: Emitter<Record<EventType, any>> = mitt()
export const useEventBus = (option?: Option) => {
if (option) {
const { name, callback } = option
// 注册事件监听器
emitter.on(name, callback)
// 组件卸载时注销事件监听器
onBeforeUnmount(() => {
emitter.off(name, callback)
})
}
// 返回事件总线的方法
return {
on: emitter.on.bind(emitter),
off: emitter.off.bind(emitter),
emit: emitter.emit.bind(emitter),
all: emitter.all
}
}
src/main.ts 0 → 100644
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { setupPinia } from './store'
import './assets/css/index.less'
const app = createApp(App)
app.use(router)
//引入仓库
setupPinia(app)
app.mount('#app')
src/router/index.ts 0 → 100644
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import(/* webpackChunkName: "Layout" */ '@/views/layout/index.vue'),
name: 'Layout',
children: [
{
path: '/404',
name: 'Error404',
component: () => import(/* webpackChunkName: "Error404" */ '@/views/error/index.vue'),
meta: { title: '404' }
},
{
path: '/:pathMatch(.*)*',
component: () => import(/* webpackChunkName: "Error404" */ '@/views/error/index.vue'),
meta: { title: '404' }
},
{
path: '/theme',
component: () => import(/* webpackChunkName: "Login" */ '@/views/example/theme.vue'),
name: 'Theme',
meta: { title: '主题' },
children: []
}
]
},
{
path: '/login',
component: () => import(/* webpackChunkName: "Login" */ '@/views/login/index.vue'),
name: 'Login',
meta: { title: '登录' },
children: []
}
]
const router = createRouter({
history: createWebHashHistory(),
routes,
// 切换路由跳转到顶部
scrollBehavior() {
return {
left: 0,
top: 0
}
}
})
export default router
src/store/app/index.ts 0 → 100644
import { defineStore } from 'pinia'
import { AppState } from './types'
import { darkTheme } from 'naive-ui'
import { darkThemeConfig, lightThemeConfig } from '@/configs/tailwind.ui.config'
const useAppStore = defineStore('app', {
state: (): AppState => {
return {
theme: null
}
},
getters: {},
actions: {
changeTheme() {
if (this.theme) {
this.theme = null
} else {
this.theme = darkTheme
}
this.setTheme()
},
setTheme(themeData = lightThemeConfig) {
if (this.theme) {
themeData = darkThemeConfig
}
for (const [key, value] of Object.entries(themeData)) {
// 将键转换为 CSS 变量格式
const cssVarName = `--${key.replace(/([A-Z])/g, '-$1').toLowerCase()}`
document.body.style.setProperty(cssVarName, value as string)
}
}
},
persist: false
})
export default useAppStore
src/store/app/types.ts 0 → 100644
import type { GlobalTheme } from 'naive-ui'
export interface AppState {
theme: GlobalTheme | null
}
src/store/index.ts 0 → 100644
import { createPinia } from 'pinia'
import { App, markRaw } from 'vue'
import router from '@/router'
import { Router } from 'vue-router'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
declare module 'pinia' {
export interface PiniaCustomProperties {
router: Router
}
}
export const setupPinia = (app: App<Element>) => {
const pinia = createPinia()
// 配置router路由
pinia.use(({ store }) => {
store.router = markRaw(router)
})
//持久化pinia
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
}
src/views/error/index.vue 0 → 100644
<template>
<div class="flex justify-center items-center h-full">
<n-result status="404" title="页面不存在">
<template #footer>
<n-space>
<n-button type="primary" @click="goBack">返回</n-button>
</n-space>
</template>
</n-result>
</div>
</template>
<script setup lang="ts">
const router = useRouter()
const goBack = () => {
router.push('/')
}
</script>
<style lang="less" scoped></style>
src/views/example/theme.vue 0 → 100644
<template>
<n-card>
<n-button type="primary" @click="changeTheme">主题切换</n-button>
</n-card>
<n-data-table :columns="columns" :data="getData" flex-height class="h-full"></n-data-table>
</template>
<script setup lang="ts">
import { tailwindUiConfig } from '@/configs/tailwind.ui.config'
import useAppStore from '@/store/app'
import { DataTableColumn } from 'naive-ui'
import { darkThemeConfig, lightThemeConfig } from '@/configs/tailwind.ui.config'
const appStore = useAppStore()
const changeTheme = () => {
appStore.changeTheme()
}
const columns: Array<DataTableColumn> = [
{
title: '变量名',
key: 'label'
},
{
title: '变量值',
key: 'value'
},
{
title: '颜色',
key: 'color',
render(row) {
return h('div', {
style: {
width: '30px',
height: '30px',
backgroundColor: row.value
}
})
}
},
{
title: '值',
key: 'value',
render(row: any) {
return h('span', {}, appStore.theme ? darkThemeConfig[row.label] : lightThemeConfig[row.label])
}
}
]
const getData = computed(() => {
return Object.entries(tailwindUiConfig.colors).map(([key, value]) => ({
label: key,
value: value
}))
})
</script>
<style lang="less" scoped></style>
src/views/layout/index.vue 0 → 100644
<template>
<n-layout class="h-full overflow-hidden">
<n-layout-header></n-layout-header>
<n-layout-content content-class="flex flex-col flex-auto overflow-x-auto" class="h-full flex flex-col">
<router-view></router-view>
</n-layout-content>
<n-layout-footer></n-layout-footer>
</n-layout>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>
src/views/login/index.vue 0 → 100644
<template>
<div></div>
</template>
<script setup lang="ts"></script>
<style lang="less" scoped></style>
src/vite-env.d.ts 0 → 100644
/// <reference types="vite/client" />
tailwind.config.js 0 → 100644
import { tailwindUiConfig } from './src/configs/tailwind.ui.config'
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
// 禁用预加载，修复tailwind样式与naive-ui等样式的冲突问题
corePlugins: {
preflight: false
},
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: tailwindUiConfig
},
plugins: []
}
tsconfig.json 0 → 100644
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2023", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"noImplicitAny": true,
"jsx": "preserve",
/* Linting */
"strict": true,
"noUnusedLocals": false,
"noUnusedParameters": false,
"noFallthroughCasesInSwitch": false,
"paths": {
"@/*": ["src/*"]
},
"types": ["vite/client", "naive-ui/volar"],
"baseUrl": "."
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "./*.ts", "src/auto-import.d.ts"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json 0 → 100644
{
"compilerOptions": {
"composite": true,
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true
},
"include": ["vite.config.ts", "gzBundle.ts"]
}
vite.config.ts 0 → 100644
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'
import { resolve } from 'node:path'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true
}
}
},
plugins: [
vue(),
AutoImport({
imports: [
'vue',
'vue-router',
{
'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar'],
'@/hooks/useEventBus': ['useEventBus']
}
],
dts: 'src/auto-import.d.ts',
resolvers: [NaiveUiResolver()]
}),
Components({
// 自动导入的组件位置，默认是src/components
dirs: ['src/components'],
resolvers: [NaiveUiResolver()]
})
],
resolve: {
alias: {
'@': resolve('src')
}
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment