✨ feat: 发现页添加作者和日期时间

src/components/Author/index.tsx

@@ -0,0 +1,37 @@
+import { Space, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { memo } from 'react';
+
+const { Link } = Typography;
+const useStyles = createStyles(({ css, token }) => ({
+  author: css`
+    font-size: ${token.fontSizeSM}px;
+  `,
+  date: css`
+    font-size: ${token.fontSizeSM}px;
+    color: ${token.colorTextDescription};
+  `,
+}));
+
+interface Props {
+  item?: { author: string; createAt: string; homepage: string };
+}
+
+export default memo((props: Props) => {
+  const { item } = props;
+
+  const { styles } = useStyles();
+  return (
+    <Space>
+      <Link
+        aria-label={item?.author}
+        className={styles.author}
+        href={item?.homepage}
+        target={'_blank'}
+      >
+        @{item?.author}
+      </Link>
+      <div className={styles.date}>{item?.createAt}</div>
+    </Space>
+  );
+});

src/components/DanceInfo/index.tsx

@@ -10,11 +10,12 @@ import { useStyles } from './style';
 interface DanceInfoProps {
   actions?: React.ReactNode[];
   dance?: Dance;
+  extra?: React.ReactNode;
 }
 
 const DanceInfo = (props: DanceInfoProps) => {
   const { styles, theme } = useStyles();
-  const { dance, actions = [] } = props;
+  const { dance, actions = [], extra } = props;
   const { name, readme, cover } = dance || {};
 
   return (
@@ -25,6 +26,7 @@ const DanceInfo = (props: DanceInfoProps) => {
         <div className={styles.actions}>
           <Space>{actions}</Space>
         </div>
+        {extra}
       </Center>
       <div className={styles.footer}>
         <div className={styles.desc}>{readme}</div>

src/constants/agent.ts

@@ -1,16 +1,21 @@
-import { Agent } from '@/types/agent';
+import { Agent, CategoryEnum } from '@/types/agent';
 
 export const V_CHAT_DEFAULT_AGENT_ID = 'v-chat-default-market';
 
 export const DEFAULT_AGENT: Agent = {
   agentId: V_CHAT_DEFAULT_AGENT_ID,
+  greeting: '哈喽，亲爱的主人！我是你的私人助理维C，愉快地为你服务！有什么我可以帮你的吗？',
+  createAt: '2023-10-30',
+  author: 'Vidol',
+  homepage: 'https://github.com/lobehub/lobe-vidol',
   meta: {
     avatar: 'https://registry.npmmirror.com/@v-idol/vidol-agent-sample-a/1.0.0/files/avatar.jpg',
     cover: 'https://registry.npmmirror.com/@v-idol/vidol-agent-sample-a/1.0.0/files/cover.jpg',
     description: '维 C 是 Vidol 的默认角色，是你的专属私人助理',
     homepage: 'https://hub.vroid.com/characters/2843975675147313744/models/5644550979324015604',
     model: 'https://registry.npmmirror.com/@v-idol/vidol-agent-sample-a/1.0.0/files/model.vrm',
     name: '维 C',
+    category: CategoryEnum.VROID,
     readme:
       "AvatarSample_Aは、VRoid Studioに付属されているサンプルモデルの１つです。\r\n良識の範囲内で、本モデルに設定されているVRoid Hubの利用条件に沿って利用することができます。\r\nVRoid Hub連携アプリや、外部サービス等でぜひご活用ください。\r\nなお、本モデルはCC0ライセンスではありません、著作権は放棄はしておりませんので予めご了承ください。\r\n本モデルの利用条件は、以下ヘルプ記事をご覧ください。\r\nvroid.pixiv.help/hc/ja/articles/4402394424089\r\n\r\nAvatarSample_A is one of the sample models included in VRoid Studio.\r\nIt can be used in accordance with its VRoid Hub conditions of use, within reason.\r\nFeel free to use this model in applications linked to VRoid Hub and on external services.\r\nPlease note that this model is not under the CC0 license and its copyright has not been waived.\r\nTo learn more about this model's conditions of use, consult the following Help article.\r\nvroid.pixiv.help/hc/en-us/articles/4402394424089",
   },

src/constants/common.ts

@@ -1,6 +1,6 @@
-export const AGENT_INDEX_URL = 'https://market.vidol.chat/agents/index.json';
+export const AGENT_INDEX_URL = 'https://vidol-market.lobehub.com/agents/index.json';
 
-export const DANCE_INDEX_URL = 'https://market.vidol.chat/dances/index.json';
+export const DANCE_INDEX_URL = 'https://vidol-market.lobehub.com/dances/index.json';
 
 export const VIDOL_THEME_APPEARANCE = 'VIDOL_THEME_APPEARANCE';
 export const VIDOL_THEME_NEUTRAL_COLOR = 'VIDOL_THEME_NEUTRAL_COLOR';

src/constants/dance.ts

@@ -4,6 +4,8 @@ export const DEFAULT_DANCE: Dance = {
   danceId: 'vidol-dance-gokuraku',
   name: '極楽浄土',
   createAt: '2023-10-31',
+  author: 'Vidol',
+  homepage: 'https://github.com/lobehub/lobe-vidol',
   src: 'https://registry.npmmirror.com/@v-idol/vidol-dance-gokuraku/1.0.0/files/gokuraku.vmd',
   audio:
     'https://registry.npmmirror.com/@v-idol/vidol-dance-gokuraku/1.0.0/files/Gokuraku jodo.mp3',

src/panels/AgentPanel/Market/Card/index.tsx

@@ -4,6 +4,7 @@ import { createStyles } from 'antd-style';
 import { useRouter } from 'next/navigation';
 import React, { memo, useState } from 'react';
 
+import Author from '@/components/Author';
 import AgentCard from '@/components/agent/AgentCard';
 import SystemRole from '@/components/agent/SystemRole';
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/common';
@@ -101,7 +102,8 @@ const Header = () => {
       <AgentCard
         actions={actions}
         agent={currentAgentItem}
-        footer={<SystemRole systemRole={currentAgentItem?.systemRole} style={{ marginTop: 16 }} />}
+        extra={<Author item={currentAgentItem} />}
+        footer={<SystemRole systemRole={currentAgentItem?.meta.readme} style={{ marginTop: 16 }} />}
       />
     </DraggablePanel>
   );

src/panels/DancePanel/Dance/Card/index.tsx

@@ -5,7 +5,6 @@ import React, { memo, useState } from 'react';
 
 import DanceInfo from '@/components/DanceInfo';
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/common';
-import { PanelContext } from '@/panels/PanelContext';
 import { danceListSelectors, useDanceStore } from '@/store/dance';
 
 const useStyles = createStyles(({ css, token }) => ({
@@ -28,17 +27,16 @@ const SideBar = memo(() => {
     activateDance,
     deactivateDance,
     addAndPlayItem,
-    addPlayItem,
+    addToPlayList,
     unsubscribe,
   ] = useDanceStore((s) => [
     danceListSelectors.showSideBar(s),
     s.activateDance,
     s.deactivateDance,
     s.addAndPlayItem,
-    s.addPlayItem,
+    s.addToPlayList,
     s.unsubscribe,
   ]);
-  const isInPanel = React.useContext(PanelContext);
 
   const currentDance = useDanceStore((s) => danceListSelectors.currentDanceItem(s));
 
@@ -62,32 +60,28 @@ const SideBar = memo(() => {
     >
       <DanceInfo
         actions={[
-          isInPanel ? (
-            <Button
-              key="play"
-              onClick={() => {
-                if (currentDance) {
-                  addAndPlayItem(currentDance);
-                }
-              }}
-              type={'primary'}
-            >
-              播放并添加到列表
-            </Button>
-          ) : (
-            <Button
-              key="play"
-              onClick={() => {
-                if (currentDance) {
-                  addPlayItem(currentDance);
-                  message.success('已添加到播放列表');
-                }
-              }}
-              type={'primary'}
-            >
-              添加到播放列表
-            </Button>
-          ),
+          <Button
+            key="play"
+            onClick={() => {
+              if (currentDance) {
+                addAndPlayItem(currentDance);
+              }
+            }}
+            type={'primary'}
+          >
+            播放
+          </Button>,
+          <Button
+            key="play"
+            onClick={() => {
+              if (currentDance) {
+                addToPlayList(currentDance);
+                message.success('已添加到播放列表');
+              }
+            }}
+          >
+            添加到列表
+          </Button>,
           <Popconfirm
             cancelText="取消"
             description={`确定取消订阅音乐【${currentDance?.name}】吗？`}

src/panels/DancePanel/Market/Card/index.tsx

@@ -1,13 +1,14 @@
 import { DraggablePanel } from '@lobehub/ui';
+import { Button, message } from 'antd';
 import { createStyles } from 'antd-style';
-import { memo, useState } from 'react';
+import React, { memo, useState } from 'react';
 
+import Author from '@/components/Author';
 import DanceInfo from '@/components/DanceInfo';
 import { SIDEBAR_MAX_WIDTH, SIDEBAR_WIDTH } from '@/constants/common';
+import { danceListSelectors, useDanceStore } from '@/store/dance';
 import { marketStoreSelectors, useMarketStore } from '@/store/market';
 
-import SubscribeButton from './SubscribeButton';
-
 const useStyles = createStyles(({ css, token }) => ({
   content: css`
     display: flex;
@@ -31,9 +32,59 @@ const Header = () => {
     ],
   );
 
+  const [subscribe, unsubscribe, subscribed, addAndPlayItem, addToPlayList] = useDanceStore((s) => [
+    s.subscribe,
+    s.unsubscribe,
+    danceListSelectors.subscribed(s),
+    s.addAndPlayItem,
+    s.addToPlayList,
+  ]);
+
   const actions = [];
   if (currentDanceItem) {
-    actions.push(<SubscribeButton dance={currentDanceItem} key="download" />);
+    const isSubscribed = subscribed(currentDanceItem.danceId);
+
+    if (isSubscribed) {
+      actions.push([
+        <Button
+          key="play"
+          onClick={() => {
+            if (currentDanceItem) {
+              addAndPlayItem(currentDanceItem);
+            }
+          }}
+          type={'primary'}
+        >
+          播放
+        </Button>,
+        <Button
+          key="add"
+          onClick={() => {
+            if (currentDanceItem) {
+              addToPlayList(currentDanceItem);
+              message.success('已添加到播放列表');
+            }
+          }}
+        >
+          添加到列表
+        </Button>,
+      ]);
+    }
+
+    actions.push(
+      <Button
+        onClick={() => {
+          if (isSubscribed) {
+            unsubscribe(currentDanceItem.danceId);
+          } else {
+            subscribe(currentDanceItem);
+          }
+        }}
+        type={isSubscribed ? 'default' : 'primary'}
+      >
+        {isSubscribed ? '取消订阅' : '订阅'}
+      </Button>,
+    );
   }
 
   return (
@@ -54,7 +105,11 @@ const Header = () => {
       }}
       placement={'right'}
     >
-      <DanceInfo actions={actions} dance={currentDanceItem} />
+      <DanceInfo
+        actions={actions}
+        dance={currentDanceItem}
+        extra={<Author item={currentDanceItem} />}
+      />
     </DraggablePanel>
   );
 };

src/store/dance/slices/playlist.ts

@@ -15,7 +15,7 @@ export interface PlayListStore {
   /**
    * Add a dance to the playlist.
    */
-  addPlayItem: (dance: Dance) => void;
+  addToPlayList: (dance: Dance) => void;
   /**
    * Clear the playlist.
    */
@@ -64,27 +64,38 @@ export const createPlayListStore: StateCreator<
   PlayListStore
 > = (set, get) => {
   return {
+    /**
+     * Add a dance to the playlist and play it. add to the first.
+     * @param dance
+     */
     addAndPlayItem: (dance) => {
       const { playlist, playItem } = get();
 
       const nextPlayList = produce(playlist, (draftState) => {
         const index = draftState.findIndex((item) => item.name === dance.name);
         if (index === -1) {
           draftState.unshift(dance);
+        } else {
+          draftState.splice(index, 1);
+          draftState.unshift(dance);
         }
       });
 
       set({ playlist: nextPlayList });
 
       playItem(dance);
     },
-    addPlayItem: (dance) => {
+    /**
+     * Add a dance to the playlist. add to the last.
+     * @param dance
+     */
+    addToPlayList: (dance) => {
       const { playlist } = get();
 
       const nextPlayList = produce(playlist, (draftState) => {
         const index = draftState.findIndex((item) => item.name === dance.name);
         if (index === -1) {
-          draftState.unshift(dance);
+          draftState.push(dance);
         }
       });