smartai2dian0/src/views/Settings.vue

<template>
  <LayoutExperience>
    <ContentContainer :containerStyle="content_style">
      <div class="settings-container">
        <div class="settings-aside-menu-container">
          <a-menu :style="{ width: '200px', borderRadius: '4px' }" @menu-item-click="handleMenuClick">
            <!-- <a-menu-item key="/settings/profile">修改资料</a-menu-item> -->
            <a-menu-item key="/settings/global">
              <template #icon>
                <icon-file />
              </template>

              {{ $t('settings.global') }}
            </a-menu-item>

            <a-menu-item key="/settings/password">
              <template #icon>
                <icon-lock />
              </template>

              {{ $t('settings.password') }}
            </a-menu-item>

            <!-- <a-menu-item key="/settings/phone">绑定电话号码</a-menu-item> -->
            <!-- <a-menu-item key="/settings/email">绑定邮箱</a-menu-item> -->
            <!-- <a-menu-item key="1_0">logo设置</a-menu-item> -->
            <!-- <a-menu-item key="1_1">主题设置</a-menu-item> -->
            <!-- <a-menu-item key="1_2">多语言设置</a-menu-item> -->
          </a-menu>
        </div>

        <div class="settings-main-content-container">
          <router-view></router-view>
        </div>
      </div>
    </ContentContainer>
  </LayoutExperience>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import LayoutExperience from './layout/LayoutExperience.vue';
import ContentContainer from './layout/ContentContainer.vue';

import bg_image from '../assets/chat/board-bg.png';

const router = useRouter();

const content_style = {
  // backgroundImage: `url(${bg_image})`,
  backgroundRepeat: 'no-repeat',
  backgroundSize: 'contain'
};

const collapsed = ref(false);

const handleMenuClick = (key) => {
  router.push({
    path: key
  });
};
</script>

<style scoped>
.settings-container {
  display: flex;
  justify-content: flex-start;
}

.settings-aside-menu-container {
  box-sizing: border-box;

  background-color: var(--color-menu-light-bg);

  padding: 10px;
  height: calc(100vh - 90px);
}

.settings-main-content-container {
  box-sizing: border-box;

  background-color: var(--color-fill-1);

  flex-grow: 1;

  padding: 15px;
  height: calc(100vh - 90px);
}
</style>