diff --git a/.env b/.env
index e2a85a2..29f5a8f 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,4 @@
 APP_TITLE=云端无人机管理系统
+APP_ICON_URL=//at.alicdn.com/t/c/font_4349903_2p0gyrtbo2.js
 APP_DEVELOPMENT_BASE_URL=/api
 APP_PRODUCTION_BASE_URL=/
diff --git a/index.html b/index.html
index 1230ea0..0c30a60 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme-mode="dark">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title><%- title %></title>
+    <script src="<%- iconUrl %>"></script>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/components/FontIcon.vue b/src/components/FontIcon.vue
new file mode 100644
index 0000000..6cf8918
--- /dev/null
+++ b/src/components/FontIcon.vue
@@ -0,0 +1,22 @@
+<script setup>
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        name: {
+            type: String,
+            required: true,
+        },
+        size: String,
+    });
+
+    const className = computed(() => {
+        const { [props.size]: cn } = { small: 't-size-s', medium: 't-size-m', large: 't-size-l' };
+        return cn;
+    });
+</script>
+
+<template>
+    <svg :class="['t-icon', className, name]" :style="!className ? `font-size: ${size}` : ''">
+        <use :href="`#${name}`" />
+    </svg>
+</template>
diff --git a/src/main.js b/src/main.js
index d52bb28..8fb3253 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ import app from '@/app';
 import store from '@/stores';
 import router from '@/router';
 import TDesignVue from '@/plugins/TDesign-vue'; // TDesign按需引入
+import '@/plugins/components';
 import '@/styles/common.less'; // 自定义全局样式表
 
 app.use(store);
diff --git a/src/plugins/components.js b/src/plugins/components.js
new file mode 100644
index 0000000..6165fa5
--- /dev/null
+++ b/src/plugins/components.js
@@ -0,0 +1,49 @@
+import { h } from 'vue';
+import app from '@/app';
+import FontIcon from '@/components/FontIcon.vue';
+
+app.component('FontIcon', FontIcon);
+
+// 给数值加单位（可给单位套上html标签）
+// 如：<ValueUnit unit="亩">100.00</ValueUnit>（结果为：100.00亩）
+// 如：<ValueUnit unit="亩" tag="em">100.00</ValueUnit>（结果为：100.00<em>亩</em>）
+app.component('ValueUnit', {
+    props: {
+        unit: {
+            type: String,
+            required: true,
+        },
+        tag: {
+            type: String,
+            default: '',
+        },
+        falsy: {
+            type: String,
+            default: '-',
+        },
+    },
+    render(self) {
+        const [{ children }] = self?.$slots?.default() || [];
+        const { unit, tag, falsy } = self?.$props || {};
+        return (children || children === 0 ? [children, tag ? h(tag, unit) : unit] : falsy);
+    },
+});
+
+/**
+ * 数据分配器
+ * 将载荷数据payload，通过scopedSlot分配给子节点使用
+ * 示例1：<DataDispatcher :payload="true" v-slot="isShow">{{ isShow }}</DataDispatcher>
+ * 示例2：<DataDispatcher :payload="[1, 2]" v-slot="[a, b]">{{ a }}{{ b }}</DataDispatcher>
+ * 示例3：<DataDispatcher :payload="{ a: 1, b: 2 }" v-slot="{ a: A, b: B }">{{ A }}{{ B }}</DataDispatcher>
+ */
+app.component('DataDispatcher', {
+    props: {
+        payload: {
+            type: [Boolean, Number, String, Array, Object],
+            required: true,
+        },
+    },
+    render(self) {
+        return self?.$slots?.default(self.payload);
+    },
+});
diff --git a/vite.config.js b/vite.config.js
index ef7d2d9..d20cd03 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,7 +9,7 @@ import { createHtmlPlugin } from 'vite-plugin-html'; // vite编译html
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
     // 获取APP开头的 环境变量
-    const { APP_TITLE } = loadEnv(mode, process.cwd(), 'APP');
+    const { APP_TITLE, APP_ICON_URL } = loadEnv(mode, process.cwd(), 'APP');
 
     return {
         plugins: [
@@ -23,6 +23,7 @@ export default defineConfig(({ mode }) => {
                     data: {
                         // 将环境变量 APP_TITLE 赋值给 title 方便 html页面使用 title 获取系统标题
                         title: APP_TITLE,
+                        iconUrl: APP_ICON_URL,
                     },
                 },
             }),
