🎉 chore: int project

.eslintrc.cjs

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint').eslint;

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmrc

@@ -0,0 +1,10 @@
+lockfile=false
+public-hoist-pattern[]=*@umijs/lint*
+public-hoist-pattern[]=*changelog*
+public-hoist-pattern[]=*commitlint*
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*postcss*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*remark*
+public-hoist-pattern[]=*semantic-release*
+public-hoist-pattern[]=*stylelint*

.prettierrc.cjs

@@ -0,0 +1 @@
+module.exports = require('@lobehub/lint').prettier;

README.md

@@ -0,0 +1,125 @@
+<a name="readme-top"></a>
+
+<div align="center">
+
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/puzzle-piece.webp">
+<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/one-o-clock.webp">
+
+<h1>Clock Time<br/><sup>LobeChat Plugin</sup></h1>
+
+This plugin show a clock of current time.
+
+[Changelog](./CHANGELOG.md) · [Report Bug][issues-url] · [Request Feature][issues-url]
+
+<!-- SHIELD GROUP -->
+
+[![plugin][plugin-shield]][plugin-url]
+[![releaseDate][release-date-shield]][release-date-url]
+[![ciTest][ci-test-shield]][ci-test-url]
+[![ciRelease][ci-release-shield]][ci-release-url] <br/>
+[![contributors][contributors-shield]][contributors-url]
+[![forks][forks-shield]][forks-url]
+[![stargazers][stargazers-shield]][stargazers-url]
+[![issues][issues-shield]][issues-url]
+
+![](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)
+
+</div>
+
+<details>
+<summary><kbd>Table of contents</kbd></summary>
+
+#### TOC
+
+- [🤯 Usage](#-usage)
+- [⌨️ Local Development](#️-local-development)
+- [🤝 Contributing](#-contributing)
+
+####
+
+</details>
+
+## 🤯 Usage
+
+This is a function calling plugin for [Lobe Chat](https://github.com/lobehub/lobe-chat), you can install it in plugin setting page.
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## ⌨️ Local Development
+
+You can use Gitpod for online development:
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][gitpod-url]
+
+Or clone it for local development:
+
+```bash
+$ git clone https://github.com/lobehub/chat-plugin-clock-time.git
+$ cd lobe-ui
+$ pnpm install
+$ pnpm start
+```
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+## 🤝 Contributing
+
+<!-- CONTRIBUTION GROUP -->
+
+> 📊 Total: <kbd>**3**</kbd>
+
+<a href="https://github.com/arvinxx" title="arvinxx">
+  <img src="https://avatars.githubusercontent.com/u/28616219?v=4" width="50" />
+</a>
+<a href="https://github.com/canisminor1990" title="canisminor1990">
+  <img src="https://avatars.githubusercontent.com/u/17870709?v=4" width="50" />
+</a>
+<a href="https://github.com/lobehubbot" title="lobehubbot">
+  <img src="https://avatars.githubusercontent.com/u/134299653?v=4" width="50" />
+</a>
+
+<!-- CONTRIBUTION END -->
+
+<div align="right">
+
+[![][back-to-top]](#readme-top)
+
+</div>
+
+---
+
+#### 📝 License
+
+Copyright © 2023 [LobeHub][profile-url]. <br />
+This project is [MIT](./LICENSE) licensed.
+
+<!-- LINK GROUP -->
+
+[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
+[ci-release-shield]: https://github.com/lobehub/chat-plugin-clock-time/actions/workflows/release.yml/badge.svg
+[ci-release-url]: https://github.com/lobehub/chat-plugin-clock-time/actions/workflows/release.yml
+[ci-test-shield]: https://github.com/lobehub/chat-plugin-clock-time/actions/workflows/test.yml/badge.svg
+[ci-test-url]: https://github.com/lobehub/chat-plugin-clock-time/actions/workflows/test.yml
+[contributors-shield]: https://img.shields.io/github/contributors/lobehub/chat-plugin-clock-time.svg?style=flat
+[contributors-url]: https://github.com/lobehub/chat-plugin-clock-time/graphs/contributors
+[forks-shield]: https://img.shields.io/github/forks/lobehub/chat-plugin-clock-time.svg?style=flat
+[forks-url]: https://github.com/lobehub/chat-plugin-clock-time/network/members
+[gitpod-url]: https://gitpod.io/#https://github.com/lobehub/chat-plugin-clock-time
+[issues-shield]: https://img.shields.io/github/issues/lobehub/chat-plugin-clock-time.svg?style=flat
+[issues-url]: https://github.com/lobehub/chat-plugin-clock-time/issues/new/choose
+[plugin-shield]: https://img.shields.io/badge/%F0%9F%A4%AF_LobeChat-plugin-cyan
+[plugin-url]: https://github.com/lobehub/lobe-chat-plugins
+[profile-url]: https://github.com/lobehub
+[release-date-shield]: https://img.shields.io/github/release-date/lobehub/chat-plugin-clock-time?style=flat
+[release-date-url]: https://github.com/lobehub/chat-plugin-clock-time/releases
+[stargazers-shield]: https://img.shields.io/github/stars/lobehub/chat-plugin-clock-time.svg?style=flat
+[stargazers-url]: https://github.com/lobehub/chat-plugin-clock-time/stargazers

index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LobeChat Plugin Time</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@lobehub/chat-plugin-clock-time",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite",
+    "lint": "eslint \"{src,api,docs}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@lobehub/ui": "^1.108.2",
+    "antd-style": "^3.5.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-layout-kit": "^1",
+    "zustand": "^4",
+    "zustand-utils": "^1"
+  },
+  "devDependencies": {
+    "@lobehub/lint": "latest",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "prettier": "^3.0.3",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5"
+  }
+}

public/manifest-dev.json

@@ -0,0 +1,20 @@
+{
+  "api": [
+    {
+      "name": "getCurrentTime",
+      "description": "获取当前时间",
+      "parameters": {
+        "type": "object",
+        "properties": {}
+      }
+    }
+  ],
+  "type": "standalone",
+  "identifier": "date-time-dev",
+  "ui": {
+    "url": "http://localhost:5173/",
+    "height": 350,
+    "width": 400
+  },
+  "version": "1"
+}

public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "api": [
+    {
+      "name": "getCurrentTime",
+      "description": "获取当前时间",
+      "parameters": {
+        "type": "object",
+        "properties": {}
+      }
+    }
+  ],
+  "type": "standalone",
+  "identifier": "clock-time",
+  "ui": {
+    "url": "http://localhost:5173/",
+    "height": 350,
+    "width": 400
+  },
+  "version": "1"
+}

src/app.tsx

@@ -0,0 +1,29 @@
+import { FC, useEffect } from 'react';
+import { Center } from 'react-layout-kit';
+
+import Clock from './components/clock';
+import Time from './components/time';
+import { useStore } from './store';
+
+export const App: FC = () => {
+  const { updateTimeAction } = useStore();
+
+  useEffect(() => {
+    const id = setInterval(() => {
+      updateTimeAction();
+    }, 1000);
+
+    return () => {
+      clearInterval(id);
+    };
+  }, []);
+
+  return (
+    <div>
+      <Center padding={32}>
+        <Clock />
+      </Center>
+      <Time />
+    </div>
+  );
+};

src/components/clock/circle/Circle.tsx

@@ -0,0 +1,26 @@
+import { createStyles } from 'antd-style';
+import { FC, PropsWithChildren } from 'react';
+import { Center } from 'react-layout-kit';
+
+const useStyles = createStyles(({ token, isDarkMode }) => {
+  const shadowColor = `hsla(210, 30%, 86%, 1)`;
+
+  return {
+    root: {
+      background: token.colorBgElevated,
+      border: isDarkMode ? `1px solid ${token.colorBorder}` : undefined,
+      borderRadius: '50%',
+      boxShadow: isDarkMode
+        ? `box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px`
+        : `-6px -6px 16px ${token.colorBgContainer}, 6px 6px 16px ${shadowColor}, inset 6px 6px 16px ${shadowColor}, inset -6px -6px 16px ${token.colorBgContainer}`,
+      height: '200px',
+      position: 'relative',
+      width: '200px',
+    },
+  };
+});
+
+export const Circle: FC<PropsWithChildren> = (props) => {
+  const { styles } = useStyles();
+  return <Center className={styles.root}>{props.children}</Center>;
+};

src/components/clock/index.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+
+import { useStore } from '../../store';
+import { Circle } from './circle/Circle';
+import { NeedleHours, NeedleMinutes, NeedleSeconds } from './needles/Needles';
+import { Axis, StickNine, StickSix, StickThree, StickTwelve } from './sticks/Sticks';
+
+const Clock = memo(() => {
+  const { hours, minutes, seconds } = useStore();
+
+  return (
+    <Circle>
+      <StickTwelve />
+      <StickThree />
+      <StickSix />
+      <StickNine />
+      <Axis />
+      <NeedleHours value={hours} />
+      <NeedleMinutes value={minutes} />
+      <NeedleSeconds value={seconds} />
+    </Circle>
+  );
+});
+
+export default Clock;

src/components/clock/needles/Needles.style.ts

@@ -0,0 +1,52 @@
+import { createStyles } from "antd-style";
+
+export const useTimeStyles = createStyles(({ token }) => ({
+  hours: {
+    "&:before": {
+      backgroundColor: token.colorText,
+      borderRadius: ".75rem",
+      content: '""',
+      height: "3rem",
+      position: "absolute",
+      width: ".25rem",
+      zIndex: "var(--z-normal)",
+    },
+    display: "flex",
+    height: "105px",
+    justifyContent: "center",
+    position: "absolute",
+    width: "105px",
+  },
+  minutes: {
+    "&:before": {
+      backgroundColor: token.colorText,
+      borderRadius: ".75rem",
+      content: '""',
+      height: "4rem",
+      position: "absolute",
+      width: ".25rem",
+      zIndex: "var(--z-normal)",
+    },
+    display: "flex",
+    height: "136px",
+    justifyContent: "center",
+    position: "absolute",
+    width: "136px",
+  },
+  seconds: {
+    "&:before": {
+      backgroundColor: token.blue,
+      borderRadius: ".75rem",
+      content: '""',
+      height: "5rem",
+      position: "absolute",
+      width: ".125rem",
+      zIndex: "var(--z-normal)",
+    },
+    display: "flex",
+    height: "130px",
+    justifyContent: "center",
+    position: "absolute",
+    width: "130px",
+  },
+}));