feat(layout): connect the Assets dialog box

components.d.ts

@@ -11,6 +11,7 @@ declare module 'vue' {
     Hello: typeof import('./src/components/Hello.vue')['default']
     Loading: typeof import('./src/components/Loading/index.vue')['default']
     NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDialog: typeof import('naive-ui')['NDialog']
@@ -39,10 +40,13 @@ declare module 'vue' {
     NListItem: typeof import('naive-ui')['NListItem']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NPopover: typeof import('naive-ui')['NPopover']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
+    NTab: typeof import('naive-ui')['NTab']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
     NTag: typeof import('naive-ui')['NTag']

src/API/modules/init.ts

@@ -45,3 +45,10 @@ export const getPublic = (): Promise<any> => {
 export const getSystemSetting = () => {
   return http.get('/api/v1/users/preference/?category=luna');
 };
+
+/**
+ * @description 获取连接方式
+ */
+export const getConnectMethods = (): Promise<any> => {
+  return http.get('/api/v1/terminal/components/connect-methods/');
+};

src/ThemeOverrides.ts

@@ -29,8 +29,8 @@ export const lightThemeOverrides: GlobalThemeOverrides = {
     fontSizeLarge: '15px',
     padding: '0 12px'
   },
-  Divider: {
-    margin: '0 12px'
+  Button: {
+    textColor: '#fff'
   }
 };
 
@@ -61,7 +61,23 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     fontSizeLarge: '15px',
     padding: '0 12px'
   },
-  Divider: {
-    margin: '0 12px'
+  Button: {
+    colorPrimary: '#1ab394',
+    textColorPrimary: '#fff',
+
+    // button 悬浮的样式
+    colorHoverPrimary: '#1ab394',
+    textColorHoverPrimary: '#fff',
+    borderHoverPrimary: '#000',
+
+    // button 聚焦的样式
+    textColorFocusPrimary: '#fff',
+    colorFocusPrimary: '#1ab394',
+    borderFocusPrimary: '#000',
+
+    //
+    textColorPressedPrimary: '#fff',
+    colorPressedPrimary: '#1ab394',
+    borderPressedPrimary: '#000'
   }
 };

src/components/ConnectionDialog/index.vue

@@ -1,55 +1,212 @@
 <template>
   <n-tabs animated trigger="hover" size="large">
     <n-tab-pane
-      v-for="(protocol, index) of permed_protocols"
+      v-for="(connectType, index) of connectConnectTypeComputed"
       :key="index"
-      :name="protocol.name"
-      :tab="protocol.name.toUpperCase()"
+      :name="connectType.name"
+      :tab="connectType.name.toUpperCase()"
     >
       <n-form ref="formRef" size="large" label-placement="top">
         <n-grid :cols="24" :x-gap="24">
-          <n-form-item-gi :span="24" :label="t('Select account')">
+          <!-- 账号选择 -->
+          <n-form-item-gi
+            :span="24"
+            :label="t('Select account')"
+            :label-style="{ letterSpacing: '0.7px' }"
+          >
             <n-select
               v-model:value="model.selectValue"
+              size="medium"
               :placeholder="t('Select account')"
               :options="assetCount"
             />
           </n-form-item-gi>
 
-          <n-form-item-gi :span="24" :label="t('Password')">
+          <!-- 密码 -->
+          <n-form-item-gi
+            :span="24"
+            :label="t('Password')"
+            :label-style="{ letterSpacing: '0.7px' }"
+          >
             <n-grid :cols="24" :x-gap="24">
               <n-grid-item :span="18">
                 <n-input
                   v-model:value="model.inputValue"
                   :placeholder="t('Please input password')"
                   clearable
+                  size="medium"
                   type="password"
                   show-password-on="mousedown"
                 />
               </n-grid-item>
-              <n-grid-item :span="6" class="remember-password">
-                <n-checkbox>{{ t('Remember password') }}</n-checkbox>
+              <n-grid-item
+                :span="6"
+                :style="{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }"
+              >
+                <n-checkbox size="medium">{{ t('Remember password') }}</n-checkbox>
               </n-grid-item>
             </n-grid>
           </n-form-item-gi>
+
+          <!-- 连接方式 -->
+          <n-form-item-gi
+            :span="24"
+            :label="t('Connect method')"
+            :label-style="{ letterSpacing: '0.7px' }"
+          >
+            <n-card>
+              <n-tabs animated size="medium" justify-content="center" type="segment">
+                <n-tab-pane
+                  v-for="(method, methodIndex) of connectType.connectMethods"
+                  :name="method.label"
+                  :key="methodIndex"
+                >
+                  <n-radio-group v-model:value="model.checkedValue">
+                    <n-space>
+                      <n-radio
+                        v-for="(item, indexItem) of method.methods"
+                        :key="indexItem"
+                        :value="item.value"
+                        size="medium"
+                      >
+                        {{ item.label }}
+                      </n-radio>
+                    </n-space>
+                  </n-radio-group>
+                </n-tab-pane>
+              </n-tabs>
+            </n-card>
+          </n-form-item-gi>
+
+          <!-- 高级选项 -->
+          <n-form-item-gi
+            :span="24"
+            :label-style="{ letterSpacing: '0.7px' }"
+            :class="showAdvanced ? 'advanced-option' : ''"
+          >
+            <template #label>
+              <n-grid :cols="24" :x-gap="24">
+                <n-grid-item :span="22">
+                  <span>{{ t('Advanced option') }}</span>
+                </n-grid-item>
+                <n-grid-item
+                  :span="2"
+                  :style="{ display: 'flex', justifyContent: 'flex-end', cursor: 'pointer' }"
+                >
+                  <n-icon :size="16" @click="handleShowAdvanced">
+                    <ArrowUp v-if="showAdvanced" />
+                    <ArrowDown v-else />
+                  </n-icon>
+                </n-grid-item>
+              </n-grid>
+            </template>
+
+            <n-card
+              v-show="!showAdvanced"
+              :title="t('Backspace as Ctrl+H')"
+              :header-style="{ fontSize: '12px !important' }"
+            >
+              <n-select
+                v-model:value="model.backspaceAsCtrlH"
+                size="medium"
+                :placeholder="t('Select account')"
+                :options="backspaceOptions"
+              />
+            </n-card>
+          </n-form-item-gi>
+
+          <!-- 记住选择-->
+          <n-form-item-gi
+            :span="24"
+            :label-style="{ letterSpacing: '0.7px' }"
+            class="remember-select"
+          >
+            <template #label>
+              <n-grid :cols="24">
+                <n-grid-item :span="12">
+                  <span>{{ t('Remember select') }}</span>
+                </n-grid-item>
+                <n-grid-item
+                  :span="12"
+                  :style="{ display: 'flex', justifyContent: 'flex-end', cursor: 'pointer' }"
+                >
+                  <n-checkbox size="medium">
+                    <n-text :style="{ fontSize: '12px !important' }">
+                      {{ t('Automatic login next') }}
+                    </n-text>
+                  </n-checkbox>
+                </n-grid-item>
+              </n-grid>
+            </template>
+          </n-form-item-gi>
+
+          <!-- 连接按钮-->
+          <n-form-item-gi :span="24" justify="center">
+            <n-button type="primary" round style="width: 100%" size="medium">
+              {{ t('Connect') }}
+            </n-button>
+          </n-form-item-gi>
         </n-grid>
       </n-form>
     </n-tab-pane>
   </n-tabs>
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from 'vue';
+import { computed, reactive, ref } from 'vue';
+
 import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
+import { ArrowDown, ArrowUp } from '@vicons/ionicons5';
+import { useGlobalStore } from '@/stores/modules/global.ts';
 
 const { t } = useI18n();
+const globalStore = useGlobalStore();
+const { connectMethods } = storeToRefs(globalStore);
+
+interface Protocol {
+  name: string;
+  port: number;
+  public: boolean;
+  setting: {
+    sftp_enabled: boolean;
+    sftp_home: string;
+  };
+}
+
+interface connectMethodItem {
+  component: string;
+  endpoint_protocol: string;
+  label: string;
+  type: string;
+  value: string;
+}
 
 const props = defineProps<{
   id: string;
   permedAccounts: any;
   permedProtocols: any;
 }>();
 
+console.log('props', props);
+console.log('connectMethods', connectMethods.value);
+
+const model = reactive({
+  inputValue: '',
+  selectValue: null,
+  checkedValue: null,
+  backspaceAsCtrlH: true
+});
+
+const showAdvanced = ref(false);
+
+const connectMethodTypes = [
+  { value: 'web', label: 'Web', methods: [] },
+  { value: 'native', label: t('Native'), methods: [] },
+  { value: 'applet', label: t('Applet'), methods: [] },
+  { value: 'virtual_app', label: t('VirtualApp'), methods: [] }
+];
+
 const assetCount = computed(() => {
   //todo)) 类型
   const tempArr = [];
@@ -62,18 +219,69 @@ const assetCount = computed(() => {
 
   return tempArr!;
 });
+const backspaceOptions = [
+  {
+    label: '是',
+    value: true
+  },
+  {
+    label: '否',
+    value: false
+  }
+];
 
-console.log(assetCount);
-console.log(props);
+// 整合 连接方式 tab 数据
+const connectConnectTypeComputed = computed(() => {
+  return props.permedProtocols.map((protocol: Protocol) => {
+    const filteredConnectMethods = connectMethodTypes
+      .map(type => {
+        return {
+          ...type,
+          methods: connectMethods.value[protocol.name].filter(
+            (method: connectMethodItem) => type.value === method.type
+          )
+        };
+      })
+      .filter(type => type.methods.length > 0);
 
-const model = reactive({
-  inputValue: '',
-  selectValue: null
+    return {
+      name: protocol.name,
+      connectMethods: filteredConnectMethods
+    };
+  });
 });
+
+const handleShowAdvanced = () => {
+  showAdvanced.value = !showAdvanced.value;
+};
+
+console.log('connectConnectTypeComputed', connectConnectTypeComputed);
 </script>
 
 <style scoped lang="scss">
-.remember-password {
+:deep(.n-form-item-feedback-wrapper) {
+  min-height: 20px;
+}
+
+// 高级选项部分样式修改
+:deep(.advanced-option) {
+  .n-form-item-label {
+    margin-bottom: 25px;
+  }
+  .n-form-item-blank,
+  .n-form-item-feedback-wrapper {
+    display: none !important;
+  }
+}
+
+// 记住选择样式修改
+:deep(.remember-select) {
+  .n-form-item-blank {
+    display: none;
+  }
+}
+.remember-password,
+.advanced_option {
   display: flex;
   align-items: center;
   justify-content: flex-end;

src/layouts/components/SettingDrawer/index.vue

@@ -84,7 +84,7 @@ import { useTheme } from '@/hooks/useTheme.ts';
 import { useTranslations } from '@/hooks/useTranslate';
 import { useTreeStore } from '@/stores/modules/tree.ts';
 import { useGlobalStore } from '@/stores/modules/global.ts';
-import { watch, onBeforeUnmount, reactive, ref } from 'vue';
+import { watch, onBeforeUnmount, reactive, ref, nextTick } from 'vue';
 
 import mittBus from '@/utils/mittBus.ts';
 import {
@@ -164,8 +164,10 @@ const languageOptions = reactive([
 ]);
 
 const handleDarkModeChange = (value: Boolean) => {
-  globalStore.setGlobalState('isDark', value);
-  switchDark();
+  nextTick(() => {
+    globalStore.setGlobalState('isDark', value);
+    switchDark();
+  });
 };
 const handleAssetAsyncChange = (value: Boolean) => {
   treeStore.changeState(value);