Bladeren bron

[Style 0000] BasicTable组件与系统下拉框样式优化

houzekong 4 maanden geleden
bovenliggende
commit
89ad81154d

+ 2 - 1
src/components/Table/src/BasicTable.vue

@@ -503,7 +503,8 @@
         padding: 12px 10px 6px 10px;
         margin-bottom: 8px;
         background-color: @component-background;
-        border-radius: 2px;
+        border-radius: 5px;
+        border: 1px solid @border-color-base;
       }
     }
 

+ 1 - 0
src/components/Table/src/components/TableTitle.vue

@@ -2,6 +2,7 @@
   <BlockTitle v-if="getTitle" :class="prefixCls" :helpMessage="helpMessage">
     {{ getTitle }}
   </BlockTitle>
+  <span v-else></span>
 </template>
 <script lang="ts">
   import { computed, defineComponent, PropType } from 'vue';

+ 32 - 28
src/layouts/default/feature/SystemSelect.vue

@@ -1,20 +1,10 @@
 <template>
-  <Dropdown trigger="click">
-    <template #overlay>
-      <Menu @click="handleMenuClick">
-        <MenuItem v-for="(title, key) in OPTIONS" :key="key">{{ title }}</MenuItem>
-      </Menu>
-    </template>
-    <Button :class="prefixCls" type="primary">
-      {{ text }}
-      <DownOutlined />
-    </Button>
-  </Dropdown>
+  <a-select :class="prefixCls" v-model:value="text" :options="OPTIONS" @change="handleMenuClick"> </a-select>
 </template>
 
 <script lang="ts" setup>
-  import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
-  import { DownOutlined } from '@ant-design/icons-vue';
+  // import { Button, Dropdown, Menu, MenuItem } from 'ant-design-vue';
+  // import { DownOutlined } from '@ant-design/icons-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { onMounted, ref } from 'vue';
   import { PageEnum } from '/@/enums/pageEnum';
@@ -26,19 +16,29 @@
   const { t } = useI18n();
   const text = ref('');
 
-  function handleMenuClick({ key }) {
-    text.value = OPTIONS.value[key];
-    router.push({ path: key });
+  function handleMenuClick(value) {
+    router.push({ path: value });
   }
 
-  const OPTIONS = ref({
-    [PageEnum.BASE_HOME]: t('routes.basic.baseHome'),
-    [PageEnum.SECONDARY_HOME]: t('routes.basic.secondaryHome'),
-  });
+  // const OPTIONS = ref({
+  //   [PageEnum.BASE_HOME]: t('routes.basic.baseHome'),
+  //   [PageEnum.SECONDARY_HOME]: t('routes.basic.secondaryHome'),
+  // });
+  const OPTIONS = ref([
+    {
+      value: PageEnum.BASE_HOME,
+      label: t('routes.basic.baseHome'),
+    },
+    {
+      value: PageEnum.SECONDARY_HOME,
+      label: t('routes.basic.secondaryHome'),
+    },
+  ]);
 
   onMounted(() => {
     // 由于BASE_HOME仅代表了一个页面,其他页面都隶属于SECONDARY_HOME,所以简单处理
-    text.value = OPTIONS.value[router.currentRoute.value.path] || t('routes.basic.secondaryHome');
+    const isBaseHome = router.currentRoute.value.path === PageEnum.BASE_HOME;
+    text.value = isBaseHome ? t('routes.basic.baseHome') : t('routes.basic.secondaryHome');
   });
 
   defineExpose({ OPTIONS, prefixCls, handleMenuClick });
@@ -52,13 +52,17 @@
     width: 210px;
     position: relative;
     z-index: @layout-basic-z-index;
+  }
 
-    // :deep(.ant-select-selector) {
-    //   background-color: @primary-color;
-    // }
-
-    // :deep(.ant-select-single.ant-select-show-arrow .ant-select-selection-item) {
-    //   color: @white;
-    // }
+  .@{prefix-cls}.ant-select {
+    :deep(.ant-select-selector) {
+      background-color: @primary-color;
+      .ant-select-selection-item {
+        color: @white;
+      }
+    }
+    :deep(.ant-select-arrow) {
+      color: @white;
+    }
   }
 </style>

+ 2 - 2
src/layouts/default/tabs/index.less

@@ -21,8 +21,8 @@ html[data-theme='light'] {
   height: @multiple-height + 2;
   line-height: @multiple-height + 2;
   background-color: @component-background;
-  border-bottom: 1px solid @border-color-base;
-  box-shadow: 0 4px 4px rgb(0 21 41 / 8%);
+  // border-bottom: 1px solid @border-color-base;
+  // box-shadow: 0 4px 4px rgb(0 21 41 / 8%);
 
   .ant-tabs-small {
     height: calc(@multiple-height + 4px);