+
+
+
+
+
+
+
diff --git a/src/components/background-effect/style.less b/src/components/background-effect/style.less
new file mode 100644
index 0000000..61e4cdc
--- /dev/null
+++ 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;
+}
diff --git a/src/components/captcha/index.ts b/src/components/captcha/index.ts
new file mode 100644
index 0000000..ec4160b
--- /dev/null
+++ 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;
diff --git a/src/components/captcha/index.vue b/src/components/captcha/index.vue
new file mode 100644
index 0000000..028d2ef
--- /dev/null
+++ b/src/components/captcha/index.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/markdown-editor/CalcTextareaHeight.ts b/src/components/markdown-editor/CalcTextareaHeight.ts
new file mode 100644
index 0000000..c0d3982
--- /dev/null
+++ 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;
+}
diff --git a/src/components/markdown-editor/index.ts b/src/components/markdown-editor/index.ts
new file mode 100644
index 0000000..3b79683
--- /dev/null
+++ 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;
diff --git a/src/components/markdown-editor/index.vue b/src/components/markdown-editor/index.vue
new file mode 100644
index 0000000..dd7d0e5
--- /dev/null
+++ b/src/components/markdown-editor/index.vue
@@ -0,0 +1,192 @@
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/markdown-view/index.ts b/src/components/markdown-view/index.ts
new file mode 100644
index 0000000..38a19fb
--- /dev/null
+++ 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;
diff --git a/src/components/markdown-view/index.vue b/src/components/markdown-view/index.vue
new file mode 100644
index 0000000..c784740
--- /dev/null
+++ b/src/components/markdown-view/index.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
diff --git a/src/components/markdown-view/style.less b/src/components/markdown-view/style.less
new file mode 100644
index 0000000..b618c76
--- /dev/null
+++ 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;
+ }
+ }
+ }
+ }
+}
diff --git a/src/components/popup/index.ts b/src/components/popup/index.ts
new file mode 100644
index 0000000..144dc2d
--- /dev/null
+++ 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;
diff --git a/src/components/popup/index.vue b/src/components/popup/index.vue
new file mode 100644
index 0000000..2c0bda6
--- /dev/null
+++ b/src/components/popup/index.vue
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
diff --git a/src/components/user-level/icon.png b/src/components/user-level/icon.png
new file mode 100644
index 0000000..3f683c6
Binary files /dev/null and b/src/components/user-level/icon.png differ
diff --git a/src/components/user-level/index.ts b/src/components/user-level/index.ts
new file mode 100644
index 0000000..3b4fece
--- /dev/null
+++ 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;
diff --git a/src/components/user-level/index.vue b/src/components/user-level/index.vue
new file mode 100644
index 0000000..b33b7d5
--- /dev/null
+++ b/src/components/user-level/index.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..264cd2b
--- /dev/null
+++ 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
+};
diff --git a/src/store/device.ts b/src/store/device.ts
new file mode 100644
index 0000000..c4f7e80
--- /dev/null
+++ 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
+};
diff --git a/src/store/user.ts b/src/store/user.ts
new file mode 100644
index 0000000..9be2aab
--- /dev/null
+++ b/src/store/user.ts
@@ -0,0 +1,77 @@
+import { LoginResponse, LoginToken, LoginUser, Storage, UserAPI, UserToken } from "timi-web";
+
+const loginUser = reactive
+
+
+
+
+
+
+
+
+ + 源码 + Markdown +
+
+
+
+
+
+
+ 预览
+
+
+ 格式化一个储存容量，保留两位小数 + *
+ * // 返回 100.01 KB + * format(102411, 2); + *+ * + * @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"; + } +} diff --git a/src/utils/IconMapper.ts b/src/utils/IconMapper.ts new file mode 100644 index 0000000..9ffd495 --- /dev/null +++ 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
+ *
+ * `)
+ * ```
+ *
+ * @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: Mapimyeyu.net
+ *