Initial project

2025-07-08 16:33:11 +08:00
parent 1a5a16be74
commit f862530142
80 changed files with 8301 additions and 129 deletions
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,15 @@
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+.eslintrc.js
+dist
+pnpm-lock.yaml
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,78 @@
+module.exports = {
+	"env": {
+		"browser": true,
+		"es2021": true,
+		"node": true
+	},
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:vue/vue3-essential",
+		"./.eslintrc-auto-import.json"
+	],
+	"overrides": [
+		{
+			"env": {
+				"node": true
+			},
+			"files": [
+				".eslintrc.{js}"
+			],
+			"parserOptions": {
+				"sourceType": "script"
+			}
+		}
+	],
+	"parserOptions": {
+		"ecmaVersion": "latest",
+		"parser": "@typescript-eslint/parser",
+		"sourceType": "module"
+	},
+	"plugins": [
+		"@typescript-eslint",
+		"vue"
+	],
+	"rules": {                                                         // 注释是解释使用该设置的效果，而不是设置属性本身
+		"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+		"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+		// 其他
+		"camelcase": 2,                                                // 变量驼峰式命名
+		"quotes": ["error", "double"],                                 // 强制双引字符串
+		"eqeqeq": ["error", "always"],                                 // 强制全等比较
+		"semi": ["error", "always"],                                   // 强制语句分号结束
+		"max-len": [
+			"error",
+			{
+				"code": 180
+			}
+		],
+		// 逗号
+		"comma-style": [2, "last"],                                    // 逗号出现在行末 [first, last]
+		"comma-dangle": [2, "never"],                                  // 数组或对象不可带最后一个逗号 [never, always, always-multiline]
+		// 空格
+		"no-trailing-spaces": "error",                                 // 禁止行末存在空格
+		"comma-spacing": [2, { "before": false, "after": true }],      // 逗号后需要空格
+		"semi-spacing": ["error", { "before": false, "after": true }], // 分号后需要空格
+		"computed-property-spacing": [2, "never"],                     // 以方括号取对象属性时，[ 后面和 ] 前面需要空格, [never, always]
+		"space-before-function-paren": ["error", {                     // 函数括号前空格
+			"anonymous": "always",                                     //     针对匿名函数表达式，比如 function () {}
+			"named": "never",                                          //     针对命名函数表达式，比如 function foo() {}
+			"asyncArrow": "always"                                     //     针对异步的箭头函数表达式，比如 async () => {}
+		}],
+		// 缩进
+		"no-mixed-spaces-and-tabs": "off",                             // 允许混合缩进
+		"no-tabs": ["error", { allowIndentationTabs: true }],          // 使用 Tab 缩进
+		"indent": ["error", "tab", {                                   // Tab 缩进相关
+			SwitchCase: 1                                              //     Switch Case 缩进一级
+		}],
+		// 框架
+		"@typescript-eslint/ban-types": "off",                         // TS 允许空对象
+		"@typescript-eslint/no-empty-function": "off",                 // TS 允许空函数
+		"@typescript-eslint/no-explicit-any": "off",                   // TS 允许 any 类型
+		"@typescript-eslint/explicit-module-boundary-types": "off",    // TS 允许显式模块边界类型?
+		"vue/no-multiple-template-root": "off",                        // Vue3 支持多个根节点
+		"@typescript-eslint/no-this-alias": "off",                     // 允许 this 变量本地化
+		"vue/no-v-model-argument": "off",                              // 允许 v-model 支持参数
+		"vue/multi-word-component-names": "off"                        // 允许单个词语的组件名
+	}
+};
--- a/.gitignore
+++ b/.gitignore
@ -1,138 +1,28 @@
-# ---> Node
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
-.pnpm-debug.log*

-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
+node_modules
 dist
+dist-ssr
+*.local

-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

+/.eslintrc-auto-import.json
+/components.d.ts
+/examples/auto-imports.d.ts
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+shamefully-hoist=true
--- a/README.md
+++ b/README.md
@ -1,3 +1,18 @@
-# timi-web
+# Vue 3 + TypeScript + Vite

-Timi 前端通用组件库
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
--- a/examples/Root.vue
+++ b/examples/Root.vue
@ -0,0 +1,21 @@
+<template>
+	<div class="root">
+		<h2 v-popup="`提示`">test popup</h2>
+		<icon name="ZIP" :scale="2" disabled />
+		<markdown-editor class="editor" v-model:data="data" :minRows="12" :max-rows="24" />
+	</div>
+	<popup />
+</template>
+
+<script lang="ts" setup>
+import { Icon, Popup } from "timi-web";
+import MarkdownEditor from "~/components/markdown-editor/index.vue";
+
+const data = ref("");
+
+</script>
+<style lang="less" scoped>
+.root {
+	width: 80%;
+}
+</style>
--- a/examples/main.ts
+++ b/examples/main.ts
@ -0,0 +1,10 @@
+import { createApp } from "vue";
+import Root from "./Root.vue";
+import TimiWebUI, { axios, VPopup } from "timi-web"; // 本地开发
+
+axios.defaults.baseURL = "http://localhost:8091";
+
+const app = createApp(Root);
+app.use(TimiWebUI);
+app.directive("popup", VPopup);
+app.mount("#root");
--- a/examples/vite-env.d.ts
+++ b/examples/vite-env.d.ts
@ -0,0 +1,7 @@
+declare module "*.vue" {
+	import type { DefineComponent } from "vue";
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+declare module "prismjs";
--- a/index.html
+++ b/index.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Vue + TS</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/examples/main.ts"></script>
+	</body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,66 @@
+{
+	"name": "timi-web",
+	"main": "./dist/timi-web.umd.js",
+	"types": "./dist/src/index.d.ts",
+	"module": "./dist/timi-web.mjs",
+	"style": "./dist/style.css",
+	"private": false,
+	"version": "1.0.0",
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite",
+		"dev:doc": "pnpm run -C docs dev",
+		"build": "vue-tsc --noEmit && vite build",
+		"build:doc": "pnpm run -C docs build"
+	},
+	"files": [
+		"dist/**",
+		"src/**",
+		"examples/**",
+		"README.md",
+		"package.json"
+	],
+	"exports": {
+		".": {
+			"import": "./dist/timi-web.mjs",
+			"require": "./dist/timi-web.umd.js"
+		},
+		"./style.css": "./dist/timi-web.css"
+	},
+	"engines": {
+		"node": ">=16.0.0"
+	},
+	"dependencies": {
+		"axios": "1.8.2",
+		"less": "4.3.0",
+		"marked": "^15.0.11",
+		"marked-gfm-heading-id": "^4.1.1",
+		"marked-highlight": "^2.2.1",
+		"marked-mangle": "^1.1.10",
+		"prismjs": "1.30.0",
+		"terser": "^5.39.0"
+	},
+	"devDependencies": {
+		"@types/marked": "^6.0.0",
+		"@types/node": "^22.15.2",
+		"@types/prismjs": "1.26.5",
+		"@typescript-eslint/eslint-plugin": "^8.31.0",
+		"@typescript-eslint/parser": "^8.31.0",
+		"@vitejs/plugin-vue": "^5.2.3",
+		"eslint": "^9.25.1",
+		"eslint-config-prettier": "^10.1.2",
+		"eslint-define-config": "^2.1.0",
+		"eslint-plugin-prettier": "^5.2.6",
+		"eslint-plugin-vue": "^10.0.0",
+		"prettier": "^3.5.3",
+		"typescript": "^5.8.3",
+		"unplugin-auto-import": "^19.1.2",
+		"unplugin-vue-components": "^28.5.0",
+		"vite": "6.2.6",
+		"vite-plugin-dts": "^4.5.3",
+		"vite-plugin-prismjs": "^0.0.11",
+		"vite-plugin-vue-setup-extend": "^0.4.0",
+		"vue": "^3.5.13",
+		"vue-tsc": "^2.2.10"
+	}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/api/CommentAPI.ts
+++ b/src/api/CommentAPI.ts
@ -0,0 +1,36 @@
+import {
+	axios,
+	CaptchaData,
+	Comment,
+	CommentPage,
+	CommentReply,
+	CommentReplyPage,
+	CommentReplyView,
+	CommentView,
+	PageResult
+} from "~/index";
+
+const BASE_URI = "/comment";
+
+async function page(commentPage: CommentPage): Promise<PageResult<CommentView>> {
+	return axios.post(`${BASE_URI}/list`, commentPage);
+}
+
+async function create(captchaData: CaptchaData<Comment>): Promise<void> {
+	return axios.post(`${BASE_URI}/create`, captchaData);
+}
+
+async function pageReply(commentReplyPage: CommentReplyPage): Promise<PageResult<CommentReplyView>> {
+	return axios.post(`${BASE_URI}/reply/list`, commentReplyPage);
+}
+
+async function createReply(captchaData: CaptchaData<CommentReply>): Promise<void> {
+	return axios.post(`${BASE_URI}/reply/create`, captchaData);
+}
+
+export default {
+	page,
+	create,
+	createReply,
+	pageReply
+};
--- a/src/api/CommonAPI.ts
+++ b/src/api/CommonAPI.ts
@ -0,0 +1,28 @@
+import { axios, SettingKey, TemplateBizType, Toolkit } from "~/index";
+
+const getCaptchaAPI = () => axios.defaults.baseURL + "/captcha";
+
+const getAttachmentReadAPI = (mongoId: string) => `${axios.defaults.baseURL}/attachment/read/${mongoId}`;
+
+async function getTemplate(bizType: TemplateBizType, code: string): Promise<string> {
+	return axios.get(`/template?bizType=${bizType}&bizCode=${code}`);
+}
+
+async function getSetting(key: string, args?: { [key: string]: any }): Promise<string> {
+	return axios.get(`/setting/${key}?${Toolkit.toURLArgs(args)}`);
+}
+
+async function listSetting(keyMap: Map<string, object | undefined>): Promise<Map<string, string>> {
+	const result = await axios.post("/setting/map", Toolkit.toObject(keyMap));
+	const map = new Map<string, string>();
+	Object.entries(result).forEach(([key, value]) => map.set(key, value as string));
+	return map;
+}
+
+export default {
+	getCaptchaAPI,
+	getAttachmentReadAPI,
+	getTemplate,
+	getSetting,
+	listSetting
+};
--- a/src/api/DeveloperAPI.ts
+++ b/src/api/DeveloperAPI.ts
@ -0,0 +1,11 @@
+import { axios, Developer } from "~/index";
+
+const BASE_URI = "/git/developer";
+
+async function get(): Promise<Developer> {
+	return axios.post(`${BASE_URI}`);
+}
+
+export default {
+	get
+};
--- a/src/api/UserAPI.ts
+++ b/src/api/UserAPI.ts
@ -0,0 +1,85 @@
+import {
+	Attachment,
+	axios,
+	CaptchaData,
+	CommonAPI,
+	LoginRequest,
+	LoginResponse,
+	RegisterRequest,
+	UserAttachType,
+	UserProfileView,
+	UserView
+} from "~/index";
+
+const BASE_URI = "/user";
+
+async function register(captchaData: CaptchaData<RegisterRequest>): Promise<LoginResponse> {
+	return axios.post(`${BASE_URI}/register`, captchaData);
+}
+
+/**
+ * 登录
+ *
+ * @param captchaData 验证码登录对象
+ * @returns LoginResponse
+ */
+async function login(captchaData: CaptchaData<LoginRequest>): Promise<LoginResponse> {
+	return axios.post(`${BASE_URI}/login`, captchaData);
+}
+
+/**
+ * 验证是否已登录
+ *
+ * @returns true 为已登录
+ */
+async function login4Token(): Promise<LoginResponse> {
+	return axios.post(`${BASE_URI}/login/token`);
+}
+
+async function logout(): Promise<void> {
+	return axios.post(`${BASE_URI}/logout`);
+}
+
+/**
+ * 获取用户数据
+ *
+ * @param id 用户 ID
+ * @returns 用户数据
+ */
+async function view(id: number): Promise<UserView> {
+	return axios.post(`${BASE_URI}/view/${id}`);
+}
+
+function getAvatarURL(profile?: UserProfileView) {
+	if (profile && profile.attachmentList) {
+		return findAttachmentByType(profile.attachmentList, [UserAttachType.AVATAR, UserAttachType.DEFAULT_AVATAR]);
+	}
+}
+
+function getWrapperURL(profile?: UserProfileView) {
+	if (profile && profile.attachmentList) {
+		return findAttachmentByType(profile.attachmentList, [UserAttachType.WRAPPER, UserAttachType.DEFAULT_WRAPPER]);
+	}
+}
+
+function findAttachmentByType(attachmentList: Attachment[], types: UserAttachType[]) {
+	for (let i = 0; i < attachmentList.length; i++) {
+		const attachType = (<any>UserAttachType)[attachmentList[i].attachType!];
+		for (let type of types) {
+			if (attachType === type) {
+				return CommonAPI.getAttachmentReadAPI(attachmentList[i].mongoId);
+			}
+		}
+	}
+}
+
+export default {
+	register,
+	login,
+	login4Token,
+	logout,
+
+	view,
+	getAvatarURL,
+	getWrapperURL
+};
--- a/src/assets/icon.json
+++ b/src/assets/icon.json
@ -0,0 +1,151 @@
+{
+	"play": "M3 12h2v-10h-2v10zM7 12h2v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2z",
+	"tomcat": "M1 0v2h1v1h1v3h1v-1h1v1h2v1h3v-2h1v-1h1v-1h2v-1h1v-1h-3v1h-2v1h-4v-1h1v-1h-2v1h-1v-1h-2v-1zM2 9h1v-3h-1v3zM3 11h1v-2h-1v2zM4 12h2v-1h-2v1zM6 11h2v-2h-2v2zM11 9h1v-1h2v1h1v-3h-1v-1h-2v1h-1z",
+	"underline": "M4 2h8v-1h-8v1zM4 12h2v-7h4v7h2v-7h-1v-1h-1v-1h-4v1h-1v1h-1z",
+	"upload": "M2 5h2v-2h8v2h2v-4h-12zM4 8v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h-3v-4h-2v4z",
+	"server_0": "M5 14h6v-6h-2v-1h5v-2h1v-4h-4v4h1v1h-3v-1h1v-4h-4v4h1v1h-3v-1h1v-4h-4v4h1v2h5v1h-2z",
+	"fontsize": "M2 9v3h10v-3h-1v1h-3v-7h3v4h-1v-1h-1v2h5v-2h-1v1h-1v-4h2v-1h-9v1h2v7h-4v-1z",
+	"spec_weaken": "M1 3h2v-3h-2v3zM4 5h2v-5h-2v5zM7 8h2v-8h-2v8zM10 3h2v-3h-2v3zM13 5h2v-5h-2v5zM4 14h2v-3h2v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h2z",
+	"play_next": "M3 12h2v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2zM10 12h2v-10h-2v10z",
+	"branch": "M1 14h4v-1h9v-2h-9v-1h-1v-2h6v1h4v-4h-4v1h-6v-3h6v1h4v-4h-4v1h-8v9h-1z",
+	"redis": "M7 14h2v-1h2v-1h2v-1h2v-2h-2v-1h-2v-1h-2v-1h-2v1h-2v1h-2v1h-2v2h2v1h2v1h2zM1 8h2v-1h2v-1h2v-1h2v1h2v1h2v1h2v-2h-2v-1h-2v-1h-2v-1h-2v1h-2v1h-2v1h-2zM1 5h2v-1h2v-1h2v-1h2v1h2v1h2v1h2v-2h-2v-1h-2v-1h-2v-1h-2v1h-2v1h-2v1h-2z",
+	"music": "M2 1v4h2v7h10v-10h-4v4h2v4h-6v-9z",
+	"java": "M3 2h10v-1h-10v1zM5 4h5v-1h-5v1zM4 6h7v-1h-7v1zM7 7h1v-1h-1v1zM6 9h1v-2h-1v2zM8 9h-1v2h1v1h2v-1h-1v-1h-1zM9 7h-1v2h2v-1h-1zM10 10h1v-1h-1v1zM11 7h1v-1h-1v1zM12 6h1v-2h-1v2zM11 4h1v-1h-1v1z",
+	"pen": "M11 8v-2h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-4v4h1v1h1v1h1v1h1v1h1v1h1v1h2v-1h1v-1zM15 11v-1h-1v-1h-1v-1h-1v1h-1v1h-1v1h-1v1h1v1h1v1h1v-1h1v-1h1v-1z",
+	"text": "M12 11v1h-1v1h-8v-12h10v10h-1zM9 5h-5v1h5v-1zM11 7h-7v1h7v-1zM11 9h-7v1h7v-1z",
+	"mail_0": "M1 1v9h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h2v1h1v1h1v1h1v1h1v1h1v1h1v-9zM1 12v-1h2v-1h1v-1h1v-1h1v-1h1v-1h2v1h1v1h1v1h1v1h1v1h2v1z",
+	"zip": "M12 11v1h-1v1h-8v-5h-2v-8h8v1h4v10h-1zM8 1h-6v6h6v-6zM3 6h4v-1h-1v-1h-1v1h-2zM4 4h1v-1h2v-1h-4v1h1z",
+	"filter_0": "M9 13h-7v-2h1v-1h1v-1h1v-8h1v1h1v1h1v1h1v1h-2v5h-1v1h3zM15 13h-2v-1h-1v-1h-1v-1h-1v-5h2v4h1v1h1v1h1z",
+	"version": "M3 13h2v-6h1v2h1v2h1v2h2v-2h-1v-2h-1v-2h-1v-2h-1v-2h-1v-2h-2zM10 3h2v-2h-2v2z",
+	"arrow_0_w": "M14 6h-8v-1h1v-1h1v-2h-2v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1h2v-2h-1v-1h-1v-1h8z",
+	"extend": "M1 0v6h2v-4h4v-2zM9 14h6v-6h-2v4h-4z",
+	"sampling_rate": "M0 12h7v-3h-2v1h-3v-2h5v-6h-7v3h2v-1h3v2h-5zM16 6v6h-7v-10h2v3h1v-1h1v-1h1v-1h2v2h-1v1h-1v1h2zM11 8v2h3v-2h-3z",
+	"fail": "M3 2v2h1v1h1v1h1v2h-1v1h-1v1h-1v2h2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2h-2v1h-1v1h-1v1h-2v-1h-1v-1h-1v-1zM10 8h1v1h1v1h1v2h-2v-1h-1v-1h-1v-1h1z",
+	"proxy": "M15 8v5h-5v-2h-2v-3h-1v2h-6v-6h6v2h1v-3h2v-2h5v5h-5v-2h-1v6h1v-2h5zM11 12h3v-3h-3v3zM11 5h3v-3h-3v3z",
+	"folder": "M2 2h12v8h-7v1h-1v1h-4z",
+	"system": "M12 11v1h-1v1h-8v-12h10v10h-1zM4 9h3v-3h-3v3zM8 3h-3v2h1v-1h2v-1zM8 8h3v-2h-1v1h-2v1zM12 2h-3v3h3v-3z",
+	"arrow_0_s": "M9 13v-8h1v1h1v1h2v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1v1h-1v2h2v-1h1v-1h1v8z",
+	"stop": "M3 12h10v-10h-10v10z",
+	"arrow_0_n": "M7 1v8h-1v-1h-1v-1h-2v2h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1v-2h-2v1h-1v1h-1v-8z",
+	"spec_1": "M1 6h2v-5h-2v5zM4 12h2v-11h-2v11zM7 9h2v-8h-2v8zM10 4h2v-3h-2v3zM13 6h2v-5h-2v5z",
+	"thumbtack": "M7 1c0 1.30 0 2.70 0 4h-5v1h3v6h-2v1h10v-1h-2v-6h3v-1h-5c0-1.30 0-2.70 0-4-0.70 0-1.30 0-2 0z",
+	"spec_0": "M1 10h2v-6h-2v6zM4 14h2v-14h-2v14zM7 11h2v-8h-2v8zM10 9h2v-4h-2v4zM13 11h2v-8h-2v8z",
+	"java_0": "M3 2h10v-1h-10v1zM5 4h5v-1h-5v1zM4 6h7v-1h-7v1zM7 7h1v-1h-1v1zM6 9h1v-2h-1v2zM8 9h-1v2h1v1h2v-1h-1v-1h-1zM9 7h-1v2h2v-1h-1zM10 10h1v-1h-1v1zM11 7h1v-1h-1v1zM12 6h1v-2h-1v2zM11 4h1v-1h-1v1zM1 15h14v-1h-14v1zM1 0h14v-1h-14v1zM0 14h1v-14h-1v14zM15 14h1v-14h-1v14z",
+	"arrow_0_e": "M2 8h8v1h-1v1h-1v2h2v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2v2h1v1h1v1h-8z",
+	"magnifier": "M4 14h8v-2h-8v2zM2 12h2v-8h-2v8zM4 4h8v-2h-8v2zM12 12h2v-8h-2v8zM13 3h2v-1h1v-2h-2v1h-1z",
+	"server": "M1 12v-11h14v11h-14zM14 2h-12v4h12v-4zM14 7h-12v4h12v-4zM3 10h2v-2h-2v2zM6 10h7v-2h-7v2zM3 5h2v-2h-2v2zM6 5h7v-2h-7v2z",
+	"cut": "M1 7h4v-1h-4v1zM6 7h4v-1h-4v1zM11 7h4v-1h-4v1zM3 5h10v-5h-10v5zM3 8h10v4h-1v1h-1v1h-8z",
+	"flag": "M1 0v12h2v2h10v-2h2v-12h-2v2h-2v2h-2v2h-2v-2h-2v-2h-2v-2z",
+	"sd_card": "M4 13v-4h-1v-2h1v-2h-1v-4h10v12h-9zM6 10h-1v2h1v-2zM8 10h-1v2h1v-2zM10 10h-1v2h1v-2zM12 10h-1v2h1v-2z",
+	"log": "M6 6h1v-2h-1v2zM14 11v1h-1v1h-1v1h-9v-6h-2v-6h2v-2h12v11h-1zM2 3v4h1v-3h1v-1h-2zM14 1h-10v1h9v6h-9v5h7v-3h3v-9zM8 6v-2h-1v-1h-1v1h-1v2h1v1h1v-1h1zM11 4v1h1v-2h-2v1h-1v2h1v1h2v-1h-2v-2h1z",
+	"mic": "M1 0v3h1v1h1v1h1v1h1v2h1v-1h1v-1h1v-1h1v-1h-2v-1h-1v-1h-1v-1h-1v-1zM8 8h-1v1h-1v2h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-2v1h-1v1h-1zM8 11v2h1v1h4v-1h1v-1h1v-4h-1v-1h-2v1h-1v1h-1v1h-1v1z",
+	"save": "M12 11v1h-1v1h-8v-12h10v10h-1zM8 12h1v-2h-1v2zM5 12h2v-2h-2v2zM11 2h-6v3h6v-3z",
+	"play_prev": "M12 2h-2v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1h2zM3 12h2v-10h-2v10z",
+	"min": "M3 8h10v-1h-10v1z",
+	"file": "M12 11v1h-1v1h-8v-12h10v10h-1z",
+	"writing": "M7 13v1h-5v-12h1v-1h1v-1h1v1h1v1h1v1h7v10h-7zM6 4h-3v1h3v-1zM6 11h-3v2h3v-2zM12 5h-5v1h4v1h-4v1h4v2h-4v1h5v-6z",
+	"power": "M4 3h8v-2h-8v2zM2 9h2v-6h-2v6zM4 11h2v-2h-2v2zM7 13h2v-6h-2v6zM10 11h2v-2h-2v2zM12 9h2v-6h-2v6z",
+	"copy": "M12 12v1h-1v1h-7v-2h-2v-12h9v2h2v10h-1zM12 3h-1v7h-1v1h-1v1h-4v1h5v-1h1v-1h1v-8z",
+	"close": "M7 8h2v-2h-2v2zM6 9h1v-1h-1v1zM5 10h1v-1h-1v1zM4 11h1v-1h-1v1zM3 12h1v-1h-1v1zM3 3h1v-1h-1v1zM4 4h1v-1h-1v1zM5 5h1v-1h-1v1zM6 6h1v-1h-1v1zM9 9h1v-1h-1v1zM10 10h1v-1h-1v1zM11 11h1v-1h-1v1zM12 12h1v-1h-1v1zM9 6h1v-1h-1v1zM10 5h1v-1h-1v1zM11 4h1v-1h-1v1zM12 3h1v-1h-1v1z",
+	"table": "M1 13v-12h14v12h-14zM5 2h-3v2h3v-2zM5 5h-3v2h3v-2zM5 8h-3v2h3v-2zM14 2h-8v2h8v-2zM14 5h-8v2h8v-2zM14 8h-8v2h8v-2z",
+	"b": "M13 9v2h-1v1h-1v1h-8v-12h8v1h1v1h1v2h-1v4h1zM10 4h-1v-1h-3v3h3v-1h1v-1zM10 9h-1v-1h-3v3h3v-1h1v-1z",
+	"question": "M3 11h2v-3h-2v3zM5 13h6v-2h-6v2zM11 11h2v-4h-2v4zM11 7h-2v-1h-2v-3h2v2h2zM7 2h2v-2h-2v2z",
+	"star": "M4 8v1h5v1h1v2h1v2h1v-5h3v-1h-1v-1h-1v-1h-1v-6h-1v1h-1v1h-2v-1h-1v-1h-1v3h1v3h-1v1h-1v1zM6 13h3v-1h-3v1zM5 11h3v-1h-3v1zM2 3h3v-1h-3v1zM3 5h3v-1h-3v1z",
+	"max": "M3 12v-10h10v10h-10zM12 3h-8v8h8v-8z",
+	"refresh": "M11 9h2v3h-10v-4h-2v-1h1v-1h1v-1h2v1h1v1h1v1h-2v2h6zM11 8h2v-1h1v-1h1v-1h-2v-4h-10v3h2v-1h6v2h-2v1h1v1h1z",
+	"arrow_5_v": "M8 5v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h2v6h2v-6zM10 3v6h-2v1h1v1h1v1h2v-1h1v-1h1v-1h-2v-6z",
+	"link_0": "M1 11h10v-4h-2v2h-6v-4h1v-2h-3zM5 7h2v-2h6v4h-1v2h3v-8h-10z",
+	"arrow_1_w": "M11 2h-2v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1h2v-2h-1v-1h-1v-1h-1v-2h1v-1h1v-1h1z",
+	"filter": "M10 14h-10v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-8h1v1h1v1h1v1h1v5h1v1h1v1h1v1h1v1h1v1h1v1h-2v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-5h-1v-1h-1v6h-1v1h-1v1h-1v1h-1v1h7z",
+	"insert_before": "M1 10h5v1h1v-1h1v-1h1c0-0.30 0-0.70 0-1-2 0-4 0-6 0 0-1.30 0-2.70 0-4-0.70 0-1.30 0-2 0 0 2 0 4 0 6zM5 7h3v-3h-3v3zM9 7h6v-3h-6v3z",
+	"arrow_1_s": "M13 10v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1v1h-1v2h2v-1h1v-1h1v-1h2v1h1v1h1v1z",
+	"hide": "M3 1v12h8v-1h1v-1h1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1zM5 2h2v-1h-2v1zM8 2h2v-1h-2v1zM11 1v1h1v1h1v-2zM12 6h1v-2h-1v2zM12 9h1v-2h-1v2z",
+	"t": "M2 13h12v-4h-1v1h-1v1h-3v-9h3v-1h-8v1h3v9h-3v-1h-1v-1h-1z",
+	"firewall": "M15 12v1h-3v1h-8v-1h-3v-1h-1v-7h1v-2h1v-1h2v-1h2v-1h4v1h2v1h2v1h1v2h1v7h-1zM15 6h-1v-2h-1v-1h-2v-1h-2v-1h-1v6c-2.30 0-4.70 0-7 0 0 1.30 0 2.70 0 4h1v1h3v1c1 0 2 0 3 0 0-2 0-4 0-6h7v-1z",
+	"arrow_5_h": "M6 6h-1v1h-1v1h-1v2h1v1h1v1h1v-2h6v-2h-6zM4 5h6v2h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v2h-6z",
+	"rename": "M2 9v-4h12v4h-12zM13 6h-10v2h10v-2zM8 12v-1h1v-8h-1v-1h3v1h-1v8h1v1z",
+	"arrow_1_n": "M3 4v2h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1v-2h-2v1h-1v1h-1v1h-2v-1h-1v-1h-1v-1z",
+	"arrow_1_e": "M5 12h2v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2v2h1v1h1v1h1v2h-1v1h-1v1h-1z",
+	"wrap": "M1 13h14v-2h-14v2zM1 9h5v-2h-5v2zM1 5h5v-2h-5v2zM13 9h2v-6h-4v-2h-1v1h-1v1h-1v2h1v1h1v1h1v-2h2z",
+	"die": "M15 9v2h-2v1h-1v2h-2v-2h-1v2h-2v-2h-1v2h-2v-2h-1v-1h-2v-2h2v-1h-2v-2h2v-1h-2v-2h2v-1h1v-2h2v2h1v-2h2v2h1v-2h2v2h1v1h2v2h-2v1h2v2h-2v1h2zM11 4h-6v6h6v-6zM6 9h4v-4h-4v4z",
+	"keep_end": "M1 4h14v-2h-14v2zM1 8h5v-2h-5v2zM1 12h5v-2h-5v2zM10 12h2v-4h2v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h2z",
+	"lib": "M1 11h2v-10h-2v10zM4 11h2v-10h-2v10zM7 13h2v-12h-2v12zM10 11h2v-10h-2v10zM13 9h2v-8h-2v8z",
+	"mail": "M1 10h2v-1h2v-1h6v1h2v1h2v-8h-14zM1 12h14v-1h-3v-1h-2v-1h-4v1h-2v1h-3z",
+	"italic": "M4 13h8v-2h-3v-4h-1v-4h3v-2h-8v2h3v4h1v4h-3z",
+	"insert_after": "M1 10c0.70 0 1.30 0 2 0 0-1.30 0-2.70 0-4 2 0 4 0 6 0 0-0.30 0-0.70 0-1h-1v-1h-1v-1h-1v1h-5c0 2 0 4 0 6zM5 10h3v-3h-3v3zM9 10h6v-3h-6v3z",
+	"translate": "M9 10v1h3v-3h-1v2zM5 7h1v-2h2v-1h-3zM9 7h4v-1h-3v-1h2v-1h-2v-1h3v-1h-4zM6 12v1h-1v-1h-2v-3h2v-1h1v1h2v3h-2zM5 10h-1v1h1v-1zM7 10h-1v1h1v-1z",
+	"spec": "M2 9h1v-4h-1v4zM4 12h1v-10h-1v10zM6 10h1v-6h-1v6zM8 11h1v-8h-1v8zM10 8h1v-2h-1v2zM12 9h1v-4h-1v4z",
+	"download": "M2 5h2v-2h8v2h2v-4h-12zM4 8h3v4h2v-4h3v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1z",
+	"apache": "M1 0v2h1v2h1v2h1v2h1v1h1v1h1v1h1v1h2v1h2v1h3v-3h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v-1h-2v-1h-2v-1h-1v-2h-1v-1h-1z",
+	"function": "M2 6h5v-5h-5v5zM2 13h5v-5h-5v5zM9 6h5v-5h-5v5zM9 10h-1v1h1v1h1v1h1v1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-1v-1h-1v1h-1v1h-1z",
+	"tile": "M2 6h5v-5h-5v5zM2 13h5v-5h-5v5zM9 13h5v-5h-5v5zM9 6h5v-5h-5v5z",
+	"spec_boost": "M1 4h2v-4h-2v4zM4 0v10h-2v1h1v1h1v1h2v-1h1v-1h1v-1h-2v-10zM7 8h2v-8h-2v8zM10 3h2v-3h-2v3zM13 5h2v-5h-2v5z",
+	"lrc": "M0 0v4h2v10h4v-2h-2v-12zM8 14h8v-14h-10v2h8v10h-6zM6 10h7v-2h-7v2zM6 6h5v-2h-5v2z",
+	"export": "M8 0v1h-5v12h6v-4h5v2h-1v1h-1v1h-1v1h-9v-14zM6 3v3h4v2h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-1v-1h-1v2z",
+	"info": "M1 12h2v-8h-2v8zM3 14h10v-2h-10v2zM13 12h2v-8h-2v8zM3 4h4v-2h-4v2zM9 4h4v-2h-4v2zM7 2h2v-2h-2v2zM7 11h2v-3h-2v3zM7 7h2v-2h-2v2z",
+	"image": "M1 12v-10h14v10h-14zM14 6h-1v1h-1v1h-1v-1h-1v-1h-2v1h-1v-1h-1v-1h-2v-1h-2v7h12v-5zM3 10h2v-2h-2v2z",
+	"tar": "M12 11v1h-1v1h-8v-5h-2v-8h8v1h4v10h-1zM8 1h-6v6h6v-6zM3 6h4v-1h-1v-3h-2v3h-1z",
+	"nginx": "M13 11v1h-2v1h-2v1h-2v-1h-2v-1h-2v-1h-2v-8h2v-1h2v-1h2v-1h2v1h2v1h2v1h2v8h-2zM12 5h-3v1h-1v1h-1v1h-1v-3h-2v4h3v-1h1v-1h1v-1h1v3h2v-4z",
+	"maven": "M1 14h14v-2h-14v2zM1 10h1v-1h1v-1h1v1h1v1h1v-6h-1v2h-1v-1h-1v1h-1v-2h-1zM7 10h1v-3h1v3h1v-4h-1v-2h-1v2h-1zM11 4v6h1v-1h1v-1h1v2h1v-6h-1v1h-1v1h-1v-2zM1 2h14v-2h-14v2z",
+	"arrow_2_w": "M15 9v-4h-7v-4h-1v1h-1v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1h1v1h1v-4z",
+	"to_top": "M9 2h-2v4h-3v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h-3zM12 11h-8v1h8z",
+	"clock": "M2 11h2v-8h-2v8zM4 13h8v-2h-8v2zM12 11h2v-8h-2v8zM4 3h8v-2h-8v2zM7 10h2v-3h1v-1h1v-2h-2v1h-1v1h-1z",
+	"duplicate": "M3 14v-3h-2v-11h11v1h3v13h-12zM13 3h-1v8h-7v1h8v-9z",
+	"girl": "M11 6v1h1v4h-1v1h-1v1h-4v-1h-1v-1h-1v-4h1v-1h2c0-0.70 0-1.30 0-2-0.70 0-1.30 0-2 0 0-0.30 0-0.70 0-1 0.70 0 1.30 0 2 0v-2h2v2c0.70 0 1.30 0 2 0 0 0.30 0 0.70 0 1-0.70 0-1.30 0-2 0 0 0.70 0 1.30 0 2h2zM7 7v1h-1v2h1v1h2v-1h1v-2h-1v-1h-2z",
+	"list": "M2 12h2v-2h-2v2zM5 12h9v-2h-9v2zM2 8h2v-2h-2v2zM5 8h9v-2h-9v2zM2 4h2v-2h-2v2zM5 4h9v-2h-9v2z",
+	"arrow_2_s": "M6 13h4v-7h4v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1v1h-1v1h-1v1h4z",
+	"plus": "M3 8h4v4h2v-4h4v-2h-4v-4h-2v4h-4z",
+	"pause": "M4 12h3v-10h-3v10zM9 12h3v-10h-3v10z",
+	"tool": "M1 0v3h1v1h1v1h2v1h1v2h-4v1h-1v2h2v-1h2v2h-1v2h2v-1h1v-4h2v1h1v1h1v1h1v1h1v1h2v-2h-1v-1h-1v-1h-1v-1h-1v-1h-1v-2h1v-1h1v-1h1v-1h1v-1h1v-2h-2v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-2h-1v-1h-1v-1z",
+	"trash": "M7 13h2v-2h5v-2h-12v2h5zM3 8h2v-6h6v6h2v-8h-10zM6 8h4v-5h-4v5z",
+	"volume": "M0 9h3v1h1v1h1v1h1v1h2v-12h-2v1h-1v1h-1v1h-1v1h-3zM9 10h1v-1h1v-4h-1v-1h-1zM9 13v-2h2v-1h1v-1h1v-4h-1v-1h-1v-1h-2v-2h2v1h1v1h1v1h1v6h-1v1h-1v1h-1v1z",
+	"disk": "M14 9c0 0.30 0 0.70 0 1h-1v1h-1v1h-8v-1h-1v-1c-0.30 0-0.70 0-1 0 0-0.30 0-0.70 0-1-0.30 0-0.70 0-1 0 0-2.30 0-4.70 0-7h14c0 2.30 0 4.70 0 7-0.30 0-0.70 0-1 0zM14 3h-12v4h12v-4zM3 6h7v-2h-7v2zM11 6h2v-2h-2v2z",
+	"task": "M5 14h6v-4h-6v4zM12 12v-3h-8v3h-3v-12h14v12h-3zM5 2h-2v2h2v-2zM5 5h-2v2h2v-2zM13 2h-7v2h7v-2zM13 5h-7v2h7v-2z",
+	"transfer": "M3 8v1h1v1h1v1h1v1h1v-11h-2v7zM9 12v-11h1v1h1v1h1v1h1v1h-2v7z",
+	"remote_control": "M7 6v6h-7v-10h2v3h1v-1h1v-1h1v-1h2v2h-1v1h-1v1h2zM2 8v2h3v-2h-3zM9 12h7v-4h-2v2h-3v-6h3v2h2v-4h-7z",
+	"info_0": "M3 14h10v-2h-10v2zM1 12h2v-10h-2v10zM3 2h10v-2h-10v2zM13 12h2v-10h-2v10zM7 8h2v-5h-2v5zM7 11h2v-2h-2v2z",
+	"arrow_2_n": "M10 1h-4v7h-4v1h1v1h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-4z",
+	"success": "M3 8h2v-1h1v-1h2v1h1v1h1v1h1v1h1v1h2v-2h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1z",
+	"arrow_2_e": "M2 5v4h7v4h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v4z",
+	"frame": "M2 12v-10h12v10h-12zM5 3h-2v5h2v-5zM13 3h-7v5h7v-5zM13 9h-10v2h10v-2zM9 7h3v-3h-1v2h-2z",
+	"full": "M0 13h4v-2h-2v-2h-2zM12 13h4v-4h-2v2h-2zM0 5h2v-2h2v-2h-4zM14 5h2v-4h-4v2h2z",
+	"arrow_4_en": "M13 12v-6h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1c-0.70 0-1.30 0-2 0 0 0.70 0 1.30 0 2h1v1h1v1h1v1h1v1h1v1h1v1h-1v1h-1v1h6z",
+	"private": "M3 2h2v-2h-2v2zM1 2h2.10l-0.10 10h-2zM3 14h10v-2h-10v2zM13 12h2v-2h-2v2zM4 11h4v-2h-4v2zM4 8h2v-2h-2v2zM14 6v2h-1v1h-4v-1h-1v-2h-1v-5h1v-1h6v1h1v5h-1zM10 7h2v-1h-2v1zM13 2h-4v2h4v-2z",
+	"memory": "M16 8v3h-16v-3h1v-1h-1v-6h8v1h2v-1h6v6h-1v1h1zM5 5h-2v3h2v-3zM9 5h-2v3h2v-3zM13 5h-2v3h2v-3z",
+	"code": "M0 8h1v1h1v1h1v1h2v-1h-1v-1h-1v-1h-1v-2h1v-1h1v-1h1v-1h-2v1h-1v1h-1v1h-1zM16 8h-1v1h-1v1h-1v1h-2v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h2v1h1v1h1v1h1zM9 13h1v-3h-1v-4h-1v-3h-1v-2h-1v3h1v4h1v3h1z",
+	"arrow_4_es": "M13 2h-6v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1c0 0.70 0 1.30 0 2 0.70 0 1.30 0 2 0v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v1h1v1h1v-6z",
+	"hammer": "M1 8v1h1v1h1v1h1v1h1v1h5v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v2h-1v1h-1v1h-1v-1h-1v-1h-1v1h-1v1z",
+	"import": "M8 0v1h-5v12h6v-4h5v2h-1v1h-1v1h-1v1h-9v-14zM10 8h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1v2h4v3h-4z",
+	"import_0": "M1 5h2v-3h10v3h2v-5h-14zM2 9h6v-3h-2v-1h1v-1h1v-1h2v1h1v1h1v1h-2v5h-8z",
+	"volume_mute": "M0 9h3v1h1v1h1v1h1v1h2v-12h-2v1h-1v1h-1v1h-1v1h-3zM9 11h2v-1h1v-1h1v1h1v1h2v-2h-1v-1h-1v-2h1v-1h1v-2h-2v1h-1v1h-1v-1h-1v-1h-2v2h1v1h1v2h-1v1h-1z",
+	"book": "M7 0v1h-7v10h2v-8h12v8h2v-10h-7v-1zM3 13h4v-9h-4v9zM9 13h4v-9h-4v9z",
+	"link": "M1 6h6v-6h-6v6zM3 7v5h5v-2h-3v-3zM9 14h6v-6h-6v6zM11 7h2v-5h-5v2h3z",
+	"back": "M4 4h7v5h-4v-3h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v-3h6v-9h-9z",
+	"full_exit": "M2 13v-2h-2v-2h4v4zM14 13h-2v-4h4v2h-2zM0 5h4v-4h-2v2h-2zM12 5h4v-2h-2v-2h-2z",
+	"video": "M0 13h16v-13h-2v11h-12v-9h10v-2h-12zM6 10h1v-1h1v-1h1v-1h1v-1h-1v-1h-1v-1h-1v-1h-1z",
+	"paste": "M12 11v1h-1v1h-8v-4h-1v-9h7v1h4v10h-1zM12 2h-3v5h-1v1h-1v1h-3v3h6v-1h1v-1h1v-8z",
+	"to_bottom": "M1 14h14v-2h-14v2zM1 9h14v-2h-14v2zM1 4h3v2h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v2h-3zM8 4h7v-2h-7v2z",
+	"delete": "M12 8v2h-1v2h-1v1h-6v-5h-3v-2h3v-5h6v1h1v2h1v2h3v2h-3zM10 4h-1v-1h-3v3h4v-2zM10 8h-4v3h3v-1h1v-2z",
+	"boy": "M8 13c0 0 0-1.70 0-2 0.70 0 1.30 0 2 0v-1h-1v-1h-1v1h-4v-1h-1v-1h-1v-5h1v-1h1v-1h5v1h1v1h1v4h-1v1h1v1h1c0-0.70 0-1.30 0-2 0.30 0 2 0 2 0v6h-6zM9 4h-1v-1h-3v1h-1v3h1v1h3v-1h1v-3z",
+	"random": "M11 10v2h2v1h-1v1h-1v1h-2v-1h-1v-1h-1v-1h2v-2h-4v-4h-5v-2h5v-2h-2v-1h1v-1h1v-1h2v1h1v1h1v1h-2v2h4v4h5v2h-5zM9 6h-2v2h2v-2z",
+	"database": "M5 14h6v-1h2v-1h2v-2h-2v-1h-2v-1h-6v1h-2v1h-2v2h2v1h2zM1 9h2v-1h2v-1h6v1h2v1h2v-3h-2v-1h-2v-1h-6v1h-2v1h-2zM1 5h2v-1h2v-1h6v1h2v1h2v-3h-2v-1h-2v-1h-6v1h-2v1h-2z",
+	"repeat": "M6 4v-2h-4v10h4v2h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v2h-2v-6zM7 4h1v1h1v1h1v-2h2v6h-2v2h4v-10h-4v-2h-1v1h-1v1h-1z",
+	"play_list": "M1 14h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1zM6 12h9v-2h-9v2zM1 7h14v-2h-14v2zM1 2h14v-2h-14v2z",
+	"play_0": "M6 12c0.70 0 1.30 0 2 0v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1c-0.70 0-1.30 0-2 0 0 3.30 0 6.70 0 10z",
+	"lang": "M1 14v-2h-1v-12h14v1h2v13h-15zM7 6h-2v-1h-1v1h-2v3h2v1h1v-1h2v-3zM12 6h-3v-1h2v-1h-2v-1h3v-1h-4v5h4v-1zM15 2h-1v10h-12v1h13v-11zM3 8h1v-1h-1v1zM5 8h1v-1h-1v1z",
+	"arrow_3_w": "M10 8v-2h1v-1h1v-1h1v-2h-2v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1h2v-2h-1v-1h-1v-1zM8 12v-2h-1v-1h-1v-1h-1v-2h1v-1h1v-1h1v-2h-2v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1z",
+	"resources": "M1 8v4h2v2h4v-6zM1 6h6v-6h-4v2h-2zM9 8v6h4v-2h2v-4zM9 6h6v-4h-2v-2h-4z",
+	"terminal": "M1 12v-10h14v10h-14zM6 6h-1v-1h-1v-1h-1v1h1v1h1v1h-1v1h-1v1h1v-1h1v-1h1v-1zM13 4h-6v1h6v-1z",
+	"message": "M15 11v1h-1v1h-12v-1h-1v-1h-1v-7h1v-1h1v-1h1v-1h1v-1h1v1h1v1h8v1h1v1h1v7h-1zM14 4h-8v-1h-1v-1h-1v1h-1v1h-1v7h12v-7zM4 10h8v-2h-8v2zM4 7h4v-2h-4v2z",
+	"arrow_3_s": "M7 9h2v1h1v1h1v1h2v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1v1h-1v2h2v-1h1v-1h1zM3 7h2v-1h1v-1h1v-1h2v1h1v1h1v1h2v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1h-1v1h-1v1h-1z",
+	"home": "M7 1h-4v5h-2v1h1v1h1v1h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h-2v-5h-4v3h-2z",
+	"arrow_3_n": "M9 4h-2v-1h-1v-1h-1v-1h-2v2h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1v-2h-2v1h-1v1h-1zM13 6h-2v1h-1v1h-1v1h-2v-1h-1v-1h-1v-1h-2v2h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1z",
+	"popup": "M7 13h-5v-12h12v5h-2v-3h-8v8h3zM8 13h6v-6h-2v2h-1v-1h-1v-1h-1v-1h-2v2h1v1h1v1h1v1h-2z",
+	"arrow_4_wn": "M3 12h6v-1h-1v-1h-1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1c0-0.70 0-1.30 0-2-0.70 0-1.30 0-2 0v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v6z",
+	"money": "M7 1v2h-3v1h3v2h-2v-1h-1v1h-1v1h1v1h1v-1h2v2h-1v1h-1v1h-1v1h-1v1h2v-1h1v-1h1v-1h2v1h1v1h1v1h2v-1h-1v-1h-1v-1h-1v-1h-1v-2h3v-1h-3v-2h2v1h1v-1h1v-1h-1v-1h-1v1h-2v-2z",
+	"unlink": "M4 0v2h1v2h1v2h1v2h1v2h1v2h1v2h2v-2h-1v-2h-1v-2h-1v-2h-1v-2h-1v-2h-1v-2zM4 3h-3v8h6v-2h-4v-4h1zM9 3v2h4v4h-1v2h3v-8z",
+	"arrow_4_ws": "M3 2v6h1v-1h1v-1h1v1h1v1h1v1h1v1h1v1h1v1c0.70 0 1.30 0 2 0 0-0.70 0-1.30 0-2h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h-6z",
+	"folder_add": "M7 10v1h-1v1h-4v-10h12v8h-7zM13 5h-1v-1h-1v1h-1v1h1v1h1v-1h1v-1z",
+	"user": "M6 14h4v-2h2v-4h-2v-2h-4v2h-2v4h2zM3 5h10v-2h2v-3h-14v3h2z",
+	"arrow_3_e": "M6 6v2h-1v1h-1v1h-1v2h2v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1h-2v2h1v1h1v1zM8 2v2h1v1h1v1h1v2h-1v1h-1v1h-1v2h2v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1v-1h-1v-1h-1v-1z"
+}
--- a/src/assets/img/default.png
+++ b/src/assets/img/default.png
--- a/src/assets/img/input.png
+++ b/src/assets/img/input.png
--- a/src/assets/img/link.png
+++ b/src/assets/img/link.png
--- a/src/assets/style/timi-web.less
+++ b/src/assets/style/timi-web.less
@ -0,0 +1,213 @@
+@import url(~/assets/style/variable);
+
+*::-webkit-scrollbar {
+	width: 10px !important;
+	height: 10px !important;
+	cursor: var(--tui-cur-default);
+	background: #CFD2E0;
+}
+
+*::-webkit-scrollbar-corner {
+	background: #CFD2E0;
+	cursor: var(--tui-cur-default);
+}
+
+*::-webkit-scrollbar-thumb {
+	cursor: var(--tui-cur-default);
+	background: #525870;
+}
+
+*::selection {
+	color: #FFF;
+	background: #525870 !important;
+}
+
+html {
+	cursor: var(--tui-cur-default);
+}
+
+body {
+	width: 100% !important;
+	margin: 0;
+	padding: 0;
+	overflow-x: hidden !important;
+	overflow-y: scroll !important;
+	font-family: var(--tui-font);
+	-webkit-text-size-adjust: 100%;
+
+	&::-webkit-scrollbar {
+		background: transparent;
+	}
+
+	#root {
+		display: flex;
+		position: relative;
+		justify-content: center;
+	}
+}
+
+a {
+	color: @tuiColors[blue];
+	cursor: var(--tui-cur-pointer);
+	text-decoration: none;
+
+	&:hover {
+		text-decoration: underline;
+	}
+}
+
+a.underline {
+	text-decoration: underline;
+}
+
+img {
+	display: block;
+}
+
+input, select, textarea {
+	resize: none;
+	outline: none;
+	display: block;
+	background: transparent;
+}
+
+label,
+select,
+input[type="radio"],
+input[type="file"],
+input[type="checkbox"] {
+	cursor: var(--tui-cur-default);
+}
+
+textarea,
+input[type="text"],
+input[type="date"],
+input[type="email"],
+input[type="password"] {
+	cursor: var(--tui-cur-text);
+	-webkit-appearance: none;
+
+	&:-webkit-autofill,
+	&:-webkit-autofill:hover,
+	&:-webkit-autofill:focus,
+	&:-webkit-autofill:active {
+		-webkit-background-clip: text;
+	}
+}
+
+textarea {
+	tab-size: 4;
+	font-family: var(--tui-font);
+}
+
+.gray-filter {
+	filter: grayscale(1);
+	-webkit-filter: grayscale(1);
+}
+
+.bold {
+	font-weight: bold !important;
+}
+
+.italic {
+	font-style: italic !important;
+}
+
+.delete {
+	text-decoration: line-through !important;
+}
+
+.underline {
+	text-decoration: underline !important;
+}
+
+.not-underline {
+	text-decoration: none !important;
+}
+
+.not-underline:hover {
+	text-decoration: none !important;
+}
+
+/* 文本适当对齐 */
+.justify-text {
+	text-align: justify;
+}
+
+/* 模糊玻璃效果：白色 */
+.glass-white {
+	color: var(--eui-black, #000);
+	background: rgba(255, 255, 255, .8);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+}
+
+/* 模糊玻璃效果：黑色 */
+.glass-black {
+	color: var(--eui-white, #FFF);
+	background: rgba(0, 0, 0, .8);
+	backdrop-filter: blur(10px);
+	-webkit-backdrop-filter: blur(10px);
+}
+
+.word-space {
+	display: inline-block;
+	margin: 0 .5rem;
+}
+
+/* 强制换行 */
+.break-all,
+.break-all textarea {
+	word-wrap: break-word;
+	word-break: break-all;
+	white-space: normal;
+}
+
+/* 文本溢出截断 */
+.clip-text {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+/* 禁止选择 */
+.diselect {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.selectable {
+	-webkit-touch-callout: default;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+.ir-default,
+.ir-pixelated {
+	image-rendering: pixelated;
+}
+
+.ir-auto {
+	image-rendering: auto;
+}
+
+.ir-smooth {
+	image-rendering: smooth;
+}
+
+.cur-default {
+	cursor: var(--tui-cur-default);
+}
+
+.cur-pointer {
+	cursor: var(--tui-cur-pointer);
+}
+
+.cur-text {
+	cursor: var(--tui-cur-text);
+}
--- a/src/assets/style/variable.less
+++ b/src/assets/style/variable.less
@ -0,0 +1,58 @@
+@tuiColors: {
+	red: #F33;
+	pink: #FF7A9B;
+	black: #111;
+	blue: #006EFF;
+	light-blue: #00A6FF;
+	green: GREEN;
+	orange: #E7913B;
+	gray: #666;
+	light-gray: #AAA;
+	dark-white: #E7EAEF;
+	yellow: #FF0;
+	purple: PURPLE;
+}
+
+:root {
+	--tui-font: SimSun, PingFang SC, Microsoft YaHei, Arial Regular;
+	--tui-cur-default: url("../img/default.png"), default;
+	--tui-cur-pointer: url("../img/link.png"), pointer;
+	--tui-cur-text: url("../img/input.png"), text;
+
+	--tui-shadow: 3px 3px 0 var(--tui-shadow-color);
+	--tui-bezier: cubic-bezier(.19, .1, .22, 1);
+	--tui-shadow-color: rgba(0, 0, 0, .2);
+
+	each(@tuiColors, {
+		--tui-@{key}: @value;
+	});
+	--tui-border: 1px solid var(--tui-light-gray);
+
+	/* 等级对应颜色 */
+	--tui-level-0: #BFBFBF;
+	--tui-level-1: #BFBFBF;
+	--tui-level-2: #95DDB2;
+	--tui-level-3: #92D1E5;
+	--tui-level-4: #FFB37C;
+	--tui-level-5: #FF6C00;
+	--tui-level-6: #F00;
+	--tui-level-7: #E52FEC;
+	--tui-level-8: #841CF9;
+	--tui-level-9: #151515;
+
+	--tui-page-padding: .5rem 1rem;
+}
+
+// 字体颜色
+each(@tuiColors, {
+	.@{key} {
+		color: @value;
+	}
+});
+
+// 背景颜色
+each(@tuiColors, {
+	.bg-@{key} {
+		background: @value;
+	}
+});
--- a/src/components/background-effect/flower-fall/assets/petal.png
+++ b/src/components/background-effect/flower-fall/assets/petal.png
--- a/src/components/background-effect/flower-fall/index.ts
+++ b/src/components/background-effect/flower-fall/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const BEFlowerFall = Toolkit.withInstall(view);
+export default BEFlowerFall;
--- a/src/components/background-effect/flower-fall/index.vue
+++ b/src/components/background-effect/flower-fall/index.vue
@ -0,0 +1,155 @@
+<template>
+	<div class="tui-background tui-be-flower-fall">
+		<div :ref="el => fillNodes(el as HTMLElement, i - 1)" class="leaf" v-for="i in leafSize" :key="i"></div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Toolkit from "~/utils/Toolkit";
+import Resizer from "~/utils/Resizer";
+
+defineOptions({
+	name: "BEFlowerFall"
+});
+
+/** 叶子对象 */
+class Leaf {
+
+	/** 横轴 */
+	x = 0;
+
+	/** 纵轴 */
+	y = 0;
+
+	/** 背景偏移 */
+	bgI = 0;
+
+	/** 跳跃状态 */
+	jump = false;
+
+	/** 透明度 */
+	opacity = 1;
+}
+
+const docEl = document.documentElement;
+const leafF = ref<number>(0);
+const leafs: Leaf[] = [];
+const leafEls: HTMLElement[] = [];
+const leafSize = 16;
+const leafTimer = ref();
+const leafPause = ref<boolean>(false);
+const leafVector = ref<number>(0);
+
+const fillNodes = (el: HTMLElement, index: number) => {
+	if (el) {
+		leafEls[index] = el;
+	}
+};
+
+const onResize = (width: number) => leafPause.value = width < 1200;
+
+onMounted(() => {
+
+	// 生成叶子
+	for (let i = 0; i < leafSize; i++) {
+		leafs[i] = new Leaf();
+		leafs[i].x = Toolkit.random(0, docEl.clientWidth);
+		leafs[i].y = Toolkit.random(-docEl.clientHeight, -32);
+	}
+	// 掉落叶子
+	clearInterval(leafTimer.value);
+	leafTimer.value = setInterval(() => {
+		// 随机上方位置向下飘落，维护一个向量值作为风向，可以向左向右
+		//
+		// 暂定 2 秒刷新风力向量，向量偏转范围 -10 - +10，分别表示左右向
+		// -5  -  +5 有固定 10% 几率增加或减小，同时增减或同时无增减都不改变向量
+		// -10 -  -5 有 0%, 2%, 4%... 几率再次减小
+		// +5  - +10 有 8%, 6%, 4%... 几率再次增加
+		// 降低垂直飘落的几率，扩大向量影响范围
+
+		if (!leafPause.value) {
+			if (leafF.value % 10 === 0) {
+				// 刷新风力向量
+				let add = false,
+					sub = false;
+				if (-5 <= leafVector.value) {
+					sub = Math.random() < 0.1;
+					if (5 < leafVector.value) {
+						add = Math.random() < (10 - leafVector.value) / 50;
+					}
+				}
+				if (leafVector.value <= 5) {
+					add = Math.random() < 0.1;
+					if (leafVector.value < -5) {
+						sub = Math.random() < (leafVector.value + 10) / 50;
+					}
+				}
+				if (add !== sub) {
+					leafVector.value = leafVector.value + (add ? 1 : -1);
+				}
+			}
+			// 叶子飘落
+			for (let i = 0; i < leafSize; i++) {
+				const leaf = leafs[i];
+
+				if (leafVector.value < 0) {
+					leaf.x += Toolkit.random(leafVector.value * 4 - 10, -10);
+				} else {
+					if (leafVector.value === 0) {
+						leaf.x += Toolkit.random(-8, 8);
+					} else {
+						leaf.x += Toolkit.random(10, 10 + leafVector.value * 4);
+					}
+				}
+				// 跳跃机制
+				if (leafVector.value !== 0 && leaf.jump) {
+					leaf.y += Toolkit.random(-12, Math.abs(leafVector.value));
+					leaf.jump = Math.random() < 0.4; // 二次跳跃几率
+				} else {
+					leaf.y += Toolkit.random(10 + Math.abs(leafVector.value) * 5, 10);
+					leaf.jump = Math.random() < 0.03; // 跳跃几率
+				}
+				// 操作 DOM
+				const el = leafEls[i];
+				el.style.top = leaf.y + "px";
+				el.style.left = leaf.x + "px";
+				el.style.backgroundPosition = "0 -" + Toolkit.random(0, 3) * 32 + "px";
+				el.style.opacity = leaf.opacity.toString();
+
+				// y 掉出最大值或没有掉出最大值 X 却不在宽度内的，视为掉出屏幕，重新飘落
+				if ((0 < leaf.y && (leaf.x < 0 || docEl.clientWidth < leaf.x)) || docEl.clientHeight < leaf.y) {
+					// 根据风向反向偏移起始 X 轴
+					const offset = -leafVector.value * 100;
+					// 飘落越出屏幕，重新计算位置
+					leafs[i].x = Toolkit.random(offset, docEl.clientWidth + offset);
+					leafs[i].y = Toolkit.random(-docEl.clientHeight * 0.5, -32);
+					// 随机透明度
+					leafs[i].opacity = Toolkit.random(40, 100) * 0.01;
+				}
+			}
+			// 帧循环
+			leafF.value++;
+		}
+	}, 100);
+
+	onResize(Resizer.getWidth());
+	Resizer.addListener("TUI_BE_FLOWER_FALL", onResize);
+});
+onUnmounted(() => Resizer.removeListener("TUI_BE_FLOWER_FALL"));
+</script>
+
+<style lang="less" scoped>
+@import "../style";
+
+.tui-be-flower-fall {
+	image-rendering: pixelated;
+
+	.leaf {
+		width: 32px;
+		height: 32px;
+		position: absolute;
+		background: url("assets/petal.png") no-repeat;
+		image-rendering: pixelated;
+	}
+}
+</style>
--- a/src/components/background-effect/style.less
+++ b/src/components/background-effect/style.less
@ -0,0 +1,8 @@
+.tui-background {
+	width: 100vw;
+	height: 100vh;
+	z-index: -1;
+	position: fixed;
+	overflow: hidden;
+	background-size: cover;
+}
--- a/src/components/captcha/index.ts
+++ b/src/components/captcha/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const Captcha = Toolkit.withInstall(view);
+export default Captcha;
--- a/src/components/captcha/index.vue
+++ b/src/components/captcha/index.vue
@ -0,0 +1,46 @@
+<template>
+	<img
+		class="tui-captcha ir-pixelated"
+		v-if="src"
+		:width="width"
+		:height="height"
+		:src="src"
+		alt="验证码"
+		@click="update()"
+	/>
+</template>
+
+<script lang="ts" setup>
+import Toolkit from "~/utils/Toolkit";
+
+defineOptions({
+	name: "Captcha"
+});
+
+const props = withDefaults(defineProps<{
+	width: number,
+	height: number,
+	from: string,
+	api: string,
+}>(), {});
+const { width, height, from, api } = toRefs(props);
+
+const src = ref("");
+function update() {
+	src.value = `${api.value}?from=${from.value}&width=${width.value}&height=${height.value}&r=${Toolkit.random(0, 999999)}`;
+}
+onMounted(update);
+
+defineExpose({
+	update
+});
+</script>
+
+<style lang="less" scoped>
+.tui-captcha {
+	cursor: var(--tui-cur-pointer);
+	border: 1px solid gray;
+	display: block;
+	pointer-events: all;
+}
+</style>
--- a/src/components/copyright/assets/bottom.png
+++ b/src/components/copyright/assets/bottom.png
--- a/src/components/copyright/index.ts
+++ b/src/components/copyright/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const Copyright = Toolkit.withInstall(view);
+export default Copyright;
--- a/src/components/copyright/index.vue
+++ b/src/components/copyright/index.vue
@ -0,0 +1,45 @@
+<template>
+	<div class="tui-copyright">
+		<p>朝朝频顾惜，夜夜不相忘</p>
+		<p v-if="icp" class="selectable">
+			<a href="https://beian.miit.gov.cn/" v-text="icp" :title="icp" target="_blank"></a>
+		</p>
+		<p v-if="author && domain">
+			<span v-text="`Copyright © 2017 - ${new Date().getFullYear()} ${domain}`"></span>
+			<span v-text="`All Rights Reserved ${author} 版权所有`"></span>
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+	name: "Copyright"
+});
+
+withDefaults(defineProps<{
+	icp?: string;
+	domain?: string;
+	author?: string;
+}>(), {
+});
+
+</script>
+
+<style lang="less" scoped>
+.tui-copyright {
+	color: #777;
+	padding: 1rem 0 3rem 0;
+	font-size: 13px;
+	text-align: center;
+	background: url("assets/bottom.png") repeat-x left bottom;
+
+	p {
+		margin: 0;
+
+		span {
+			display: inline-block;
+			margin-right: .5rem;
+		}
+	}
+}
+</style>
--- a/src/components/empty-tips/index.ts
+++ b/src/components/empty-tips/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const EmptyTips = Toolkit.withInstall(view);
+export default EmptyTips;
--- a/src/components/empty-tips/index.vue
+++ b/src/components/empty-tips/index.vue
@ -0,0 +1,27 @@
+<template>
+	<div v-show="showOn" class="tui-empty-tips gray" v-text="content"></div>
+</template>
+
+<script lang="ts" setup>
+
+defineOptions({
+	name: "EmptyTips"
+});
+
+withDefaults(defineProps<{
+	showOn: boolean;
+	content?: string,
+}>(), {
+	showOn: true,
+	content: "没有更多数据"
+});
+</script>
+
+<style lang="less" scoped>
+.tui-empty-tips {
+	width: 100%;
+	padding: 1rem 0;
+	font-size: 14px;
+	text-align: center;
+}
+</style>
--- a/src/components/icon/index.ts
+++ b/src/components/icon/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const Icon = Toolkit.withInstall(view);
+export default Icon;
--- a/src/components/icon/index.vue
+++ b/src/components/icon/index.vue
@ -0,0 +1,62 @@
+<template>
+	<svg
+		v-if="name && d"
+		class="tui-icon"
+		:class="{ 'disable': disable || disabled }"
+		:width="16 * scale"
+		:height="16 * scale"
+		:fill="fill"
+	>
+		<path class="path" :d="d" />
+	</svg>
+	<div v-else class="tui-icon empty"></div>
+</template>
+
+<script lang="ts" setup>
+import IconMapper from "~/utils/IconMapper";
+
+defineOptions({
+	name: "Icon"
+});
+
+const props = withDefaults(defineProps<{
+	name?: string,
+	scale?: number,
+	fill?: string,
+	disable?: boolean,
+	disabled?: boolean,
+}>(), {
+	scale: 1,
+	fill: "#333",
+});
+
+const { name, scale, fill, disable, disabled } = toRefs(props);
+const d = ref();
+
+function update() {
+	if (name.value) {
+		d.value = IconMapper.getInstance().getSVG(name.value, scale.value);
+	}
+}
+
+watch(name, update);
+watch(scale, update);
+onMounted(update);
+</script>
+
+<style lang="less" scoped>
+.tui-icon {
+	display: block;
+	transform: rotateX(180deg) translateY(1px);
+
+	&.disable {
+		opacity: .7;
+		pointer-events: none;
+	}
+
+	&.empty {
+		width: v-bind("16 * scale + 'px'");
+		height: v-bind("16 * scale + 'px'");
+	}
+}
+</style>
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -0,0 +1,37 @@
+/** 导出所有组件 */
+import Icon from "./icon";
+import Popup from "./popup";
+import Captcha from "./captcha";
+import Loading from "./loading";
+import UserLevel from "./user-level";
+import Copyright from "./copyright";
+import EmptyTips from "./empty-tips";
+import MarkdownView from "./markdown-view";
+import BEFlowerFall from "./background-effect/flower-fall";
+import MarkdownEditor from "./markdown-editor";
+
+export default [
+	Icon,
+	Popup,
+	Captcha,
+	Loading,
+	UserLevel,
+	Copyright,
+	EmptyTips,
+	MarkdownView,
+	BEFlowerFall,
+	MarkdownEditor
+];
+
+export {
+	Icon,
+	Popup,
+	Captcha,
+	Loading,
+	UserLevel,
+	Copyright,
+	EmptyTips,
+	MarkdownView,
+	BEFlowerFall,
+	MarkdownEditor
+};
--- a/src/components/loading/index.ts
+++ b/src/components/loading/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const Loading = Toolkit.withInstall(view);
+export default Loading;
--- a/src/components/loading/index.vue
+++ b/src/components/loading/index.vue
@ -0,0 +1,153 @@
+<template>
+	<div v-if="visible" class="tui-loading" :class="{ 'filled': filled }" :style="style">
+		<div class="icon">
+			<div
+				class="line"
+				:class="lineClass(i)"
+				v-for="i in 4"
+				:key="i"
+			></div>
+		</div>
+		<div v-if="tips" class="text" v-text="tips"></div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Toolkit } from "~/index";
+defineOptions({
+	name: "Loading"
+});
+
+const props = withDefaults(defineProps<{
+	tips?: string | boolean;
+	delay?: number;
+	showOn?: boolean;
+	size?: number;
+	filled?: boolean;
+}>(), {
+	tips: "加载中..",
+	delay: 260,
+	showOn: true,
+	size: 24,
+	filled: false
+});
+const { tips, delay, showOn, size, filled } = toRefs(props);
+
+// ---------- 尺寸参数 ----------
+
+const style = computed(() => {
+	const base = Math.max(8, size.value);
+	const height = Math.round(base);
+	const width = Math.round(base * (8 / 24));
+	const gap = Math.round(base * (3 / 24));
+	return {
+		"--loading-height": `${height}px`,
+		"--rect-width": `${width}px`,
+		"--rect-gap": `${gap}px`
+	};
+});
+
+// ---------- 显示控制 ----------
+
+const visible = ref<boolean>(false);
+watch(showOn, async () => await start());
+
+// ---------- 动画 ----------
+
+const activeI = ref<number>(0);
+const timer = ref();
+const lineClass = (i: number): string => {
+	let clazz = "i" + i;
+	if (activeI.value === i) {
+		clazz += " active";
+	}
+	return clazz;
+};
+const start = async () => {
+	if (timer.value) {
+		clearInterval(timer.value);
+	}
+	if (showOn.value) {
+		if (0 < delay.value) {
+			await Toolkit.sleep(delay.value);
+		}
+		if (!showOn.value) {
+			return;
+		}
+		visible.value = true;
+
+		// 动画
+		let direction = 1;
+		timer.value = setInterval(() => {
+			activeI.value = activeI.value + direction;
+			if (4 < activeI.value || activeI.value < 1) {
+				direction *= -1;
+			}
+		}, 120);
+	} else {
+		visible.value = false;
+	}
+};
+onMounted(start);
+onUnmounted(() => {
+	if (timer.value) {
+		clearInterval(timer.value);
+	}
+});
+</script>
+
+<style lang="less" scoped>
+.tui-loading {
+	--h1: calc(var(--loading-height) * (9 / 24));
+	--h2: calc(var(--loading-height) * (14 / 24));
+	--h3: calc(var(--loading-height) * (19 / 24));
+	--h4: var(--loading-height);
+
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+
+	&.filled {
+		color: #FFF;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, .3);
+	}
+
+	.icon {
+		display: flex;
+		align-items: flex-end;
+
+		.line {
+			width: var(--rect-width);
+			background: #BBB;
+			margin-right: var(--rect-gap);
+
+			&.i1 {
+				height: calc(var(--h1))
+			}
+
+			&.i2 {
+				height: calc(var(--h2))
+			}
+
+			&.i3 {
+				height: calc(var(--h3))
+			}
+
+			&.i4 {
+				height: var(--h4)
+			}
+
+			&.active {
+				background: #53BD93;
+			}
+		}
+	}
+
+	.text {
+		margin-top: .5rem;
+	}
+}
+</style>
--- a/src/components/markdown-editor/CalcTextareaHeight.ts
+++ b/src/components/markdown-editor/CalcTextareaHeight.ts
@ -0,0 +1,112 @@
+// from element ui
+// https://github.com/ElemeFE/element/blob/dev/packages/input/src/calcTextareaHeight.js
+
+let tempTextArea: HTMLTextAreaElement | null;
+
+const HIDDEN_STYLE = `
+  height:0 !important;
+  visibility:hidden !important;
+  overflow:hidden !important;
+  position:absolute !important;
+  z-index:-1000 !important;
+  top:0 !important;
+  right:0 !important
+`;
+
+const CONTEXT_STYLE = [
+	"letter-spacing",
+	"line-height",
+	"padding-top",
+	"padding-bottom",
+	"font-family",
+	"font-weight",
+	"font-size",
+	"text-rendering",
+	"text-transform",
+	"width",
+	"text-indent",
+	"padding-left",
+	"padding-right",
+	"border-width",
+	"box-sizing"
+];
+
+type NodeStyling = {
+	contextStyle: string;
+	paddingSize: number;
+	borderSize: number;
+	boxSizing: string;
+}
+
+export type Result = {
+	height: number;
+	minHeight: number;
+}
+
+function calculateNodeStyling(targetElement: HTMLTextAreaElement): NodeStyling {
+	const style = window.getComputedStyle(targetElement);
+
+	const boxSizing = style.getPropertyValue("box-sizing");
+
+	const paddingSize = (
+		parseFloat(style.getPropertyValue("padding-bottom")) +
+		parseFloat(style.getPropertyValue("padding-top"))
+	);
+
+	const borderSize = (
+		parseFloat(style.getPropertyValue("border-bottom-width")) +
+		parseFloat(style.getPropertyValue("border-top-width"))
+	);
+
+	const contextStyle = CONTEXT_STYLE
+		.map(name => `${name}:${style.getPropertyValue(name)}`)
+		.join(";");
+
+	return {contextStyle, paddingSize, borderSize, boxSizing};
+}
+
+export default function calc(el: HTMLTextAreaElement, minRows = 1, maxRows?: number) {
+	if (!tempTextArea) {
+		tempTextArea = document.createElement("textarea") as HTMLTextAreaElement;
+		document.body.appendChild(tempTextArea);
+	}
+	const {paddingSize, borderSize, boxSizing, contextStyle} = calculateNodeStyling(el);
+
+	tempTextArea.setAttribute("style", `${contextStyle};${HIDDEN_STYLE}`);
+	tempTextArea.value = el.value || el.placeholder || "";
+
+	let height = tempTextArea.scrollHeight;
+	const result: Result = {
+		height: 0,
+		minHeight: 0
+	};
+
+	if (boxSizing === "border-box") {
+		height = height + borderSize;
+	} else if (boxSizing === "content-box") {
+		height = height - paddingSize;
+	}
+
+	tempTextArea.value = "";
+	const singleRowHeight = tempTextArea.scrollHeight - paddingSize;
+
+	if (minRows) {
+		let minHeight = singleRowHeight * minRows;
+		if (boxSizing === "border-box") {
+			minHeight = minHeight + paddingSize + borderSize;
+		}
+		height = Math.max(minHeight, height);
+		result.minHeight = minHeight;
+	}
+	if (maxRows) {
+		let maxHeight = singleRowHeight * maxRows;
+		if (boxSizing === "border-box") {
+			maxHeight = maxHeight + paddingSize + borderSize;
+		}
+		height = Math.min(maxHeight, height);
+	}
+	result.height = height;
+	tempTextArea.parentNode && tempTextArea.parentNode.removeChild(tempTextArea);
+	tempTextArea = null;
+	return result;
+}
--- a/src/components/markdown-editor/index.ts
+++ b/src/components/markdown-editor/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const MarkdownEditor = Toolkit.withInstall(view);
+export default MarkdownEditor;
--- a/src/components/markdown-editor/index.vue
+++ b/src/components/markdown-editor/index.vue
@ -0,0 +1,192 @@
+<template>
+	<div
+		ref="root"
+		class="tui-markdown-editor diselect"
+		:class="{ 'fold': isFold }"
+	>
+		<div class="editor">
+			<div class="header">
+				<icon class="icon" name="WRITING" />
+				<slot name="editorHeader">
+					<h4 class="title">
+						<span>源码</span>
+						<span class="light-gray word-space">Markdown</span>
+					</h4>
+				</slot>
+			</div>
+			<slot name="editor">
+				<textarea ref="textArea" class="text-area" v-model="_data"></textarea>
+			</slot>
+		</div>
+		<div class="preview" :class="{ 'showing': showingPreview }">
+			<div class="header">
+				<icon
+					v-if="isFold"
+					class="icon cur-pointer"
+					:name="showingPreview ? 'ARROW_1_E' : 'ARROW_1_W'"
+					@click="showingPreview = !showingPreview"
+				/>
+				<slot name="previewHeader">
+					<h4 class="title">预览</h4>
+				</slot>
+			</div>
+			<div ref="previewContent" class="content">
+				<markdown-view :content="_data" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Icon, MarkdownView } from "~/index";
+import calcHeight from "./CalcTextareaHeight";
+
+defineOptions({
+	name: "MarkdownEditor"
+});
+
+const props = withDefaults(defineProps<{
+	data?: string,
+	minRows?: number,
+	maxRows?: number
+}>(), {
+	data: "",
+	minRows: 8,
+	maxRows: 32
+});
+const { data, minRows, maxRows } = toRefs(props);
+
+const _data = ref(data.value);
+const textArea = ref<HTMLTextAreaElement>();
+const textAreaHeight = ref(30);
+const previewContent = ref<HTMLDivElement>();
+
+const emit = defineEmits(["update:data"]);
+
+watch(_data, () => {
+	emit("update:data", _data.value);
+	calcTextAreaHeight();
+});
+watch(data, () => {
+	_data.value = data.value;
+	calcTextAreaHeight();
+});
+
+// 自适应折叠预览
+const root = ref<HTMLDivElement>();
+const isFold = ref(false);
+const showingPreview = ref(false);
+onMounted(() => {
+	if (root.value) {
+		const foldObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+			if (entries && 0 < entries.length) {
+				isFold.value = entries[0].contentRect.width < 650;
+			}
+		});
+		foldObserver.observe(root.value);
+	}
+});
+
+// 自适应高度
+const calcTextAreaHeight = () => {
+	if (textArea.value) {
+		textAreaHeight.value = calcHeight(textArea.value, minRows.value, maxRows.value).height;
+	}
+};
+onMounted(() => {
+	calcTextAreaHeight();
+	if (textArea.value) {
+		const textareaHeightObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+			if (entries && 0 < entries.length) {
+				if (previewContent.value) {
+					previewContent.value.style.height = entries[0].contentRect.height + "px";
+				}
+			}
+		});
+		textareaHeightObserver.observe(textArea.value);
+	}
+});
+
+defineExpose({
+	textArea
+});
+</script>
+
+<style lang="less" scoped>
+.tui-markdown-editor {
+	width: 100%;
+	border: var(--tui-border);
+	display: flex;
+	overflow: hidden;
+	position: relative;
+
+	.header {
+		display: flex;
+		align-items: center;
+		border-bottom: 1px solid var(--tui-dark-white);
+
+		.icon {
+			margin-left: .5rem;
+		}
+	}
+
+	.title {
+		margin: 0;
+		height: 30px;
+		display: flex;
+		line-height: 30px;
+		padding-left: 10px;
+	}
+
+	.editor {
+		width: 50%;
+		display: flex;
+		border-right: var(--tui-border);
+		flex-direction: column;
+
+		.text-area {
+			width: calc(100% - .5rem * 2);
+			height: v-bind("textAreaHeight + 'px'");
+			resize: none;
+			border: none;
+			outline: none;
+			padding: .5rem;
+			font-size: 14px;
+			word-wrap: normal;
+			white-space: nowrap;
+		}
+	}
+
+	.preview {
+		width: 50%;
+		background: #FFF;
+
+		.content {
+			padding: .5rem 1rem;
+			overflow-y: auto;
+		}
+	}
+
+	&.fold {
+
+		.editor {
+			width: 100%;
+		}
+
+		.preview {
+			left: calc(100% - 5rem);
+			width: calc(100% - 2rem);
+			height: 100%;
+			z-index: 1;
+			position: absolute;
+			border-left: var(--tui-border);
+			transition: left .5s var(--tui-bezier);
+			box-shadow: -2px 0 0 var(--tui-shadow-color);
+
+			&.showing {
+				left: 2rem;
+			}
+		}
+	}
+}
+</style>
--- a/src/components/markdown-view/index.ts
+++ b/src/components/markdown-view/index.ts
@ -0,0 +1,6 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+import "./style.less";
+
+export const MarkdownView = Toolkit.withInstall(view);
+export default MarkdownView;
--- a/src/components/markdown-view/index.vue
+++ b/src/components/markdown-view/index.vue
@ -0,0 +1,42 @@
+<template>
+	<div
+		class="tui-markdown-view selectable break-all line-numbers"
+		v-html="markdownHTML"
+		:data-max-height="maxHeight"
+	></div>
+</template>
+<script lang="ts" setup>
+import Prism from "prismjs";
+import Markdown from "~/utils/Markdown";
+
+defineOptions({
+	name: "MarkdownView"
+});
+
+const props = withDefaults(defineProps<{
+	content?: string;
+	showCodeBorder?: boolean;
+	maxHeight?: string;
+}>(), {
+	content: "",
+	showCodeBorder: true,
+	maxHeight: "400px"
+});
+const { content } = toRefs(props);
+const markdownHTML = ref("");
+
+const doRender = async () => {
+	markdownHTML.value = await Markdown.getInstance().toHTML(content.value);
+	await nextTick();
+	Prism.highlightAll();
+};
+
+watch(() => props.content, doRender);
+onMounted(doRender);
+</script>
+<style lang="less" scoped>
+.tui-markdown-view {
+	width: 100%;
+	overflow: auto;
+}
+</style>
--- a/src/components/markdown-view/style.less
+++ b/src/components/markdown-view/style.less
@ -0,0 +1,341 @@
+@import url(~/assets/style/variable);
+
+.tui-markdown-view {
+	font-size: 14px;
+	line-height: 1.5;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		margin: 2rem 0 .5rem 0;
+		padding: .25rem 1rem;
+		position: relative;
+		border-left: .4rem solid var(--tui-light-blue);
+		font-weight: bold;
+	}
+
+	p:first-child,
+	h1:first-child,
+	h2:first-child,
+	h3:first-child,
+	h4:first-child,
+	h5:first-child,
+	h6:first-child {
+		margin: 0;
+	}
+
+	h1:hover a.anchor,
+	h2:hover a.anchor,
+	h3:hover a.anchor,
+	h4:hover a.anchor,
+	h5:hover a.anchor,
+	h6:hover a.anchor {
+		text-decoration: none;
+	}
+
+	h2 a,
+	h3 a {
+		color: #34495E;
+	}
+
+	h1 {
+		font-size: 1rem;
+		line-height: 1.2;
+	}
+
+	h2 {
+		font-size: 1rem;
+		line-height: 1.2;
+	}
+
+	h3 {
+		font-size: 1rem;
+		line-height: 1.2;
+	}
+
+	h4 {
+		font-size: 1rem;
+	}
+
+	h5 {
+		font-size: .8rem;
+	}
+
+	h6 {
+		color: #777;
+		font-size: 1rem;
+	}
+
+	p,
+	ul,
+	ol,
+	dl,
+	table,
+	blockquote {
+		margin: .5rem 0;
+		min-height: 2em;
+	}
+
+	p {
+		text-indent: 2em;
+	}
+
+	blockquote p {
+		text-indent: 0;
+	}
+
+	code {
+		padding: .2em .5em;
+		background: #EEE;
+		box-sizing: border-box;
+		border-radius: 2px;
+	}
+
+	li > ol,
+	li > ul {
+		margin: 0 0;
+	}
+
+	li > p {
+		text-indent: 0;
+	}
+
+	hr {
+		height: 2px;
+		margin: 16px 0;
+		border: 0 none;
+		padding: 0;
+		overflow: hidden;
+		background: #E7E7E7;
+		box-sizing: content-box;
+	}
+
+	h1 p,
+	h2 p,
+	h3 p,
+	h4 p,
+	h5 p,
+	h6 p {
+		margin-top: 0;
+	}
+
+	li p.first {
+		display: inline-block;
+	}
+
+	ul,
+	ol {
+		padding-left: 30px;
+	}
+
+	ul:first-child,
+	ol:first-child {
+		margin-top: 0;
+	}
+
+	ul:last-child,
+	ol:last-child {
+		margin-bottom: 0;
+	}
+
+	ul {
+		list-style-type: disc;
+	}
+
+	video {
+		width: 100%;
+		background: #000;
+	}
+
+	iframe {
+		width: 100%;
+		height: 520px;
+	}
+
+	blockquote {
+		padding: 2px 10px;
+		background: rgba(153, 153, 153, .1);
+		border-left: 4px solid #EDEDED;
+	}
+
+	table {
+		padding: 0;
+		margin: 0 auto;
+		min-width: 240px;
+		max-width: 100%;
+		word-break: initial;
+		border-spacing: 0;
+		border-collapse: collapse;
+	}
+
+	table thead {
+		background: #F2F2F2;
+	}
+
+	table tr {
+		margin: 0;
+		padding: 0;
+		border-top: 1px solid #DFE2E5;
+	}
+
+	table tr:nth-child(2n) {
+		background-color: #FAFAFA;
+	}
+
+	table tr th {
+		border: 1px solid #DFE2E5;
+		margin: 0;
+		padding: 2px 13px;
+		text-align: left;
+		font-weight: bold;
+		border-bottom: 0;
+	}
+
+	table tr td {
+		border: 1px solid #DFE2E5;
+		margin: 0;
+		padding: 0 13px;
+		word-wrap: break-word;
+		word-break: break-all;
+		text-align: left;
+		white-space: normal;
+	}
+
+	table tr th:first-child,
+	table tr td:first-child {
+		margin-top: 0;
+	}
+
+	table tr th:last-child,
+	table tr td:last-child {
+		margin-bottom: 0;
+	}
+
+	tt {
+		color: #e96900;
+		padding: 2px 4px;
+		font-size: 0.92rem;
+		background: #F8F8F8;
+		border-radius: 2px;
+	}
+
+	tt {
+		margin: 0 2px;
+	}
+
+	.block {
+		display: block;
+	}
+
+	.center {
+		text-align: center;
+		justify-content: center;
+	}
+
+	.border {
+		border: 1px solid #525870;
+	}
+
+	.media {
+		margin: .5rem auto;
+		display: block;
+		max-width: 100%;
+
+		+ .media-tips {
+			color: #777;
+			display: block;
+			text-align: center;
+			margin-bottom: 2rem;
+		}
+	}
+
+	// 代码
+	pre[class*="language-"] {
+		border: 1px solid #B8BBC9;
+		padding: 0 !important;
+		position: relative;
+		overflow: auto;
+		font-size: 14px;
+		background: transparent;
+		max-height: var(data-max-height);
+		transition: max-height .5s var(--tui-bezier);
+		font-family: var(--td-font-family);
+		line-height: 1;
+		border-radius: 0;
+
+		code {
+			color: #333;
+			background: transparent;
+			text-shadow: none !important;
+			font-family: var(--td-font-family);
+
+			.line-numbers-rows {
+				left: 0;
+				float: left;
+				z-index: 1;
+				position: sticky;
+				background: rgba(242, 242, 242, .9);
+				letter-spacing: 1px;
+
+				>span::before {
+					padding-right: .2rem;
+				}
+			}
+
+			.codes {
+				position: absolute;
+				min-width: calc(100% - 4.6em);
+				padding-right: .5em;
+
+				.token.namespace {
+					opacity: 1;
+				}
+
+				.token.punctuation {
+					color: #333;
+				}
+
+				.token.constant {
+					color: #FF7A9B;
+				}
+
+				.token.annotation {
+					color: purple;
+				}
+
+				.token.function {
+					color: #777;
+				}
+
+				.token.class-name {
+					color: #FF461F;
+				}
+
+				.token.generics .class-name {
+					color: #895532;
+					font-weight: bold;
+				}
+
+				.token.comment {
+					color: #999;
+				}
+
+				.token.string {
+					color: #55AA55;
+				}
+
+				.token.number {
+					color: #EB9354;
+				}
+
+				.token.keyword,
+				.token.boolean {
+					color: #177CB0;
+				}
+			}
+		}
+	}
+}
--- a/src/components/popup/index.ts
+++ b/src/components/popup/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const Popup = Toolkit.withInstall(view);
+export default Popup;
--- a/src/components/popup/index.vue
+++ b/src/components/popup/index.vue
@ -0,0 +1,26 @@
+<template>
+	<div id="tui-popup"></div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+	name: "Popup"
+});
+</script>
+
+<style lang="less" scoped>
+#tui-popup {
+	border: var(--tui-border);
+	z-index: 20;
+	position: fixed;
+	font-size: 13px;
+	visibility: hidden;
+	box-shadow: 2px 2px 0 rgba(50, 50, 50, .2);
+	background: #F4F4F4;
+
+	:deep(.text) {
+		padding: 3px 6px 5px 6px;
+		max-width: 420px;
+	}
+}
+</style>
--- a/src/components/user-level/icon.png
+++ b/src/components/user-level/icon.png
--- a/src/components/user-level/index.ts
+++ b/src/components/user-level/index.ts
@ -0,0 +1,5 @@
+import view from "./index.vue";
+import Toolkit from "~/utils/Toolkit";
+
+export const UserLevel = Toolkit.withInstall(view);
+export default UserLevel;
--- a/src/components/user-level/index.vue
+++ b/src/components/user-level/index.vue
@ -0,0 +1,25 @@
+<template>
+	<div class="tui-user-level" />
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+	name: "UserLevel"
+});
+
+const props = withDefaults(defineProps<{
+	value: number;
+}>(), {});
+const { value } = toRefs(props);
+
+const offset = computed(() => -9 * value.value + "px");
+</script>
+
+<style lang="less" scoped>
+.tui-user-level {
+	width: 19px;
+	height: 9px;
+	background: url("./icon.png");
+	background-position-y: v-bind(offset);
+}
+</style>
--- a/src/index.ts
+++ b/src/index.ts
@ -0,0 +1,90 @@
+import type { App } from "vue";
+
+import components from "./components";
+
+import Network from "./utils/Network";
+import UserAPI from "./api/UserAPI";
+import CommonAPI from "./api/CommonAPI";
+import CommentAPI from "./api/CommentAPI";
+import DeveloperAPI from "./api/DeveloperAPI";
+
+import Time from "./utils/Time";
+import IOSize from "./utils/IOSize";
+import Events from "./utils/Events";
+import Cooker from "./utils/Cooker";
+import Toolkit from "./utils/Toolkit";
+import Resizer from "./utils/Resizer";
+import Storage from "./utils/Storage";
+import Prismjs from "./utils/Prismjs";
+import Markdown from "./utils/Markdown";
+import Scroller from "./utils/Scroller";
+import IconMapper from "./utils/IconMapper";
+import SettingMapper from "./utils/SettingMapper";
+
+import VPopup from "./utils/directives/Popup";
+import VDraggable from "./utils/directives/Draggable";
+
+import { userStore } from "./store/user";
+import { deviceStore } from "./store/device";
+
+
+import "./assets/style/variable.less";
+import "./assets/style/timi-web.less";
+
+export * from "./components";
+
+export * from "./types/Model";
+export * from "./types/User";
+export * from "./types/Comment";
+export * from "./types/Setting";
+export * from "./types/Template";
+export * from "./types/Developer";
+export * from "./types/Attachment";
+
+export * from "./utils/Prismjs";
+
+export * from "./utils/directives/Popup";
+
+export type { ScrollListener } from "./utils/Scroller";
+export type { DraggableConfig } from "./utils/directives/Draggable";
+export type { PopupConfig } from "./utils/directives/Popup";
+
+const install = function (app: App) {
+	components.forEach(component => {
+		app.use(component as unknown as { install: () => any });
+	});
+};
+const axios = Network.axios;
+
+export default {
+	install
+};
+
+export {
+	axios,
+	Network,
+
+	UserAPI,
+	CommonAPI,
+	CommentAPI,
+	DeveloperAPI,
+
+	userStore,
+	deviceStore,
+
+	Time,
+	Events,
+	IOSize,
+	Cooker,
+	Toolkit,
+	Resizer,
+	Storage,
+	Prismjs,
+	Markdown,
+	Scroller,
+	IconMapper,
+	SettingMapper,
+
+	VPopup,
+	VDraggable
+};
--- a/src/store/device.ts
+++ b/src/store/device.ts
@ -0,0 +1,110 @@
+import { Resizer } from "~/index";
+
+// true 为手机
+const isPhone = ref(false);
+// true 为平板
+const isTablet = ref(false);
+// true 为桌面
+const isDesktop = ref(false);
+// true 为大屏幕
+const isLargeScreen = ref(false);
+
+// true 为竖屏
+const isVertical = ref(false);
+// true 为横屏
+const isHorizontal = ref(false);
+// 宽高比
+const aspectRatio = ref(0);
+// true 为超宽屏
+const isUltrawide = ref(false);
+// true 为近似方屏
+const isSquare = ref(false);
+
+// 当前断点
+const currentBreakpoint = ref<"xs" | "sm" | "md" | "lg" | "xl">("lg");
+// 当前屏幕宽度
+const screenWidth = ref(0);
+// 当前屏幕高度
+const screenHeight = ref(0);
+// 短屏幕（高度小于 500）
+const isShortScreen = ref(false);
+// true 为启用移动端布局
+const isMobileLayout = ref(false);
+
+/** 断点配置，单位：px */
+enum Breakpoints {
+
+	/** 超小设备 */
+	XS = 480,
+
+	/** 手机 */
+	SM = 650,
+
+	/** 平板 */
+	MD = 768,
+
+	/** 笔记本 */
+	LG = 1024,
+
+	/** 大屏幕 */
+	XL = 1440
+}
+
+Resizer.addListener("DEVICE_SIZE", (width, height) => {
+	screenWidth.value = width;
+	screenHeight.value = height;
+
+	// 设备类型
+	isPhone.value = width < Breakpoints.SM;
+	isTablet.value = width >= Breakpoints.SM && width < Breakpoints.LG;
+	isDesktop.value = width >= Breakpoints.LG;
+	isLargeScreen.value = width >= Breakpoints.XL;
+
+	// 屏幕方向
+	isVertical.value = width < height;
+	isHorizontal.value = !isVertical.value;
+
+	// 宽高比特征
+	aspectRatio.value = width / height;
+	isUltrawide.value = 2 <= aspectRatio.value; // 21:9 ≈ 2.33
+	isSquare.value = 0.9 < aspectRatio.value && aspectRatio.value < 1.1;
+
+	// 布局相关
+	isShortScreen.value = height < 500;
+	isMobileLayout.value = width < Breakpoints.MD;
+
+	if (Breakpoints.XL <= width) {
+		currentBreakpoint.value = "xl";
+	} else if (Breakpoints.LG <= width) {
+		currentBreakpoint.value = "lg";
+	} else if (Breakpoints.MD <= width) {
+		currentBreakpoint.value = "md";
+	} else if (Breakpoints.SM <= width) {
+		currentBreakpoint.value = "sm";
+	} else {
+		currentBreakpoint.value = "xs";
+	}
+});
+
+const deviceStore = {
+	isPhone,
+	isTablet,
+	isDesktop,
+	isLargeScreen,
+
+	isVertical,
+	isHorizontal,
+	aspectRatio,
+	isUltrawide,
+	isSquare,
+
+	currentBreakpoint,
+	screenWidth,
+	screenHeight,
+	isShortScreen,
+	isMobileLayout
+};
+
+export {
+	deviceStore
+};
--- a/src/store/user.ts
+++ b/src/store/user.ts
@ -0,0 +1,77 @@
+import { LoginResponse, LoginToken, LoginUser, Storage, UserAPI, UserToken } from "timi-web";
+
+const loginUser = reactive<LoginUser>({
+	token: undefined,
+	user: undefined
+});
+
+function isLogged(): boolean {
+	return !!loginUser.user;
+}
+
+async function login4Token(token: LoginToken): Promise<LoginResponse | null> {
+	loginUser.token = token;
+	// 未过期
+	try {
+		const resp = await UserAPI.login4Token();
+		await updateToken(resp);
+		return resp;
+	} catch (e) {
+		await logout();
+	}
+	return null;
+}
+
+async function login4Storage(): Promise<LoginResponse | null> {
+	if (!loginUser.user && (loginUser.token || Storage.has("token"))) {
+		// 未登录，储存有令牌
+		const token = Storage.getJSON("token") as UserToken;
+		if (new Date().getTime() < token.expireAt) {
+			return await login4Token(token);
+		}
+	}
+	return null;
+}
+
+async function updateToken(loginResponse: LoginResponse): Promise<void> {
+	loginUser.token = {
+		id: loginResponse.id,
+		value: loginResponse.token,
+		expireAt: loginResponse.expireAt
+	};
+	loginUser.user = await UserAPI.view(loginResponse.id);
+
+	Storage.setJSON("token", {
+		value: loginUser.token.value,
+		expireAt: loginUser.token.expireAt
+	} as UserToken);
+}
+
+async function logout(): Promise<void> {
+	await UserAPI.logout();
+
+	loginUser.token = undefined;
+	loginUser.user = undefined;
+
+	Storage.remove("token");
+}
+
+async function reloadProfile() {
+	if (loginUser.token && loginUser.token.id) {
+		loginUser.user = await UserAPI.view(loginUser.token.id);
+	}
+}
+
+const userStore = {
+	loginUser,
+	isLogged,
+	login4Token,
+	login4Storage,
+	updateToken,
+	logout,
+	reloadProfile
+};
+
+export {
+	userStore
+};
--- a/src/types.ts
+++ b/src/types.ts
@ -0,0 +1,43 @@
+import type { Plugin } from "vue";
+
+/**
+ * 安装方法
+ */
+export type InstallRecord<T> = T & Plugin;
+
+/**
+ * 默认插槽参数
+ */
+export type DefaultSlotProp = (props: {}) => unknown
+
+/**
+ * 默认插槽类型
+ */
+export interface DefaultSlots {
+	default: DefaultSlotProp;
+	icon?: DefaultSlotProp;
+}
+
+/**
+ * 合并类型为交叉类型
+ */
+export type Merge<T, R> = {
+	[K in keyof T]: T[K]
+} & {
+	[K in keyof R]: R[K]
+}
+
+/**
+ * 合并交叉类型
+ */
+type MergeIntersection<T> = Pick<T, keyof T>
+
+/**
+ * 提取必传属性
+ */
+export type PickRequiredUnion<P, U extends keyof P> = MergeIntersection<Merge<Required<Pick<P, U>>, Omit<P, U>>>
+
+/**
+ * 除了提取的属性，其他都是必传属性
+ */
+export type PickNotRequiredUnion<P, U extends keyof P> = MergeIntersection<Merge<Pick<P, U>, Required<Omit<P, U>>>>
--- a/src/types/Attachment.ts
+++ b/src/types/Attachment.ts
@ -0,0 +1,24 @@
+import { Model } from "./Model";
+
+export type Attachment = {
+	bizType: AttachmentBizType;
+	bizId: number;
+	attachType?: string;
+	mongoId: string;
+	lidTitle?: number;
+    name?: string;
+    size: number;
+} & Model
+
+export type AttachmentView = {
+	title?: string;
+} & Attachment
+
+export enum AttachmentBizType {
+
+    GIT_ISSUE,
+
+    GIT_MERGE,
+
+    GIT_RELEASE
+}
--- a/src/types/Comment.ts
+++ b/src/types/Comment.ts
@ -0,0 +1,78 @@
+import { Model, Page } from "./Model";
+import { UserView } from "./User";
+
+/** 评论 */
+export type Comment = {
+	bizType: CommentBizType;
+	bizId: number;
+	userId?: number;
+	nick?: string;
+	content: string;
+} & Model
+
+/** 评论视图 */
+export type CommentView = {
+	/** 所属用户 */
+	user?: UserView;
+
+	/** 回复列表 */
+	replies: CommentReplyView[];
+
+	/** 回复分页 */
+	repliesPage: CommentReplyPage;
+
+	/** 用于绑定组件当前页下标 */
+	repliesCurrent: number;
+
+	/** 回复数量 */
+	repliesLength: number;
+
+	/** 关联文章 */
+	article?: object;
+
+	/** 关联 Git 仓库 */
+	repository?: object;
+} & Comment;
+
+export type CommentReply = {
+	replyId?: number;
+	commentId: number;
+	senderId?: number;
+	senderNick?: string;
+	receiverId?: number;
+	receiverNick?: string;
+	content: string;
+} & Model;
+
+export type CommentReplyView = {
+	comment: CommentView;
+	sender?: UserView;
+	receiver?: UserView;
+} & CommentReply;
+
+export type CommentPage = {
+	bizType?: CommentBizType;
+	bizId?: number;
+} & Page;
+
+export enum CommentReplyBizType {
+
+	COMMENT = "COMMENT",
+
+	SENDER = "SENDER",
+
+	RECEIVER = "RECEIVER"
+}
+
+export type CommentReplyPage = {
+	bizType: CommentReplyBizType
+	bizId?: number
+} & Page;
+
+export enum CommentBizType {
+	ARTICLE = "ARTICLE",
+
+	GIT_ISSUE = "GIT_ISSUE",
+
+	GIT_MERGE = "GIT_MERGE",
+}
--- a/src/types/Developer.ts
+++ b/src/types/Developer.ts
@ -0,0 +1,6 @@
+/** 开发者配置 */
+export type Developer = {
+	developerId?: number;
+	name?: string;
+	rsa?: string;
+}
--- a/src/types/Model.ts
+++ b/src/types/Model.ts
@ -0,0 +1,79 @@
+export enum RunEnv {
+	DEV = "DEV",
+	DEV_SSL = "DEV_SSL",
+	PROD = "PROD"
+}
+
+// 基本实体模型
+export type Model = {
+	id?: number;
+
+	createdAt?: number;
+	updatedAt?: number;
+	deletedAt?: number;
+}
+
+export type Response = {
+	code: number;
+	msg?: string;
+	data: object;
+}
+
+export type Page = {
+	index: number;
+	size: number;
+	keyword?: string;
+	orderMap?: { [key: string]: OrderType };
+}
+
+export enum OrderType {
+	ASC = "ASC",
+	DESC = "DESC"
+}
+
+export type PageResult<T> = {
+	total: number;
+	list: T[];
+}
+
+// 携带验证码的请求体
+export type CaptchaData<T> = {
+	from: string;
+	captcha: string;
+	data: T;
+}
+
+export enum CaptchaFrom {
+
+	LOGIN = "LOGIN",
+
+	REGISTER = "REGISTER",
+
+	/** 评论 */
+	COMMENT = "COMMENT",
+
+	/** 评论回复 */
+	COMMENT_REPLY = "COMMENT_REPLY",
+
+	/** Git 反馈 */
+	GIT_ISSUE = "GIT_ISSUE",
+
+	/** Git 合并请求 */
+	GIT_MERGE = "GIT_MERGE",
+}
+
+export enum ImageType {
+	AUTO = "ir-auto",
+	SMOOTH = "ir-smooth",
+	PIXELATED = "ir-pixelated"
+}
+
+export type KeyValue<T> = {
+	key: string;
+	value: T;
+}
+
+export type LabelValue<T> = {
+	label: string;
+	value: T;
+}
--- a/src/types/Setting.ts
+++ b/src/types/Setting.ts
@ -0,0 +1,28 @@
+export enum SettingKey {
+	RUN_ENV = "RUN_ENV",
+	PUBLIC_RESOURCES = "PUBLIC_RESOURCES",
+
+	DOMAIN_ROOT = "DOMAIN_ROOT",
+	DOMAIN_API = "DOMAIN_API",
+	DOMAIN_GIT = "DOMAIN_GIT",
+	DOMAIN_BLOG = "DOMAIN_BLOG",
+	DOMAIN_SPACE = "DOMAIN_SPACE",
+	DOMAIN_DOWNLOAD = "DOMAIN_DOWNLOAD",
+	DOMAIN_RESOURCE = "DOMAIN_RESOURCE",
+
+	ENABLE_COMMENT = "ENABLE_COMMENT",
+	ENABLE_DEBUG = "ENABLE_DEBUG",
+	ENABLE_LOGIN = "ENABLE_LOGIN",
+	ENABLE_REGISTER = "ENABLE_REGISTER",
+	ENABLE_USER_UPDATE = "ENABLE_USER_UPDATE",
+}
+
+export type PublicResources = {
+	wechatReceiveQRCode: string;
+	user: PublicResourcesUser;
+}
+
+export type PublicResourcesUser = {
+	avatar: string;
+	wrapper: string;
+}
--- a/src/types/Template.ts
+++ b/src/types/Template.ts
@ -0,0 +1,6 @@
+export enum TemplateBizType {
+
+    GIT = "GIT",
+
+	FOREVER_MC = "FOREVER_MC"
+}
--- a/src/types/User.ts
+++ b/src/types/User.ts
@ -0,0 +1,89 @@
+import { ImageType, Model } from "./Model";
+import { AttachmentView } from "./Attachment";
+
+export type User = {
+	name: string;
+	email?: string;
+	emailVerifyAt: number;
+	unmuteAt?: number;
+	unbanAt?: number;
+} & Model;
+
+export type UserView = {
+	profile: UserProfileView
+} & User;
+
+export enum UserAttachType {
+
+	AVATAR,
+
+	WRAPPER,
+
+	DEFAULT_AVATAR,
+
+	DEFAULT_WRAPPER,
+}
+
+export type UserProfile = {
+	userId: number;
+	avatarType: ImageType;
+	wrapperType: ImageType;
+
+	exp: number;
+	sex?: number;
+	birthdate?: number;
+	qq?: string;
+	description: string;
+	lastLoginIP?: string;
+	lastLoginAt?: number;
+	updatedAt?: number;
+}
+
+export type UserProfileView = {
+	attachmentList?: AttachmentView[]
+} & UserProfile
+
+export type UserToken = {
+	value: string;
+	expireAt: number;
+}
+
+export type RegisterRequest = {
+	name: string;
+	password: string;
+	email?: string;
+}
+
+export type LoginRequest = {
+	user: string;
+	password: string;
+}
+
+// 登录返回
+export type LoginResponse = {
+	id: number;
+	token: string;
+	expireAt: number;
+}
+
+export type LoginUser = {
+	token?: LoginToken;
+	user?: UserView
+}
+
+export type LoginToken = {
+	id?: number;
+} & UserToken;
+
+export enum LoginType {
+	ALERT,
+	IFRAME,
+	REDIRECT
+}
+
+export type UserLevelType = {
+	exp: number;         // 经验数值，和 UserData.exp 一样
+	value: number;       // 经验对应等级，[0, 8]
+	percent: number;     // 该经验在该等级的百分比 [0, 1]
+	nextLevelUp: number; // 下一级经验值
+}
--- a/src/utils/Cooker.ts
+++ b/src/utils/Cooker.ts
@ -0,0 +1,31 @@
+export default class Cooker {
+
+	static set(name: string, value: string, ttlMS: number) {
+		let expires = "";
+		if (ttlMS) {
+			let date = new Date();
+			date.setTime(date.getTime() + ttlMS);
+			expires = "; expires=" + date.toUTCString();
+		}
+		document.cookie = name + "=" + (value || "") + expires + "; path=/";
+	}
+
+	static get(name: string) {
+		let nameSplit = name + "=";
+		let ca = document.cookie.split(";");
+		for (let i = 0; i < ca.length; i++) {
+			let c = ca[i];
+			while (c.charAt(0) == " ") {
+				c = c.substring(1, c.length);
+			}
+			if (c.indexOf(nameSplit) == 0) {
+				return c.substring(nameSplit.length, c.length);
+			}
+		}
+		return undefined;
+	}
+
+	static remove(name: string) {
+		document.cookie = name + "=; Max-Age=-99999999;";
+	}
+}
--- a/src/utils/Events.ts
+++ b/src/utils/Events.ts
@ -0,0 +1,106 @@
+/**
+ * ### 全局事件管理
+ *
+ * ```js
+ * // 注册
+ * Events.register("eventName", () => {
+ *     // 触发执行
+ * });
+ *
+ * // 触发
+ * Events.emit("eventName", '支持参数');
+ *
+ * // 移除
+ * Events.remove("eventName");
+ * ```
+ */
+export default class Events {
+
+	// 监听数组
+	private static listeners = new Map<any, Observer<any>[]>();
+
+	/**
+	 * 注册事件（会叠加）
+	 *
+	 * @param key      事件名称
+	 * @param callback 回调函数
+	 */
+	public static register<T>(key: T, callback: Function) {
+		const observers: Observer<T>[] | undefined = Events.listeners.get(key);
+		if (!observers) {
+			Events.listeners.set(key, []);
+		}
+		Events.listeners.get(key)?.push(new Observer<T>(key, callback));
+	}
+
+	/**
+	 * 重置并注册（不会叠加）
+	 *
+	 * @param key     事件名称
+	 * @param callback 回调函数
+	 */
+	public static reset<T>(key: T, callback: Function) {
+		Events.listeners.set(key, []);
+		this.register(key, callback);
+	}
+
+	/**
+	 * 移除事件
+	 *
+	 * @param key     事件名称
+	 */
+	public static remove<T>(key: T) {
+		const observers: Observer<T>[] | undefined = Events.listeners.get(key);
+		if (observers) {
+			for (let i = 0, l = observers.length; i < l; i++) {
+				if (observers[i].equals(key)) {
+					observers.splice(i, 1);
+					break;
+				}
+			}
+		}
+		Events.listeners.delete(key);
+	}
+
+	/**
+	 * 触发事件
+	 *
+	 * @param key 事件名称
+	 * @param args 参数
+	 */
+	public static emit<T>(key: T, ...args: any[]) {
+		const observers: Observer<T>[] | undefined = Events.listeners.get(key);
+		if (observers) {
+			for (const observer of observers) {
+				// 通知
+				observer.notify(...args);
+			}
+		}
+	}
+}
+
+/** 观察者 */
+class Observer<T> {
+
+	private callback: Function = () => {}; // 回调函数
+
+	private readonly key: T;
+
+	constructor(key: T, callback: Function) {
+		this.key = key;
+		this.callback = callback;
+	}
+
+	/**
+	 * 发送通知
+	 *
+	 * @param args 不定参数
+	 */
+	notify(...args: any[]): void {
+		this.callback.call(this.key, ...args);
+	}
+
+	equals(name: any): boolean {
+		return name === this.key;
+	}
+}
--- a/src/utils/IOSize.ts
+++ b/src/utils/IOSize.ts
@ -0,0 +1,80 @@
+export enum Unit {
+
+	/** B */
+	B = "B",
+
+	/** KB */
+	KB = "KB",
+
+	/** MB */
+	MB = "MB",
+
+	/** GB */
+	GB = "GB",
+
+	/** TB */
+	TB = "TB",
+
+	/** PB */
+	PB = "PB",
+
+	/** EB */
+	EB = "EB"
+}
+
+/** 储存单位 */
+export default class IOSize {
+
+	/** 1 字节 */
+	public static BYTE = 1;
+
+	/** 1 KB */
+	public static KB = IOSize.BYTE << 10;
+
+	/** 1 MB */
+	public static MB = IOSize.KB << 10;
+
+	/** 1 GB */
+	public static GB = IOSize.MB << 10;
+
+	/** 1 TB */
+	public static TB = IOSize.GB << 10;
+
+	/** 1 PB */
+	public static PB = IOSize.TB << 10;
+
+	/** 1 EB */
+	public static EB = IOSize.PB << 10;
+
+	public static Unit = Unit;
+
+	/**
+	 * <p>格式化一个储存容量，保留两位小数
+	 * <pre>
+	 *     // 返回 100.01 KB
+	 *     format(102411, 2);
+	 * </pre>
+	 *
+	 * @param size     字节大小
+	 * @param fixed    保留小数
+	 * @param stopUnit 停止单位
+	 * @return
+	 */
+	public static format(size: number, fixed = 2, stopUnit?: Unit): string {
+		const units = Object.keys(Unit);
+		if (0 < size) {
+			for (let i = 0; i < units.length; i++, size /= 1024) {
+				const unit = units[i];
+				if (size <= 1000 || i === units.length - 1 || unit === stopUnit) {
+					if (i === 0) {
+						// 最小单位不需要小数
+						return size + " B";
+					} else {
+						return `${size.toFixed(fixed)} ${unit}`;
+					}
+				}
+			}
+		}
+		return "0 B";
+	}
+}
--- a/src/utils/IconMapper.ts
+++ b/src/utils/IconMapper.ts
@ -0,0 +1,26 @@
+import iconJson from "../assets/icon.json";
+
+export default class IconMapper {
+
+	private static instance: IconMapper;
+
+	icons = new Map<string, string>();
+
+	private constructor() {
+		Object.entries(iconJson).forEach(([key, value]) => this.icons.set(key, value));
+	}
+
+	public getSVG(name: string, scale = 1) {
+		const svg = IconMapper.getInstance().icons.get(name.toLowerCase());
+		return svg?.replace(/\d+(\.\d+)?/gm, n => {
+			return String((Number(n) * scale));
+		});
+	}
+
+	public static getInstance(): IconMapper {
+		if (!IconMapper.instance) {
+			IconMapper.instance = new IconMapper();
+		}
+		return IconMapper.instance;
+	}
+}
--- a/src/utils/Markdown.ts
+++ b/src/utils/Markdown.ts
@ -0,0 +1,209 @@
+import { marked } from "marked";
+import { gfmHeadingId } from "marked-gfm-heading-id";
+import { markedHighlight } from "marked-highlight";
+import { mangle } from "marked-mangle";
+import Prism from "prismjs";
+import "prismjs/themes/prism.css";
+import { Toolkit } from "~/index";
+
+export default class Markdown {
+
+	private static instance: Markdown;
+
+	renderer = new marked.Renderer();
+
+	private constructor() {
+		marked.use(mangle());
+		marked.use(gfmHeadingId());
+		marked.use(markedHighlight({
+			highlight(code: string, lang: string) {
+				if (Prism.languages[lang]) {
+					return Prism.highlight(code, Prism.languages[lang], lang);
+				} else {
+					return code;
+				}
+			}
+		}));
+		// Markdown 解析器配置
+		marked.setOptions({
+			renderer: this.renderer,
+			pedantic: false,
+			gfm: true,
+			breaks: true
+		});
+
+		Prism.hooks.add("complete", (env: any) => {
+			if (!env.code) return;
+
+			// 行号渲染调整
+			const el = env.element;
+
+			const lineNumber = el.querySelector(".line-numbers-rows") as HTMLDivElement;
+			if (lineNumber) {
+				const clone = lineNumber.cloneNode(true);
+				el.removeChild(lineNumber);
+				// 加容器做滚动
+				el.innerHTML = `<span class="codes">${el.innerHTML}</span>`;
+				el.insertBefore(clone, el.firstChild);
+
+				if (el.parentNode) {
+					const markdownRoot = el.parentNode.parentNode;
+					if (markdownRoot) {
+						const maxHeight = markdownRoot.dataset.maxHeight;
+						if (maxHeight === "auto") {
+							return;
+						}
+						// 注册双击事件
+						const lines = lineNumber.children.length;
+						if (lines < 18) {
+							return;
+						}
+						const parent = el.parentNode;
+						parent.addEventListener("dblclick", (): void => {
+							const isExpand = parent.classList.contains("expand");
+							if (isExpand) {
+								parent.style.maxHeight = maxHeight;
+								parent.classList.remove("expand");
+							} else {
+								parent.style.maxHeight = lines * 22 + "px";
+								parent.classList.add("expand");
+							}
+							const selection = window.getSelection();
+							if (selection) {
+								selection.removeAllRanges();
+							}
+						});
+					}
+				}
+			}
+		});
+
+		/**
+		 * ### 超链渲染方式
+		 *
+		 * 1. 链接前加 ~ 符号会被渲染为新标签打开。例：`[文本](~链接)`
+		 * 3. 没有标题的链接将使用文本作为标题
+		 * 4. 没有链接的会被渲染为 span 标签
+		 */
+		this.renderer.link = function ({ href, title, text }) {
+			title = title ?? text;
+
+			if (!href) {
+				return `<span>${text}</span>`;
+			}
+			// 新标签打开
+			let target = "_self";
+			if (href.startsWith("~")) {
+				target = "_blank";
+				href = href.substring(1);
+			}
+			// 内部资源链接
+			if (href.indexOf("@") !== -1) {
+				href = Toolkit.toResURL(href);
+			}
+			{
+				// 处理嵌套 markdown，这可能不是最优解
+				const tokens = (marked.lexer(text, { inline: true } as any) as any)[0].tokens;
+				text = this.parser.parseInline(tokens);
+			}
+			return `<a href="${href}" target="${target}" title="${title}">${text}</a>`;
+		};
+
+		/**
+		 * ### 重点内容扩展
+		 *
+		 * ```md
+		 * 默认 `文本` 表现为红色
+		 * 使用 `[red bold]文本` 可以自定义类
+		 * ```
+		 */
+		this.renderer.codespan = ({ text }) => {
+			const clazz = text.match(/\[(.+?)]/);
+			if (clazz) {
+				return `<span class="${clazz[1]}">${text.substring(text.indexOf("]") + 1)}</span>`;
+			} else {
+				return `<span class="red">${text}</span>`;
+			}
+		};
+
+		/**
+		 * ### 组件渲染方式（原为图像渲染方式）
+		 *
+		 * ```md
+		 * [] 内文本以 # 开始时，该组件带边框
+		 * ```
+		 *
+		 * 1. 渲染为网页：`![]($/html/index.html)`
+		 * 2. 渲染为视频：`![](#/media/video.mp4)`
+		 * 3. 渲染为音频：`![](~/media/music.mp3)`
+		 * 4. 渲染为图片：`![](/image/photo.png)`
+		 * 6. 带边框图片：`![#图片Alt](/image/photo.png)`
+		 */
+		this.renderer.image = ({ href, title, text }) => {
+			const clazz = ["media"];
+
+			const hasBorder = text[0] === "#";
+			if (hasBorder) {
+				clazz.push("border");
+			}
+			title = title ?? text;
+
+			const extendTags = ["~", "#", "$"];
+			let extendTag;
+			if (extendTags.indexOf(href.charAt(0)) !== -1) {
+				extendTag = href.charAt(0);
+			}
+
+			// 内部资源链接
+			if (href.indexOf("@") !== -1) {
+				if (extendTag) {
+					href = href.substring(1);
+				}
+				href = Toolkit.toResURL(href);
+			}
+
+			const clazzStr = clazz.join(" ");
+			let elStr;
+			switch (extendTag) {
+				case "~":
+					elStr = `<audio class="${clazzStr}" controls><source type="audio/mp3" src="${href}" title="${title}" /></audio>`;
+					break;
+				case "#":
+					elStr = `<video class="${clazzStr}" controls><source type="video/mp4" src="${href}" title="${title}" /></video>`;
+					break;
+				case "$":
+					elStr = `<iframe class="${clazzStr}" src="${href}" allowfullscreen title="${title}"></iframe>`;
+					break;
+				default:
+					elStr = `<img class="${clazzStr}" src="${href}" alt="${title}" />`;
+					break;
+			}
+			return elStr + `<span class="media-tips">${title}</span>`;
+		};
+	}
+
+	/**
+	 * ### 解析 Markdown 文本为 HTML 节点
+	 *
+	 * ```js
+	 * const html = toHTML('# Markdown Content');
+	 * ```
+	 *
+	 * @param mkData Markdown 文本
+	 * @returns HTML 节点
+	 */
+	public toHTML(mkData: string | undefined): string | Promise<string> {
+		if (mkData) {
+			return marked(mkData);
+		} else {
+			return "";
+		}
+	}
+
+	public static getInstance(): Markdown {
+		if (!Markdown.instance) {
+			Markdown.instance = new Markdown();
+		}
+		return Markdown.instance;
+	}
+}
--- a/src/utils/MethodLocker.ts
+++ b/src/utils/MethodLocker.ts
@ -0,0 +1,48 @@
+export class MethodLocker<R> {
+	private isLocked: boolean = false;
+	private queue: Array<() => Promise<any>> = [];
+
+	/**
+	 * 执行被锁定的方法
+	 * @param task 需要执行的任务，返回一个 Promise
+	 */
+	async execute(task: () => Promise<R>): Promise<R> {
+		// 如果当前没有被锁定，直接执行任务
+		if (!this.isLocked) {
+			this.isLocked = true;
+			try {
+				return await task();
+			} finally {
+				this.isLocked = false;
+				await this.dequeue();
+			}
+		} else {
+			// 如果被锁定，将任务加入队列并等待
+			return new Promise<R>((resolve, reject) => {
+				this.queue.push(async () => {
+					try {
+						const result = await task();
+						resolve(result);
+					} catch (error) {
+						reject(error);
+					} finally {
+						this.dequeue();
+					}
+				});
+			});
+		}
+	}
+
+	/**
+	 * 处理队列中的下一个任务
+	 */
+	private dequeue(): Promise<R> | undefined {
+		if (this.queue.length > 0) {
+			const nextTask = this.queue.shift();
+			if (nextTask) {
+				return this.execute(nextTask);
+			}
+		}
+		return undefined;
+	}
+}
--- a/src/utils/Network.ts
+++ b/src/utils/Network.ts
@ -0,0 +1,61 @@
+import axios, { InternalAxiosRequestConfig } from "axios";
+import { Response } from "~/types/Model";
+import { Cooker, Time, userStore } from "~/index";
+
+const userTokenInterceptors = async (config: InternalAxiosRequestConfig<any>) => {
+	let token = userStore.loginUser.token?.value;
+	const cookieToken = Cooker.get("Token");
+	if (token && token === cookieToken) {
+		config.headers.set({"Token": token});
+	} else {
+		if (cookieToken) {
+			token = cookieToken;
+			userStore.loginUser.token = {
+				value: token,
+				expireAt: Time.now() + Time.D
+			};
+		}
+		if (token) {
+			await userStore.login4Token({
+				value: token,
+				expireAt: Time.now() + Time.D
+			});
+		}
+	}
+	return config;
+};
+axios.defaults.withCredentials = true;
+axios.interceptors.response.use((response: any) => {
+	if (!response.config.responseType) {
+		// 服务端返回
+		const data = response.data as Response;
+		if (data.code < 40000) {
+			// 200 或 300 HTTP 状态段视为成功
+			return data.data;
+		} else {
+			// 由调用方处理
+			return Promise.reject(data.msg);
+		}
+	}
+	return response.data;
+}, (error: any) => {
+	// 请求错误
+	if (error) {
+		if (error.response && error.response.status) {
+			throw error;
+		}
+		if (error.request) {
+			if (error.message.startsWith("timeout")) {
+				throw new Error("time out");
+			} else {
+				throw new Error(error.message);
+			}
+		}
+	}
+	throw error;
+});
+
+export default {
+	axios,
+	userTokenInterceptors
+};
--- a/src/utils/Prismjs.ts
+++ b/src/utils/Prismjs.ts
@ -0,0 +1,96 @@
+export enum PrismjsType {
+	PlainText = "PlainText",
+	Markdown = "Markdown",
+	JavaScript = "JavaScript",
+	TypeScript = "TypeScript",
+	Initialization = "Initialization",
+	PHP = "PHP",
+	SQL = "SQL",
+	XML = "XML",
+	CSS = "CSS",
+	VUE = "VUE",
+	LESS = "LESS",
+	Markup = "Markup",
+	YAML = "YAML",
+	Json = "Json",
+	Java = "Java",
+	Properties = "Properties",
+	NginxConf = "NginxConf",
+	ApacheConf = "ApacheConf"
+}
+
+export type PrismjsProperties = {
+
+	extensions: string[]
+	prismjs: string;
+	viewer: PrismjsViewer;
+}
+
+export enum PrismjsViewer {
+
+	MARKDOWN = "MARKDOWN",
+
+	CODE = "CODE",
+
+	TEXT = "TEXT",
+}
+
+export default class Prismjs {
+
+	private static instance: Prismjs;
+
+	map = new Map<PrismjsType, PrismjsProperties>();
+
+	private constructor() {
+		this.map.set(PrismjsType.PlainText,      {extensions: ["txt"],         prismjs: "",           viewer: PrismjsViewer.TEXT});
+		this.map.set(PrismjsType.Markdown,       {extensions: ["md"],          prismjs: "md",         viewer: PrismjsViewer.MARKDOWN});
+		this.map.set(PrismjsType.JavaScript,     {extensions: ["js"],          prismjs: "js",         viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.VUE,            {extensions: ["vue"],         prismjs: "html",       viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.TypeScript,     {extensions: ["ts"],          prismjs: "ts",         viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.Initialization, {extensions: ["ini"],         prismjs: "ini",        viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.PHP,            {extensions: ["php"],         prismjs: "php",        viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.SQL,            {extensions: ["sql"],         prismjs: "sql",        viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.XML,            {extensions: ["xml", "fxml"], prismjs: "xml",        viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.CSS,            {extensions: ["css"],         prismjs: "css",        viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.LESS,           {extensions: ["less"],        prismjs: "less",       viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.Markup,         {extensions: ["htm", "html"], prismjs: "markup",     viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.YAML,           {extensions: ["yml", "yaml"], prismjs: "yaml",       viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.Json,           {extensions: ["json"],        prismjs: "json",       viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.Java,           {extensions: ["java"],        prismjs: "java",       viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.Properties,     {extensions: ["properties"],  prismjs: "properties", viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.NginxConf,      {extensions: [],              prismjs: "nginx",      viewer: PrismjsViewer.CODE});
+		this.map.set(PrismjsType.ApacheConf,     {extensions: [],              prismjs: "apacheconf", viewer: PrismjsViewer.CODE});
+	}
+
+	private static getInstance(): Prismjs {
+		if (!Prismjs.instance) {
+			Prismjs.instance = new Prismjs();
+		}
+		return Prismjs.instance;
+	}
+
+	public static typeFromFileName(fileName: string): PrismjsType | undefined {
+		const ext = fileName.substring(fileName.lastIndexOf(".") + 1);
+		if (!ext) {
+			return undefined;
+		}
+		const map = Prismjs.getInstance().map;
+		for (const key of map.keys()) {
+			const value = map.get(key);
+			if (value) {
+				const extensions = value.extensions;
+				for (let i = 0; i < extensions.length; i++) {
+					const extension = extensions[i];
+					if (extension === ext) {
+						return key;
+					}
+				}
+			}
+		}
+		return undefined;
+	}
+
+	public static getFileProperties(type: PrismjsType): PrismjsProperties | undefined {
+		return Prismjs.getInstance().map.get(type);
+	}
+}
--- a/src/utils/Resizer.ts
+++ b/src/utils/Resizer.ts
@ -0,0 +1,83 @@
+/**
+ * ### 浏览器缩放
+ *
+ * 此类对象由 Resizer 注册、触发和销毁
+ *
+ * ```js
+ * new ResizeListener("注册名", () => console.log("回调函数"));
+ * ```
+ */
+class ResizeListener {
+
+	/** 事件名 */
+	name: string;
+
+	/** 回调函数 */
+	listener: (width: number, height: number) => void;
+
+	constructor(name: string, listener: (width: number, height: number) => void) {
+		this.name = name;
+		this.listener = listener;
+	}
+}
+
+/**
+ * ### 浏览器窗体缩放监听触发器
+ *
+ * ```js
+ * Resizer.addListener("Comment", (width: number, height: number) => console.log("缩放中"));
+ * Resizer.removeListener("Comment");
+ * ```
+ */
+export default class Resizer {
+
+	private static instance: Resizer;
+
+	listeners: ResizeListener[];
+
+	private constructor() {
+		this.listeners = [];
+
+		window.addEventListener("resize", resizeEvent => {
+			const width = (resizeEvent.currentTarget as any).innerWidth;
+			const height = (resizeEvent.currentTarget as any).innerHeight;
+			for (const e of this.listeners) {
+				e.listener(width, height);
+			}
+		}, true);
+	}
+
+	private static getInstance(): Resizer {
+		if (!Resizer.instance) {
+			Resizer.instance = new Resizer();
+		}
+		return Resizer.instance;
+	}
+
+	// 添加事件
+	public static addListener(name: string, listener: (width: number, height: number) => void) {
+		const instance = Resizer.getInstance();
+		let e = instance.listeners.find((se) => se.name === name);
+		if (e) {
+			e.listener = listener;
+		} else {
+			instance.listeners.push(e = new ResizeListener(name, listener));
+		}
+		// 默认触发一次
+		e.listener(window.innerWidth, window.innerHeight);
+	}
+
+	// 移除事件
+	public static removeListener(name: string) {
+		const instance = Resizer.getInstance();
+		instance.listeners.splice(instance.listeners.findIndex(e => e.name === name), 1);
+	}
+
+	public static getWidth(): number {
+		return document.documentElement.clientWidth;
+	}
+
+	public static getHeight(): number {
+		return document.documentElement.clientHeight;
+	}
+}
--- a/src/utils/Scroller.ts
+++ b/src/utils/Scroller.ts
@ -0,0 +1,74 @@
+export type ScrollListener = {
+
+	source: Event;
+	viewWidth: number;
+	viewHeight: number;
+	top: number;
+	bottom: number;
+}
+
+export default class Scroller {
+
+	private static instance: Scroller;
+
+	listeners = new Map<string, Function>();
+
+	private constructor() {
+
+		window.addEventListener("scroll", source => {
+			// 滚动距离
+			const top = document.body.scrollTop || document.documentElement.scrollTop;
+			// 可视高度
+			const viewWidth = document.documentElement.clientWidth || document.body.clientWidth;
+			// 可视高度
+			const viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
+			// 滚动高度
+			const sH = document.documentElement.scrollHeight || document.body.scrollHeight;
+			// 触发事件
+			const bottom = sH - top - viewHeight;
+			this.listeners.forEach(listener => listener({
+				source,
+				viewWidth,
+				viewHeight,
+				top,
+				bottom
+			} as ScrollListener));
+		}, true);
+	}
+
+	private static getInstance(): Scroller {
+		if (!Scroller.instance) {
+			Scroller.instance = new Scroller();
+		}
+		return Scroller.instance;
+	}
+
+	/**
+	 * 添加监听
+	 *
+	 * @param name     事件名
+	 * @param listener 监听事件
+	 */
+	public static addListener(name: string, listener: (event: ScrollListener) => void) {
+		Scroller.getInstance().listeners.set(name, listener);
+	}
+
+	/**
+	 * 移除监听
+	 *
+	 * @param name 事件名
+	 */
+	public static removeListener(name: string) {
+		Scroller.getInstance().listeners.delete(name);
+	}
+
+	/** 滚动至顶（平滑地） */
+	public static toTop() {
+		document.body.scrollIntoView({behavior: "smooth"});
+	}
+
+	/** 滚动至指定节点（平滑地） */
+	public static toElement(el: HTMLElement) {
+		el.scrollIntoView({behavior: "smooth"});
+	}
+}
--- a/src/utils/SettingMapper.ts
+++ b/src/utils/SettingMapper.ts
@ -0,0 +1,94 @@
+import { SettingKey } from "~/types/Setting";
+import { readonly, Ref, ref } from "vue";
+import CommonAPI from "~/api/CommonAPI";
+import { RunEnv, Toolkit } from "timi-web";
+
+export default class SettingMapper {
+
+	private static instance: SettingMapper;
+
+	private map = new Map<string, Ref<string>>();
+
+	public static async loadSetting(...settings: { key: string, args?: { [key: string]: any }}[]): Promise<void> {
+		const map = new Map<string, object | undefined>();
+		{
+			// 默认配置
+			map.set(SettingKey.RUN_ENV, undefined);
+			map.set(SettingKey.PUBLIC_RESOURCES, {
+				as: "json"
+			});
+			map.set(SettingKey.DOMAIN_ROOT, undefined);
+			map.set(SettingKey.DOMAIN_API, undefined);
+			map.set(SettingKey.DOMAIN_GIT, undefined);
+			map.set(SettingKey.DOMAIN_BLOG, undefined);
+			map.set(SettingKey.DOMAIN_SPACE, undefined);
+			map.set(SettingKey.DOMAIN_RESOURCE, undefined);
+			map.set(SettingKey.DOMAIN_DOWNLOAD, undefined);
+
+			map.set(SettingKey.ENABLE_COMMENT, undefined);
+			map.set(SettingKey.ENABLE_DEBUG, undefined);
+			map.set(SettingKey.ENABLE_LOGIN, undefined);
+			map.set(SettingKey.ENABLE_REGISTER, undefined);
+			map.set(SettingKey.ENABLE_USER_UPDATE, undefined);
+		}
+		{
+			// 附加配置
+			for (let i = 0; i < settings.length; i++) {
+				map.set(settings[i].key, settings[i].args);
+			}
+		}
+		const instance = this.getInstance();
+		const result = await CommonAPI.listSetting(map);
+		for (const [key, value] of result) {
+			instance.map.set(key, ref(value));
+		}
+	}
+
+	public static is(key: SettingKey | string, args?: { [key: string]: any }): boolean {
+		const value = this.getValueRef(key, args).value;
+		return !value && value === 'true';
+	}
+
+	public static getValue(key: SettingKey | string, args?: { [key: string]: any }): string | undefined {
+		return this.getValueRef(key, args).value;
+	}
+
+	public static getValueRef(key: SettingKey| string, args?: { [key: string]: any }): Ref<string | undefined> {
+		const instance = this.getInstance();
+		let result = instance.map.get(key);
+		if (result) {
+			return result;
+		}
+		instance.map.set(key, result = ref<any>());
+		Toolkit.async(async () => {
+			const value = instance.map.get(key);
+			if (value) {
+				return value.value;
+			}
+			result.value = await CommonAPI.getSetting(key, args);
+		});
+		return readonly(result);
+	}
+
+	public static getDomainLink(domainKey: SettingKey): string | undefined {
+		const runEnv = <RunEnv>(this.getValue(SettingKey.RUN_ENV));
+		let protocol = "https";
+		switch (runEnv) {
+			case RunEnv.DEV:
+				protocol = "http";
+				break;
+			case RunEnv.DEV_SSL:
+			case RunEnv.PROD:
+				protocol = "https";
+				break;
+		}
+		return `${protocol}://${this.getValue(domainKey)}`;
+	}
+
+	public static getInstance(): SettingMapper {
+		if (SettingMapper.instance) {
+			return SettingMapper.instance;
+		}
+		return SettingMapper.instance = new SettingMapper();
+	}
+}
--- a/src/utils/Storage.ts
+++ b/src/utils/Storage.ts
@ -0,0 +1,129 @@
+export default class Storage {
+
+	/**
+	 * 获取为布尔值
+	 *
+	 * @param key 键
+	 * @returns 布尔值
+	 */
+	public static is(key: string): boolean {
+		return this.getString(key) === "true";
+	}
+
+	/**
+	 * 获取为布尔值并取反
+	 *
+	 * @param key 键
+	 * @returns 布尔值
+	 */
+	public static not(key: string): boolean {
+		return !this.is(key);
+	}
+
+	/**
+	 * 读取为指定对象
+	 *
+	 * @template T 对象类型
+	 * @param key 键
+	 * @returns {T | undefined} 返回对象
+	 */
+	public static getObject<T>(key: string): T {
+		if (this.has(key)) {
+			return this.getJSON(key) as T;
+		}
+		throw Error(`not found ${key}`);
+	}
+
+	/**
+	 * 获取值，如果没有则储存并使用默认值
+	 *
+	 * @template T 默认值类型
+	 * @param key 键
+	 * @param def 默认值
+	 * @return {T} 对象
+	 */
+	public static getDefault<T>(key: string, def: T): T {
+		if (this.has(key)) {
+			return this.getJSON(key) as T;
+		}
+		this.setObject(key, def);
+		return def;
+	}
+
+	/**
+	 * 获取为 JSON
+	 *
+	 * @param key 键
+	 * @returns JSON 对象
+	 */
+	public static getJSON(key: string) {
+		return JSON.parse(this.getString(key));
+	}
+
+	/**
+	 * 获取为字符串（其他获取方式一般经过这个方法，找不到配置或配置值无效时会抛错）
+	 *
+	 * @param key 键
+	 * @returns 字符串
+	 */
+	public static getString(key: string): string {
+		const value = localStorage.getItem(key);
+		if (value) {
+			return value;
+		}
+		throw new Error(`not found: ${key}, ${value}`);
+	}
+
+	/**
+	 * 是否存在某配置
+	 *
+	 * @param key 键
+	 * @returns true 为存在
+	 */
+	public static has(key: string): boolean {
+		return localStorage.getItem(key) !== undefined && localStorage.getItem(key) !== null;
+	}
+
+	/**
+	 * 设置值
+	 *
+	 * @param key   键
+	 * @param value 值
+	 */
+	public static setObject(key: string, value: any) {
+		if (value instanceof Object || value instanceof Array) {
+			this.setJSON(key, value);
+		} else {
+			this.setString(key, value);
+		}
+	}
+
+	/**
+	 * 设置 JSON 值
+	 *
+	 * @param key  键
+	 * @param json JSON 字符串
+	 */
+	public static setJSON(key: string, json: any) {
+		localStorage.setItem(key, JSON.stringify(json));
+	}
+
+	/**
+	 * 设置值
+	 *
+	 * @param key   键
+	 * @param value 值
+	 */
+	public static setString(key: string, value: any) {
+		localStorage.setItem(key, value);
+	}
+
+	/**
+	 * 移除属性
+	 *
+	 * @param key 键
+	 */
+	public static remove(key: string) {
+		localStorage.removeItem(key);
+	}
+}
--- a/src/utils/Time.ts
+++ b/src/utils/Time.ts
@ -0,0 +1,97 @@
+export default class Time {
+
+	/** 1 秒时间戳 */
+	public static S = 1E3;
+	/** 1 分钟时间戳 */
+	public static M = Time.S * 60;
+	/** 1 小时时间戳 */
+	public static H = Time.M * 60;
+	/** 1 天时间戳 */
+	public static D = Time.H * 24;
+
+	public static now(): number {
+		return new Date().getTime();
+	}
+
+	/**
+	 * Unix 时间戳转日期
+	 *
+	 * @param unix 时间戳
+	 */
+	public static toDate(unix?: number): string {
+		if (!unix) return "";
+		const d = new Date(unix);
+		return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, "0")}-${d.getDate().toString().padStart(2, "0")}`;
+	}
+
+	/**
+	 * Unix 时间戳转时间
+	 *
+	 * @param unix 时间戳
+	 */
+	public static toTime(unix?: number): string {
+		if (!unix) return "";
+		const d = new Date(unix);
+		return `${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
+	}
+
+	/**
+	 * Unix 时间戳转日期和时间
+	 *
+	 * @param unix 时间戳
+	 */
+	public static toDateTime(unix?: number): string {
+		if (!unix) return "";
+		return `${this.toDate(unix)} ${this.toTime(unix)}`;
+	}
+
+	public static toPassedDate(unix?: number): string {
+		return this.toPassedDateTime(unix, false);
+	}
+
+	public static toPassedDateTime(unix?: number, withDetailTime = true): string {
+		if (!unix) {
+			return "";
+		}
+		const now = new Date().getTime();
+		const between = now - unix;
+
+		if (Time.D * 4 <= between) {
+			return withDetailTime ? this.toDateTime(unix) : this.toDate(unix);
+		} else if (Time.D < between) {
+			return `${Math.floor(between / Time.D)} 天前`;
+		} else if (Time.H < between) {
+			return `${Math.floor(between / Time.H)} 小时前`;
+		} else if (Time.M < between) {
+			return `${Math.floor(between / Time.M)} 分钟前`;
+		} else {
+			return "刚刚";
+		}
+	}
+
+	public static between(begin: Date, end?: Date) : any {
+		if (!end) {
+			end = new Date();
+		}
+		const cs = 1000, cm = 6E4, ch = 36E5, cd = 864E5, cy = 31536E6;
+		const l  = end.getTime() - begin.getTime();
+		const y  = Math.floor(l / cy),
+			  d  = Math.floor((l / cd) - y * 365),
+			  h  = Math.floor((l - (y * 365 + d) * cd) / ch),
+			  m  = Math.floor((l - (y * 365 + d) * cd - h * ch) / cm),
+			  s  = Math.floor((l - (y * 365 + d) * cd - h * ch - m * cm) / cs),
+			  ms = Math.floor(((l - (y * 365 + d) * cd - h * ch - m * cm) / cs - s) * cs);
+		return { l, y, d, h, m, s, ms };
+	}
+
+	public static toMediaTime(seconds: number): string {
+		seconds = Math.floor(seconds);
+		const hours = Math.floor(seconds / 3600);
+		const minutes = Math.floor((seconds % 3600) / 60);
+		const second = seconds % 60;
+		if (0 < hours) {
+			return `${hours}:${minutes.toString().padStart(2, "0")}:${second.toString().padStart(2, "0")}`;
+		}
+		return `${minutes.toString().padStart(2, "0")}:${second.toString().padStart(2, "0")}`;
+	}
+}
--- a/src/utils/Toolkit.ts
+++ b/src/utils/Toolkit.ts
@ -0,0 +1,354 @@
+import type { App } from "vue";
+import type { InstallRecord } from "~/types";
+import { UserLevelType } from "~/types/User";
+import { CommonAPI, SettingKey, SettingMapper } from "~/index";
+
+export default class Toolkit {
+
+	public static isFunction = (val: any) => typeof val === "function";
+	public static isArray = Array.isArray;
+	public static isString = (val: any) => typeof val === "string";
+	public static isSymbol = (val: any) => typeof val === "symbol";
+	public static isObject = (val: any) => val !== null && typeof val === "object";
+	public static isFile = (val: any) => val instanceof File;
+
+	/**
+	 * 添加安装方法
+	 * @example
+	 * ```JS
+	 * import { MeDemo } from './index.vue'
+	 *
+	 * addInstall(MeDemo)
+	 * ```
+	 */
+	public static withInstall = <T>(comp: T): InstallRecord<T> => {
+		const _comp = comp as InstallRecord<T>;
+		_comp.install = (app: App) => {
+			app.component((comp as any).name, _comp);
+		};
+		return _comp;
+	};
+
+	public static guid() {
+		const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
+		return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4() + s4() + s4()}`;
+	}
+
+	public static className(...args: any[]) {
+		const classes = [];
+		for (let i = 0; i < args.length; i++) {
+			const value = args[i];
+			if (!value) continue;
+			if (this.isString(value)) {
+				classes.push(value);
+			} else if (this.isArray(value)) {
+				for (let i = 0; i < value.length; i++) {
+					const inner: any = this.className(value[i]);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (this.isObject(value)) {
+				for (const name in value) {
+					if (value[name]) {
+						classes.push(name);
+					}
+				}
+			}
+		}
+		return classes.join(" ");
+	}
+
+	public static isEmpty(obj: any): boolean {
+		if (this.isString(obj)) {
+			return (obj as string).trim().length === 0;
+		}
+		if (this.isArray(obj)) {
+			return (obj as []).length === 0;
+		}
+		if (this.isFunction(obj)) {
+			return this.isEmpty(obj());
+		}
+		if (this.isObject(obj)) {
+			return obj === undefined || obj === null;
+		}
+		return obj === undefined || obj === null;
+	}
+
+	public static isNotEmpty(obj: any): boolean {
+		return !this.isEmpty(obj);
+	}
+
+	/**
+	 * ### 延时执行
+	 *
+	 * ```js
+	 * await sleep(1E3)
+	 * ```
+	 *
+	 * @param ms 延时毫秒
+	 */
+	public static async sleep(ms: number): Promise<unknown> {
+		return new Promise((resolve) => setTimeout(resolve, ms));
+	}
+
+	/**
+	 * 获取节点属性
+	 *
+	 * @param el   节点
+	 * @param name 属性名
+	 * @returns 属性
+	 */
+	public static getAttribute(el: Element, name: string): string | null {
+		return el.hasAttribute(name) ? el.getAttribute(name) : null;
+	}
+
+	/**
+	 * 转为数字
+	 *
+	 * @param string   字符串
+	 * @param fallback 如果失败，返回该值
+	 * @returns 转换后或转换失败数据
+	 */
+	public static toNumber(string: string, fallback?: number): number {
+		if (!string) return fallback as number;
+		const number = Number(string);
+		return isFinite(number) ? number : fallback as number;
+	}
+
+	/**
+	 * ### 解析字符串为 DOM 节点。此 DOM 字符串必须有且仅有一个根节点
+	 *
+	 * ```js
+	 * toDOM(`
+	 * <div>
+	 *     <p>imyeyu.net</p>
+	 * </div>
+	 * `)
+	 * ```
+	 *
+	 * @param string 字符串
+	 * @returns DOM 节点
+	 */
+	public static toDOM(string: string): Document {
+		return new DOMParser().parseFromString(string, "text/xml");
+	}
+
+	/**
+	 * 异步执行
+	 *
+	 * @param event 函数
+	 */
+	public static async(event: Function) {
+		setTimeout(event, 0);
+	}
+
+	/**
+	 * 生成随机数
+	 *
+	 * @param min     最小值
+	 * @param max     最大值
+	 */
+	public static random(min = 0, max = 100): number {
+		return Math.floor(Math.random() * (max + 1 - min)) + min;
+	}
+
+	/**
+	 * Base64 数据转文件
+	 *
+	 * __需要头部元数据__
+	 *
+	 * __示例:__
+	 * data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA
+	 *
+	 * @param data     Base64 数据
+	 * @param fileName 文件名
+	 * @returns 文件对象
+	 */
+	public static base64ToFile(data: string, fileName: string): File {
+		const splitData = data.split(",");
+		const base64 = atob(splitData[1]);
+		let n = base64.length as number;
+		const u8arr = new Uint8Array(n);
+		while (n--) {
+			u8arr[n] = base64.charCodeAt(n);
+		}
+		return new File([u8arr], fileName, {type: splitData[0].split(":")[1]});
+	}
+
+	/**
+	 * 深克隆对象
+	 *
+	 * @param origin 源对象
+	 * @param target 递归对象
+	 * @returns 克隆对象
+	 */
+	public static deepClone(origin: any, target = {} as any) {
+		const toString = Object.prototype.toString;
+		const arrType = "[object Array]";
+		for (const key in origin) {
+			if (Object.prototype.hasOwnProperty.call(origin, key)) {
+				if (typeof origin[key] === "object" && origin[key] !== null) {
+					target[key] = toString.call(origin[key]) === arrType ? [] : {};
+					this.deepClone(origin[key], target[key]);
+				} else {
+					target[key] = origin[key];
+				}
+			}
+		}
+		return target;
+	}
+
+	public static keyValueString(obj: object, assign: string, split: string): string {
+		let result = "";
+		Object.entries(obj).forEach(([k, v]) => result += k + assign + v + split);
+		return result.substring(0, result.length - split.length);
+	}
+
+	public static toURLArgs(obj?: { [key: string]: any }): string {
+		if (!obj) {
+			return "";
+		}
+		const args: string[] = [];
+		for (const key in obj) {
+			if (Object.prototype.hasOwnProperty.call(obj, key)) {
+				const value = obj[key];
+				if (Array.isArray(value)) {
+					value.forEach((item) => {
+						args.push(`${encodeURIComponent(key)}=${encodeURIComponent(item)}`);
+					});
+				} else {
+					args.push(`${encodeURIComponent(key)}=${encodeURIComponent(value.toString())}`);
+				}
+			}
+		}
+		return args.join("&");
+	}
+
+	public static toObject(map: Map<any, any>): object {
+		return Array.from(map.entries()).reduce((acc, [key, value]) => {
+			acc[key] = value ?? null;
+			return acc;
+		}, {} as { [key: string]: string | undefined });
+	}
+
+	public static uuid(): string {
+		const char = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+		const length = [8, 4, 4, 4, 12];
+		let result = "";
+		for (let i = 0; i < length.length; i++) {
+			for (let j = 0; j < length[i]; j++) {
+				result += char[this.random(0, char.length - 1)];
+			}
+			result += "-";
+		}
+		return result.substring(0, result.length - 1);
+	}
+
+	public static keyFromValue(e: any, value: any): string {
+		return Object.keys(e)[Object.values(e).indexOf(value)];
+	}
+
+	// 防抖
+	// eslint-disable-next-line
+	public static debounce<T extends (...args: any[]) => any>(callback: T, defaultImmediate = true, delay = 600): T & {
+		cancel(): void
+	} {
+		let timerId: ReturnType<typeof setTimeout> | null = null; // 存储定时器
+		let immediate = defaultImmediate;
+		// 定义一个 cancel 办法，用于勾销防抖
+		const cancel = (): void => {
+			if (timerId) {
+				clearTimeout(timerId);
+				timerId = null;
+			}
+		};
+
+		const debounced = function (this: ThisParameterType<T>, ...args: Parameters<T>): void {
+			const context = this;
+			if (timerId) {
+				cancel();
+			}
+			if (immediate) {
+				callback.apply(context, args);
+				immediate = false;
+				timerId = setTimeout(() => {
+					immediate = defaultImmediate;
+				}, delay);
+			} else {
+				// 设置定时器，在延迟时间后执行指标函数
+				timerId = setTimeout(() => {
+					callback.apply(context, args);
+					immediate = defaultImmediate;
+				}, delay);
+			}
+		};
+		// 将 cancel 方法附加到 debounced 函数上
+		(debounced as any).cancel = cancel;
+		return debounced as T & { cancel(): void };
+	}
+
+	public static toUserLevel(exp?: number): UserLevelType {
+		exp = exp ?? 0;
+		const levels = [0, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096];
+		for (let i = 1; i < levels.length; i++) {
+			if (exp < levels[i]) {
+				return {
+					exp,
+					value: i - 1,
+					percent: (exp - levels[i - 1]) / (levels[i] - levels[i - 1]),
+					nextLevelUp: i === levels.length - 1 ? 4096 : levels[i]
+				};
+			}
+		}
+		return { exp, value: 8, percent: 1, nextLevelUp: 4096 };
+	}
+
+	public static toFormData(root?: object): FormData {
+		const form = new FormData();
+		if (!root) {
+			return form;
+		}
+		const run = (parent: string | null, obj: object) => {
+			for (const [key, value] of Object.entries(obj)) {
+				if (this.isObject(value) && !this.isFile(value)) {
+					if (parent) {
+						run(`${parent}.${key}`, value);
+					} else {
+						run(key, value);
+					}
+				} else {
+					if (parent) {
+						form.append(`${parent}.${key}`, value);
+					} else {
+						form.append(key, value);
+					}
+				}
+			}
+		};
+		run(null, root);
+		return form;
+	}
+
+	public static toResURL(val: string): string {
+		const at = val.indexOf("@");
+		const start = val.substring(0, at);
+		const path = val.substring(at + 1);
+		switch (start) {
+			case "res":    return SettingMapper.getDomainLink(SettingKey.DOMAIN_RESOURCE) + path;
+			case "dl":     return SettingMapper.getDomainLink(SettingKey.DOMAIN_DOWNLOAD) + path;
+			case "attach": return CommonAPI.getAttachmentReadAPI(path);
+		}
+		return val;
+	}
+
+	public static format(template: string, variables: { [key: string]: any }): string {
+		return template.replace(/\$\{(\w+)}/g, (_, key) => variables[key]);
+	}
+
+	public static leftClickCallback(event: MouseEvent, callback: Function): void {
+		if (event.button === 0 && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+			callback();
+		}
+	}
+}
--- a/src/utils/directives/Draggable.ts
+++ b/src/utils/directives/Draggable.ts
@ -0,0 +1,130 @@
+import type { Directive, DirectiveBinding } from "vue";
+
+export type DraggableConfig = {
+
+	/** 点下 */
+	onMouseDown?: (e: MouseEvent | TouchEvent) => void;
+
+	/** 中断条件（返回 true 时不触发 onDragging 及往后事件） */
+	interruptWhen?: (e: MouseEvent | TouchEvent) => boolean;
+
+	/** 拖动 */
+	onDragging: (e: MouseEvent | TouchEvent, relX: number, relY: number, offsetX: number, offsetY: number) => void;
+
+	/** 释放 */
+	onDragged?: (e: MouseEvent | TouchEvent, x: number, y: number) => void;
+}
+
+const getEventPosition = (e: MouseEvent | TouchEvent): { clientX: number, clientY: number, pageX: number, pageY: number } => {
+	if ("touches" in e && e.touches.length > 0) {
+		const touch = e.touches[0];
+		return {
+			clientX: touch.clientX,
+			clientY: touch.clientY,
+			pageX: touch.pageX,
+			pageY: touch.pageY
+		};
+	} else if (e instanceof MouseEvent) {
+		return {
+			clientX: e.clientX,
+			clientY: e.clientY,
+			pageX: e.pageX,
+			pageY: e.pageY
+		};
+	}
+	return { clientX: 0, clientY: 0, pageX: 0, pageY: 0 };
+};
+
+const VDraggable: Directive = {
+	// 挂载
+	mounted(el: HTMLElement, binding: DirectiveBinding<DraggableConfig>) {
+		const config = binding.value as DraggableConfig;
+		let isClicked = false, ox = 0, oy = 0, ol = 0, ot = 0, opx = 0, opy = 0;
+
+		// 按下
+		const handleStart = (e: MouseEvent | TouchEvent) => {
+			e.preventDefault();
+
+			const pos = getEventPosition(e);
+			ox = pos.clientX;
+			oy = pos.clientY;
+			ol = el.offsetLeft;
+			ot = el.offsetTop;
+			opx = pos.pageX;
+			opy = pos.pageY;
+
+			config.onMouseDown?.(e);
+			if (config.interruptWhen?.(e)) return;
+
+			isClicked = true;
+		};
+		// 移动
+		const handleMove = (e: MouseEvent | TouchEvent) => {
+			if (!isClicked) {
+				return;
+			}
+			e.preventDefault();
+
+			const pos = getEventPosition(e);
+			const relX = pos.clientX - (ox - ol);
+			const relY = pos.clientY - (oy - ot);
+			const offsetX = pos.pageX - opx;
+			const offsetY = pos.pageY - opy;
+
+			config.onDragging(e, relX, relY, offsetX, offsetY);
+		};
+		// 释放
+		const handleEnd = (e: MouseEvent | TouchEvent) => {
+			if (!isClicked) {
+				return;
+			}
+			const pos = getEventPosition(e);
+			config.onDragged?.(e, pos.clientX - ox, pos.clientY - oy);
+			isClicked = false;
+		};
+
+		(el.style as any)["user-drag"] = "none";
+		(el.style as any)["touch-action"] = "none";
+
+		// 鼠标
+		el.addEventListener("mousedown", handleStart as EventListener);
+		document.addEventListener("mousemove", handleMove as EventListener);
+		document.addEventListener("mouseup", handleEnd as EventListener);
+
+		// 触控
+		el.addEventListener("touchstart", handleStart as EventListener, { passive: false });
+		document.addEventListener("touchmove", handleMove as EventListener, { passive: false });
+		document.addEventListener("touchend", handleEnd as EventListener, { passive: false });
+
+		// 保存事件处理器以便卸载时使用
+		(el as any)._vDraggableHandlers = {
+			handleStart,
+			handleMove,
+			handleEnd
+		};
+	},
+	// 卸载
+	unmounted(el: HTMLElement) {
+		const handlers = (el as any)._vDraggableHandlers as {
+			handleStart: EventListener,
+			handleMove: EventListener,
+			handleEnd: EventListener
+		};
+		if (handlers) {
+			// 鼠标
+			el.removeEventListener("mousedown", handlers.handleStart);
+			document.removeEventListener("mousemove", handlers.handleMove);
+			document.removeEventListener("mouseup", handlers.handleEnd);
+
+			// 触控
+			el.removeEventListener("touchstart", handlers.handleStart);
+			document.removeEventListener("touchmove", handlers.handleMove);
+			document.removeEventListener("touchend", handlers.handleEnd);
+
+			// 引用
+			delete (el as any)._vDraggableHandlers;
+		}
+	}
+};
+
+export default VDraggable;
--- a/src/utils/directives/Popup.ts
+++ b/src/utils/directives/Popup.ts
@ -0,0 +1,120 @@
+import type { Directive, DirectiveBinding } from "vue";
+import Toolkit from "../Toolkit";
+
+export enum PopupType {
+	TEXT,
+	IMG,
+	HTML,
+	EL
+}
+
+/**  */
+export type PopupConfig = {
+
+	type: PopupType,
+	value?: string | HTMLElement;
+	canShow?: () => boolean;
+	beforeShow?: (type: PopupType, value: string | HTMLElement) => Promise<void>;
+	afterHidden?: (type: PopupType, value: string | HTMLElement) => Promise<void>;
+}
+
+// Popup 弹出提示 DOM 节点，全局唯一
+let popup: HTMLElement | null;
+
+const VPopup: Directive = {
+
+	mounted(el: HTMLElement, binding: DirectiveBinding<PopupConfig>) {
+		// 转配置
+		let config: PopupConfig;
+		if (binding.arg && binding.arg === "config") {
+			config = binding.value as PopupConfig;
+		} else {
+			config = {
+				type: PopupType.TEXT,
+				value: binding.value as any as string,
+				canShow: () => true
+			};
+		}
+		// Popup 节点
+		if (!popup) {
+			popup = document.getElementById("tui-popup");
+		}
+		let isShowing = false;
+		// 显示
+		el.addEventListener("mouseenter", async e => {
+			if (!config.value) {
+				console.warn("not found popup value", config);
+				return;
+			}
+			if (config.beforeShow) {
+				await config.beforeShow(config.type, config.value);
+			}
+			if (config.canShow && config.canShow() && popup) {
+				let el: HTMLElement | null = null;
+				if (!config) {
+					el = document.createElement("div");
+					el.className = "text";
+					el.textContent = config as string;
+					popup.appendChild(el);
+				}
+				switch (config.type) {
+					case PopupType.TEXT:
+						// 文本
+						el = document.createElement("div");
+						el.className = "text";
+						el.textContent = config.value as string;
+						popup.appendChild(el);
+						break;
+					case PopupType.IMG:
+						// 图片
+						el = document.createElement("img");
+						(el as HTMLImageElement).src = config.value as string;
+						popup.appendChild(el);
+						break;
+					case PopupType.HTML:
+						// HTML 字符串
+						popup.appendChild(Toolkit.toDOM(config.value as string));
+						break;
+					case PopupType.EL:
+						// DOM 节点
+						if (config.value instanceof HTMLElement) {
+							const valueEl = config.value as HTMLElement;
+							valueEl.style.display = "block";
+							popup.appendChild(valueEl);
+							break;
+						} else {
+							console.error(config);
+							throw new Error("Vue 指令错误：v-popup:el 的值不是 HTML 元素");
+						}
+				}
+				popup.style.left = (e.x + 20) + "px";
+				popup.style.top = (e.y + 14) + "px";
+				popup.style.visibility = "visible";
+				isShowing = true;
+			}
+		}, false);
+		// 移动
+		el.addEventListener("mousemove", async (e) => {
+			if (config.canShow && config.canShow() && isShowing && popup) {
+				popup.style.left = (e.x + 20) + "px";
+				popup.style.top = (e.y + 14) + "px";
+			}
+		}, false);
+		// 隐藏
+		el.addEventListener("mouseleave", async () => {
+			if (popup) {
+				popup.style.visibility = "hidden";
+				popup.innerText = "";
+				popup.style.left = "0px";
+				popup.style.top = "0px";
+
+				// 隐藏后事件
+				if (config.afterHidden && config.value) {
+					await config.afterHidden(config.type, config.value);
+				}
+			}
+		}, false);
+	}
+};
+
+export default VPopup;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,44 @@
+{
+	"compilerOptions": {
+		"target": "ESNext",
+		"module": "ESNext",
+		"moduleResolution": "Node",
+		"useDefineForClassFields": true,
+		"jsx": "preserve",
+		"strict": true,
+		"sourceMap": true,
+		"skipLibCheck": true,
+		"isolatedModules": true,
+		"esModuleInterop": true,
+		"resolveJsonModule": true,
+		"lib": [
+			"ESNext",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"paths": {
+			"~/*": [
+				"./src/*"
+			],
+			"@/*": [
+				"./examples/*"
+			],
+			"timi-web": [
+				"./src/index.ts"
+			]
+		}
+	},
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.d.ts",
+		"src/**/*.vue",
+		"examples/**/*.ts",
+		"examples/**/*.d.ts",
+		"examples/**/*.vue"
+	],
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,11 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"composite": true,
+		"module": "ESNext",
+		"moduleResolution": "Node"
+	},
+	"include": [
+		"vite.config.ts"
+	]
+}
--- a/tsconfig.types.json
+++ b/tsconfig.types.json
@ -0,0 +1,10 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"declaration": true,
+		"emitDeclarationOnly": true
+	},
+	"include": [
+		"src"
+	]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,110 @@
+import { resolve } from "path";
+import { Alias, defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import VueSetupExtend from "vite-plugin-vue-setup-extend";
+import { prismjsPlugin } from "vite-plugin-prismjs";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import dts from "vite-plugin-dts";
+
+const alias: Alias[] = [
+	{
+		find: "@",
+		replacement: resolve(__dirname, "./examples")
+	},
+	{
+		find: "~",
+		replacement: resolve(__dirname, "./src")
+	},
+	{
+		find: "*",
+		replacement: resolve("")
+	},
+	{
+		find: /^timi-web(\/(es|lib))?$/,
+		replacement: resolve(__dirname, "./src/index.ts")
+	}
+];
+
+export default defineConfig({
+	server: {
+		port: 3003,
+		host: true
+	},
+	resolve: {
+		alias
+	},
+	build: {
+		outDir: "dist",
+		lib: {
+			entry: resolve(__dirname, "./src/index.ts"),
+			name: "TimiWeb",
+			fileName: "timi-web"
+		},
+		rollupOptions: {
+			external: [
+				"vue"
+			],
+			output: {
+				globals: {
+					vue: "Vue"
+				}
+			}
+		},
+		minify: "terser",
+		terserOptions: {
+			compress: {
+				// eslint-disable-next-line camelcase
+				drop_console: false,
+				// eslint-disable-next-line camelcase
+				drop_debugger: false
+			}
+		}
+	},
+	plugins: [
+		vue({
+			include: [/\.vue$/, /\.md$/]
+		}),
+		VueSetupExtend(),
+		dts(),
+		prismjsPlugin({
+			languages: [
+				"ini",
+				"php",
+				"sql",
+				"xml",
+				"css",
+				"less",
+				"html",
+				"json",
+				"yaml",
+				"java",
+				"nginx",
+				"javascript",
+				"typescript",
+				"apacheconf",
+				"properties"
+			],
+			plugins: [
+				"line-numbers"
+			],
+			theme: "default",
+			css: true
+		}),
+		AutoImport({
+			imports: [
+				"vue"
+			],
+			dts: "examples/auto-imports.d.ts",
+			eslintrc: {
+				enabled: true,
+				globalsPropValue: true
+			}
+		}),
+		Components({
+			dirs: [
+				"src/components"
+			]
+		})
+	]
+});