feat(web): 增加人物卡导出的功能

TRPGEngine · Dec 15, 2020 · 0c5b047 · 0c5b047
1 parent 8f36b87
commit 0c5b047
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 11 deletions.
diff --git a/src/shared/i18n/langs/en-US/translation.json b/src/shared/i18n/langs/en-US/translation.json
@@ -34,6 +34,7 @@
   "k32f6a199": "Environment",
   "k3499e4ed": "Enable Voice",
   "k34b5e3ab": "Send Message",
+  "k3545ebe1": "Describe",
   "k35abe359": "Lobby",
   "k35f990b0": "View Detail",
   "k3818f03d": "Approval",
@@ -59,6 +60,7 @@
   "k43fd00e4": "Connecting",
   "k45639ea9": "Login Log",
   "k45844eb6": "Visible to Assign User",
+  "k45e1d6ad": "Actor Card",
   "k4603dba7": "Send Group Invite",
   "k466c477d": "Msg Input Editor Type",
   "k46b41dd4": "Need more language? Contract to Developer",
@@ -97,6 +99,7 @@
   "k68022ee7": "All",
   "k6b8145c2": "Login Result",
   "k6c2d3aa8": "Compact Mode",
+  "k6dfdc625": "Maximize",
   "k6e23c48": "Other",
   "k7235da0a": "Chaotic good",
   "k72eadd52": "What kind of person do you think you are?",
@@ -106,6 +109,7 @@
   "k759fb403": "Status",
   "k77a44085": "Connecting...",
   "k77ee6a43": "Member Manage",
+  "k7917d72c": "Export Actor Card",
   "k7c232f9e": "Panel",
   "k7f8c958e": "Room ID",
   "k8004f31b": "Tick",
@@ -132,6 +136,7 @@
   "k9ae8c511": "Shared",
   "k9bb2f08b": "User Profile",
   "k9c3bbb26": "Chaotic evil",
+  "k9d1b70b6": "Minimize",
   "k9ef68e3f": "Token",
   "k9f14436b": "Disable Voice",
   "k9fe28f33": "Official",

diff --git a/src/shared/i18n/langs/zh-CN/translation.json b/src/shared/i18n/langs/zh-CN/translation.json
@@ -34,6 +34,7 @@
   "k32f6a199": "编译环境",
   "k3499e4ed": "开启音量",
   "k34b5e3ab": "发送消息",
+  "k3545ebe1": "说明",
   "k35abe359": "大厅",
   "k35f990b0": "查看详情",
   "k3818f03d": "审批",
@@ -59,6 +60,7 @@
   "k43fd00e4": "正在连接",
   "k45639ea9": "登录记录",
   "k45844eb6": "指定用户可见",
+  "k45e1d6ad": "人物卡",
   "k4603dba7": "发送邀请",
   "k466c477d": "聊天框类型",
   "k46b41dd4": "需要更多的语言支持? 请联系开发者",
@@ -97,6 +99,7 @@
   "k68022ee7": "全部",
   "k6b8145c2": "登录结果",
   "k6c2d3aa8": "紧凑模式",
+  "k6dfdc625": "最大化",
   "k6e23c48": "其他",
   "k7235da0a": "混乱善良",
   "k72eadd52": "你觉得你是一个怎么样的人？",
@@ -106,6 +109,7 @@
   "k759fb403": "状态",
   "k77a44085": "正在连接...",
   "k77ee6a43": "成员管理",
+  "k7917d72c": "导出人物卡",
   "k7c232f9e": "面板",
   "k7f8c958e": "房间号",
   "k8004f31b": "踢出团",
@@ -132,6 +136,7 @@
   "k9ae8c511": "分享中",
   "k9bb2f08b": "用户信息",
   "k9c3bbb26": "混乱邪恶",
+  "k9d1b70b6": "最小化",
   "k9ef68e3f": "Token",
   "k9f14436b": "关闭音量",
   "k9fe28f33": "正式人物卡",

diff --git a/src/web/components/ActorCard.tsx b/src/web/components/ActorCard.tsx
@@ -3,6 +3,7 @@ import { ActorType, ActorBaseAttr } from '@redux/types/actor';
 import { TMemo } from '@shared/components/TMemo';
 import styled from 'styled-components';
 import { getAbsolutePath } from '@shared/utils/file-helper';
+import { useTranslation } from '@shared/i18n';
 
 export const ActorCardContainer = styled.div`
   display: flex;
@@ -97,6 +98,7 @@ interface Props {
 }
 export const ActorCard: React.FC<Props> = TMemo((props) => {
   const { actor, style } = props;
+  const { t } = useTranslation();
 
   const backgroundStyle = {
     backgroundImage: `url(${getAbsolutePath(actor.avatar)})`,
@@ -107,11 +109,11 @@ export const ActorCard: React.FC<Props> = TMemo((props) => {
       <div className="avatar" style={backgroundStyle} />
       <div className="profile">
         <p>
-          <span>角色:</span>
+          <span>{t('角色')}:</span>
           <span title={actor.name}>{actor.name}</span>
         </p>
         <p>
-          <span>说明:</span>
+          <span>{t('说明')}:</span>
           <span title={actor.desc}>{actor.desc}</span>
         </p>
         <p className="action">{props.actions}</p>

diff --git a/src/web/components/AddonMore.tsx b/src/web/components/AddonMore.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { TMemo } from '@shared/components/TMemo';
+import { Dropdown, Menu } from 'antd';
+import { MoreOutlined } from '@ant-design/icons';
+import { DropDownProps } from 'antd/lib/dropdown';
+
+interface AddonMoreProps extends Partial<DropDownProps> {
+  items: { label: string; onClick: () => void }[];
+}
+export const AddonMore: React.FC<AddonMoreProps> = TMemo((props) => {
+  const { items, ...dropDownProps } = props;
+
+  const menu = (
+    <Menu>
+      {items.map((item) => (
+        <Menu.Item key={item.label} onClick={item.onClick}>
+          {item.label}
+        </Menu.Item>
+      ))}
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu} trigger={['click']} {...dropDownProps}>
+      <MoreOutlined />
+    </Dropdown>
+  );
+});
+AddonMore.displayName = 'AddonMore';
diff --git a/src/web/components/ModalPanel.tsx b/src/web/components/ModalPanel.tsx
@@ -1,3 +1,4 @@
+import { t } from '@shared/i18n';
 import React from 'react';
 import styled, { css } from 'styled-components';
 
@@ -61,7 +62,8 @@ const ModalPanelActionGroup = styled.div`
   height: auto;
   z-index: 1;
 
-  .iconfont {
+  .iconfont,
+  .anticon {
     cursor: pointer;
     color: ${(props) =>
       props.theme.mixins.modeValue([
@@ -89,6 +91,7 @@ interface Props {
   className?: string;
   style?: React.CSSProperties;
   actions?: React.ReactNode;
+  headerActions?: React.ReactNode;
   children: React.ReactNode;
   allowMaximize?: boolean;
   padding?: number;
@@ -112,6 +115,7 @@ class ModalPanel extends React.PureComponent<Props> {
       style,
       children,
       actions,
+      headerActions,
       allowMaximize,
       padding,
     } = this.props;
@@ -123,21 +127,23 @@ class ModalPanel extends React.PureComponent<Props> {
         maximize={maximize}
         style={style}
       >
-        {allowMaximize && (
-          <ModalPanelActionGroup>
+        <ModalPanelActionGroup>
+          {headerActions}
+
+          {allowMaximize && (
             <div onClick={this.handleSwitchMaximize}>
               {maximize ? (
-                <i className="iconfont" title="最小化">
+                <i className="iconfont" title={t('最小化')}>
                   &#xe618;
                 </i>
               ) : (
-                <i className="iconfont" title="最大化">
+                <i className="iconfont" title={t('最大化')}>
                   &#xe60c;
                 </i>
               )}
             </div>
-          </ModalPanelActionGroup>
-        )}
+          )}
+        </ModalPanelActionGroup>
 
         <div className="head">
           <span>{title}</span>

diff --git a/src/web/components/modals/ActorInfo.tsx b/src/web/components/modals/ActorInfo.tsx
@@ -13,6 +13,9 @@ import {
   useCachedActorTemplateInfo,
   useCachedActorInfo,
 } from '@shared/hooks/useCache';
+import { AddonMore } from '../AddonMore';
+import { downloadBlob } from '@web/utils/file-helper';
+import { useTranslation } from '@shared/i18n';
 
 /**
  * 人物卡信息模态框
@@ -30,7 +33,9 @@ interface Props {
   templateUUID: string;
 }
 const ActorInfo: React.FC<Props> = TMemo((props) => {
-  let title = '人物卡';
+  const { t } = useTranslation();
+
+  let title = t('人物卡');
   const name = props.name ?? _get(props, ['data', '_name']);
   if (!_isNil(name)) {
     title += ' - ' + name;
@@ -44,10 +49,26 @@ const ActorInfo: React.FC<Props> = TMemo((props) => {
   const template = useCachedActorTemplateInfo(props.templateUUID);
   const layout = _get(template, 'layout');
 
+  const items = [
+    {
+      label: t('导出人物卡'),
+      onClick: () => {
+        const json = JSON.stringify(props.data);
+        const blob = new Blob([json], {
+          type: 'text/plain',
+        });
+        downloadBlob(blob, `${title}.json`);
+      },
+    },
+  ];
+
   return useMemo(
     () =>
       _isString(layout) ? (
-        <ModalPanel title={title}>
+        <ModalPanel
+          title={title}
+          headerActions={<AddonMore placement="bottomRight" items={items} />}
+        >
           <Container>
             <XMLBuilder
               xml={layout}

diff --git a/src/web/utils/file-helper.ts b/src/web/utils/file-helper.ts
@@ -54,3 +54,22 @@ export async function blobUrlToFile(
   const blob = await blobFromUrl(blobUrl);
   return blobToFile(blob, fileName);
 }
+
+/**
+ * 下载Bloburl
+ */
+export async function downloadBlobUrl(blobUrl: string, fileName: string) {
+  const a = document.createElement('a');
+  a.href = blobUrl;
+  a.download = fileName; // 这里填保存成的文件名
+  a.click();
+}
+
+/**
+ * 下载Blob文件
+ */
+export async function downloadBlob(blob: Blob, fileName: string) {
+  const url = window.URL.createObjectURL(blob);
+  downloadBlobUrl(url, fileName);
+  URL.revokeObjectURL(url);
+}