case 显示

dashboard/src/components/template/Wbw/WbwCase.tsx

@@ -1,12 +1,31 @@
+import { useIntl } from "react-intl";
+import { Typography } from "antd";
+
 import { IWbw } from "./WbwWord";
+import "./wbw.css"; // 告诉 umi 编译这个 css
+
+const { Text } = Typography;
 
 interface IWidget {
   data: IWbw;
 }
+
 const Widget = ({ data }: IWidget) => {
+  const intl = useIntl();
+  console.log("case", data.case?.value);
   return (
-    <div>
-      {data.type?.value}-{data.grammar?.value}
+    <div className="wbw_word_item" style={{ display: "flex" }}>
+      <Text type="secondary">
+        <div>
+          {data.case?.value.map((item, id) => {
+            return (
+              <span key={id} className="case">
+                {intl.formatMessage({ id: `dict.fields.type.${item}.label` })}
+              </span>
+            );
+          })}
+        </div>
+      </Text>
     </div>
   );
 };

dashboard/src/components/template/Wbw/WbwDetail.tsx

@@ -50,7 +50,7 @@ const Widget = ({ data, onClose, onChange, onSave }: IWidget) => {
         mData.parent = { value: value.value, status: 5 };
         break;
       case "case":
-        mData.case = { value: value.value, status: 5 };
+        mData.case = { value: value.value.split("$"), status: 5 };
         break;
       default:
         break;

dashboard/src/components/template/Wbw/WbwDetailBasic.tsx

@@ -110,7 +110,13 @@ const Widget = ({ data, onChange }: IWidget) => {
           tooltip={intl.formatMessage({ id: "forms.fields.case.tooltip" })}
           name="case"
         >
-          <SelectCase />
+          <SelectCase
+            onCaseChange={(value: (string | number)[]) => {
+              if (typeof onChange !== "undefined") {
+                onChange({ field: "case", value: value.join("$") });
+              }
+            }}
+          />
         </Form.Item>
         <Form.Item
           name="factorMeaning"

dashboard/src/components/template/Wbw/WbwWord.tsx

@@ -45,7 +45,7 @@ export interface IWbw {
   meaning?: WbwElement2;
   type?: WbwElement;
   grammar?: WbwElement;
-  case?: WbwElement;
+  case?: WbwElement2;
   parent?: WbwElement;
   factors?: WbwElement;
   factorMeaning?: WbwElement;
@@ -97,7 +97,11 @@ const Widget = ({
           }
         }}
       />
-      <div style={{ backgroundColor: wordData.bookMarkColor?.value }}>
+      <div
+        style={{
+          background: `linear-gradient(90deg, rgba(255, 255, 255, 0), ${wordData.bookMarkColor?.value})`,
+        }}
+      >
         {fields?.meaning ? (
           <WbwMeaning
             data={wordData}

dashboard/src/components/template/Wbw/wbw.css

@@ -0,0 +1,16 @@
+.wbw_word_item {
+  min-width: 3em;
+  padding: 0;
+  cursor: pointer;
+}
+
+.case {
+  padding: 0 2px;
+  line-height: 1.5em;
+}
+.case:first-child {
+  outline: 1px solid;
+  outline-offset: -1px;
+  margin: 0 0.3em 0 1px;
+  padding: 0px 2px;
+}