BaseEditor.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <script setup lang="ts">
  2. import { LoadingOutlined } from '@ant-design/icons-vue'
  3. // Generic editor layout with left and right panels
  4. interface BaseEditorProps {
  5. colRightClass?: string
  6. loading?: boolean
  7. }
  8. const props = withDefaults(defineProps<BaseEditorProps>(), {
  9. colRightClass: 'col-right',
  10. })
  11. const indicator = h(LoadingOutlined, {
  12. style: {
  13. fontSize: '32px',
  14. },
  15. spin: true,
  16. })
  17. const route = useRoute()
  18. const loading = computed(() =>
  19. props.loading || (import.meta.env.DEV && route.query.loading === 'true'),
  20. )
  21. </script>
  22. <template>
  23. <ASpin class="h-full base-editor-spin" :spinning="loading" :indicator="indicator">
  24. <ARow :gutter="[16, 16]">
  25. <ACol
  26. :xs="24"
  27. :sm="24"
  28. :md="24"
  29. :lg="16"
  30. :xl="17"
  31. >
  32. <!-- Left panel content (main editor) -->
  33. <slot name="left" />
  34. </ACol>
  35. <ACol
  36. :class="colRightClass"
  37. :xs="24"
  38. :sm="24"
  39. :md="24"
  40. :lg="8"
  41. :xl="7"
  42. >
  43. <!-- Right panel content (settings/configuration) -->
  44. <slot name="right" />
  45. </ACol>
  46. </ARow>
  47. </ASpin>
  48. </template>
  49. <style lang="less" scoped>
  50. .col-right {
  51. position: sticky;
  52. top: 78px;
  53. }
  54. :deep(.ant-card) {
  55. box-shadow: unset;
  56. }
  57. :deep(.card-body) {
  58. max-height: calc(100vh - 260px);
  59. overflow-y: auto;
  60. padding: 0;
  61. }
  62. :deep(.ant-spin) {
  63. background: rgba(255, 255, 255, 0.8);
  64. backdrop-filter: blur(10px);
  65. -webkit-backdrop-filter: blur(10px);
  66. max-height: 100% !important;
  67. border-radius: 8px;
  68. }
  69. </style>
  70. <style lang="less">
  71. .dark {
  72. .base-editor-spin {
  73. background: rgba(30, 30, 30, 0.8);
  74. }
  75. }
  76. </style>