refactor: 更改tailwind.config为ts文件,调整TDesignView样式

SadWood · Apr 2, 2024 · 765abf1 · 765abf1
1 parent 485d750
commit 765abf1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/views/TDesignView.vue b/src/views/TDesignView.vue
@@ -169,7 +169,7 @@ const getRowClassName: TableProps['rowClassName'] = ({ rowIndex }) => {
         </t-menu-item>
       </t-menu>
     </t-aside>
-    <t-layout>
+    <t-layout class="min-w-0">
       <t-content class="p-4">
         <div class="text-right">
           <t-badge count="100" class="ml-auto">
@@ -186,12 +186,26 @@ const getRowClassName: TableProps['rowClassName'] = ({ rowIndex }) => {
         <t-divider />
         <t-table row-key="id" :data="data" :columns="columns" :row-class-name="getRowClassName">
           <template #footerSummary>
-            <div class="t-table__row-filter-inner">
-              <InfoCircleIcon />近期申请耗时较长
+            <div class="flex items-center justify-center gap-x-2">
+              <span class="icon-[tdesign--info-circle]" />近期申请耗时较长
             </div>
           </template>
         </t-table>
       </t-content>
     </t-layout>
   </t-layout>
 </template>
+
+<style scoped>
+:deep(.t-table) {
+  .custom-third-class-name > td {
+    background-color: var(--td-brand-color-light);
+    font-weight: bold;
+  }
+
+  td.custom-cell-class-name {
+    color: orange;
+    font-weight: bold;
+  }
+}
+</style>
diff --git a/tailwind.config.js → tailwind.config.ts b/tailwind.config.js → tailwind.config.ts
@@ -3,7 +3,7 @@ import { cleanupSVG, importDirectorySync, isEmptyColor, parseColors, runSVGO } f
 import { compareColors, stringToColor } from '@iconify/utils/lib/colors'
 import formsPlugin from '@tailwindcss/forms'
 
-function getCollections(dir) {
+function getCollections(dir: string) {
   // Import icons
   const iconSet = importDirectorySync(dir, {
     includeSubDirs: false,
@@ -28,8 +28,8 @@ function getCollections(dir) {
 
       // Change color to `currentColor`
       // Skip this step if icon has hardcoded palette
-      const blackColor = stringToColor('black')
-      const whiteColor = stringToColor('white')
+      const blackColor = stringToColor('black')!
+      const whiteColor = stringToColor('white')!
       parseColors(svg, {
         defaultColor: 'currentColor',
         callback: (attr, colorStr, color) => {
@@ -109,8 +109,18 @@ export default {
       collections: {
         vue: getCollections('./src/icons/vue'),
       },
+      extraProperties: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+      },
     }),
     // example: icon-[heroicons--check-solid]
-    dynamicIconsPlugin({ prefix: 'icon' }),
+    dynamicIconsPlugin({
+      prefix: 'icon',
+      extraProperties: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+      },
+    }),
   ],
 }