Hello, World!
- `; -}; -console.log('basename', basename, page, app); +bootstrap('#ai-root'); -if (page) { - page.addPage('/', 'home'); - page.subscribe('home', () => { - render({ - renderRoot: document.getElementById('ai-root'), - }); - }); - page.addPage('', 'index'); - page.subscribe('index', () => { - const root = document.getElementById('ai-root') as HTMLElement; - root.innerHTML = ` -Hello, World!
- `; - }); -} - -if (app) { - app - .route({ - path: 'app-template', - key: 'render', - }) - .define(async (ctx) => { - let { renderRoot } = ctx.query; - if (!renderRoot) { - ctx.throw(404, 'renderRoot is required'); - } - if (typeof renderRoot === 'string') { - renderRoot = document.querySelector(renderRoot); - } - if (!renderRoot) { - ctx.throw(404, 'renderRoot not found'); - } - render({ - renderRoot, - }); - }) - .addTo(app); -} diff --git a/packages/resources/src/modules/query.ts b/packages/resources/src/modules/query.ts index f4660b4..5c3e436 100644 --- a/packages/resources/src/modules/query.ts +++ b/packages/resources/src/modules/query.ts @@ -1,3 +1,15 @@ +import { toastLogin } from '@/pages/message/ToastLogin'; import { QueryClient } from '@kevisual/query'; -export const query = new QueryClient(); \ No newline at end of file +export const query = new QueryClient(); + +query.afterResponse = async (response) => { + if (response.code === 401) { + toastLogin(); + return { + ...response, + noMsg: true, + }; + } + return response; +}; diff --git a/packages/resources/src/pages/App.tsx b/packages/resources/src/pages/App.tsx index 8532ba2..61e56c2 100644 --- a/packages/resources/src/pages/App.tsx +++ b/packages/resources/src/pages/App.tsx @@ -5,10 +5,47 @@ import { Left } from './layout/Left'; import { Main } from './main/index'; import { ToastContainer } from 'react-toastify'; import { useSettingsStore } from './store/settings'; -import { CircularProgress } from '@mui/material'; +import { CircularProgress, useTheme } from '@mui/material'; import { useResourceStore } from './store/resource'; +import dayjs from 'dayjs'; +import 'dayjs/locale/zh-cn'; -export const App = () => { +import zhCN from 'antd/locale/zh_CN'; +import ConfigProvider from 'antd/es/config-provider'; + +dayjs.locale('zh-cn'); +export const AntdConfigProvider = ({ children }: { children: React.ReactNode }) => { + const theme = useTheme(); + const primaryColor = theme.palette.primary.main; + const secondaryColor = theme.palette.secondary.main; + return ( +
+
+ );
}
-
+ return <>{children};
+};
+export const App = () => {
return (
出现问题
+加载设置时遇到错误。请重试。
+ +
-
- {resource?.name ? resource.name.replace(prefix, '') : resource?.prefix?.replace(prefix, '')}
-{JSON.stringify(resource, null, 2)}
-
+
+
+
+
+
+ setTab(value)}>
+ {QuickTabs.map((item) => (
+
+
+
+ + {resource?.name ? resource.name.replace(prefix, '') : resource?.prefix?.replace(prefix, '')} +
+
+ {quickCom && quickCom()}
+
+
+ onChange?.(date)} //
+ style={{
+ color: primaryColor,
+ }}
+ popupStyle={{ zIndex: 2000 }}
+ />
+
+ );
+};
diff --git a/packages/resources/src/pages/file/draw/modules/DialogKey.tsx b/packages/resources/src/pages/file/draw/modules/DialogKey.tsx
new file mode 100644
index 0000000..5c3f4ec
--- /dev/null
+++ b/packages/resources/src/pages/file/draw/modules/DialogKey.tsx
@@ -0,0 +1,39 @@
+import { Button, Dialog, DialogContent, DialogTitle, FormControlLabel, TextField } from '@mui/material';
+import { useState } from 'react';
+import { useMetaStore } from './MetaForm';
+export const DialogKey = ({ onAdd }: { onAdd: (key: string) => void }) => {
+ const { openPropertyModal, setOpenPropertyModal } = useMetaStore();
+ const [key, setKey] = useState('');
+ return (
+
+ );
+};
diff --git a/packages/resources/src/pages/file/draw/modules/MetaForm.tsx b/packages/resources/src/pages/file/draw/modules/MetaForm.tsx
new file mode 100644
index 0000000..7505dbf
--- /dev/null
+++ b/packages/resources/src/pages/file/draw/modules/MetaForm.tsx
@@ -0,0 +1,368 @@
+import { useResourceFileStore } from '@/pages/store/resource-file';
+import { FormControlLabel, Box, TextField, Button, IconButton, ButtonGroup, Tooltip, Select, MenuItem, Typography, FormGroup } from '@mui/material';
+import { Info, Plus, Save, Share, Shuffle, Trash } from 'lucide-react';
+import { useState, useEffect, useMemo } from 'react';
+import { toast } from 'react-toastify';
+import { create } from 'zustand';
+import { uniq } from 'lodash-es';
+import { DatePicker } from './DatePicker';
+import { SelectPicker } from './SelectPicker';
+import dayjs from 'dayjs';
+import { DialogKey } from './DialogKey';
+
+export const setShareKeysOperate = (value: 'public' | 'protected' | 'private') => {
+ const keys = ['password', 'usernames', 'expiration-time'];
+ const deleteKeys = keys.map((item) => {
+ return {
+ key: item,
+ operate: 'delete',
+ };
+ });
+ if (value === 'protected') {
+ return deleteKeys.map((item) => {
+ return {
+ ...item,
+ operate: 'add',
+ };
+ });
+ }
+ return deleteKeys;
+};
+export const keysTips = [
+ {
+ key: 'share',
+ tips: `共享设置
+ 1. 设置公共可以直接访问
+ 2. 设置受保护需要登录后访问
+ 3. 设置私有只有自己可以访问。\n
+ 受保护可以设置密码，设置访问的用户名。切换共享状态后，需要重新设置密码和用户名。`,
+ },
+ {
+ key: 'content-type',
+ tips: `内容类型，设置文件的内容类型。默认不要修改。`,
+ },
+ {
+ key: 'app-source',
+ tips: `应用来源，上传方式。默认不要修改。`,
+ },
+ {
+ key: 'cache-control',
+ tips: `缓存控制，设置文件的缓存控制。默认不要修改。`,
+ },
+ {
+ key: 'password',
+ tips: `密码，设置文件的密码。不设置默认是所有人都可以访问。`,
+ },
+ {
+ key: 'usernames',
+ tips: `用户名，设置文件的用户名。不设置默认是所有人都可以访问。`,
+ parse: (value: string) => {
+ if (!value) {
+ return [];
+ }
+ return value.split(',');
+ },
+ stringify: (value: string[]) => {
+ if (!value) {
+ return '';
+ }
+ return value.join(',');
+ },
+ },
+ {
+ key: 'expiration-time',
+ tips: `过期时间，设置文件的过期时间。不设置默认是永久。`,
+ parse: (value: Date) => {
+ if (!value) {
+ return null;
+ }
+ return dayjs(value);
+ },
+ stringify: (value?: dayjs.Dayjs) => {
+ if (!value) {
+ return '';
+ }
+ return value.toISOString();
+ },
+ },
+];
+export class KeyParse {
+ static parse(metadata: Record没有元数据
;
+ }
+
+ const handleFormDataChange = (key: string, value: string | Date | null | string[]) => {
+ // setFormData({ ...formData, [key]: value });
+ const _formData = { ...formData };
+ if (key === 'share') {
+ const shareKeysOperate = setShareKeysOperate(value as 'public' | 'protected' | 'private');
+ shareKeysOperate.forEach((item) => {
+ if (item.operate === 'add') {
+ _formData[item.key] = '';
+ } else if (item.operate === 'delete') {
+ delete _formData[item.key];
+ }
+ });
+ _formData.share = value;
+ setFormData(_formData);
+ const newKeys = keys
+ .map((item) => {
+ const operate = shareKeysOperate.find((item2) => item2.key === item);
+ if (operate && operate.operate === 'delete') {
+ return null;
+ }
+ return item;
+ })
+ .filter((item) => item !== null);
+ const addKeys = shareKeysOperate.filter((item) => item.operate === 'add').map((item) => item.key);
+ const _newKeys = uniq([...newKeys, ...addKeys]);
+ setKeys(_newKeys);
+ console.log(_newKeys);
+ return;
+ } else {
+ _formData[key] = value;
+ }
+ setFormData(_formData);
+ };
+ const deleteMeta = (key: string) => {
+ setKeys(keys.filter((item) => item !== key));
+ delete formData[key];
+ setFormData({ ...formData });
+ };
+ const onSave = () => {
+ const newMetadata = KeyParse.stringify(formData);
+ updateMeta(newMetadata);
+ };
+ const addMetaKey = (key: string) => {
+ if (keys.includes(key)) {
+ toast.error('元数据key已存在');
+ return;
+ }
+ formData[key] = '';
+ setKeys([...keys, key]);
+ setFormData({ ...formData });
+ };
+ const btnList = useMetaOperate({ onSave, metaStore, handleFormDataChange });
+
+ return (
+
+
+
+
+ {keys.map((key) => {
+ let control: React.ReactNode | null = null;
+ if (key === 'share') {
+ control = handleFormDataChange(key, value)} />;
+ } else if (key === 'expiration-time') {
+ control = handleFormDataChange(key, date)} />;
+ } else if (key === 'usernames') {
+ control = handleFormDataChange(key, value)} />;
+ } else {
+ control = handleFormDataChange(key, value)} />;
+ }
+ const Label = () => {
+ const tip = keysTips.find((item) => item.key === key);
+ return (
+
+
+ );
+};
+
+const KeyTextField = ({ name, value, onChange }: { name: string; value: string; onChange?: (value: string) => void }) => {
+ return (
+
+
+
+
+ {btnList.map((item) => {
+ const icon = (
+
+ {item.icon}
+
+ );
+ if (item.tooltip) {
+ return (
+
+ {icon}
+
+ );
+ }
+ return <>{icon};
+ })}
+
+
+
+ deleteMeta(key)}>
+
+
+ );
+ };
+ return (
+
+
+ {key}
+
+ {tip && (
+
+
+ )}
+
+
+
+ );
+ })}
+ QuickLink
;
+};
diff --git a/packages/resources/src/pages/file/draw/quick/QuickPreview.tsx b/packages/resources/src/pages/file/draw/quick/QuickPreview.tsx
new file mode 100644
index 0000000..ce88845
--- /dev/null
+++ b/packages/resources/src/pages/file/draw/quick/QuickPreview.tsx
@@ -0,0 +1,131 @@
+import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useSettingsStore } from '@/pages/store/settings';
+import { Button, Tooltip, useTheme } from '@mui/material';
+import { useShallow } from 'zustand/shallow';
+import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { ChevronDown } from 'lucide-react';
+import { useMemo } from 'react';
+import { getFileType } from '../../FileIcon';
+import { toast } from 'react-toastify';
+import clsx from 'clsx';
+type AccordionItem = {
+ title?: string;
+ key?: string;
+ url?: string;
+ content?: any;
+ clickCopy?: boolean;
+};
+export const QuickPreview = () => {
+ const { resource } = useResourceFileStore(
+ useShallow((state) => ({
+ resource: state.resource,
+ })),
+ );
+ const { settings, baseUrl } = useSettingsStore(
+ useShallow((state) => ({
+ settings: state.settings,
+ baseUrl: state.baseUrl,
+ })),
+ );
+ const fileType = useMemo(() => getFileType(resource?.name), [resource]);
+ const accordionList = useMemo(() => {
+ const username = settings?.username;
+ if (!username) {
+ toast.error('请先登录');
+ return [];
+ }
+ const _url = new URL(`${baseUrl}/api/s1/share/${username}/${resource?.name}`);
+ const meta = resource?.metaData ?? {};
+ if (meta.password) {
+ _url.searchParams.set('p', meta.password);
+ }
+ const url = _url.toString();
+ let accordionList: AccordionItem[] = [];
+ const encodeUrl = encodeURIComponent(url);
+ const previewUrl = `${baseUrl}/app/preview?fileUrl=${encodeUrl}&fileType=${fileType}`;
+ accordionList.push({
+ title: '文件预览',
+ key: 'preview-file',
+ url: previewUrl,
+ content: (
+
+
+ ),
+ });
+
+ if (fileType === 'image') {
+ accordionList.push({
+ title: '预览图片',
+ key: 'preview-image',
+ url: url,
+ content: {previewUrl}
+
+
+
+ ),
+ });
+
+ return accordionList;
+ }, [resource, baseUrl, settings]);
+ const theme = useTheme();
+ return (
+ {downloadUrl.toString()}
+
+
+ {accordionList.map((item) => (
+
+
+
+
+ ))}
+
+ );
+};
diff --git a/packages/resources/src/pages/file/draw/quick/index.tsx b/packages/resources/src/pages/file/draw/quick/index.tsx
new file mode 100644
index 0000000..b8445a6
--- /dev/null
+++ b/packages/resources/src/pages/file/draw/quick/index.tsx
@@ -0,0 +1,41 @@
+import { useResourceFileStore } from '@/pages/store/resource-file';
+import { useShallow } from 'zustand/shallow';
+import { QuickPreview } from './QuickPreview';
+import { useMemo } from 'react';
+import { getFileType } from '../../FileIcon';
+
+const QuickModules = [
+ {
+ key: 'link',
+ type: 'link',
+ categroy: ['image', 'video', 'audio'],
+ tooltips: `链接生成，markdown超链接`,
+ component: () => {
+ if (item.clickCopy) {
+ navigator.clipboard.writeText(item.content);
+ toast.success('复制成功');
+ }
+ }}>
+ {item.content}
+
+