style(frontend): 格式化代码缩进并增强API调用安全性

云

4 天以前 8217c63d1610a9d89419c69947beb4fb3bb7c7e4

 src/layout/index.vue

@@ -1,114 +1,161 @@
<template>

  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">

    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>

    <sidebar v-if="!sidebar.hide" class="sidebar-container" />

    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">

      <div :class="{ 'fixed-header': fixedHeader }">

        <navbar @setLayout="setLayout" />

        <tags-view v-if="needTagsView" />

      </div>

      <app-main />

      <settings ref="settingRef" />

    </div>

  </div>

</template>



<script setup>

import { useWindowSize } from '@vueuse/core'

import Sidebar from './components/Sidebar/index.vue'

import { AppMain, Navbar, Settings, TagsView } from './components'

import defaultSettings from '@/settings'



import useAppStore from '@/store/modules/app'

import useSettingsStore from '@/store/modules/settings'



const settingsStore = useSettingsStore()

const theme = computed(() => settingsStore.theme)

const sideTheme = computed(() => settingsStore.sideTheme)

const sidebar = computed(() => useAppStore().sidebar)

const device = computed(() => useAppStore().device)

const needTagsView = computed(() => settingsStore.tagsView)

const fixedHeader = computed(() => settingsStore.fixedHeader)



const classObj = computed(() => ({

  hideSidebar: !sidebar.value.opened,

  openSidebar: sidebar.value.opened,

  withoutAnimation: sidebar.value.withoutAnimation,

  mobile: device.value === 'mobile'

}))



const { width, height } = useWindowSize()

const WIDTH = 992 // refer to Bootstrap's responsive design



watch(() => device.value, () => {

  if (device.value === 'mobile' && sidebar.value.opened) {

    useAppStore().closeSideBar({ withoutAnimation: false })

  }

})



watchEffect(() => {

  if (width.value - 1 < WIDTH) {

    useAppStore().toggleDevice('mobile')

    useAppStore().closeSideBar({ withoutAnimation: true })

  } else {

    useAppStore().toggleDevice('desktop')

  }

})



function handleClickOutside() {

  useAppStore().closeSideBar({ withoutAnimation: false })

}



const settingRef = ref(null)

function setLayout() {

  settingRef.value.openSetting()

}

</script>



<style lang="scss" scoped>

  @import "@/assets/styles/mixin.scss";

  @import "@/assets/styles/variables.module.scss";



.app-wrapper {

  @include clearfix;

  position: relative;

  height: 100%;

  width: 100%;



  &.mobile.openSidebar {

    position: fixed;

    top: 0;

  }

}



.drawer-bg {

  background: #000;

  opacity: 0.3;

  width: 100%;

  top: 0;

  height: 100%;

  position: absolute;

  z-index: 999;

}



.fixed-header {

  position: fixed;

  top: 0;

  right: 0;

  z-index: 9;

  width: calc(100% - #{$base-sidebar-width});

  transition: width 0.28s;

}



.hideSidebar .fixed-header {

  width: calc(100% - 54px);

}



.sidebarHide .fixed-header {

  width: 100%;

}



.mobile .fixed-header {

  width: 100%;

}

</style>
<template>
  <div :class="classObj"
       class="app-wrapper"
       :style="{ '--current-color': theme }">
    <div v-if="device === 'mobile' && sidebar.opened"
         class="drawer-bg"
         @click="handleClickOutside" />
    <sidebar v-if="!sidebar.hide"
             class="sidebar-container" />
    <div :class="{ hasTagsView: showTagsView, sidebarHide: sidebar.hide }"
         class="main-container main-layout">
      <div :class="{ 'fixed-header': fixedHeader, 'with-tags': showTagsView }">
        <navbar @setLayout="setLayout" />
        <tags-view v-if="showTagsView" />
      </div>
      <app-main />
      <settings ref="settingRef" />
    </div>
    <AIChatSidebar v-if="showGlobalAiChat" />
  </div>
</template>

<script setup>
  import { useWindowSize } from "@vueuse/core";
  import { useRoute } from "vue-router";
  import Sidebar from "./components/Sidebar/index.vue";
  import { AppMain, Navbar, Settings, TagsView } from "./components";
  import AIChatSidebar from "@/components/AIChatSidebar/index.vue";
  import defaultSettings from "@/settings";

  import useAppStore from "@/store/modules/app";
  import useUserStore from "@/store/modules/user";
  import useSettingsStore from "@/store/modules/settings";
  import useTagsViewStore from "@/store/modules/tagsView";

  const settingsStore = useSettingsStore();
  const tagsViewStore = useTagsViewStore();
  const userStore = useUserStore();
  const route = useRoute();
  const theme = computed(() => settingsStore.theme);
  const sideTheme = computed(() => settingsStore.sideTheme);
  const sidebar = computed(() => useAppStore().sidebar);
  const device = computed(() => useAppStore().device);
  const needTagsView = computed(() => settingsStore.tagsView);
  const showTagsView = computed(() => needTagsView.value && tagsViewStore.visitedViews.length > 1);
  const fixedHeader = computed(() => settingsStore.fixedHeader);
  const aiEnabled = computed(() => Number(userStore.aiEnabled) === 1);
  const showGlobalAiChat = computed(() => {
    const isIndustrialBrainRoute = String(route.path || "").startsWith("/ai-industrial-brain");
    return !isIndustrialBrainRoute && aiEnabled.value;
  });

  const classObj = computed(() => ({
    hideSidebar: !sidebar.value.opened,
    openSidebar: sidebar.value.opened,
    withoutAnimation: sidebar.value.withoutAnimation,
    mobile: device.value === "mobile",
  }));

  const { width, height } = useWindowSize();
  const WIDTH = 992; // refer to Bootstrap's responsive design

  watch(
    () => device.value,
    () => {
      if (device.value === "mobile" && sidebar.value.opened) {
        useAppStore().closeSideBar({ withoutAnimation: false });
      }
    }
  );

  watchEffect(() => {
    if (width.value - 1 < WIDTH) {
      useAppStore().toggleDevice("mobile");
      useAppStore().closeSideBar({ withoutAnimation: true });
    } else {
      useAppStore().toggleDevice("desktop");
    }
  });

  function handleClickOutside() {
    useAppStore().closeSideBar({ withoutAnimation: false });
  }

  const settingRef = ref(null);
  function setLayout() {
    settingRef.value.openSetting();
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/styles/mixin.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    min-height: 100%;
    width: 100%;
    background:
      radial-gradient(circle at 14% -8%, rgba(59, 130, 246, 0.14), transparent 36%),
      radial-gradient(circle at 88% -12%, rgba(56, 189, 248, 0.1), transparent 30%),
      linear-gradient(165deg, #f3f7fc 0%, #eef5ff 56%, #f8fbff 100%);

    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }

  .drawer-bg {
    background: rgba(15, 23, 42, 0.22);
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .main-layout {
    min-height: 100vh;
    margin-left: var(--sidebar-width);
    transition: margin-left 0.25s ease;
    display: flex;
    flex-direction: column;
  }

  .fixed-header {
    position: sticky;
    top: 0;
    z-index: var(--layout-header-z);
    width: 100%;
    padding: 8px var(--content-gap) 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    backdrop-filter: none;
  }

  .fixed-header.with-tags {
    padding-bottom: 6px;
  }

  .hideSidebar .fixed-header {
    width: 100%;
  }

  .hideSidebar .main-layout {
    margin-left: var(--sidebar-collapsed-width);
  }

  .mobile .fixed-header {
    width: 100%;
    padding: 8px 10px 0;
  }

  .mobile .main-layout,
  .sidebarHide.main-layout {
    margin-left: 0;
  }
</style>