From 79362bc5180214325e0ab12ad69fa643b5c65145 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Wed, 6 Mar 2024 13:04:19 +0800
Subject: [PATCH] fix(style): editor size in fullscreen

---
 components.d.ts                               |   4 +
 src/assets/style/variable.less                |   2 +-
 src/components/code-diff-view/index.vue       |  13 +-
 .../highlight-block/code-viewer.vue           |   5 +-
 src/components/highlight-block/index.vue      |   2 +-
 src/components/menu/config/index.ts           |   2 +-
 src/components/menu/index.vue                 | 112 ++++++++++++------
 .../seal-form/components/seal-select.vue      |  22 +---
 src/env.d.ts                                  |   5 +
 src/locale/en-US.ts                           |   1 +
 src/locale/zh-CN.ts                           |   1 +
 .../components/runs/detail-modal/index.vue    |  10 +-
 .../runs/detail-modal/run-attributes.vue      |  10 +-
 .../runs/detail-modal/run-change-history.vue  |  11 ++
 .../services/pages/edit.vue                   |  32 +++--
 .../components/definition-rules.vue           |  18 ++-
 16 files changed, 167 insertions(+), 83 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index c6110a560..4f1d45626 100644
--- 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
index c13b6a5a3..ab61fa38b 100644
--- 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
index 8c903992a..ff9c4e1cb 100644
--- 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
index 8efc642cf..3b6dd56f7 100644
--- 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
index 3d4d1f925..d823bf921 100644
--- 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
index f0dbdc419..b3c46aeaf 100644
--- 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
index dd71bfa41..565e1a500 100644
--- 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
index 316e34bf0..de3945dfd 100644
--- 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
index cd9c499c6..31f174638 100644
--- 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
index 91f55f5ee..8824fe382 100644
--- 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
index 31ef5d741..4d5db0cb8 100644
--- 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
index 993e4c754..59dceb601 100644
--- 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
index 2d828fa29..4cf9c6208 100644
--- 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/src/views/application-management/services/components/runs/detail-modal/run-change-history.vue b/src/views/application-management/services/components/runs/detail-modal/run-change-history.vue
index b5dd57948..bc962db8a 100644
--- a/src/views/application-management/services/components/runs/detail-modal/run-change-history.vue
+++ b/src/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={{
diff --git a/src/views/application-management/services/pages/edit.vue b/src/views/application-management/services/pages/edit.vue
index 56864ea56..a83fcf70f 100644
--- a/src/views/application-management/services/pages/edit.vue
+++ b/src/views/application-management/services/pages/edit.vue
@@ -265,25 +265,15 @@
         ></GroupForm>
       </a-spin>
 
-      <div
-        :style="{
-          'display': 'flex',
-          'width': '100%',
-          'margin-top': '40px',
-          'padding': '20px 0',
-          'align-items': 'flex-end',
-          'border-top': '1px solid var(--color-border-2)'
-        }"
-      >
+      <div class="comment-wrap">
         <a-textarea
           v-model="formData.changeComment"
+          class="textarea"
           :placeholder="$t('common.table.mark')"
           allow-clear
           :bordered="false"
           :style="{
-            'width': `${InputWidth.LARGE}px`,
-            'background': 'var(--color-white-1)',
-            'margin-right': '40px'
+            width: `${InputWidth.LARGE}px`
           }"
           :auto-size="{ minRows: 5, maxRows: 5 }"
         >
@@ -910,3 +900,19 @@
     }
   }
 </style>
+
+<style lang="less" scoped>
+  .comment-wrap {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    margin-top: 40px;
+    padding: 20px 0;
+    border-top: 1px solid var(--color-border-2);
+
+    .textarea {
+      margin-right: 40px;
+      background: var(--color-white-1);
+    }
+  }
+</style>
diff --git a/src/views/operation-hub/resource-definitions/components/definition-rules.vue b/src/views/operation-hub/resource-definitions/components/definition-rules.vue
index da3ad64a5..d92e05534 100644
--- a/src/views/operation-hub/resource-definitions/components/definition-rules.vue
+++ b/src/views/operation-hub/resource-definitions/components/definition-rules.vue
@@ -80,10 +80,11 @@
               <seal-select
                 v-model="formData.selector.projectNames"
                 :view-status="pageAction === PageAction.VIEW"
-                :options="projectList"
+                :options="setProjectList(formData.selector.projectNames)"
                 :required="true"
                 :multiple="true"
                 :max-tag-count="2"
+                allow-create
                 :label="$t('resource.definition.detail.projectName')"
                 :style="{ width: `${InputWidth.LARGE}px` }"
                 @change="handleProjectChange"
@@ -638,6 +639,21 @@
   provide(InjectSchemaFormStatusKey, ref(formAction));
   provide(InjectTraceKey, traceKey);
 
+  const setProjectList = (names: string[]) => {
+    const list = _.map(names, (name) => {
+      return {
+        label: name,
+        value: name
+      };
+    });
+
+    // concat with projectList and remove duplicate
+    const result = _.uniqBy(
+      _.concat(list, props.projectList),
+      (item) => item.value
+    );
+    return result;
+  };
   const handleRenderEnd = () => {
     setTimeout(() => {
       asyncLoading.value = false;