chore: 优化代码

src/components/custom/json-preview.vue

@@ -1,71 +1,40 @@
 <script setup lang="ts">
-import VueJsonPretty from 'vue-json-pretty';
-import 'vue-json-pretty/lib/styles.css';
 import { computed } from 'vue';
+import hljs from 'highlight.js/lib/core';
+import json from 'highlight.js/lib/languages/json';
+
+hljs.registerLanguage('json', json);
+
+defineOptions({
+  name: 'JsonPreview'
+});
 
 interface Props {
-  // 需要展示的json数据
-  data: any;
-  // 数据深度
-  deep?: number;
-  // 是否显示双引号
-  showDoubleQuotes?: boolean;
-  // 是否显示数组/对象的长度
-  showLength?: boolean;
-  // 是否显示线条
-  showLine?: boolean;
-  // 是否显示行号
-  showLineNumber?: boolean;
-  // 是否显示图标
-  showIcon?: boolean;
-  // 是否显示选择控制器
-  showSelectController?: boolean;
-  // 默认展开层级
-  collapsedLevel?: number;
-  // 是否高亮鼠标悬停的节点
-  highlightMouseoverNode?: boolean;
+  code?: string;
+  showLineNumbers?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  deep: 3,
-  showDoubleQuotes: true,
-  showLength: false,
-  showLine: true,
-  showLineNumber: false,
-  showIcon: true,
-  showSelectController: false,
-  collapsedLevel: 1,
-  highlightMouseoverNode: false
+  code: '',
+  showLineNumbers: false
 });
 
-// 计算属性：格式化JSON数据
-const jsonData = computed(() => {
-  if (!props.data) return null;
+/** 格式化JSON数据 */
+const jsonData = computed<string>(() => {
+  if (!props.code) return '';
   try {
-    return typeof props.data === 'string' ? JSON.parse(props.data) : props.data;
+    return typeof props.code === 'string'
+      ? JSON.stringify(JSON.parse(props.code), null, '\t')
+      : JSON.stringify(props.code, null, '\t');
   } catch {
-    return null;
+    return props.code;
   }
 });
 </script>
 
 <template>
   <div class="json-preview">
-    <VueJsonPretty
-      v-if="jsonData"
-      :data="jsonData"
-      :deep="deep"
-      :show-double-quotes="showDoubleQuotes"
-      :show-length="showLength"
-      :show-line="showLine"
-      :show-line-number="showLineNumber"
-      :show-icon="showIcon"
-      :show-select-controller="showSelectController"
-      :collapsed-level="collapsedLevel"
-      :highlight-mouseover-node="highlightMouseoverNode"
-    />
-    <span v-else-if="props.data">{{ props.data }}</span>
-    <div v-else class="empty-data">暂无数据</div>
+    <NCode :code="jsonData" :hljs="hljs" language="json" :show-line-numbers="showLineNumbers" />
   </div>
 </template>
 

src/plugins/loading.ts

@@ -17,30 +17,14 @@ export function setupLoading() {
     toggleHtmlClass(DARK_CLASS).add();
   }
 
-  const loadingClasses = [
-    'left-0 top-0',
-    'left-0 bottom-0 animate-delay-500',
-    'right-0 top-0 animate-delay-1000',
-    'right-0 bottom-0 animate-delay-1500'
-  ];
-
-  const logoWithClass = systemLogo.replace('<svg', `<svg class="size-128px text-primary"`);
-
-  const dot = loadingClasses
-    .map(item => {
-      return `<div class="absolute w-16px h-16px bg-primary rounded-8px animate-pulse ${item}"></div>`;
-    })
-    .join('\n');
-
   const loading = `
 <div class="fixed-center flex-col bg-layout" style="${primaryColor}">
-  ${logoWithClass}
-  <div class="w-120px h-120px my-36px">
+<div class="w-120px h-120px my-36px">
     <div class="relative h-full animate-spin">
-      ${dot}
+      <img src="${systemLogo}" width="120" />
     </div>
   </div>
-  <h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
+  <h2 class="text-28px font-500 text-primary">${$t('system.title')}</h2>
 </div>`;
 
   const app = document.getElementById('app');

src/theme/settings.ts

@@ -4,12 +4,12 @@ export const themeSettings: App.Theme.ThemeSetting = {
   grayscale: false,
   colourWeakness: false,
   recommendColor: false,
-  themeColor: '#646CFF',
+  themeColor: '#0E42D2',
   otherColor: {
-    info: '#646CFF',
-    success: '#52C41A',
-    warning: '#FAAD14',
-    error: '#F5222D'
+    info: '#0E42D2',
+    success: '#009A29',
+    warning: '#D25F00',
+    error: '#CB2634'
   },
   isInfoFollowPrimary: true,
   resetCacheStrategy: 'close',

src/typings/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     BooleanTag: typeof import('./../components/custom/boolean-tag.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
+    CodeMirror: typeof import('./../components/custom/code-mirror.vue')['default']
     copy: typeof import('./../components/custom/role-select copy.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']
     DarkModeContainer: typeof import('./../components/common/dark-mode-container.vue')['default']
@@ -64,6 +65,7 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapse: typeof import('naive-ui')['NCollapse']
     NCollapseItem: typeof import('naive-ui')['NCollapseItem']
     NColorPicker: typeof import('naive-ui')['NColorPicker']

src/typings/naive-ui.d.ts

@@ -60,4 +60,6 @@ declare namespace NaiveUI {
     import('@sa/hooks').TableConfig<A, GetTreeTableData<A>, TableColumn<TableDataWithIndex<GetTreeTableData<A>>>>,
     'apiFn' | 'apiParams' | 'columns' | 'immediate'
   >;
+
+  type CodeMirrorLang = 'js' | 'json';
 }

src/views/monitor/login-infor/modules/login-infor-view-drawer.vue

@@ -2,6 +2,7 @@
 import { useDict } from '@/hooks/business/dict';
 import { getBrowserIcon, getOsIcon } from '@/utils/format';
 import { $t } from '@/locales';
+
 defineOptions({
   name: 'LoginInforViewDrawer'
 });

src/views/monitor/oper-log/modules/oper-log-view-drawer.vue

@@ -52,10 +52,10 @@ function closeDrawer() {
         </NDescriptionsItem>
         <NDescriptionsItem label="操作时间">{{ props.rowData?.operTime }}</NDescriptionsItem>
         <NDescriptionsItem label="请求参数">
-          <JsonPreview :data="props.rowData?.operParam" />
+          <JsonPreview :code="props.rowData?.operParam" />
         </NDescriptionsItem>
         <NDescriptionsItem label="返回参数">
-          <JsonPreview :data="props.rowData?.jsonResult" />
+          <JsonPreview :code="props.rowData?.jsonResult" />
         </NDescriptionsItem>
         <NDescriptionsItem label="消耗时间">
           {{ `${props.rowData?.costTime} ms` }}

src/views/tool/gen/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
+import { ref } from 'vue';
 import { NButton, NPopconfirm, NTooltip } from 'naive-ui';
 import { useBoolean } from '@sa/hooks';
-import { ref } from 'vue';
 import { jsonClone } from '@sa/utils';
 import {
   fetchBatchDeleteGenTable,
@@ -10,12 +10,12 @@ import {
   fetchGetGenTableList,
   fetchSynchGenDbList
 } from '@/service/api/tool';
-import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useDownload } from '@/hooks/business/download';
+import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
 import SvgIcon from '@/components/custom/svg-icon.vue';
-import { useDownload } from '@/hooks/business/download';
 import GenTableSearch from './modules/gen-table-search.vue';
 import GenTableImportDrawer from './modules/gen-table-import-drawer.vue';
 import GenTableOperateDrawer from './modules/gen-table-operate-drawer.vue';

src/views/tool/gen/modules/gen-table-db-search.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { $t } from '@/locales';
 import { useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
 
 defineOptions({
   name: 'GenTableDbSearch'

src/views/tool/gen/modules/gen-table-import-drawer.vue

@@ -1,9 +1,9 @@
 <script setup lang="tsx">
 import { watch } from 'vue';
 import { fetchGetGenDbList, fetchImportGenTable } from '@/service/api/tool';
-import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useTable, useTableOperate } from '@/hooks/common/table';
+import { $t } from '@/locales';
 import GenTableDbSearch from './gen-table-db-search.vue';
 
 defineOptions({

src/views/tool/gen/modules/gen-table-operate-drawer.vue

@@ -4,10 +4,6 @@ import type { FormInst, SelectOption } from 'naive-ui';
 import { NCheckbox, NInput, NSelect, NTabs } from 'naive-ui';
 import { useLoading } from '@sa/hooks';
 import { jsonClone } from '@sa/utils';
-import { fetchGetDictTypeOption } from '@/service/api/system';
-import { fetchGetGenTableInfo, fetchUpdateGenTable } from '@/service/api/tool';
-import { $t } from '@/locales';
-import { useAppStore } from '@/store/modules/app';
 import {
   genHtmlTypeOptions,
   genJavaTypeOptions,
@@ -15,7 +11,11 @@ import {
   genTplCategoryOptions,
   genTypeOptions
 } from '@/constants/business';
+import { fetchGetDictTypeOption } from '@/service/api/system';
+import { fetchGetGenTableInfo, fetchUpdateGenTable } from '@/service/api/tool';
+import { useAppStore } from '@/store/modules/app';
 import { useFormRules } from '@/hooks/common/form';
+import { $t } from '@/locales';
 
 defineOptions({
   name: 'GenTableOperateDrawer'

src/views/tool/gen/modules/gen-table-preview-drawer.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useLoading } from '@sa/hooks';
 import { ref, watch } from 'vue';
 import { useClipboard } from '@vueuse/core';
+import { useLoading } from '@sa/hooks';
 import { fetchGetGenPreview } from '@/service/api/tool';
 import MonacoEditor from '@/components/common/monaco-editor.vue';
 

src/views/tool/gen/modules/gen-table-search.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { $t } from '@/locales';
 import { useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
 
 defineOptions({
   name: 'GenTableSearch'