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

chore: user providers Instructions #771

Merged
merged 1 commit into from
Apr 21, 2024
Merged

chore: user providers Instructions #771

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ declare module 'vue' {
ABreadcrumb: typeof import('@arco-design/web-vue')['Breadcrumb'];
ABreadcrumbItem: typeof import('@arco-design/web-vue')['BreadcrumbItem'];
AButton: typeof import('@arco-design/web-vue')['Button'];
AButtton: typeof import('@arco-design/web-vue')['Buttton'];
ACard: typeof import('@arco-design/web-vue')['Card'];
ACascader: typeof import('@arco-design/web-vue')['Cascader'];
ACheckbox: typeof import('@arco-design/web-vue')['Checkbox'];
Expand All @@ -35,20 +34,16 @@ declare module 'vue' {
ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter'];
ALayoutSider: typeof import('@arco-design/web-vue')['LayoutSider'];
ALink: typeof import('@arco-design/web-vue')['Link'];
AList: typeof import('@arco-design/web-vue')['List'];
AListItemMeta: typeof import('@arco-design/web-vue')['ListItemMeta'];
AMenu: typeof import('@arco-design/web-vue')['Menu'];
AMenuItem: typeof import('@arco-design/web-vue')['MenuItem'];
AModal: typeof import('@arco-design/web-vue')['Modal'];
AOption: typeof import('@arco-design/web-vue')['Option'];
APagination: typeof import('@arco-design/web-vue')['Pagination'];
AProgress: typeof import('@arco-design/web-vue')['Progress'];
ARangePicker: typeof import('@arco-design/web-vue')['RangePicker'];
AResult: typeof import('@arco-design/web-vue')['Result'];
ASelect: typeof import('@arco-design/web-vue')['Select'];
ASpace: typeof import('@arco-design/web-vue')['Space'];
ASpin: typeof import('@arco-design/web-vue')['Spin'];
AStatistic: typeof import('@arco-design/web-vue')['Statistic'];
ASubMenu: typeof import('@arco-design/web-vue')['SubMenu'];
ASwitch: typeof import('@arco-design/web-vue')['Switch'];
ATable: typeof import('@arco-design/web-vue')['Table'];
Expand Down
3 changes: 2 additions & 1 deletion src/locale/en-US/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,5 +173,6 @@ export default {
'common.nodata.created': 'No {type} has been created yet',
'common.nodata.added': 'No {type} has been added yet',
'common.status.edited': 'Edited',
'common.table.user': '用户'
'common.table.user': '用户',
'common.settings.instructions': 'Instructions'
};
3 changes: 2 additions & 1 deletion src/locale/zh-CN/common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,5 +169,6 @@ export default {
'common.nodata.created': '尚未创建{type}',
'common.nodata.added': '尚未添加{type}',
'common.status.edited': '已编辑',
'common.table.user': '用户'
'common.table.user': '用户',
'common.settings.instructions': '操作指引'
};
280 changes: 171 additions & 109 deletions src/views/subject-providers/components/create-subject-provider.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
ProviderSpecConfig,
FieldType
} from '../config';
import stepsMap from '../config/instructions';
import { FormData } from '../config/interface';

export default defineComponent({
Expand All @@ -53,6 +54,7 @@
}
},
setup(props, { emit }) {
const siteOrigin = window.location.origin;
const { t } = i18n.global;
const submitLoading = ref(false);
const formref = ref();
Expand Down Expand Up @@ -81,6 +83,13 @@
}
});

const operationSteps = computed(() => {
const steps = stepsMap[formData.value.spec.type];
return steps?.({
origin: siteOrigin
});
});

const providerList = computed(() => {
return _.map(_.keys(ProviderTypes), (key) => {
return {
Expand Down Expand Up @@ -278,25 +287,33 @@
<>
{advancedOptions.length > 0 && (
<div title="Advanced Options">
<a-button
class="size-14"
type="text"
<div
class="flex"
style={{
padding: '0 2px',
marginBottom: '12px',
fontSize: 'var(--font-size-large)'
}}
onClick={() => {
showAdavanced.value = !showAdavanced.value;
}}
v-slots={{
icon: () => {
return <icon-settings />;
}
borderBottom: '1px solid var(--color-border-2)',
marginBottom: '12px'
}}
>
Advanced Options
</a-button>
<a-link
class="size-14"
type="text"
style={{
padding: '4px 2px',

fontSize: 'var(--font-size-large)'
}}
onClick={() => {
showAdavanced.value = !showAdavanced.value;
}}
v-slots={{
icon: () => {
return <icon-settings />;
}
}}
>
Advanced Options
</a-link>
</div>
{showAdavanced.value &&
renderOptions(advancedOptions?.[0]?.options)}
</div>
Expand All @@ -313,12 +330,36 @@

return <>{renderOptions(basicOptions)}</>;
};

const renderSteps = () => {
return (
<>
{_.map(operationSteps.value, (item, index) => {
return (
<div
class="step-item"
style={{
padding: '4px 0',
lineHeight: '22px',
wordBreak: 'break-all',
fontSize: 'var(--font-size-small)',
color: 'var(--color-text-3)'
}}
key={index}
>
{index + 1}. <span v-html={item}></span>
</div>
);
})}
</>
);
};
return () => (
<a-modal
top="5%"
closable={false}
align-center={false}
width={600}
width={900}
ok-text={t('common.button.save')}
visible={props.show}
mask-closable={false}
Expand Down Expand Up @@ -352,102 +393,123 @@
}
}}
>
<a-form
ref={(el) => {
formref.value = el;
}}
model={formData.value}
auto-label-width
>
<a-form-item
hide-label
field="metadata.name"
validate-trigger={['change', 'input']}
rules={[
{
required: true,
match: validateUserNameRegx,
message: t('account.create.rules.username')
}
]}
>
<seal-input
v-model={[formData.value.metadata.name, 'modelValue', ['trim']]}
label={t('profile.account.name')}
required={true}
max-length={validateInputLength.NAME}
show-word-limit
style={{ width: '100%' }}
disabled={props.action === 'edit'}
></seal-input>
</a-form-item>
<a-form-item
hide-label
field="spec.displayName"
validate-trigger={['change', 'input']}
<div class="flex">
<a-form
ref={(el) => {
formref.value = el;
}}
model={formData.value}
auto-label-width
style={{ flex: 1 }}
>
<seal-input
v-model={[
formData.value.spec.displayName,
'modelValue',
['trim']
<a-form-item
hide-label
field="metadata.name"
validate-trigger={['change', 'input']}
rules={[
{
required: true,
match: validateUserNameRegx,
message: t('account.create.rules.username')
}
]}
label={t('settings.user.nickName')}
max-length={validateInputLength.NAME}
show-word-limit
style={{ width: '100%' }}
></seal-input>
</a-form-item>
<a-form-item
hide-label
validate-trigger={['change', 'input']}
rules={[
{
required: false,
message: t('propfile.account.settings.rules.role')
}
]}
>
<seal-select
v-model={formData.value.spec.type}
label={t('common.table.type')}
onChange={(val) => handleTypeChange(val)}
style={{ width: '100%' }}
v-slots={{
prefix: () => {
return (
<ProviderIcon
provider={_.toLower(formData.value.spec?.type || '')}
></ProviderIcon>
);
>
<seal-input
v-model={[
formData.value.metadata.name,
'modelValue',
['trim']
]}
label={t('profile.account.name')}
required={true}
popupInfo={`名称须与回调地址${siteOrigin}/identify/callback/{provider}中的provider一致`}
max-length={validateInputLength.NAME}
show-word-limit
style={{ width: '100%' }}
disabled={props.action === 'edit'}
></seal-input>
</a-form-item>
<a-form-item
hide-label
field="spec.displayName"
validate-trigger={['change', 'input']}
>
<seal-input
v-model={[
formData.value.spec.displayName,
'modelValue',
['trim']
]}
label={t('settings.user.nickName')}
max-length={validateInputLength.NAME}
show-word-limit
style={{ width: '100%' }}
></seal-input>
</a-form-item>
<a-form-item
hide-label
validate-trigger={['change', 'input']}
rules={[
{
required: false,
message: t('propfile.account.settings.rules.role')
}
}}
]}
>
{_.map(providerList.value, (item, index) => {
return (
<a-option key={index} value={item.value}>
<ProviderIcon
provider={_.toLower(item.value)}
></ProviderIcon>
<span class="m-l-10">{t(item.label)}</span>
</a-option>
);
})}
</seal-select>
</a-form-item>
{renderProviderConfig()}
{renderAdvancedOptions()}
<a-form-item label={t('common.table.description')} hide-label>
<seal-textarea
v-model={formData.value.spec.description}
label={t('common.table.description')}
max-length={validateInputLength.DESC}
show-word-limit
style={{ width: '100%' }}
auto-size={{ minRows: 4, maxRows: 6 }}
></seal-textarea>
</a-form-item>
</a-form>
<seal-select
v-model={formData.value.spec.type}
label={t('common.table.type')}
onChange={(val) => handleTypeChange(val)}
style={{ width: '100%' }}
v-slots={{
prefix: () => {
return (
<ProviderIcon
provider={_.toLower(formData.value.spec?.type || '')}
></ProviderIcon>
);
}
}}
>
{_.map(providerList.value, (item, index) => {
return (
<a-option key={index} value={item.value}>
<ProviderIcon
provider={_.toLower(item.value)}
></ProviderIcon>
<span class="m-l-10">{t(item.label)}</span>
</a-option>
);
})}
</seal-select>
</a-form-item>
{renderProviderConfig()}
<a-form-item label={t('common.table.description')} hide-label>
<seal-textarea
v-model={formData.value.spec.description}
label={t('common.table.description')}
max-length={validateInputLength.DESC}
show-word-limit
style={{ width: '100%' }}
auto-size={{ minRows: 4, maxRows: 6 }}
></seal-textarea>
</a-form-item>
{renderAdvancedOptions()}
</a-form>
<div
class="steps"
style={{
width: '360px',
padding: '0 20px'
}}
>
<div class="m-b-20">
{formData.value.spec.type}
<span class="m-l-5">{t('common.settings.instructions')}</span>
</div>
{renderSteps()}
</div>
</div>
</a-modal>
);
}
Expand Down
Loading
Loading