fix: 修改文件结构

2026-05-12 00:00:01 +08:00 · 2022-01-26 15:46:25 +08:00
parent 01e2ba6db9
commit 2f2a395406
37 changed files with 8 additions and 6 deletions
@@ -0,0 +1,119 @@
+<template>
+  <!-- 左侧所有组件的展示列表 -->
+  <ContentBox
+    class="go-content-charts"
+    :class="{ scoped: !getCharts }"
+    title="组件"
+    :depth="1"
+    :backIcon="false"
+  >
+    <template #icon>
+      <n-icon size="14" :depth="2">
+        <BarChartIcon />
+      </n-icon>
+    </template>
+    <!-- 图表 -->
+    <aside>
+      <div class="menu-width-box">
+        <n-menu
+          class="menu-width"
+          v-model:value="selectValue"
+          :options="menuOptions"
+          :icon-size="16"
+          :indent="18"
+          @update:value="clickItemHandle"
+        />
+        <div class="menu-component-box">
+          <Skeleton
+            :load="!selectOptions"
+            round
+            text
+            :repeat="2"
+            style="width: 90%;"
+          />
+          <OptionContent
+            v-if="selectOptions"
+            :selectOptions="selectOptions"
+            :key="selectValue"
+          />
+        </div>
+      </div>
+    </aside>
+  </ContentBox>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, toRefs } from 'vue'
+import { ContentBox } from '../ContentBox/index'
+import { OptionContent } from './components/OptionContent'
+import {
+  getCharts,
+  BarChartIcon,
+  themeColor,
+  selectOptions,
+  selectValue,
+  clickItemHandle,
+  menuOptions
+} from './hooks/useAside.hook'
+</script>
+
+<style lang="scss" scoped>
+/* 整体宽度 */
+$width: 330px;
+/* 列表的宽度 */
+$widthScoped: 65px;
+/* 此高度与 ContentBox 组件关联*/
+$topHeight: 36px;
+
+@include go(content-charts) {
+  width: $width;
+  @extend .go-transition;
+  &.scoped,
+  .menu-width {
+    width: $widthScoped;
+  }
+  .menu-width-box {
+    display: flex;
+    height: calc(100vh - #{$--header-height} - #{$topHeight});
+    .menu-width {
+      flex-shrink: 0;
+      @include filter-bg-color('background-color2');
+    }
+    .menu-component-box {
+      flex-shrink: 0;
+      width: $width - $widthScoped;
+      overflow: hidden;
+    }
+  }
+  @include deep() {
+    .menu-width {
+      .n-menu-item {
+        height: auto !important;
+        &.n-menu-item--selected {
+          &::after {
+            content: '';
+            position: absolute;
+            left: 2px;
+            top: 0;
+            height: 100%;
+            width: 3px;
+            background-color: v-bind('themeColor');
+            border-top-right-radius: 3px;
+            border-bottom-right-radius: 3px;
+          }
+        }
+        .n-menu-item-content {
+          display: flex;
+          flex-direction: column;
+          padding: 6px 12px !important;
+          font-size: 14px !important;
+        }
+        .n-menu-item-content__icon {
+          font-size: 18px !important;
+          margin-right: 0 !important;
+        }
+      }
+    }
+  }
+}
+</style>