xiangyuan-gov-app/src/components/keyboard/NumberKeyBoardKey.vue

<template>
  <Touchable
    v-if="text"
    :innerStyle="keyStyle"
    :pressedColor="action === 'finish' ? context.keyFinishPressedColor.value : context.keyPressedColor.value"
    touchable
    direction="column"
    @click="emit('click', action, text)"
  >
    <Icon v-if="icon" :icon="text" :innerStyle="context.keyTextStyle.value" />
    <Text v-else :innerStyle="action === 'finish' ? context.keyTextStyleFinish.value : context.keyTextStyle.value" :text="text" />
  </Touchable>
  <view
    v-else
    :style="keyStyle"
  />
</template>

<script setup lang="ts">
import { computed, inject } from 'vue';
import { useTheme, type ViewStyle } from '../theme/ThemeDefine';
import { DynamicSize } from '../theme/ThemeTools';
import type { NumberKeyBoardContext } from './NumberKeyBoardInner.vue';
import Text from '../basic/Text.vue';;
import Icon from '../basic/Icon.vue';
import Touchable from '../feedback/Touchable.vue';

export interface NumberKeyBoardKeyProps {
  text: string;
  icon: boolean;
  action?: string;
  widthCount?: number;
  heightCount?: number;
  side?: boolean;
}

const emit = defineEmits([ 'click' ]);
const props = withDefaults(defineProps<NumberKeyBoardKeyProps>(), {
  action: '',
  widthCount: 2,
  heightCount: 2,
  side: false
});

const context = inject<NumberKeyBoardContext>('NumberKeyBoardContext') as NumberKeyBoardContext;
const keyWidthReal = computed(() => props.widthCount * context.keyWidthBase.value + context.keyMargin.value * (props.widthCount - 1) - 5);
const keyHeightReal = computed(() => props.heightCount * context.keyHeight.value + (props.side ? context.keyMargin.value * (props.heightCount - 1) : 0));
const keyStyle = computed(() => ({
  ...themeStyles.key.value,
  backgroundColor: themeContext.resolveThemeColor(props.action === 'finish' ? context.keyFinishColor.value : context.keyColor.value),
  width: themeContext.resolveSize(keyWidthReal.value),
  height: themeContext.resolveSize(keyHeightReal.value),
  minHeight: themeContext.resolveSize(keyHeightReal.value),
  marginLeft: themeContext.resolveSize(props.side ? 0 : context.keyMargin.value),
  marginRight: themeContext.resolveSize(props.side ? context.keyMargin.value : 0),
  marginTop: themeContext.resolveSize(context.keyMargin.value),
  ...context.keyStyle.value,
}) as ViewStyle);

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  key: {
    display: 'flex',
    height: DynamicSize('NumberKeyBoardKeyHeight', 20),
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: DynamicSize('NumberKeyBoardKeyBorderRadius', 12),
  },
});
</script>