From 8927d1043b0bb69321c65941d5f67c3c979a9712 Mon Sep 17 00:00:00 2001
From: neil <msg@nancode.cn>
Date: Wed, 23 Jul 2025 14:22:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20ServerlessAPIServices=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=BB=98=E8=AE=A4=E4=BC=A0=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ServerlessAPIServices.jsx | 112 +++++++++++++----------
 1 file changed, 62 insertions(+), 50 deletions(-)

diff --git a/src/components/ServerlessAPIServices.jsx b/src/components/ServerlessAPIServices.jsx
index e6714a8..5a3c6a3 100644
--- a/src/components/ServerlessAPIServices.jsx
+++ b/src/components/ServerlessAPIServices.jsx
@@ -205,37 +205,37 @@ function FilterControls({
         }}
       >
         {/* 厂商筛选器 */}
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            minWidth: 0,
-          }}
-        >
-          <label
-            htmlFor="vendor-filter"
-            style={{
-              marginRight: 5,
-              fontSize: isMobile ? '12px' : '14px',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {isMobile ? '厂商：' : '选择厂商：'}
-          </label>
-          <select
-            id="vendor-filter"
-            value={selectedVendor}
-            onChange={(e) => onVendorChange(e.target.value)}
-            style={isMobile ? mobileSelectStyle : selectStyle}
-          >
-            <option value={FILTER_DEFAULTS.ALL}>全部厂商</option>
-            {vendors.map((vendor) => (
-              <option key={vendor} value={vendor}>
-                {vendor}
-              </option>
-            ))}
-          </select>
-        </div>
+        {/*<div*/}
+        {/*  style={{*/}
+        {/*    display: 'flex',*/}
+        {/*    alignItems: 'center',*/}
+        {/*    minWidth: 0,*/}
+        {/*  }}*/}
+        {/*>*/}
+        {/*  <label*/}
+        {/*    htmlFor="vendor-filter"*/}
+        {/*    style={{*/}
+        {/*      marginRight: 5,*/}
+        {/*      fontSize: isMobile ? '12px' : '14px',*/}
+        {/*      whiteSpace: 'nowrap',*/}
+        {/*    }}*/}
+        {/*  >*/}
+        {/*    {isMobile ? '厂商：' : '选择厂商：'}*/}
+        {/*  </label>*/}
+        {/*  <select*/}
+        {/*    id="vendor-filter"*/}
+        {/*    value={selectedVendor}*/}
+        {/*    onChange={(e) => onVendorChange(e.target.value)}*/}
+        {/*    style={isMobile ? mobileSelectStyle : selectStyle}*/}
+        {/*  >*/}
+        {/*    <option value={FILTER_DEFAULTS.ALL}>全部厂商</option>*/}
+        {/*    {vendors.map((vendor) => (*/}
+        {/*      <option key={vendor} value={vendor}>*/}
+        {/*        {vendor}*/}
+        {/*      </option>*/}
+        {/*    ))}*/}
+        {/*  </select>*/}
+        {/*</div>*/}
 
         {/* 分类筛选器 */}
         <div
@@ -294,10 +294,10 @@ function FilterControls({
  */
 function ServicesTable({ services, showOperations, hostUrl }) {
   const renderOperationCell = (operation, ident, createdAt) => (
-    <td width={280} style={{ verticalAlign: 'middle', textAlign: 'right' }}>
-      <span style={{ fontSize: 10 }}>
-        {operation?.vendor_info?.label || '未知厂商'}
-      </span>{' '}
+    <td width={100} style={{ verticalAlign: 'middle', textAlign: 'right' }}>
+      {/*<span style={{ fontSize: 10 }}>*/}
+      {/*  {operation?.vendor_info?.label || '未知厂商'}*/}
+      {/*</span>{' '}*/}
       <a
         title={operation.description}
         href={`${hostUrl}/serverless-api?model=${ident}&operation=${operation.id}`}
@@ -306,11 +306,11 @@ function ServicesTable({ services, showOperations, hostUrl }) {
       >
         {operation.name}
       </a>{' '}
-      <span style={{ fontSize: 10, color: '#666' }}>
-        {new Date(operation.created_at || createdAt).toLocaleDateString(
-          'zh-CN',
-        )}
-      </span>
+      {/*<span style={{ fontSize: 10, color: '#666' }}>*/}
+      {/*  {new Date(operation.created_at || createdAt).toLocaleDateString(*/}
+      {/*    'zh-CN',*/}
+      {/*  )}*/}
+      {/*</span>*/}
     </td>
   );
 
@@ -356,7 +356,7 @@ function ServicesTable({ services, showOperations, hostUrl }) {
           <th>分类</th>
           <th>简介</th>
           {showOperations && (
-            <th style={{ textAlign: 'right' }}>接口（上线时间）</th>
+            <th style={{ textAlign: 'right' }}>接口</th>
           )}
         </tr>
       </thead>
@@ -413,19 +413,28 @@ function ServicesTable({ services, showOperations, hostUrl }) {
 /**
  * URL 参数管理 Hook
  */
-function useURLParams() {
-  const [selectedVendor, setSelectedVendor] = useState(FILTER_DEFAULTS.ALL);
-  const [selectedTag, setSelectedTag] = useState(FILTER_DEFAULTS.ALL);
+function useURLParams(defaultVendor = FILTER_DEFAULTS.ALL, defaultTag = FILTER_DEFAULTS.ALL) {
+  const [selectedVendor, setSelectedVendor] = useState(defaultVendor);
+  const [selectedTag, setSelectedTag] = useState(defaultTag);
 
-  // 初始化：从 URL 读取参数
+  // 初始化：从 URL 读取参数，如果没有则使用默认值
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const vendorParam = urlParams.get(URL_PARAMS.VENDOR);
     const tagParam = urlParams.get(URL_PARAMS.TAG);
 
-    if (vendorParam) setSelectedVendor(vendorParam);
-    if (tagParam) setSelectedTag(tagParam);
-  }, []);
+    if (vendorParam) {
+      setSelectedVendor(vendorParam);
+    } else if (defaultVendor !== FILTER_DEFAULTS.ALL) {
+      setSelectedVendor(defaultVendor);
+    }
+
+    if (tagParam) {
+      setSelectedTag(tagParam);
+    } else if (defaultTag !== FILTER_DEFAULTS.ALL) {
+      setSelectedTag(defaultTag);
+    }
+  }, [defaultVendor, defaultTag]);
 
   // 同步：更新 URL 参数
   useEffect(() => {
@@ -639,14 +648,17 @@ function useFilteredServices(services, selectedVendor, selectedTag) {
 
 /**
  * ServerlessAPIServices 主组件
+ * @param {Object} props - 组件属性
+ * @param {string} [props.defaultVendor] - 默认厂商筛选值
+ * @param {string} [props.defaultTag] - 默认分类筛选值
  */
-export default function ServerlessAPIServices() {
+export default function ServerlessAPIServices({ defaultVendor, defaultTag } = {}) {
   const { siteConfig } = useDocusaurusContext();
   const hostUrl = siteConfig.url;
 
   // 状态管理
   const { selectedVendor, selectedTag, setSelectedVendor, setSelectedTag } =
-    useURLParams();
+    useURLParams(defaultVendor, defaultTag);
   const { loading, services, vendors, tags, showOperations, error } =
     useServicesData(hostUrl);
   const { filteredServices, filteredOpsCount } = useFilteredServices(
-- 
Gitee