85 使用装饰器重构插件方法可用性判断 (#88)

* update: 新增EnableCheck装饰器

* update: 更新方法可用性检查装饰器

* update: 更新方法可用性检查装饰器

* update: 使用装饰器检查方法是否可被调用

* update: 删除ruler中的enabled属性

* update: 使用装饰器EnableCheck检查方法是否可用

* update: 更新日志逻辑

---------

Co-authored-by: yanheng <[email protected]>

Author: JessYan0913

packages/core/src/utils/svg.ts

@@ -1,3 +1,5 @@
+import { logger } from '@pictode/utils';
+
 export function generateSVG(shape: 'circle' | 'triangle' | 'diamond', padding: number, size: number, color: string) {
   const svgNS = 'http://www.w3.org/2000/svg';
 
@@ -31,7 +33,7 @@ export function generateSVG(shape: 'circle' | 'triangle' | 'diamond', padding: n
                   Z`;
       break;
     default:
-      console.error('Unsupported shape');
+      logger.error('Unsupported shape');
       return;
   }
 

packages/utils/src/decorator.ts

@@ -1,3 +1,5 @@
+import logger from './logger';
+
 type EnabledTarget = { enabled: boolean };
 
 export function EnabledCheck<T extends EnabledTarget>(target: T, propertyKey: string, descriptor: PropertyDescriptor) {
@@ -7,7 +9,7 @@ export function EnabledCheck<T extends EnabledTarget>(target: T, propertyKey: st
     if (this.enabled) {
       return originalMethod.apply(this, args);
     } else {
-      console.warn(`Method ${propertyKey} is disabled.`);
+      logger.warning(`Method {{${propertyKey}}} is disabled.`);
       // 可以选择抛出错误或执行其他操作
     }
   };

packages/utils/src/files.ts

@@ -1,4 +1,5 @@
 import { EnvironmentError, FileSelectCancelError, IllegalFileError } from './error';
+import logger from './logger';
 
 /**
  * 获取文件后缀
@@ -115,7 +116,7 @@ export const readeFile = <T extends string | ArrayBuffer | null>(fileHandler: Fi
       const size = '(' + Math.floor(event.total / 1000) + ' KB)';
       const progress = Math.floor((event.loaded / event.total) * 100) + '%';
 
-      console.log(`Loading size: ${size} progress: ${progress}`);
+      logger.info(`Loading size: ${size} progress: ${progress}`);
     });
 
     reader.addEventListener('load', (event: FileReaderEventMap['load']) => {

packages/utils/src/index.ts

@@ -24,6 +24,8 @@ export * from './func';
 
 export * from './decorator';
 
+export { default as logger } from './logger';
+
 export const toLine = (name: string = '') => name.replace(/\B([A-Z])/g, '-$1').toLowerCase();
 
 export function replacePropertyWithValue(obj: Record<string | number | symbol, any>, value: any, newValue: any) {

packages/utils/src/logger.ts

@@ -0,0 +1,100 @@
+type LogType = 'warning' | 'info' | 'error';
+
+interface LoggerOptions {
+  warningTitleBgColor?: string;
+  warningKeyColor?: string;
+  infoTitleBgColor?: string;
+  infoKeyColor?: string;
+  errorTitleBgColor?: string;
+  errorKeyColor?: string;
+}
+
+interface LogStyles {
+  title: string;
+  text: string;
+  key: string;
+  end: string;
+}
+
+export class Logger {
+  private productName: string;
+  private styles: Record<LogType, LogStyles>;
+
+  constructor(productName: string, options: LoggerOptions = {}) {
+    this.productName = productName;
+
+    this.styles = {
+      warning: {
+        title: `background-color: ${
+          options.warningTitleBgColor || 'orange'
+        }; color: white; font-weight: bold; padding: 2px 4px; border-radius: 4px 0 0 4px;`,
+        text: 'background-color: black; color: white; font-weight: bold; padding: 2px;',
+        key: `background-color: black; color: ${options.warningKeyColor || 'yellow'}; font-weight: bold; padding: 2px;`,
+        end: 'background-color: black; color: white; font-weight: bold; padding: 2px; border-radius: 0 4px 4px 0;',
+      },
+      info: {
+        title: `background-color: ${
+          options.infoTitleBgColor || 'green'
+        }; color: white; font-weight: bold; padding: 2px 4px; border-radius: 4px 0 0 4px;`,
+        text: 'background-color: black; color: white; padding: 2px;',
+        key: `background-color: black; color: ${options.infoKeyColor || 'lightgreen'}; padding: 2px;`,
+        end: 'background-color: black; color: white; padding: 2px; border-radius: 0 4px 4px 0;',
+      },
+      error: {
+        title: `background-color: ${
+          options.errorTitleBgColor || 'purple'
+        }; color: white; font-weight: bold; padding: 2px 4px; border-radius: 4px 0 0 4px;`,
+        text: 'background-color: black; color: white; padding: 2px;',
+        key: `background-color: black; color: ${options.errorKeyColor || 'red'}; font-weight: bold; padding: 2px;`,
+        end: 'background-color: black; color: white; padding: 2px; border-radius: 0 4px 4px 0;',
+      },
+    };
+  }
+
+  private log(type: LogType, message: string): void {
+    if (!this.styles[type]) {
+      console.error(`Logger: Unknown log type "${type}".`);
+      return;
+    }
+
+    const style = this.styles[type];
+
+    // 查找所有使用模板语法的占位符，并分隔出普通文本和关键字
+    const messageParts = message.split(/(\{{[^}]+}})/).filter(Boolean);
+    const formattedMessage: string[] = [];
+    const formattedStyles: string[] = [];
+
+    messageParts.forEach((part) => {
+      if (part.startsWith('{{') && part.endsWith('}}')) {
+        // 如果是关键字占位符，应用关键字样式
+        formattedMessage.push(`%c${part.slice(2, -2)}`);
+        formattedStyles.push(style.key);
+      } else {
+        // 否则，应用普通文本样式
+        formattedMessage.push(`%c${part}`);
+        formattedStyles.push(style.text);
+      }
+    });
+
+    console.log(
+      `%c${this.productName} - ${type.toUpperCase()}%c ${formattedMessage.join('')}`,
+      style.title,
+      style.text,
+      ...formattedStyles
+    );
+  }
+
+  public warning(message: string): void {
+    this.log('warning', message);
+  }
+
+  public info(message: string): void {
+    this.log('info', message);
+  }
+
+  public error(message: string): void {
+    this.log('error', message);
+  }
+}
+
+export default new Logger('Pictode');