feat: 修改页面样式 (#1)

* feat: 修改端口号，修改移动端样式

* feat: 修改样式，修改类型名称

Dockerfile

@@ -15,11 +15,9 @@ WORKDIR /opt/wol
 
 COPY --from=builder /build/wol .
 
-EXPOSE 3000
-VOLUME ["/opt/wol"]
+EXPOSE 3300
 
 ENV RUST_LOG=info \
-  RUST_BACKTRACE=1 \
-  DATA_DIR=/opt/wol/data
+  RUST_BACKTRACE=1
 
 CMD ["/opt/wol/wol"]

README.md

@@ -20,14 +20,14 @@ Wol 是 wake on lan 的简写，是一个轻量、简介的 Wol 管理服务，
 docker pull ghcr.io/nashaofu/wol:latest
 docker run -d \
   --name wol \
-  -p 3000:3000 \
-  -v /path/to:/opt/wol \
+  -p 3300:3300 \
+  -v /path/to/wol.yaml:/opt/wol/yaml \
   ghcr.io/nashaofu/wol:latest
 ```
 
-然后在浏览器中访问 `http://127.0.0.1:3000` 即可使用。
+然后在浏览器中访问 `http://127.0.0.1:3300` 即可使用。
 
-如果需要自定义配置，可将项目根目录下的 `wol.example.yaml` 文件拷贝到 `/opt/wol` 目录下并重命名为 `wol.yaml`，具体配置参考配置章节。
+如果需要自定义配置，可将项目根目录下的 `wol.example.yaml` 文件拷贝到 `/opt/wol` 目录下并重命名为 `wol.yaml`，具体配置参考配置章节，也可以修改启动命令，指定配置文件位置。
 
 ### 系统中使用
 
@@ -48,7 +48,7 @@ docker run -d \
    Usage: wol [OPTIONS]
 
    Options:
-     -p, --port <PORT>      App listen port [default: 3000]
+     -p, --port <PORT>      App listen port [default: 3300]
      -c, --config <CONFIG>  Config file path [default: ./wol.yaml]
      -h, --help             Print help
      -V, --version          Print version
@@ -66,7 +66,7 @@ devices:
   - name: Windows # 设备名称
     mac: 00:00:00:00:00:00 # 设备 mac 地址
     ip: 192.168.1.1 # 设备 ipv4 地址
-    port: 9 # wake on lan 唤醒端口号，一般为9、7 或者 0
+    port: 9 # wake on lan 唤醒端口号，一般为 9、7 或者 0
 ```
 
 ## 贡献指南
@@ -111,4 +111,4 @@ devices:
 
 ## 许可证
 
-Wol 使用 MIT 许可证，详情请参阅 [LICENSE](LICENSE) 文件。
+Wol 使用 Apache 许可证，详情请参阅 [LICENSE](LICENSE) 文件。

src/args.rs

@@ -9,7 +9,7 @@ lazy_static! {
 #[command(author, version, about, long_about = None)]
 pub struct Args {
   /// App listen port
-  #[arg(short, long, default_value_t = 3000)]
+  #[arg(short, long, default_value_t = 3300)]
   pub port: u16,
 
   /// Config file path

web/rspack.config.js

@@ -32,7 +32,7 @@ module.exports = {
   devServer: {
     historyApiFallback: true,
     proxy: {
-      "/api": "http://127.0.0.1:3000",
+      "/api": "http://127.0.0.1:3300",
     },
   },
   module: {

web/src/components/Device/index.tsx → web/src/components/DeviceCard/index.tsx

@@ -9,7 +9,7 @@ import {
 } from '@ant-design/icons';
 import useSWR from 'swr';
 import { get } from 'lodash-es';
-import { IDevice, IDeviceStatus } from '@/types/device';
+import { Device, DeviceStatus } from '@/types/device';
 import useMessage from '@/hooks/useMessage';
 import useModal from '@/hooks/useModal';
 import DeviceEdit from '../DeviceEdit';
@@ -18,11 +18,11 @@ import { useDeleteDevice, useWakeDevice } from '@/hooks/useDevices';
 import styles from './index.module.less';
 import fetcher from '@/utils/fetcher';
 
-export interface IDeviceProps {
-  device: IDevice;
+export interface DeviceCardProps {
+  device: Device;
 }
 
-export default function Device({ device }: IDeviceProps) {
+export default function DeviceCard({ device }: DeviceCardProps) {
   const { token } = theme.useToken();
   const message = useMessage();
   const modal = useModal();
@@ -34,7 +34,7 @@ export default function Device({ device }: IDeviceProps) {
     mutate: fetchDeviceStatus,
   } = useSWR(
     `/device/status/${device.ip}`,
-    (url) => fetcher.get<unknown, IDeviceStatus>(url),
+    (url) => fetcher.get<unknown, DeviceStatus>(url),
     {
       refreshInterval: 7000,
     },
@@ -108,7 +108,7 @@ export default function Device({ device }: IDeviceProps) {
           <div className={styles.name}>{device.name}</div>
           <div className={styles.mac}>{device.mac}</div>
         </div>
-        {status === IDeviceStatus.Online && (
+        {status === DeviceStatus.Online && (
           <div
             className={styles.online}
             style={{

web/src/components/DeviceEdit/index.tsx

@@ -3,14 +3,14 @@ import {
   Form, Input, Modal, InputNumber,
 } from 'antd';
 import { get } from 'lodash-es';
-import { IDevice } from '@/types/device';
+import { Device } from '@/types/device';
 import useMessage from '@/hooks/useMessage';
 import { useAddDevice, useUpdateDevice } from '@/hooks/useDevices';
 
-export type IDeviceEditModel = Omit<IDevice, 'uid'>;
+export type DeviceEditModel = Omit<Device, 'uid'>;
 
-export interface IDeviceEditProps {
-  device?: IDevice | null;
+export interface DeviceEditProps {
+  device?: Device | null;
   open: boolean;
   onOk: () => unknown;
   onCancel: () => unknown;
@@ -21,8 +21,8 @@ export default function DeviceEdit({
   open,
   onOk,
   onCancel,
-}: IDeviceEditProps) {
-  const [form] = Form.useForm<IDeviceEditModel>();
+}: DeviceEditProps) {
+  const [form] = Form.useForm<DeviceEditModel>();
   const message = useMessage();
   const { isMutating: addDeviceLoading, trigger: addDevice } = useAddDevice({
     onSuccess: () => {

web/src/components/ErrorBoundary/index.tsx

@@ -1,19 +1,19 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
 import ErrorElement from '../ErrorElement';
 
-export interface IErrorBoundaryProps {
+export interface ErrorBoundaryProps {
   children: ReactNode;
 }
 
-export interface IErrorBoundaryState {
+export interface ErrorBoundaryState {
   error: Error | null;
 }
 
 export default class ErrorBoundary extends Component<
-IErrorBoundaryProps,
-IErrorBoundaryState
+ErrorBoundaryProps,
+ErrorBoundaryState
 > {
-  constructor(props: IErrorBoundaryProps) {
+  constructor(props: ErrorBoundaryProps) {
     super(props);
     this.state = { error: null };
   }

web/src/components/ErrorElement/index.tsx

@@ -1,11 +1,11 @@
 import { Button, Result, theme } from 'antd';
 import styles from './index.module.less';
 
-export interface IErrorElementProps {
+export interface ErrorElementProps {
   message?: string;
 }
 
-export default function ErrorElement({ message }: IErrorElementProps) {
+export default function ErrorElement({ message }: ErrorElementProps) {
   const { token } = theme.useToken();
 
   return (

web/src/components/Header/index.module.less

@@ -1,6 +1,7 @@
 .header {
-  height: 64px;
-  background-color: #343a40;
+  @media (max-width: 575px) {
+    padding-inline: 20px;
+  }
 }
 
 .container {
@@ -21,7 +22,7 @@
   align-items: center;
 }
 
-.createDevice {
+.addDevice {
   margin-left: 16px;
   font-size: 20px;
   cursor: pointer;

web/src/components/Header/index.tsx

@@ -31,7 +31,7 @@ export default function Header() {
 
   return (
     <>
-      <Layout.Header>
+      <Layout.Header className={styles.header}>
         <div className={styles.container} style={style}>
           <div className={styles.logo}>Wol</div>
           <div className={styles.buttons}>
@@ -42,7 +42,7 @@ export default function Header() {
               onChange={onThemeValueChange}
             />
             <div
-              className={styles.createDevice}
+              className={styles.addDevice}
               role="button"
               tabIndex={0}
               onClick={actions.setTrue}

web/src/components/Home/index.module.less

@@ -2,15 +2,9 @@
   max-width: 1300px;
   padding: 48px 50px;
   margin: 0 auto;
-}
-
-.container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  max-width: 100%;
-  margin: -24px;
+  @media (max-width: 575px) {
+    padding: 30px 20px;
+  }
 }
 
 .item {

web/src/components/Home/index.tsx

@@ -2,7 +2,7 @@ import {
   Button, Col, Empty, Row, Spin,
 } from 'antd';
 import { useDevices } from '@/hooks/useDevices';
-import Device from '@/components/Device';
+import DeviceCard from '@/components/DeviceCard';
 import DeviceEdit from '../DeviceEdit';
 import useBoolean from '@/hooks/useBoolean';
 import styles from './index.module.less';
@@ -24,14 +24,13 @@ export default function Home() {
           )}
           <Row gutter={[24, 24]}>
             {devices.map((item) => (
-              <Col key={item.uid} span={8} xs={24} sm={24} md={12} lg={8}>
+              <Col key={item.uid} span={8} xs={24} sm={12} md={12} lg={8}>
                 <div className={styles.item}>
-                  <Device device={item} />
+                  <DeviceCard device={item} />
                 </div>
               </Col>
             ))}
           </Row>
-          <div className={styles.container} />
         </div>
       </Spin>
       <DeviceEdit

web/src/hooks/useBoolean.ts

@@ -1,14 +1,14 @@
 import { useMemo, useState } from 'react';
 
-type IUseBooleanOpts = boolean | (() => boolean);
-interface IUseBooleanAction {
+type UseBooleanOpts = boolean | (() => boolean);
+interface UseBooleanAction {
   setTrue: () => void;
   setFalse: () => void;
 }
 
 export default function useBoolean(
-  defaultValue: IUseBooleanOpts = false,
-): [boolean, IUseBooleanAction] {
+  defaultValue: UseBooleanOpts = false,
+): [boolean, UseBooleanAction] {
   const [state, setState] = useState(defaultValue);
 
   const actions = useMemo(

web/src/hooks/useDevices.ts

@@ -2,20 +2,20 @@ import useSWR, { SWRConfiguration } from 'swr';
 import useSWRMutation, { SWRMutationConfiguration } from 'swr/mutation';
 import { nanoid } from 'nanoid';
 import fetcher from '@/utils/fetcher';
-import { IDevice } from '@/types/device';
+import { Device } from '@/types/device';
 
 type UseSaveDevicesConfig = SWRMutationConfiguration<
-IDevice[],
+Device[],
 Error,
-IDevice[],
+Device[],
 '/device/save'
 >;
 
-export function useDevices(config?: SWRConfiguration<IDevice[]>) {
-  return useSWR<IDevice[]>(
+export function useDevices(config?: SWRConfiguration<Device[]>) {
+  return useSWR<Device[]>(
     '/device/all',
     async (url) => {
-      const resp = await fetcher.get<unknown, Omit<IDevice, 'uid'>[]>(url);
+      const resp = await fetcher.get<unknown, Omit<Device, 'uid'>[]>(url);
       const devices = resp.map((item) => ({
         ...item,
         uid: nanoid(),
@@ -34,16 +34,16 @@ export function useSaveDevices(config?: UseSaveDevicesConfig) {
   const { mutate } = useDevices();
   return useSWRMutation(
     '/device/save',
-    async (url, { arg }: { arg: IDevice[] }) => {
-      const resp = await fetcher.post<unknown, Omit<IDevice, 'uid'>[]>(
+    async (url, { arg }: { arg: Device[] }) => {
+      const resp = await fetcher.post<unknown, Omit<Device, 'uid'>[]>(
         url,
         arg.map((item) => ({
           ...item,
           uid: undefined,
         })),
       );
 
-      const devices: IDevice[] = resp.map((item) => ({
+      const devices: Device[] = resp.map((item) => ({
         ...item,
         uid: nanoid(),
       }));
@@ -62,7 +62,7 @@ export function useAddDevice(config?: UseSaveDevicesConfig) {
 
   return {
     ...saveDevices,
-    trigger: (device: Omit<IDevice, 'uid'>) => {
+    trigger: (device: Omit<Device, 'uid'>) => {
       devices.push({
         ...device,
         uid: nanoid(),
@@ -79,7 +79,7 @@ export function useUpdateDevice(config?: UseSaveDevicesConfig) {
 
   return {
     ...saveDevices,
-    trigger: (device: IDevice) => {
+    trigger: (device: Device) => {
       const index = devices.findIndex((item) => item.uid === device.uid);
       if (index !== -1) {
         devices[index] = device;
@@ -96,16 +96,16 @@ export function useDeleteDevice(config?: UseSaveDevicesConfig) {
 
   return {
     ...saveDevices,
-    trigger: (device: IDevice) => saveDevices.trigger(devices.filter((item) => item.uid !== device.uid)),
+    trigger: (device: Device) => saveDevices.trigger(devices.filter((item) => item.uid !== device.uid)),
   };
 }
 
 export function useWakeDevice(
-  config?: SWRMutationConfiguration<void, Error, IDevice, '/device/wake'>,
+  config?: SWRMutationConfiguration<void, Error, Device, '/device/wake'>,
 ) {
   return useSWRMutation(
     '/device/wake',
-    async (url, { arg }: { arg: IDevice }) => {
+    async (url, { arg }: { arg: Device }) => {
       await fetcher.post(url, arg);
       // 延迟 10s, 等待机器开机
       await new Promise<void>((resolve) => {

web/src/types/device.ts

@@ -1,12 +1,12 @@
-export interface IDevice {
+export interface Device {
   uid: string;
   name: string;
   mac: string;
   ip: string;
   port: number;
 }
 
-export enum IDeviceStatus {
+export enum DeviceStatus {
   Online = 'Online',
   Offline = 'Offline',
 }