useEditorConfig.ts 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. import { computed, ref, watch } from 'vue';
  2. import { message, Modal } from 'ant-design-vue';
  3. import { DateUtils, ObjectUtils } from '@imengyu/imengyu-utils';
  4. import type { IHomeCommonCategoryDefine } from '../../CommonCategoryDefine';
  5. import DefaultEditorJson from '../../DefaultCategory.json';
  6. import CommonCategoryApi, { type ICommonCategoryConfigItem } from '../../api/CommonCategoryApi';
  7. /** 历史版本列表项(接口返回的 items 元素) */
  8. export interface IHistoryListItem {
  9. id?: number;
  10. data?: IHomeCommonCategoryDefine;
  11. createTime?: string;
  12. name?: string;
  13. [key: string]: any;
  14. }
  15. export function useEditorConfig() {
  16. const currentEditorJson = ref<IHomeCommonCategoryDefine>(DefaultEditorJson as IHomeCommonCategoryDefine);
  17. const selectedPage = ref<(IHomeCommonCategoryDefine['page'][0]) | null>(null);
  18. const historyList = ref<IHistoryListItem[]>([]);
  19. const currentConfig = ref<ICommonCategoryConfigItem>();
  20. const currentHistoryId = ref<number>(0);
  21. /** 是否使用开发版接口(true=开发版,false=正式版) */
  22. const isDev = ref(true);
  23. const currentShowConfigName = computed(() => {
  24. if (currentHistoryId.value === 0) return '默认配置';
  25. return historyList.value.find(item => item.id === currentHistoryId.value)?.name ?? '未知';
  26. });
  27. // 另存为弹窗
  28. const saveAsModalVisible = ref(false);
  29. const saveAsVersionName = ref('');
  30. const saveAsLoading = ref(false);
  31. // 帮助弹窗
  32. const helpModalVisible = ref(false);
  33. async function loadEditorJson(selectDefault = false) {
  34. try {
  35. currentConfig.value = await CommonCategoryApi.getConfigWithoutCache(isDev.value);
  36. if (!currentConfig.value) throw new Error('加载基础配置失败');
  37. if (selectDefault) currentHistoryId.value = currentConfig.value.activeHistoryId;
  38. if (currentHistoryId.value > 0) {
  39. const activeHistory = historyList.value.find(item => item.id === currentHistoryId.value);
  40. if (activeHistory) {
  41. currentEditorJson.value = ObjectUtils.clone(activeHistory.data!) as IHomeCommonCategoryDefine;
  42. } else {
  43. throw new Error('当前激活的历史版本不存在');
  44. }
  45. } else {
  46. currentEditorJson.value = ObjectUtils.clone(currentConfig.value.data) as IHomeCommonCategoryDefine;
  47. }
  48. message.success('加载分类成功');
  49. } catch (error) {
  50. Modal.error({
  51. title: '加载分类失败',
  52. content: '' + error,
  53. });
  54. }
  55. }
  56. async function loadEditorJsonHistorys() {
  57. try {
  58. const res = await CommonCategoryApi.getConfigHistoryList(isDev.value, 1, 10);
  59. const items = res?.items ?? [];
  60. historyList.value = Array.isArray(items) ? items : [];
  61. } catch (error) {
  62. historyList.value = [];
  63. Modal.error({
  64. title: '加载历史版本列表失败',
  65. content: '' + error,
  66. });
  67. }
  68. }
  69. function onSelectDefault() {
  70. currentHistoryId.value = 0;
  71. loadEditorJson(true);
  72. }
  73. function onSelectHistory(id: number) {
  74. currentHistoryId.value = id;
  75. loadEditorJson(false);
  76. }
  77. async function saveEditorJson() {
  78. try {
  79. const saveToHistoryId = currentHistoryId.value === 0 ? undefined : currentHistoryId.value;
  80. await CommonCategoryApi.editConfig(
  81. isDev.value,
  82. currentEditorJson.value,
  83. undefined,
  84. saveToHistoryId
  85. );
  86. message.success('保存成功');
  87. } catch (error) {
  88. Modal.error({
  89. title: '保存失败',
  90. content: '' + error,
  91. });
  92. }
  93. }
  94. function openSaveAsModal() {
  95. saveAsVersionName.value = '';
  96. saveAsModalVisible.value = true;
  97. }
  98. async function confirmSaveAs() {
  99. const name = saveAsVersionName.value?.trim();
  100. if (!name) {
  101. message.warning('请输入版本名称');
  102. return;
  103. }
  104. saveAsLoading.value = true;
  105. try {
  106. await CommonCategoryApi.editConfig(isDev.value, currentEditorJson.value, name, 0);
  107. message.success('已另存为历史版本');
  108. saveAsModalVisible.value = false;
  109. await loadEditorJsonHistorys();
  110. } catch (error) {
  111. Modal.error({
  112. title: '另存为失败',
  113. content: '' + error,
  114. });
  115. } finally {
  116. saveAsLoading.value = false;
  117. }
  118. }
  119. async function setActiveHistory() {
  120. await CommonCategoryApi.setActiveConfigHistory(isDev.value, currentHistoryId.value);
  121. message.success('设置为激活版本成功');
  122. }
  123. function deleteHistory() {
  124. Modal.confirm({
  125. title: '删除历史版本',
  126. content: '确定要删除该历史版本吗?注意:此操作将会删除该历史版本,无法恢复。',
  127. onOk: async () => {
  128. await CommonCategoryApi.deleteConfigHistory(isDev.value, currentHistoryId.value);
  129. message.success('删除历史版本成功');
  130. await loadEditorJsonHistorys();
  131. await loadEditorJson(true);
  132. },
  133. });
  134. }
  135. function exportToJsonFile() {
  136. const json = JSON.stringify(currentEditorJson.value);
  137. const blob = new Blob([json], { type: 'application/json' });
  138. const url = URL.createObjectURL(blob);
  139. const a = document.createElement('a');
  140. a.href = url;
  141. a.download = 'editor.json';
  142. a.click();
  143. }
  144. async function syncToProduction() {
  145. if (!isDev.value) {
  146. message.warning('当前是正式版,无需同步至正式版');
  147. return;
  148. }
  149. Modal.confirm({
  150. title: '同步至正式版',
  151. content: '确定要同步至正式版吗?注意:此操作将会在正式版创建一个同步后的版本并设置为激活版本。',
  152. onOk: async () => {
  153. await CommonCategoryApi.editConfig(
  154. false, currentEditorJson.value,
  155. `同步正式版-${DateUtils.formatDate(new Date(), 'YYYY-MM-DD HM')}`,
  156. 0,
  157. true
  158. );
  159. message.success('同步至正式版成功');
  160. await loadEditorJsonHistorys();
  161. },
  162. });
  163. }
  164. async function init() {
  165. await loadEditorJsonHistorys();
  166. await loadEditorJson(true);
  167. }
  168. watch(isDev, async () => {
  169. await loadEditorJsonHistorys();
  170. await loadEditorJson(true);
  171. });
  172. return {
  173. currentEditorJson,
  174. selectedPage,
  175. historyList,
  176. helpModalVisible,
  177. currentConfig,
  178. currentHistoryId,
  179. currentShowConfigName,
  180. isDev,
  181. saveAsModalVisible,
  182. saveAsVersionName,
  183. saveAsLoading,
  184. loadEditorJson,
  185. loadEditorJsonHistorys,
  186. onSelectDefault,
  187. onSelectHistory,
  188. syncToProduction,
  189. saveEditorJson,
  190. openSaveAsModal,
  191. confirmSaveAs,
  192. setActiveHistory,
  193. deleteHistory,
  194. exportToJsonFile,
  195. init,
  196. };
  197. }