feat(layout): page basic Construction

Author: ZhaoJiSen

components.d.ts

@@ -10,6 +10,8 @@ declare module 'vue' {
     Hello: typeof import('./src/components/Hello.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NFlex: typeof import('naive-ui')['NFlex']
     NH2: typeof import('naive-ui')['NH2']
@@ -20,8 +22,13 @@ declare module 'vue' {
     NLayoutHeader: typeof import('naive-ui')['NLayoutHeader']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NText: typeof import('naive-ui')['NText']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    NTree: typeof import('naive-ui')['NTree']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "axios": "^1.7.2",
+    "mitt": "^3.0.1",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
@@ -42,6 +43,8 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
     "naive-ui": "^2.38.2",
+    "postcss": "^8.4.39",
+    "postcss-scss": "^4.0.9",
     "prettier": "^3.3.2",
     "sass": "^1.77.6",
     "stylelint": "^16.1.0",

pnpm-lock.yaml

@@ -30,7 +30,7 @@ export const getPublic = (): Promise<any> => {
   let requestUrl = '/api/v1/settings/public/';
 
   const connectionToken = getQueryParamFromURL('token');
-  console.log(connectionToken);
+
   // ! 解决 /luna/connect?connectToken= 直接方式权限认证问题
   if (connectionToken) {
     requestUrl += `?token=${connectionToken}`;

src/API/modules/init.ts

@@ -1,5 +1,5 @@
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN" :theme-overrides="ThemeOverride">
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
     <n-message-provider>
       <n-spin :show="isLoading">
         <router-view />
@@ -16,7 +16,6 @@ import { useTheme } from '@/hooks/useTheme.ts';
 import { useTranslations } from '@/hooks/useTranslate.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
 import { useLoadingStore } from '@/stores/modules/loading.ts';
-import { LightThemeOverrides, DarkThemeOverrides } from './themeOverride.ts';
 
 import { setFavicon } from '@/utils';
 
@@ -29,8 +28,6 @@ const isLoading = computed(() => {
   return loadingStore.isLoading;
 });
 
-console.log(LightThemeOverrides, DarkThemeOverrides);
-
 onBeforeMount(() => {
   // 初始化主题样式
   initTheme();

src/App.vue

@@ -26,3 +26,9 @@ const props = withDefaults(defineProps<SvgProps>(), {
 
 const symbolId = computed(() => `#${props.prefix}-${props.name}`);
 </script>
+
+<style lang="scss" scoped>
+svg:focus {
+  outline: unset;
+}
+</style>

src/assets/icons/tree.svg

@@ -24,6 +24,7 @@ export const useTheme = () => {
   const switchDark = (): void => {
     const html: HTMLElement = document.documentElement;
 
+    console.log(isDark);
     if (isDark.value) {
       html.setAttribute('class', 'dark');
     } else {

src/components/SvgIcon/index.vue

@@ -9,5 +9,6 @@ export default {
   InvalidJson: 'Invalid JSON format.',
   requiredHasUserNameMapped: 'Username attr is required.',
   'Web Terminal': 'Web Terminal',
-  'Theme reset': 'The theme color has been reset to'
+  'Theme reset': 'The theme color has been reset to',
+  'Custom Setting': 'Custom Setting'
 };

src/hooks/useTheme.ts

@@ -9,5 +9,6 @@ export default {
   InvalidJson: 'JSON 格式错误.',
   requiredHasUserNameMapped: '用户名属性是必需的。',
   'Web Terminal': 'Web 终端',
-  'Theme reset': '主题颜色已重置为'
+  'Theme reset': '主题颜色已重置为',
+  'Custom Setting': '自定义设置'
 };