timi/timi-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor Setting

Browse Source
This commit is contained in:
Timi
2026-04-30 11:04:28 +08:00
parent 28f0eabff2
commit ff3297e879
15 changed files with 239 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/api/CommonAPI.ts
View File

@@ -1,7 +1,5 @@
import { TemplateBizType } from "../types";
import Toolkit from "../utils/Toolkit";
import { axios } from "./BaseAPI";
import Text from "../utils/Text";
import {Setting, TemplateBizType} from "../types";
import {axios} from "./BaseAPI";
const getCaptchaAPI = () => axios.defaults.baseURL + "/captcha";
@@ -11,21 +9,28 @@ async function getTemplate(bizType: TemplateBizType, code: string): Promise<stri
return axios.get(`/template?bizType=${bizType}&bizCode=${code}`);
}
async function getSetting(key: string, args?: { [key: string]: any }): Promise<string> {
return axios.get(`/setting/${key}?${Text.urlArgs(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;
async function settingMap(map: Record<string, string[]>): Promise<Map<string, Map<string, Setting>>> {
const raw = await axios.post("/setting/map", map);
const moduleMap = new Map<string, Map<string, Setting>>();
if (!raw || typeof raw !== "object") {
return moduleMap;
}
for (const [module, settingRawMap] of Object.entries(raw as Record<string, unknown>)) {
if (!settingRawMap || typeof settingRawMap !== "object") {
continue;
}
const settingMap = new Map<string, Setting>();
for (const [key, setting] of Object.entries(settingRawMap as Record<string, Setting>)) {
settingMap.set(key, setting);
}
moduleMap.set(module, settingMap);
}
return moduleMap;
}
export default {
getCaptchaAPI,
getAttachmentReadAPI,
getTemplate,
getSetting,
listSetting
settingMap
};

31
src/assets/style/timi-web.less
View File

@@ -127,12 +127,7 @@ textarea {
text-decoration: none !important;
}
/* 文本适当对齐 */
.justify-text {
text-align: justify;
}
/* 模糊玻璃效果：白色 */
// 模糊玻璃效果：白色
.glass-white {
color: var(--eui-black, #000);
background: rgba(255, 255, 255, .8);
@@ -140,7 +135,7 @@ textarea {
-webkit-backdrop-filter: blur(10px);
}
/* 模糊玻璃效果：黑色 */
// 模糊玻璃效果：黑色
.glass-black {
color: var(--eui-white, #FFF);
background: rgba(0, 0, 0, .8);
@@ -153,7 +148,7 @@ textarea {
margin: 0 .5rem;
}
/* 强制换行 */
// 强制换行
.break-all,
.break-all textarea {
word-wrap: break-word;
@@ -161,14 +156,29 @@ textarea {
white-space: normal;
}
/* 文本溢出截断 */
// 文本溢出省略
.clip-text {
flex: 1 1 auto;
overflow: hidden;
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 禁止选择 */
// 文本保持不换行不省略
.keep-text {
flex: none;
min-width: unset;
white-space: nowrap;
text-overflow: unset;
}
// 文本适当对齐
.justify-text {
text-align: justify;
}
// 禁止选择
.diselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -177,6 +187,7 @@ textarea {
user-select: none;
}
// 可选文本
.selectable {
-webkit-touch-callout: default;
-webkit-user-select: text;

12
src/components/copyright/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="tui-copyright">
<div class="tui-copyright" :class="{ 'background': background }">
<p v-text="text"></p>
<p v-if="icp" class="selectable">
<a href="https://beian.miit.gov.cn/" v-text="icp" :title="icp" target="_blank"></a>
@@ -21,8 +21,10 @@ withDefaults(defineProps<{
domain?: string;
author?: string;
text?: string;
background?: boolean;
}>(), {
text: "朝朝频顾惜，夜夜不相忘"
text: "朝朝频顾惜，夜夜不相忘",
background: false,
});
</script>
@@ -33,7 +35,11 @@ withDefaults(defineProps<{
padding: 1rem 0 3rem 0;
font-size: 13px;
text-align: center;
background: url("assets/bottom.png") repeat-x left bottom;
&.background {
padding: 1rem 0;
background: url("assets/bottom.png") repeat-x left bottom;
}
p {
margin: 0;

51
src/types/Setting.ts
View File

@@ -1,28 +1,27 @@
export enum SettingKey {
RUN_ENV = "RUN_ENV",
PUBLIC_RESOURCES = "PUBLIC_RESOURCES",
import {Model} from "./Model";
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",
export type SettingValueType =
| "STRING"
| "SELECT_RADIO"
| "SELECT_CHECKBOX"
| "INTEGER"
| "COLOR"
| "FLOAT"
| "DATE"
| "DATETIME"
| "TIME"
| "DURATION"
| "BOOLEAN"
| "JSON_LIST"
| "JSON_OBJECT"
;
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;
}
export type Setting = {
module: string;
key: string;
title?: string;
description?: string;
value?: string;
valueType: SettingValueType;
valueArgs?: any;
} & Model;

20
src/utils/IOSize.ts
View File

@@ -62,9 +62,9 @@ export default class IOSize {
* @param stopUnit 停止单位
* @return
*/
public static format(size?: number, fixed = 2, stopUnit?: Unit): string {
if (!size) {
return "";
public static format(size?: number | null, fixed = 2, stopUnit?: Unit): string {
if (size === undefined || size === null) {
return "0 B";
}
const units = Object.keys(Unit);
if (0 < size) {
@@ -97,9 +97,9 @@ export default class IOSize {
* @return 字节量
* @throws Error 格式无效
*/
public static parse(sizeStr: string): number {
if (sizeStr.trim() === "") {
throw new Error("not found sizeStr");
public static parse(sizeStr?: string | null): number {
if (sizeStr === undefined || sizeStr === null || sizeStr.trim() === "") {
return 0;
}
// 正则匹配：可选符号 + 数字（含小数点）+ 可选空格 + 单位
const pattern = /([-+]?\d+(?:\.\d+)?)\s*([a-zA-Z]+)/;
@@ -169,8 +169,8 @@ export default class IOSize {
* @param unit 单位
* @return 字节量
*/
private static toBytes(val: number | undefined, unit: Unit): number {
if (!val) {
private static toBytes(val: number | undefined | null, unit: Unit): number {
if (val === undefined || val === null) {
return 0;
}
const units = Object.values(Unit);
@@ -178,8 +178,8 @@ export default class IOSize {
return Math.round(val * Math.pow(1024, ordinal));
}
public static speed(val?: number) {
if (!val) {
public static speed(val?: number | null) {
if (val === undefined || val === null) {
return "";
}
return Text.unit(IOSize.format(val, 2), " / s");

68
src/utils/Markdown.ts
View File

@@ -1,10 +1,9 @@
import { marked } from "marked";
import { gfmHeadingId } from "marked-gfm-heading-id";
import { markedHighlight } from "marked-highlight";
import { mangle } from "marked-mangle";
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 SettingMapper from "./SettingMapper";
export default class Markdown {
@@ -97,10 +96,6 @@ export default class Markdown {
target = "_blank";
href = href.substring(1);
}
// 内部资源链接
if (href.indexOf("@") !== -1) {
href = SettingMapper.toResURL(href);
}
{
// 处理嵌套 markdown，这可能不是最优解
const tokens = (marked.lexer(text, { inline: true } as any) as any)[0].tokens;
@@ -125,61 +120,6 @@ export default class Markdown {
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 = SettingMapper.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>`;
};
}
/**

162
src/utils/SettingMapper.ts
View File

@@ -1,97 +1,99 @@
import { readonly, Ref, ref } from "vue";
import { RunEnv, SettingKey } from "../types";
import Toolkit from "./Toolkit";
import CommonAPI from "../api/CommonAPI";
import {ref, Ref} from "vue";
import {Setting} from "../types";
import {CommonAPI} from "../api";
export default class SettingMapper {
private static instance: SettingMapper;
private map = new Map<string, Ref<string>>();
private moduleMap = new Map<string, Map<string, Ref<Setting>>>();
public static async loadSetting(...settings: (string | { 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);
public static async loadSetting(map: Record<string, string[]>): Promise<void> {
const result = await CommonAPI.settingMap(map);
this.appendSettingMap(result);
}
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++) {
const setting = settings[i];
if (typeof setting === 'string') {
map.set(setting, undefined);
} else {
map.set(setting.key, setting.args);
}
public static appendSettingMap(result: Map<string, Map<string, Setting>>): void {
for (const [module, settingMap] of result) {
for (const [key, setting] of settingMap) {
this.setValue(module, key, setting);
}
}
}
public static createModule(module: string): Map<string, Ref<Setting>> {
const instance = this.getInstance();
const result = await CommonAPI.listSetting(map);
for (const [key, value] of result) {
instance.map.set(key, ref(value));
const moduleVal = instance.moduleMap.get(module);
if (moduleVal) {
return moduleVal;
}
const created = new Map<string, Ref<Setting>>();
instance.moduleMap.set(module, created);
return created;
}
public static is(key: SettingKey | string, args?: { [key: string]: any }): boolean {
const value = this.getValueRef(key, args).value;
return !!value && value === 'true';
public static getModule(module: string): Map<string, Ref<Setting>> | undefined {
return this.getInstance().moduleMap.get(module);
}
public static not(key: SettingKey | string, args?: { [key: string]: any }): boolean {
return !this.is(key, args);
public static hasModule(module: string): boolean {
return this.getInstance().moduleMap.has(module);
}
public static getValue(key: SettingKey | string, args?: { [key: string]: any }): string | undefined {
return this.getValueRef(key, args).value;
public static deleteModule(module: string): boolean {
return this.getInstance().moduleMap.delete(module);
}
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;
public static setModule(module: string, moduleVal: Map<string, Ref<Setting>>): void {
this.getInstance().moduleMap.set(module, moduleVal);
}
public static is(module: string, key: string): boolean {
const setting = this.getValueRef(module, key).value;
return !!setting.value && setting.value === "true";
}
public static not(module: string, key: string): boolean {
return !this.is(module, key);
}
public static getValue(module: string, key: string): Setting {
return this.getValueRef(module, key).value;
}
public static setValue(module: string, key: string, setting: Setting): void {
const moduleVal = this.createModule(module);
const settingRef = moduleVal.get(key);
if (settingRef) {
settingRef.value = setting;
return;
}
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);
moduleVal.set(key, ref(setting));
}
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;
public static setValueRef(module: string, key: string, settingRef: Ref<Setting>): void {
const moduleVal = this.createModule(module);
moduleVal.set(key, settingRef);
}
public static hasValue(module: string, key: string): boolean {
return !!this.getModule(module)?.has(key);
}
public static deleteValue(module: string, key: string): boolean {
return !!this.getModule(module)?.delete(key);
}
public static getValueRef(module: string, key: string): Ref<Setting> {
const moduleVal = this.getModule(module);
if (!moduleVal) {
throw new Error(`Setting module not found: ${module}`);
}
return `${protocol}://${this.getValue(domainKey)}`;
const valueRef = moduleVal.get(key);
if (!valueRef) {
throw new Error(`Setting key not found: ${module}.${key}`);
}
return valueRef;
}
public static getInstance(): SettingMapper {
@@ -100,22 +102,4 @@ export default class SettingMapper {
}
return SettingMapper.instance = new SettingMapper();
}
/**
* 解析资源 URL 协议前缀
*
* @param val 原始值，如 `res@/path/to/file`
* @returns 完整 URL
*/
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;
}
}

21
src/utils/Text.test.ts
View File

@@ -46,20 +46,24 @@ describe("Text", () => {
describe("unit", () => {
it("should format number with fixed and unit", () => {
expect(Text.unitSpace(1.236, 2, "rem")).toBe("1.24 rem");
expect(Text.unitCompact(1.236, "rem", 2)).toBe("1.24rem");
});
it("should format number with fixed and unit not space", () => {
expect(Text.unit(1.236, "rem", 2)).toBe("1.24rem");
expect(Text.unit(1.236, "rem", 2)).toBe("1.24 rem");
});
it("should trim string and append unit", () => {
expect(Text.unit(" 12 ", "px")).toBe("12px");
expect(Text.unit(" 12 ", "px")).toBe("12 px");
});
it("test zero", () => {
expect(Text.unit(0, "毫秒")).toBe("0 毫秒");
});
it("should return empty string for nullish zero and NaN", () => {
expect(Text.unit(null, "px")).toBe("");
expect(Text.unit(undefined, "px")).toBe("");
expect(Text.unit(0, "px")).toBe("");
expect(Text.unit(0, "px")).toBe("0 px");
expect(Text.unit(Number.NaN, "px")).toBe("");
});
});
@@ -83,6 +87,15 @@ describe("Text", () => {
});
});
describe("displayBool", () => {
it("should show boolean text", () => {
expect(Text.displayBool(true)).toBe("true");
expect(Text.displayBool(false)).toBe("false");
expect(Text.displayBool(false, "开启", "关闭")).toBe("关闭");
expect(Text.displayBool(undefined)).toBe("");
});
});
describe("readableColor", () => {
it("should return #FFF for dark backgrounds", () => {
expect(Text.readableColor("#000")).toBe("#FFF");

18
src/utils/Text.ts
View File

@@ -30,12 +30,15 @@ export default class Text {
return template.replace(/\$\{(\w+)}/g, (_, key) => variables[key]);
}
public static unitSpace(val: number | string | null | undefined, fixed = 0, unit: string): string {
public static unitCompact(val: number | string | null | undefined, unit: string, fixed = 0): string {
return this.unit(val, unit, fixed, true);
};
public static unit(val: number | string | null | undefined, unit: string, fixed = 0, space = false): string {
if (!val) {
public static unit(val: number | string | null | undefined, unit: string, fixed = 0, isCompact = false): string {
if (val === null || val === undefined) {
return "";
}
if (typeof val === "string" && !val.trim()) {
return "";
}
const result = [];
@@ -47,7 +50,7 @@ export default class Text {
} else {
result.push(val.trim());
}
if (space) {
if (!isCompact) {
result.push(" ");
}
result.push(unit);
@@ -64,6 +67,13 @@ export default class Text {
return "";
}
public static displayBool(val: boolean | null | undefined, onTrue = "true", onFalse = "false") {
if (val === null || val === undefined) {
return "";
}
return val ? onTrue : onFalse;
}
/** 根据背景色返回更友好的文本色（仅返回 #111 或 #FFF） */
public static readableColor(color: string): "#111" | "#FFF" {
const match = color.trim().match(/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/);

4
src/utils/Time.ts
View File

@@ -92,8 +92,8 @@ export default class Time {
return { l, y, d, h, m, s, ms };
}
public static duration(totalMs?: number, ms?: boolean): string {
if (!totalMs) {
public static duration(totalMs?: number | null | undefined, ms?: boolean): string {
if (totalMs === null || totalMs === undefined) {
return "";
}
let remain = Math.floor(totalMs);