Skip to content
This repository was archived by the owner on Sep 16, 2024. It is now read-only.

Commit 5d6f95f

Browse files
hibighibig
committed
chore: user providers Instructions
1 parent 5919bf5 commit 5d6f95f

File tree

5 files changed

+237
-116
lines changed

5 files changed

+237
-116
lines changed

‎components.d.ts

-5
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ declare module 'vue' {
1010
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb'];
1111
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem'];
1212
AButton: typeof import('@arco-design/web-vue')['Button'];
13-
AButtton: typeof import('@arco-design/web-vue')['Buttton'];
1413
ACard: typeof import('@arco-design/web-vue')['Card'];
1514
ACascader: typeof import('@arco-design/web-vue')['Cascader'];
1615
ACheckbox: typeof import('@arco-design/web-vue')['Checkbox'];
@@ -35,20 +34,16 @@ declare module 'vue' {
3534
ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter'];
3635
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider'];
3736
ALink: typeof import('@arco-design/web-vue')['Link'];
38-
AList: typeof import('@arco-design/web-vue')['List'];
39-
AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta'];
4037
AMenu: typeof import('@arco-design/web-vue')['Menu'];
4138
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem'];
4239
AModal: typeof import('@arco-design/web-vue')['Modal'];
4340
AOption: typeof import('@arco-design/web-vue')['Option'];
4441
APagination: typeof import('@arco-design/web-vue')['Pagination'];
4542
AProgress: typeof import('@arco-design/web-vue')['Progress'];
46-
ARangePicker: typeof import('@arco-design/web-vue')['RangePicker'];
4743
AResult: typeof import('@arco-design/web-vue')['Result'];
4844
ASelect: typeof import('@arco-design/web-vue')['Select'];
4945
ASpace: typeof import('@arco-design/web-vue')['Space'];
5046
ASpin: typeof import('@arco-design/web-vue')['Spin'];
51-
AStatistic: typeof import('@arco-design/web-vue')['Statistic'];
5247
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu'];
5348
ASwitch: typeof import('@arco-design/web-vue')['Switch'];
5449
ATable: typeof import('@arco-design/web-vue')['Table'];

‎src/locale/en-US/common.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -173,5 +173,6 @@ export default {
173173
'common.nodata.created': 'No {type} has been created yet',
174174
'common.nodata.added': 'No {type} has been added yet',
175175
'common.status.edited': 'Edited',
176-
'common.table.user': '用户'
176+
'common.table.user': '用户',
177+
'common.settings.instructions': 'Instructions'
177178
};

‎src/locale/zh-CN/common.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -169,5 +169,6 @@ export default {
169169
'common.nodata.created': '尚未创建{type}',
170170
'common.nodata.added': '尚未添加{type}',
171171
'common.status.edited': '已编辑',
172-
'common.table.user': '用户'
172+
'common.table.user': '用户',
173+
'common.settings.instructions': '操作指引'
173174
};

‎src/views/subject-providers/components/create-subject-provider.vue

+171-109
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
ProviderSpecConfig,
2929
FieldType
3030
} from '../config';
31+
import stepsMap from '../config/instructions';
3132
import { FormData } from '../config/interface';
3233
3334
export default defineComponent({
@@ -53,6 +54,7 @@
5354
}
5455
},
5556
setup(props, { emit }) {
57+
const siteOrigin = window.location.origin;
5658
const { t } = i18n.global;
5759
const submitLoading = ref(false);
5860
const formref = ref();
@@ -81,6 +83,13 @@
8183
}
8284
});
8385
86+
const operationSteps = computed(() => {
87+
const steps = stepsMap[formData.value.spec.type];
88+
return steps?.({
89+
origin: siteOrigin
90+
});
91+
});
92+
8493
const providerList = computed(() => {
8594
return _.map(_.keys(ProviderTypes), (key) => {
8695
return {
@@ -278,25 +287,33 @@
278287
<>
279288
{advancedOptions.length > 0 && (
280289
<div title="Advanced Options">
281-
<a-button
282-
class="size-14"
283-
type="text"
290+
<div
291+
class="flex"
284292
style={{
285-
padding: '0 2px',
286-
marginBottom: '12px',
287-
fontSize: 'var(--font-size-large)'
288-
}}
289-
onClick={() => {
290-
showAdavanced.value = !showAdavanced.value;
291-
}}
292-
v-slots={{
293-
icon: () => {
294-
return <icon-settings />;
295-
}
293+
borderBottom: '1px solid var(--color-border-2)',
294+
marginBottom: '12px'
296295
}}
297296
>
298-
Advanced Options
299-
</a-button>
297+
<a-link
298+
class="size-14"
299+
type="text"
300+
style={{
301+
padding: '4px 2px',
302+
303+
fontSize: 'var(--font-size-large)'
304+
}}
305+
onClick={() => {
306+
showAdavanced.value = !showAdavanced.value;
307+
}}
308+
v-slots={{
309+
icon: () => {
310+
return <icon-settings />;
311+
}
312+
}}
313+
>
314+
Advanced Options
315+
</a-link>
316+
</div>
300317
{showAdavanced.value &&
301318
renderOptions(advancedOptions?.[0]?.options)}
302319
</div>
@@ -313,12 +330,36 @@
313330
314331
return <>{renderOptions(basicOptions)}</>;
315332
};
333+
334+
const renderSteps = () => {
335+
return (
336+
<>
337+
{_.map(operationSteps.value, (item, index) => {
338+
return (
339+
<div
340+
class="step-item"
341+
style={{
342+
padding: '4px 0',
343+
lineHeight: '22px',
344+
wordBreak: 'break-all',
345+
fontSize: 'var(--font-size-small)',
346+
color: 'var(--color-text-3)'
347+
}}
348+
key={index}
349+
>
350+
{index + 1}. <span v-html={item}></span>
351+
</div>
352+
);
353+
})}
354+
</>
355+
);
356+
};
316357
return () => (
317358
<a-modal
318359
top="5%"
319360
closable={false}
320361
align-center={false}
321-
width={600}
362+
width={900}
322363
ok-text={t('common.button.save')}
323364
visible={props.show}
324365
mask-closable={false}
@@ -352,102 +393,123 @@
352393
}
353394
}}
354395
>
355-
<a-form
356-
ref={(el) => {
357-
formref.value = el;
358-
}}
359-
model={formData.value}
360-
auto-label-width
361-
>
362-
<a-form-item
363-
hide-label
364-
field="metadata.name"
365-
validate-trigger={['change', 'input']}
366-
rules={[
367-
{
368-
required: true,
369-
match: validateUserNameRegx,
370-
message: t('account.create.rules.username')
371-
}
372-
]}
373-
>
374-
<seal-input
375-
v-model={[formData.value.metadata.name, 'modelValue', ['trim']]}
376-
label={t('profile.account.name')}
377-
required={true}
378-
max-length={validateInputLength.NAME}
379-
show-word-limit
380-
style={{ width: '100%' }}
381-
disabled={props.action === 'edit'}
382-
></seal-input>
383-
</a-form-item>
384-
<a-form-item
385-
hide-label
386-
field="spec.displayName"
387-
validate-trigger={['change', 'input']}
396+
<div class="flex">
397+
<a-form
398+
ref={(el) => {
399+
formref.value = el;
400+
}}
401+
model={formData.value}
402+
auto-label-width
403+
style={{ flex: 1 }}
388404
>
389-
<seal-input
390-
v-model={[
391-
formData.value.spec.displayName,
392-
'modelValue',
393-
['trim']
405+
<a-form-item
406+
hide-label
407+
field="metadata.name"
408+
validate-trigger={['change', 'input']}
409+
rules={[
410+
{
411+
required: true,
412+
match: validateUserNameRegx,
413+
message: t('account.create.rules.username')
414+
}
394415
]}
395-
label={t('settings.user.nickName')}
396-
max-length={validateInputLength.NAME}
397-
show-word-limit
398-
style={{ width: '100%' }}
399-
></seal-input>
400-
</a-form-item>
401-
<a-form-item
402-
hide-label
403-
validate-trigger={['change', 'input']}
404-
rules={[
405-
{
406-
required: false,
407-
message: t('propfile.account.settings.rules.role')
408-
}
409-
]}
410-
>
411-
<seal-select
412-
v-model={formData.value.spec.type}
413-
label={t('common.table.type')}
414-
onChange={(val) => handleTypeChange(val)}
415-
style={{ width: '100%' }}
416-
v-slots={{
417-
prefix: () => {
418-
return (
419-
<ProviderIcon
420-
provider={_.toLower(formData.value.spec?.type || '')}
421-
></ProviderIcon>
422-
);
416+
>
417+
<seal-input
418+
v-model={[
419+
formData.value.metadata.name,
420+
'modelValue',
421+
['trim']
422+
]}
423+
label={t('profile.account.name')}
424+
required={true}
425+
popupInfo={`名称须与回调地址${siteOrigin}/identify/callback/{provider}中的provider一致`}
426+
max-length={validateInputLength.NAME}
427+
show-word-limit
428+
style={{ width: '100%' }}
429+
disabled={props.action === 'edit'}
430+
></seal-input>
431+
</a-form-item>
432+
<a-form-item
433+
hide-label
434+
field="spec.displayName"
435+
validate-trigger={['change', 'input']}
436+
>
437+
<seal-input
438+
v-model={[
439+
formData.value.spec.displayName,
440+
'modelValue',
441+
['trim']
442+
]}
443+
label={t('settings.user.nickName')}
444+
max-length={validateInputLength.NAME}
445+
show-word-limit
446+
style={{ width: '100%' }}
447+
></seal-input>
448+
</a-form-item>
449+
<a-form-item
450+
hide-label
451+
validate-trigger={['change', 'input']}
452+
rules={[
453+
{
454+
required: false,
455+
message: t('propfile.account.settings.rules.role')
423456
}
424-
}}
457+
]}
425458
>
426-
{_.map(providerList.value, (item, index) => {
427-
return (
428-
<a-option key={index} value={item.value}>
429-
<ProviderIcon
430-
provider={_.toLower(item.value)}
431-
></ProviderIcon>
432-
<span class="m-l-10">{t(item.label)}</span>
433-
</a-option>
434-
);
435-
})}
436-
</seal-select>
437-
</a-form-item>
438-
{renderProviderConfig()}
439-
{renderAdvancedOptions()}
440-
<a-form-item label={t('common.table.description')} hide-label>
441-
<seal-textarea
442-
v-model={formData.value.spec.description}
443-
label={t('common.table.description')}
444-
max-length={validateInputLength.DESC}
445-
show-word-limit
446-
style={{ width: '100%' }}
447-
auto-size={{ minRows: 4, maxRows: 6 }}
448-
></seal-textarea>
449-
</a-form-item>
450-
</a-form>
459+
<seal-select
460+
v-model={formData.value.spec.type}
461+
label={t('common.table.type')}
462+
onChange={(val) => handleTypeChange(val)}
463+
style={{ width: '100%' }}
464+
v-slots={{
465+
prefix: () => {
466+
return (
467+
<ProviderIcon
468+
provider={_.toLower(formData.value.spec?.type || '')}
469+
></ProviderIcon>
470+
);
471+
}
472+
}}
473+
>
474+
{_.map(providerList.value, (item, index) => {
475+
return (
476+
<a-option key={index} value={item.value}>
477+
<ProviderIcon
478+
provider={_.toLower(item.value)}
479+
></ProviderIcon>
480+
<span class="m-l-10">{t(item.label)}</span>
481+
</a-option>
482+
);
483+
})}
484+
</seal-select>
485+
</a-form-item>
486+
{renderProviderConfig()}
487+
<a-form-item label={t('common.table.description')} hide-label>
488+
<seal-textarea
489+
v-model={formData.value.spec.description}
490+
label={t('common.table.description')}
491+
max-length={validateInputLength.DESC}
492+
show-word-limit
493+
style={{ width: '100%' }}
494+
auto-size={{ minRows: 4, maxRows: 6 }}
495+
></seal-textarea>
496+
</a-form-item>
497+
{renderAdvancedOptions()}
498+
</a-form>
499+
<div
500+
class="steps"
501+
style={{
502+
width: '360px',
503+
padding: '0 20px'
504+
}}
505+
>
506+
<div class="m-b-20">
507+
{formData.value.spec.type}
508+
<span class="m-l-5">{t('common.settings.instructions')}</span>
509+
</div>
510+
{renderSteps()}
511+
</div>
512+
</div>
451513
</a-modal>
452514
);
453515
}

0 commit comments

Comments
 (0)