mirror of
https://github.com/2234839/web-font.git
synced 2025-04-06 05:25:44 +08:00
✨feat(fontend): 完善界面与功能
This commit is contained in:
崮生
parent
71fbf9dd48
commit
e6b358b731
@ -1,3 +1,9 @@
|
||||
# web font serverless 版
|
||||
|
||||
[在线尝试地址](http://webfontserverless.shenzilong.cn/)
|
||||
|
||||
## 如何使用 ？
|
||||
|
||||
你需要将 ttf 格式的字体包放到 `./apps/backend/.malagu/frontend/font/` 目录下，然后启动项目即可。
|
||||
|
||||
依托于 malagu 本项目即可以在传统服务器上运行，也可以在 serverless 平台上运行。
|
||||
|
||||
@ -3,8 +3,8 @@ targets:
|
||||
|
||||
malagu:
|
||||
serve-static:
|
||||
# apiPath: /*
|
||||
apiPath: /api/*
|
||||
apiPath: /*
|
||||
# apiPath: /api/*
|
||||
|
||||
faas-adapter:
|
||||
customDomain:
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Controller, File, Get, Query } from "@malagu/mvc/lib/node";
|
||||
import { Controller, File, Get, Post, Query } from "@malagu/mvc/lib/node";
|
||||
import { Context } from "@malagu/web/lib/node";
|
||||
import { createHash } from "crypto";
|
||||
//@ts-ignore
|
||||
@ -88,4 +88,9 @@ export class FontMinController {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@Post("font_list")
|
||||
async font_list() {
|
||||
return fs.readdir(font_src);
|
||||
}
|
||||
}
|
||||
|
||||
5
apps/backend/src/rpc.ts
Normal file
5
apps/backend/src/rpc.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import { FontMinController } from "./fontmin";
|
||||
|
||||
export interface Apis {
|
||||
api: FontMinController;
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>web font 字体裁剪</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
BIN
apps/frontend/public/2021.png
Normal file
BIN
apps/frontend/public/2021.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 27 KiB |
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<h1>
|
||||
<h1 class="text-4xl mt-4 mb-3">
|
||||
<img class="h-14" src="/2021.png" alt="logo" />
|
||||
web font 字体裁剪工具 (<a href="https://github.com/cellbang/malagu"
|
||||
>serverless版</a
|
||||
>)
|
||||
>serverless</a
|
||||
>s版)
|
||||
</h1>
|
||||
<label class="flex w-full">
|
||||
<span class="w-1/3 flex-shrink-0">使用该字体的文字：</span>
|
||||
@ -10,19 +11,45 @@
|
||||
</label>
|
||||
<label class="flex w-full">
|
||||
<span class="w-1/3 flex-shrink-0">选择使用的字体：</span>
|
||||
<input disabled type="text" v-model="font" class="flex-1" />
|
||||
<select v-model="font" class="flex-1">
|
||||
<option :value="item" v-for="item in fontList">{{ item }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="flex w-full">
|
||||
<span class="w-1/3 flex-shrink-0">选择字体类型：</span>
|
||||
<input disabled type="text" v-model="type" class="flex-1" />
|
||||
<select v-model="type" class="flex-1">
|
||||
<option value="" class="text-sm">
|
||||
*ttf 与 woff 兼容性要好一些，eoc与svg仅靠下面的css可能还不够
|
||||
</option>
|
||||
<option :value="item" v-for="item in Object.keys(ttfFormatMap)">
|
||||
{{ item }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<span>你可以直接 copy 下面的 css 去使用</span>
|
||||
<textarea v-model="cssCode" disabled :cols="20" :rows="16" class="w-11/12" />
|
||||
<div class="flex flex-col w-full px-4">
|
||||
<span class="text-sm mt-4 self-start">
|
||||
*你可以直接 copy 下面的 css 去使用,打开浏览器的 devTools
|
||||
查看字体文件的体积
|
||||
</span>
|
||||
<textarea v-model="cssCode" disabled :cols="20" :rows="16" class="w-full" />
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<a href="https://github.com/2234839/web-font/tree/serverless"
|
||||
>github repo</a
|
||||
<a
|
||||
class="mr-2"
|
||||
v-for="item in [
|
||||
{
|
||||
href: 'https://github.com/2234839/web-font/tree/serverless',
|
||||
text: 'github repo',
|
||||
},
|
||||
{
|
||||
href: 'https://shenzilong.cn',
|
||||
text: '作者：崮生',
|
||||
},
|
||||
]"
|
||||
:href="item.href"
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
</footer>
|
||||
<div v-html="style" />
|
||||
@ -30,28 +57,45 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from "vue";
|
||||
import { Api } from "./api";
|
||||
import { serverUrl } from "./config";
|
||||
|
||||
const ttfFormatMap = {
|
||||
ttf: "truetype",
|
||||
eot: "",
|
||||
svg: "",
|
||||
woff: "woff",
|
||||
};
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
setup() {
|
||||
console.log("[process]", serverUrl);
|
||||
console.log("[Api]", Api);
|
||||
|
||||
const text = ref("千图小兔体webfont字体裁剪工具(serverless版)");
|
||||
|
||||
const font = ref("千图小兔体.ttf");
|
||||
const fontList = ref<string[]>([]);
|
||||
Api.api.font_list().then((r) => {
|
||||
fontList.value = r;
|
||||
});
|
||||
|
||||
const temp = ref("true");
|
||||
const type = ref("ttf");
|
||||
const type = ref<keyof typeof ttfFormatMap>("ttf");
|
||||
const cssCode = computed(
|
||||
() => `* { font-family: test}\n
|
||||
@font-face {
|
||||
font-family: "test";
|
||||
src: url("http://webfontserverless.shenzilong.cn/api/generate_fonts_dynamically?text=${text.value.trim()}&font=${
|
||||
@font-face {
|
||||
font-family: "test";
|
||||
src: url("${serverUrl}/api/generate_fonts_dynamically?text=${text.value.trim()}&font=${
|
||||
font.value
|
||||
}&temp=${temp.value}&type=${type.value}")
|
||||
format("truetype");
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}`,
|
||||
;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}`,
|
||||
);
|
||||
const style = computed(() => `<style>${cssCode.value}</style>`);
|
||||
return { cssCode, style, text, font, temp, type };
|
||||
return { cssCode, ttfFormatMap, style, text, font, fontList, temp, type };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
25
apps/frontend/src/api.ts
Normal file
25
apps/frontend/src/api.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import type { Apis } from "../../backend/src/rpc";
|
||||
import { serverUrl } from "./config";
|
||||
|
||||
export const Api = generateApi(serverUrl);
|
||||
|
||||
function generateApi(path: string): Apis {
|
||||
return new Proxy<Apis>(generateApi as any, {
|
||||
get(target, p) {
|
||||
if (typeof p === "string") {
|
||||
console.log(p);
|
||||
|
||||
return generateApi(path + "/" + p);
|
||||
} else {
|
||||
throw new Error("错误的 api 属性访问");
|
||||
}
|
||||
},
|
||||
async apply(target, thisArg, argArray) {
|
||||
const r = await fetch(path, {
|
||||
body: JSON.stringify(argArray),
|
||||
method: "POST",
|
||||
});
|
||||
return r.json();
|
||||
},
|
||||
});
|
||||
}
|
||||
4
apps/frontend/src/config.ts
Normal file
4
apps/frontend/src/config.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const serverUrl =
|
||||
import.meta.env.MODE === "development"
|
||||
? "//localhost:3000"
|
||||
: "//webfontserverless.shenzilong.cn";
|
||||
@ -3,9 +3,10 @@
|
||||
@tailwind utilities;
|
||||
|
||||
a {
|
||||
@apply underline hover:text-blue-500;
|
||||
@apply underline text-blue-800 hover:text-blue-500;
|
||||
}
|
||||
|
||||
input {
|
||||
input,
|
||||
select {
|
||||
@apply border;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user