feat: 调整目录结构,增加Iconify Plugin和TDesign相关示例

src/App.vue

@@ -15,11 +15,7 @@ console.log(`${dayjs().format('YYYY-MM-DD HH:mm:ss a')}好，旅行者！`)
   <header
     class="max-h-screen leading-normal lg:flex lg:items-center lg:pr-20"
   >
-    <img
-      alt="Vue logo"
-      class="size-32 lg:mr-8"
-      src="@/assets/logo.svg"
-    >
+    <div class="icon-vue-logo aspect-square size-32 lg:mr-8" />
     <div class="lg:flex lg:flex-wrap lg:place-items-start">
       <HelloWorld msg="You did it!" />
       <nav

src/main.ts

@@ -1,8 +1,8 @@
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 
-import '@/assets/main.css'
 import '@/config'
+import '@/styles/main.css'
 
 import App from './App.vue'
 import router from './router'

src/views/TDesignView.vue

@@ -1,7 +1,109 @@
-<script lang="ts" setup>
+<script lang="tsx" setup>
+import type { TableProps } from 'tdesign-vue-next'
+
 MessagePlugin.success(`${dayjs().format('a')}好，TDesign!`)
 
 const percentage = numbro(dayjs().diff(dayjs().startOf('year'), 'day')).divide(dayjs().isLeapYear() ? 366 : 365).multiply(100).format('0.00')
+
+const statusNameListMap = {
+  0: {
+    label: '审批通过',
+    theme: 'success',
+    icon: <span class="icon-[tdesign--check-circle-filled]" />,
+  },
+  1: {
+    label: '审批失败',
+    theme: 'danger',
+    icon: <span class="icon-[tdesign--close-circle-filled]" />,
+  },
+  2: {
+    label: '审批过期',
+    theme: 'warning',
+    icon: <span class="icon-[tdesign--error-circle-filled]" />,
+  },
+}
+const data: TableProps['data'] = []
+const total = 5
+for (let i = 0; i < total; i++) {
+  data.push({
+    applicant: ['贾明', '张三', '王芳'][i % 3],
+    status: i % 3,
+    channel: ['电子签署', '纸质签署', '纸质签署'][i % 3],
+    detail: {
+      email: ['w.cezkdudy@lhll.au', 'r.nmgw@peurezgn.sl', 'p.cumx@rampblpa.ru'][i % 3],
+    },
+    matters: ['宣传物料制作费用', 'algolia 服务报销', '相关周边制作费', '激励奖品快递费'][i % 4],
+    time: [2, 10, 1][i % 3],
+    createTime: ['2022-01-01', '2022-02-01', '2022-03-01', '2022-04-01', '2022-05-01'][i % 4],
+  })
+}
+const columns = ref<TableProps['columns']>([
+  {
+    colKey: 'applicant',
+    title: '申请人',
+    width: 100,
+  },
+  {
+    colKey: 'status',
+    title: '审批状态',
+    width: 120,
+    cell: (h, { row }) => {
+      return (
+        <t-tag shape="round" theme={statusNameListMap[row.status as keyof typeof statusNameListMap].theme} variant="light-outline">
+          {statusNameListMap[row.status as keyof typeof statusNameListMap].icon}
+          {statusNameListMap[row.status as keyof typeof statusNameListMap].label}
+        </t-tag>
+      )
+    },
+  },
+  {
+    colKey: 'time',
+    title: '申请耗时(天)',
+    width: 120,
+    align: 'center',
+    // 设置单元格类名
+    className: ({ row }) => {
+      if (row.time >= 9)
+        return 'custom-cell-class-name'
+
+      return ''
+    },
+    attrs: ({ row }) => {
+      if (row.time >= 9) {
+        return {
+          style: {
+            fontWeight: 600,
+            backgroundColor: 'var(--td-warning-color-light)',
+          },
+        }
+      }
+    },
+  },
+  {
+    colKey: 'channel',
+    title: '签署方式',
+    width: 120,
+    align: 'right',
+    className: () => {
+      return 'custom-cell-class-name'
+    },
+  },
+  {
+    colKey: 'detail.email',
+    title: '邮箱地址',
+    width: 160,
+    ellipsis: true,
+  },
+  {
+    colKey: 'createTime',
+    title: '申请时间',
+  },
+])
+const getRowClassName: TableProps['rowClassName'] = ({ rowIndex }) => {
+  if (rowIndex === 2)
+    return 'custom-third-class-name'
+  return ''
+}
 </script>
 
 <template>
@@ -81,6 +183,14 @@ const percentage = numbro(dayjs().diff(dayjs().startOf('year'), 'day')).divide(d
           <div>今年已过去</div>
           <t-progress class="flex-1" theme="plump" :percentage="numbro.unformat(percentage)" />
         </div>
+        <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>
+          </template>
+        </t-table>
       </t-content>
     </t-layout>
   </t-layout>

tailwind.config.js

@@ -1,3 +1,79 @@
+import { dynamicIconsPlugin, iconsPlugin } from '@egoist/tailwindcss-icons'
+import { cleanupSVG, importDirectorySync, isEmptyColor, parseColors, runSVGO } from '@iconify/tools'
+import { compareColors, stringToColor } from '@iconify/utils/lib/colors'
+import formsPlugin from '@tailwindcss/forms'
+
+function getCollections(dir) {
+  // Import icons
+  const iconSet = importDirectorySync(dir, {
+    includeSubDirs: false,
+  })
+
+  // Validate, clean up, fix palette and optimise
+  iconSet.forEachSync((name, type) => {
+    if (type !== 'icon')
+      return
+
+    const svg = iconSet.toSVG(name)
+    if (!svg) {
+      // Invalid icon
+      iconSet.remove(name)
+      return
+    }
+
+    // Clean up and optimise icons
+    try {
+      // Clean up icon code
+      cleanupSVG(svg)
+
+      // Change color to `currentColor`
+      // Skip this step if icon has hardcoded palette
+      const blackColor = stringToColor('black')
+      const whiteColor = stringToColor('white')
+      parseColors(svg, {
+        defaultColor: 'currentColor',
+        callback: (attr, colorStr, color) => {
+          if (!color) {
+            // Color cannot be parsed!
+            throw new Error(`Invalid color: "${colorStr}" in attribute ${attr}`)
+          }
+
+          if (isEmptyColor(color)) {
+            // Color is empty: 'none' or 'transparent'. Return as is
+            return color
+          }
+
+          // Change black to 'currentColor'
+          if (compareColors(color, blackColor))
+            return 'currentColor'
+
+          // Remove shapes with white color
+          if (compareColors(color, whiteColor))
+            return 'remove'
+
+          // Icon is not monotone
+          return color
+        },
+      })
+
+      // Optimise
+      runSVGO(svg)
+    }
+    catch (err) {
+      // Invalid icon
+      console.error(`Error parsing ${name}:`, err)
+      iconSet.remove(name)
+      return
+    }
+
+    // Update icon
+    iconSet.fromSVG(name, svg)
+  })
+
+  // Export
+  return iconSet.export()
+}
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
@@ -26,6 +102,15 @@ export default {
     },
   },
   plugins: [
-    require('@tailwindcss/forms'),
+    formsPlugin(),
+    // example: icon-vue-logo
+    iconsPlugin({
+      prefix: 'icon',
+      collections: {
+        vue: getCollections('./src/icons/vue'),
+      },
+    }),
+    // example: icon-[heroicons--check-solid]
+    dynamicIconsPlugin({ prefix: 'icon' }),
   ],
 }