DDYS Widgets

English | 简体中文

DDYS Open API 官方 Web Components 组件库。

官网：低端影视

站长可以把搜索框、最新影片、热门影片、影片日历、影片卡片和片单直接嵌入到任意网站里。

快速开始

<script type="module" src="https://cdn.jsdelivr.net/npm/@ddysiodev/[email protected]/dist/index.js"></script>

<ddys-search></ddys-search>
<ddys-latest limit="12"></ddys-latest>
<ddys-hot></ddys-hot>
<ddys-calendar></ddys-calendar>

CDN 地址：

https://cdn.jsdelivr.net/npm/@ddysiodev/[email protected]/dist/index.js
https://unpkg.com/@ddysiodev/[email protected]/dist/index.js

安装

npm install @ddysiodev/widgets

import { defineDdysWidgets } from '@ddysiodev/widgets';

defineDdysWidgets();

组件

搜索

<ddys-search q="星际" type="movie" per-page="8"></ddys-search>

属性：q、type、placeholder、per-page、min-chars、debounce、instant、show-submit、submit-label、layout。

最新影片

<ddys-latest type="movie" limit="12" layout="grid"></ddys-latest>

属性：limit、type、genre、region、year、layout、columns、show-poster、show-rating。

热门影片

<ddys-hot limit="10" layout="list"></ddys-hot>

属性：limit、type、genre、region、layout、show-sources。

影片日历

<ddys-calendar year="2026" month="7"></ddys-calendar>

属性：year、month、view、show-nav、show-poster、compact。

影片卡片

<ddys-movie-card slug="interstellar" layout="horizontal" show-intro="true"></ddys-movie-card>

属性：slug、layout、show-intro、show-meta、show-sources、poster、title。

片单

<ddys-collection per-page="6"></ddys-collection>
<ddys-collection slug="best-sci-fi" per-page="12"></ddys-collection>

属性：slug、page、per-page、layout、show-description、show-load-more。

全局属性

所有组件都支持：

| 属性 | 默认值 | 说明 | | --- | --- | --- | | api-base | https://ddys.io/api/v1 | API 基础地址 | | site-base | https://ddys.io | 链接基础地址 | | theme | auto | auto、light、dark | | locale | zh-CN | zh-CN、en | | target | _blank | 链接打开方式 | | cache-ttl | 300 | 客户端缓存秒数 | | timeout | 15000 | 请求超时毫秒数 | | compact | false | 紧凑布局 | | hide-brand | false | 隐藏底部来源链接 | | loading-text | 自动 | 自定义加载文案 | | empty-text | 自动 | 自定义空状态文案 | | error-text | 自动 | 自定义错误文案 |

自定义 API 地址

如果网站通过自己的缓存代理转发 DDYS API，可以使用 api-base：

<ddys-latest api-base="https://example.com/ddys-api" limit="12"></ddys-latest>

公开展示组件可以直接使用公开读接口。创建或修改用户数据的功能更适合放在服务端、Worker 或 CMS 后台里实现。

事件

组件会派发可冒泡的 CustomEvent：

| 事件 | detail | | --- | --- | | ddys:ready | { elementName } | | ddys:loading | { endpoint, query } | | ddys:loaded | { endpoint, data, meta } | | ddys:error | { endpoint, message, status } | | ddys:empty | { endpoint, query } | | ddys:select | { item, url } | | ddys:search | { q, type, page } | | ddys:suggest | { q, data } |

document.querySelector('ddys-latest').addEventListener('ddys:loaded', (event) => {
  console.log(event.detail.data);
});

样式定制

组件使用 Shadow DOM，并开放 CSS 变量：

ddys-latest {
  --ddys-color-bg: #ffffff;
  --ddys-color-panel: #fafafa;
  --ddys-color-text: #171717;
  --ddys-color-muted: #666666;
  --ddys-color-border: #e5e5e5;
  --ddys-color-accent: #111111;
  --ddys-radius: 8px;
  --ddys-gap: 12px;
}

常用 part：root、header、title、grid、list、item、poster、meta、link、loading、empty、error、brand。

示例

本地示例在 examples/ 目录：

examples/basic.html
examples/search.html
examples/latest-hot.html
examples/calendar.html
examples/collection.html
examples/custom-theme.html

开发

node scripts/build.mjs
node --test test/*.test.mjs

线上 API smoke test：

node test/live-smoke.mjs