适配主题

Author: rtugeek

public/cn.widgetjs.widgets.hotspot.json

@@ -156,6 +156,38 @@
         }
       ]
     },
+    {
+      "name": "cn.widgetjs.widgets.hotspot.bilibili_rcmd",
+      "title": {
+        "zh-CN": "B站首页推荐"
+      },
+      "description": {
+        "zh-CN": ""
+      },
+      "keywords": [
+        "recommend"
+      ],
+      "security": false,
+      "permissions": [],
+      "lang": "zh-CN",
+      "width": 4,
+      "height": 4,
+      "maxWidth": 4,
+      "webviewTag": false,
+      "maxHeight": 4,
+      "minWidth": 4,
+      "minHeight": 4,
+      "movable": true,
+      "singleton": false,
+      "resizable": true,
+      "path": "/widget/bilibili_rcmd",
+      "meta": {},
+      "backgroundThrottling": true,
+      "previewImage": "修改为组件预览图地址",
+      "categories": [],
+      "supportDeployMode": 17,
+      "routes": []
+    },
     {
       "name": "cn.widgetjs.widgets.hotspot.bilibili",
       "title": {
@@ -248,4 +280,4 @@
     }
   ],
   "pages": []
-}
+}

public/widget.json

@@ -156,6 +156,38 @@
         }
       ]
     },
+    {
+      "name": "cn.widgetjs.widgets.hotspot.bilibili_rcmd",
+      "title": {
+        "zh-CN": "B站首页推荐"
+      },
+      "description": {
+        "zh-CN": ""
+      },
+      "keywords": [
+        "recommend"
+      ],
+      "security": false,
+      "permissions": [],
+      "lang": "zh-CN",
+      "width": 4,
+      "height": 4,
+      "maxWidth": 4,
+      "webviewTag": false,
+      "maxHeight": 4,
+      "minWidth": 4,
+      "minHeight": 4,
+      "movable": true,
+      "singleton": false,
+      "resizable": true,
+      "path": "/widget/bilibili_rcmd",
+      "meta": {},
+      "backgroundThrottling": true,
+      "previewImage": "修改为组件预览图地址",
+      "categories": [],
+      "supportDeployMode": 17,
+      "routes": []
+    },
     {
       "name": "cn.widgetjs.widgets.hotspot.bilibili",
       "title": {
@@ -248,4 +280,4 @@
     }
   ],
   "pages": []
-}
+}

src/widget.package.ts

@@ -2,6 +2,7 @@ import { WidgetPackage } from '@widget-js/core'
 
 const widgetPackage = new WidgetPackage({
   remote: {
+    hostname: 'widgetjs.cn',
     entry: 'https://rtugeek.gitee.io/hotspot',
     hash: true,
     base: '/hotspot',

src/widgets/bilibili/BilibiliWidget.vue

@@ -40,7 +40,7 @@ async function getHotList() {
       <div class="bilibili-header">
         <img src="./images/bilibili_tv.png" style="margin-right: 8px" height="18" alt="">
         <div class="bilibili-title">
-          bilibili热搜
+          Bilibili热搜
         </div>
       </div>
     </template>
@@ -74,7 +74,7 @@ async function getHotList() {
     display: flex;
     flex-direction: row;
     align-items: center;
-    color: #fff;
+    color: var(--widget-color);
     font-size: 14px;
     font-weight: bold;
 

src/widgets/bilibili/images/bilibili_pink.png

@@ -18,25 +18,29 @@ const { height } = useWindowSize()
       <slot name="header" />
     </div>
     <!--  60是标题高度，24是组件上下空白的间距  -->
-    <ElScrollbar :height="height - 60 - 24" :wrap-style="{ backgroundColor: bodyColor, borderRadius: '12px' }">
+    <ElScrollbar :height="height - 60 - 24" :wrap-style="{ borderRadius: '12px' }">
       <div class="hotspot-content">
         <slot name="body" />
       </div>
     </ElScrollbar>
   </div>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss">
 .hotspot-box {
   width: var(--widget-inner-width);
   height: var(--widget-inner-height);
   position: absolute;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background-color: var(widget-background-color);
   font-family: OPPOSans-Bold, 'Microsoft Yahei', serif;
   padding: 16px 16px 16px 16px;
 
+  .hotspot-content{
+    background: color-mix(in srgb, var(--widget-background-color), var(--widget-color) 10%);
+  }
   .hotspot-header {
     position: relative;
     width: 100%;

src/widgets/bilibili/images/bilibili_tv.png

@@ -68,6 +68,7 @@ const positionBackgroundColor = computed(() => {
     height: inherit;
     line-height: inherit;
     overflow: hidden;
+    color: var(--widget-color);
     white-space: nowrap;
     text-overflow: ellipsis;
     cursor: pointer;

src/widgets/components/HotspotBox.vue

@@ -45,7 +45,7 @@ async function getHotList() {
 <template>
   <HotspotBox class="hotspot-box">
     <template #header>
-      <div style="color: white" class="header">
+      <div class="header">
         <svg
           t="1678001437744"
           class="logo"
@@ -103,7 +103,7 @@ async function getHotList() {
   .header {
     display: flex;
     align-content: center;
-
+    color: var(--widget-color);
     .logo {
       width: 18px;
       height: 18px;

src/widgets/components/HotspotItem.vue

@@ -4,7 +4,7 @@ import DouyinWidget from './DouyinWidget.vue'
 </script>
 
 <template>
-  <WidgetWrapper shadow-color="#383a58">
+  <WidgetWrapper>
     <DouyinWidget />
   </WidgetWrapper>
 </template>

src/widgets/douyin/DouyinWidget.vue

@@ -2,29 +2,17 @@
 import axios from 'axios'
 import type { Ref } from 'vue'
 import { nextTick, onMounted, ref } from 'vue'
-import { slice } from 'lodash'
-import dayjs from 'dayjs'
 import { useIntervalFn } from '@vueuse/core'
 import type { ZhihuModel } from './model/ZhihuModel'
 import { ZhihuConvert } from './model/ZhihuModel'
 import HotspotItem from '@/widgets/components/HotspotItem.vue'
 import HotspotBox from '@/widgets/components/HotspotBox.vue'
 
-type NavType = 'hot' | 'news'
-
-const activeNav: Ref<NavType> = ref('hot')
-
 const hotList: Ref<ZhihuModel[]> = ref([])
-const newsList: Ref<ZhihuModel[]> = ref([])
-const viewList: Ref<ZhihuModel[]> = ref([])
 
 onMounted(async () => {
   await nextTick()
   await getHotList()
-  await getNews()
-  const yesterday = dayjs().subtract(1, 'day').format('YYYYMMDD')
-  getBeforeNews(yesterday)
-  handleChangeNav(activeNav.value)
 })
 
 function getUrl(url: string) {
@@ -37,68 +25,31 @@ const service = axios.create({
   timeout: 50000,
 })
 
-const newsService = axios.create({
-  baseURL: 'https://news-at.zhihu.com/',
-  withCredentials: true,
-  timeout: 50000,
-})
-
 // 知乎热榜
 async function getHotList() {
-  const res = await service.get('/api/v3/feed/topstory/hot-lists/total?limit=30&desktop=true')
+  const res = await service.get(
+    '/api/v3/feed/topstory/hot-lists/total?limit=30&desktop=true',
+  )
   const result = ZhihuConvert.hot2Model(res.data.data)
   hotList.value = result
 }
 
-// 知乎日报
-async function getNews() {
-  const res = await newsService.get('/api/4/stories/latest')
-  const result = ZhihuConvert.news2Model(res.data.top_stories)
-  newsList.value = result
-}
-
-// 知乎日报-往日
-async function getBeforeNews(dateStr: string) {
-  const res = await newsService.get(`/api/4/stories/before/${dateStr}`)
-  const result = ZhihuConvert.news2Model(res.data.stories)
-  newsList.value = newsList.value.concat(result)
-}
-
-function handleChangeNav(nav: NavType) {
-  activeNav.value = nav
-  if (nav == 'hot') {
-    viewList.value = slice(Object.assign([], hotList.value), 0, 10)
-  }
-  if (nav == 'news') {
-    viewList.value = slice(Object.assign([], newsList.value), 0, 10)
-  }
-}
-
 useIntervalFn(() => {
   getHotList()
-  getNews()
 }, 20 * 60 * 1000)
 </script>
 
 <template>
   <HotspotBox class="zhihu-box">
     <template #header>
       <div class="zhihu-header">
-        <div class="zhihu-logo" />
-        <div class="zhihu-top-nav">
-          <span class="hot_text zhihu-nav-item" :class="{ active: activeNav == 'hot' }" @click="handleChangeNav('hot')">热榜</span>
-          <span
-            class="news_text zhihu-nav-item"
-            :class="{ active: activeNav == 'news' }"
-            @click="handleChangeNav('news')"
-          >日报</span>
-        </div>
+        知乎热榜
         <div class="zhihu-liukanshan" />
       </div>
     </template>
     <template #body>
       <HotspotItem
-        v-for="(item, index) in viewList"
+        v-for="(item, index) in hotList"
         :key="index"
         :url="getUrl(item.url)"
         :title="item.title"
@@ -107,7 +58,9 @@ useIntervalFn(() => {
         <template #append>
           <div v-if="item.hot" class="zhihu-hot" @click="getUrl(item.url)">
             <span class="mgc_fire_fill" />
-            <span class="zhihu-hot-count">{{ item.hot.replaceAll(' ', '') }}</span>
+            <span class="zhihu-hot-count">{{
+              item.hot.replaceAll(" ", "")
+            }}</span>
           </div>
         </template>
       </HotspotItem>
@@ -120,7 +73,7 @@ useIntervalFn(() => {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  font-family: OPPOSans-Bold, 'Microsoft Yahei', serif;
+  font-family: OPPOSans-Bold, "Microsoft Yahei", serif;
 
   // 顶部
   .zhihu-header {
@@ -133,48 +86,31 @@ useIntervalFn(() => {
     .zhihu-logo {
       width: 35px;
       height: 16px;
-      background-image: url('@/widgets/zhihu/images/logo.svg');
+      background-image: url("@/widgets/zhihu/images/logo.svg");
       background-size: cover;
       position: relative;
       margin-right: 8px;
 
       &::after {
         position: absolute;
-        content: '';
+        content: "";
         width: 2px;
         height: 2px;
-        background-color: #fff;
+        background-color: var(--widget-color);
         border-radius: 2px;
         overflow: hidden;
         right: -8px;
         bottom: 8px;
       }
     }
 
-    .zhihu-top-nav {
-      color: #fff;
-      font-size: 14px;
-
-      .zhihu-nav-item {
-        margin-left: 12px;
-        cursor: pointer;
-      }
-
-      .active {
-        border-radius: 1px;
-        width: 28px;
-        height: 2px;
-        border-bottom: 2px solid rgba(255, 244, 183, 1);
-      }
-    }
-
     .zhihu-liukanshan {
       position: absolute;
       bottom: -10px;
       right: 20px;
       width: 36px;
       height: 36px;
-      background-image: url('@/widgets/zhihu/images/liukanshan.png');
+      background-image: url("@/widgets/zhihu/images/liukanshan.png");
       background-size: cover;
     }
   }