feat:conflict

src/views/components/FileProps.vue

@@ -47,6 +47,53 @@
             <label>{{$t('背景图片')}}</label>
             <t-upload class="ml-8" v-model="data.background" action="/api/image/upload" theme="image" accept="image/*" :headers="headers" :data="updataData" :auto-upload="true" :before-upload="beforeUpload" :upload-all-files-in-one-request="false" @success="fileSuccessed" @remove="fileRemoved"></t-upload>
           </div>
+          <div class="form-item">
+            <label>背景网格</label>
+            <div class="flex ml-8" style="align-items:center">
+              <t-tooltip
+                content="开启网格"
+                placement="top"
+              >
+                <t-checkbox
+                  v-model="data.grid"
+                  @change="changeGrid($event, 'grid')"
+                  style="width: 22px"
+                />
+              </t-tooltip>
+              <t-tooltip
+                v-if="data.grid"
+                content="网格颜色"
+                placement="top"
+              >
+                <t-color-picker
+                  class="simple ml-8"
+                  format="CSS"
+                  :recent-colors="null"
+                  :enable-alpha="true"
+                  :swatch-colors="defaultPureColor"
+                  :color-modes="['monochrome']"
+                  :show-primary-color-preview="false"
+                  v-model="data.gridColor"
+                  @change="changeGrid($event, 'gridColor')"
+                />
+              </t-tooltip>
+              <t-tooltip
+                v-if="data.grid"
+                content="网格大小"
+                placement="top"
+              >
+                <t-input-number
+                  theme="normal"
+                  v-model="data.gridSize"
+                  :min="5"
+                  :decimalPlaces="0"
+                  @change="changeGrid($event,'gridSize')"
+                  class="ml-8"
+                  style="width: 100px"
+                />
+            </t-tooltip>
+            </div>
+          </div>
           <div class="form-item">
             <label>{{$t('主题')}}</label>
             <t-select v-model="data.theme" :options="themeOptions" @change="changeTheme" clearable class="shrink-0" :placeholder="$t('暗黑')"></t-select>
@@ -417,6 +464,19 @@ const changeValue = (e: any, key: string) => {
   openData();
 };
 
+const changeGrid = (e: any, key: string)=>{
+  let opt = {[key]: e}
+  if(key === 'gridSize') {
+    if(e <= 5) return;
+  }
+  if(key==='grid'&&e===true){
+    opt.gridColor = '#303746';
+    data.gridColor = '#303746';
+  }
+  meta2d.setOptions(opt);
+  meta2d.render();
+}
+
 const changeTheme = (e)=>{
   meta2d.setTheme(e);
   data.meta2dData.background = meta2d.store.data.background;