feat: add style set/get methods

src/components/common/TableHeader.vue

@@ -15,6 +15,7 @@
           v-for="(c, i) in r"
           :key="i"
           class="xg-table-header-cell"
+          :style="{ ...$styleBox.getBorderColor() }"
           :colspan="c.colSpan"
           :rowspan="c.rowSpan"
         >
@@ -27,9 +28,12 @@
 
 <script lang="ts" setup>
 import useSlotsBox from '@/composables/useSlotsBox';
+import useStyle from '@/composables/useStyle';
 import Variables from '@/constants/vars';
 import { getColumnWidth } from '../column/util';
 const { $slotsBox } = useSlotsBox();
+
+const { $styleBox } = useStyle();
 </script>
 
 <style lang="scss" scoped>
@@ -42,6 +46,7 @@ const { $slotsBox } = useSlotsBox();
   top: 0;
   position: sticky;
   z-index: 10;
+  overflow: hidden;
 
   .xg-table-header-cell {
     overflow: hidden;
@@ -50,6 +55,9 @@ const { $slotsBox } = useSlotsBox();
     text-align: left;
     position: relative;
     box-sizing: border-box;
+    border-bottom: 1px solid;
+    border-right: 1px solid;
+    padding: 0 20px;
   }
 }
 </style>

src/components/root/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="xg-root">
+  <div
+    class="xg-root"
+    :style="{ ...$styleBox.getBorder(), ...$styleBox.getBorderColor() }"
+  >
     <!-- 左侧表格 -->
     <sync-scroll-container
       ref="tableRef"
@@ -55,6 +58,7 @@ import { uuid } from '@/utils/common';
 import { onMounted, onUpdated, ref, toRefs, watch } from 'vue';
 import rootProps from './rootProps';
 import useData from '@/composables/useData';
+import useStyle from '@/composables/useStyle';
 
 const containerId = uuid(10);
 const props = defineProps(rootProps);
@@ -78,6 +82,11 @@ onMounted(getScrollGapSize);
 onUpdated(getScrollGapSize);
 // #endregion
 
+// #region 处理样式参数
+const { setStyles, $styleBox } = useStyle();
+setStyles(props);
+// #endregion
+
 // #region 处理插槽内容
 const { setSlots } = useSlotsBox();
 

src/components/root/rootProps.ts

@@ -118,7 +118,7 @@ export default {
    */
   borderColor: {
     type: String,
-    default: ''
+    default: '#e5e5e5'
   },
 
   /**
@@ -214,7 +214,7 @@ export default {
    */
   primaryColor: {
     type: String,
-    default: ''
+    default: '#eca710'
   },
 
   /**

src/composables/useStyle.ts

@@ -1,10 +1,16 @@
+import type rootProps from '@/components/root/rootProps';
 import { useStore } from '@/store';
-import { ref } from 'vue';
+import { type ExtractPropTypes, ref } from 'vue';
 
 export default () => {
   const store = useStore();
 
   const bodyHeight = ref(`${20 * store.$data.length}px`);
 
-  return { bodyHeight };
+  const setStyles = (props: ExtractPropTypes<typeof rootProps>) => {
+    store.$styleBox.setBorder(props.border);
+    store.$styleBox.setBorderColor(props.borderColor);
+  };
+
+  return { bodyHeight, setStyles, $styleBox: store.$styleBox };
 };

src/models/param/index.ts

@@ -1,3 +1,4 @@
 import SlotsBox from './slotsBox';
+import StyleBox from './styles';
 
-export { SlotsBox };
+export { SlotsBox, StyleBox };

src/models/param/styles.ts

@@ -0,0 +1,22 @@
+type Style = Record<string, string>;
+
+export default class StyleBox {
+  private border: number = 1;
+  private borderColor: string = '#e5e5e5';
+
+  setBorder(b: number) {
+    this.border = b;
+  }
+
+  getBorder(): Style {
+    return { border: `${this.border}px solid` };
+  }
+
+  setBorderColor(bc: string) {
+    this.borderColor = bc;
+  }
+
+  getBorderColor(): Style {
+    return { 'border-color': this.borderColor };
+  }
+}

src/store/index.ts

@@ -8,8 +8,8 @@
 
 import { inject, provide, reactive, type Ref, ref } from 'vue';
 import EventBus from '@/utils/bus';
-import { SlotsBox } from '@/models/param';
 import { AllData } from '@/models/data';
+import { SlotsBox, StyleBox } from '@/models/param';
 
 export const initStore = () => {
   const Bus = reactive(new EventBus());
@@ -23,6 +23,9 @@ export const initStore = () => {
 
   const data = reactive(new AllData());
   provide('$data', data);
+
+  const styleBox = reactive(new StyleBox());
+  provide('$styleBox', styleBox);
 };
 
 export const useStore = () => {
@@ -45,7 +48,12 @@ export const useStore = () => {
     /**
      * 展示的数据
      */
-    $data: inject('$data') as AllData
+    $data: inject('$data') as AllData,
+
+    /**
+     * 样式盒子，所有样式都保存在这里来管理样式
+     */
+    $styleBox: inject('$styleBox') as StyleBox
   };
 };