template div div class=template-operation t-button click=formVisible = true新建模板t-button t-input v-model=searchValue class=search-input placeholder=请输入你需要搜索的内容 clearable template #

根据你提供的代码，我看到在提交成功后，你将新建的模板添加到了templateList数组中，但是在模板列表展示的地方，你使用的是exploreConfigTemplateList数组。所以需要将templateList改为exploreConfigTemplateList。

修改后的代码如下所示:

<template>
  <div>
    <div class="template-operation">
      <t-button @click="formVisible = true">新建模板</t-button>
      <t-input v-model="searchValue" class="search-input" placeholder="请输入你需要搜索的内容" clearable>
        <template #suffix-icon>
          <search-icon v-if="searchValue === ''" size="20px" />
        </template>
      </t-input>
    </div>
    <!-- 卡片列表 -->
    <template v-if="pagination.total > 0 && !dataLoading">
      <div class="template-list-items">
        <t-row :gutter="[16, 16]">
          <t-col
            :lg="4"
            :xs="6"
            :xl="3"
            v-for="(template, index) in exploreConfigTemplateList.slice (
                pagination.pageSize * (pagination.current - 1),
                pagination.pageSize * pagination.current,
              )"
            :key="index"
          >
            <explore-config-template-card :template="template" @delete-item="handleDeleteItem" @manage-product="handleManageProduct" />
          </t-col>
        </t-row>
      </div>
      <div class="template-list-pagination">
        <t-pagination
          v-model="pagination.current"
          :total="pagination.total"
          :pageSizeOptions="[12, 24, 36]"
          :page-size.sync="pagination.pageSize"
          @page-size-change="onPageSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </template>
    <div v-else-if="dataLoading" class="list-card-loading">
      <t-loading text="加载中..."></t-loading>
    </div>
    <!-- 模板管理弹窗 -->
    <t-dialog header="新建模板" :visible.sync="formVisible" :width="680" :footer="false">
      <div slot="body">
        <!-- 表单内容 -->
        <t-form :data="formData" ref="form" :rules="rules" @submit="onSubmit" :labelWidth="100">
          <t-form-item label="模板名称" name="name">
            <t-input :style="{ width: '480px' }" v-model="formData.template_name" placeholder="请输入模板名称"></t-input>
          </t-form-item>
          <t-form-item label="模板类型" name="type">
            <t-select v-model="formData.template_type" clearable :style="{ width: '480px' }">
              <t-option v-for="(item, index) in options" :value="item.value" :label="item.label" :key="index">
                {{ item.label }}
              </t-option>
            </t-select>
          </t-form-item>
          <t-form-item label="模板介绍" name="description">
            <t-input :style="{ width: '480px' }" v-model="formData.template_description" placeholder="请输入模板描述"></t-input>
          </t-form-item>
          <t-form-item style="float: right">
            <t-button variant="outline" @click="onClickCloseBtn">取消</t-button>
            <t-button theme="primary" type="submit">提交</t-button>
          </t-form-item>
        </t-form>
      </div>
    </t-dialog>
    <!-- 删除操作弹窗 -->
    <t-dialog
      header="确认删除所选模板？"
      :body="confirmBody"
      :visible.sync="confirmVisible"
      @confirm="onConfirmDelete"
      :onCancel="onCancel"
    >
    </t-dialog>
  </div>
</template>
<script lang="ts">
import { prefix } from '@/config/global';
import { SearchIcon } from 'tdesign-icons-vue';
import ExploreConfigTemplateCard from '@/components/explore-config-template-card/index.vue';


const INITIAL_DATA = {
  name: '',
  status: '',
  description: '',
  type: '',
  mark: '',
  amount: 0,
};

export default {
  name: 'ExploreConfigTemplates',
  components: {
    SearchIcon,
    ExploreConfigTemplateCard,
  },
  data() {
    return {
      pagination: { current: 1, pageSize: 12, total: 0 },
      prefix,
      exploreConfigTemplateList: [],
      value: 'first',
      rowKey: 'index',
      tableLayout: 'auto',
      verticalAlign: 'top',
      bordered: true,
      hover: true,

      rowClassName: (rowKey) => `${rowKey}-class`,
      formData: { ...INITIAL_DATA },
      options: [
        { label: '基础模板', value: 'basic' },
        { label: 'ai模板', value: 'ai' },
      ],
      formVisible: false,
      textareaValue: '',
      rules: {
        name: [{ required: true, message: '请输入模板名称', type: 'error' }],
        type: [{ required: true, message: '请输入模板类型', type: 'error' }],
      },
      searchValue: '',
      confirmVisible: false, // 控制确认弹窗
      deleteProduct: undefined,
      dataLoading: false,
    };
  },
  computed: {
    confirmBody(): string {
      const { deleteProduct } = this;
      return deleteProduct ? `删除后，${deleteProduct.name}的所有模板信息将被清空, 且无法恢复` : '';
    },
  },
  watch: {
    // eslint-disable-next-line func-names
    '$route': function(to, from) {
      if (to.path.endsWith('/templates')) {
        console.log('to templates')

        this.loadPageData();
      }
    }
  },
  mounted() {
    console.log("templates page")
    this.loadPageData();
  },
  methods: {
    loadPageData(): void {
      if (!this.$route ||!this.$route.params||this.$route.params.id === undefined||this.$route.params.tid === undefined)
        return // TODO 返回错误页面
      this.dataLoading = true;
      this.$request
        .get(`/web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates`, {
          withCredentials: true
        })
        .then((res) => {
          console.log(res)
          if (res.status === 200) {
            const list = res.data;
            console.log(list)
            this.exploreConfigTemplateList = list;
            this.pagination = {
              ...this.pagination,
              total: list.length,
            };
          } else {
            console.error(res);
            this.exploreConfigTemplateList = [];
          }
        })
        .catch((e: Error) => {
          console.log(e);
        })
        .finally(() => {
          this.dataLoading = false;
        });
    },
    onPageSizeChange(size: number): void {
      this.pagination.pageSize = size;
      this.pagination.current = 1;
    },
    onCurrentChange(current: number): void {
      this.pagination.current = current;
    },
    onSubmit({ result, firstError }): void {
      if (!firstError) {
        this.formVisible = false;
        this.$request.post(`web/projects/${this.$route.params.id}/tasks/${this.$route.params.tid}/explore_config_templates`, {
          template_name: this.formData.template_name,
          template_type: this.formData.template_type,
          description: this.formData.template_description,
        },{headers: {'Content-Type': 'application/json'},
        },
        {withCredentials: true}
        )
          .then((res) => {
            console.log(res);
            if (res.status === 200) {
              this.$message.success('提交成功');
              // 新建任务成功，重新加载任务列表
              // this.loadPageData();
              const newTemplate = res.data;
              newTemplate.template_name = this.formData.template_name;
              newTemplate.template_description = this.formData.template_description;
              // 添加新项目到项目列表
              this.exploreConfigTemplateList.unshift(newTemplate);
              // 更新当前页的总数量
              // eslint-disable-next-line no-plusplus
              this.pagination.total++;
            } else {
              console.error(res);
            }
          })
          .catch((e: Error) => {
            console.log(e);
          });
      } else {
        console.log('Errors: ', result);
        this.$message.warning(firstError);
      }
    },
    onClickCloseBtn(): void {
      this.formVisible = false;
      this.formData = {};
    },
    handleDeleteItem(product): void {
      this.confirmVisible = true;
      this.deleteProduct = product;
    },
    onConfirmDelete(): void {
      const { index } = this.deleteProduct;
      this.exploreConfigTemplateList.splice(index - 1, 1);
      this.confirmVisible = false;
      this.$message.success('删除成功');
    },
    onCancel(): void {
      this.deleteProduct = undefined;
      this.formData = {};
    },
    handleManageProduct(product): void {
      this.formVisible = true;
      this.formData = { ...product, status: product?.isSetup ? '1' : '0' };
    },
  },
};
</script>

这样修改后，当你点击提交按钮后，页面应该会显示出新建的模板卡片