optimize the vue component communication, replace event listening with share data

web/src/components/admin/AdminHeader.vue

@@ -52,13 +52,14 @@
   </div>
 </template>
 <script setup>
-import {computed, onMounted, ref} from 'vue';
+import {onMounted, ref, watch} from 'vue';
 import {getMenuItems, useSidebarStore} from '@/store/sidebar';
 import {useRouter} from "vue-router";
 import {ArrowDown, ArrowRight, Expand, Fold, Moon, Sunny} from "@element-plus/icons-vue";
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {removeAdminToken} from "@/store/session";
+import {useSharedStore} from "@/store/sharedata";
 
 const version = ref(process.env.VUE_APP_VERSION)
 const avatar = ref('/images/user-info.jpg')
@@ -66,24 +67,18 @@ const sidebar = useSidebarStore();
 const router = useRouter();
 const breadcrumb = ref([])
 
-// eslint-disable-next-line no-undef
-const props = defineProps({
-  theme: String,
-});
-
-const theme = computed(() => {
-  return props.theme
+const store = useSharedStore()
+const dark = ref(store.adminTheme === 'dark')
+const theme = ref(store.adminTheme)
+watch(() => store.adminTheme, (val) => {
+  theme.value = val
 })
-const dark = ref(props.theme === 'dark' ? true : false)
 
-
-// eslint-disable-next-line no-undef
-const emits = defineEmits(['changeTheme']);
 const changeTheme = () => {
-  emits('changeTheme', dark.value)
+  store.setAdminTheme(dark.value ? 'dark' : 'light')
 }
 
-router.afterEach((to, from) => {
+router.afterEach((to) => {
   initBreadCrumb(to.path)
 });
 

web/src/components/admin/AdminSidebar.vue

@@ -52,11 +52,12 @@
 </template>
 
 <script setup>
-import {computed, ref} from 'vue';
+import {computed, ref, watch} from 'vue';
 import {setMenuItems, useSidebarStore} from '@/store/sidebar';
 import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {useRoute} from "vue-router";
+import {useSharedStore} from "@/store/sharedata";
 
 const title = ref('')
 const logo = ref('')
@@ -68,16 +69,11 @@ httpGet('/api/admin/config/get?key=system').then(res => {
 }).catch(e => {
   ElMessage.error("加载系统配置失败: " + e.message)
 })
-
-// eslint-disable-next-line no-undef
-const props = defineProps({
-  theme: String,
-});
-
-const theme = computed(() => {
-  return props.theme
+const store = useSharedStore()
+const theme = ref(store.adminTheme)
+watch(() => store.adminTheme, (val) => {
+  theme.value = val
 })
-
 const items = [
   {
     icon: 'home',

web/src/components/admin/AdminTags.vue

@@ -38,17 +38,14 @@ import {onBeforeRouteUpdate, useRoute, useRouter} from 'vue-router';
 import {ArrowDown, Close} from "@element-plus/icons-vue";
 import {checkAdminSession} from "@/store/cache";
 import {ElMessageBox} from "element-plus";
-import {computed} from "vue";
+import {useSharedStore} from "@/store/sharedata";
+import {ref, watch} from "vue";
 
-// eslint-disable-next-line no-undef
-const props = defineProps({
-  theme: String,
-});
-
-const theme = computed(() => {
-  return props.theme
+const store = useSharedStore()
+const theme = ref(store.adminTheme)
+watch(() => store.adminTheme, (val) => {
+  theme.value = val
 })
-
 const router = useRouter();
 checkAdminSession().catch(() => {
   ElMessageBox({