dashboard-shell-shell 3.0.5-test.3 → 3.0.5-test.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (153) hide show
  1. package/assets/icons/iconfont.css +4 -1
  2. package/assets/images/pl/dark/logo.png +0 -0
  3. package/assets/styles/all.scss +21 -1
  4. package/assets/styles/base/_variables.scss +5 -5
  5. package/assets/styles/fonts/_icons.scss +3 -2
  6. package/assets/styles/global/_button.scss +8 -8
  7. package/assets/styles/global/_select.scss +1 -1
  8. package/assets/styles/global/_tooltip.scss +9 -5
  9. package/assets/styles/themes/_light.scss +3 -1
  10. package/assets/styles/vendor/vue-select.scss +2 -1
  11. package/assets/translations/zh-hans.yaml +150 -13
  12. package/components/ActionDropdown.vue +1 -1
  13. package/components/ButtonDropdown.vue +3 -1
  14. package/components/CodeMirror.vue +6 -4
  15. package/components/ContainerResourceLimit.vue +2 -2
  16. package/components/CopyToClipboard.vue +15 -0
  17. package/components/Drawer/Chrome.vue +2 -2
  18. package/components/Drawer/ResourceDetailDrawer/ConfigTab.vue +30 -27
  19. package/components/Drawer/ResourceDetailDrawer/YamlTab.vue +1 -1
  20. package/components/Drawer/ResourceDetailDrawer/index.vue +5 -4
  21. package/components/ExplorerMembers.vue +28 -4
  22. package/components/GlobalRoleBindings.vue +48 -112
  23. package/components/PodSecurityAdmission.vue +2 -2
  24. package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue +1 -3
  25. package/components/Resource/Detail/Metadata/KeyValue.vue +8 -4
  26. package/components/Resource/Detail/Metadata/index.vue +3 -1
  27. package/components/Resource/Detail/TitleBar/Title.vue +4 -3
  28. package/components/Resource/Detail/TitleBar/Top.vue +2 -0
  29. package/components/Resource/Detail/TitleBar/composables.ts +16 -1
  30. package/components/Resource/Detail/TitleBar/index.vue +123 -25
  31. package/components/ResourceDetail/Masthead/index.vue +1 -1
  32. package/components/ResourceDetail/Masthead/latest.vue +1 -1
  33. package/components/ResourceDetail/Masthead/legacy.vue +239 -167
  34. package/components/ResourceDetail/legacy.vue +44 -28
  35. package/components/ResourceList/Masthead.vue +14 -15
  36. package/components/SideNav.vue +21 -21
  37. package/components/SortableTable/THead.vue +21 -1
  38. package/components/SortableTable/index.vue +21 -6
  39. package/components/Tabbed/index.vue +6 -1
  40. package/components/auth/Principal.vue +42 -13
  41. package/components/auth/RoleDetailEdit.vue +11 -7
  42. package/components/breadcrumb/index.vue +119 -0
  43. package/components/form/ArrayList.vue +164 -147
  44. package/components/form/ArrayListGrouped.vue +3 -1
  45. package/components/form/ChangePassword.vue +1 -1
  46. package/components/form/Command.vue +4 -5
  47. package/components/form/Conditions.vue +15 -1
  48. package/components/form/Footer.vue +1 -0
  49. package/components/form/HealthCheck.vue +0 -2
  50. package/components/form/HookOption.vue +87 -58
  51. package/components/form/InputWithSelect.vue +8 -7
  52. package/components/form/KeyValue.vue +20 -2
  53. package/components/form/LabeledSelect.vue +6 -3
  54. package/components/form/Labels.vue +2 -2
  55. package/components/form/MatchExpressions.vue +3 -4
  56. package/components/form/Members/ClusterMembershipEditor.vue +1 -1
  57. package/components/form/Members/ClusterPermissionsEditor.vue +5 -5
  58. package/components/form/Members/MembershipEditor.vue +2 -2
  59. package/components/form/NameNsDescription.vue +1 -1
  60. package/components/form/Networking.vue +6 -9
  61. package/components/form/NodeAffinity.vue +29 -28
  62. package/components/form/PodAffinity.vue +23 -23
  63. package/components/form/Probe.vue +15 -11
  64. package/components/form/ResourceQuota/Namespace.vue +4 -4
  65. package/components/form/ResourceQuota/NamespaceRow.vue +11 -9
  66. package/components/form/ResourceQuota/Project.vue +4 -4
  67. package/components/form/ResourceQuota/ProjectRow.vue +36 -30
  68. package/components/form/ResourceSelector.vue +1 -1
  69. package/components/form/Security.vue +1 -3
  70. package/components/form/Select.vue +6 -1
  71. package/components/form/ServiceNameSelect.vue +2 -5
  72. package/components/form/ServicePorts.vue +149 -75
  73. package/components/form/Taints.vue +2 -1
  74. package/components/form/Tolerations.vue +12 -9
  75. package/components/form/ValueFromResource.vue +110 -96
  76. package/components/form/WorkloadPorts.vue +143 -123
  77. package/components/formatter/WorkloadHealthScale.vue +4 -3
  78. package/components/nav/Group.vue +6 -0
  79. package/components/nav/Header.vue +7 -4
  80. package/components/nav/NamespaceFilter.vue +15 -21
  81. package/components/nav/TopLevelMenu.vue +99 -125
  82. package/components/nav/Type.vue +15 -3
  83. package/config/menuRouteMap.js +10 -0
  84. package/config/product/explorer.js +5 -1
  85. package/config/router/navigation-guards/index.js +61 -3
  86. package/detail/node.vue +28 -23
  87. package/dialog/AddCustomBadgeDialog.vue +17 -9
  88. package/edit/autoscaling.horizontalpodautoscaler/external-metric.vue +1 -1
  89. package/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue +9 -6
  90. package/edit/autoscaling.horizontalpodautoscaler/index.vue +3 -1
  91. package/edit/autoscaling.horizontalpodautoscaler/metric-identifier.vue +2 -2
  92. package/edit/autoscaling.horizontalpodautoscaler/metric-object-reference.vue +7 -5
  93. package/edit/autoscaling.horizontalpodautoscaler/metric-target.vue +5 -3
  94. package/edit/autoscaling.horizontalpodautoscaler/metrics-row.vue +2 -2
  95. package/edit/autoscaling.horizontalpodautoscaler/object-metric.vue +2 -2
  96. package/edit/autoscaling.horizontalpodautoscaler/pod-metric.vue +1 -1
  97. package/edit/autoscaling.horizontalpodautoscaler/resource-metric.vue +2 -2
  98. package/edit/configmap.vue +4 -0
  99. package/edit/networking.k8s.io.ingress/Certificate.vue +7 -5
  100. package/edit/networking.k8s.io.ingress/DefaultBackend.vue +2 -2
  101. package/edit/networking.k8s.io.ingress/Rule.vue +5 -11
  102. package/edit/networking.k8s.io.ingress/RulePath.vue +105 -96
  103. package/edit/networking.k8s.io.networkpolicy/PolicyRule.vue +3 -3
  104. package/edit/networking.k8s.io.networkpolicy/PolicyRulePort.vue +4 -2
  105. package/edit/networking.k8s.io.networkpolicy/PolicyRuleTarget.vue +12 -11
  106. package/edit/networking.k8s.io.networkpolicy/index.vue +1 -1
  107. package/edit/persistentvolume/index.vue +3 -1
  108. package/edit/persistentvolumeclaim.vue +2 -0
  109. package/edit/secret/index.vue +2 -2
  110. package/edit/service.vue +4 -1
  111. package/edit/storage.k8s.io.storageclass/index.vue +10 -8
  112. package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/aws-ebs.vue +34 -27
  113. package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/gce-pd.vue +15 -13
  114. package/edit/storage.k8s.io.storageclass/provisioners/kubernetes.io/vsphere-volume.vue +41 -39
  115. package/edit/workload/Job.vue +31 -34
  116. package/edit/workload/Upgrading.vue +5 -5
  117. package/edit/workload/index.vue +22 -18
  118. package/edit/workload/storage/Mount.vue +1 -0
  119. package/edit/workload/storage/awsElasticBlockStore.vue +9 -7
  120. package/edit/workload/storage/azureDisk.vue +14 -10
  121. package/edit/workload/storage/azureFile.vue +9 -7
  122. package/edit/workload/storage/csi/index.vue +6 -9
  123. package/edit/workload/storage/emptyDir.vue +7 -5
  124. package/edit/workload/storage/gcePersistentDisk.vue +9 -7
  125. package/edit/workload/storage/hostPath.vue +7 -5
  126. package/edit/workload/storage/nfs.vue +8 -6
  127. package/edit/workload/storage/persistentVolumeClaim/index.vue +12 -10
  128. package/edit/workload/storage/persistentVolumeClaim/persistentvolumeclaim.vue +20 -15
  129. package/edit/workload/storage/secret.vue +9 -6
  130. package/edit/workload/storage/vsphereVolume.vue +11 -7
  131. package/initialize/app-extended.js +7 -1
  132. package/models/provisioning.cattle.io.cluster.js +19 -18
  133. package/package.json +1 -1
  134. package/pages/account/index.vue +95 -115
  135. package/pages/auth/setup.vue +35 -16
  136. package/pages/c/_cluster/auth/roles/index.vue +38 -5
  137. package/pages/c/_cluster/explorer/ConfigBadge.vue +1 -1
  138. package/pages/c/_cluster/explorer/tools/index.vue +6 -6
  139. package/pages/home.vue +3 -4
  140. package/pkg/tsconfig.json +9 -9
  141. package/pkg/vue.config.js +1 -1
  142. package/plugins/dashboard-store/resource-class.js +28 -27
  143. package/rancher-components/BadgeState/BadgeState.vue +33 -52
  144. package/rancher-components/Banner/Banner.vue +4 -1
  145. package/rancher-components/LabeledTooltip/LabeledTooltip.vue +31 -2
  146. package/rancher-components/RcDropdown/RcDropdownMenu.vue +8 -7
  147. package/scripts/publish-shell.sh +1 -1
  148. package/store/i18n.js +4 -0
  149. package/store/type-map.js +1 -1
  150. package/types/shell/index.d.ts +4 -30
  151. package/utils/error.js +3 -1
  152. package/utils/errorTranslate.json +351 -2
  153. package/vue.config.js +1 -1
@@ -26,8 +26,8 @@ export default {
26
26
 
27
27
  <template>
28
28
  <div>
29
- <div class="row mb-10">
30
- <div class="col span-6">
29
+ <div class="row">
30
+ <div class="col mr-10">
31
31
  <LabeledInput
32
32
  v-model:value="value.name"
33
33
  :required="true"
@@ -35,7 +35,7 @@ export default {
35
35
  :label="t('workload.storage.volumeName')"
36
36
  />
37
37
  </div>
38
- <div class="col span-6">
38
+ <div class="col" style="display: flex;align-items: center;">
39
39
  <Checkbox
40
40
  v-model:value="value.gcePersistentDisk.readOnly"
41
41
  :mode="mode"
@@ -43,8 +43,8 @@ export default {
43
43
  />
44
44
  </div>
45
45
  </div>
46
- <div class="row mb-10">
47
- <div class="col span-6">
46
+ <div class="row">
47
+ <div class="col">
48
48
  <LabeledInput
49
49
  v-model:value="value.gcePersistentDisk.pdName"
50
50
  :mode="mode"
@@ -52,7 +52,9 @@ export default {
52
52
  :required="true"
53
53
  />
54
54
  </div>
55
- <div class="col span-6">
55
+ </div>
56
+ <div class="row">
57
+ <div class="col">
56
58
  <LabeledInput
57
59
  v-model:value.number="value.gcePersistentDisk.partition"
58
60
  :mode="mode"
@@ -61,7 +63,7 @@ export default {
61
63
  </div>
62
64
  </div>
63
65
  <div class="row">
64
- <div class="col span-6">
66
+ <div class="col">
65
67
  <LabeledInput
66
68
  v-model:value="value.gcePersistentDisk.fsType"
67
69
  :mode="mode"
@@ -82,8 +82,8 @@ export default {
82
82
  <template>
83
83
  <div>
84
84
  <div>
85
- <div class="row mb-10">
86
- <div class="col span-6">
85
+ <div class="row">
86
+ <div class="col">
87
87
  <LabeledInput
88
88
  v-model:value="value.name"
89
89
  :required="true"
@@ -92,8 +92,8 @@ export default {
92
92
  />
93
93
  </div>
94
94
  </div>
95
- <div class="row mb-10">
96
- <div class="col span-6">
95
+ <div class="row">
96
+ <div class="col">
97
97
  <LabeledInput
98
98
  v-model:value="value.hostPath.path"
99
99
  :required="true"
@@ -101,7 +101,9 @@ export default {
101
101
  :label="t('workload.storage.nodePath')"
102
102
  />
103
103
  </div>
104
- <div class="col span-6">
104
+ </div>
105
+ <div class="row">
106
+ <div class="col">
105
107
  <LabeledSelect
106
108
  v-model:value="value.hostPath.type"
107
109
  :mode="mode"
@@ -38,8 +38,8 @@ export default {
38
38
  <template>
39
39
  <div>
40
40
  <div>
41
- <div class="row mb-10">
42
- <div class="col span-6">
41
+ <div class="row">
42
+ <div class="col mr-10">
43
43
  <LabeledInput
44
44
  v-model:value="value.name"
45
45
  :required="true"
@@ -47,7 +47,7 @@ export default {
47
47
  :label="t('workload.storage.volumeName')"
48
48
  />
49
49
  </div>
50
- <div class="col span-6">
50
+ <div class="col" style="display: flex;align-items: center;">
51
51
  <Checkbox
52
52
  v-model:value="value.nfs.readOnly"
53
53
  :mode="mode"
@@ -55,8 +55,8 @@ export default {
55
55
  />
56
56
  </div>
57
57
  </div>
58
- <div class="row mb-10">
59
- <div class="col span-6">
58
+ <div class="row">
59
+ <div class="col">
60
60
  <LabeledInput
61
61
  v-model:value="value.nfs.path"
62
62
  :required="true"
@@ -64,7 +64,9 @@ export default {
64
64
  :label="t('workload.storage.path')"
65
65
  />
66
66
  </div>
67
- <div class="col span-6">
67
+ </div>
68
+ <div class="row">
69
+ <div class="col">
68
70
  <LabeledInput
69
71
  v-model:value="value.nfs.server"
70
72
  :required="true"
@@ -121,8 +121,8 @@ export default {
121
121
  @removePvcForm="removePvcForm"
122
122
  />
123
123
  </div>
124
- <div class="row mb-10">
125
- <div class="col span-6">
124
+ <div class="row">
125
+ <div class="col mr-10">
126
126
  <LabeledInput
127
127
  v-model:value="value.name"
128
128
  :required="true"
@@ -130,7 +130,16 @@ export default {
130
130
  :label="t('workload.storage.volumeName')"
131
131
  />
132
132
  </div>
133
- <div class="col span-6">
133
+ <div class="col" style="display: flex;align-items: center;">
134
+ <Checkbox
135
+ v-model:value="value.persistentVolumeClaim.readOnly"
136
+ :mode="mode"
137
+ :label="t('workload.storage.readOnly')"
138
+ />
139
+ </div>
140
+ </div>
141
+ <div class="row">
142
+ <div class="col">
134
143
  <LabeledSelect
135
144
  v-if="!createNew"
136
145
  v-model:value="value.persistentVolumeClaim.claimName"
@@ -142,13 +151,6 @@ export default {
142
151
  />
143
152
  </div>
144
153
  </div>
145
- <div class="row">
146
- <Checkbox
147
- v-model:value="value.persistentVolumeClaim.readOnly"
148
- :mode="mode"
149
- :label="t('workload.storage.readOnly')"
150
- />
151
- </div>
152
154
  </div>
153
155
  </div>
154
156
  </template>
@@ -156,8 +156,8 @@ export default {
156
156
 
157
157
  <template>
158
158
  <div>
159
- <div class="row mb-10">
160
- <div class="col span-6">
159
+ <div class="row">
160
+ <div class="col">
161
161
  <LabeledInput
162
162
  v-model:value="value.metadata.name"
163
163
  :mode="mode"
@@ -167,8 +167,9 @@ export default {
167
167
  />
168
168
  </div>
169
169
  </div>
170
- <div class="row mb-10">
171
- <div class="col span-6">
170
+ <div class="row">
171
+ <div style="width: 160px;"></div>
172
+ <div class="col">
172
173
  <RadioGroup
173
174
  v-model:value="isCreatePV"
174
175
  name="isCreatePV"
@@ -177,7 +178,9 @@ export default {
177
178
  :mode="mode"
178
179
  />
179
180
  </div>
180
- <div class="col span-6">
181
+ </div>
182
+ <div class="row">
183
+ <div class="col">
181
184
  <LabeledSelect
182
185
  v-if="isCreatePV"
183
186
  v-model:value="spec.storageClassName"
@@ -200,16 +203,16 @@ export default {
200
203
  </div>
201
204
  </div>
202
205
 
203
- <div class="row mb-10">
204
- <div class="col span-6">
205
- <div class="access-modes">
206
- <t
207
- class="text-label"
208
- k="persistentVolumeClaim.accessModes"
209
- />
210
- <span class="text-error">*</span>
211
- </div>
206
+ <div class="row">
207
+ <div class="col">
212
208
  <div class="access-modes">
209
+ <div style="width: 160px;">
210
+ <t
211
+ class="text-label"
212
+ k="persistentVolumeClaim.accessModes"
213
+ />
214
+ <span class="text-error">*</span>
215
+ </div>
213
216
  <Checkbox
214
217
  :mode="mode"
215
218
  :value="value.spec.accessModes.includes('ReadWriteOnce')"
@@ -230,9 +233,11 @@ export default {
230
233
  />
231
234
  </div>
232
235
  </div>
236
+ </div>
237
+ <div class="row">
233
238
  <div
234
239
  v-if="isCreatePV"
235
- class="col span-6"
240
+ class="col"
236
241
  >
237
242
  <UnitInput
238
243
  v-model:value="spec.resources.requests.storage"
@@ -130,8 +130,8 @@ export default {
130
130
  <template>
131
131
  <div>
132
132
  <div>
133
- <div class="row mb-10">
134
- <div class="col span-6">
133
+ <div class="row">
134
+ <div class="col">
135
135
  <LabeledInput
136
136
  v-model:value="value.name"
137
137
  :required="true"
@@ -139,8 +139,9 @@ export default {
139
139
  :label="t('workload.storage.volumeName')"
140
140
  />
141
141
  </div>
142
-
143
- <div class="col span-6">
142
+ </div>
143
+ <div class="row">
144
+ <div class="col">
144
145
  <LabeledInput
145
146
  v-model:value="defaultMode"
146
147
  :mode="mode"
@@ -149,7 +150,7 @@ export default {
149
150
  </div>
150
151
  </div>
151
152
  <div class="row">
152
- <div class="col span-6">
153
+ <div class="col">
153
154
  <LabeledSelect
154
155
  v-if="type==='secret'"
155
156
  v-model:value="value[type].secretName"
@@ -169,7 +170,9 @@ export default {
169
170
  :loading="loading"
170
171
  />
171
172
  </div>
172
- <div class="col span-6">
173
+ </div>
174
+ <div class="row">
175
+ <div class="col">
173
176
  <RadioGroup
174
177
  v-model:value="optional"
175
178
  :mode="mode"
@@ -25,8 +25,8 @@ export default {
25
25
 
26
26
  <template>
27
27
  <div>
28
- <div class="row mb-10">
29
- <div class="col span-6">
28
+ <div class="row">
29
+ <div class="col">
30
30
  <LabeledInput
31
31
  v-model:value="value.name"
32
32
  :required="true"
@@ -35,8 +35,8 @@ export default {
35
35
  />
36
36
  </div>
37
37
  </div>
38
- <div class="row mb-10">
39
- <div class="col span-6">
38
+ <div class="row">
39
+ <div class="col">
40
40
  <LabeledInput
41
41
  v-model:value="value.vsphereVolume.storagePolicyID"
42
42
  :mode="mode"
@@ -44,7 +44,9 @@ export default {
44
44
  :required="true"
45
45
  />
46
46
  </div>
47
- <div class="col span-6">
47
+ </div>
48
+ <div class="row">
49
+ <div class="col">
48
50
  <LabeledInput
49
51
  v-model:value.number="value.vsphereVolume.storagePolicyName"
50
52
  :mode="mode"
@@ -53,7 +55,7 @@ export default {
53
55
  </div>
54
56
  </div>
55
57
  <div class="row">
56
- <div class="col span-6">
58
+ <div class="col">
57
59
  <LabeledInput
58
60
  v-model:value="value.vsphereVolume.volumePath"
59
61
  :mode="mode"
@@ -61,7 +63,9 @@ export default {
61
63
  :required="true"
62
64
  />
63
65
  </div>
64
- <div class="col span-6">
66
+ </div>
67
+ <div class="row">
68
+ <div class="col">
65
69
  <LabeledInput
66
70
  v-model:value="value.vsphereVolume.fsType"
67
71
  :mode="mode"
@@ -55,7 +55,13 @@ async function extendApp(vueApp) {
55
55
  const next = (location) => appPartials.router.push(location);
56
56
  // Resolve route
57
57
 
58
- const path = getLocation(router.options.base, router.options.mode);
58
+ let path = getLocation(router.options.base, router.options.mode);
59
+
60
+ // 🔹 增加 rewrite,不改变原逻辑
61
+ if (path.includes('/cloud/')) {
62
+ path = path.replace(/cloud/g, 'harvester');
63
+ }
64
+
59
65
  const route = router.resolve(path);
60
66
 
61
67
  // Set context to app.context
@@ -115,25 +115,26 @@ export default class ProvCluster extends SteveModel {
115
115
  const actions = [
116
116
  // Note: Actions are not supported in the Steve API, so we check
117
117
  // available actions for RKE1 clusters, but not RKE2 clusters.
118
+ // {
119
+ // action: 'openShell',
120
+ // label: this.$rootGetters['i18n/t']('nav.shell'),
121
+ // icon: 'icon icon-terminal',
122
+ // enabled: !!this.mgmt?.links.shell && ready,
123
+ // }, {
124
+ // action: 'downloadKubeConfig',
125
+ // bulkAction: 'downloadKubeConfigBulk',
126
+ // label: this.$rootGetters['i18n/t']('nav.kubeconfig.download'),
127
+ // icon: 'icon icon-download',
128
+ // bulkable: true,
129
+ // enabled: this.mgmt?.hasAction('generateKubeconfig'),
130
+ // }, {
131
+ // action: 'copyKubeConfig',
132
+ // label: this.t('cluster.copyConfig'),
133
+ // bulkable: false,
134
+ // enabled: this.mgmt?.hasAction('generateKubeconfig'),
135
+ // icon: 'icon icon-copy',
136
+ // },
118
137
  {
119
- action: 'openShell',
120
- label: this.$rootGetters['i18n/t']('nav.shell'),
121
- icon: 'icon icon-terminal',
122
- enabled: !!this.mgmt?.links.shell && ready,
123
- }, {
124
- action: 'downloadKubeConfig',
125
- bulkAction: 'downloadKubeConfigBulk',
126
- label: this.$rootGetters['i18n/t']('nav.kubeconfig.download'),
127
- icon: 'icon icon-download',
128
- bulkable: true,
129
- enabled: this.mgmt?.hasAction('generateKubeconfig'),
130
- }, {
131
- action: 'copyKubeConfig',
132
- label: this.t('cluster.copyConfig'),
133
- bulkable: false,
134
- enabled: this.mgmt?.hasAction('generateKubeconfig'),
135
- icon: 'icon icon-copy',
136
- }, {
137
138
  action: 'snapshotAction',
138
139
  label: this.$rootGetters['i18n/t']('nav.takeSnapshot'),
139
140
  icon: 'icon icon-snapshot',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dashboard-shell-shell",
3
- "version": "3.0.5-test.3",
3
+ "version": "3.0.5-test.30",
4
4
  "description": "Rancher Dashboard Shell",
5
5
  "repository": "https://github.com/rancherlabs/dashboard",
6
6
  "license": "Apache-2.0",
@@ -3,8 +3,7 @@ import BackLink from '@shell/components/BackLink';
3
3
  import { MANAGEMENT, NORMAN } from '@shell/config/types';
4
4
  import { SETTING } from '@shell/config/settings';
5
5
  import Loading from '@shell/components/Loading';
6
- // import Principal from '@shell/components/auth/Principal';
7
- import Principal from './pri.vue';
6
+ import Principal from '@shell/components/auth/Principal';
8
7
  import BackRoute from '@shell/mixins/back-link';
9
8
  import { mapGetters } from 'vuex';
10
9
 
@@ -17,7 +16,7 @@ const API_ENDPOINT = '/v3';
17
16
 
18
17
  export default {
19
18
  components: {
20
- CopyToClipboardText, BackLink, Banner, PromptChangePassword, Loading, ResourceTable, Principal, TabTitle
19
+ CopyToClipboardText, BackLink, Banner, Loading, ResourceTable, Principal, TabTitle
21
20
  },
22
21
  mixins: [BackRoute],
23
22
  async fetch() {
@@ -152,88 +151,39 @@ export default {
152
151
  <template>
153
152
  <Loading v-if="$fetchState.pending" />
154
153
  <div v-else>
155
- <!-- <BackLink :link="backLink" />
156
- <h1>
157
- <TabTitle breadcrumb="vendor-only">
158
- {{ t('accountAndKeys.title') }}
159
- </TabTitle>
160
- </h1> -->
161
- <div class="api-key-title mb-20">
162
- {{ t('accountAndKeys.title') }}
154
+ <div style="display: flex;align-items: center;margin-bottom: 20px;">
155
+ <!-- <BackLink class="backLinkCls" :link="backLink" /> -->
156
+ <div style="font-size: 26px;">
157
+ <TabTitle breadcrumb="vendor-only">
158
+ {{ t('accountAndKeys.title') }}
159
+ </TabTitle>
160
+ </div>
163
161
  </div>
164
162
 
165
- <!-- <h2 v-t="'accountAndKeys.account.title'" /> -->
166
- <div class="account">
167
- <div class="account-title">
168
- {{ t('accountAndKeys.account.title') }}
169
- </div>
170
- <Principal
171
- :value="principal.id"
172
- :use-muted="false"
173
- :show-labels="true"
174
- :isShowPass="true"
175
- >
176
- <template #edit>
177
- <span
163
+ <div class="account_card mb-20">
164
+ <h5 v-t="'accountAndKeys.account.title'" />
165
+ <div class="account">
166
+ <Principal
167
+ :userLogoSize="79"
168
+ :value="principal.id"
169
+ :use-muted="false"
170
+ :show-labels="true"
171
+ />
172
+ <div>
173
+ <button
178
174
  v-if="canChangePassword"
179
- class="edit-pass-txt"
180
- @click="$refs.promptChangePassword.show(true)"
181
- >修改
182
- </span>
183
- </template>
184
- </Principal>
185
- <!-- <div>
186
- <button
187
- v-if="canChangePassword"
188
- role="button"
189
- :aria-label="t('accountAndKeys.account.change')"
190
- type="button"
191
- class="btn role-primary"
192
- data-testid="account_change_password"
193
- @click="$refs.promptChangePassword.show(true)"
194
- >
195
- {{ t("accountAndKeys.account.change") }}
196
- </button>
197
- </div> -->
198
- </div>
199
- <PromptChangePassword ref="promptChangePassword" />
200
-
201
- <!-- <hr role="none"> -->
202
- <div
203
- style=" border: 1px solid #d7d7d7;padding: 20px 20px 0px 20px;"
204
- class="mt-20">
205
- <div class="keys-header">
206
- <div>
207
- <!-- <h2 v-t="'accountAndKeys.apiKeys.title'" /> -->
208
- <div
209
- v-t="'accountAndKeys.apiKeys.title'"
210
- class="account-title mb-20"
211
- />
212
- <div class="api-url">
213
- <span>{{ t("accountAndKeys.apiKeys.apiEndpoint") }}</span>
214
- <CopyToClipboardText
215
- :aria-label="t('accountAndKeys.apiKeys.copyApiEnpoint')"
216
- :text="apiUrl"
217
- />
175
+ role="button"
176
+ :aria-label="t('accountAndKeys.account.change')"
177
+ type="button"
178
+ class="btn role-primary"
179
+ data-testid="account_change_password"
180
+ @click="showChangePasswordDialog"
181
+ >
182
+ {{ t("accountAndKeys.account.change") }}
183
+ </button>
218
184
  </div>
219
185
  </div>
220
- </div>
221
- <div
222
- v-if="apiKeySchema"
223
- class="keys mb-20"
224
- >
225
- <ResourceTable
226
- :schema="apiKeySchema"
227
- :rows="apiKeys"
228
- :headers="apiKeyheaders"
229
- key-field="id"
230
- data-testid="api_keys_list"
231
- :search="true"
232
- :row-actions="true"
233
- :table-actions="true"
234
- >
235
- <template #header-right>
236
- <button
186
+ <!-- <button
237
187
  v-if="apiKeySchema"
238
188
  role="button"
239
189
  :aria-label="t('accountAndKeys.apiKeys.add.label')"
@@ -242,32 +192,82 @@ export default {
242
192
  @click="addKey"
243
193
  >
244
194
  {{ t('accountAndKeys.apiKeys.add.label') }}
245
- </button>
246
- </template>
247
- </ResourceTable>
195
+ </button> -->
248
196
  </div>
249
- <div v-else>
250
- <Banner
251
- color="warning"
252
- :label="t('accountAndKeys.apiKeys.notAllowed')"
253
- />
197
+
198
+ <div class="account_card mb-20">
199
+ <div class="keys-header">
200
+ <div>
201
+ <h5 v-t="'accountAndKeys.apiKeys.title'" />
202
+ <div class="api-url">
203
+ <span>{{ t("accountAndKeys.apiKeys.apiEndpoint") }}</span>
204
+ <CopyToClipboardText
205
+ :aria-label="t('accountAndKeys.apiKeys.copyApiEnpoint')"
206
+ :text="apiUrl"
207
+ />
208
+ </div>
209
+ </div>
210
+ </div>
211
+ <div
212
+ v-if="apiKeySchema"
213
+ class="keys"
214
+ >
215
+ <ResourceTable
216
+ :schema="apiKeySchema"
217
+ :rows="apiKeys"
218
+ :headers="apiKeyheaders"
219
+ key-field="id"
220
+ data-testid="api_keys_list"
221
+ :search="true"
222
+ :row-actions="true"
223
+ :table-actions="true"
224
+ >
225
+ <template #header-right>
226
+ <button
227
+ style="margin-right: 10px;"
228
+ v-if="apiKeySchema"
229
+ role="button"
230
+ :aria-label="t('accountAndKeys.apiKeys.add.label')"
231
+ class="btn role-primary add"
232
+ data-testid="account_create_api_keys"
233
+ @click="addKey"
234
+ >
235
+ {{ t('accountAndKeys.apiKeys.add.label') }}
236
+ </button>
237
+ </template>
238
+ </ResourceTable>
239
+ </div>
240
+ <div v-else>
241
+ <Banner
242
+ color="warning"
243
+ :label="t('accountAndKeys.apiKeys.notAllowed')"
244
+ />
245
+ </div>
254
246
  </div>
255
247
  </div>
256
- </div>
257
248
  </template>
258
249
 
259
250
  <style lang='scss' scoped>
251
+ .account_card {
252
+ border: 1px solid #d7d7d7;
253
+ padding: 20px;
254
+ box-sizing: border-box;
255
+ }
256
+ :deep() .back-link {
257
+ font-size: 26px;
258
+ margin: 0 20px 0 0 !important;
259
+ }
260
260
  hr {
261
261
  margin: 20px 0;
262
262
  }
263
263
 
264
264
  .account {
265
- /* display: flex;
266
- justify-content: space-between */
267
- border: 1px solid #D7D7D7;
268
- padding: 20px;
269
- box-sizing: border-box;
265
+ display: flex;
266
+ justify-content: space-between
267
+ }
270
268
 
269
+ .principal .avatar {
270
+ width: 287px !important;
271
271
  }
272
272
 
273
273
  .keys-header {
@@ -280,37 +280,17 @@ export default {
280
280
  .keys {
281
281
  display: flex;
282
282
  flex-direction: column;
283
- margin-top: 20px;
284
283
  .add {
285
284
  align-self: flex-end;
286
- margin-left: 10px
287
285
  }
288
286
  }
289
287
 
290
288
  .api-url {
291
289
  display: flex;
290
+ margin: 20px 0;
292
291
 
293
292
  > span {
294
293
  margin-right: 6px;
295
294
  }
296
295
  }
297
- .api-key-title{
298
- font-size: 26px;
299
- /* line-height: 20px; */
300
- font-weight: 400;
301
- }
302
-
303
- .edit-pass-txt{
304
- cursor: pointer;
305
- color: var(--primary);
306
- }
307
-
308
- .table-account{
309
- border: 1px solid #d7d7d7;
310
- }
311
- .account-title{
312
- font-size: 14px;
313
- line-height: 19px;
314
- margin-bottom: 16px;
315
- }
316
296
  </style>