配置页

样式参考

截图插件

• 基于TDesign

代码示例：

<!-- 抽屉容器 -->
<t-drawer
    v-model:visible="globalStore.settingPageShow"
    size="60%"
    :on-click-overlay="close"
    placement="right"
    @click-cancel="close"
    :footer="false"
    closeBtn
    closeOnEscKeydown
    sizeDraggable
  >
    <template #header>
      <h3 class="text-xl"><c-icon-font class="mr-2" iconName="setting"></c-icon-font>软件配置</h3>
    </template>

    <t-tabs default-value="global" v-model="globalStore.settingPageSelect" @change="onTabsChange">
      <t-tab-panel value="global">
        <!-- icon -->
        <template #label>
          <c-icon-font class="mr-2" iconName="kongzhi"> </c-icon-font>全局配置
        </template>
          
        <!-- 具体分页组件 -->
        <t-form :data="globalStore.$state" :colon="true">
          {{ data }}
          <t-switch v-model="globalStore.$state.settingPageShow"></t-switch>
        </t-form>
      </t-tab-panel>

      <t-tab-panel value="imageCuterConfig">
        <!-- icon -->
        <template #label>
          <c-icon-font class="mr-2" iconName="caijian"> </c-icon-font>截图插件
        </template>
          
        <!-- 具体分页组件 -->
        <imageCuterSettingPage />
      </t-tab-panel>
    </t-tabs>
  </t-drawer>

分页具体样式：

 <t-form :data="localStore.config" :colon="true">
    <t-collapse borderless>
      <t-collapse-panel value="1" header="显示配置" class="collapse-style">
        <template #expandIcon>
          <c-icon-font class="text-xl" iconName="xianshi" color="#31302d"></c-icon-font>
        </template>
        <template #headerRightContent>
          <t-button
            size="small"
            theme="danger"
            @click="resetConfigData(['IMG_MAX_HEIGHT', 'IMG_MAX_WIDTH', 'AUTO_DRAW'])"
          >
            <template #icon>
              <c-icon-font class="text-white mr-2" iconName="huifu"> </c-icon-font>
            </template>
            重置
          </t-button>
        </template>
        <t-form-item label="最大尺寸" name="IMG_MAX_HEIGHT">
          <t-row :gutter="16">
            <t-col :span="6">
              <t-input
                v-model="localStore.config.IMG_MAX_HEIGHT"
                label="高度："
                suffix="px"
              ></t-input>
            </t-col>
            <t-col :span="6">
              <t-input
                v-model="localStore.config.IMG_MAX_WIDTH"
                label="宽度："
                suffix="px"
              ></t-input>
            </t-col>
          </t-row>
        </t-form-item>
        <t-form-item label="实时预览" name="AUTO_DRAW">
          <t-switch v-model="localStore.config.AUTO_DRAW"></t-switch>
        </t-form-item>
      </t-collapse-panel>

      <t-collapse-panel value="2" header="图片配置" class="collapse-style">
        <template #expandIcon>
          <c-icon-font class="text-xl" iconName="picture"></c-icon-font>
        </template>
        <template #headerRightContent>
          <t-button
            size="small"
            theme="danger"
            @click="resetConfigData(['FILE_MAX_IMG_SIZE', 'FILE_SUPORT_TYPES'])"
          >
            <template #icon>
              <c-icon-font class="text-white mr-2" iconName="huifu"> </c-icon-font>
            </template>
            重置
          </t-button>
        </template>

        <t-form-item label="文件大小" name="FILE_MAX_IMG_SIZE">
          <t-row :gutter="16">
            <t-col :span="8">
              <t-input
                type="number"
                :value="fileMaxSize"
                @change="onSizeUnitInputChange"
                :suffix="`(${localStore.config.FILE_MAX_IMG_SIZE})`"
              ></t-input>
            </t-col>
            <t-col :span="4">
              <t-select
                @change="onSizeUnitSelectChange"
                v-model="sizeUnit"
                :options="sizeOptions"
              ></t-select>
            </t-col>
          </t-row>
        </t-form-item>

        <t-form-item label="支持格式" name="FILE_SUPORT_TYPES">
          <t-select
            v-model="localStore.config.FILE_SUPORT_TYPES"
            :options="options1"
            placeholder="mime-type"
            multiple
          >
            <template #panelTopContent>
              <div style="padding: 6px 6px 0 6px">
                <t-input
                  v-model="searchMimeType"
                  placeholder="请输入关键词搜索"
                  @change="onSearchMimeType"
                />
              </div>
            </template>
          </t-select>
        </t-form-item>
      </t-collapse-panel>

      <t-collapse-panel value="3" header="服务器配置" class="collapse-style">
        <template #expandIcon>
          <c-icon-font class="text-xl" iconName="fuwuqi"></c-icon-font>
        </template>
        <template #headerRightContent>
          <t-button
            size="small"
            theme="danger"
            @click="resetConfigData(['SERVER_IP', 'SERVER_PROT'])"
          >
            <template #icon>
              <c-icon-font class="text-white mr-2" iconName="huifu"> </c-icon-font>
            </template>
            重置
          </t-button>
        </template>

        <t-form-item label="服务器IP" name="SERVER_IP">
          <t-input v-model="localStore.config.SERVER_IP"></t-input>
        </t-form-item>

        <t-form-item label="服务器端口" name="SERVER_PROT">
          <t-input v-model="localStore.config.SERVER_PROT"></t-input>
        </t-form-item>
      </t-collapse-panel>
    </t-collapse>
  </t-form>

import localStore from '@/components/ImageCuter/store';
import { ImageCuterConfig } from '@/components/ImageCuter/store/config';
import { MIME_TYPE_LIST } from '@/utils/mime-type';