minnan/src/pages/article/data/editor/subpart/EditorToolbar.vue

<template>
  <div class="editor-toolbar">
    <a-space>
      <span class="toolbar-label">环境：</span>
      <a-select
        :value="isDevValue"
        style="width: 100px"
        :options="envOptions"
        @update:value="emit('update:isDev', $event == 'true' ? true : false)"
      />
      <a-dropdown>
        <a-button>
          加载
          <DownOutlined />
        </a-button>
        <template #overlay>
          <a-menu v-if="historyList.length">
            <a-menu-item @click="emit('select-default')">
              默认版本
              <a-badge v-if="currentConfig?.activeHistoryId === 0" count="激活" />
            </a-menu-item>
            <a-menu-item
              v-for="(item, index) in historyList"
              :key="index"
              @click="emit('select-history', item.id!)"
            >
              {{ item.name }}
              <a-badge v-if="item.id === currentConfig?.activeHistoryId" count="激活" />
            </a-menu-item>
          </a-menu>
          <a-menu v-else>
            <a-menu-item disabled>暂无历史版本</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <a-dropdown-button type="primary" :icon="h(DownOutlined)" @click="emit('save')">
        保存
        <template #overlay>
          <a-menu>
            <a-menu-item @click="emit('open-save-as')">另存为历史版本</a-menu-item>
            <a-menu-item v-if="isDev" @click="emit('sync-to-production')">同步至正式版</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown-button>

      <div>
        <InfoCircleFilled />
        当前激活版本：
        <span>{{ currentShowConfigName }}</span>
      </div>

      <a-button v-if="currentConfig" @click="emit('set-active')">
        {{ currentConfig.activeHistoryId === currentHistoryId ? '已经是激活版本' : '设置为激活版本' }}
      </a-button>
      <a-button v-if="currentConfig && currentHistoryId !== 0" danger @click="emit('delete-history')">
        <DeleteOutlined />
        删除历史版本
      </a-button>
    </a-space>

    <a-space>
      <a-button type="primary" @click="emit('help')">
        帮助
        <QuestionCircleOutlined />
      </a-button>
      <a-button @click="emit('export')">
        导出为JSON文件
        <DownloadOutlined />
      </a-button>
    </a-space>

    <a-modal
      :open="saveAsModalVisible"
      title="另存为历史版本"
      ok-text="保存"
      cancel-text="取消"
      :confirm-loading="saveAsLoading"
      @update:open="emit('update:saveAsModalVisible', $event)"
      @ok="emit('confirm-save-as')"
    >
      <a-form layout="vertical" class="save-as-form">
        <a-form-item label="版本名称">
          <a-input
            :value="saveAsVersionName"
            placeholder="请输入版本名称"
            allow-clear
            @update:value="emit('update:saveAsVersionName', $event)"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, h } from 'vue';
import { DownOutlined, DownloadOutlined, InfoCircleFilled, DeleteOutlined, QuestionCircleOutlined } from '@ant-design/icons-vue';
import type { IHistoryListItem } from '../composables/useEditorConfig';
import type { ICommonCategoryConfigItem } from '../../api/CommonCategoryApi';

const props = defineProps<{
  historyList: IHistoryListItem[];
  currentConfig?: ICommonCategoryConfigItem;
  currentHistoryId: number;
  currentShowConfigName: string;
  isDev: boolean;
  saveAsModalVisible: boolean;
  saveAsVersionName: string;
  saveAsLoading: boolean;
}>();

const emit = defineEmits<{
  (e: 'select-default'): void;
  (e: 'select-history', id: number): void;
  (e: 'save'): void;
  (e: 'open-save-as'): void;
  (e: 'confirm-save-as'): void;
  (e: 'sync-to-production'): void;
  (e: 'set-active'): void;
  (e: 'delete-history'): void;
  (e: 'export'): void;
  (e: 'help'): void;
  (e: 'update:isDev', v: boolean): void;
  (e: 'update:saveAsModalVisible', v: boolean): void;
  (e: 'update:saveAsVersionName', v: string): void;
}>();

const isDevValue = computed({
  get: () => props.isDev ? 'true' : 'false',
  set: (v: boolean) => emit('update:isDev', Boolean(v)),
});

const envOptions = [
  { value: 'true', label: '开发版' },
  { value: 'false', label: '正式版' },
];
</script>

<style scoped>
.editor-toolbar {
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toolbar-label {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
}
</style>