feat(projects): 1.0 beta

This commit is contained in:
Soybean
2023-11-17 08:45:00 +08:00
parent 1ea4817f6a
commit e918a2c0f5
499 changed files with 15918 additions and 24708 deletions

View File

@ -1,6 +1,30 @@
<script setup lang="ts">
import { getRgbOfColor } from '@sa/utils';
import { $t } from '@/locales';
import { localStg } from '@/utils/storage';
const loadingClasses = [
'left-0 top-0',
'left-0 bottom-0 animate-delay-500',
'right-0 top-0 animate-delay-1000',
'right-0 bottom-0 animate-delay-1500'
];
function addThemeColorCssVars() {
const themeColor = localStg.get('themeColor') || '#646cff';
const { r, g, b } = getRgbOfColor(themeColor);
const cssVars = `--primary-color: ${r} ${g} ${b}`;
document.documentElement.style.cssText = cssVars;
}
addThemeColorCssVars();
</script>
<template>
<div class="fixed-center flex-col">
<system-logo class="text-128px text-primary" />
<SystemLogo class="text-128px text-primary" />
<div class="w-56px h-56px my-36px">
<div class="relative h-full animate-spin">
<div
@ -15,29 +39,4 @@
</div>
</template>
<script setup lang="ts">
import { sessionStg, getRgbOfColor } from '@/utils';
import { $t } from '@/locales';
import themeSettings from '@/settings/theme.json';
const loadingClasses = [
'left-0 top-0',
'left-0 bottom-0 animate-delay-500',
'right-0 top-0 animate-delay-1000',
'right-0 bottom-0 animate-delay-1500'
];
function addThemeColorCssVars() {
const defaultColor = themeSettings.themeColor;
const themeColor = sessionStg.get('themeColor') || defaultColor;
const { r, g, b } = getRgbOfColor(themeColor);
const cssVars = `--primary-color: ${r},${g},${b}`;
document.documentElement.style.cssText = cssVars;
}
addThemeColorCssVars();
</script>
<style scoped></style>

View File

@ -0,0 +1,40 @@
<script setup lang="ts">
import { defineComponent, createTextVNode } from 'vue';
import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui';
defineOptions({
name: 'AppProvider'
});
const ContextHolder = defineComponent({
name: 'ContextHolder',
setup() {
function register() {
window.$loadingBar = useLoadingBar();
window.$dialog = useDialog();
window.$message = useMessage();
window.$notification = useNotification();
}
register();
},
render() {
return createTextVNode();
}
});
</script>
<template>
<NLoadingBarProvider>
<NDialogProvider>
<NNotificationProvider>
<NMessageProvider>
<ContextHolder />
<slot></slot>
</NMessageProvider>
</NNotificationProvider>
</NDialogProvider>
</NLoadingBarProvider>
</template>
<style scoped></style>

View File

@ -1,12 +1,3 @@
<template>
<div
class="dark:bg-dark dark:text-white dark:text-opacity-82 transition-all"
:class="inverted ? 'bg-#001428 text-white' : 'bg-white text-#333639'"
>
<slot></slot>
</div>
</template>
<script setup lang="ts">
defineOptions({ name: 'DarkModeContainer' });
@ -14,9 +5,13 @@ interface Props {
inverted?: boolean;
}
withDefaults(defineProps<Props>(), {
inverted: false
});
defineProps<Props>();
</script>
<template>
<div class="bg-container text-base_text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
<slot></slot>
</div>
</template>
<style scoped></style>

View File

@ -1,89 +0,0 @@
<template>
<div class="flex-center text-18px cursor-pointer" @click="handleSwitch">
<icon-mdi-moon-waning-crescent v-if="darkMode" />
<icon-mdi-white-balance-sunny v-else />
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
defineOptions({ name: 'DarkModeSwitch' });
interface Props {
/** 暗黑模式 */
dark?: boolean;
/** 自定义暗黑模式动画过渡 */
customizeTransition?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
dark: false
});
interface Emits {
(e: 'update:dark', darkMode: boolean): void;
}
const emit = defineEmits<Emits>();
const darkMode = computed({
get() {
return props.dark;
},
set(newValue: boolean) {
emit('update:dark', newValue);
}
});
async function handleSwitch(event: MouseEvent) {
const x = event.clientX;
const y = event.clientY;
if (!props.customizeTransition || !document.startViewTransition) {
darkMode.value = !darkMode.value;
return;
}
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
const transition = document.startViewTransition(() => {
darkMode.value = !darkMode.value;
});
await transition.ready;
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
document.documentElement.animate(
{
clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
},
{
duration: 300,
easing: 'ease-in',
pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
}
);
}
</script>
<style>
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(root) {
z-index: 9999;
}
::view-transition-new(root) {
z-index: 1;
}
.dark::view-transition-old(root) {
z-index: 1;
}
.dark::view-transition-new(root) {
z-index: 9999;
}
</style>

View File

@ -1,31 +1,41 @@
<template>
<div class="flex-col-center gap-24px min-h-520px wh-full overflow-hidden">
<div class="flex text-400px text-primary">
<icon-local-no-permission v-if="type === '403'" />
<icon-local-not-found v-if="type === '404'" />
<icon-local-service-error v-if="type === '500'" />
</div>
<router-link :to="{ name: routeHomePath }">
<n-button type="primary">回到首页</n-button>
</router-link>
</div>
</template>
<script lang="ts" setup>
import { routeName } from '@/router';
import { computed } from 'vue';
import { $t } from '@/locales';
defineOptions({ name: 'ExceptionBase' });
type ExceptionType = '403' | '404' | '500';
interface Props {
/** 异常类型 403 404 500 */
/**
* exception type
* - 403: no permission
* - 404: not found
* - 500: service error
*/
type: ExceptionType;
}
defineProps<Props>();
const props = defineProps<Props>();
const routeHomePath = routeName('root');
const iconMap: Record<ExceptionType, string> = {
'403': 'no-permission',
'404': 'not-found',
'500': 'service-error'
};
const icon = computed(() => iconMap[props.type]);
</script>
<template>
<div class="flex-vertical-center gap-24px min-h-520px wh-full overflow-hidden">
<div class="flex text-400px text-primary">
<SvgIcon :local-icon="icon" />
</div>
<RouterLink to="/">
<NButton type="primary">{{ $t('common.backToHome') }}</NButton>
</RouterLink>
</div>
</template>
<style scoped></style>

View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import { $t } from '@/locales';
defineOptions({
name: 'FullScreen'
});
interface Props {
full?: boolean;
}
defineProps<Props>();
</script>
<template>
<ButtonIcon :key="String(full)" :tooltip-content="full ? $t('icon.fullscreenExit') : $t('icon.fullscreen')">
<icon-gridicons-fullscreen-exit v-if="full" />
<icon-gridicons-fullscreen v-else />
</ButtonIcon>
</template>
<style scoped></style>

View File

@ -1,48 +0,0 @@
<template>
<div v-if="showTooltip">
<n-tooltip :placement="placement" trigger="hover">
<template #trigger>
<div class="flex-center h-full cursor-pointer dark:hover:bg-#333" :class="contentClassName">
<slot></slot>
</div>
</template>
{{ tooltipContent }}
</n-tooltip>
</div>
<div v-else class="flex-center cursor-pointer dark:hover:bg-#333" :class="contentClassName">
<slot></slot>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import type { PopoverPlacement } from 'naive-ui';
defineOptions({ name: 'HoverContainer' });
interface Props {
/** tooltip显示文本 */
tooltipContent?: string;
/** tooltip的位置 */
placement?: PopoverPlacement;
/** class类 */
contentClass?: string;
/** 反转模式下 */
inverted?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
tooltipContent: '',
placement: 'bottom',
contentClass: '',
inverted: false
});
const showTooltip = computed(() => Boolean(props.tooltipContent));
const contentClassName = computed(
() => `${props.contentClass} ${props.inverted ? 'hover:bg-primary' : 'hover:bg-#f6f6f6'}`
);
</script>
<style scoped></style>

View File

@ -0,0 +1,55 @@
<script setup lang="ts">
import { computed } from 'vue';
import { $t } from '@/locales';
defineOptions({
name: 'LangSwitch'
});
interface Props {
/**
* current language
*/
lang: App.I18n.LangType;
/**
* language options
*/
langOptions: App.I18n.LangOption[];
/**
* show tooltip
*/
showTooltip?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
showTooltip: true
});
type Emits = {
(e: 'changeLang', lang: App.I18n.LangType): void;
};
const emits = defineEmits<Emits>();
const tooltipContent = computed(() => {
if (!props.showTooltip) return '';
return $t('icon.lang');
});
function changeLang(lang: App.I18n.LangType) {
emits('changeLang', lang);
}
</script>
<template>
<NDropdown :value="lang" :options="langOptions" trigger="hover" @select="changeLang">
<div>
<ButtonIcon :tooltip-content="tooltipContent" tooltip-placement="left">
<SvgIcon icon="heroicons:language" />
</ButtonIcon>
</div>
</NDropdown>
</template>
<style scoped></style>

View File

@ -0,0 +1,48 @@
<script lang="ts" setup>
import { $t } from '@/locales';
import { computed } from 'vue';
defineOptions({ name: 'MenuToggler' });
interface Props {
/**
* show collapsed icon
*/
collapsed?: boolean;
/**
* arrow style icon
*/
arrowIcon?: boolean;
}
const props = defineProps<Props>();
type NumberBool = 0 | 1;
const icon = computed(() => {
const icons: Record<NumberBool, Record<NumberBool, string>> = {
0: {
0: 'line-md:menu-fold-left',
1: 'line-md:menu-fold-right'
},
1: {
0: 'ph-caret-double-left-bold',
1: 'ph-caret-double-right-bold'
}
};
const arrowIcon = Number(props.arrowIcon || false) as NumberBool;
const collapsed = Number(props.collapsed || false) as NumberBool;
return icons[arrowIcon][collapsed];
});
</script>
<template>
<ButtonIcon :tooltip-content="collapsed ? $t('icon.expand') : $t('icon.collapse')" tooltip-placement="bottom-start">
<SvgIcon :icon="icon" />
</ButtonIcon>
</template>
<style scoped></style>

View File

@ -1,38 +0,0 @@
<template>
<n-loading-bar-provider>
<n-dialog-provider>
<n-notification-provider>
<n-message-provider>
<slot></slot>
<naive-provider-content />
</n-message-provider>
</n-notification-provider>
</n-dialog-provider>
</n-loading-bar-provider>
</template>
<script setup lang="ts">
import { defineComponent, h } from 'vue';
import { useDialog, useLoadingBar, useMessage, useNotification } from 'naive-ui';
defineOptions({ name: 'NaiveProvider' });
// 挂载naive组件的方法至window, 以便在路由钩子函数和请求函数里面调用
function registerNaiveTools() {
window.$loadingBar = useLoadingBar();
window.$dialog = useDialog();
window.$message = useMessage();
window.$notification = useNotification();
}
const NaiveProviderContent = defineComponent({
name: 'NaiveProviderContent',
setup() {
registerNaiveTools();
},
render() {
return h('div');
}
});
</script>
<style scoped></style>

View File

@ -0,0 +1,26 @@
<script lang="ts" setup>
import { $t } from '@/locales';
import { computed } from 'vue';
defineOptions({ name: 'PinToggler' });
interface Props {
pin?: boolean;
}
const props = defineProps<Props>();
const icon = computed(() => (props.pin ? 'mdi-pin-off' : 'mdi-pin'));
</script>
<template>
<ButtonIcon
:tooltip-content="pin ? $t('icon.pin') : $t('icon.unpin')"
tooltip-placement="bottom-start"
trigger-parent
>
<SvgIcon :icon="icon" />
</ButtonIcon>
</template>
<style scoped></style>

View File

@ -0,0 +1,21 @@
<script setup lang="ts">
import { $t } from '@/locales';
defineOptions({
name: 'ReloadButton'
});
interface Props {
loading?: boolean;
}
defineProps<Props>();
</script>
<template>
<ButtonIcon :tooltip-content="$t('icon.reload')">
<icon-ant-design-reload-outlined :class="{ 'animate-spin animate-duration-750': loading }" />
</ButtonIcon>
</template>
<style scoped></style>

View File

@ -1,19 +1,9 @@
<template>
<icon-local-logo-fill v-if="fill" />
<icon-local-logo v-else />
</template>
<script lang="ts" setup>
defineOptions({ name: 'SystemLogo' });
interface Props {
/** logo是否填充 */
fill?: boolean;
}
withDefaults(defineProps<Props>(), {
fill: false
});
</script>
<template>
<icon-local-logo />
</template>
<style scoped></style>

View File

@ -0,0 +1,62 @@
<script setup lang="ts">
import { computed } from 'vue';
import type { PopoverPlacement } from 'naive-ui';
import { $t } from '@/locales';
defineOptions({ name: 'ThemeSchemaSwitch' });
interface Props {
/**
* theme schema
*/
themeSchema: UnionKey.ThemeScheme;
/**
* show tooltip
*/
showTooltip?: boolean;
/**
* tooltip placement
*/
tooltipPlacement?: PopoverPlacement;
}
const props = withDefaults(defineProps<Props>(), {
showTooltip: true,
tooltipPlacement: 'bottom'
});
interface Emits {
(e: 'switch'): void;
}
const emit = defineEmits<Emits>();
function handleSwitch() {
emit('switch');
}
const icons: Record<UnionKey.ThemeScheme, string> = {
light: 'material-symbols:sunny',
dark: 'material-symbols:nightlight-rounded',
auto: 'material-symbols:hdr-auto'
};
const icon = computed(() => icons[props.themeSchema]);
const tooltipContent = computed(() => {
if (!props.showTooltip) return '';
return $t('icon.themeSchema');
});
</script>
<template>
<ButtonIcon
:icon="icon"
:tooltip-content="tooltipContent"
:tooltip-placement="tooltipPlacement"
@click="handleSwitch"
/>
</template>
<style scoped></style>