Skip to content

Commit bcbd05d

Browse files
ZhaoJiSenZhaoJiSen
committed
feat(layout): connect the Assets dialog box
1 parent 4e3645b commit bcbd05d

File tree

9 files changed

+300
-43
lines changed

9 files changed

+300
-43
lines changed

‎components.d.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ declare module 'vue' {
1111
Hello: typeof import('./src/components/Hello.vue')['default']
1212
Loading: typeof import('./src/components/Loading/index.vue')['default']
1313
NButton: typeof import('naive-ui')['NButton']
14+
NCard: typeof import('naive-ui')['NCard']
1415
NCheckbox: typeof import('naive-ui')['NCheckbox']
1516
NConfigProvider: typeof import('naive-ui')['NConfigProvider']
1617
NDialog: typeof import('naive-ui')['NDialog']
@@ -39,10 +40,13 @@ declare module 'vue' {
3940
NListItem: typeof import('naive-ui')['NListItem']
4041
NMessageProvider: typeof import('naive-ui')['NMessageProvider']
4142
NPopover: typeof import('naive-ui')['NPopover']
43+
NRadio: typeof import('naive-ui')['NRadio']
44+
NRadioGroup: typeof import('naive-ui')['NRadioGroup']
4245
NSelect: typeof import('naive-ui')['NSelect']
4346
NSpace: typeof import('naive-ui')['NSpace']
4447
NSpin: typeof import('naive-ui')['NSpin']
4548
NSwitch: typeof import('naive-ui')['NSwitch']
49+
NTab: typeof import('naive-ui')['NTab']
4650
NTabPane: typeof import('naive-ui')['NTabPane']
4751
NTabs: typeof import('naive-ui')['NTabs']
4852
NTag: typeof import('naive-ui')['NTag']

‎src/API/modules/init.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,3 +45,10 @@ export const getPublic = (): Promise<any> => {
4545
export const getSystemSetting = () => {
4646
return http.get('/api/v1/users/preference/?category=luna');
4747
};
48+
49+
/**
50+
* @description 获取连接方式
51+
*/
52+
export const getConnectMethods = (): Promise<any> => {
53+
return http.get('/api/v1/terminal/components/connect-methods/');
54+
};

‎src/ThemeOverrides.ts

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export const lightThemeOverrides: GlobalThemeOverrides = {
2929
fontSizeLarge: '15px',
3030
padding: '0 12px'
3131
},
32-
Divider: {
33-
margin: '0 12px'
32+
Button: {
33+
textColor: '#fff'
3434
}
3535
};
3636

@@ -61,7 +61,23 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
6161
fontSizeLarge: '15px',
6262
padding: '0 12px'
6363
},
64-
Divider: {
65-
margin: '0 12px'
64+
Button: {
65+
colorPrimary: '#1ab394',
66+
textColorPrimary: '#fff',
67+
68+
// button 悬浮的样式
69+
colorHoverPrimary: '#1ab394',
70+
textColorHoverPrimary: '#fff',
71+
borderHoverPrimary: '#000',
72+
73+
// button 聚焦的样式
74+
textColorFocusPrimary: '#fff',
75+
colorFocusPrimary: '#1ab394',
76+
borderFocusPrimary: '#000',
77+
78+
//
79+
textColorPressedPrimary: '#fff',
80+
colorPressedPrimary: '#1ab394',
81+
borderPressedPrimary: '#000'
6682
}
6783
};

‎src/components/ConnectionDialog/index.vue

Lines changed: 222 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,212 @@
11
<template>
22
<n-tabs animated trigger="hover" size="large">
33
<n-tab-pane
4-
v-for="(protocol, index) of permed_protocols"
4+
v-for="(connectType, index) of connectConnectTypeComputed"
55
:key="index"
6-
:name="protocol.name"
7-
:tab="protocol.name.toUpperCase()"
6+
:name="connectType.name"
7+
:tab="connectType.name.toUpperCase()"
88
>
99
<n-form ref="formRef" size="large" label-placement="top">
1010
<n-grid :cols="24" :x-gap="24">
11-
<n-form-item-gi :span="24" :label="t('Select account')">
11+
<!-- 账号选择 -->
12+
<n-form-item-gi
13+
:span="24"
14+
:label="t('Select account')"
15+
:label-style="{ letterSpacing: '0.7px' }"
16+
>
1217
<n-select
1318
v-model:value="model.selectValue"
19+
size="medium"
1420
:placeholder="t('Select account')"
1521
:options="assetCount"
1622
/>
1723
</n-form-item-gi>
1824

19-
<n-form-item-gi :span="24" :label="t('Password')">
25+
<!-- 密码 -->
26+
<n-form-item-gi
27+
:span="24"
28+
:label="t('Password')"
29+
:label-style="{ letterSpacing: '0.7px' }"
30+
>
2031
<n-grid :cols="24" :x-gap="24">
2132
<n-grid-item :span="18">
2233
<n-input
2334
v-model:value="model.inputValue"
2435
:placeholder="t('Please input password')"
2536
clearable
37+
size="medium"
2638
type="password"
2739
show-password-on="mousedown"
2840
/>
2941
</n-grid-item>
30-
<n-grid-item :span="6" class="remember-password">
31-
<n-checkbox>{{ t('Remember password') }}</n-checkbox>
42+
<n-grid-item
43+
:span="6"
44+
:style="{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }"
45+
>
46+
<n-checkbox size="medium">{{ t('Remember password') }}</n-checkbox>
3247
</n-grid-item>
3348
</n-grid>
3449
</n-form-item-gi>
50+
51+
<!-- 连接方式 -->
52+
<n-form-item-gi
53+
:span="24"
54+
:label="t('Connect method')"
55+
:label-style="{ letterSpacing: '0.7px' }"
56+
>
57+
<n-card>
58+
<n-tabs animated size="medium" justify-content="center" type="segment">
59+
<n-tab-pane
60+
v-for="(method, methodIndex) of connectType.connectMethods"
61+
:name="method.label"
62+
:key="methodIndex"
63+
>
64+
<n-radio-group v-model:value="model.checkedValue">
65+
<n-space>
66+
<n-radio
67+
v-for="(item, indexItem) of method.methods"
68+
:key="indexItem"
69+
:value="item.value"
70+
size="medium"
71+
>
72+
{{ item.label }}
73+
</n-radio>
74+
</n-space>
75+
</n-radio-group>
76+
</n-tab-pane>
77+
</n-tabs>
78+
</n-card>
79+
</n-form-item-gi>
80+
81+
<!-- 高级选项 -->
82+
<n-form-item-gi
83+
:span="24"
84+
:label-style="{ letterSpacing: '0.7px' }"
85+
:class="showAdvanced ? 'advanced-option' : ''"
86+
>
87+
<template #label>
88+
<n-grid :cols="24" :x-gap="24">
89+
<n-grid-item :span="22">
90+
<span>{{ t('Advanced option') }}</span>
91+
</n-grid-item>
92+
<n-grid-item
93+
:span="2"
94+
:style="{ display: 'flex', justifyContent: 'flex-end', cursor: 'pointer' }"
95+
>
96+
<n-icon :size="16" @click="handleShowAdvanced">
97+
<ArrowUp v-if="showAdvanced" />
98+
<ArrowDown v-else />
99+
</n-icon>
100+
</n-grid-item>
101+
</n-grid>
102+
</template>
103+
104+
<n-card
105+
v-show="!showAdvanced"
106+
:title="t('Backspace as Ctrl+H')"
107+
:header-style="{ fontSize: '12px !important' }"
108+
>
109+
<n-select
110+
v-model:value="model.backspaceAsCtrlH"
111+
size="medium"
112+
:placeholder="t('Select account')"
113+
:options="backspaceOptions"
114+
/>
115+
</n-card>
116+
</n-form-item-gi>
117+
118+
<!-- 记住选择-->
119+
<n-form-item-gi
120+
:span="24"
121+
:label-style="{ letterSpacing: '0.7px' }"
122+
class="remember-select"
123+
>
124+
<template #label>
125+
<n-grid :cols="24">
126+
<n-grid-item :span="12">
127+
<span>{{ t('Remember select') }}</span>
128+
</n-grid-item>
129+
<n-grid-item
130+
:span="12"
131+
:style="{ display: 'flex', justifyContent: 'flex-end', cursor: 'pointer' }"
132+
>
133+
<n-checkbox size="medium">
134+
<n-text :style="{ fontSize: '12px !important' }">
135+
{{ t('Automatic login next') }}
136+
</n-text>
137+
</n-checkbox>
138+
</n-grid-item>
139+
</n-grid>
140+
</template>
141+
</n-form-item-gi>
142+
143+
<!-- 连接按钮-->
144+
<n-form-item-gi :span="24" justify="center">
145+
<n-button type="primary" round style="width: 100%" size="medium">
146+
{{ t('Connect') }}
147+
</n-button>
148+
</n-form-item-gi>
35149
</n-grid>
36150
</n-form>
37151
</n-tab-pane>
38152
</n-tabs>
39153
</template>
40154

41155
<script setup lang="ts">
42-
import { computed, reactive } from 'vue';
156+
import { computed, reactive, ref } from 'vue';
157+
43158
import { useI18n } from 'vue-i18n';
159+
import { storeToRefs } from 'pinia';
160+
import { ArrowDown, ArrowUp } from '@vicons/ionicons5';
161+
import { useGlobalStore } from '@/stores/modules/global.ts';
44162
45163
const { t } = useI18n();
164+
const globalStore = useGlobalStore();
165+
const { connectMethods } = storeToRefs(globalStore);
166+
167+
interface Protocol {
168+
name: string;
169+
port: number;
170+
public: boolean;
171+
setting: {
172+
sftp_enabled: boolean;
173+
sftp_home: string;
174+
};
175+
}
176+
177+
interface connectMethodItem {
178+
component: string;
179+
endpoint_protocol: string;
180+
label: string;
181+
type: string;
182+
value: string;
183+
}
46184
47185
const props = defineProps<{
48186
id: string;
49187
permedAccounts: any;
50188
permedProtocols: any;
51189
}>();
52190
191+
console.log('props', props);
192+
console.log('connectMethods', connectMethods.value);
193+
194+
const model = reactive({
195+
inputValue: '',
196+
selectValue: null,
197+
checkedValue: null,
198+
backspaceAsCtrlH: true
199+
});
200+
201+
const showAdvanced = ref(false);
202+
203+
const connectMethodTypes = [
204+
{ value: 'web', label: 'Web', methods: [] },
205+
{ value: 'native', label: t('Native'), methods: [] },
206+
{ value: 'applet', label: t('Applet'), methods: [] },
207+
{ value: 'virtual_app', label: t('VirtualApp'), methods: [] }
208+
];
209+
53210
const assetCount = computed(() => {
54211
//todo)) 类型
55212
const tempArr = [];
@@ -62,18 +219,69 @@ const assetCount = computed(() => {
62219
63220
return tempArr!;
64221
});
222+
const backspaceOptions = [
223+
{
224+
label: '是',
225+
value: true
226+
},
227+
{
228+
label: '否',
229+
value: false
230+
}
231+
];
65232
66-
console.log(assetCount);
67-
console.log(props);
233+
// 整合 连接方式 tab 数据
234+
const connectConnectTypeComputed = computed(() => {
235+
return props.permedProtocols.map((protocol: Protocol) => {
236+
const filteredConnectMethods = connectMethodTypes
237+
.map(type => {
238+
return {
239+
...type,
240+
methods: connectMethods.value[protocol.name].filter(
241+
(method: connectMethodItem) => type.value === method.type
242+
)
243+
};
244+
})
245+
.filter(type => type.methods.length > 0);
68246
69-
const model = reactive({
70-
inputValue: '',
71-
selectValue: null
247+
return {
248+
name: protocol.name,
249+
connectMethods: filteredConnectMethods
250+
};
251+
});
72252
});
253+
254+
const handleShowAdvanced = () => {
255+
showAdvanced.value = !showAdvanced.value;
256+
};
257+
258+
console.log('connectConnectTypeComputed', connectConnectTypeComputed);
73259
</script>
74260

75261
<style scoped lang="scss">
76-
.remember-password {
262+
:deep(.n-form-item-feedback-wrapper) {
263+
min-height: 20px;
264+
}
265+
266+
// 高级选项部分样式修改
267+
:deep(.advanced-option) {
268+
.n-form-item-label {
269+
margin-bottom: 25px;
270+
}
271+
.n-form-item-blank,
272+
.n-form-item-feedback-wrapper {
273+
display: none !important;
274+
}
275+
}
276+
277+
// 记住选择样式修改
278+
:deep(.remember-select) {
279+
.n-form-item-blank {
280+
display: none;
281+
}
282+
}
283+
.remember-password,
284+
.advanced_option {
77285
display: flex;
78286
align-items: center;
79287
justify-content: flex-end;

‎src/layouts/components/SettingDrawer/index.vue

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ import { useTheme } from '@/hooks/useTheme.ts';
8484
import { useTranslations } from '@/hooks/useTranslate';
8585
import { useTreeStore } from '@/stores/modules/tree.ts';
8686
import { useGlobalStore } from '@/stores/modules/global.ts';
87-
import { watch, onBeforeUnmount, reactive, ref } from 'vue';
87+
import { watch, onBeforeUnmount, reactive, ref, nextTick } from 'vue';
8888
8989
import mittBus from '@/utils/mittBus.ts';
9090
import {
@@ -164,8 +164,10 @@ const languageOptions = reactive([
164164
]);
165165
166166
const handleDarkModeChange = (value: Boolean) => {
167-
globalStore.setGlobalState('isDark', value);
168-
switchDark();
167+
nextTick(() => {
168+
globalStore.setGlobalState('isDark', value);
169+
switchDark();
170+
});
169171
};
170172
const handleAssetAsyncChange = (value: Boolean) => {
171173
treeStore.changeState(value);

0 commit comments

Comments
 (0)