fix: contentDetailWrap 暗黑模式

xingyu
1 parent 005a3e6a
Showing 6 changed files with 23 additions and 19 deletions
yudao-ui-admin-vue3/src/components/ContentDetailWrap/src/ContentDetailWrap.vue
yudao-ui-admin-vue3/src/hooks/web/useVxeCrudSchemas.ts
yudao-ui-admin-vue3/src/views/infra/codegen/EditTable.vue
yudao-ui-admin-vue3/src/views/infra/codegen/components/CloumInfoForm.vue
yudao-ui-admin-vue3/src/views/infra/codegen/index.vue
yudao-ui-admin-vue3/src/views/system/user/index.vue
@@ -24,12 +24,12 @@ onMounted(() =&gt; {
 </script>
 <template>
-  <div :class="[`${prefixCls}-container`, 'relative bg-[#fff]']" ref="contentDetailWrap">
+  <div :class="[`${prefixCls}-container`]" ref="contentDetailWrap">
     <Sticky :offset="offset">
       <div
         :class="[
           `${prefixCls}-header`,
-          'flex border-bottom-1 h-50px items-center text-center bg-white pr-10px'
+          'flex border-bottom-1 h-50px items-center text-center pr-10px'
         ]"
       >
         <div :class="[`${prefixCls}-header__back`, 'flex pl-10px pr-10px ']">
@@ -50,9 +50,7 @@ onMounted(() =&gt; {
     </Sticky>
     <div style="padding: var(--app-content-padding)">
       <ElCard :class="[`${prefixCls}-body`, 'mb-20px']" shadow="never">
-        <div>
-          <slot></slot>
-        </div>
+        <div> <slot></slot> </div>
       </ElCard>
     </div>
   </div>
@@ -185,10 +185,10 @@ const filterTableSchema = (crudSchema: VxeCrudSchema): VxeGridPropTypes.Columns 
   const tableSchema: VxeGridPropTypes.Columns = []
   // 主键ID
   if (crudSchema.primaryKey && crudSchema.primaryType) {
-    const primaryWidth =
-      (crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index')).length * 20 + 'px'
+    const primaryTitle = crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index')
+    const primaryWidth = primaryTitle.length * 30 + 'px'
     const tableSchemaItem = {
-      title: crudSchema.primaryTitle ? crudSchema.primaryTitle : t('common.index'),
+      title: primaryTitle,
       field: crudSchema.primaryKey,
       type: crudSchema.primaryType ? crudSchema.primaryType : null,
       width: primaryWidth
 <template>
-  <ContentDetailWrap title="代码生成" @back="push('/infra/codegen')">
+  <ContentDetailWrap :title="title" @back="push('/infra/codegen')">
     <el-tabs v-model="activeName">
       <el-tab-pane label="基本信息" name="basicInfo">
         <BasicInfoForm ref="basicInfoRef" :basicInfo="tableCurrentRow" />
@@ -31,22 +31,25 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const { push } = useRouter()
 const { query } = useRoute()
+const loading = ref(false)
+const title = ref('代码生成')
+const activeName = ref('cloum')
+const cloumInfoRef = ref(null)
 const tableCurrentRow = ref<CodegenTableVO>()
 const cloumCurrentRow = ref<CodegenColumnVO[]>([])
+const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
+const genInfoRef = ref<ComponentRef<typeof GenInfoForm>>()
+
 const getList = async () => {
   const id = query.id as unknown as number
   if (id) {
     // 获取表详细信息
     const res = await getCodegenTableApi(id)
     tableCurrentRow.value = res.table
+    title.value = '修改[ ' + res.table.tableName + ' ]生成配置'
     cloumCurrentRow.value = res.columns
   }
 }
-const loading = ref(false)
-const activeName = ref('cloum')
-const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>()
-const genInfoRef = ref<ComponentRef<typeof GenInfoForm>>()
-const cloumInfoRef = ref(null)
 const submitForm = async () => {
   const basicInfo = unref(basicInfoRef)
   const genInfo = unref(genInfoRef)
 <template>
-  <vxe-table ref="dragTable" :data="info" stripe :column-config="{ resizable: true }">
+  <vxe-table
+    ref="dragTable"
+    :data="info"
+    max-height="600"
+    stripe
+    :column-config="{ resizable: true }"
+  >
     <vxe-column title="字段列名" field="columnName" fixed="left" width="80" />
     <vxe-column title="字段描述" field="columnComment">
       <template #default="{ row }">
@@ -71,7 +71,7 @@ import { ImportTable, Preview } from &#39;./components&#39;
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
-const { push } = useRouter()
+const { push } = useRouter() // 路由跳转
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
 const { gridOptions, getList, deleteData } = useVxeGrid<CodegenTableVO>({
@@ -92,8 +92,6 @@ const handlePreview = (row: CodegenTableVO) =&gt; {
 }
 // 编辑操作
 const handleUpdate = (rowId: number) => {
-  // TODO 星语：修改某个的时候，tab 要展示名字。例如说："修改[" + tableName + "]生成配置"
-  // TODO 星语：【暗黑模式】编辑界面，周边有白色的边框，不太好看
   push('/codegen/edit?id=' + rowId)
 }
 // 同步操作
@@ -359,7 +359,6 @@ const handleCreate = async () =&gt; {
   deptId.value = null
   postIds.value = []
   await nextTick()
-  // TODO 星语：要不要这个放到新增里？这样和 handleUpdate 统一一点
   if (allSchemas.formSchema[0].field !== 'username') {
     unref(formRef)?.addSchema(
       {