-
-
+
{{ item.content }}
diff --git a/src/router/index.ts b/src/router/index.ts
index a926985..ee82085 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,10 +1,11 @@
import type { RouteRecordRaw } from 'vue-router';
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
import { jwtGuard } from './permissions';
const routes: Readonly[] = [
{
path: '/',
+ redirect: '/chat',
component: () => import('@/layouts/index.vue'),
children: [
{
@@ -14,9 +15,14 @@ const routes: Readonly[] = [
},
{
path: ':id',
- name: 'chat',
+ name: '/chat',
component: () => import('@/pages/chat/index.vue'),
},
+ {
+ path: '/chat/home',
+ name: 'chatHome',
+ component: () => import('@/pages/chat/home/index.vue'),
+ },
],
},
{
@@ -27,7 +33,7 @@ const routes: Readonly[] = [
] as const;
const router = createRouter({
- history: createWebHashHistory(),
+ history: createWebHistory(),
routes,
});
diff --git a/src/store/modules/design.ts b/src/store/modules/design.ts
index ab03231..44b318a 100644
--- a/src/store/modules/design.ts
+++ b/src/store/modules/design.ts
@@ -1,4 +1,4 @@
-import type { LayoutType } from '@/config/design';
+import type { CollapseType, LayoutType } from '@/config/design';
import { defineStore } from 'pinia';
import designSetting from '@/config/design';
@@ -9,9 +9,8 @@ const {
isPageAnimate,
pageAnimateType: rePageAnimateType,
layout: reLayout,
- isCollapse: reIsCollapse,
- isCollapseManual: reIsCollapseManual,
- isCollapseFinal: reIsCollapseFinal,
+ collapseType: reCollapseType,
+ isCollapse: reisCollapse,
} = designSetting;
export const useDesignStore = defineStore(
@@ -35,25 +34,17 @@ export const useDesignStore = defineStore(
// layout.value = layoutType;
// };
- // 更据视口宽度和阈值-是否展开左侧菜单
- const isCollapse = ref(reIsCollapse);
- const setCollapse = (collapse: boolean) => {
- isCollapse.value = collapse;
- };
-
- // 是否手动点击展开左侧菜单
- const isCollapseManual = ref(reIsCollapseManual);
- const setCollapseManual = (collapseManual: boolean): boolean => {
- isCollapseManual.value = collapseManual;
- return collapseManual;
+ // 折叠状态
+ const collapseType = ref(reCollapseType);
+ const setCollapseType = (type: CollapseType) => {
+ collapseType.value = type;
};
// 最终是否展开左侧菜单
- const isCollapseFinal = ref(reIsCollapseFinal);
+ const isCollapse = ref(reisCollapse);
const setCollapseFinal = (collapseFinal: boolean) => {
- console.log('最终的折叠状态', collapseFinal);
- isCollapseFinal.value = collapseFinal;
+ isCollapse.value = collapseFinal;
};
return {
@@ -65,11 +56,9 @@ export const useDesignStore = defineStore(
pageAnimateType,
setPageAnimateType,
layout,
+ collapseType,
+ setCollapseType,
isCollapse,
- setCollapse,
- isCollapseManual,
- setCollapseManual,
- isCollapseFinal,
setCollapseFinal,
};
},
diff --git a/src/styles/btn-style.scss b/src/styles/btn-style.scss
new file mode 100644
index 0000000..71c6fd1
--- /dev/null
+++ b/src/styles/btn-style.scss
@@ -0,0 +1,35 @@
+// 公共的图表按钮样式
+.btn-icon-btn {
+ align-items: center;
+ justify-content: center;
+ display: inline-block;
+ border: 1px solid transparent;
+ border-radius: 30%;
+ padding: 4px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+
+ // 鼠标移入
+ &:hover {
+ background-color: rgb(0, 0, 0, .05);
+
+ .svg-icon {
+ color: rgb(0, 0, 0, .6);
+ }
+ }
+
+ // 鼠标按下
+ &:active {
+ background-color: rgb(0, 0, 0, .08);
+
+ .svg-icon {
+ color: rgb(0, 0, 0, .7);
+ }
+ }
+
+ // 图标
+ .svg-icon {
+ user-select: none;
+ color: rgb(0, 0, 0, .5);
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index cfdba80..63035df 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,3 +1,4 @@
+@use './btn-style.scss';
@use 'reset-css';
@use './element-plus.scss';
diff --git a/src/styles/var.scss b/src/styles/var.scss
new file mode 100644
index 0000000..0a93a70
--- /dev/null
+++ b/src/styles/var.scss
@@ -0,0 +1,9 @@
+:root {
+ /* 头部高度 */
+ --header-container-default-heigth: 56px;
+
+ /* 侧边栏背景色 */
+ --sidebar-background-color: #f3f4f6;
+
+
+}
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
index 4d6ea84..1db43ec 100644
--- a/types/auto-imports.d.ts
+++ b/types/auto-imports.d.ts
@@ -6,66 +6,85 @@
// biome-ignore lint: disable
export {}
declare global {
- const EffectScope: typeof import('vue')['EffectScope']
- const computed: typeof import('vue')['computed']
- const createApp: typeof import('vue')['createApp']
- const customRef: typeof import('vue')['customRef']
- const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
- const defineComponent: typeof import('vue')['defineComponent']
- const effectScope: typeof import('vue')['effectScope']
- const getCurrentInstance: typeof import('vue')['getCurrentInstance']
- const getCurrentScope: typeof import('vue')['getCurrentScope']
- const h: typeof import('vue')['h']
- const inject: typeof import('vue')['inject']
- const isProxy: typeof import('vue')['isProxy']
- const isReactive: typeof import('vue')['isReactive']
- const isReadonly: typeof import('vue')['isReadonly']
- const isRef: typeof import('vue')['isRef']
- const markRaw: typeof import('vue')['markRaw']
- const nextTick: typeof import('vue')['nextTick']
- const onActivated: typeof import('vue')['onActivated']
- const onBeforeMount: typeof import('vue')['onBeforeMount']
- const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
- const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
- const onDeactivated: typeof import('vue')['onDeactivated']
- const onErrorCaptured: typeof import('vue')['onErrorCaptured']
- const onMounted: typeof import('vue')['onMounted']
- const onRenderTracked: typeof import('vue')['onRenderTracked']
- const onRenderTriggered: typeof import('vue')['onRenderTriggered']
- const onScopeDispose: typeof import('vue')['onScopeDispose']
- const onServerPrefetch: typeof import('vue')['onServerPrefetch']
- const onUnmounted: typeof import('vue')['onUnmounted']
- const onUpdated: typeof import('vue')['onUpdated']
- const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
- const provide: typeof import('vue')['provide']
- const reactive: typeof import('vue')['reactive']
- const readonly: typeof import('vue')['readonly']
- const ref: typeof import('vue')['ref']
- const resolveComponent: typeof import('vue')['resolveComponent']
- const shallowReactive: typeof import('vue')['shallowReactive']
- const shallowReadonly: typeof import('vue')['shallowReadonly']
- const shallowRef: typeof import('vue')['shallowRef']
- const toRaw: typeof import('vue')['toRaw']
- const toRef: typeof import('vue')['toRef']
- const toRefs: typeof import('vue')['toRefs']
- const toValue: typeof import('vue')['toValue']
- const triggerRef: typeof import('vue')['triggerRef']
- const unref: typeof import('vue')['unref']
- const useAttrs: typeof import('vue')['useAttrs']
- const useCssModule: typeof import('vue')['useCssModule']
- const useCssVars: typeof import('vue')['useCssVars']
- const useId: typeof import('vue')['useId']
- const useModel: typeof import('vue')['useModel']
- const useSlots: typeof import('vue')['useSlots']
- const useTemplateRef: typeof import('vue')['useTemplateRef']
- const watch: typeof import('vue')['watch']
- const watchEffect: typeof import('vue')['watchEffect']
- const watchPostEffect: typeof import('vue')['watchPostEffect']
- const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+ const EffectScope: (typeof import("vue"))["EffectScope"];
+ const ElMessage: (typeof import("element-plus/es"))["ElMessage"];
+ const ElMessageBox: (typeof import("element-plus/es"))["ElMessageBox"];
+ const computed: (typeof import("vue"))["computed"];
+ const createApp: (typeof import("vue"))["createApp"];
+ const customRef: (typeof import("vue"))["customRef"];
+ const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
+ const defineComponent: (typeof import("vue"))["defineComponent"];
+ const effectScope: (typeof import("vue"))["effectScope"];
+ const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
+ const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
+ const h: (typeof import("vue"))["h"];
+ const inject: (typeof import("vue"))["inject"];
+ const isProxy: (typeof import("vue"))["isProxy"];
+ const isReactive: (typeof import("vue"))["isReactive"];
+ const isReadonly: (typeof import("vue"))["isReadonly"];
+ const isRef: (typeof import("vue"))["isRef"];
+ const markRaw: (typeof import("vue"))["markRaw"];
+ const nextTick: (typeof import("vue"))["nextTick"];
+ const onActivated: (typeof import("vue"))["onActivated"];
+ const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
+ const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
+ const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
+ const onDeactivated: (typeof import("vue"))["onDeactivated"];
+ const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
+ const onMounted: (typeof import("vue"))["onMounted"];
+ const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
+ const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
+ const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
+ const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
+ const onUnmounted: (typeof import("vue"))["onUnmounted"];
+ const onUpdated: (typeof import("vue"))["onUpdated"];
+ const onWatcherCleanup: (typeof import("vue"))["onWatcherCleanup"];
+ const provide: (typeof import("vue"))["provide"];
+ const reactive: (typeof import("vue"))["reactive"];
+ const readonly: (typeof import("vue"))["readonly"];
+ const ref: (typeof import("vue"))["ref"];
+ const resolveComponent: (typeof import("vue"))["resolveComponent"];
+ const shallowReactive: (typeof import("vue"))["shallowReactive"];
+ const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
+ const shallowRef: (typeof import("vue"))["shallowRef"];
+ const toRaw: (typeof import("vue"))["toRaw"];
+ const toRef: (typeof import("vue"))["toRef"];
+ const toRefs: (typeof import("vue"))["toRefs"];
+ const toValue: (typeof import("vue"))["toValue"];
+ const triggerRef: (typeof import("vue"))["triggerRef"];
+ const unref: (typeof import("vue"))["unref"];
+ const useAttrs: (typeof import("vue"))["useAttrs"];
+ const useCssModule: (typeof import("vue"))["useCssModule"];
+ const useCssVars: (typeof import("vue"))["useCssVars"];
+ const useId: (typeof import("vue"))["useId"];
+ const useModel: (typeof import("vue"))["useModel"];
+ const useSlots: (typeof import("vue"))["useSlots"];
+ const useTemplateRef: (typeof import("vue"))["useTemplateRef"];
+ const watch: (typeof import("vue"))["watch"];
+ const watchEffect: (typeof import("vue"))["watchEffect"];
+ const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
+ const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
}
// for type re-export
declare global {
// @ts-ignore
- export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
- import('vue')
+ export type {
+ Component,
+ Slot,
+ Slots,
+ ComponentPublicInstance,
+ ComputedRef,
+ DirectiveBinding,
+ ExtractDefaultPropTypes,
+ ExtractPropTypes,
+ ExtractPublicPropTypes,
+ InjectionKey,
+ PropType,
+ Ref,
+ MaybeRef,
+ MaybeRefOrGetter,
+ VNode,
+ WritableComputedRef,
+ } from "vue";
+ import("vue");
}
diff --git a/types/components.d.ts b/types/components.d.ts
index f0b4b5f..c62200b 100644
--- a/types/components.d.ts
+++ b/types/components.d.ts
@@ -3,21 +3,20 @@
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable
-export {}
+export {};
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
- ElAside: typeof import('element-plus/es')['ElAside']
+ ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElContainer: typeof import('element-plus/es')['ElContainer']
+ ElEmpty: typeof import('element-plus/es')['ElEmpty']
ElHeader: typeof import('element-plus/es')['ElHeader']
ElIcon: typeof import('element-plus/es')['ElIcon']
- ElInput: typeof import('element-plus/es')['ElInput']
+ ElImage: typeof import('element-plus/es')['ElImage']
ElMain: typeof import('element-plus/es')['ElMain']
- ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
- ElTabPane: typeof import('element-plus/es')['ElTabPane']
- ElTabs: typeof import('element-plus/es')['ElTabs']
IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
+ Popover: typeof import('./../src/components/Popover/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
SvgIcon: typeof import('./../src/components/SvgIcon/index.vue')['default']
diff --git a/vite.config.ts b/vite.config.ts
index 2d06669..5a9b6a5 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -36,5 +36,13 @@ export default defineConfig(({ mode, command }) => {
"@": path.resolve(__dirname, "./src"),
},
},
+ css: {
+ // css全局变量使用，@/styles/variable.scss文件
+ preprocessorOptions: {
+ scss: {
+ additionalData: '@use "@/styles/var.scss" as *;',
+ },
+ },
+ },
};
});