feat(image): 新建knowai-ui:1.0.0镜像并完成推送

- 最终完成16个组件的搭建，覆盖常用组件和布局 - 通过tsc eslint完成测试，vitest测试因未知问题放弃（但保留测试文件） BREAKING CHANGE: 新镜像分支
2025-11-14 14:48:18 +08:00
parent 32787bb397
commit b74c01340c
119 changed files with 19719 additions and 0 deletions
--- a/src/components/Container/index.vue
+++ b/src/components/Container/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div
+    class="k-container"
+    :class="containerClass"
+    :style="containerStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from 'vue';
+import { ContainerProps } from './types';
+
+export default defineComponent({
+  name: 'KContainer',
+  props: {
+    fluid: {
+      type: Boolean,
+      default: false
+    },
+    maxWidth: {
+      type: [String, Number],
+      default: ''
+    },
+    padding: {
+      type: [String, Number, Array],
+      default: ''
+    },
+    margin: {
+      type: [String, Number, Array],
+      default: ''
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    bgColor: {
+      type: String,
+      default: ''
+    },
+    borderRadius: {
+      type: [String, Number],
+      default: ''
+    },
+    shadow: {
+      type: String as () => 'always' | 'hover' | 'never',
+      default: 'never'
+    }
+  },
+  setup(props: ContainerProps) {
+    const containerClass = computed(() => {
+      return [
+        {
+          'k-container--fluid': props.fluid,
+          'k-container--center': props.center,
+          [`k-container--shadow-${props.shadow}`]: props.shadow !== 'never'
+        }
+      ];
+    });
+
+    const containerStyle = computed(() => {
+      const style: Record<string, string> = {};
+
+      // 最大宽度
+      if (props.maxWidth) {
+        if (typeof props.maxWidth === 'number') {
+          style.maxWidth = `${props.maxWidth}px`;
+        } else {
+          style.maxWidth = props.maxWidth;
+        }
+      }
+
+      // 内边距
+      if (props.padding) {
+        if (typeof props.padding === 'number') {
+          style.padding = `${props.padding}px`;
+        } else if (Array.isArray(props.padding)) {
+          if (props.padding.length === 1) {
+            style.padding = `${props.padding[0]}px`;
+          } else if (props.padding.length === 2) {
+            style.padding = `${props.padding[0]}px ${props.padding[1]}px`;
+          } else if (props.padding.length === 4) {
+            style.padding = `${props.padding[0]}px ${props.padding[1]}px ${props.padding[2]}px ${props.padding[3]}px`;
+          }
+        } else {
+          style.padding = props.padding;
+        }
+      }
+
+      // 外边距
+      if (props.margin) {
+        if (typeof props.margin === 'number') {
+          style.margin = `${props.margin}px`;
+        } else if (Array.isArray(props.margin)) {
+          if (props.margin.length === 1) {
+            style.margin = `${props.margin[0]}px`;
+          } else if (props.margin.length === 2) {
+            style.margin = `${props.margin[0]}px ${props.margin[1]}px`;
+          } else if (props.margin.length === 4) {
+            style.margin = `${props.margin[0]}px ${props.margin[1]}px ${props.margin[2]}px ${props.margin[3]}px`;
+          }
+        } else {
+          style.margin = props.margin;
+        }
+      }
+
+      // 背景颜色
+      if (props.bgColor) {
+        style.backgroundColor = props.bgColor;
+      }
+
+      // 圆角
+      if (props.borderRadius) {
+        if (typeof props.borderRadius === 'number') {
+          style.borderRadius = `${props.borderRadius}px`;
+        } else {
+          style.borderRadius = props.borderRadius;
+        }
+      }
+
+      return style;
+    });
+
+    return {
+      containerClass,
+      containerStyle
+    };
+  }
+});
+</script>