refactor(schema): some text

src/hooks/Rule/schema/useExternalSchemaType.ts

@@ -0,0 +1,21 @@
+import { getLabelFromValueInOptionList } from '@/common/tools'
+import { ExternalSchemaType } from '@/types/typeAlias'
+
+type ExternalSchemaTypeValue = typeof ExternalSchemaType[keyof typeof ExternalSchemaType]
+
+export default (): {
+  schemaTypeOpts: {
+    label: string
+    value: ExternalSchemaTypeValue
+  }[]
+  getLabelByValue: (value: ExternalSchemaTypeValue) => string
+} => {
+  const schemaTypeOpts: Array<{ label: string; value: ExternalSchemaTypeValue }> = [
+    { label: 'Confluent', value: ExternalSchemaType.Confluent },
+  ]
+
+  const getLabelByValue = (value: ExternalSchemaTypeValue) =>
+    getLabelFromValueInOptionList(value, schemaTypeOpts)
+
+  return { schemaTypeOpts, getLabelByValue }
+}

src/i18n/components.js

@@ -95,9 +95,13 @@ export default {
     zh: 'Schema Registry',
     en: 'Schema Registry',
   },
+  'internal-schema': {
+    zh: '内部 Schema',
+    en: 'Internal Schema',
+  },
   'external-schema': {
-    zh: '外部 Schema Registry',
-    en: 'External Schema Registry',
+    zh: '外部 Schema',
+    en: 'External Schema',
   },
   'message-transform': {
     zh: '消息转换',
@@ -424,9 +428,9 @@ export default {
     zh: '慢订阅设置',
     en: 'Slow Subscriptions Settings',
   },
-  'schema-create': {
-    zh: '创建 Schema',
-    en: 'Create Schema',
+  'internal-schema-create': {
+    zh: '创建内部 Schema',
+    en: 'Create Internal Schema',
   },
   'external-schema-create': {
     zh: '创建外部 Schema',

src/router/index.ts

@@ -880,18 +880,18 @@ export const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: 'internal',
-        name: 'schema',
+        name: 'internal-schema',
         component: () => import('@/views/RuleEngine/Schema/Schema.vue'),
       },
       {
         path: 'internal/create',
-        name: 'schema-create',
+        name: 'internal-schema-create',
         component: () => import('@/views/RuleEngine/Schema/SchemaCreate.vue'),
         meta: { hideInMenu: true },
       },
       {
         path: 'internal/:schemaName',
-        name: 'schema-detail',
+        name: 'internal-schema-detail',
         component: () => import('@/views/RuleEngine/Schema/SchemaDetail.vue'),
         meta: { hideInMenu: true },
       },

src/views/RuleEngine/Schema/ExternalSchema.vue

@@ -7,13 +7,13 @@
       </el-button>
     </div>
     <el-table :data="schemaList" v-loading="isLoading">
-      <el-table-column prop="name" :label="t('Base.name')" />
-      <el-table-column prop="type" :label="tl('type')">
+      <el-table-column prop="name" :label="t('Base.name')" :min-width="200" />
+      <el-table-column prop="type" :label="tl('type')" :min-width="200">
         <template #default="{ row }">
           {{ getLabelByValue(row.type) }}
         </template>
       </el-table-column>
-      <el-table-column :label="$t('Base.operation')">
+      <el-table-column :label="$t('Base.operation')" :min-width="150">
         <template #default="{ row }">
           <el-button size="small" @click="goSchemaDetail(row.name)">
             {{ $t('Base.setting') }}
@@ -31,7 +31,7 @@
 
 <script lang="ts" setup>
 import { deleteExternalSchema, getExternalSchemas } from '@/api/ruleengine'
-import useSchemaType from '@/hooks/Rule/schema/useSchemaType'
+import useExternalSchemaType from '@/hooks/Rule/schema/useExternalSchemaType'
 import useI18nTl from '@/hooks/useI18nTl'
 import useOperationConfirm from '@/hooks/useOperationConfirm'
 import type { ExternalSchema } from '@/types/typeAlias'
@@ -46,7 +46,7 @@ const { tl, t } = useI18nTl('RuleEngine')
 const schemaList: Ref<Array<ExternalSchema>> = ref([])
 const isLoading = ref(false)
 
-const { getLabelByValue } = useSchemaType()
+const { getLabelByValue } = useExternalSchemaType()
 
 const getSchemas = async () => {
   try {

src/views/RuleEngine/Schema/ExternalSchemaCreate.vue

@@ -2,7 +2,7 @@
   <div class="external-schema-create" :class="[isInSinglePage ? 'app-wrapper' : '']">
     <detail-header v-if="isInSinglePage" :item="{ name: title, routeName: 'external-schema' }" />
     <el-card class="app-card schema-create-card">
-      <ExternalSchemaConfluentForm class="schema-create-form" ref="FormCom" v-model="formData" />
+      <ExternalSchemaForm class="schema-create-form" ref="FormCom" v-model="formData" />
       <div class="schema-create-ft">
         <el-button @click="cancel">
           {{ $t('Base.cancel') }}
@@ -29,10 +29,10 @@ import useI18nTl from '@/hooks/useI18nTl'
 import type { ExternalSchema } from '@/types/typeAlias'
 import { ExternalSchemaType } from '@/types/typeAlias'
 import { ElMessage } from 'element-plus'
-import { cloneDeep } from 'lodash'
+import { cloneDeep, isObject } from 'lodash'
 import { defineEmits, defineProps, Ref, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import ExternalSchemaConfluentForm from './components/ExternalSchemaConfluentForm.vue'
+import ExternalSchemaForm from './components/ExternalSchemaForm.vue'
 
 /**
  * props and emit is for use this component in drawer
@@ -73,6 +73,9 @@ const checkClipStatus = async () => {
   if (query.action === 'copy' && query.target) {
     const schema = await getExternalSchemaDetail(query.target.toString())
     formData.value = { ...schema, name: countDuplicationName(query.target.toString()) }
+    if (isObject(formData.value.auth) && formData.value.auth.password) {
+      formData.value.auth.password = ''
+    }
   }
 }
 

src/views/RuleEngine/Schema/ExternalSchemaDetail.vue

@@ -20,7 +20,7 @@
       <div class="app-wrapper">
         <el-tab-pane :label="t('Base.setting')">
           <el-card class="detail-card overview-visible" v-loading="isLoading">
-            <ExternalSchemaConfluentForm
+            <ExternalSchemaForm
               class="schema-create-form"
               ref="FormCom"
               v-model="schemaData"
@@ -52,7 +52,7 @@ import { ElMessage } from 'element-plus'
 import { cloneDeep, omit } from 'lodash'
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import ExternalSchemaConfluentForm from './components/ExternalSchemaConfluentForm.vue'
+import ExternalSchemaForm from './components/ExternalSchemaForm.vue'
 
 const route = useRoute()
 const router = useRouter()

src/views/RuleEngine/Schema/Schema.vue

@@ -61,14 +61,14 @@ const getSchemas = async () => {
 }
 
 const goSchemaDetail = (name: string) =>
-  router.push({ name: 'schema-detail', params: { schemaName: name } })
+  router.push({ name: 'internal-schema-detail', params: { schemaName: name } })
 
 const addSchema = () => {
-  router.push({ name: 'schema-create' })
+  router.push({ name: 'internal-schema-create' })
 }
 
 const handleCopy = (name: string) => {
-  router.push({ name: 'schema-create', query: { action: 'copy', target: name } })
+  router.push({ name: 'internal-schema-create', query: { action: 'copy', target: name } })
 }
 
 const handleDel = async (name: string) => {

src/views/RuleEngine/Schema/SchemaCreate.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="schema-create" :class="[isInSinglePage ? 'app-wrapper' : '']">
-    <detail-header v-if="isInSinglePage" :item="{ name: title, routeName: 'schema' }" />
+    <detail-header v-if="isInSinglePage" :item="{ name: title, routeName: 'internal-schema' }" />
     <el-card class="app-card schema-create-card">
       <SchemaRegistryForm
         class="schema-create-form"
@@ -83,7 +83,7 @@ const checkClipStatus = async () => {
 
 const cancel = () => {
   if (isInSinglePage.value) {
-    router.push({ name: 'schema' })
+    router.push({ name: 'internal-schema' })
   } else {
     emit('cancel')
   }
@@ -96,7 +96,7 @@ const submit = async () => {
     const ret = await createSchema(cloneDeep(formData.value))
     if (isInSinglePage.value) {
       ElMessage.success(t('Base.createSuccess'))
-      router.push({ name: 'schema' })
+      router.push({ name: 'internal-schema' })
     } else {
       emit('submitted', ret.name)
     }

src/views/RuleEngine/Schema/SchemaDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="schema-detail">
     <div class="detail-top">
-      <detail-header :item="{ name: schemaName, routeName: 'schema' }" />
+      <detail-header :item="{ name: schemaName, routeName: 'internal-schema' }" />
       <div class="btn-wrap">
         <el-tooltip :content="$t('Base.delete')" placement="top">
           <el-button
@@ -85,7 +85,7 @@ const handleUpdate = async () => {
     await FormCom.value.validate()
     await updateSchema(schemaName.value, omit(cloneDeep(schemaData.value), 'name'))
     ElMessage.success(t('Base.updateSuccess'))
-    router.push({ name: 'schema' })
+    router.push({ name: 'internal-schema' })
   } catch (error) {
     console.error(error)
   } finally {
@@ -103,7 +103,7 @@ const handleDelete = async () => {
     })
     await deleteSchema(schemaName.value)
     ElMessage.success(t('Base.deleteSuccess'))
-    router.push({ name: 'schema' })
+    router.push({ name: 'internal-schema' })
   } catch (error) {
     //
   }

src/views/RuleEngine/Schema/components/ExternalSchemaConfluentForm.vue → src/views/RuleEngine/Schema/components/ExternalSchemaForm.vue

@@ -18,7 +18,12 @@
       <el-col :span="12">
         <el-form-item :label="tl('type')" prop="type">
           <el-select v-model="form.type">
-            <el-option label="confluent" value="confluent" />
+            <el-option
+              v-for="{ value, label } in schemaTypeOpts"
+              :key="value"
+              :label="label"
+              :value="value"
+            />
           </el-select>
         </el-form-item>
       </el-col>
@@ -58,6 +63,7 @@
 <script lang="ts" setup>
 import { customValidate } from '@/common/tools'
 import FormItemLabel from '@/components/FormItemLabel.vue'
+import useExternalSchemaType from '@/hooks/Rule/schema/useExternalSchemaType'
 import useFormRules from '@/hooks/useFormRules'
 import useI18nTl from '@/hooks/useI18nTl'
 import { computed, defineEmits, defineExpose, defineProps, ref } from 'vue'
@@ -96,6 +102,7 @@ const rules = ref({
   'auth.username': createRequiredRule(t('Base.username')),
   'auth.password': createRequiredRule(tl('password')),
 })
+const { schemaTypeOpts } = useExternalSchemaType()
 
 const authType = computed({
   get() {