feat: first commit

2025-03-31 22:34:22 +08:00
commit d25187c9c8
390 changed files with 57031 additions and 0 deletions
--- a/src/fragments/group/index.less
+++ b/src/fragments/group/index.less
@ -0,0 +1,67 @@
+@import '@/styles/variables.less';
+
+.group-fragment {
+  &__container {
+    padding: 0 20px;
+    margin-top: 20px;
+  }
+
+  &__search-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: 24px;
+  }
+
+  &__search {
+    flex: 1 0;
+  }
+
+  &__status-select {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 28px;
+    line-height: 32px;
+    color: @blColor;
+
+    margin-left: 20px;
+
+    .title {
+      margin-right: 5px;
+    }
+  }
+
+  &__tips-container {
+    width: 100%;
+    height: 100vh;
+    padding-top: 282px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__empty-box {
+    width: 386px;
+    height: 278px;
+  }
+
+  &__tips-title {
+    font-size: 28px;
+    font-weight: 400;
+    line-height: 40px;
+    color: @blColor;
+    margin-top: 50px;
+  }
+
+  &__overlay-outer {
+    top: 94px;
+  }
+
+  &__overlay-inner {
+    width: 100%;
+  }
+}
--- a/src/fragments/group/index.tsx
+++ b/src/fragments/group/index.tsx
@ -0,0 +1,162 @@
+import { Image } from '@tarojs/components';
+import { NodesRef, useDidShow } from '@tarojs/taro';
+
+import { ArrowUp, ArrowDown } from '@taroify/icons';
+import classNames from 'classnames';
+import { useCallback, useState } from 'react';
+
+import GroupList, { IGroupListProps } from '@/components/group-list';
+import Overlay from '@/components/overlay';
+import ProductGroupDialog from '@/components/product-dialog/group';
+import SearchInput from '@/components/search';
+import Select from '@/components/select';
+import { APP_TAB_BAR_ID } from '@/constants/app';
+import { GROUP_STATUS_OPTIONS, GroupStatus, GroupType } from '@/constants/group';
+import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
+import { GroupInfo } from '@/types/group';
+import { logWithPrefix } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  type: GroupType;
+}
+
+const PREFIX = 'group-fragment';
+const LIST_CONTAINER_CLASS = `${PREFIX}__list-container`;
+const CALC_LIST_PROPS: IUseListHeightProps = {
+  selectors: [`.${LIST_CONTAINER_CLASS}`, `#${APP_TAB_BAR_ID}`],
+  calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
+    const [rect, diffRect] = rects;
+    return diffRect.top - rect.top;
+  },
+};
+
+const log = logWithPrefix(PREFIX);
+
+const NoGroupTips = (props: { className?: string; height?: number }) => {
+  const { className, height } = props;
+  return (
+    <div className={classNames(`${PREFIX}__tips-container`, className)} style={height ? { height } : undefined}>
+      <Image className={`${PREFIX}__empty-box`} src={require('@/statics/svg/empty-box.svg')} mode="aspectFit" />
+      <div className={`${PREFIX}__tips-title`}>您还没有播络邀请的群</div>
+    </div>
+  );
+};
+
+function ListWrapper(props: IGroupListProps) {
+  const { className, listHeight, type } = props;
+  const [isEmpty, setIsEmpty] = useState(false);
+
+  const handleListEmpty = useCallback(() => {
+    if (type !== GroupType.Joined) {
+      return;
+    }
+    setIsEmpty(true);
+  }, [type]);
+
+  useDidShow(() => {
+    if (!isEmpty) {
+      return;
+    }
+    setIsEmpty(false);
+  });
+
+  if (isEmpty) {
+    return <NoGroupTips className={className} height={listHeight} />;
+  }
+
+  return <GroupList {...props} onListEmpty={handleListEmpty} />;
+}
+
+function GroupFragment(props: IProps) {
+  const { type } = props;
+  const listHeight = useListHeight(CALC_LIST_PROPS);
+  const [value, setValue] = useState<string>('');
+  const [keyWord, setKeyWord] = useState<string>('');
+  const [status, setStatus] = useState<GroupStatus>(GroupStatus.All);
+  const [showStatusSelect, setShowStatusSelect] = useState<boolean>(false);
+  const [groupInfo, setGroupInfo] = useState<GroupInfo | null>(null);
+
+  const handleClickSearch = useCallback(() => {
+    log('handleClickSearch', value);
+    if (value === keyWord) {
+      return;
+    }
+    setKeyWord(value);
+  }, [value, keyWord]);
+
+  const handleSearchClear = useCallback(() => {
+    setValue('');
+    setKeyWord('');
+  }, []);
+
+  const handleSearchChange = useCallback(e => setValue(e.detail.value), []);
+
+  const handleClickStatusSelect = useCallback(() => {
+    setShowStatusSelect(!showStatusSelect);
+  }, [showStatusSelect]);
+
+  const handleHideStatusSelect = useCallback(() => setShowStatusSelect(false), []);
+
+  const handleSelectStatus = useCallback((newStatus: GroupStatus) => {
+    log('handleSelectStatus', newStatus);
+    setStatus(newStatus);
+    setShowStatusSelect(false);
+  }, []);
+
+  const handleClickInvite = useCallback((info: GroupInfo) => {
+    log('handleClickInvite', info);
+    setGroupInfo(info);
+  }, []);
+
+  return (
+    <div className={`${PREFIX}__container`}>
+      <div className={`${PREFIX}__search-wrapper`}>
+        <SearchInput
+          value={value}
+          placeholder="搜索群名"
+          className={`${PREFIX}__search`}
+          onClear={handleSearchClear}
+          onSearch={handleClickSearch}
+          onChange={handleSearchChange}
+        />
+        {type === GroupType.All && (
+          <div className={classNames(`${PREFIX}__status-select`)} onClick={handleClickStatusSelect}>
+            <div className="title">申请状态</div>
+            {showStatusSelect ? <ArrowUp /> : <ArrowDown />}
+          </div>
+        )}
+      </div>
+      <div className={`${PREFIX}__list-wrapper`}>
+        <ListWrapper
+          type={type}
+          status={status}
+          imGroupNick={keyWord}
+          listHeight={listHeight}
+          className={LIST_CONTAINER_CLASS}
+          onClickInvite={handleClickInvite}
+        />
+      </div>
+      <div className={`${PREFIX}__dialog-wrapper`}>
+        {groupInfo && (
+          <ProductGroupDialog
+            style={{ left: '25%' }}
+            blGroupId={groupInfo.blGroupId}
+            onClose={() => setGroupInfo(null)}
+          />
+        )}
+      </div>
+      <Overlay
+        visible={showStatusSelect}
+        onClickOuter={handleHideStatusSelect}
+        outerClassName={`${PREFIX}__overlay-outer`}
+        innerClassName={`${PREFIX}__overlay-inner`}
+      >
+        <Select title="申请状态" value={status} options={GROUP_STATUS_OPTIONS} onSelect={handleSelectStatus} />
+      </Overlay>
+    </div>
+  );
+}
+
+export default GroupFragment;
--- a/src/fragments/job/base/index.less
+++ b/src/fragments/job/base/index.less
@ -0,0 +1,147 @@
+@import '@/styles/variables.less';
+
+.all-job-fragment {
+  &__container {
+    position: relative;
+
+    .all-job-fragment__type-tabs {
+      padding: 0 20px;
+      margin-top: 20px;
+
+      .taroify-tabs__wrap {
+        height: 40px;
+      }
+
+      .taroify-tabs__wrap__scroll {
+        max-width: 100%;
+      }
+
+      .taroify-tabs__tab {
+        display: flex;
+        flex-direction: column;
+        flex: 0 0 auto !important;
+        font-size: 28px;
+        --tab-color: @blColorG1;
+        --tabs-active-color: @blColor;
+
+        &:first-child {
+          padding-left: 0;
+        }
+      }
+
+      .taroify-tabs__line {
+        height: 0;
+        background-color: transparent;
+        border-radius: 0;
+      }
+
+      .taroify-tabs__content {
+        padding: 20px 0;
+      }
+    }
+  }
+
+  &__top-search-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 0 20px;
+  }
+
+  &__search {
+    flex: 1 0;
+  }
+
+  &__salary-select,
+  &__search-city {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 28px;
+    line-height: 32px;
+    color: @blColor;
+
+    margin-left: 20px;
+
+    .title {
+      margin-right: 5px;
+    }
+  }
+
+  &__sort-type {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border-left: solid 2px #E0E0E0;
+
+    font-size: 28px;
+    line-height: 32px;
+    color: @blColor;
+
+    margin-left: 20px;
+
+    .selected {
+      color: @blHighlightColor;
+    }
+  }
+
+  &__sort-item {
+    margin-left: 32px;
+
+    &:first-child {
+      margin-left: 20px;
+    }
+  }
+
+  &__overlay-outer {
+    top: 82px;
+  }
+
+  &__overlay-inner {
+    width: 100%;
+  }
+
+  &__tips-container {
+    width: 100%;
+    height: 100vh;
+    padding-top: 218px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__empty-box {
+    width: 386px;
+    height: 278px;
+  } 
+
+  &__tips-title {
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 40px;
+    color: @blColor;
+    margin-top: 50px;
+  }
+
+  &__tips-desc {
+    font-size: 24px;
+    line-height: 40px;
+    color: @blColorG1;
+    margin-top: 16px;
+  }
+
+  &__add-group-button {
+    font-size: 28px;
+    line-height: 40px;
+    color: #FFFFFF;
+    background-color: @blHighlightColor;
+    border-radius: 48px;
+    padding: 20px 30px;
+    margin-top: 30px;
+  }
+}
--- a/src/fragments/job/base/index.tsx
+++ b/src/fragments/job/base/index.tsx
@ -0,0 +1,163 @@
+import { Image } from '@tarojs/components';
+import { NodesRef, useDidHide } from '@tarojs/taro';
+
+import { Tabs } from '@taroify/core';
+import { ArrowUp, ArrowDown } from '@taroify/icons';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import JobList, { IJobListProps } from '@/components/job-list';
+import Overlay from '@/components/overlay';
+import SalarySelect from '@/components/salary-select';
+import SearchInput from '@/components/search';
+import { APP_TAB_BAR_ID, PageUrl } from '@/constants/app';
+import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
+import { JOB_TABS, JobType, EmployType, ALL_SORT_TYPES, SORT_TYPE_TITLE_MAP, SortType } from '@/constants/job';
+import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
+import { SalaryRange } from '@/types/job';
+import { Coordinate } from '@/types/location';
+import { logWithPrefix } from '@/utils/common';
+import { navigateTo } from '@/utils/route';
+
+import './index.less';
+
+interface IProps {
+  cityCode: string;
+  sortType: SortType;
+  employType: EmployType;
+  coordinate: Coordinate;
+  onClickCity: () => void;
+  onClickSort: (type: SortType) => void;
+}
+
+const PREFIX = 'all-job-fragment';
+const LIST_CONTAINER_CLASS = 'all-job-fragment-list-container';
+const CALC_LIST_PROPS: IUseListHeightProps = {
+  selectors: [`.${LIST_CONTAINER_CLASS}`, `#${APP_TAB_BAR_ID}`],
+  calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
+    const [rect, diffRect] = rects;
+    return diffRect.top - rect.top;
+  },
+};
+
+const log = logWithPrefix(PREFIX);
+
+const NoGroupTips = (props: { className?: string; height?: number }) => {
+  const { className, height } = props;
+  return (
+    <div className={classNames(`${PREFIX}__tips-container`, className)} style={height ? { height } : undefined}>
+      <Image className={`${PREFIX}__empty-box`} src={require('@/statics/svg/empty-box.svg')} mode="aspectFit" />
+      <div className={`${PREFIX}__tips-title`}>该条件下还没有通告</div>
+    </div>
+  );
+};
+
+function ListWrapper(props: IJobListProps) {
+  const { className, listHeight, visible, cityCode, employType, minSalary, maxSalary } = props;
+  const [isEmpty, setIsEmpty] = useState(false);
+
+  const handleListEmpty = useCallback(() => {
+    setIsEmpty(true);
+  }, []);
+
+  useEffect(() => {
+    if (visible) {
+      setIsEmpty(false);
+    }
+  }, [visible, cityCode, employType, minSalary, maxSalary]);
+
+  if (isEmpty) {
+    return <NoGroupTips className={className} height={listHeight} />;
+  }
+
+  return <JobList {...props} onListEmpty={handleListEmpty} />;
+}
+
+function JobFragment(props: IProps) {
+  const { cityCode, employType, sortType = SortType.RECOMMEND, coordinate, onClickCity, onClickSort } = props;
+  const listHeight = useListHeight(CALC_LIST_PROPS);
+  const [tabType, setTabType] = useState<JobType>(JobType.All);
+  const [salaryRange, setSalaryRange] = useState<SalaryRange | undefined>();
+  const [showSalarySelect, setShowSalarySelect] = useState<boolean>(false);
+  const { latitude, longitude } = coordinate;
+
+  const handleClickSearch = useCallback(() => navigateTo(PageUrl.JobSearch, { city: cityCode }), [cityCode]);
+
+  const handleClickSalarySelect = useCallback(() => {
+    setShowSalarySelect(!showSalarySelect);
+  }, [showSalarySelect]);
+
+  const handleHideSalarySelect = useCallback(() => setShowSalarySelect(false), []);
+
+  const handleSelectSalary = useCallback((value?: SalaryRange) => {
+    log('handleSelectSalary', value);
+    setSalaryRange(value);
+    setShowSalarySelect(false);
+  }, []);
+
+  const onTypeChange = useCallback(
+    value => {
+      log('onTypeChange', value);
+      setTabType(value);
+    },
+    [setTabType]
+  );
+
+  useDidHide(() => setShowSalarySelect(false));
+
+  return (
+    <div className={`${PREFIX}__container`}>
+      <div className={`${PREFIX}__top-search-bar`}>
+        <SearchInput disabled className={`${PREFIX}__search`} placeholder="试试 女装" onClick={handleClickSearch} />
+        <div className={classNames(`${PREFIX}__search-city`)} onClick={onClickCity}>
+          <div className="title">{CITY_CODE_TO_NAME_MAP.get(cityCode)}</div>
+          <ArrowDown />
+        </div>
+        <div className={classNames(`${PREFIX}__salary-select`)} onClick={handleClickSalarySelect}>
+          <div className="title">薪资</div>
+          {showSalarySelect ? <ArrowUp /> : <ArrowDown />}
+        </div>
+        <div className={classNames(`${PREFIX}__sort-type`)}>
+          {ALL_SORT_TYPES.map(type => (
+            <div
+              key={type}
+              className={classNames(`${PREFIX}__sort-item`, { selected: sortType === type })}
+              onClick={() => onClickSort(type)}
+            >
+              {SORT_TYPE_TITLE_MAP[type]}
+            </div>
+          ))}
+        </div>
+      </div>
+      <Tabs className={`${PREFIX}__type-tabs`} value={tabType} onChange={onTypeChange}>
+        {JOB_TABS.map(tab => (
+          <Tabs.TabPane title={tab.title} key={tab.type} value={tab.type}>
+            <ListWrapper
+              category={tab.type}
+              cityCode={cityCode}
+              sortType={sortType}
+              latitude={latitude}
+              longitude={longitude}
+              employType={employType}
+              minSalary={salaryRange?.minSalary}
+              maxSalary={salaryRange?.maxSalary}
+              listHeight={listHeight}
+              className={LIST_CONTAINER_CLASS}
+              visible={tabType === tab.type}
+            />
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+      <Overlay
+        visible={showSalarySelect}
+        onClickOuter={handleHideSalarySelect}
+        outerClassName={`${PREFIX}__overlay-outer`}
+        innerClassName={`${PREFIX}__overlay-inner`}
+      >
+        <SalarySelect type={employType} value={salaryRange} onSelect={handleSelectSalary} />
+      </Overlay>
+    </div>
+  );
+}
+
+export default JobFragment;
--- a/src/fragments/job/follow/index.less
+++ b/src/fragments/job/follow/index.less
@ -0,0 +1,29 @@
+@import '@/styles/variables.less';
+
+.my-follow-job-fragment {
+  position: relative;
+  padding: 20px;
+
+  &__empty-container {
+    width: 100%;
+    height: 100vh;
+    padding-top: 338px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__empty-box {
+    width: 386px;
+    height: 278px;
+  }
+
+  &__empty-text {
+    font-size: 28px;
+    line-height: 40px;
+    font-weight: 400;
+    color: @blColor;
+    margin-top: 34px;
+  }
+}
--- a/src/fragments/job/follow/index.tsx
+++ b/src/fragments/job/follow/index.tsx
@ -0,0 +1,72 @@
+import { Image } from '@tarojs/components';
+import { NodesRef } from '@tarojs/taro';
+
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import JobList from '@/components/job-list';
+import { APP_TAB_BAR_ID } from '@/constants/app';
+import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
+import { logWithPrefix } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  visible: boolean;
+}
+
+const PREFIX = 'my-follow-job-fragment';
+const LIST_CONTAINER_CLASS = 'my-follow-job-fragment-list-container';
+const CALC_LIST_PROPS: IUseListHeightProps = {
+  selectors: [`.${LIST_CONTAINER_CLASS}`, `#${APP_TAB_BAR_ID}`],
+  calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
+    const [rect, diffRect] = rects;
+    return diffRect.top - rect.top;
+  },
+};
+const log = logWithPrefix(PREFIX);
+
+const NoFollowTips = (props: { className?: string; height?: number }) => {
+  const { className, height } = props;
+  return (
+    <div className={classNames(`${PREFIX}__empty-container`, className)} style={height ? { height } : undefined}>
+      <Image className={`${PREFIX}__empty-box`} src={require('@/statics/svg/empty-box.svg')} mode="aspectFit" />
+      <div className={`${PREFIX}__empty-text`}>暂无关注的群</div>
+    </div>
+  );
+};
+
+function MyFollowFragment(props: IProps) {
+  const { visible } = props;
+  const [isEmpty, setIsEmpty] = useState(false);
+  const listHeight = useListHeight(CALC_LIST_PROPS);
+  log('list height', listHeight);
+
+  const handleListEmpty = useCallback(() => {
+    setIsEmpty(true);
+  }, []);
+
+  useEffect(() => {
+    if (visible) {
+      setIsEmpty(false);
+    }
+  }, [visible]);
+
+  if (isEmpty) {
+    return <NoFollowTips className={LIST_CONTAINER_CLASS} height={listHeight} />;
+  }
+
+  return (
+    <div className={PREFIX}>
+      <JobList
+        visible
+        isFollow
+        className={LIST_CONTAINER_CLASS}
+        listHeight={listHeight}
+        onListEmpty={handleListEmpty}
+      />
+    </div>
+  );
+}
+
+export default MyFollowFragment;
--- a/src/fragments/job/my-group/index.less
+++ b/src/fragments/job/my-group/index.less
@ -0,0 +1,87 @@
+@import '@/styles/variables.less';
+
+.my-group-job-fragment {
+  position: relative;
+  padding: 20px;
+
+  &__tips-container{
+    width: 100%;
+    height: 100vh;
+    padding-top: 268px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__tips-content {
+    position: relative;
+    width: fit-content;
+    padding: 48px;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 40px;
+    color: @blColorG1;
+    background: #FFFFFF;
+    border-radius: 16px;
+  }
+
+  &__tips-content-bg {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #6D3DF517;
+    border-radius: 16px;
+    transform: rotate(-6deg);
+    transform-origin: 50% bottom;
+    z-index: -1;
+  }
+
+  &__tips-first-panel {
+    margin-bottom: 48px;
+  }
+
+  &__tips-title {
+    position: relative;
+    width: fit-content;
+    font-size: 28px;
+    color: @blColor;
+    margin-bottom: 16px;
+
+    &::after {
+      content: "";
+      height: 10px;
+      background: #6D3DF599;
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 4px;
+    }
+  }
+
+  &__add-group-button {
+    font-size: 28px;
+    line-height: 40px;
+    color: #FFFFFF;
+    background-color: @blHighlightColor;
+    border-radius: 48px;
+    padding: 20px 30px;
+    margin-top: 48px;
+  }
+
+  &__float-add-group-button {
+    position: absolute;
+    right: 24px;
+    bottom: 56px;
+    width: 112px;
+    height: 112px;
+    font-size: 28px;
+    line-height: 112px;
+    white-space: nowrap;
+    border-radius: 50%;
+    color: #FFFFFF;
+    background-color: @blHighlightColor;
+  }
+}
--- a/src/fragments/job/my-group/index.tsx
+++ b/src/fragments/job/my-group/index.tsx
@ -0,0 +1,107 @@
+import { Button } from '@tarojs/components';
+import { NodesRef } from '@tarojs/taro';
+
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+
+import JobList from '@/components/job-list';
+import ProductGroupDialog from '@/components/product-group-dialog';
+import { APP_TAB_BAR_ID } from '@/constants/app';
+import useListHeight, { IUseListHeightProps } from '@/hooks/use-list-height';
+import { logWithPrefix } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  visible: boolean;
+}
+
+const PREFIX = 'my-group-job-fragment';
+const LIST_CONTAINER_CLASS = 'my-group-job-fragment-list-container';
+const CALC_LIST_PROPS: IUseListHeightProps = {
+  selectors: [`.${LIST_CONTAINER_CLASS}`, `#${APP_TAB_BAR_ID}`],
+  calc: (rects: [NodesRef.BoundingClientRectCallbackResult, NodesRef.BoundingClientRectCallbackResult]) => {
+    const [rect, diffRect] = rects;
+    return diffRect.top - rect.top;
+  },
+};
+const log = logWithPrefix(PREFIX);
+
+const NoGroupTips = (props: { onClick: () => void; className?: string; height?: number }) => {
+  const { className, height, onClick } = props;
+  return (
+    <div className={classNames(`${PREFIX}__tips-container`, className)} style={height ? { height } : undefined}>
+      <div className={`${PREFIX}__tips-content`}>
+        <div className={`${PREFIX}__tips-content-bg`} />
+        <div className={`${PREFIX}__tips-first-panel`}>
+          <div className={`${PREFIX}__tips-title`}>找不到您所在群的通告?</div>
+          <div>点击下方添加群，联系客服</div>
+        </div>
+        <div>
+          <div className={`${PREFIX}__tips-title`}>添加群后，您可以</div>
+          <div>·在播络小程序即可查看群里去重后的所有通告</div>
+          <div>·通过类目、地址等关键信息查找群内通告</div>
+        </div>
+      </div>
+      <Button className={`${PREFIX}__add-group-button`} onClick={onClick}>
+        免费添加群
+      </Button>
+    </div>
+  );
+};
+
+function MyGroup(props: IProps) {
+  const { visible } = props;
+  const listHeight = useListHeight(CALC_LIST_PROPS);
+  const [isEmpty, setIsEmpty] = useState(false);
+  const [dialogVisible, setDialogVisible] = useState(false);
+  log('list height', listHeight);
+
+  const handleListEmpty = useCallback(() => {
+    setIsEmpty(true);
+  }, []);
+
+  const handleAddGroup = useCallback(() => {
+    setDialogVisible(true);
+    // Taro.eventCenter.trigger(EventName.ADD_GROUP);
+  }, []);
+
+  const handleDialogHidden = useCallback(() => {
+    setDialogVisible(false);
+  }, []);
+
+  useEffect(() => {
+    if (visible) {
+      setIsEmpty(false);
+    }
+  }, [visible]);
+
+  const dialog = (
+    <ProductGroupDialog
+      visible={dialogVisible}
+      onClose={handleDialogHidden}
+      style={{ position: 'absolute', top: isEmpty ? '30%' : '40%' }}
+    />
+  );
+
+  if (isEmpty) {
+    return (
+      <>
+        <NoGroupTips className={LIST_CONTAINER_CLASS} height={listHeight} onClick={handleAddGroup} />
+        {dialog}
+      </>
+    );
+  }
+
+  return (
+    <div className={PREFIX}>
+      <JobList visible isOwner className={LIST_CONTAINER_CLASS} listHeight={listHeight} onListEmpty={handleListEmpty} />
+      <Button className={`${PREFIX}__float-add-group-button`} onClick={handleAddGroup}>
+        添加群
+      </Button>
+      {dialog}
+    </div>
+  );
+}
+
+export default MyGroup;
--- a/src/fragments/profile/advantages/index.less
+++ b/src/fragments/profile/advantages/index.less
@ -0,0 +1,19 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.fragment-profile-advantages {
+  &__input {
+    width: 100%;
+    height: 350px;
+    font-size: 32px;
+    line-height: 40px;
+    color: @blColor;
+    padding: 32px 0;
+  }
+
+  &__input-placeholder {
+    font-size: 32px;
+    line-height: 40px;
+    color: #CCCCCC;
+  }
+}
--- a/src/fragments/profile/advantages/index.tsx
+++ b/src/fragments/profile/advantages/index.tsx
@ -0,0 +1,53 @@
+import { BaseEventOrig, Textarea, TextareaProps } from '@tarojs/components';
+
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+
+import BlFormItem from '@/components/bl-form-item';
+import { MaterialProfile } from '@/types/material';
+import { logWithPrefix } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  profile: Partial<MaterialProfile>;
+}
+
+const PREFIX = 'fragment-profile-advantages';
+const log = logWithPrefix(PREFIX);
+
+function ProfileAdvantagesFragment(props: IProps, ref) {
+  const { profile } = props;
+  const [advantages, setAdvantages] = useState(profile.advantages || '');
+
+  const handleInput = useCallback((e: BaseEventOrig<TextareaProps.onInputEventDetail>) => {
+    const value = e.detail.value || '';
+    setAdvantages(value);
+    log('handleInput', value);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getData: () => ({ advantages }),
+    }),
+    [advantages]
+  );
+
+  return (
+    <div className={PREFIX}>
+      <BlFormItem title="自身优势" optional dynamicHeight>
+        <Textarea
+          maxlength={-1}
+          value={advantages}
+          confirmType="done"
+          placeholder="比如特长、风格、对直播理解等"
+          onInput={handleInput}
+          className={`${PREFIX}__input`}
+          placeholderClass={`${PREFIX}__input-placeholder`}
+        />
+      </BlFormItem>
+    </div>
+  );
+}
+
+export default forwardRef(ProfileAdvantagesFragment);
--- a/src/fragments/profile/basic/index.less
+++ b/src/fragments/profile/basic/index.less
@ -0,0 +1,6 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.fragment-profile-basic {
+  width: 100%;
+}
--- a/src/fragments/profile/basic/index.tsx
+++ b/src/fragments/profile/basic/index.tsx
@ -0,0 +1,113 @@
+import { BaseEventOrig, InputProps } from '@tarojs/components';
+
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+
+import BlFormInput from '@/components/bl-form-input';
+import BlFormItem from '@/components/bl-form-item';
+import { BlFormRadio, BlFormRadioGroup } from '@/components/bl-form-radio';
+import { GenderType } from '@/constants/material';
+import { MaterialProfile } from '@/types/material';
+import { logWithPrefix, string2Number } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  profile: Partial<MaterialProfile>;
+}
+
+const PREFIX = 'fragment-profile-basic';
+const log = logWithPrefix(PREFIX);
+
+function ProfileBasicFragment(props: IProps, ref) {
+  const { profile } = props;
+  const [name, setName] = useState(profile.name || '');
+  const [gender, setGender] = useState<GenderType>(profile.gender || GenderType.WOMEN);
+  const [age, setAge] = useState(profile.age || '');
+  const [height, setHeight] = useState(profile.height || '');
+  const [weight, setWeight] = useState(profile.weight || '');
+  const [shoeSize, setShoeSize] = useState(profile.shoeSize || '');
+
+  const handleInputName = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    setName(value);
+  }, []);
+
+  const handleInputAge = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setAge(string2Number(value));
+  }, []);
+
+  const handleInputHeight = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setHeight(string2Number(value));
+  }, []);
+
+  const handleInputWeight = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setWeight(string2Number(value));
+  }, []);
+
+  const handleInputShoeSize = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setShoeSize(string2Number(value));
+  }, []);
+
+  const handleGenderChange = useCallback((value: GenderType) => {
+    log('handleGenderChange', value);
+    setGender(value);
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getData: () => ({ name, gender, age, height, weight, shoeSize }),
+    }),
+    [name, gender, age, height, weight, shoeSize]
+  );
+
+  return (
+    <div className={PREFIX}>
+      <BlFormItem title="称呼">
+        <BlFormInput value={name} onInput={handleInputName} />
+      </BlFormItem>
+      <BlFormItem title="性别">
+        <BlFormRadioGroup direction="horizontal" value={gender} onChange={handleGenderChange}>
+          <BlFormRadio name={GenderType.WOMEN} text="女" value={gender} />
+          <BlFormRadio name={GenderType.MEN} text="男" value={gender} />
+        </BlFormRadioGroup>
+      </BlFormItem>
+      <BlFormItem title="年龄">
+        <BlFormInput value={String(age)} type="number" maxlength={3} onInput={handleInputAge} rightText="岁" />
+      </BlFormItem>
+      <BlFormItem title="身高">
+        <BlFormInput value={String(height)} type="number" maxlength={3} onInput={handleInputHeight} rightText="CM" />
+      </BlFormItem>
+      <BlFormItem title="体重">
+        <BlFormInput value={String(weight)} type="number" maxlength={3} onInput={handleInputWeight} rightText="KG" />
+      </BlFormItem>
+      <BlFormItem title="鞋码" optional>
+        <BlFormInput
+          value={String(shoeSize)}
+          type="number"
+          maxlength={2}
+          onInput={handleInputShoeSize}
+          rightText="码"
+        />
+      </BlFormItem>
+    </div>
+  );
+}
+
+export default forwardRef(ProfileBasicFragment);
--- a/src/fragments/profile/experience/index.less
+++ b/src/fragments/profile/experience/index.less
@ -0,0 +1,4 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.fragment-profile-experience {}
--- a/src/fragments/profile/experience/index.tsx
+++ b/src/fragments/profile/experience/index.tsx
@ -0,0 +1,150 @@
+import { BaseEventOrig, InputProps } from '@tarojs/components';
+
+import { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+
+import BlFormInput from '@/components/bl-form-input';
+import BlFormItem from '@/components/bl-form-item';
+import { BlFormRadio, BlFormRadioGroup } from '@/components/bl-form-radio';
+import BlFormSelect from '@/components/bl-form-select';
+import { WORK_YEAR_OPTIONS, WorkedYears } from '@/constants/material';
+import { MaterialProfile } from '@/types/material';
+import { logWithPrefix, string2Number } from '@/utils/common';
+
+import './index.less';
+
+interface IProps {
+  profile: Partial<MaterialProfile>;
+}
+
+const PREFIX = 'fragment-profile-experience';
+const log = logWithPrefix(PREFIX);
+// const STYLE_VALUES = Object.values(StyleType).filter(v => typeof v === 'number');
+
+// const calcInitStyle = (styleString: string = '') => {
+//   const styles = styleString.split('、');
+//   return styles.filter(v => STYLE_VALUES.includes(Number(v))).map(v => Number(v));
+// };
+
+// const getStyleString = (styles: StyleType[]) => {
+//   return styles.join('、');
+// };
+
+const calcInitMaxGmv = (maxGmv: number) => {
+  if (!maxGmv) {
+    return '';
+  }
+  return maxGmv / 10000;
+};
+
+const getMaxGmv = (maxGmv: number) => {
+  if (Number.isNaN(maxGmv)) {
+    return 0;
+  }
+  return maxGmv * 10000;
+};
+
+function ProfileExperienceFragment(props: IProps, ref) {
+  const { profile } = props;
+  const [workedYear, setWorkedYear] = useState(profile.workedYear);
+  const [workedAccounts, setWorkedAccounts] = useState(profile.workedAccounts || '');
+  const [newAccountExperience, setNewAccountExperience] = useState(profile.newAccountExperience);
+  const [workedSecCategoryStr, setWorkedSecCategoryStr] = useState(profile.workedSecCategoryStr || '');
+  // const [style, setStyle] = useState(calcInitStyle(profile.style));
+  const [maxGmv, setMaxGmv] = useState(calcInitMaxGmv(profile?.maxGmv || 0));
+  const [maxOnline, setMaxOnline] = useState(profile.maxOnline || '');
+
+  const handleSelectWorkYear = useCallback((newYear: WorkedYears) => {
+    setWorkedYear(newYear);
+  }, []);
+
+  const handleInputWorkedAccounts = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    setWorkedAccounts(value);
+  }, []);
+
+  const handleNewAccountExperienceChange = useCallback((value: number) => {
+    log('handleNewAccountExperienceChange', value);
+    setNewAccountExperience(value);
+  }, []);
+
+  const handleInputWorkedSecCategoryStr = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    setWorkedSecCategoryStr(value);
+  }, []);
+
+  // const handleStyleChange = useCallback((value: StyleType[]) => {
+  //   log('handleStyleChange', value);
+  //   setStyle(value);
+  // }, []);
+
+  const handleInputMaxGmv = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setMaxGmv(string2Number(value));
+  }, []);
+
+  const handleInputMaxOnline = useCallback((e: BaseEventOrig<InputProps.inputEventDetail>) => {
+    const value = e.detail.value || '';
+    if (Number.isNaN(Number(value))) {
+      return;
+    }
+    setMaxOnline(string2Number(value));
+  }, []);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getData: () => ({
+        workedYear,
+        workedAccounts,
+        newAccountExperience,
+        workedSecCategoryStr,
+        // style: getStyleString(style.sort()),
+        maxOnline: maxOnline === '' ? undefined : maxOnline,
+        maxGmv: maxGmv === '' ? undefined : getMaxGmv(Number(maxGmv)),
+      }),
+    }),
+    [workedYear, workedAccounts, newAccountExperience, workedSecCategoryStr, maxGmv, maxOnline]
+  );
+
+  return (
+    <div className={PREFIX}>
+      <BlFormItem title="直播经验">
+        <BlFormSelect title="直播经验" value={workedYear} options={WORK_YEAR_OPTIONS} onSelect={handleSelectWorkYear} />
+      </BlFormItem>
+      <BlFormItem title="直播过的品类" optional>
+        <BlFormInput value={workedSecCategoryStr} maxlength={140} onInput={handleInputWorkedSecCategoryStr} />
+      </BlFormItem>
+      <BlFormItem title="自然流起号经验" optional>
+        <BlFormRadioGroup
+          direction="horizontal"
+          value={newAccountExperience}
+          onChange={handleNewAccountExperienceChange}
+        >
+          <BlFormRadio name={false} text="无" value={newAccountExperience} />
+          <BlFormRadio name text="有" value={newAccountExperience} />
+        </BlFormRadioGroup>
+      </BlFormItem>
+      <BlFormItem title="直播过的账号" optional>
+        <BlFormInput value={workedAccounts} maxlength={140} onInput={handleInputWorkedAccounts} />
+      </BlFormItem>
+      {/* <ProfileEditItem title="直播风格" optional>
+        <ProfileCheckboxGroup value={style} onChange={handleStyleChange}>
+          <ProfileCheckbox value={style} name={StyleType.Broadcasting} text="平播" />
+          <ProfileCheckbox value={style} name={StyleType.HoldOrder} text="憋单" />
+          <ProfileCheckbox value={style} name={StyleType.Passion} text="激情" />
+        </ProfileCheckboxGroup>
+      </ProfileEditItem> */}
+      <BlFormItem title="最高GMV" optional>
+        <BlFormInput value={String(maxGmv)} type="number" maxlength={10} onInput={handleInputMaxGmv} rightText="W" />
+      </BlFormItem>
+      <BlFormItem title="最高在线人数" optional>
+        <BlFormInput value={String(maxOnline)} type="number" onInput={handleInputMaxOnline} rightText="人" />
+      </BlFormItem>
+    </div>
+  );
+}
+
+export default forwardRef(ProfileExperienceFragment);
--- a/src/fragments/profile/intention/index.less
+++ b/src/fragments/profile/intention/index.less
@ -0,0 +1,48 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.fragment-profile-intention {
+  width: 100%;
+
+  &__indent-city-container {
+    background: transparent;
+    padding: 0;
+  }
+
+  &__indent-city {
+    width: 100%;
+    height: 100px;
+    .flex-row();
+
+    &__item {
+      position: relative;
+      width: calc(calc(100% - 48px) / 3);
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 24px;
+      background: #FFFFFF;
+      border-radius: 16px;
+
+      &:first-child {
+        margin-left: 0px;
+      }
+    }
+
+    &__delete-icon {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate3d(50%, -50%, 0);
+      width: 44px;
+      height: 44px;
+    }
+
+    &__add-icon {
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+}
--- a/src/fragments/profile/intention/index.tsx
+++ b/src/fragments/profile/intention/index.tsx
@ -0,0 +1,201 @@
+import { Image } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useState } from 'react';
+
+import BlFormItem from '@/components/bl-form-item';
+import { BlFormRadio, BlFormRadioGroup } from '@/components/bl-form-radio';
+import BlFormSelect from '@/components/bl-form-select';
+import { EventName, OpenSource, PageUrl } from '@/constants/app';
+import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
+import { EmployType, EMPLOY_TYPE_TITLE_MAP, FULL_PRICE_OPTIONS, PART_PRICE_OPTIONS } from '@/constants/job';
+import { SalaryRange } from '@/types/job';
+import { MaterialProfile } from '@/types/material';
+import { logWithPrefix } from '@/utils/common';
+import { getCurrentCity } from '@/utils/location';
+import { isFullTimePriceRequired, isPartTimePriceRequired } from '@/utils/job'
+import { navigateTo } from '@/utils/route';
+
+import './index.less';
+
+interface IProps {
+  profile: Partial<MaterialProfile>;
+}
+
+const PREFIX = 'fragment-profile-intention';
+const log = logWithPrefix(PREFIX);
+
+const calcInitCityCodes = (codeString: string = '') => {
+  const codes = codeString.split('、');
+  return codes.filter(code => !!CITY_CODE_TO_NAME_MAP.get(code));
+};
+
+const getCityCodeString = (codes: string[]) => {
+  return codes.join('、');
+};
+
+const calcSalarySelect = (profile: Partial<MaterialProfile>, full: boolean) => {
+  const min = full ? profile.fullTimeMinPrice : profile.partyTimeMinPrice;
+  const max = full ? profile.fullTimeMaxPrice : profile.partyTimeMaxPrice;
+  if (!min || !max) {
+    return;
+  }
+  const options = full ? FULL_PRICE_OPTIONS : PART_PRICE_OPTIONS;
+  return options.find(v => v.value && v.value.minSalary <= min && v.value.maxSalary >= max)?.value;
+};
+
+const getSalaryPrice = (fullSalary?: SalaryRange, partSalary?: SalaryRange) => {
+  const price: Partial<
+    Pick<MaterialProfile, 'fullTimeMinPrice' | 'fullTimeMaxPrice' | 'partyTimeMinPrice' | 'partyTimeMaxPrice'>
+  > = {};
+  if (fullSalary) {
+    price.fullTimeMinPrice = fullSalary.minSalary;
+    price.fullTimeMaxPrice = fullSalary.maxSalary;
+  }
+  if (partSalary) {
+    price.partyTimeMinPrice = partSalary.minSalary;
+    price.partyTimeMaxPrice = partSalary.maxSalary;
+  }
+  return price;
+};
+
+function ProfileIntentionFragment(props: IProps, ref) {
+  const { profile } = props;
+  const [cityCodes, setCityCodes] = useState(calcInitCityCodes(profile.cityCodes));
+  const [employType, setEmployType] = useState(profile.employType);
+  const [fullSalary, setFullSalary] = useState(calcSalarySelect(profile, true));
+  const [partSalary, setPartSalary] = useState(calcSalarySelect(profile, false));
+  const [acceptWorkForSit, setAcceptWorkForSit] = useState(profile.acceptWorkForSit);
+
+  const handleDeleteCity = useCallback(
+    (deleteCode: string) => {
+      setCityCodes(cityCodes.filter(code => code !== deleteCode));
+    },
+    [cityCodes]
+  );
+
+  const handleClickAddCity = useCallback(() => {
+    const currentCity = getCurrentCity();
+    navigateTo(PageUrl.CitySearch, { city: currentCity, source: OpenSource.AddIndentCity });
+  }, []);
+
+  const handleSelectCity = useCallback(
+    data => {
+      log('handleSelectCity', data);
+      const { openSource, cityCode: code } = data;
+      if (openSource !== OpenSource.AddIndentCity) {
+        return;
+      }
+      const newCodes = [...new Set([...cityCodes, code])];
+      setCityCodes(newCodes);
+    },
+    [cityCodes]
+  );
+
+  const handleEmployTypeChange = useCallback((value: EmployType) => {
+    setEmployType(value);
+    if (value === EmployType.Full) {
+      setPartSalary({ minSalary: 0, maxSalary: 0 })
+    }
+    if (value === EmployType.Part) {
+      setFullSalary({ minSalary: 0, maxSalary: 0 })
+    }
+  }, []);
+
+  const handleSelectFullSalary = useCallback((value?: SalaryRange) => {
+    setFullSalary(value);
+  }, []);
+
+  const handleSelectPartSalary = useCallback((value?: SalaryRange) => {
+    setPartSalary(value);
+  }, []);
+
+  const handleAcceptSittingChange = useCallback((value: boolean) => {
+    log('handleAcceptSittingChange', value);
+    setAcceptWorkForSit(value);
+  }, []);
+
+  useEffect(() => {
+    Taro.eventCenter.on(EventName.SELECT_CITY, handleSelectCity);
+    return () => {
+      Taro.eventCenter.off(EventName.SELECT_CITY, handleSelectCity);
+    };
+  }, [handleSelectCity]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      getData: () => ({
+        cityCodes: getCityCodeString(cityCodes),
+        employType,
+        acceptWorkForSit,
+        ...getSalaryPrice(fullSalary, partSalary),
+      }),
+    }),
+    [cityCodes, employType, fullSalary, partSalary, acceptWorkForSit]
+  );
+
+  return (
+    <div className={PREFIX}>
+      <BlFormItem title="意向城市" contentClassName={`${PREFIX}__indent-city-container`} dynamicHeight>
+        <div className={`${PREFIX}__indent-city`}>
+          {cityCodes.map(code => {
+            return (
+              <div key={code} className={`${PREFIX}__indent-city__item`}>
+                {CITY_CODE_TO_NAME_MAP.get(code)}
+                <Image
+                  mode="aspectFit"
+                  className={`${PREFIX}__indent-city__delete-icon`}
+                  src={require('@/statics/svg/circle-delete.svg')}
+                  onClick={() => handleDeleteCity(code)}
+                />
+              </div>
+            );
+          })}
+          {cityCodes.length < 3 && (
+            <div className={`${PREFIX}__indent-city__item`} onClick={handleClickAddCity}>
+              <Image
+                mode="aspectFit"
+                className={`${PREFIX}__indent-city__add-icon`}
+                src={require('@/statics/svg/add.svg')}
+              />
+            </div>
+          )}
+        </div>
+      </BlFormItem>
+      <BlFormItem title="工作类型">
+        <BlFormRadioGroup direction="horizontal" value={employType} onChange={handleEmployTypeChange}>
+          <BlFormRadio name={EmployType.Full} text={EMPLOY_TYPE_TITLE_MAP[EmployType.Full]} value={employType} />
+          <BlFormRadio name={EmployType.Part} text={EMPLOY_TYPE_TITLE_MAP[EmployType.Part]} value={employType} />
+          <BlFormRadio name={EmployType.All} text={EMPLOY_TYPE_TITLE_MAP[EmployType.All]} value={employType} />
+        </BlFormRadioGroup>
+      </BlFormItem>
+      {isFullTimePriceRequired(employType) &&
+        (<BlFormItem title="期望全职薪资">
+          <BlFormSelect
+            title="期望全职薪资"
+            value={fullSalary}
+            options={FULL_PRICE_OPTIONS}
+            onSelect={handleSelectFullSalary}
+          />
+        </BlFormItem>)}
+      {isPartTimePriceRequired(employType) &&
+        (<BlFormItem title="期望兼职薪资">
+          <BlFormSelect
+            title="期望兼职薪资"
+            value={partSalary}
+            options={PART_PRICE_OPTIONS}
+            onSelect={handleSelectPartSalary}
+          />
+        </BlFormItem>)}
+      <BlFormItem title="是否接受坐班">
+        <BlFormRadioGroup direction="horizontal" value={acceptWorkForSit} onChange={handleAcceptSittingChange}>
+          <BlFormRadio name text="接受" value={acceptWorkForSit} />
+          <BlFormRadio name={false} text="不接受" value={acceptWorkForSit} />
+        </BlFormRadioGroup>
+      </BlFormItem>
+    </div>
+  );
+}
+
+export default forwardRef(ProfileIntentionFragment);
--- a/src/fragments/profile/view/index.less
+++ b/src/fragments/profile/view/index.less
@ -0,0 +1,209 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.profile-view-fragment {
+  padding-bottom: 88rpx;
+  
+  &__header {
+    position: relative;
+    width: 100%;
+
+    &__swiper {
+      width: 100%;
+      height: 1080px;
+    }
+
+    &__swiper-item {
+      width: 100%;
+      height: 1080px;
+      position: relative;
+    }
+
+    &__cover {
+      width: 100%;
+      height: 100%;
+    }
+
+    &__cover-preview {
+      width: 70px;
+      height: 70px;
+      position: absolute;
+      top: 50%;
+      right: 50%;
+      transform: translate3d(50%, -50%, 0);
+    }
+
+    &__edit-video {
+      position: absolute;
+      top: 32px;
+      right: 24px;
+      width: 176px;
+      height: 56px;
+      line-height: 56px;
+      text-align: center;
+      font-size: 28px;
+      font-weight: 400;
+      color: #FFFFFF;
+      background: #0000005C;
+      border-radius: 48px;
+    }
+
+    &__banner {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: 72px;
+      padding: 0 24px;
+      .flex-row();
+      justify-content: space-between;
+      font-size: 32px;
+      line-height: 48px;
+      font-weight: 500;
+      color: #FFFFFF;
+      box-sizing: border-box;
+      background: linear-gradient(349.14deg, rgba(0, 0, 0, 0.3) 13.62%, rgba(0, 0, 0, 0.195) 126.8%);
+    }
+
+    &__video-size {
+      font-size: 24px;
+      font-weight: 400;
+    }
+  }
+
+  &__body {
+    margin: 24px;
+    // 底部按钮栏高度 + 边距
+    margin-bottom: calc(24px + 24px);
+    // margin-bottom: calc(112px + 24px);
+    width: calc(100% - 48px);
+    background: #FFFFFF;
+    border-radius: 16px;
+  }
+
+  &__divider {
+    position: absolute;
+    left: 24px;
+    right: 24px;
+    bottom: 0;
+    height: 1px;
+    background: #E0E0E0;
+  }
+
+  &__basic-info {
+    position: relative;
+    padding: 40px;
+
+    &__name-container {
+      .flex-row();
+    }
+
+    &__name {
+      font-size: 36px;
+      line-height: 48px;
+      font-weight: 500;
+      color: @blColor;
+    }
+
+    &__edit {
+      font-size: 28px;
+      line-height: 32px;
+      font-weight: 400;
+      color: @blHighlightColor;
+      margin-left: 8px;
+    }
+
+    &__content {
+      font-size: 24px;
+      line-height: 40px;
+      font-weight: 400;
+      color: @blColor;
+      margin-top: 12px;
+    }
+  }
+
+  &__info-group {
+    position: relative;
+    width: 100%;
+    padding: 40px;
+    box-sizing: border-box;
+  }
+
+  &__info-group__header {
+    .flex-row();
+    justify-content: space-between;
+
+    &__title {
+      font-size: 28px;
+      line-height: 40px;
+      font-weight: 500;
+      color: @blColor;
+    }
+
+    &__edit {
+      font-size: 28px;
+      line-height: 32px;
+      font-weight: 400;
+      color: @blHighlightColor;
+    }
+  }
+
+  &__info-group__items {
+    .flex-row();
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  &__info-group__item {
+    width: 50%;
+    margin-top: 32px;
+
+    &.full-line {
+      width: 100%;
+    }
+
+    &__title {
+      font-size: 24px;
+      line-height: 36px;
+      font-weight: 400;
+      color: @blColorG1;
+    }
+
+    &__value {
+      font-size: 28px;
+      line-height: 40px;
+      font-weight: 500;
+      color: @blColor;
+      margin-top: 4px;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+
+  &__footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background: #FFFFFF;
+    padding: 12px 32px;
+    box-shadow: 0px -4px 20px 0px #00000014;
+    box-sizing: border-box;
+
+    &__buttons {
+      .flex-row();
+
+      &__share {
+        .button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
+        flex: 1 1;
+        color: @blHighlightColor;
+        background: @blHighlightBg;
+      }
+
+      &__manager {
+        .button(@height: 88px, @fontSize: 32px, @fontWeight: 500, @borderRadius: 48px);
+        flex: 2 2;
+        margin-left: 32px;
+      }
+    }
+
+  }
+}
--- a/src/fragments/profile/view/index.tsx
+++ b/src/fragments/profile/view/index.tsx
@ -0,0 +1,223 @@
+import { Image } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+
+import { Swiper } from '@taroify/core';
+import classNames from 'classnames';
+import { useCallback, useState } from 'react';
+
+import DevDiv from '@/components/dev-div';
+import SafeBottomPadding from '@/components/safe-bottom-padding';
+import { OpenSource, PageUrl } from '@/constants/app';
+import { CITY_CODE_TO_NAME_MAP } from '@/constants/city';
+import { FULL_PRICE_OPTIONS, PART_PRICE_OPTIONS } from '@/constants/job';
+import { ProfileGroupType, ProfileTitleMap, WORK_YEAR_OPTIONS } from '@/constants/material';
+import { MaterialProfile } from '@/types/material';
+import { logWithPrefix, isDesktop } from '@/utils/common';
+import { getBasicInfo, sortVideos } from '@/utils/material';
+import { navigateTo } from '@/utils/route';
+
+
+import './index.less';
+
+interface IProps {
+  editable: boolean;
+  profile: MaterialProfile;
+  onDev?: () => void;
+}
+
+const PREFIX = 'profile-view-fragment';
+const log = logWithPrefix(PREFIX);
+const DEFAULT_TEXT = '未填写';
+
+const getIndentCity = (codeString: string = '') => {
+  const codes = codeString.split('、');
+  const cityNames: string[] = [];
+  codes.forEach(code => {
+    const cityName = CITY_CODE_TO_NAME_MAP.get(code);
+    cityName && cityNames.push(cityName);
+  });
+  return cityNames.join('、');
+};
+
+const getIndentPrice = (min: number, max: number, full: boolean) => {
+  if (!min && !max) {
+    return DEFAULT_TEXT;
+  }
+  const options = full ? FULL_PRICE_OPTIONS : PART_PRICE_OPTIONS;
+  const option = options.find(o => o.value.minSalary === min && o.value.maxSalary === max);
+  if (option) {
+    return option.label;
+  }
+
+  const unit = full ? 'K' : '';
+  const prices: string[] = [];
+  min && prices.push(`${full ? Number(min) / 1000 : min}${unit}`);
+  max && prices.push(`${full ? Number(max) / 1000 : max}${unit}`);
+  return prices.join(' - ');
+};
+
+const getWorkYear = (year: number) => {
+  if (!year) {
+    return DEFAULT_TEXT;
+  }
+  const y = Math.min(year, 3);
+  return WORK_YEAR_OPTIONS.find(option => option.value === y)?.label || `${y}年`;
+};
+
+const getDataGroup = (profile: MaterialProfile | null) => {
+  if (!profile) {
+    return [];
+  }
+  return [
+    {
+      title: ProfileTitleMap[ProfileGroupType.Intention],
+      type: ProfileGroupType.Intention,
+      items: [
+        { title: '全职薪资', value: getIndentPrice(profile.fullTimeMinPrice, profile.fullTimeMaxPrice, true) || '' },
+        { title: '兼职薪资', value: getIndentPrice(profile.partyTimeMinPrice, profile.partyTimeMaxPrice, false) || '' },
+        { title: '意向城市', value: getIndentCity(profile.cityCodes) || DEFAULT_TEXT },
+        { title: '是否接受坐班', value: profile.acceptWorkForSit ? '是' : '否' },
+      ],
+    },
+    {
+      title: ProfileTitleMap[ProfileGroupType.Experience],
+      type: ProfileGroupType.Experience,
+      items: [
+        { title: '直播年限', value: getWorkYear(profile.workedYear) || DEFAULT_TEXT },
+        { title: '直播过的账号', value: profile.workedAccounts || DEFAULT_TEXT },
+        { title: '自然流起号经验', value: Boolean(profile.newAccountExperience) ? '有' : '无' },
+        { title: '直播过的品类', value: profile.workedSecCategoryStr || DEFAULT_TEXT },
+        { title: '最高GMV', value: profile.maxGmv ? `${profile.maxGmv / 10000}万` : DEFAULT_TEXT },
+        { title: '最高在线人数', value: profile.maxOnline || DEFAULT_TEXT },
+      ],
+    },
+    {
+      title: ProfileTitleMap[ProfileGroupType.Advantages],
+      type: ProfileGroupType.Advantages,
+      items: [{ title: '自身优势', value: profile.advantages || DEFAULT_TEXT, fullLine: true }],
+    },
+  ];
+};
+
+
+export default function ProfileViewFragment(props: IProps) {
+  const { profile, editable, onDev } = props;
+  const [coverIndex, setCoverIndex] = useState(0);
+  const dataGroup = getDataGroup(profile);
+  const videos = sortVideos(profile?.materialVideoInfoList || []);
+
+
+  const handleClickVideo = useCallback(
+    (index: number) => {
+      log('handleClickVideo', index);
+
+      if (isDesktop) {
+        navigateTo(PageUrl.MaterialWebview, {
+          source: encodeURIComponent(videos[index].url)
+        })
+      } else {
+        Taro.previewMedia({
+          sources: videos.map(video => ({ url: video.url, type: video.type })),
+          current: index,
+        });
+      }
+    },
+    [videos]
+  );
+
+  const handleEditVideo = useCallback(() => {
+    log('handleEditBasic');
+    navigateTo(PageUrl.MaterialUploadVideo, { source: OpenSource.UserPage });
+  }, []);
+
+  const handleEditBasic = useCallback(() => {
+    log('handleEditBasic');
+    navigateTo(PageUrl.MaterialEditProfile, { type: ProfileGroupType.Basic });
+  }, []);
+
+  const handleEditGroupItem = useCallback((groupType: ProfileGroupType) => {
+    log('handleEditGroupItem', groupType);
+    navigateTo(PageUrl.MaterialEditProfile, { type: groupType });
+  }, []);
+
+  return (
+    <div className={PREFIX}>
+      <div className={`${PREFIX}__header`}>
+        <Swiper className={`${PREFIX}__header__swiper`} onChange={setCoverIndex} stopPropagation={false} lazyRender>
+          {videos.map((cover, index) => (
+            <Swiper.Item key={cover.coverUrl}>
+              <div className={`${PREFIX}__header__swiper-item`}>
+                <Image
+                  mode="aspectFill"
+                  src={cover.coverUrl}
+                  className={`${PREFIX}__header__cover`}
+                  onClick={() => handleClickVideo(index)}
+                />
+                {cover.type === 'video' && (
+                  <Image
+                    className={`${PREFIX}__header__cover-preview`}
+                    mode="aspectFit"
+                    src={require('@/statics/svg/preview_video.svg')}
+                    onClick={() => handleClickVideo(index)}
+                  />
+                )}
+              </div>
+            </Swiper.Item>
+          ))}
+        </Swiper>
+        {editable && (
+          <div className={`${PREFIX}__header__edit-video`} onClick={handleEditVideo}>
+            编辑录屏
+          </div>
+        )}
+        <div className={`${PREFIX}__header__banner`}>
+          <div>{videos[coverIndex]?.title || ''}</div>
+          <div
+            className={`${PREFIX}__header__video-size`}
+          >{`${coverIndex + 1}/${profile.materialVideoInfoList.length}`}</div>
+        </div>
+      </div>
+      <div className={`${PREFIX}__body`}>
+        <div className={`${PREFIX}__basic-info`}>
+          <div className={`${PREFIX}__basic-info__name-container`}>
+            <DevDiv className={`${PREFIX}__basic-info__name`} OnDev={onDev}>
+              {profile.name}
+            </DevDiv>
+            {editable && (
+              <div className={`${PREFIX}__basic-info__edit`} onClick={handleEditBasic}>
+                编辑
+              </div>
+            )}
+          </div>
+          <div className={`${PREFIX}__basic-info__content`}>{getBasicInfo(profile)}</div>
+          <div className={`${PREFIX}__divider`} />
+        </div>
+        {dataGroup.map((data, index: number) => (
+          <div className={`${PREFIX}__info-group`} key={data.type}>
+            <div className={`${PREFIX}__info-group__header`}>
+              <div className={`${PREFIX}__info-group__header__title`}>{data.title}</div>
+              {editable && (
+                <div className={`${PREFIX}__info-group__header__edit`} onClick={() => handleEditGroupItem(data.type)}>
+                  编辑
+                </div>
+              )}
+            </div>
+            <div className={`${PREFIX}__info-group__items`}>
+              {data.items.map(item => (
+                <div
+                  key={String(item.value)}
+                  className={classNames(`${PREFIX}__info-group__item`, { 'full-line': item.fullLine })}
+                >
+                  <div className={`${PREFIX}__info-group__item__title`}>{item.title}</div>
+                  <div className={`${PREFIX}__info-group__item__value`}>{item.value}</div>
+                </div>
+              ))}
+            </div>
+            {index !== dataGroup.length - 1 && <div className={`${PREFIX}__divider`} />}
+          </div>
+        ))}
+      </div>
+      <SafeBottomPadding />
+    </div>
+  );
+}
--- a/src/fragments/user/anchor/index.less
+++ b/src/fragments/user/anchor/index.less
@ -0,0 +1,20 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.user-fragment-anchor {
+
+  &__cell {
+    height: 112px;
+    padding-left: 24px;
+    padding-right: 24px;
+    border-radius: 16px;
+    margin-top: 24px;
+  }
+
+  &__switch-to-company {
+    width: 100%;
+    height: 112px;
+    border-radius: 16px;
+    margin-top: 24px;
+  }
+}
--- a/src/fragments/user/anchor/index.tsx
+++ b/src/fragments/user/anchor/index.tsx
@ -0,0 +1,40 @@
+import { Image } from '@tarojs/components';
+
+import { Cell } from '@taroify/core';
+import { useCallback } from 'react';
+
+import MaterialCard from '@/components/material-card';
+import WechatCell from '@/components/wx-cell';
+import { RoleType, PageUrl } from '@/constants/app';
+import { switchRoleType } from '@/utils/app';
+import { navigateTo } from '@/utils/route';
+
+import './index.less';
+
+const PREFIX = 'user-fragment-anchor';
+
+export default function AnchorFragment() {
+  const handleClickMyDeclaration = useCallback(() => navigateTo(PageUrl.MyDeclaration), []);
+
+  const handleClickSwitch = useCallback(() => switchRoleType(RoleType.Company), []);
+
+  return (
+    <div className={PREFIX}>
+      <MaterialCard />
+      <WechatCell className={`${PREFIX}__cell`} />
+      <Cell
+        isLink
+        align="center"
+        title="我联系的通告"
+        className={`${PREFIX}__cell`}
+        onClick={handleClickMyDeclaration}
+      />
+      <Image
+        mode="widthFix"
+        className={`${PREFIX}__switch-to-company`}
+        src="https://neighbourhood.cn/zhao_zhubo_1.png"
+        onClick={handleClickSwitch}
+      />
+    </div>
+  );
+}
--- a/src/fragments/user/company/index.less
+++ b/src/fragments/user/company/index.less
@ -0,0 +1,27 @@
+@import '@/styles/common.less';
+@import '@/styles/variables.less';
+
+.user-fragment-company {
+
+  &__cell {
+    height: 112px;
+    padding-left: 24px;
+    padding-right: 24px;
+    border-radius: 16px;
+    margin-top: 24px;
+
+    .taroify-cell__value {
+      color: @blColor;
+    }
+  }
+
+  &__go-publish-cell {
+    .taroify-cell__title {
+      flex: 2;
+    }
+
+    .taroify-cell__value {
+      color: @blHighlightColor;
+    }
+  }
+}
--- a/src/fragments/user/company/index.tsx
+++ b/src/fragments/user/company/index.tsx
@ -0,0 +1,44 @@
+import { Cell } from '@taroify/core';
+import classNames from 'classnames';
+import { useCallback } from 'react';
+
+import CertificationStatus from '@/components/certification-status';
+import WechatCell from '@/components/wx-cell';
+import { PageUrl } from '@/constants/app';
+import { CertificationStatusType } from '@/constants/company';
+import useUserInfo from '@/hooks/use-user-info';
+import { navigateTo } from '@/utils/route';
+
+import './index.less';
+
+const PREFIX = 'user-fragment-company';
+
+export default function CompanyFragment() {
+  const userInfo = useUserInfo();
+  // const [showPublish, setShowPublish] = useState(false);
+
+  const handlePublishJob = useCallback(async () => {
+    if (userInfo.bossAuthStatus !== CertificationStatusType.Success) {
+      navigateTo(PageUrl.CertificationStart);
+      return;
+    }
+    navigateTo(PageUrl.CertificationManage);
+  }, [userInfo]);
+
+  return (
+    <div className={PREFIX}>
+      <CertificationStatus className={`${PREFIX}__cell`} />
+      <WechatCell className={`${PREFIX}__cell`} />
+      <Cell
+        isLink
+        align="center"
+        title="发通告，让主播主动报单"
+        className={classNames(`${PREFIX}__cell`, `${PREFIX}__go-publish-cell`)}
+        onClick={handlePublishJob}
+      >
+        去发布
+      </Cell>
+      {/* <div>{showPublish && <CompanyPublishJobDialog userInfo={userInfo} onClose={() => setShowPublish(false)} />}</div> */}
+    </div>
+  );
+}