fix(style): editor size in fullscreen

seal-io · Mar 6, 2024 · 79362bc · 79362bc
1 parent 0c8c37a
commit 79362bc
Show file tree

Hide file tree

Showing 16 changed files with 167 additions and 83 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     ADescriptions: typeof import('@arco-design/web-vue')['Descriptions'];
     ADivider: typeof import('@arco-design/web-vue')['Divider'];
     ADoption: typeof import('@arco-design/web-vue')['Doption'];
+    ADropdown: typeof import('@arco-design/web-vue')['Dropdown'];
     AEmpty: typeof import('@arco-design/web-vue')['Empty'];
     AForm: typeof import('@arco-design/web-vue')['Form'];
     AFormItem: typeof import('@arco-design/web-vue')['FormItem'];
@@ -25,8 +26,10 @@ declare module 'vue' {
     AInput: typeof import('@arco-design/web-vue')['Input'];
     AInputNumber: typeof import('@arco-design/web-vue')['InputNumber'];
     AInputPassword: typeof import('@arco-design/web-vue')['InputPassword'];
+    AInputSearch: typeof import('@arco-design/web-vue')['InputSearch'];
     ALayout: typeof import('@arco-design/web-vue')['Layout'];
     ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent'];
+    ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter'];
     ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider'];
     ALink: typeof import('@arco-design/web-vue')['Link'];
     AMenu: typeof import('@arco-design/web-vue')['Menu'];
@@ -48,6 +51,7 @@ declare module 'vue' {
     ATag: typeof import('@arco-design/web-vue')['Tag'];
     ATextarea: typeof import('@arco-design/web-vue')['Textarea'];
     ATooltip: typeof import('@arco-design/web-vue')['Tooltip'];
+    AUpload: typeof import('@arco-design/web-vue')['Upload'];
   }
 }
 

diff --git a/src/assets/style/variable.less b/src/assets/style/variable.less
@@ -100,7 +100,7 @@ body {
   --color-data-card-shadow: 0 0 6px rgba(229, 230, 235, 0.3);
 
   // form card shadow
-  --color-form-card-shadow: 0 4px 3px -1px rgba(234, 236, 238, 1),
+  --color-form-card-shadow: 0 4px 3px -2px rgba(234, 236, 238, 1),
     0 1px 4px 0 rgba(169, 174, 184, 0.2);
   --color-form-card-shadow-hover: rgba(169, 174, 184, 1) 0 3px 6px -1px,
     rgba(169, 174, 184, 0.2) 0 3px 6px 0;

diff --git a/src/components/code-diff-view/index.vue b/src/components/code-diff-view/index.vue
@@ -1,4 +1,5 @@
 <script lang="tsx">
+  import _ from 'lodash';
   import { defineComponent, ref, watch, computed, PropType } from 'vue';
   import useCodeView from '@/hooks/use-code-view';
   import CodeChunk from './code-chunk.vue';
@@ -17,6 +18,12 @@
           return true;
         }
       },
+      maxHeight: {
+        type: [Number, String],
+        default() {
+          return '300px';
+        }
+      },
       leftTitle: {
         type: String,
         default: ''
@@ -52,6 +59,11 @@
         <>
           {rightChunks.value.length || leftChunks.value.length ? (
             <div
+              style={{
+                maxHeight: _.isString(props.maxHeight)
+                  ? props.maxHeight
+                  : `${props.maxHeight}px`
+              }}
               class={[
                 'chunk-box',
                 {
@@ -123,7 +135,6 @@
     position: relative;
     display: flex;
     justify-content: space-between;
-    max-height: 300px;
     overflow: hidden;
     overflow-y: auto;
     font-size: var(--font-size-small);

diff --git a/src/components/highlight-block/code-viewer.vue b/src/components/highlight-block/code-viewer.vue
@@ -1,8 +1,7 @@
 <script lang="tsx">
+  import hljs from 'highlight.js';
   import 'highlight.js/styles/atom-one-light.css';
   import { ref, computed, defineComponent, watch } from 'vue';
-  import 'highlight.js/lib/common';
-  import hljs from 'highlight.js/lib/core';
   import { escapeHtml } from './utils';
 
   export default defineComponent({
@@ -13,7 +12,7 @@
       },
       lang: {
         type: String,
-        default: 'json'
+        default: ''
       },
       autodetect: {
         type: Boolean,

diff --git a/src/components/highlight-block/index.vue b/src/components/highlight-block/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="high-light-wrapper" :class="{ dark: appStore.isDark }">
-    <CodeViewer :lang="lang" :code="code" :autodetect="false" />
+    <CodeViewer :lang="lang" :code="code" />
     <slot></slot>
   </div>
 </template>

diff --git a/src/components/menu/config/index.ts b/src/components/menu/config/index.ts
@@ -72,7 +72,7 @@ export const avatarMenu = [
     itemStyle: {},
     children: [
       {
-        name: 'darkMode',
+        name: 'navbar.appearance',
         key: 'darkMode'
       },
       {

diff --git a/src/components/menu/index.vue b/src/components/menu/index.vue
@@ -264,6 +264,10 @@
         return travel(menuTree.value);
       };
       const handleClickUserMenu = (item) => {
+        if (item.key === 'darkMode') {
+          isDark.value = !isDark.value;
+          toggleTheme(isDark.value);
+        }
         if (item.key === 'UserCenter') {
           router.push({
             name: item.route
@@ -296,6 +300,50 @@
           changeLocale(item.value);
         }
       };
+
+      const renderModeButton = () => {
+        return (
+          <div
+            class="flex flex-align-center"
+            style={{ height: '36px', lineHeight: '36px' }}
+            onMouseover={() => {
+              checkedColor.value = isDark.value
+                ? 'var(--black-2)'
+                : 'var(--black-1)';
+            }}
+            onMouseout={() => {
+              if (isDark.value) {
+                checkedColor.value = 'var(--black-1)';
+              }
+            }}
+          >
+            <a-switch
+              size="small"
+              onChange={toggleTheme}
+              v-model={isDark.value}
+              checked-color={checkedColor.value}
+              v-slots={{
+                'checked-icon': () => (
+                  <icon-moon
+                    style={{
+                      fontSize: '16px',
+                      color: 'var(--color-text-2)'
+                    }}
+                  />
+                ),
+                'unchecked-icon': () => (
+                  <icon-sun
+                    style={{
+                      fontSize: '16px',
+                      color: 'var(--color-text-2)'
+                    }}
+                  />
+                )
+              }}
+            ></a-switch>
+          </div>
+        );
+      };
       const renderUserMenu = (menuConfig) => {
         function travel() {
           const nodes: any[] = [];
@@ -343,45 +391,31 @@
                         }}
                       >
                         {cItem.key === 'darkMode' ? (
-                          <div
-                            class="flex flex-align-center"
-                            style={{ height: '36px', lineHeight: '36px' }}
-                            onMouseover={() => {
-                              checkedColor.value = isDark.value
-                                ? 'var(--black-2)'
-                                : 'var(--black-1)';
-                            }}
-                            onMouseout={() => {
-                              if (isDark.value) {
-                                checkedColor.value = 'var(--black-1)';
-                              }
-                            }}
-                          >
-                            <a-switch
-                              size="small"
-                              onChange={toggleTheme}
-                              v-model={isDark.value}
-                              checked-color={checkedColor.value}
-                              v-slots={{
-                                'checked-icon': () => (
-                                  <icon-moon
-                                    style={{
-                                      fontSize: '16px',
-                                      color: 'var(--color-text-2)'
-                                    }}
-                                  />
-                                ),
-                                'unchecked-icon': () => (
-                                  <icon-sun
-                                    style={{
-                                      fontSize: '16px',
-                                      color: 'var(--color-text-2)'
-                                    }}
-                                  />
-                                )
-                              }}
-                            ></a-switch>
-                          </div>
+                          <span class="flex flex-align-center">
+                            {isDark.value ? (
+                              <icon-moon
+                                style={{
+                                  fontSize: '14px',
+                                  color: 'var(--color-text-2)',
+                                  marginLeft: '1px'
+                                }}
+                              />
+                            ) : (
+                              <icon-sun
+                                style={{
+                                  fontSize: '14px',
+                                  color: 'var(--color-text-2)',
+                                  marginLeft: '1px'
+                                }}
+                              />
+                            )}
+                            <span
+                              class="title"
+                              style={{ fontSize: '12px', marginLeft: '7px' }}
+                            >
+                              {t(cItem.name)}
+                            </span>
+                          </span>
                         ) : (
                           <span class="title" style={{ fontSize: '12px' }}>
                             {t(cItem.name)}

diff --git a/src/components/seal-form/components/seal-select.vue b/src/components/seal-form/components/seal-select.vue
@@ -111,16 +111,7 @@
               allow-clear={false}
               class="v-sel"
               v-slots={{
-                ..._.reduce(
-                  _.keys(slots),
-                  (result, key) => {
-                    if (slots[key]) {
-                      result[key] = () => slots[key]?.();
-                    }
-                    return result;
-                  },
-                  {}
-                ),
+                ...slots,
                 empty: () => (
                   <a-empty
                     description={
@@ -148,16 +139,7 @@
             onFocus={(e) => handleFocus(e)}
             onInputValueChange={(value) => handleInputValueChange(value)}
             v-slots={{
-              ..._.reduce(
-                _.keys(slots),
-                (result, key) => {
-                  if (slots[key]) {
-                    result[key] = (data) => slots[key]?.(data);
-                  }
-                  return result;
-                },
-                {}
-              ),
+              ...slots,
               empty: () => (
                 <a-empty
                   description={

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -16,6 +16,11 @@ declare module 'tippy.js' {
   export default tippy;
 }
 
+declare module 'highlight.js' {
+  import hljs from 'highlight.js';
+
+  export default hljs;
+}
 declare module '@vueuse/core' {
   export {
     createReusableTemplate,

diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
@@ -37,6 +37,7 @@ export default {
   'navbar.operatorhub': 'Operation Hub',
   'navbar.action.locale': 'Switch to English',
   'navbar.totalView': 'Dashboard',
+  'navbar.appearance': 'Appearance',
   ...localeCommon,
   ...localeSettings,
   ...localeLogin,

diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
@@ -38,6 +38,7 @@ export default {
   'navbar.operatorhub': '运维中心',
   'navbar.action.locale': '切换为中文',
   'navbar.totalView': '概览',
+  'navbar.appearance': '外观',
   ...localeCommon,
   ...localeSettings,
   ...localeLogin,

diff --git a/src/views/application-management/services/components/runs/detail-modal/index.vue b/src/views/application-management/services/components/runs/detail-modal/index.vue
@@ -73,7 +73,10 @@
             key="attributes"
             :title="$t('resource.revisons.detail.attributes')"
           >
-            <runAttributes :run-data="basicData"></runAttributes>
+            <runAttributes
+              :run-data="basicData"
+              :fullscreen="fullscreen"
+            ></runAttributes>
           </a-tab-pane>
           <a-tab-pane key="logs" :title="$t('applications.instance.tab.log')">
             <runLogs
@@ -86,7 +89,10 @@
             key="history"
             :title="$t('applications.applications.history.changeList')"
           >
-            <runChangeHistory :run-data="basicData"></runChangeHistory>
+            <runChangeHistory
+              :run-data="basicData"
+              :fullscreen="fullscreen"
+            ></runChangeHistory>
           </a-tab-pane>
         </a-tabs>
       </div>

diff --git a/src/views/application-management/services/components/runs/detail-modal/run-attributes.vue b/src/views/application-management/services/components/runs/detail-modal/run-attributes.vue
@@ -18,6 +18,10 @@
         default() {
           return {};
         }
+      },
+      fullscreen: {
+        type: Boolean,
+        default: false
       }
     },
     setup(props, ctx) {
@@ -38,6 +42,10 @@
       const yamlAttributes = ref('');
       const serviceInfo = inject(ProvideServiceInfoKey, ref<any>({}));
 
+      const maxHeight = computed(() => {
+        return props.fullscreen ? 'calc(100vh - 360px)' : '380px';
+      });
+
       const serviceDetail = computed(() => {
         return {
           ...serviceInfo.value,
@@ -75,7 +83,7 @@
                 editorId="yaml_editor"
                 editor-default-value={yamlAttributes.value}
                 lang="yaml"
-                height={380}
+                height={maxHeight.value}
               ></AceEditor>
             )}
           </div>

diff --git a/...views/application-management/services/components/runs/detail-modal/run-change-history.vue b/...views/application-management/services/components/runs/detail-modal/run-change-history.vue
@@ -13,6 +13,12 @@
         default() {
           return {};
         }
+      },
+      fullscreen: {
+        type: Boolean,
+        default() {
+          return false;
+        }
       }
     },
     setup(props, ctx) {
@@ -22,6 +28,10 @@
       });
       const loading = ref(false);
 
+      const maxHeight = computed(() => {
+        return props.fullscreen ? 'calc(100vh - 360px)' : '300px';
+      });
+
       const getRevisionChange = async () => {
         if (!props.runData.id || !props.runData.resource?.id) {
           return;
@@ -77,6 +87,7 @@
           ) : null}
           <a-spin loading={loading.value} style={{ width: '100%' }}>
             <CodeDiffView
+              maxHeight={maxHeight.value}
               content={diffContent.value}
               class="m-t-10 m-b-10"
               v-slots={{