feat(layout): refactoring styles

components.d.ts

@@ -24,5 +24,6 @@ declare module 'vue' {
     NSpin: typeof import('naive-ui')['NSpin']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
   }
 }

package.json

@@ -42,7 +42,6 @@
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
     "naive-ui": "^2.38.2",
-    "postcss-scss": "^4.0.9",
     "prettier": "^3.3.2",
     "sass": "^1.77.6",
     "stylelint": "^16.1.0",
@@ -57,6 +56,7 @@
     "unplugin-vue-components": "^0.27.2",
     "vfonts": "^0.0.3",
     "vite": "^5.3.3",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-tsc": "^2.0.24"
   },
   "engines": {

src/API/helper/index.ts

@@ -0,0 +1,52 @@
+import { AxiosRequestConfig } from 'axios';
+import { useGlobalStore } from '@/stores/modules/global.ts';
+import { storeToRefs } from 'pinia';
+
+/**
+ * @description 主要在 post、put、delete、patch 请求中设置 csrfToken
+ * @param {AxiosRequestConfig} config
+ */
+export const setOptionsCSRFToken = (config?: AxiosRequestConfig): AxiosRequestConfig => {
+  const globalStore = useGlobalStore();
+
+  const { csrfToken } = storeToRefs(globalStore);
+
+  if (!config) {
+    config = {};
+  }
+
+  if (csrfToken) {
+    if (!config.headers) {
+      config.headers = {};
+    }
+    config.headers['X-CSRFToken'] = csrfToken;
+  }
+
+  return config;
+};
+
+/**
+ * @description 主要在 get 请求中设置  Organization Id
+ * @param {AxiosRequestConfig} config
+ */
+export const setOrgIDToRequestHeader = (config: AxiosRequestConfig) => {
+  const globalStore = useGlobalStore();
+
+  const { JMSOrg, JMSLunaOra } = storeToRefs(globalStore);
+
+  if (!config) {
+    config = {};
+  }
+
+  if (JMSOrg || JMSLunaOra) {
+    if (!config.headers) {
+      config.headers = {};
+    }
+
+    if (!('X-JMS-ORG' in config.headers)) {
+      config.headers['X-JMS-ORG'] = JMSOrg || JMSLunaOra;
+    }
+  }
+
+  return config;
+};

src/API/index.ts

@@ -10,8 +10,10 @@ import { useLoadingStore } from '@/stores/modules/loading.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
 import { createDiscreteApi } from 'naive-ui';
 
-import type { ResultData } from './interface';
 import { useI18n } from 'vue-i18n';
+import type { ResultData } from './interface';
+
+import { setOptionsCSRFToken } from '@/API/helper';
 
 export interface CustomAxiosRequestConfig extends InternalAxiosRequestConfig {
   loading?: boolean;
@@ -28,24 +30,6 @@ const config = {
 
 const { message } = createDiscreteApi(['message']);
 
-// ! 注意：下面这两个函数中 useGlobalStore 不能提升到全局，否则 Pinia 会在 APP 实例被挂在前调用从而报错
-const setOptionsCSRFToken = (config: AxiosRequestConfig): AxiosRequestConfig => {
-  const globalStore = useGlobalStore();
-  const csrfToken = globalStore.csrfToken;
-
-  if (!config) {
-    config = {};
-  }
-
-  if (csrfToken) {
-    if (!config.headers) {
-      config.headers = {};
-    }
-    config.headers['X-CSRFToken'] = csrfToken;
-  }
-
-  return config;
-};
 const setOrgIDToRequestHeader = (config?: AxiosRequestConfig): AxiosRequestConfig => {
   const globalStore = useGlobalStore();
   const orgID = globalStore.JMSOrg || globalStore.JMSLunaOra;

src/API/interface/index.ts

@@ -7,6 +7,8 @@ export interface ResultData<T = any> extends Result {
   data: T;
 }
 
+export interface INTERFACE {}
+
 export interface GlobalSetting {
   WINDOWS_SKIP_ALL_MANUAL_PASSWORD: boolean;
   SECURITY_MAX_IDLE_TIME: number;

src/API/modules/init.ts

@@ -14,7 +14,7 @@ export const getTranslation = (lang: string) => {
 /**
  * @description 获取公共设置
  */
-export const getPublicSetting = () => {
+export const getPublicOption = (): Promise<any> => {
   let requestUrl = '/api/v1/settings/public/open/';
   const connectionToken = getQueryParamFromURL('token');
 
@@ -26,9 +26,29 @@ export const getPublicSetting = () => {
   return http.get(requestUrl);
 };
 
+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}`;
+  }
+
+  return http.get(requestUrl);
+};
+
 /**
  * @description 获取系统设置
  */
 export const getSystemSetting = () => {
   return http.get('/api/v1/users/preference/?category=luna');
 };
+
+/**
+ * @description获取当前用户信息
+ */
+export const getProfile = () => {
+  return http.get('/api/v1/users/profile/');
+};

src/App.vue

@@ -16,6 +16,8 @@ import { useTranslations } from '@/hooks/useTranslate.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
 import { useLoadingStore } from '@/stores/modules/loading.ts';
 
+import { setFavicon } from '@/utils';
+
 const globalStore = useGlobalStore();
 const loadingStore = useLoadingStore();
 const { updateTranslations } = useTranslations();
@@ -25,10 +27,21 @@ const isLoading = computed(() => {
 });
 
 onBeforeMount(() => {
+  // 设置语言
   setCurrentLanguage();
+  // 设置 ico
+  setFavicon(globalStore.interface.favicon!);
 });
 
 const setCurrentLanguage = () => {
   updateTranslations(globalStore.language);
 };
 </script>
+
+<style scoped lang="scss">
+.n-config-provider,
+.n-spin-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/components/SvgIcon/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <svg :style="iconStyle" aria-hidden="true">
+    <use :xlink:href="symbolId" />
+  </svg>
+</template>
+
+<script setup lang="ts">
+// https://github.com/vbenjs/vite-plugin-svg-icons/blob/main/README.zh_CN.md
+import { computed, CSSProperties } from 'vue';
+
+interface SvgProps {
+  // 图标的名称 ==> 必传
+  name: string;
+
+  // 图标的前缀 ==> 非必传（默认为"icon"）
+  prefix?: string;
+
+  // 图标的样式 ==> 非必传
+  iconStyle?: CSSProperties;
+}
+
+const props = withDefaults(defineProps<SvgProps>(), {
+  prefix: 'icon',
+  iconStyle: () => ({ width: '30px', height: '30px' })
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>

src/layouts/components/Header/components/Help/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <n-dropdown
+    trigger="hover"
+    :show-arrow="true"
+    placement="right"
+    :options="options"
+    @select="handleSelect"
+  >
+    <svg-icon :name="name" :icon-style="iconStyle" />
+  </n-dropdown>
+</template>
+
+<script setup lang="ts">
+import { CSSProperties } from 'vue';
+import { optionsDetail } from '@/layouts/components/Header/types';
+
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+const props = defineProps<{
+  name: string;
+  options: optionsDetail[];
+  iconStyle: CSSProperties;
+}>();
+
+const handleSelect = (key: string) => {
+  props.options.forEach(item => {
+    // 类型收窄
+    if (item.key === key && typeof item.onClink === 'function') {
+      item.onClink();
+    }
+  });
+};
+</script>

src/layouts/components/Header/components/Logo/index.vue

@@ -7,3 +7,13 @@ defineProps<{
   logoImage: string;
 }>();
 </script>
+
+<style scoped lang="scss">
+.n-image {
+  padding: 0 20px;
+  &:hover {
+    cursor: pointer;
+    background-color: green;
+  }
+}
+</style>

src/layouts/components/Header/components/Profile/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg-icon :name="name" :icon-style="iconStyle"></svg-icon>
+</template>
+
+<script setup lang="ts">
+import { CSSProperties } from 'vue';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+defineProps<{
+  name: string;
+  iconStyle: CSSProperties;
+}>();
+</script>

src/layouts/components/Header/components/Setting/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg-icon :name="name" :icon-style="iconStyle"></svg-icon>
+</template>
+
+<script setup lang="ts">
+import { CSSProperties } from 'vue';
+import SvgIcon from '@/components/SvgIcon/index.vue';
+
+defineProps<{
+  name: string;
+  iconStyle: CSSProperties;
+}>();
+</script>

src/layouts/components/Header/headerLeft.vue

@@ -186,10 +186,4 @@ watchEffect(() => {
 });
 </script>
 
-<style scoped lang="scss">
-.header-left {
-  .action-options {
-    margin-left: 50px;
-  }
-}
-</style>
+<style scoped lang="scss"></style>