Merge branch 'main' into example

This commit is contained in:
Soybean
2025-03-12 23:25:14 +08:00
58 changed files with 2267 additions and 2505 deletions

View File

@@ -25,7 +25,10 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
<div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
<icon-mdi-drag class="mr-8px h-full cursor-move text-icon" />
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
{{ item.title }}
<template v-if="typeof item.title === 'function'">
<component :is="item.title" />
</template>
<template v-else>{{ item.title }}</template>
</NCheckbox>
</div>
</VueDraggable>

View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';
import { $t } from '@/locales';
defineOptions({ name: 'ExceptionBase' });

View File

@@ -61,3 +61,5 @@ export const resetCacheStrategyRecord: Record<UnionKey.ResetCacheStrategy, App.I
};
export const resetCacheStrategyOptions = transformRecordToOption(resetCacheStrategyRecord);
export const DARK_CLASS = 'dark';

View File

@@ -1,7 +1,7 @@
import { computed } from 'vue';
import { useCountDown, useLoading } from '@sa/hooks';
import { $t } from '@/locales';
import { REG_PHONE } from '@/constants/reg';
import { $t } from '@/locales';
export function useCaptcha() {
const { loading, startLoading, endLoading } = useLoading();

View File

@@ -1,4 +1,5 @@
import { computed, effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
import { useElementSize } from '@vueuse/core';
import * as echarts from 'echarts/core';
import { BarChart, GaugeChart, LineChart, PictorialBarChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts';
import type {
@@ -29,7 +30,6 @@ import type {
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useElementSize } from '@vueuse/core';
import { useThemeStore } from '@/store/modules/theme';
export type ECOption = echarts.ComposeOption<

View File

@@ -18,12 +18,7 @@ export function useRouterPush(inSetup = true) {
const routerBack = router.back;
interface RouterPushOptions {
query?: Record<string, string>;
params?: Record<string, string>;
}
async function routerPushByKey(key: RouteKey, options?: RouterPushOptions) {
async function routerPushByKey(key: RouteKey, options?: App.Global.RouterPushOptions) {
const { query, params } = options || {};
const routeLocation: RouteLocationRaw = {
@@ -67,7 +62,7 @@ export function useRouterPush(inSetup = true) {
async function toLogin(loginModule?: UnionKey.LoginModule, redirectUrl?: string) {
const module = loginModule || 'pwd-login';
const options: RouterPushOptions = {
const options: App.Global.RouterPushOptions = {
params: {
module
}

View File

@@ -64,7 +64,7 @@ export function useTable<A extends NaiveUI.TableApiFn>(config: NaiveUI.NaiveTabl
if (isTableColumnHasKey(column)) {
checks.push({
key: column.key as string,
title: column.title as string,
title: column.title!,
checked: true
});
} else if (column.type === 'selection') {

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { useFullscreen } from '@vueuse/core';
import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { GLOBAL_HEADER_MENU_ID } from '@/constants/app';
import GlobalLogo from '../global-logo/index.vue';
import GlobalBreadcrumb from '../global-breadcrumb/index.vue';
import GlobalSearch from '../global-search/index.vue';

View File

@@ -2,11 +2,11 @@
import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { SimpleScrollbar } from '@sa/materials';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useRouterPush } from '@/hooks/common/router';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
import { useMenu } from '../../../context';
defineOptions({

View File

@@ -3,12 +3,12 @@ import { computed, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { SimpleScrollbar } from '@sa/materials';
import { useBoolean } from '@sa/hooks';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useRouterPush } from '@/hooks/common/router';
import { $t } from '@/locales';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
import { useMenu, useMixMenuContext } from '../../../context';
import FirstLevelMenu from '../components/first-level-menu.vue';
import GlobalLogo from '../../global-logo/index.vue';

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
import GlobalLogo from '../global-logo/index.vue';
defineOptions({

View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed } from 'vue';
import type { VNode } from 'vue';
import { $t } from '@/locales';
import { useTabStore } from '@/store/modules/tab';
import { useSvgIcon } from '@/hooks/common/icon';
import { $t } from '@/locales';
defineOptions({
name: 'ContextMenu'

View File

@@ -3,12 +3,12 @@ import { nextTick, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useElementBounding } from '@vueuse/core';
import { PageTab } from '@sa/materials';
import BetterScroll from '@/components/custom/better-scroll.vue';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { useRouteStore } from '@/store/modules/route';
import { useTabStore } from '@/store/modules/tab';
import { isPC } from '@/utils/agent';
import BetterScroll from '@/components/custom/better-scroll.vue';
import ContextMenu from './context-menu.vue';
defineOptions({
@@ -114,7 +114,7 @@ function setDropdown(config: Partial<DropdownConfig>) {
let isClickContextMenu = false;
function handleDropdownVisible(visible: boolean) {
function handleDropdownVisible(visible: boolean | undefined) {
if (!isClickContextMenu) {
setDropdown({ visible });
}
@@ -186,7 +186,7 @@ init();
:active="tab.id === tabStore.activeTabId"
:active-color="themeStore.themeColor"
:closable="!tabStore.isTabRetain(tab.id)"
@click="tabStore.switchRouteByTab(tab)"
@pointerdown="tabStore.switchRouteByTab(tab)"
@close="handleCloseTab(tab)"
@contextmenu="handleContextMenu($event, tab.id)"
>

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import Clipboard from 'clipboard';
import { $t } from '@/locales';
import { useThemeStore } from '@/store/modules/theme';
import { $t } from '@/locales';
defineOptions({
name: 'ConfigOperation'

View File

@@ -1,14 +1,14 @@
<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
import { useThemeStore } from '@/store/modules/theme';
import {
resetCacheStrategyOptions,
themePageAnimationModeOptions,
themeScrollModeOptions,
themeTabModeOptions
} from '@/constants/app';
import { useThemeStore } from '@/store/modules/theme';
import { translateOptions } from '@/utils/common';
import { $t } from '@/locales';
import SettingItem from '../components/setting-item.vue';
defineOptions({

View File

@@ -1,16 +1,22 @@
// @unocss-include
import { getRgb } from '@sa/color';
import { $t } from '@/locales';
import { DARK_CLASS } from '@/constants/app';
import { localStg } from '@/utils/storage';
import { toggleHtmlClass } from '@/utils/common';
import systemLogo from '@/assets/svg-icon/logo.svg?raw';
import { $t } from '@/locales';
export function setupLoading() {
const themeColor = localStg.get('themeColor') || '#646cff';
const darkMode = localStg.get('darkMode') || false;
const { r, g, b } = getRgb(themeColor);
const primaryColor = `--primary-color: ${r} ${g} ${b}`;
if (darkMode) {
toggleHtmlClass(DARK_CLASS).add();
}
const loadingClasses = [
'left-0 top-0',
'left-0 bottom-0 animate-delay-500',
@@ -27,14 +33,14 @@ export function setupLoading() {
.join('\n');
const loading = `
<div class="fixed-center flex-col" style="${primaryColor}">
<div class="fixed-center flex-col bg-layout" style="${primaryColor}">
${logoWithClass}
<div class="w-56px h-56px my-36px">
<div class="relative h-full animate-spin">
${dot}
</div>
</div>
<h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
<h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
</div>`;
const app = document.getElementById('app');

View File

@@ -6,10 +6,10 @@ import type {
Router
} from 'vue-router';
import type { RouteKey, RoutePath } from '@elegant-router/types';
import { getRouteName } from '@/router/elegant/transform';
import { useAuthStore } from '@/store/modules/auth';
import { useRouteStore } from '@/store/modules/route';
import { localStg } from '@/utils/storage';
import { getRouteName } from '@/router/elegant/transform';
/**
* create route guard

View File

@@ -1,5 +1,5 @@
import { useTitle } from '@vueuse/core';
import type { Router } from 'vue-router';
import { useTitle } from '@vueuse/core';
import { $t } from '@/locales';
export function createDocumentTitleGuard(router: Router) {

View File

@@ -1,9 +1,9 @@
import type { AxiosResponse } from 'axios';
import { BACKEND_ERROR_CODE, createFlatRequest, createRequest } from '@sa/axios';
import { useAuthStore } from '@/store/modules/auth';
import { $t } from '@/locales';
import { localStg } from '@/utils/storage';
import { getServiceBaseURL } from '@/utils/service';
import { $t } from '@/locales';
import { getAuthorization, handleExpiredRequest, showErrorMsg } from './shared';
import type { RequestInstanceState } from './type';

View File

@@ -1,12 +1,12 @@
import { effectScope, nextTick, onScopeDispose, ref, watch } from 'vue';
import { defineStore } from 'pinia';
import { breakpointsTailwind, useBreakpoints, useEventListener, useTitle } from '@vueuse/core';
import { defineStore } from 'pinia';
import { useBoolean } from '@sa/hooks';
import { SetupStoreId } from '@/enum';
import { router } from '@/router';
import { localStg } from '@/utils/storage';
import { SetupStoreId } from '@/enum';
import { $t, setLocale } from '@/locales';
import { setDayjsLocale } from '@/locales/dayjs';
import { localStg } from '@/utils/storage';
import { useRouteStore } from '../route';
import { useTabStore } from '../tab';
import { useThemeStore } from '../theme';

View File

@@ -2,10 +2,10 @@ import { computed, reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import { defineStore } from 'pinia';
import { useLoading } from '@sa/hooks';
import { SetupStoreId } from '@/enum';
import { useRouterPush } from '@/hooks/common/router';
import { fetchGetUserInfo, fetchLogin } from '@/service/api';
import { useRouterPush } from '@/hooks/common/router';
import { localStg } from '@/utils/storage';
import { SetupStoreId } from '@/enum';
import { $t } from '@/locales';
import { useRouteStore } from '../route';
import { useTabStore } from '../tab';

View File

@@ -3,12 +3,12 @@ import type { RouteRecordRaw } from 'vue-router';
import { defineStore } from 'pinia';
import { useBoolean } from '@sa/hooks';
import type { CustomRoute, ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
import { SetupStoreId } from '@/enum';
import { router } from '@/router';
import { fetchGetConstantRoutes, fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
import { SetupStoreId } from '@/enum';
import { createStaticRoutes, getAuthVueRoutes } from '@/router/routes';
import { ROOT_ROUTE } from '@/router/routes/builtin';
import { getRouteName, getRoutePath } from '@/router/elegant/transform';
import { fetchGetConstantRoutes, fetchGetUserRoutes, fetchIsRouteExist } from '@/service/api';
import { useAuthStore } from '../auth';
import { useTabStore } from '../tab';
import {

View File

@@ -1,7 +1,7 @@
import type { RouteLocationNormalizedLoaded, RouteRecordRaw, _RouteRecordBase } from 'vue-router';
import type { ElegantConstRoute, LastLevelRouteKey, RouteKey, RouteMap } from '@elegant-router/types';
import { $t } from '@/locales';
import { useSvgIcon } from '@/hooks/common/icon';
import { $t } from '@/locales';
/**
* Filter auth routes by roles

View File

@@ -1,12 +1,12 @@
import { computed, ref } from 'vue';
import { defineStore } from 'pinia';
import { useEventListener } from '@vueuse/core';
import { defineStore } from 'pinia';
import type { RouteKey } from '@elegant-router/types';
import { router } from '@/router';
import { SetupStoreId } from '@/enum';
import { useRouteStore } from '@/store/modules/route';
import { useRouterPush } from '@/hooks/common/router';
import { localStg } from '@/utils/storage';
import { useRouteStore } from '@/store/modules/route';
import { SetupStoreId } from '@/enum';
import { useThemeStore } from '../theme';
import {
extractTabsByAllRoutes,
@@ -160,6 +160,25 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
update();
}
const { routerPushByKey } = useRouterPush();
/**
* Replace tab
*
* @param key Route key
* @param options Router push options
*/
async function replaceTab(key: RouteKey, options?: App.Global.RouterPushOptions) {
const oldTabId = activeTabId.value;
// push new route
await routerPushByKey(key, options);
// remove old tab (exclude fixed tab)
if (!isTabRetain(oldTabId)) {
await removeTab(oldTabId);
}
}
/**
* Switch route by tab
*
@@ -282,6 +301,7 @@ export const useTabStore = defineStore(SetupStoreId.Tab, () => {
removeTab,
removeActiveTab,
removeTabByRouteName,
replaceTab,
clearTabs,
clearLeftTabs,
clearRightTabs,

View File

@@ -1,10 +1,10 @@
import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
import type { Ref } from 'vue';
import { defineStore } from 'pinia';
import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
import { defineStore } from 'pinia';
import { getPaletteColorByNumber } from '@sa/color';
import { SetupStoreId } from '@/enum';
import { localStg } from '@/utils/storage';
import { SetupStoreId } from '@/enum';
import {
addThemeVarsToGlobal,
createThemeToken,
@@ -174,6 +174,7 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
darkMode,
val => {
toggleCssDarkMode(val);
localStg.set('darkMode', val);
},
{ immediate: true }
);

View File

@@ -1,12 +1,11 @@
import type { GlobalThemeOverrides } from 'naive-ui';
import { defu } from 'defu';
import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
import { overrideThemeSettings, themeSettings } from '@/theme/settings';
import { themeVars } from '@/theme/vars';
import { DARK_CLASS } from '@/constants/app';
import { toggleHtmlClass } from '@/utils/common';
import { localStg } from '@/utils/storage';
const DARK_CLASS = 'dark';
import { overrideThemeSettings, themeSettings } from '@/theme/settings';
import { themeVars } from '@/theme/vars';
/** Init theme settings */
export function initThemeSettings() {

View File

@@ -113,7 +113,8 @@ code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; /* 1 */
font-size: 1em; /* 2 */
}

View File

@@ -175,6 +175,12 @@ declare namespace App {
type RoutePath = import('@elegant-router/types').RoutePath;
type LastLevelRouteKey = import('@elegant-router/types').LastLevelRouteKey;
/** The router push options */
type RouterPushOptions = {
query?: Record<string, string>;
params?: Record<string, string>;
};
/** The global header props */
interface HeaderProps {
/** Whether to show the logo */

View File

@@ -2,6 +2,7 @@
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
export {}
/* prettier-ignore */

View File

@@ -20,6 +20,8 @@ declare namespace StorageType {
refreshToken: string;
/** The theme color */
themeColor: string;
/** The dark mode */
darkMode: boolean;
/** The theme settings */
themeSettings: App.Theme.ThemeSetting;
/**

View File

@@ -8,6 +8,7 @@ declare namespace Env {
type RouterHistoryMode = 'hash' | 'history' | 'memory';
/** Interface for import.meta */
// eslint-disable-next-line @typescript-eslint/no-shadow
interface ImportMeta extends ImportMetaEnv {
/** The base url of the application */
readonly VITE_BASE_URL: string;
@@ -105,6 +106,8 @@ declare namespace Env {
readonly VITE_STORAGE_PREFIX?: string;
/** Whether to automatically detect updates after configuring application packaging */
readonly VITE_AUTOMATICALLY_DETECT_UPDATE?: CommonType.YesOrNo;
/** show proxy url log in terminal */
readonly VITE_PROXY_LOG?: CommonType.YesOrNo;
}
}

View File

@@ -2,10 +2,10 @@
import { computed } from 'vue';
import type { Component } from 'vue';
import { getPaletteColorByNumber, mixColor } from '@sa/color';
import { $t } from '@/locales';
import { loginModuleRecord } from '@/constants/app';
import { useAppStore } from '@/store/modules/app';
import { useThemeStore } from '@/store/modules/theme';
import { loginModuleRecord } from '@/constants/app';
import { $t } from '@/locales';
import PwdLogin from './modules/pwd-login.vue';
import CodeLogin from './modules/code-login.vue';
import Register from './modules/register.vue';
@@ -66,6 +66,7 @@ const bgColor = computed(() => {
@switch="themeStore.toggleThemeScheme"
/>
<LangSwitch
v-if="themeStore.header.multilingual.visible"
:lang="appStore.locale"
:lang-options="appStore.localeOptions"
:show-tooltip="false"

View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useCaptcha } from '@/hooks/business/captcha';
import { $t } from '@/locales';
defineOptions({
name: 'CodeLogin'

View File

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { $t } from '@/locales';
import { loginModuleRecord } from '@/constants/app';
import { useAuthStore } from '@/store/modules/auth';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useAuthStore } from '@/store/modules/auth';
import { $t } from '@/locales';
defineOptions({
name: 'PwdLogin'

View File

@@ -1,9 +1,9 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useCaptcha } from '@/hooks/business/captcha';
import { $t } from '@/locales';
defineOptions({
name: 'Register'

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { $t } from '@/locales';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { $t } from '@/locales';
defineOptions({
name: 'ResetPwd'

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useAuthStore } from '@/store/modules/auth';
import { $t } from '@/locales';
defineOptions({
name: 'HeaderBanner'

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { $t } from '@/locales';
defineOptions({
name: 'LineChart'

View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import { watch } from 'vue';
import { $t } from '@/locales';
import { useAppStore } from '@/store/modules/app';
import { useEcharts } from '@/hooks/common/echarts';
import { $t } from '@/locales';
defineOptions({
name: 'PieChart'

View File

@@ -184,6 +184,7 @@ const basicGanttOption: VTableGantt.GanttConstructorOptions = {
},
markLine: [
{
content: '',
date: '2024-07-28',
style: {
lineWidth: 1,
@@ -192,6 +193,7 @@ const basicGanttOption: VTableGantt.GanttConstructorOptions = {
}
},
{
content: '',
date: '2024-08-17',
style: {
lineWidth: 2,
@@ -705,6 +707,7 @@ const customGanttOption: VTableGantt.GanttConstructorOptions = {
maxDate: '2024-08-15',
markLine: [
{
content: '',
date: '2024-07-29',
style: {
lineWidth: 1,
@@ -713,6 +716,7 @@ const customGanttOption: VTableGantt.GanttConstructorOptions = {
}
},
{
content: '',
date: '2024-08-17',
style: {
lineWidth: 2,

View File

@@ -27,7 +27,7 @@ const localIcons = ['custom-icon', 'activity', 'at-sign', 'cast', 'chrome', 'cop
</NCard>
<NCard title="自定义图标示例" :bordered="false" class="mt-10px card-wrapper">
<div class="pb-12px text-16px">
在src/assets/svg-icon文件夹下的svg文件通过在template里面以 icon-local-{文件名} 直接渲染,
在src/assets/svg-icon文件夹下的svg文件通过在template里面以 icon - local - {文件名} 直接渲染,
其中icon-local为.env文件里的 VITE_ICON_LOCAL_PREFIX
</div>
<div class="grid grid-cols-10">