feat:单元格/行列样式

src/views/components/Custom.vue

@@ -85,6 +85,68 @@
         :placeholder="item.placeholder"
       />
     </div>
+    <div v-if="props.pen.name === 'tablePlus'">
+      <div
+        class="form-cell"
+        v-if="cell.row !== undefined && cell.col !== undefined"
+      >
+        选中单元格（第{{ cell.row }}行，第{{ cell.col }}列）样式
+      </div>
+      <div
+        class="form-cell"
+        v-else-if="cell.row !== undefined && cell.col === undefined"
+      >
+        第{{ cell.row }}行样式
+      </div>
+      <div
+        class="form-cell"
+        v-if="cell.row === undefined && cell.col !== undefined"
+      >
+        第{{ cell.col }}列样式
+      </div>
+      <t-space direction="vertical" size="small" class="w-full">
+        <div class="form-item">
+          <label>背景颜色</label>
+          <t-color-picker
+            class="w-full"
+            :enable-alpha="true"
+            :recent-colors="null"
+            format="CSS"
+            :swatch-colors="defaultPureColor"
+            :color-modes="['monochrome']"
+            :show-primary-color-preview="false"
+            v-model="cell.background"
+            @change="changeStyles('background')"
+          />
+        </div>
+        <div class="form-item">
+          <label>文字颜色</label>
+          <t-color-picker
+            class="w-full"
+            :enable-alpha="true"
+            :recent-colors="null"
+            format="CSS"
+            :swatch-colors="defaultPureColor"
+            :color-modes="['monochrome']"
+            :show-primary-color-preview="false"
+            v-model="cell.textColor"
+            @change="changeStyles('textColor')"
+          />
+        </div>
+        <div class="form-item">
+          <label>文字大小</label>
+          <t-input-number
+            class="w-full"
+            v-model.number="cell.fontSize"
+            theme="column"
+            :min="0"
+            @change="changeStyles('fontSize')"
+            :allowInputOverLimit="false"
+            :decimalPlaces="2"
+          />
+        </div>
+      </t-space>
+    </div>
   </t-space>
   <t-drawer
     v-model:visible="drawer.visible"
@@ -111,7 +173,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, defineComponent, ref } from 'vue';
+import { reactive, defineComponent, ref, onMounted, onUnmounted } from 'vue';
 import {
   getter,
   setter,
@@ -126,7 +188,7 @@ import { defaultGradientColor, defaultPureColor } from '@/services/defaults';
 import { MessagePlugin } from 'tdesign-vue-next';
 import { s8 } from '@/services/random';
 import CodeEditor from '@/views/components/common/CodeEditor.vue';
-import { ChevronLeftDoubleIcon, } from 'tdesign-icons-vue-next';
+import { ChevronLeftDoubleIcon } from 'tdesign-icons-vue-next';
 
 const props = defineProps<{
   pen: any;
@@ -202,5 +264,110 @@ const onConfirmDrawer = () => {
   props.pen[drawer.key] = drawer.value;
   updatePen(props.pen, drawer.key);
 };
+
+const cell = ref({
+  col: undefined,
+  row: undefined,
+  background: undefined,
+  textColor: undefined,
+  fontSize: undefined,
+});
+
+const getPenData = (data: any) => {
+  if (props.pen.name === 'tablePlus') {
+    if (!props.pen.styles) {
+      props.pen.styles = [];
+    }
+    if (props.pen.calculative.activeCell) {
+      cell.value.col = props.pen.calculative.activeCell.col;
+      cell.value.row = props.pen.calculative.activeCell.row;
+      let found = props.pen.styles.findIndex((item: any) => {
+        return item.row === cell.value.row && item.col === cell.value.col;
+      });
+      if (found !== -1) {
+        cell.value.background = props.pen.styles[found].background;
+        cell.value.textColor = props.pen.styles[found].textColor;
+        cell.value.fontSize = props.pen.styles[found].fontSize;
+      } else {
+        cell.value.background = undefined;
+        cell.value.textColor = undefined;
+        cell.value.fontSize = undefined;
+      }
+    } else if (props.pen.calculative.activeCol) {
+      cell.value.col = props.pen.calculative.activeCol;
+      cell.value.row = undefined;
+      let found = props.pen.styles.findIndex((item: any) => {
+        return item.row === undefined && item.col === cell.value.col;
+      });
+      if (found !== -1) {
+        cell.value.background = props.pen.styles[found].background;
+        cell.value.textColor = props.pen.styles[found].textColor;
+        cell.value.fontSize = props.pen.styles[found].fontSize;
+      } else {
+        cell.value.background = undefined;
+        cell.value.textColor = undefined;
+        cell.value.fontSize = undefined;
+      }
+    } else if (props.pen.calculative.activeRow) {
+      cell.value.col = undefined;
+      cell.value.row = props.pen.calculative.activeRow;
+
+      let found = props.pen.styles.findIndex((item: any) => {
+        return item.row === cell.value.row && item.col === undefined;
+      });
+      if (found !== -1) {
+        cell.value.background = props.pen.styles[found].background;
+        cell.value.textColor = props.pen.styles[found].textColor;
+        cell.value.fontSize = props.pen.styles[found].fontSize;
+      } else {
+        cell.value.background = undefined;
+        cell.value.textColor = undefined;
+        cell.value.fontSize = undefined;
+      }
+    } else {
+      cell.value.col = undefined;
+      cell.value.row = undefined;
+      cell.value.background = undefined;
+      cell.value.textColor = undefined;
+      cell.value.fontSize = undefined;
+    }
+  }
+};
+
+const changeStyles = (key) => {
+  //更新属性
+  if (!props.pen.styles) {
+    props.pen.styles = [];
+  }
+  let found = props.pen.styles.findIndex((item: any) => {
+    return item.row === cell.value.row && item.col === cell.value.col;
+  });
+  if (found !== -1) {
+    props.pen.styles[found][key] = cell.value[key];
+  } else {
+    props.pen.styles.push({
+      row: cell.value.row,
+      col: cell.value.col,
+      [key]: cell.value[key],
+    });
+  }
+};
+
+onMounted(() => {
+  meta2d.on('click', getPenData);
+  getPenData({});
+});
+
+onUnmounted(() => {
+  meta2d.off('click', getPenData);
+});
 </script>
-<style lang="postcss" scoped></style>
+<style lang="postcss" scoped>
+.form-cell {
+  font-size: 13px;
+  /* font-weight: 700; */
+  color: var(--color);
+  padding-top: 16px;
+  padding-bottom: 8px;
+}
+</style>

src/views/components/PenProps.vue

@@ -271,6 +271,9 @@
             expandIconPlacement="right"
             :borderless="true"
           >
+            <t-collapse-panel v-if="data.pen.props.custom" value="5" header="属性">
+              <Custom :pen="data.pen"/>
+            </t-collapse-panel>
             <t-collapse-panel
               v-if="data.pen.props.look !== false"
               value="1"
@@ -702,9 +705,7 @@
                 </div>
               </t-space>
             </t-collapse-panel>
-            <t-collapse-panel v-if="data.pen.props.custom" value="5" header="属性">
-              <Custom :pen="data.pen"/>
-            </t-collapse-panel>
+
             <t-collapse-panel
               v-if="data.pen.props.text"
               value="2"