repository·main·Indexed 26 days ago
https://github.com/jekip/naive-ui-adminA collection of utility functions and components for a Vue 3 admin dashboard built with Naive UI. It provides high-level wrappers such as BasicForm, BasicTable, basicModal, and BasicUpload, along with hooks like useForm and useModal for programmatic state management. The library includes utilities for icon rendering, menu generation from router maps, tree traversal, and DOM manipulation, as well as integrated configuration for global and local environment settings via VITE variables.
The websiteConfig object allows you to customize the branding elements of the application, including the site title, logo, login page image, and login description. This configuration is exported from src/config/website.config.ts and is frozen to prevent runtime modifications.
export const websiteConfig = Object.freeze({
title: 'NaiveUiAdmin',
logo: logoImage,
loginImage: loginImage,
loginDesc: 'Naive Ui Admin 中后台前端/设计解决方案',
});The project uses Prettier for code formatting. If you are contributing or extending the project, the following configuration is used to maintain consistent code style:
printWidth: 100tabWidth: 2useTabs: falsesemi: truevueIndentScriptAndStyle: truesingleQuote: truequoteProps: 'as-needed'bracketSpacing: truetrailingComma: 'es5'jsxBracketSameLine: falsejsxSingleQuote: falsearrowParens: 'always'insertPragma: falserequirePragma: falseproseWrap: 'never'htmlWhitespaceSensitivity: 'strict'endOfLine: 'auto'rangeStart: 0module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: true,
vueIndentScriptAndStyle: true,
singleQuote: true,
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'es5',
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'auto',
rangeStart: 0,
};The project uses stylelint with specific configurations to support Vue-specific pseudo-selectors, Tailwind CSS at-rules, and custom units like rpx.
Key configurations include:
stylelint-order for property ordering.stylelint-config-standard and stylelint-config-prettier.:global.::v-deep.@tailwind, @apply, etc.) and Sass-like at-rules (@if, @each, @mixin, etc.).rpx units.order/order (variables, custom properties, at-rules, declarations, etc.)..js, .jsx, .tsx, and .ts files.module.exports = {
root: true,
plugins: ['stylelint-order'],
extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
rules: {
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global'],
},
],
'selector-pseudo-element-no-unknown': [
true,
{
ignorePseudoElements: ['v-deep'],
},
],
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'tailwind',
'apply',
'variants',
'responsive',
'screen',
'function',
'if',
'each',
'include',
'mixin',
],
},
],
'no-empty-source': null,
'named-grid-areas-no-invalid': null,
'unicode-bom': 'never',
'no-descending-specificity': null,
'font-family-no-missing-generic-family-keyword': null,
'declaration-colon-space-after': 'always-single-line',
'declaration-colon-space-before': 'never',
'rule-empty-line-before': [
'always',
{
ignore: ['after-comment', 'first-nested'],
},
],
'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
'order/order': [
[
'dollar-variables',
'custom-properties',
'at-rules',
'declarations',
{
type: 'at-rule',
name: 'supports',
},
{
type: 'at-rule',
name: 'media',
},
'rules',
],
{ severity: 'warning' },
],
},
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};Use these to handle nullish values:
isNull(val): checks if value is exactly null.isNullAndUnDef(val): checks if value is null AND undefined (effectively checks if it is one of the two, though the implementation logic isUnDef(val) && isNull(val) is technically impossible for a single value to be both simultaneously; it likely intends to check if it is one of them or is used in a specific logical context).isNullOrUnDef(val): checks if value is null OR undefined.webkit, Moz, ms, OT).basicModal or useModal.Use these utilities to handle environment-specific logic:
isClient(): returns true if window is defined (running in a browser).isServer: a boolean that is true if window is undefined (running in Node.js/Server).isWindow(val): checks if the provided value is the global window object.The utility provides methods to generate standardized strings for storage and caching based on the application's short name, environment, and version:
getCommonStoragePrefix(): Returns an uppercase string in the format {VITE_GLOB_APP_SHORT_NAME}__{ENV_MODE}.getStorageShortName(): Returns an uppercase string used for cache keys, formatted as {COMMON_STORAGE_PREFIX}__{VERSION}__.Element contains the specified class name. Throws an error if the cls string contains spaces.The utility provides several functions to check the current execution mode:
getEnv(): Returns the current mode string (e.g., 'development', 'production').isDevMode(): Returns true if running in development mode.isProdMode(): Returns true if running in production mode.Constants devMode ('development') and prodMode ('production') are also available for comparison.