feat: add quality template ({{quality|pending}}) renderer

- backend: TemplateRender supports quality template in react and html formats
- frontend: add Quality component using antd Tag with per-value colors

api-v13/app/Http/Api/TemplateRender.php

@@ -177,6 +177,10 @@ class TemplateRender
             case 'category':
                 $result = $this->render_category();
                 break;
+            case 'quality':
+                // 质量标签模版：{{quality|pending}}
+                $result = $this->render_quality();
+                break;
             default:
                 if (mb_substr($tpl_name, 0, 4, 'UTF-8') === 'Tpl:') {
                     $result = $this->render_tpl($tpl_name);
@@ -274,6 +278,49 @@ class TemplateRender
         return $output;
     }
 
+    /**
+     * 渲染质量标签模版：{{quality|pending}}
+     *
+     * 合法的取值只有四个：featured | standard | draft | pending
+     * 非法取值统一回退为 pending，避免渲染出未知样式。
+     */
+    public function render_quality()
+    {
+        // 默认值为 pending，同时支持命名参数 {{quality|value=featured}}
+        $value = $this->get_param($this->param, 'value', 1, 'pending');
+
+        // 校验取值是否合法，不合法则回退到默认值
+        $allowed = ['featured', 'standard', 'draft', 'pending'];
+        if (! in_array($value, $allowed, true)) {
+            $value = 'pending';
+        }
+
+        $props = ['value' => $value];
+
+        $output = [];
+        switch ($this->format) {
+            case 'react':
+                // 前端通过 props 解析，使用 antd Tag 按取值渲染不同颜色
+                $output = [
+                    'props' => base64_encode(\json_encode($props)),
+                    'html' => $value,
+                    'tag' => 'span',
+                    'tpl' => 'quality',
+                ];
+                break;
+            case 'html':
+                // 静态 html 输出，class 包含固定前缀 tag-quality 和具体取值
+                $output = "<span class=\"tag-quality {$value}\">{$value}</span>";
+                break;
+            default:
+                // text / tex / simple 等纯文本格式直接输出取值
+                $output = $value;
+                break;
+        }
+
+        return $output;
+    }
+
     public function getTermProps($word, $tag = null, $channel = null)
     {
         if ($channel && ! empty($channel)) {

dashboard-v6/src/components/template/MdTpl.tsx

@@ -10,6 +10,7 @@ import ParaHandle from "./ParaHandle";
 import ParaShell from "./ParaShell";
 import Paragraph from "./Paragraph";
 import Qa from "./Qa";
+import Quality from "./Quality";
 import Quote from "./Quote";
 import QuoteLink from "./QuoteLink";
 import Reference from "./Reference";
@@ -75,6 +76,8 @@ const Widget = ({ tpl, props, children }: IWidgetMdTpl) => {
       return <Tpl props={props ? props : ""} />;
     case "para":
       return <Para props={props ? props : ""} />;
+    case "quality":
+      return <Quality props={props ? props : ""} />;
     default:
       return <>未定义模版({tpl})</>;
   }

dashboard-v6/src/components/template/Quality.tsx

@@ -0,0 +1,39 @@
+import { Tag } from "antd";
+
+/**
+ * 质量标签取值 -> antd Tag 颜色映射
+ * featured 精选   -> gold    金色
+ * standard 标准   -> green   绿色
+ * draft    草稿   -> default 默认灰色
+ * pending  待定   -> orange  橙色
+ */
+const QUALITY_COLORS: Record<string, string> = {
+  featured: "gold",
+  standard: "green",
+  draft: "default",
+  pending: "orange",
+};
+
+interface IQualityCtl {
+  value?: string;
+}
+
+/**
+ * 渲染单个质量标签
+ * 非法取值回退为默认的 pending，保证样式始终可预期
+ */
+const QualityCtl = ({ value = "pending" }: IQualityCtl) => {
+  const color = QUALITY_COLORS[value] ?? QUALITY_COLORS.pending;
+  return <Tag color={color}>{value}</Tag>;
+};
+
+interface IWidget {
+  props: string;
+}
+
+const Widget = ({ props }: IWidget) => {
+  const prop = JSON.parse(atob(props)) as IQualityCtl;
+  return <QualityCtl {...prop} />;
+};
+
+export default Widget;