xiangyuan-app/src/components/nav/SideBar.vue

<template>
  <view :style="{
    ...themeStyles.container.value, 
    ...props.innerStyle
  }">
    <slot name="background" />
    <slot />
  </view>
</template>


<script setup lang="ts">
import { computed, provide, toRef, type Ref } from 'vue';
import { useTheme, type TextStyle, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicColor } from '../theme/ThemeTools';

export interface SideBarProps {
  /**
   * 自定义外层样式
   */
  innerStyle?: ViewStyle;
  /**
    * 选中文字颜色
    * @default primary
    */
  activeColor?: string;
  /**
    * 选中时条目的样式
    */
  activeStyle?: ViewStyle;
  /**
    * 选中时条目左侧的标记的样式
    */
  activeBadgeStyle?: ViewStyle;
  /**
    * 未选中文字颜色
    * @default text.title
    */
  inactiveColor?: string;
  /**
    * 禁用文字颜色
    * @default text.second
    */
  disableColor?: string;
  /**
    * 未选中时条目的样式
    */
  inactiveStyle?: ViewStyle;
  /**
    * 标签文字样式
    */
  textStyle?: TextStyle;
  /**
    * 选中的条目名称。
    * @default ''
    */
  modelValue?: string|number,
}

const emit = defineEmits([ 'update:modelValue', 'clickItem' ])
const props = withDefaults(defineProps<SideBarProps>(), {
  activeColor: 'primary',
  inactiveColor: 'text.title',
  disableColor: 'text.second',
});

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  container: {
    position: 'relative',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
  activeStyle: {
    backgroundColor: DynamicColor('SideBarItemActiveBackgroundColor', 'white'),
  },
  inactiveStyle: {
    backgroundColor: DynamicColor('SideBarItemInactiveBackgroundColor', 'light'),
  },
});

const activeStyle = computed(() => props.activeStyle || themeStyles.activeStyle.value);
const inactiveStyle = computed(() => props.inactiveStyle || themeStyles.inactiveStyle.value);

export interface SideBarContext {
  selectedName: Ref<string|number|undefined>,
  activeColor: Ref<string>,
  inactiveColor: Ref<string>,
  disableColor: Ref<string>,
  activeStyle: Ref<ViewStyle>,
  inactiveStyle: Ref<ViewStyle>,
  textStyle: Ref<TextStyle|undefined>,
  activeBadgeStyle: Ref<ViewStyle|undefined>,
  onItemClick: (name: string|number) => void,
}
provide<SideBarContext>('SideBarContext', {
  selectedName: toRef(props, 'modelValue'),
  activeColor: toRef(props, 'activeColor'),
  disableColor: toRef(props, 'disableColor'),
  inactiveColor: toRef(props, 'inactiveColor'),
  activeStyle: activeStyle,
  inactiveStyle: inactiveStyle,
  textStyle: toRef(props, 'textStyle'),
  activeBadgeStyle: toRef(props, 'activeBadgeStyle'),
  onItemClick: (name) => {
    emit('update:modelValue', name);
    emit('clickItem', name);
  },
})


</script>