plain-design 1.0.0-beta.16 → 1.0.0-beta.160

package/src/packages/components/$search/search-service.scss

@@ -0,0 +1,221 @@
+@include comp(dialog) {
+  &.#{componentName(search-service)} {
+    align-items: flex-start;
+    padding: 80px 0;
+
+    .dialog-content {
+      overflow: hidden;
+    }
+
+    @include comp(empty) {
+      min-height: 100px;
+    }
+
+    .search-service-input-box {
+      @include comp(input) {
+        border-color: plv(primary-6) !important;
+
+        .input-box {
+          color: plv(primary-6) !important;
+          font-size: 1.2em;
+          height: 2.5em !important;
+        }
+
+        .input-prefix-icon {
+          width: 2em;
+          font-size: 1.6em;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: plv(primary-6);
+          position: relative;
+          left: 0.15em;
+        }
+        .input-suffix-icon-wrapper {
+          width: 1.5em;
+          font-size: 1.6em;
+        }
+        @include comp(loading) {
+        }
+      }
+    }
+
+    .search-service-foot {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.8em;
+      color: plv(text-3);
+      border-top: solid 1px plv(border-color);
+
+      & > * + * {
+        display: inline-block;
+        margin-left: 1em;
+      }
+
+      svg {
+        position: relative;
+        top: -1px;
+      }
+    }
+
+    .search-service-option-virtual-list {
+      height: 50vh;
+    }
+
+    .search-service-option-item {
+      user-select: none;
+
+      .search-service-option-item-default {
+        text-align: left;
+        box-sizing: border-box;
+
+        &[data-service-item-type="group"] {
+          .search-service-option-item-default-title {
+            font-weight: 600;
+            color: plv(primary-6);
+            font-size: 1em;
+          }
+        }
+
+        &:not([data-service-item-type="group"]) {
+          background-color: plv(bg-4);
+          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+          transition: all ease 150ms;
+
+          .search-service-option-item-default-box {
+            display: flex;
+            align-items: center;
+
+            .search-service-option-item-default-label {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+            }
+
+            .search-service-option-item-default-button {
+              opacity: 0;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+
+      }
+
+      &[data-active=true] {
+        .search-service-option-item-default {
+          &:not([data-service-item-type="group"]) {
+            background-color: plv(primary-6);
+
+            svg, .search-service-option-item-default-label {
+              color: plv(pbfc);
+
+              span {
+                color: plv(pbfc) !important;
+              }
+            }
+
+            .search-service-option-item-default-button {
+              opacity: 1;
+            }
+          }
+        }
+      }
+
+      .search-service-option-item-default-button {
+        padding: 0.2em;
+
+        &[data-search-button="favorite"], &[data-search-button="remove"] {
+          &:hover {
+            background-color: plv(primary-8);
+            border-radius: 99px;
+          }
+        }
+
+        &[data-search-button="favorite"] {
+          &:hover {
+            path {
+              fill: plv(pbfc)
+            }
+          }
+        }
+
+        & + .search-service-option-item-default-button {
+          margin-left: 0.1em !important;
+        }
+      }
+    }
+  }
+
+  @include comp(search-service-panel) {
+    @include sizeMixin(box, ()) {
+      .search-service-input-box {
+        padding: $margin;
+        @include comp(input) {
+          border-radius: calc(#{$border-radius} / 1.5);
+        }
+      }
+      .search-service-foot {
+        padding: calc(#{$margin});
+      }
+
+      .search-service-option-item {
+        width: calc(100% - (#{$margin} * 2));
+        margin-left: $margin;
+        padding-bottom: 8px;
+
+        .search-service-option-item-default {
+          border-radius: calc(#{$border-radius} / 1.5);
+
+          &:not([data-service-item-type="group"]) {
+            padding: calc(#{$margin} / 2);
+            cursor: pointer;
+
+            .search-service-option-item-default-box {
+              min-height: calc(3.5em - #{$margin} / 2);
+
+              & > * + * {
+                margin-left: 0.5em;
+              }
+
+              .search-service-option-item-default-tree {
+                width: 1.8em;
+                height: 3.2em;
+              }
+
+              .search-service-option-item-default-label {
+
+                & > span:nth-child(1) {
+                  color: plv(text-1);
+                }
+
+                & > span:nth-child(2) {
+                  color: plv(text-3);
+                  font-size: 0.8em;
+                  margin-top: 0.25em;
+                }
+              }
+            }
+          }
+        }
+      }
+      .search-service-option-item-default {
+        &[data-service-item-type="group"] {
+          .search-service-option-item-default-title {
+          }
+        }
+      }
+
+      .search-service-empty {
+        padding-bottom: $margin;
+        margin: $margin 0;
+        text-align: center;
+
+        svg + div {
+          margin-top: $margin;
+        }
+      }
+    }
+  }
+}

package/src/packages/components/$search/search.utils.tsx

@@ -0,0 +1,112 @@
+import {iMouseEvent} from "@peryl/react-compose";
+
+export interface iSearchDataRender {
+  (dataMeta: iSearchDataMeta): any;
+}
+
+export interface iSearchDataMeta {
+  title?: string,
+  desc?: string,
+  type: 'group' | 'page' | 'header' | 'sub_header' | 'content' | 'favorite' | 'history',
+  data?: any
+}
+
+export interface iSearchServiceDefaultConfig {
+  width: number,
+  render?: iSearchDataRender,
+  placeholder: string,
+  footer?: () => any,
+  cacheName?: string,
+}
+
+export interface iSearchServiceCustomConfig {
+  getData: (searchKey: string) => Promise<iSearchDataMeta[]>,
+  onSelect: (data: iSearchDataMeta) => void,
+}
+
+export type iSearchServiceConfig = iSearchServiceDefaultConfig & iSearchServiceCustomConfig
+
+export const SearchType2Icon: Record<iSearchDataMeta['type'], () => any> = {
+  group: () => null,
+  page: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M17 6v12c0 .52-.2 1-1 1H4c-.7 0-1-.33-1-1V2c0-.55.42-1 1-1h8l5 5zM14 8h-3.13c-.51 0-.87-.34-.87-.87V4" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  header: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  sub_header: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M13 13h4-4V8H7v5h6v4-4H7V8H3h4V3v5h6V3v5h4-4v5zm-6 0v4-4H3h4z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  content: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+    </svg>
+  ),
+  history: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0"></path>
+        <path d="M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13"></path>
+      </g>
+    </svg>
+  ),
+  favorite: () => (
+    <svg width="20" height="20" viewBox="0 0 20 20">
+      <path d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+    </svg>
+  ),
+};
+
+export const SearchTreeIcon = {
+  normal: () => (<svg className="search-service-option-item-default-tree" viewBox="0 0 24 54">
+    <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M8 6v42M20 27H8.3"></path>
+    </g>
+  </svg>),
+  last: () => (
+    <svg className="search-service-option-item-default-tree" viewBox="0 0 24 54">
+      <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M8 6v21M20 27H8.3"></path>
+      </g>
+    </svg>
+  )
+};
+
+export const SearchOptionButton = {
+  normal: (onClick?: (e: iMouseEvent) => void) => {
+    return (
+      <div key="normal" className="search-service-option-item-default-button" data-search-button="normal" onClick={onClick}>
+        <svg width="20" height="20" viewBox="0 0 20 20">
+          <g stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M18 3v4c0 2-2 4-4 4H2"></path>
+            <path d="M8 17l-6-6 6-6"></path>
+          </g>
+        </svg>
+      </div>
+    );
+  },
+  favorite: (onClick?: (e: iMouseEvent) => void) => {
+    return (
+      <div key="favorite" className="search-service-option-item-default-button" data-search-button="favorite" onClick={onClick}>
+        <svg width="20" height="20" viewBox="0 0 20 20">
+          <path d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinejoin="round"></path>
+        </svg>
+      </div>
+    );
+  },
+  remove: (onClick?: (e: iMouseEvent) => void) => {
+    return (
+      <div key="remove" className="search-service-option-item-default-button" data-search-button="remove" onClick={onClick}>
+        <svg width="20" height="20" viewBox="0 0 20 20">
+          <path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fillRule="evenodd" strokeLinecap="round" strokeLinejoin="round"></path>
+        </svg>
+      </div>
+    );
+  },
+};

package/src/packages/components/$upload/createUploadService.tsx

@@ -44,7 +44,7 @@ export function createUploadService(config: iUploadServiceConfig) {
       });
       uploadConfig.onSuccess?.(response);
     } catch (e) {
-      $notice.error(`${i18n('file.uploadFailed').d('上传失败')},` + String(e).toString());
+      $notice.error(`${i18n.$it('file.uploadFailed').d('上传失败')},` + String(e).toString());
       uploadConfig.onError?.(e as any);
       throw e;
     }

package/src/packages/components/$upload/upload.utils.ts

@@ -1,12 +1,13 @@
 import {iHttp} from "../createHttp";
-import {PlainObject} from "plain-utils/utils/event";
+import {PlainObject} from "@peryl/utils/event";
 
 export interface iUploadServiceConfig {
-  http: iHttp,
-  action: string,
-  filename: string,
-  prefix?: string,
-  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void>
+  http: iHttp,                                      // 上传的http请求服务对象
+  action: string,                                   // 默认上传路径
+  filename: string,                                 // 上传文件名
+  getFilePathFromResponse: (resp: any) => string,   // 从返回值中获取上传返回的图片路径
+  prefix?: string,                                  // 默认图片路径前缀
+  process?: (uploadData: iUploadData) => void | iUploadData | Promise<iUploadData | void> // 处理请求参数uploadData拦截器
 }
 
 export interface iUploadData {

package/src/packages/components/Address/index.tsx

@@ -1,10 +1,10 @@
-import {computed, designComponent, PropType, reactive, useModel, watch} from "plain-design-composition";
+import {computed, designComponent, PropType, reactive, useModel, watch} from "@peryl/react-compose";
 import {EditProps, useEdit} from "../../uses/useEdit";
 import {StyleProps, useStyle} from "../../uses/useStyle";
 import {$configuration} from "../$configuration";
 import {iAddressService} from "../$address/createAddressService";
 import {iAddressLazyMeta} from "../$address/address.utils";
-import {defer, DFD} from "plain-utils/utils/defer";
+import {defer, DFD} from "@peryl/utils/defer";
 import {Select} from "../Select";
 import {SelectOption} from "../SelectOption";
 

package/src/packages/components/AddressCascade/address-cascade.utils.ts

@@ -1,6 +1,6 @@
 import {EditProps} from "../../uses/useEdit";
 import {StyleProps} from "../../uses/useStyle";
-import {ComponentEvent, ExtractPropTypes, PropType} from "plain-design-composition";
+import {ComponentEvent, ExtractPropTypes, PropType} from "@peryl/react-compose";
 import {iAddressService} from "../$address/createAddressService";
 import {iAddressSyncMeta} from "../$address/address.utils";
 import {iAddressCascadeHooks} from "./createAddressCascade.hooks";

package/src/packages/components/AddressCascade/createAddressCascade.hooks.ts

@@ -1,4 +1,4 @@
-import {createRenderHook} from "plain-design-composition";
+import {createRenderHook} from "@peryl/react-compose";
 
 export function createAddressCascadeHooks() {
   return {

package/src/packages/components/AddressCascade/createAddressCascade.multiple.tsx

@@ -1,16 +1,15 @@
 import {iAddressCascadeCompositionParam} from "./address-cascade.utils";
-import {createEffects} from "plain-utils/utils/createEffects";
 import Cascade from "../Cascade";
 import {useMultipleModel} from "../../uses/useMultipleModel";
-import {reactive, watch} from "plain-design-composition";
+import {createEffectsOfReaction, reactive} from "@peryl/react-compose";
 import {iAddressLazyMeta} from "../$address/address.utils";
 
 export function createAddressCascadeMultiple(
   { props, event: { emit }, service, hooks, filterData }: iAddressCascadeCompositionParam,
 ) {
-  const model = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props);
+  const { effects, effectWatch } = createEffectsOfReaction();
 
-  const { effects } = createEffects();
+  const model = useMultipleModel(() => props.modelValue, emit.onUpdateModelValue, props, undefined, effects);
 
   const state = reactive({
     modelMetas: [] as iAddressLazyMeta[],
@@ -23,7 +22,7 @@ export function createAddressCascadeMultiple(
     },
   };
 
-  effects.push(watch(() => model.value as string[] | null | undefined, async (value, oldValue) => {
+  effectWatch(() => model.value as string[] | null | undefined, async (value, oldValue) => {
     if (!!value && !!oldValue && value.length == oldValue.length && value.every(i => oldValue.indexOf(i) > -1)) {
       return;
     }
@@ -31,10 +30,11 @@ export function createAddressCascadeMultiple(
     const newMetas = !value ? [] : await service.getAddressByCodes(value as string[]);
     if (newMetas.length === 0 && state.modelMetas.length === 0) {return;}
     state.modelMetas = newMetas;
-  }, { immediate: true }));
+  }, { immediate: true });
 
   effects.push(hooks.onRender.use({
     processor: ({ list, render }) => {list.push({ render, key: '1', seq: 1 });},
+    separate: false,
     render: () => (
       <Cascade
         modelValue={state.modelMetas}

package/src/packages/components/AddressCascade/createAddressCascade.single.tsx

@@ -1,8 +1,7 @@
 import {AddressCascadeType2map, iAddressCascadeCompositionParam} from "./address-cascade.utils";
-import {computed, useModel} from "plain-design-composition";
+import {createEffectsOfReaction, useModel} from "@peryl/react-compose";
 import {iAddressSyncMeta} from "../$address/address.utils";
 import Cascade from "../Cascade";
-import {createEffects} from "plain-utils/utils/createEffects";
 
 export function createAddressCascadeSingle(
   {
@@ -10,15 +9,15 @@ export function createAddressCascadeSingle(
   }: iAddressCascadeCompositionParam
 ) {
 
-  const { effects } = createEffects();
+  const { effects, effectComputed } = createEffectsOfReaction();
 
   const model = {
-    province: useModel(() => props.province, emit.onUpdateProvince),
-    city: useModel(() => props.city, emit.onUpdateCity),
-    district: useModel(() => props.district, emit.onUpdateDistrict),
+    province: useModel(() => props.province, emit.onUpdateProvince, undefined, effects),
+    city: useModel(() => props.city, emit.onUpdateCity, undefined, effects),
+    district: useModel(() => props.district, emit.onUpdateDistrict, undefined, effects),
   };
 
-  const metaArray = computed((): iAddressSyncMeta[] | null => {
+  const metaArray = effectComputed((): iAddressSyncMeta[] | null => {
     if (!filterData.value) {
       return null;
     }
@@ -58,6 +57,7 @@ export function createAddressCascadeSingle(
 
   effects.push(hooks.onRender.use({
     processor: ({ list, render }) => {list.push({ render, key: '1', seq: 1 });},
+    separate: false,
     render: () => (
       <Cascade
         modelValue={metaArray.value}

package/src/packages/components/AddressCascade/index.tsx

@@ -1,4 +1,4 @@
-import {computed, designComponent, reactive} from "plain-design-composition";
+import {computed, designComponent, reactive} from "@peryl/react-compose";
 import Cascade from "../Cascade";
 import {useStyle} from "../../uses/useStyle";
 import $configuration from "../$configuration";
@@ -8,6 +8,7 @@ import {createAddressCascadeHooks} from "./createAddressCascade.hooks";
 import {useWatchAutoClear} from "../../utils/watchEffectAutoClear";
 import {createAddressCascadeMultiple} from "./createAddressCascade.multiple";
 import {createAddressCascadeSingle} from "./createAddressCascade.single";
+import {useEdit} from "../../uses/useEdit";
 
 export const AddressCascade = designComponent({
   name: 'address-cascade',
@@ -17,6 +18,7 @@ export const AddressCascade = designComponent({
   setup({ props, event }) {
 
     useStyle();
+    useEdit();
 
     const hooks = createAddressCascadeHooks();
 

package/src/packages/components/AiChatBox/ai-chat-box.scss

@@ -0,0 +1,74 @@
+@include comp(ai-chat-box) {
+  .ai-chat-box-input {
+    position: relative;
+
+    .ai-chat-box-send-button {
+      position: absolute;
+      bottom: 4px;
+      right: 4px;
+      z-index: 2;
+
+      &.button-loading {
+        @include comp(loading) {
+          top: 1px;
+          left: -0.5px;
+        }
+      }
+    }
+  }
+
+  .ai-chat-box-histories {
+    .ai-chat-box-history-item {
+
+      word-break: break-all;
+
+      &[data-role=user] {
+        text-align: right;
+
+        .ai-chat-box-history-item-inner {
+          display: inline-block;
+          background-color: plv(secondary-2);
+          color: plv(text-1);
+        }
+      }
+
+      &[data-role=assistant] {
+
+      }
+    }
+  }
+
+  &.ai-chat-box-fit-height {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+
+    .ai-chat-box-histories {
+      flex: 1;
+      overflow: hidden;
+    }
+  }
+
+  @include sizeMixin(ai-chat-box, ()) {
+    .ai-chat-box-history-item {
+      &[data-role=user] {
+        .ai-chat-box-history-item-inner {
+          padding: calc(#{$margin} / 2) $margin;
+          border-radius: $border-radius;
+        }
+      }
+
+      & + * {
+        margin-top: $margin;
+      }
+    }
+
+    .ai-chat-box-histories {
+      margin-bottom: $margin;
+    }
+    .ai-chat-box-history-prepend {
+      margin-bottom: $margin;
+    }
+  }
+}