亲亲创客2.0后台原型

.obsidian/app.json

+{}
\ No newline at end of file

.obsidian/appearance.json

+{
+  "theme": "obsidian"
+}
\ No newline at end of file

.obsidian/community-plugins.json

+[
+  "obsidian-git"
+]
\ No newline at end of file

.obsidian/core-plugins.json

+{
+  "file-explorer": true,
+  "global-search": true,
+  "switcher": true,
+  "graph": true,
+  "backlink": true,
+  "canvas": true,
+  "outgoing-link": true,
+  "tag-pane": true,
+  "footnotes": false,
+  "properties": true,
+  "page-preview": true,
+  "daily-notes": true,
+  "templates": true,
+  "note-composer": true,
+  "command-palette": true,
+  "slash-command": false,
+  "editor-status": true,
+  "bookmarks": true,
+  "markdown-importer": false,
+  "zk-prefixer": false,
+  "random-note": false,
+  "outline": true,
+  "word-count": true,
+  "slides": false,
+  "audio-recorder": false,
+  "workspaces": false,
+  "file-recovery": true,
+  "publish": false,
+  "sync": true,
+  "bases": true,
+  "webviewer": false
+}
\ No newline at end of file

.obsidian/plugins/obsidian-git/manifest.json

+{
+    "author": "Vinzent",
+    "authorUrl": "https://github.com/Vinzent03",
+    "id": "obsidian-git",
+    "name": "Git",
+    "description": "Integrate Git version control with automatic backup and other advanced features.",
+    "isDesktopOnly": false,
+    "fundingUrl": "https://ko-fi.com/vinzent",
+    "version": "2.38.5"
+}

.obsidian/plugins/obsidian-git/obsidian_askpass.sh

+#!/bin/sh
+
+PROMPT="$1"
+TEMP_FILE="$OBSIDIAN_GIT_CREDENTIALS_INPUT"
+
+cleanup() {
+    rm -f "$TEMP_FILE" "$TEMP_FILE.response"
+}
+trap cleanup EXIT
+
+echo "$PROMPT" > "$TEMP_FILE"
+
+while [ ! -e "$TEMP_FILE.response" ]; do
+    if [ ! -e "$TEMP_FILE" ]; then
+        echo "Trigger file got removed: Abort" >&2
+        exit 1
+    fi
+    sleep 0.1
+done
+
+RESPONSE=$(cat "$TEMP_FILE.response")
+
+echo "$RESPONSE"

.obsidian/plugins/obsidian-git/styles.css

+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.workspace-leaf-content[data-type="git-view"] .button-border {
+    border: 2px solid var(--interactive-accent);
+    border-radius: var(--radius-s);
+}
+
+.workspace-leaf-content[data-type="git-view"] .view-content {
+    padding-left: 0;
+    padding-top: 0;
+    padding-right: 0;
+}
+
+.workspace-leaf-content[data-type="git-history-view"] .view-content {
+    padding-left: 0;
+    padding-top: 0;
+    padding-right: 0;
+}
+
+.loading {
+    overflow: hidden;
+}
+
+.loading > svg {
+    animation: 2s linear infinite loading;
+    transform-origin: 50% 50%;
+    display: inline-block;
+}
+
+.obsidian-git-center {
+    margin: auto;
+    text-align: center;
+    width: 50%;
+}
+
+.obsidian-git-textarea {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.obsidian-git-disabled {
+    opacity: 0.5;
+}
+
+.obsidian-git-center-button {
+    display: block;
+    margin: 20px auto;
+}
+
+.tooltip.mod-left {
+    overflow-wrap: break-word;
+}
+
+.tooltip.mod-right {
+    overflow-wrap: break-word;
+}
+
+/* Limits the scrollbar to the view body */
+.git-view {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    height: 100%;
+}
+
+/* Re-enable wrapping of nav buttns to prevent overflow on smaller screens #*/
+.workspace-drawer .git-view .nav-buttons-container {
+    flex-wrap: wrap;
+}
+
+.git-tools {
+    display: flex;
+    margin-left: auto;
+}
+.git-tools .type {
+    padding-left: var(--size-2-1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 11px;
+}
+
+.git-tools .type[data-type="M"] {
+    color: orange;
+}
+.git-tools .type[data-type="D"] {
+    color: red;
+}
+.git-tools .buttons {
+    display: flex;
+}
+.git-tools .buttons > * {
+    padding: 0;
+    height: auto;
+}
+
+.workspace-leaf-content[data-type="git-view"] .tree-item-self,
+.workspace-leaf-content[data-type="git-history-view"] .tree-item-self {
+    align-items: center;
+}
+
+.workspace-leaf-content[data-type="git-view"]
+    .tree-item-self:hover
+    .clickable-icon,
+.workspace-leaf-content[data-type="git-history-view"]
+    .tree-item-self:hover
+    .clickable-icon {
+    color: var(--icon-color-hover);
+}
+
+/* Highlight an item as active if it's diff is currently opened */
+.is-active .git-tools .buttons > * {
+    color: var(--nav-item-color-active);
+}
+
+.git-author {
+    color: var(--text-accent);
+}
+
+.git-date {
+    color: var(--text-accent);
+}
+
+.git-ref {
+    color: var(--text-accent);
+}
+
+/* ====== diff2html ======
+The following styles are adapted from the obsidian-version-history plugin by
+@kometenstaub https://github.com/kometenstaub/obsidian-version-history-diff/blob/main/src/styles.scss
+which itself is adapted from the diff2html library with the following original license:
+
+   	https://github.com/rtfpessoa/diff2html/blob/master/LICENSE.md
+
+	Copyright 2014-2016 Rodrigo Fernandes https://rtfpessoa.github.io/
+
+	Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+	documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+	rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+	persons to whom the Software is furnished to do so, subject to the following conditions:
+
+	The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+	Software.
+
+	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+	WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+	COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+	OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+.theme-dark,
+.theme-light {
+    --git-delete-bg: #ff475040;
+    --git-delete-hl: #96050a75;
+    --git-insert-bg: #68d36840;
+    --git-insert-hl: #23c02350;
+    --git-change-bg: #ffd55840;
+    --git-selected: #3572b0;
+
+    --git-delete: #cc3333;
+    --git-insert: #399839;
+    --git-change: #d0b44c;
+    --git-move: #3572b0;
+}
+
+.git-diff {
+    .d2h-d-none {
+        display: none;
+    }
+    .d2h-wrapper {
+        text-align: left;
+        border-radius: 0.25em;
+        overflow: auto;
+    }
+    .d2h-file-header.d2h-file-header {
+        background-color: var(--background-secondary);
+        border-bottom: 1px solid var(--background-modifier-border);
+        font-family:
+            Source Sans Pro,
+            Helvetica Neue,
+            Helvetica,
+            Arial,
+            sans-serif;
+        height: 35px;
+        padding: 5px 10px;
+    }
+    .d2h-file-header,
+    .d2h-file-stats {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+    }
+    .d2h-file-header {
+        display: none;
+    }
+    .d2h-file-stats {
+        font-size: 14px;
+        margin-left: auto;
+    }
+    .d2h-lines-added {
+        border: 1px solid var(--color-green);
+        border-radius: 5px 0 0 5px;
+        color: var(--color-green);
+        padding: 2px;
+        text-align: right;
+        vertical-align: middle;
+    }
+    .d2h-lines-deleted {
+        border: 1px solid var(--color-red);
+        border-radius: 0 5px 5px 0;
+        color: var(--color-red);
+        margin-left: 1px;
+        padding: 2px;
+        text-align: left;
+        vertical-align: middle;
+    }
+    .d2h-file-name-wrapper {
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        font-size: 15px;
+        width: 100%;
+    }
+    .d2h-file-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        color: var(--text-normal);
+        font-size: var(--h5-size);
+    }
+    .d2h-file-wrapper {
+        border: 1px solid var(--background-secondary-alt);
+        border-radius: 3px;
+        margin-bottom: 1em;
+        max-height: 100%;
+    }
+    .d2h-file-collapse {
+        -webkit-box-pack: end;
+        -ms-flex-pack: end;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        border: 1px solid var(--background-secondary-alt);
+        border-radius: 3px;
+        cursor: pointer;
+        display: none;
+        font-size: 12px;
+        justify-content: flex-end;
+        padding: 4px 8px;
+    }
+    .d2h-file-collapse.d2h-selected {
+        background-color: var(--git-selected);
+    }
+    .d2h-file-collapse-input {
+        margin: 0 4px 0 0;
+    }
+    .d2h-diff-table {
+        border-collapse: collapse;
+        font-family: var(--font-monospace);
+        font-size: var(--code-size);
+        width: 100%;
+    }
+    .d2h-files-diff {
+        width: 100%;
+    }
+    .d2h-file-diff {
+        /*
+		overflow-y: scroll;
+		*/
+        border-radius: 5px;
+        font-size: var(--font-text-size);
+        line-height: var(--line-height-normal);
+    }
+    .d2h-file-side-diff {
+        display: inline-block;
+        margin-bottom: -8px;
+        margin-right: -4px;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        width: 50%;
+    }
+    .d2h-code-line {
+        padding-left: 6em;
+        padding-right: 1.5em;
+    }
+    .d2h-code-line,
+    .d2h-code-side-line {
+        display: inline-block;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        white-space: nowrap;
+        width: 100%;
+    }
+    .d2h-code-side-line {
+        /* needed to be changed */
+        padding-left: 0.5em;
+        padding-right: 0.5em;
+    }
+    .d2h-code-line-ctn {
+        word-wrap: normal;
+        background: none;
+        display: inline-block;
+        padding: 0;
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        -ms-user-select: text;
+        user-select: text;
+        vertical-align: middle;
+        width: 100%;
+        /* only works for line-by-line */
+        white-space: pre-wrap;
+    }
+    .d2h-code-line del,
+    .d2h-code-side-line del {
+        background-color: var(--git-delete-hl);
+        color: var(--text-normal);
+    }
+    .d2h-code-line del,
+    .d2h-code-line ins,
+    .d2h-code-side-line del,
+    .d2h-code-side-line ins {
+        border-radius: 0.2em;
+        display: inline-block;
+        margin-top: -1px;
+        text-decoration: none;
+        vertical-align: middle;
+    }
+    .d2h-code-line ins,
+    .d2h-code-side-line ins {
+        background-color: var(--git-insert-hl);
+        text-align: left;
+    }
+    .d2h-code-line-prefix {
+        word-wrap: normal;
+        background: none;
+        display: inline;
+        padding: 0;
+        white-space: pre;
+    }
+    .line-num1 {
+        float: left;
+    }
+    .line-num1,
+    .line-num2 {
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        overflow: hidden;
+        /*
+		padding: 0 0.5em;
+		*/
+        text-overflow: ellipsis;
+        width: 2.5em;
+        padding-left: 0;
+    }
+    .line-num2 {
+        float: right;
+    }
+    .d2h-code-linenumber {
+        background-color: var(--background-primary);
+        border: solid var(--background-modifier-border);
+        border-width: 0 1px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        color: var(--text-faint);
+        cursor: pointer;
+        display: inline-block;
+        position: absolute;
+        text-align: right;
+        width: 5.5em;
+    }
+    .d2h-code-linenumber:after {
+        content: "\200b";
+    }
+    .d2h-code-side-linenumber {
+        background-color: var(--background-primary);
+        border: solid var(--background-modifier-border);
+        border-width: 0 1px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        color: var(--text-faint);
+        cursor: pointer;
+        overflow: hidden;
+        padding: 0 0.5em;
+        text-align: right;
+        text-overflow: ellipsis;
+        width: 4em;
+        /* needed to be changed */
+        display: table-cell;
+        position: relative;
+    }
+    .d2h-code-side-linenumber:after {
+        content: "\200b";
+    }
+    .d2h-code-side-emptyplaceholder,
+    .d2h-emptyplaceholder {
+        background-color: var(--background-primary);
+        border-color: var(--background-modifier-border);
+    }
+    .d2h-code-line-prefix,
+    .d2h-code-linenumber,
+    .d2h-code-side-linenumber,
+    .d2h-emptyplaceholder {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+    .d2h-code-linenumber,
+    .d2h-code-side-linenumber {
+        direction: rtl;
+    }
+    .d2h-del {
+        background-color: var(--git-delete-bg);
+        border-color: var(--git-delete-hl);
+    }
+    .d2h-ins {
+        background-color: var(--git-insert-bg);
+        border-color: var(--git-insert-hl);
+    }
+    .d2h-info {
+        background-color: var(--background-primary);
+        border-color: var(--background-modifier-border);
+        color: var(--text-faint);
+    }
+    .d2h-del,
+    .d2h-ins,
+    .d2h-file-diff .d2h-change {
+        color: var(--text-normal);
+    }
+    .d2h-file-diff .d2h-del.d2h-change {
+        background-color: var(--git-change-bg);
+    }
+    .d2h-file-diff .d2h-ins.d2h-change {
+        background-color: var(--git-insert-bg);
+    }
+    .d2h-file-list-wrapper {
+        a {
+            text-decoration: none;
+            cursor: default;
+            -webkit-user-drag: none;
+        }
+
+        svg {
+            display: none;
+        }
+    }
+    .d2h-file-list-header {
+        text-align: left;
+    }
+    .d2h-file-list-title {
+        display: none;
+    }
+    .d2h-file-list-line {
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        text-align: left;
+    }
+    .d2h-file-list {
+    }
+    .d2h-file-list > li {
+        border-bottom: 1px solid var(--background-modifier-border);
+        margin: 0;
+        padding: 5px 10px;
+    }
+    .d2h-file-list > li:last-child {
+        border-bottom: none;
+    }
+    .d2h-file-switch {
+        cursor: pointer;
+        display: none;
+        font-size: 10px;
+    }
+    .d2h-icon {
+        fill: currentColor;
+        margin-right: 10px;
+        vertical-align: middle;
+    }
+    .d2h-deleted {
+        color: var(--git-delete);
+    }
+    .d2h-added {
+        color: var(--git-insert);
+    }
+    .d2h-changed {
+        color: var(--git-change);
+    }
+    .d2h-moved {
+        color: var(--git-move);
+    }
+    .d2h-tag {
+        background-color: var(--background-secondary);
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        font-size: 10px;
+        margin-left: 5px;
+        padding: 0 2px;
+    }
+    .d2h-deleted-tag {
+        border: 1px solid var(--git-delete);
+    }
+    .d2h-added-tag {
+        border: 1px solid var(--git-insert);
+    }
+    .d2h-changed-tag {
+        border: 1px solid var(--git-change);
+    }
+    .d2h-moved-tag {
+        border: 1px solid var(--git-move);
+    }
+
+    /* needed for line-by-line*/
+
+    .d2h-diff-tbody {
+        position: relative;
+    }
+
+    /* My additions */
+    .cm-merge-revert {
+        width: 4em;
+    }
+    /* Ensure that merge revert markers are positioned correctly */
+    .cm-merge-revert > * {
+        position: absolute;
+        background-color: var(--background-secondary);
+        display: flex;
+    }
+}
+
+/* ====================== Line Authoring Information ====================== */
+
+.cm-gutterElement.obs-git-blame-gutter {
+    /* Add background color to spacing inbetween and around the gutter for better aesthetics */
+    border-width: 0px 2px 0.2px;
+    border-style: solid;
+    border-color: var(--background-secondary);
+    background-color: var(--background-secondary);
+}
+
+.cm-gutterElement.obs-git-blame-gutter > div,
+.line-author-settings-preview {
+    /* delegate text color to settings */
+    color: var(--obs-git-gutter-text);
+    font-family: monospace;
+    height: 100%; /* ensure, that age-based background color occupies entire parent */
+    text-align: right;
+    padding: 0px 6px;
+    white-space: pre; /* Keep spaces and do not collapse them. */
+}
+
+@media (max-width: 800px) {
+    /* hide git blame gutter not to superpose text */
+    .cm-gutterElement.obs-git-blame-gutter {
+        display: none;
+    }
+}
+
+.git-unified-diff-view,
+.git-split-diff-view .cm-deletedLine .cm-changedText {
+    background-color: #ee443330;
+}
+
+.git-unified-diff-view,
+.git-split-diff-view .cm-insertedLine .cm-changedText {
+    background-color: #22bb2230;
+}
+
+.git-obscure-prompt[git-is-obscured="true"] #git-show-password:after {
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle></svg>');
+}
+
+.git-obscure-prompt[git-is-obscured="false"] #git-show-password:after {
+    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-eye-off"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"></path><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"></path><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"></path><path d="m2 2 20 20"></path></svg>');
+}
+
+/* Override styling of Codemirror merge view "collapsed lines" indicator */
+.git-split-diff-view .ͼ2 .cm-collapsedLines {
+    background: var(--interactive-normal);
+    border-radius: var(--radius-m);
+    color: var(--text-accent);
+    font-size: var(--font-small);
+    padding: var(--size-4-1) var(--size-4-1);
+}
+.git-split-diff-view .ͼ2 .cm-collapsedLines:hover {
+    background: var(--interactive-hover);
+    color: var(--text-accent-hover);
+}
+
+.git-signs-gutter {
+    .cm-gutterElement {
+        display: grid;
+
+        /* Needed to align the sign properly for different line heigts. Such as
+         * when having a heading or list item.
+         */
+        padding-top: 0 !important;
+    }
+}
+
+.git-gutter-marker:hover {
+    border-radius: 2px;
+}
+
+.git-gutter-marker.git-add {
+    background-color: var(--color-green);
+    justify-self: center;
+    height: inherit;
+    width: 0.2rem;
+}
+
+.git-gutter-marker.git-change {
+    background-color: var(--color-yellow);
+    justify-self: center;
+    height: inherit;
+    width: 0.2rem;
+}
+
+.git-gutter-marker.git-changedelete {
+    color: var(--color-yellow);
+    font-weight: var(--font-bold);
+    font-size: 1rem;
+    justify-self: center;
+    height: inherit;
+}
+
+.git-gutter-marker.git-delete {
+    background-color: var(--color-red);
+    height: 0.2rem;
+    width: 0.8rem;
+    align-self: end;
+}
+
+.git-gutter-marker.git-topdelete {
+    background-color: var(--color-red);
+    height: 0.2rem;
+    width: 0.8rem;
+    align-self: start;
+}
+
+div:hover > .git-gutter-marker.git-change {
+    width: 0.6rem;
+}
+
+div:hover > .git-gutter-marker.git-add {
+    width: 0.6rem;
+}
+
+div:hover > .git-gutter-marker.git-delete {
+    height: 0.6rem;
+}
+
+div:hover > .git-gutter-marker.git-topdelete {
+    height: 0.6rem;
+}
+
+div:hover > .git-gutter-marker.git-changedelete {
+    font-weight: var(--font-bold);
+}
+
+.git-gutter-marker.staged {
+    opacity: 0.5;
+}
+
+/* Prevent shifting of the editor when git signs gutter is the only gutter present */
+.cm-gutters.cm-gutters-before:has(> .git-signs-gutter:only-child) {
+    margin-inline-end: 0;
+    .git-signs-gutter {
+        margin-inline-start: -1rem;
+    }
+}
+
+.git-changes-status-bar-colored {
+    .git-add {
+        color: var(--color-green);
+    }
+    .git-change {
+        color: var(--color-yellow);
+    }
+    .git-delete {
+        color: var(--color-red);
+    }
+}
+
+.git-changes-status-bar .git-add {
+    margin-right: 0.3em;
+}
+
+.git-changes-status-bar .git-change {
+    margin-right: 0.3em;
+}

.obsidian/workspace.json

+{
+  "main": {
+    "id": "cc505d76f19dc513",
+    "type": "split",
+    "children": [
+      {
+        "id": "dc349f6b35a96757",
+        "type": "tabs",
+        "children": [
+          {
+            "id": "c949569524e16b87",
+            "type": "leaf",
+            "state": {
+              "type": "empty",
+              "state": {},
+              "icon": "lucide-file",
+              "title": "新标签页"
+            }
+          }
+        ]
+      }
+    ],
+    "direction": "vertical"
+  },
+  "left": {
+    "id": "78cd361163147386",
+    "type": "split",
+    "children": [
+      {
+        "id": "013fcccd7350faa8",
+        "type": "tabs",
+        "children": [
+          {
+            "id": "cf2ff5c8eae1bc75",
+            "type": "leaf",
+            "state": {
+              "type": "file-explorer",
+              "state": {
+                "sortOrder": "alphabetical",
+                "autoReveal": true
+              },
+              "icon": "lucide-folder-closed",
+              "title": "文件列表"
+            }
+          },
+          {
+            "id": "1ebdcfe49bfcc2ae",
+            "type": "leaf",
+            "state": {
+              "type": "search",
+              "state": {
+                "query": "",
+                "matchingCase": false,
+                "explainSearch": false,
+                "collapseAll": false,
+                "extraContext": false,
+                "sortOrder": "alphabetical"
+              },
+              "icon": "lucide-search",
+              "title": "搜索"
+            }
+          },
+          {
+            "id": "466de10af74c0bf8",
+            "type": "leaf",
+            "state": {
+              "type": "bookmarks",
+              "state": {},
+              "icon": "lucide-bookmark",
+              "title": "书签"
+            }
+          }
+        ]
+      }
+    ],
+    "direction": "horizontal",
+    "width": 300
+  },
+  "right": {
+    "id": "f30b0f57eb171aaf",
+    "type": "split",
+    "children": [
+      {
+        "id": "425a7183dfe12e9a",
+        "type": "tabs",
+        "children": [
+          {
+            "id": "030cbfd0e9eda02e",
+            "type": "leaf",
+            "state": {
+              "type": "backlink",
+              "state": {
+                "collapseAll": false,
+                "extraContext": false,
+                "sortOrder": "alphabetical",
+                "showSearch": false,
+                "searchQuery": "",
+                "backlinkCollapsed": false,
+                "unlinkedCollapsed": true
+              },
+              "icon": "links-coming-in",
+              "title": "反向链接"
+            }
+          },
+          {
+            "id": "c2192d64e02177b7",
+            "type": "leaf",
+            "state": {
+              "type": "outgoing-link",
+              "state": {
+                "linksCollapsed": false,
+                "unlinkedCollapsed": true
+              },
+              "icon": "links-going-out",
+              "title": "出链"
+            }
+          },
+          {
+            "id": "d47f0772c9e0f4fe",
+            "type": "leaf",
+            "state": {
+              "type": "tag",
+              "state": {
+                "sortOrder": "frequency",
+                "useHierarchy": true,
+                "showSearch": false,
+                "searchQuery": ""
+              },
+              "icon": "lucide-tags",
+              "title": "标签"
+            }
+          },
+          {
+            "id": "8f8fb97308236bc5",
+            "type": "leaf",
+            "state": {
+              "type": "all-properties",
+              "state": {
+                "sortOrder": "frequency",
+                "showSearch": false,
+                "searchQuery": ""
+              },
+              "icon": "lucide-archive",
+              "title": "添加笔记属性"
+            }
+          },
+          {
+            "id": "0669472d0dff40df",
+            "type": "leaf",
+            "state": {
+              "type": "outline",
+              "state": {
+                "followCursor": false,
+                "showSearch": false,
+                "searchQuery": ""
+              },
+              "icon": "lucide-list",
+              "title": "大纲"
+            }
+          }
+        ]
+      }
+    ],
+    "direction": "horizontal",
+    "width": 300,
+    "collapsed": true
+  },
+  "left-ribbon": {
+    "hiddenItems": {
+      "obsidian-git:Open Git source control": false,
+      "switcher:打开快速切换": false,
+      "graph:查看关系图谱": false,
+      "canvas:新建白板": false,
+      "daily-notes:打开/创建今天的日记": false,
+      "templates:插入模板": false,
+      "command-palette:打开命令面板": false,
+      "bases:新建数据库": false
+    }
+  },
+  "active": "cf2ff5c8eae1bc75",
+  "lastOpenFiles": []
+}
\ No newline at end of file

HTML原型/assignee_table.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>对接人分配表</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+.layout{display:flex;height:100vh}
+.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
+.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
+.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
+.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+.main{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto}
+.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
+.page-title{font-size:15px;font-weight:600}
+.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-sm{padding:3px 9px;font-size:11px}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
+.btn-link+.btn-link{margin-left:8px}
+.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 24px;flex-shrink:0}
+.filter-grid{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
+.filter-item{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px}
+.filter-item label{color:#8c8c8c}
+.filter-item input,.filter-item select{height:28px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:110px}
+.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
+.filter-btns{margin-left:auto;display:flex;gap:6px}
+.content{padding:16px 24px;flex:1}
+.info-bar{background:#e8f4ff;border:1px solid #91caff;border-radius:6px;padding:9px 14px;font-size:12px;color:#0958d9;margin-bottom:12px;display:flex;gap:6px}
+.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:12px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:9px 10px;vertical-align:middle}
+.cell-sub{font-size:11px;color:#bfbfbf;margin-top:2px}
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-cyan{background:#e6fffb;color:#08979c;border-color:#87e8de}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-gold{background:#fffbe6;color:#d48806;border-color:#ffe58f}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:flex-start;justify-content:center;padding:32px 0;overflow-y:auto}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:580px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden;margin:auto}
+.modal-header{padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
+.modal-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:18px 20px;max-height:70vh;overflow-y:auto}
+.modal-footer{padding:10px 20px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0;background:#fff}
+.detail-row{display:flex;font-size:13px;padding:7px 0;border-bottom:1px solid #f5f5f5}
+.detail-row:last-child{border-bottom:none}
+.dl{width:90px;flex-shrink:0;color:#8c8c8c;text-align:right;padding-right:12px;line-height:1.6}
+.dv{flex:1;color:#1a1a1a;line-height:1.6}
+.sec-title{font-size:12px;font-weight:500;color:#8c8c8c;margin:14px 0 8px;padding-bottom:5px;border-bottom:1px solid #f5f5f5}
+</style>
+</head>
+<body>
+<div class="layout">
+  <div class="sidebar">
+    <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
+    <div class="nav-group">合伙人管理</div>
+    <div class="nav-item">合伙人管理列表</div>
+    <div class="nav-group">商机管理</div>
+    <div class="nav-item">商机管理列表</div>
+    <div class="nav-item active">对接人分配表</div>
+    <div class="nav-group">佣金结算</div>
+    <div class="nav-item">合伙人佣金结算</div>
+    <div class="nav-item">渠道管理员佣金结算</div>
+    <div class="nav-item">对接人佣金结算</div>
+  </div>
+
+  <div class="main">
+    <div class="page-header">
+      <span class="page-title">对接人分配表</span>
+      <div style="display:flex;gap:8px">
+        <button class="btn"><i class="ti ti-download"></i>导出</button>
+        <button class="btn"><i class="ti ti-share"></i>分享</button>
+      </div>
+    </div>
+
+    <div class="filter-wrap">
+      <div class="filter-grid">
+        <div class="filter-item"><label>企业名称</label><input type="text" id="f-ent" placeholder="请输入"></div>
+        <div class="filter-item"><label>产品名称</label><input type="text" id="f-prod" placeholder="请输入"></div>
+        <div class="filter-item"><label>对接人</label>
+          <select id="f-asgn">
+            <option value="">全部</option>
+            <option>李明</option><option>赵磊</option><option>刘婷</option><option>王芳</option>
+          </select>
+        </div>
+        <div class="filter-item"><label>渠道管理员</label>
+          <select id="f-channel">
+            <option value="">全部</option>
+            <option>王利娟</option>
+          </select>
+        </div>
+        <div class="filter-item"><label>合伙人</label><input type="text" id="f-partner" placeholder="姓名/手机号"></div>
+        <div class="filter-item"><label>写入时间</label>
+          <div style="display:flex;align-items:center;gap:4px">
+            <input type="date" style="min-width:118px"><span style="color:#bfbfbf">至</span><input type="date" style="min-width:118px">
+          </div>
+        </div>
+        <div class="filter-btns">
+          <button class="btn btn-primary btn-sm" onclick="renderTable()"><i class="ti ti-search"></i>查询</button>
+          <button class="btn btn-sm" onclick="resetFilter()"><i class="ti ti-refresh"></i>重置</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="info-bar">
+        <i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>本表记录商机<b>已分配对接人且已关联企业</b>后自动写入的数据。新建商机时系统将查询此表，按「企业名称 + 产品名称」匹配，若有记录则自动带入对接人。</span>
+      </div>
+
+      <div class="table-card">
+        <table>
+          <thead>
+            <tr>
+              <th>企业名称</th>
+              <th>产品名称</th>
+              <th>产品分类</th>
+              <th>合伙人</th>
+              <th>对接人</th>
+              <th>渠道管理员</th>
+              <th>商机状态</th>
+              <th>写入时间</th>
+              <th>来源商机</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody id="main-tbody"></tbody>
+        </table>
+        <div class="pagination">
+          <span id="row-count">共 4 条</span>
+          <div style="display:flex;gap:4px">
+            <div class="page-btn"><i class="ti ti-chevron-left"></i></div>
+            <div class="page-btn active">1</div>
+            <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 详情弹窗 -->
+<div class="modal-overlay" id="modal-detail">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#1677ff"><i class="ti ti-table"></i>分配记录详情</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-detail')"></i>
+    </div>
+    <div class="modal-body" id="detail-body"></div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-detail')">关闭</button>
+    </div>
+  </div>
+</div>
+
+<script>
+var DATA = [
+  { id:1, enterprise:'远航科技有限公司', product:'岗位外包', catg:'异地用工',
+    partner:'李鹏飞 / 158****0129', assignee:'李明', channel:'王利娟',
+    leadStatus:'跟进中', writtenAt:'2026-06-22 15:30', leadId:'LM001' },
+  { id:2, enterprise:'启航教育咨询', product:'代理记账', catg:'财税服务',
+    partner:'李鹏飞 / 158****0129', assignee:'赵磊', channel:'王利娟',
+    leadStatus:'已成单', writtenAt:'2026-06-20 13:50', leadId:'LM003' },
+  { id:3, enterprise:'顺达物流有限公司', product:'社保公积金托管', catg:'人事代理',
+    partner:'赛晓丽 / 137****3269', assignee:'王芳', channel:'王利娟',
+    leadStatus:'已成单', writtenAt:'2026-06-15 11:00', leadId:'LM005' },
+  { id:4, enterprise:'云端科技股份公司', product:'AI获客工具', catg:'AI获客',
+    partner:'张情 / 166****8880', assignee:'刘婷', channel:'王利娟',
+    leadStatus:'跟进中', writtenAt:'2026-06-17 13:00', leadId:'LM008' },
+  { id:5, enterprise:'蓝海投资管理公司', product:'劳务派遣', catg:'异地用工',
+    partner:'李鹏飞 / 158****0129', assignee:'李明', channel:'王利娟',
+    leadStatus:'暂时挂起', writtenAt:'2026-06-18 15:50', leadId:'LM004' },
+];
+
+var LS = {
+  '跟进中':'tag-cyan','已成单':'tag-green','待分配':'tag-blue',
+  '待审核':'tag-orange','暂时挂起':'tag-gold','已作废':'tag-gray'
+};
+
+function renderTable() {
+  var fe = document.getElementById('f-ent').value.trim();
+  var fp = document.getElementById('f-prod').value.trim();
+  var fa = document.getElementById('f-asgn').value;
+  var fc = document.getElementById('f-channel').value;
+  var fpar = document.getElementById('f-partner').value.trim();
+  var list = DATA.filter(function(d) {
+    if (fe && d.enterprise.indexOf(fe) < 0) return false;
+    if (fp && d.product.indexOf(fp) < 0) return false;
+    if (fa && d.assignee !== fa) return false;
+    if (fc && d.channel !== fc) return false;
+    if (fpar && d.partner.indexOf(fpar) < 0) return false;
+    return true;
+  });
+  document.getElementById('row-count').textContent = '共 ' + list.length + ' 条';
+  document.getElementById('main-tbody').innerHTML = list.map(function(d) {
+    return '<tr>'
+      + '<td><span style="font-weight:500;cursor:pointer;color:#1677ff" onclick="openDetail(' + d.id + ')">' + d.enterprise + '</span></td>'
+      + '<td>' + d.product + '</td>'
+      + '<td style="color:#8c8c8c">' + d.catg + '</td>'
+      + '<td style="font-size:12px">' + d.partner + '</td>'
+      + '<td><span style="color:#1677ff;font-weight:500">' + d.assignee + '</span></td>'
+      + '<td style="color:#1677ff">' + d.channel + '</td>'
+      + '<td><span class="tag ' + (LS[d.leadStatus]||'tag-gray') + '">' + d.leadStatus + '</span></td>'
+      + '<td style="color:#8c8c8c;font-size:12px">' + d.writtenAt + '</td>'
+      + '<td><button class="btn-link">' + d.leadId + '</button></td>'
+      + '<td><button class="btn-link" onclick="openDetail(' + d.id + ')">详情</button></td>'
+      + '</tr>';
+  }).join('') || '<tr><td colspan="10" style="text-align:center;color:#bfbfbf;padding:36px 0">暂无数据</td></tr>';
+}
+
+function openDetail(id) {
+  var d = DATA.find(function(x) { return x.id === id; });
+  if (!d) return;
+  var html = '<div class="sec-title" style="margin-top:0">企业 &amp; 产品信息</div>'
+    + '<div class="detail-row"><span class="dl">企业名称</span><span class="dv" style="font-weight:500;color:#1677ff">' + d.enterprise + '</span></div>'
+    + '<div class="detail-row"><span class="dl">产品名称</span><span class="dv">' + d.product + '</span></div>'
+    + '<div class="detail-row"><span class="dl">产品分类</span><span class="dv">' + d.catg + '</span></div>'
+    + '<div class="sec-title">关联人员</div>'
+    + '<div class="detail-row"><span class="dl">合伙人</span><span class="dv">' + d.partner + '</span></div>'
+    + '<div class="detail-row"><span class="dl">对接人</span><span class="dv" style="color:#1677ff;font-weight:500">' + d.assignee + '</span></div>'
+    + '<div class="detail-row"><span class="dl">渠道管理员</span><span class="dv" style="color:#1677ff">' + d.channel + '</span></div>'
+    + '<div class="sec-title">来源信息</div>'
+    + '<div class="detail-row"><span class="dl">来源商机</span><span class="dv"><button class="btn-link">' + d.leadId + '</button></span></div>'
+    + '<div class="detail-row"><span class="dl">商机状态</span><span class="dv"><span class="tag ' + (LS[d.leadStatus]||'tag-gray') + '">' + d.leadStatus + '</span></span></div>'
+    + '<div class="detail-row"><span class="dl">写入时间</span><span class="dv">' + d.writtenAt + '</span></div>'
+    + '<div class="sec-title">写入规则说明</div>'
+    + '<div style="background:#f5f5f5;border-radius:6px;padding:10px 12px;font-size:12px;color:#595959;line-height:1.8">'
+    + '· 触发条件：商机分配对接人 <b>且</b> 已关联企业，两者同时满足<br>'
+    + '· 查询逻辑：新建商机时以「企业名称 + 产品名称」为 Key 查询本表<br>'
+    + '· 命中则自动带入对接人，跳过手动分配步骤<br>'
+    + '· 本表与企业详情的「对接人分配表」Tab 为同一数据源'
+    + '</div>';
+  document.getElementById('detail-body').innerHTML = html;
+  openModal('modal-detail');
+}
+
+function resetFilter() {
+  ['f-ent','f-prod','f-asgn','f-channel','f-partner'].forEach(function(id) {
+    var el = document.getElementById(id); if (el) el.value = '';
+  });
+  renderTable();
+}
+function openModal(id) { document.getElementById(id).classList.add('show'); }
+function closeModal(id) { document.getElementById(id).classList.remove('show'); }
+
+renderTable();
+</script>
+</body>
+</html>

HTML原型/channel_manager_todo.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>渠道管理员工作台</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+
+.layout{display:flex;height:100vh}
+.sidebar{width:200px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
+.sidebar-logo{padding:14px 16px;font-size:14px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:6px}
+.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
+.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent;display:flex;align-items:center;gap:6px}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+.nav-badge{font-size:11px;background:#ff4d4f;color:#fff;border-radius:100px;padding:0 5px;min-width:18px;text-align:center}
+
+.main{flex:1;overflow-y:auto;background:#f0f2f5}
+
+/* 顶部欢迎 */
+.welcome-bar{background:linear-gradient(135deg,#1677ff 0%,#0958d9 100%);padding:20px 28px;color:#fff}
+.welcome-title{font-size:18px;font-weight:600;margin-bottom:4px}
+.welcome-sub{font-size:13px;opacity:.85}
+.welcome-stats{display:flex;gap:24px;margin-top:14px}
+.w-stat{background:rgba(255,255,255,.15);border-radius:8px;padding:10px 18px;text-align:center;min-width:90px}
+.w-stat-val{font-size:22px;font-weight:700}
+.w-stat-lbl{font-size:11px;opacity:.8;margin-top:2px}
+
+.content{padding:20px 24px}
+
+/* 流程卡片 */
+.flow-title{font-size:15px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
+.flow-title i{color:#1677ff}
+
+.flow-steps{display:flex;align-items:stretch;gap:0;margin-bottom:24px;position:relative}
+.flow-step{flex:1;background:#fff;border:1px solid #e8e8e8;border-radius:0;padding:14px 14px 16px;position:relative;cursor:default}
+.flow-step:first-child{border-radius:8px 0 0 8px}
+.flow-step:last-child{border-radius:0 8px 8px 0}
+.flow-step+.flow-step{border-left:none}
+.flow-step:not(:last-child)::after{content:'';position:absolute;right:-12px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:12px solid #e8e8e8;z-index:2}
+.flow-step:not(:last-child)::before{content:'';position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:12px solid #fff;z-index:3}
+.step-num{width:22px;height:22px;border-radius:50%;background:#1677ff;color:#fff;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;margin-bottom:8px}
+.step-num.done{background:#52c41a}
+.step-name{font-size:13px;font-weight:600;margin-bottom:4px}
+.step-desc{font-size:11px;color:#8c8c8c;line-height:1.6}
+.step-action{margin-top:10px}
+
+/* 待办卡片区 */
+.todo-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:24px}
+.todo-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+.todo-card-header{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f0f0}
+.todo-card-title{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
+.todo-card-title i{font-size:16px}
+.todo-count{font-size:11px;background:#ff4d4f;color:#fff;border-radius:100px;padding:1px 7px;font-weight:500}
+.todo-count.warn{background:#fa8c16}
+.todo-count.info{background:#1677ff}
+.todo-card-body{padding:0}
+.todo-item{padding:10px 16px;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;justify-content:space-between;gap:10px}
+.todo-item:last-child{border-bottom:none}
+.todo-item-left{flex:1;min-width:0}
+.todo-item-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.todo-item-meta{font-size:11px;color:#8c8c8c;margin-top:2px}
+.todo-card-footer{padding:8px 16px;border-top:1px solid #f0f0f0;text-align:center}
+
+/* 通用 */
+.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-sm{padding:3px 10px;font-size:11px}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
+.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:1px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-red{background:#fff1f0;color:#cf1322;border-color:#ffa39e}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+
+/* 最近操作日志 */
+.log-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden;margin-bottom:14px}
+.log-header{padding:12px 16px;border-bottom:1px solid #f0f0f0;font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
+.log-header i{color:#1677ff}
+.log-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid #f5f5f5}
+.log-item:last-child{border-bottom:none}
+.log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
+.log-body{flex:1}
+.log-text{font-size:13px;line-height:1.6}
+.log-time{font-size:11px;color:#bfbfbf;margin-top:2px}
+
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:10px;width:500px;box-shadow:0 12px 40px rgba(0,0,0,.18);overflow:hidden}
+.modal-header{padding:16px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
+.modal-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:6px}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:20px}
+.modal-footer{padding:12px 20px 16px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
+.form-item{margin-bottom:14px}
+.form-item label{font-size:12px;color:#595959;display:block;margin-bottom:5px}
+.form-item input,.form-item select,.form-item textarea{width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff}
+.form-item input:focus,.form-item select:focus{border-color:#1677ff}
+.form-item textarea{height:72px;padding:8px 10px;resize:none}
+.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.req{color:#cf1322;margin-left:2px}
+.step-indicator{display:flex;gap:0;margin-bottom:18px}
+.step-ind{flex:1;text-align:center;font-size:11px;padding:6px 4px;background:#f5f5f5;color:#8c8c8c;border:1px solid #e8e8e8}
+.step-ind.active{background:#1677ff;color:#fff;border-color:#1677ff;font-weight:500}
+.step-ind.done{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.step-ind:first-child{border-radius:6px 0 0 6px}
+.step-ind:last-child{border-radius:0 6px 6px 0}
+</style>
+</head>
+<body>
+<div class="layout">
+
+  <!-- 侧边栏 -->
+  <div class="sidebar">
+    <div class="sidebar-logo"><i class="ti ti-building"></i>亲亲创客</div>
+    <div class="nav-group">工作台</div>
+    <div class="nav-item active"><i class="ti ti-layout-dashboard"></i>渠道管理工作台 <span class="nav-badge">8</span></div>
+    <div class="nav-group">合伙人管理</div>
+    <div class="nav-item"><i class="ti ti-users"></i>合伙人管理列表</div>
+    <div class="nav-item"><i class="ti ti-clipboard-list"></i>合伙人订单管理</div>
+    <div class="nav-group">佣金结算</div>
+    <div class="nav-item"><i class="ti ti-coin"></i>合伙人佣金结算</div>
+    <div class="nav-item"><i class="ti ti-chart-bar"></i>渠道管理员佣金结算</div>
+    <div class="nav-item"><i class="ti ti-user-check"></i>对接人佣金结算</div>
+    <div class="nav-item"><i class="ti ti-gift"></i>介绍人奖励记录</div>
+    <div class="nav-item"><i class="ti ti-report-analytics"></i>业绩统计</div>
+  </div>
+
+  <div class="main">
+
+    <!-- 欢迎栏 -->
+    <div class="welcome-bar">
+      <div class="welcome-title">👋 你好，王利娟！今天有 8 项待办需要处理</div>
+      <div class="welcome-sub">渠道管理员 · 亲亲创客合伙人项目</div>
+      <div class="welcome-stats">
+        <div class="w-stat"><div class="w-stat-val">3</div><div class="w-stat-lbl">待分配商机</div></div>
+        <div class="w-stat"><div class="w-stat-val">2</div><div class="w-stat-lbl">待创建企业</div></div>
+        <div class="w-stat"><div class="w-stat-val">2</div><div class="w-stat-lbl">待设置对接人</div></div>
+        <div class="w-stat"><div class="w-stat-val">4</div><div class="w-stat-lbl">介绍人奖励待发</div></div>
+        <div class="w-stat"><div class="w-stat-val">12</div><div class="w-stat-lbl">待审核佣金</div></div>
+      </div>
+    </div>
+
+    <div class="content">
+
+      <!-- 商机转化流程 -->
+      <div class="flow-title"><i class="ti ti-route"></i>商机转化标准流程</div>
+      <div class="flow-steps">
+        <div class="flow-step">
+          <div class="step-num done"><i class="ti ti-check" style="font-size:11px"></i></div>
+          <div class="step-name">① 合伙人报备商机</div>
+          <div class="step-desc">合伙人在小程序报备客户，系统记录时间戳并锁定归属</div>
+        </div>
+        <div class="flow-step" style="border-color:#fa8c16;border-width:1.5px">
+          <div class="step-num" style="background:#fa8c16">2</div>
+          <div class="step-name" style="color:#fa8c16">② 分配对接人</div>
+          <div class="step-desc">渠道管理员根据业务类型，从产品对接人名单中指定跟单人员</div>
+          <div class="step-action"><button class="btn btn-sm" style="border-color:#fa8c16;color:#fa8c16" onclick="openModal('modal-assign')"><i class="ti ti-arrows-exchange"></i>去分配 (3)</button></div>
+        </div>
+        <div class="flow-step">
+          <div class="step-num" style="background:#8c8c8c">3</div>
+          <div class="step-name">③ 创建企业客户</div>
+          <div class="step-desc">在系统中创建企业档案，标记客户类型为"合伙人客户"，关联合伙人</div>
+          <div class="step-action"><button class="btn btn-sm" style="border-color:#8c8c8c;color:#8c8c8c" onclick="openModal('modal-create-enterprise')"><i class="ti ti-building-plus"></i>去创建 (2)</button></div>
+        </div>
+        <div class="flow-step">
+          <div class="step-num" style="background:#8c8c8c">4</div>
+          <div class="step-name">④ 添加服务购买记录</div>
+          <div class="step-desc">在企业详情中记录购买产品，绑定对接人，触发后续佣金计算</div>
+          <div class="step-action"><button class="btn btn-sm" style="border-color:#8c8c8c;color:#8c8c8c" onclick="openModal('modal-service-record')"><i class="ti ti-clipboard-plus"></i>去添加 (2)</button></div>
+        </div>
+        <div class="flow-step">
+          <div class="step-num" style="background:#8c8c8c">5</div>
+          <div class="step-name">⑤ 佣金结算审核</div>
+          <div class="step-desc">订单产生后，审核渠道管理员、对接人、合伙人三方佣金结算单</div>
+          <div class="step-action"><button class="btn btn-sm" style="border-color:#8c8c8c;color:#8c8c8c"><i class="ti ti-checks"></i>去审核 (12)</button></div>
+        </div>
+      </div>
+
+      <!-- 三列待办 -->
+      <div class="todo-grid">
+
+        <!-- 待分配商机 -->
+        <div class="todo-card">
+          <div class="todo-card-header">
+            <div class="todo-card-title"><i class="ti ti-arrows-exchange" style="color:#fa8c16"></i>待分配商机</div>
+            <span class="todo-count warn">3</span>
+          </div>
+          <div class="todo-card-body">
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">锦绣餐饮集团</div>
+                <div class="todo-item-meta">合伙人：华盛机构 · 三节福利采购 · 06-23</div>
+              </div>
+              <button class="btn btn-primary btn-sm" onclick="openModal('modal-assign')">分配</button>
+            </div>
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">新桥律师事务所</div>
+                <div class="todo-item-meta">合伙人：王芳 · 个人社保缴纳 · 06-24</div>
+              </div>
+              <button class="btn btn-primary btn-sm" onclick="openModal('modal-assign')">分配</button>
+            </div>
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">蓝海投资管理</div>
+                <div class="todo-item-meta">合伙人：赵伟 · 代理记账 · 06-24</div>
+              </div>
+              <button class="btn btn-primary btn-sm" onclick="openModal('modal-assign')">分配</button>
+            </div>
+          </div>
+          <div class="todo-card-footer"><button class="btn-link">查看全部商机 →</button></div>
+        </div>
+
+        <!-- 待创建企业 -->
+        <div class="todo-card">
+          <div class="todo-card-header">
+            <div class="todo-card-title"><i class="ti ti-building-plus" style="color:#1677ff"></i>待创建企业客户</div>
+            <span class="todo-count info">2</span>
+          </div>
+          <div class="todo-card-body">
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">锦绣餐饮集团</div>
+                <div class="todo-item-meta">商机已分配 · 对接人：赵磊 · 已等待 1天</div>
+              </div>
+              <button class="btn btn-primary btn-sm" onclick="openModal('modal-create-enterprise')">创建</button>
+            </div>
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">新桥律师事务所</div>
+                <div class="todo-item-meta">商机已分配 · 对接人：李明 · 刚刚分配</div>
+              </div>
+              <button class="btn btn-primary btn-sm" onclick="openModal('modal-create-enterprise')">创建</button>
+            </div>
+          </div>
+          <div class="todo-card-footer"><button class="btn-link">查看全部企业 →</button></div>
+        </div>
+
+        <!-- 待设置对接人订单 -->
+        <div class="todo-card">
+          <div class="todo-card-header">
+            <div class="todo-card-title"><i class="ti ti-user-plus" style="color:#cf1322"></i>订单待设置对接人</div>
+            <span class="todo-count">2</span>
+          </div>
+          <div class="todo-card-body">
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">1356657 · 企业员工社保代缴</div>
+                <div class="todo-item-meta">张情测试合伙人企业 · 未设置对接人</div>
+              </div>
+              <button class="btn btn-sm" style="border-color:#cf1322;color:#cf1322" onclick="openModal('modal-set-assignee')">设置</button>
+            </div>
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">1356656 · 劳务派遣</div>
+                <div class="todo-item-meta">张情测试合伙人企业 · 未设置对接人</div>
+              </div>
+              <button class="btn btn-sm" style="border-color:#cf1322;color:#cf1322" onclick="openModal('modal-set-assignee')">设置</button>
+            </div>
+          </div>
+          <div class="todo-card-footer"><button class="btn-link">查看全部待设置订单 →</button></div>
+        </div>
+      </div>
+
+      <!-- 第二行待办 -->
+      <div class="todo-grid">
+        <!-- 介绍人奖励 -->
+        <div class="todo-card">
+          <div class="todo-card-header">
+            <div class="todo-card-title"><i class="ti ti-gift" style="color:#d46b08"></i>介绍人奖励待发放</div>
+            <span class="todo-count warn">4</span>
+          </div>
+          <div class="todo-card-body">
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">王芳 → 蓝海投资管理公司</div>
+                <div class="todo-item-meta">奖励 ¥50 · 首单触发 06-20</div>
+              </div>
+              <button class="btn btn-sm" style="border-color:#fa8c16;color:#fa8c16">发放</button>
+            </div>
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">李鹏飞 → 中兴建材集团</div>
+                <div class="todo-item-meta">奖励 ¥50 · 首单触发 06-21</div>
+              </div>
+              <button class="btn btn-sm" style="border-color:#fa8c16;color:#fa8c16">发放</button>
+            </div>
+          </div>
+          <div class="todo-card-footer"><button class="btn-link">查看全部奖励记录 →</button></div>
+        </div>
+
+        <!-- 待审核佣金 -->
+        <div class="todo-card">
+          <div class="todo-card-header">
+            <div class="todo-card-title"><i class="ti ti-receipt" style="color:#531dab"></i>佣金结算待审核</div>
+            <span class="todo-count" style="background:#531dab">12</span>
+          </div>
+          <div class="todo-card-body">
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">渠道管理员佣金</div>
+                <div class="todo-item-meta">12 条待审核 · 合计 ¥240.00</div>
+              </div>
+              <button class="btn btn-sm" style="border-color:#531dab;color:#531dab">批量审核</button>
+            </div>
+            <div class="todo-item">
+              <div class="todo-item-left">
+                <div class="todo-item-name">对接人佣金</div>
+                <div class="todo-item-meta">8 条待审核 · 合计 ¥43.00</div>
+              </div>
+              <button class="btn btn-sm" style="border-color:#531dab;color:#531dab">批量审核</button>
+            </div>
+          </div>
+          <div class="todo-card-footer"><button class="btn-link">前往佣金结算管理 →</button></div>
+        </div>
+
+        <!-- 近期操作日志 -->
+        <div class="log-card" style="margin-bottom:0">
+          <div class="log-header"><i class="ti ti-history"></i>近期操作记录</div>
+          <div class="log-item">
+            <div class="log-dot" style="background:#52c41a"></div>
+            <div class="log-body">
+              <div class="log-text">为 <b>远航科技</b> 的订单 1356660 分配对接人 <b>李明</b></div>
+              <div class="log-time">今天 10:22</div>
+            </div>
+          </div>
+          <div class="log-item">
+            <div class="log-dot" style="background:#1677ff"></div>
+            <div class="log-body">
+              <div class="log-text">创建企业客户 <b>启航教育咨询</b>，标记为合伙人客户</div>
+              <div class="log-time">今天 09:45</div>
+            </div>
+          </div>
+          <div class="log-item">
+            <div class="log-dot" style="background:#fa8c16"></div>
+            <div class="log-body">
+              <div class="log-text">发放介绍人奖励 ¥50 给 <b>陈晓</b>（启航教育首单）</div>
+              <div class="log-time">昨天 16:30</div>
+            </div>
+          </div>
+          <div class="log-item">
+            <div class="log-dot" style="background:#531dab"></div>
+            <div class="log-body">
+              <div class="log-text">批量审核渠道管理员佣金 <b>8 条</b>，2026-05 月份</div>
+              <div class="log-time">昨天 14:11</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- 弹窗1：分配对接人 -->
+<div class="modal-overlay" id="modal-assign">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#fa8c16"><i class="ti ti-arrows-exchange"></i>分配对接人</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-assign')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="background:#fff7e6;border:1px solid #ffd591;border-radius:6px;padding:8px 12px;font-size:12px;color:#613400;margin-bottom:14px;display:flex;gap:6px">
+        <i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>请根据商机类型，从该产品配置的对接人中选择合适人员，分配后对接人将收到跟单通知。</span>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>客户名称</label>
+          <input type="text" value="锦绣餐饮集团" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>商机类型</label>
+          <input type="text" value="三节福利采购" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>合伙人</label>
+          <input type="text" value="华盛机构" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>报备时间</label>
+          <input type="text" value="2026-06-23 14:05" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+      </div>
+      <div class="form-item">
+        <label>选择对接人 <span class="req">*</span><span style="font-size:11px;color:#8c8c8c;margin-left:4px">（范围：该产品配置的对接人）</span></label>
+        <select>
+          <option value="">请选择...</option>
+          <option>赵磊 · 综合服务部</option>
+          <option>刘婷 · 综合服务部</option>
+          <option>李明 · 销售部</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-assign')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-assign')"><i class="ti ti-check"></i>确认分配</button>
+    </div>
+  </div>
+</div>
+
+<!-- 弹窗2：创建企业客户 -->
+<div class="modal-overlay" id="modal-create-enterprise">
+  <div class="modal" style="width:540px">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#1677ff"><i class="ti ti-building-plus"></i>创建企业客户</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-create-enterprise')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="step-indicator">
+        <div class="step-ind active">① 基本信息</div>
+        <div class="step-ind">② 合伙人关联</div>
+        <div class="step-ind">③ 联系人</div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>企业全称 <span class="req">*</span></label>
+          <input type="text" value="锦绣餐饮集团" placeholder="请输入">
+        </div>
+        <div class="form-item">
+          <label>统一社会信用代码</label>
+          <input type="text" placeholder="请输入">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>客户来源类型 <span class="req">*</span></label>
+          <select>
+            <option value="partner" selected>合伙人客户</option>
+            <option value="direct">直销客户</option>
+          </select>
+        </div>
+        <div class="form-item">
+          <label>关联合伙人 <span class="req">*</span></label>
+          <select>
+            <option>华盛机构</option>
+            <option>张伟</option>
+            <option>王芳</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>介绍人</label>
+          <select>
+            <option value="">请选择（内部员工）</option>
+            <option>李明</option>
+            <option>市场部</option>
+          </select>
+        </div>
+        <div class="form-item">
+          <label>注册地所属城市</label>
+          <input type="text" placeholder="省/市">
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-create-enterprise')">取消</button>
+      <button class="btn" style="border-color:#1677ff;color:#1677ff">下一步</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-create-enterprise')"><i class="ti ti-check"></i>快速创建</button>
+    </div>
+  </div>
+</div>
+
+<!-- 弹窗3：添加服务购买记录 -->
+<div class="modal-overlay" id="modal-service-record">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#389e0d"><i class="ti ti-clipboard-plus"></i>添加服务购买记录</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-service-record')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="form-row">
+        <div class="form-item">
+          <label>选择企业 <span class="req">*</span></label>
+          <select>
+            <option>锦绣餐饮集团</option>
+            <option>新桥律师事务所</option>
+          </select>
+        </div>
+        <div class="form-item">
+          <label>产品分类 <span class="req">*</span></label>
+          <select>
+            <option value="">请选择</option>
+            <option>异地用工</option>
+            <option>财税服务</option>
+            <option>人事代理</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>产品名称 <span class="req">*</span></label>
+          <select>
+            <option value="">请先选择产品分类</option>
+          </select>
+        </div>
+        <div class="form-item">
+          <label>对接人 <span class="req">*</span></label>
+          <select>
+            <option value="">请选择</option>
+            <option>赵磊</option>
+            <option>李明</option>
+            <option>刘婷</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>订购时间 <span class="req">*</span></label>
+          <input type="date">
+        </div>
+        <div class="form-item">
+          <label>状态</label>
+          <select>
+            <option>服务中</option>
+            <option>已终止</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-item">
+        <label>备注</label>
+        <textarea placeholder="选填"></textarea>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-service-record')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-service-record')"><i class="ti ti-check"></i>确认添加</button>
+    </div>
+  </div>
+</div>
+
+<!-- 弹窗4：设置订单对接人 -->
+<div class="modal-overlay" id="modal-set-assignee">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#cf1322"><i class="ti ti-user-plus"></i>设置订单对接人</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-set-assignee')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="background:#fff1f0;border:1px solid #ffa39e;border-radius:6px;padding:8px 12px;font-size:12px;color:#820014;margin-bottom:14px;display:flex;gap:6px">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>未设置对接人的订单无法触发佣金计算，请尽快完成设置。</span>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>订单编号</label>
+          <input type="text" value="1356657" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>产品名称</label>
+          <input type="text" value="企业员工社保代缴" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>所属企业</label>
+          <input type="text" value="张情测试合伙人企业" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>佣金规则</label>
+          <input type="text" value="比例 5% · 成交额" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+      </div>
+      <div class="form-item">
+        <label>选择对接人 <span class="req">*</span><span style="font-size:11px;color:#8c8c8c;margin-left:4px">（范围：该产品已配置的对接人）</span></label>
+        <select>
+          <option value="">请选择...</option>
+          <option>李明 · 销售部</option>
+          <option>赵磊 · 销售部</option>
+          <option>刘婷 · 综合服务部</option>
+          <option>王芳 · 财税部</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-set-assignee')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-set-assignee')"><i class="ti ti-check"></i>确认设置</button>
+    </div>
+  </div>
+</div>
+
+<script>
+function openModal(id) { document.getElementById(id).classList.add('show'); }
+function closeModal(id) { document.getElementById(id).classList.remove('show'); }
+document.querySelectorAll('.nav-item').forEach(function(n) {
+  n.addEventListener('click', function() {
+    document.querySelectorAll('.nav-item').forEach(function(x){ x.classList.remove('active'); });
+    n.classList.add('active');
+  });
+});
+</script>
+</body>
+</html>

HTML原型/commission_pages (1).html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>佣金结算管理</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+.layout{display:flex;height:100vh}
+
+/* 侧边栏 */
+.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
+.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
+.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent;line-height:1.4}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
+
+/* 主区 */
+.main{flex:1;display:flex;flex-direction:column;min-height:0}
+.page{display:none;flex:1;flex-direction:column}.page.active{display:flex}
+.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
+.page-title{font-size:15px;font-weight:600}
+.header-btns{display:flex;gap:8px}
+
+/* 品牌Tab */
+.brand-tabs{display:flex;gap:0;padding:0 20px;background:#fff;border-bottom:1px solid #e8e8e8;flex-shrink:0}
+.brand-tab{padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer;color:#8c8c8c;border-bottom:2px solid transparent;margin-bottom:-1px}
+.brand-tab.active{color:#1677ff;border-bottom-color:#1677ff}
+
+/* 筛选 */
+.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 20px;flex-shrink:0}
+.filter-grid{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
+.filter-item{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
+.filter-item label{color:#8c8c8c;flex-shrink:0}
+.filter-item input,.filter-item select{height:30px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:120px}
+.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
+.filter-btns{margin-left:auto;display:flex;gap:8px}
+
+/* 内容区 */
+.content{padding:16px 20px;flex:1;overflow-y:auto}
+
+/* 状态Tab */
+.status-tabs{display:flex;gap:0;border-bottom:1px solid #e8e8e8;margin-bottom:0}
+.status-tab{padding:8px 14px;font-size:13px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
+.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+
+/* 汇总提示 */
+.summary-bar{background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:8px 14px;font-size:12px;color:#d46b08;margin:10px 0;display:flex;align-items:center;justify-content:space-between}
+.summary-bar b{color:#ad4e00}
+
+/* 表格 */
+.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:12px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:9px 10px;vertical-align:middle}
+.cb{width:36px}
+
+/* 通用 */
+.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-sm{padding:2px 8px;font-size:11px;border-radius:4px}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer;white-space:nowrap}
+.btn-link:hover{color:#0958d9}
+.btn-link+.btn-link{margin-left:8px}
+
+.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+.tag-red{background:#fff1f0;color:#cf1322;border-color:#ffa39e}
+.tag-purple{background:#f9f0ff;color:#531dab;border-color:#d3adf7}
+
+.muted{color:#bfbfbf}
+
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:460px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden}
+.modal-header{padding:14px 18px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
+.modal-title{font-size:14px;font-weight:600}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:16px 18px}
+.modal-footer{padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
+.form-item{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
+.form-item label{font-size:12px;color:#595959}
+.form-item select,.form-item input{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff;width:100%}
+.form-item select:focus,.form-item input:focus{border-color:#1677ff}
+.info-row{display:flex;font-size:13px;margin-bottom:8px}
+.info-label{width:90px;color:#8c8c8c;flex-shrink:0}
+</style>
+</head>
+<body>
+<div class="layout">
+
+<!-- 侧边栏 -->
+<div class="sidebar">
+  <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
+  <div class="nav-item">产品分类管理</div>
+  <div class="nav-item">产品管理</div>
+  <div class="nav-item">合伙人申请管理列表</div>
+  <div class="nav-item">合伙人管理列表</div>
+  <div class="nav-group">佣金结算</div>
+  <div class="nav-item active" onclick="switchPage('partner',this)">合伙人佣金结算管理</div>
+  <div class="nav-item" onclick="switchPage('channel',this)">渠道管理员佣金结算</div>
+  <div class="nav-item" onclick="switchPage('assignee',this)">对接人佣金结算</div>
+  <div class="nav-group">其他</div>
+  <div class="nav-item">服务商结算</div>
+  <div class="nav-item">结算服务商付款管理</div>
+  <div class="nav-item">业务服务商付款管理</div>
+  <div class="nav-item">其他付款管理</div>
+</div>
+
+<!-- ===== 合伙人佣金结算管理 ===== -->
+<div id="page-partner" class="page active">
+  <div class="page-header">
+    <span class="page-title">合伙人佣金结算管理</span>
+    <div class="header-btns">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">视图管理</button>
+      <button class="btn">超管工具</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+    </div>
+  </div>
+  <div class="brand-tabs">
+    <div class="brand-tab active">亲亲企服</div>
+    <div class="brand-tab">亲亲小保</div>
+  </div>
+  <div class="filter-wrap">
+    <div class="filter-grid">
+      <div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>用户类型</label><select><option value="">请选择</option><option>企业用户</option><option>个人用户</option></select></div>
+      <div class="filter-item"><label>订单编号</label><input type="text" placeholder="可输入订单编号或业务单号"></div>
+      <div class="filter-item"><label>个人用户手机号</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>合伙人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>状态</label><select><option value="">请选择</option><option>待审核</option><option>已审核</option><option>已取消</option></select></div>
+      <div class="filter-btns">
+        <button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
+        <button class="btn"><i class="ti ti-refresh"></i>重置</button>
+      </div>
+    </div>
+  </div>
+  <div class="content">
+    <div class="status-tabs">
+      <div class="status-tab active">待审核 (195)</div>
+      <div class="status-tab">已审核待入账 (2)</div>
+      <div class="status-tab">已审核 (7)</div>
+      <div class="status-tab">已取消 (1)</div>
+      <div class="status-tab">全部 (205)</div>
+    </div>
+    <div class="summary-bar">
+      <span>共 195 条订单，佣金总金额 <b>¥3,764.11</b>，正向佣金 <b>¥3,764.11</b>，负向佣金 <b>¥0</b></span>
+      <button class="btn btn-sm btn-primary">批量审核</button>
+    </div>
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th class="cb"><input type="checkbox"></th>
+            <th>业务订单编号</th>
+            <th>产品类型</th>
+            <th>产品名称</th>
+            <th>用户类型</th>
+            <th>所属客户</th>
+            <th>合伙人</th>
+            <th>渠道管理员</th>
+            <th>对接人</th>
+            <th>客户经理</th>
+            <th>订单金额</th>
+            <th>佣金金额</th>
+            <th>佣金规则</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356660</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">李明</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356657</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>企业员工社保代缴</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="muted">—</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356654</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>岗位外包</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356658</td>
+            <td><span class="tag tag-purple">财税服务</span></td>
+            <td>代理记账</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-green">已审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">更多</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pagination">
+        <span>共 205 条 &nbsp; <select style="height:26px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px"><option>20条/页</option><option>50条/页</option></select></span>
+        <div style="display:flex;gap:4px">
+          <div class="page-btn"><i class="ti ti-chevron-left"></i></div>
+          <div class="page-btn active">1</div>
+          <div class="page-btn">2</div>
+          <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 渠道管理员佣金结算 ===== -->
+<div id="page-channel" class="page">
+  <div class="page-header">
+    <span class="page-title">渠道管理员佣金结算管理</span>
+    <div class="header-btns">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">视图管理</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+    </div>
+  </div>
+  <div class="brand-tabs">
+    <div class="brand-tab active">亲亲企服</div>
+    <div class="brand-tab">亲亲小保</div>
+  </div>
+  <div class="filter-wrap">
+    <div class="filter-grid">
+      <div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>订单编号</label><input type="text" placeholder="请输入"></div>
+      <div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-btns">
+        <button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
+        <button class="btn"><i class="ti ti-refresh"></i>重置</button>
+      </div>
+    </div>
+  </div>
+  <div class="content">
+    <div class="status-tabs">
+      <div class="status-tab active" id="ch-tab-pending" onclick="chSwitchTab('pending',this)">待审核 (12)</div>
+      <div class="status-tab" id="ch-tab-done" onclick="chSwitchTab('done',this)">已审核 (6)</div>
+      <div class="status-tab" id="ch-tab-all" onclick="chSwitchTab('all',this)">全部 (21)</div>
+    </div>
+    <div class="summary-bar" id="ch-summary">
+      <span>共 12 条订单，待发放佣金合计 <b>¥240.00</b></span>
+      <button class="btn btn-sm btn-primary" id="ch-batch-btn" onclick="openBatchModal()">批量审核</button>
+    </div>
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th class="cb"><input type="checkbox" id="ch-check-all" onchange="chToggleAll(this)"></th>
+            <th>业务订单编号</th>
+            <th>产品类型</th>
+            <th>产品名称</th>
+            <th>所属客户</th>
+            <th>合伙人</th>
+            <th>渠道管理员</th>
+            <th>对接人</th>
+            <th>订单金额</th>
+            <th>佣金金额</th>
+            <th>渠道管理员佣金规则</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody id="ch-tbody">
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356660</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="tag tag-blue">李明</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356657</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>企业员工社保代缴</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="muted">—</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356654</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>岗位外包</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356655</td>
+            <td><span class="tag tag-purple">财税服务</span></td>
+            <td>代理记账</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="tag tag-blue">刘婷</span></td>
+            <td>800.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="16.00">¥16.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-green">已审核</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pagination">
+        <span id="ch-sel-tip" style="color:#1677ff;font-size:12px"></span>
+        <div style="display:flex;align-items:center;gap:8px">
+          <span style="color:#8c8c8c">共 21 条</span>
+          <div style="display:flex;gap:4px">
+            <div class="page-btn active">1</div>
+            <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 批量审核弹窗 -->
+<div class="modal-overlay" id="modal-batch">
+  <div class="modal" style="width:440px">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-checks" style="color:#1677ff;margin-right:4px"></i>批量审核确认</span>
+      <i class="ti ti-x" style="font-size:16px;color:#8c8c8c;cursor:pointer" onclick="closeBatchModal()"></i>
+    </div>
+    <div class="modal-body" style="padding:16px 18px">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
+        <div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#1677ff" id="batch-count">0</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
+        </div>
+        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#389e0d" id="batch-amount">¥0.00</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">总计佣金金额</div>
+        </div>
+      </div>
+      <div style="margin-bottom:14px">
+        <div style="font-size:12px;color:#595959;margin-bottom:6px">业绩所属月份 <span style="color:#cf1322">*</span></div>
+        <input type="month" id="batch-month" style="height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;width:100%" onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
+        <div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择该批佣金对应的业绩归属月份</div>
+      </div>
+      <div style="background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:9px 12px;font-size:12px;color:#613400;display:flex;gap:6px;align-items:flex-start">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>审核通过后，佣金将按工资结算方式在次月发放给渠道管理员。请确认数据无误后再提交。</span>
+      </div>
+    </div>
+    <div style="padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0">
+      <button class="btn" onclick="closeBatchModal()">取消</button>
+      <button class="btn btn-primary" onclick="confirmBatch()"><i class="ti ti-check"></i>确认审核通过</button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 对接人佣金结算 ===== -->
+<div id="page-assignee" class="page">
+  <div class="page-header">
+    <span class="page-title">对接人佣金结算管理</span>
+    <div class="header-btns">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">视图管理</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+    </div>
+  </div>
+  <div class="brand-tabs">
+    <div class="brand-tab active">亲亲企服</div>
+    <div class="brand-tab">亲亲小保</div>
+  </div>
+  <div class="filter-wrap">
+    <div class="filter-grid">
+      <div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>订单编号</label><input type="text" placeholder="请输入"></div>
+      <div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-btns">
+        <button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
+        <button class="btn"><i class="ti ti-refresh"></i>重置</button>
+      </div>
+    </div>
+  </div>
+  <div class="content">
+    <div class="status-tabs">
+      <div class="status-tab active" onclick="asSwitchTab('pending',this)">待审核 (8)</div>
+      <div class="status-tab" onclick="asSwitchTab('done',this)">已审核 (6)</div>
+      <div class="status-tab" onclick="asSwitchTab('unset',this)">未设置对接人 (3)</div>
+      <div class="status-tab" onclick="asSwitchTab('all',this)">全部 (17)</div>
+    </div>
+    <div class="summary-bar" id="as-summary">
+      <span id="as-summary-text">共 8 条订单，待审核佣金合计 <b>¥43.00</b></span>
+      <button class="btn btn-sm btn-primary" id="as-batch-btn" onclick="openAsBatchModal()">批量审核</button>
+    </div>
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th class="cb"><input type="checkbox" id="as-check-all" onchange="asToggleAll(this)"></th>
+            <th>业务订单编号</th>
+            <th>产品类型</th>
+            <th>产品名称</th>
+            <th>所属客户</th>
+            <th>合伙人</th>
+            <th>渠道管理员</th>
+            <th>对接人</th>
+            <th>订单金额</th>
+            <th>佣金金额</th>
+            <th>对接人佣金规则</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style="background:#fffbe6">
+            <td class="cb"><input type="checkbox" class="as-row-cb" disabled></td>
+            <td style="color:#1677ff;cursor:pointer">1356657</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>企业员工社保代缴</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td>
+              <span class="muted" style="margin-right:6px">未设置</span>
+              <button class="btn btn-sm" style="color:#d46b08;border-color:#ffd591;background:#fff7e6" onclick="showModal('modal-assign','1356657')">设置对接人</button>
+            </td>
+            <td>60.00</td>
+            <td class="muted">待定</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-red">未设置对接人</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+          <tr style="background:#fffbe6">
+            <td class="cb"><input type="checkbox" class="as-row-cb" disabled></td>
+            <td style="color:#1677ff;cursor:pointer">1356656</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td>
+              <span class="muted" style="margin-right:6px">未设置</span>
+              <button class="btn btn-sm" style="color:#d46b08;border-color:#ffd591;background:#fff7e6" onclick="showModal('modal-assign','1356656')">设置对接人</button>
+            </td>
+            <td>60.00</td>
+            <td class="muted">待定</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-red">未设置对接人</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356660</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">李明</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="3.00">¥3.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356654</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>岗位外包</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="3.00">¥3.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356658</td>
+            <td><span class="tag tag-purple">财税服务</span></td>
+            <td>代理记账</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>800.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="40.00">¥40.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-green">已审核</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pagination">
+        <span id="as-sel-tip" style="color:#1677ff;font-size:12px"></span>
+        <div style="display:flex;align-items:center;gap:8px">
+          <span style="color:#8c8c8c">共 17 条</span>
+          <div style="display:flex;gap:4px">
+            <div class="page-btn active">1</div>
+            <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 对接人批量审核弹窗 -->
+<div class="modal-overlay" id="modal-as-batch">
+  <div class="modal" style="width:440px">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-checks" style="color:#1677ff;margin-right:4px"></i>批量审核确认</span>
+      <i class="ti ti-x" style="font-size:16px;color:#8c8c8c;cursor:pointer" onclick="closeAsBatchModal()"></i>
+    </div>
+    <div class="modal-body" style="padding:16px 18px">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
+        <div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#1677ff" id="as-batch-count">0</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
+        </div>
+        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#389e0d" id="as-batch-amount">¥0.00</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">总计佣金金额</div>
+        </div>
+      </div>
+      <div style="margin-bottom:14px">
+        <div style="font-size:12px;color:#595959;margin-bottom:6px">业绩所属月份 <span style="color:#cf1322">*</span></div>
+        <input type="month" id="as-batch-month" style="height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;width:100%" onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
+        <div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择该批佣金对应的业绩归属月份</div>
+      </div>
+      <div style="background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:9px 12px;font-size:12px;color:#613400;display:flex;gap:6px;align-items:flex-start">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>审核通过后，佣金将按工资结算方式在次月发放给对接人。请确认数据无误后再提交。</span>
+      </div>
+    </div>
+    <div style="padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0">
+      <button class="btn" onclick="closeAsBatchModal()">取消</button>
+      <button class="btn btn-primary" onclick="confirmAsBatch()"><i class="ti ti-check"></i>确认审核通过</button>
+    </div>
+  </div>
+</div>
+
+<!-- 设置对接人弹窗 -->
+<div class="modal-overlay" id="modal-assign">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title">设置对接人</span>
+      <i class="ti ti-x modal-close" onclick="hideModal('modal-assign')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:8px 12px;font-size:12px;color:#0958d9;margin-bottom:14px;display:flex;gap:6px;align-items:center">
+        <i class="ti ti-info-circle"></i>设置后将按产品对应规则自动计算该订单的对接人佣金。
+      </div>
+      <div class="info-row"><span class="info-label">订单编号</span><span id="assign-order-id" style="font-weight:500">—</span></div>
+      <div class="info-row"><span class="info-label">产品名称</span><span>企业员工社保代缴</span></div>
+      <div class="info-row"><span class="info-label">佣金规则</span><span style="color:#8c8c8c;font-size:12px">比例 5% · 成交额</span></div>
+      <div class="form-item" style="margin-top:12px">
+        <label>选择对接人 <span style="color:#cf1322">*</span></label>
+        <select>
+          <option value="">请选择（范围：该产品配置的对接人）</option>
+          <option>李明 · 销售部</option>
+          <option>赵磊 · 销售部</option>
+          <option>刘婷 · 综合服务部</option>
+          <option>王芳 · 财税部</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal('modal-assign')">取消</button>
+      <button class="btn btn-primary" onclick="hideModal('modal-assign')"><i class="ti ti-check"></i>确认设置</button>
+    </div>
+  </div>
+</div>
+
+<script>
+function switchPage(id, el) {
+  document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); });
+  document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
+  document.getElementById('page-' + id).classList.add('active');
+  if (el) el.classList.add('active');
+}
+
+function chSwitchTab(type, el) {
+  document.querySelectorAll('#page-channel .status-tab').forEach(function(t) { t.classList.remove('active'); });
+  el.classList.add('active');
+  var batchBtn = document.getElementById('ch-batch-btn');
+  var summary = document.getElementById('ch-summary');
+  if (type === 'pending') {
+    summary.style.display = 'flex';
+    batchBtn.style.display = '';
+  } else {
+    batchBtn.style.display = 'none';
+  }
+  document.querySelectorAll('.ch-row-cb').forEach(function(cb) { cb.checked = false; });
+  document.getElementById('ch-check-all').checked = false;
+  chUpdateSel();
+}
+
+function chToggleAll(master) {
+  document.querySelectorAll('.ch-row-cb').forEach(function(cb) { cb.checked = master.checked; });
+  chUpdateSel();
+}
+
+function chUpdateSel() {
+  var cbs = document.querySelectorAll('.ch-row-cb:checked');
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  var tip = document.getElementById('ch-sel-tip');
+  if (cbs.length > 0) {
+    tip.textContent = '已选 ' + cbs.length + ' 条，合计佣金 ¥' + total.toFixed(2);
+  } else {
+    tip.textContent = '';
+  }
+}
+
+function openBatchModal() {
+  var cbs = document.querySelectorAll('.ch-row-cb:checked');
+  if (cbs.length === 0) { alert('请先勾选需要审核的记录'); return; }
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  document.getElementById('batch-count').textContent = cbs.length;
+  document.getElementById('batch-amount').textContent = '¥' + total.toFixed(2);
+  document.getElementById('batch-month').value = '';
+  document.getElementById('batch-month').style.borderColor = '#d9d9d9';
+  document.getElementById('modal-batch').classList.add('show');
+}
+
+function closeBatchModal() {
+  document.getElementById('modal-batch').classList.remove('show');
+}
+
+function confirmBatch() {
+  var m = document.getElementById('batch-month').value;
+  if (!m) {
+    document.getElementById('batch-month').style.borderColor = '#ff4d4f';
+    document.getElementById('batch-month').focus();
+    return;
+  }
+  closeBatchModal();
+}
+
+function asSwitchTab(type, el) {
+  document.querySelectorAll('#page-assignee .status-tab').forEach(function(t) { t.classList.remove('active'); });
+  el.classList.add('active');
+  var batchBtn = document.getElementById('as-batch-btn');
+  var summary = document.getElementById('as-summary');
+  var summaryText = document.getElementById('as-summary-text');
+  if (type === 'pending') {
+    summary.style.display = 'flex';
+    batchBtn.style.display = '';
+    summaryText.innerHTML = '共 8 条订单，待审核佣金合计 <b>¥43.00</b>';
+  } else if (type === 'unset') {
+    summary.style.display = 'flex';
+    batchBtn.style.display = 'none';
+    summaryText.innerHTML = '共 3 条订单未设置对接人，<b style="color:#cf1322">需手动分配后方可计算佣金</b>';
+  } else {
+    summary.style.display = 'none';
+  }
+  document.querySelectorAll('.as-row-cb:not([disabled])').forEach(function(cb) { cb.checked = false; });
+  document.getElementById('as-check-all').checked = false;
+  asUpdateSel();
+}
+
+function asToggleAll(master) {
+  document.querySelectorAll('.as-row-cb:not([disabled])').forEach(function(cb) { cb.checked = master.checked; });
+  asUpdateSel();
+}
+
+function asUpdateSel() {
+  var cbs = document.querySelectorAll('.as-row-cb:not([disabled]):checked');
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  var tip = document.getElementById('as-sel-tip');
+  if (cbs.length > 0) {
+    tip.textContent = '已选 ' + cbs.length + ' 条，合计佣金 ¥' + total.toFixed(2);
+  } else {
+    tip.textContent = '';
+  }
+}
+
+function openAsBatchModal() {
+  var cbs = document.querySelectorAll('.as-row-cb:not([disabled]):checked');
+  if (cbs.length === 0) { alert('请先勾选需要审核的记录'); return; }
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  document.getElementById('as-batch-count').textContent = cbs.length;
+  document.getElementById('as-batch-amount').textContent = '¥' + total.toFixed(2);
+  document.getElementById('as-batch-month').value = '';
+  document.getElementById('as-batch-month').style.borderColor = '#d9d9d9';
+  document.getElementById('modal-as-batch').classList.add('show');
+}
+
+function closeAsBatchModal() {
+  document.getElementById('modal-as-batch').classList.remove('show');
+}
+
+function confirmAsBatch() {
+  var m = document.getElementById('as-batch-month').value;
+  if (!m) {
+    document.getElementById('as-batch-month').style.borderColor = '#ff4d4f';
+    document.getElementById('as-batch-month').focus();
+    return;
+  }
+  closeAsBatchModal();
+}
+
+function showModal(id, orderId) {
+  document.getElementById(id).classList.add('show');
+  if (orderId) {
+    var el = document.getElementById('assign-order-id');
+    if (el) el.textContent = orderId;
+  }
+}
+
+function hideModal(id) {
+  document.getElementById(id).classList.remove('show');
+}
+
+document.querySelectorAll('.brand-tab').forEach(function(t) {
+  t.addEventListener('click', function() {
+    t.closest('.brand-tabs').querySelectorAll('.brand-tab').forEach(function(x) { x.classList.remove('active'); });
+    t.classList.add('active');
+  });
+});
+</script>
+</body>
+</html>

HTML原型/commission_pages.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>佣金结算管理</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+.layout{display:flex;height:100vh}
+
+/* 侧边栏 */
+.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
+.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
+.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent;line-height:1.4}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
+
+/* 主区 */
+.main{flex:1;display:flex;flex-direction:column;min-height:0}
+.page{display:none;flex:1;flex-direction:column}.page.active{display:flex}
+.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
+.page-title{font-size:15px;font-weight:600}
+.header-btns{display:flex;gap:8px}
+
+/* 品牌Tab */
+.brand-tabs{display:flex;gap:0;padding:0 20px;background:#fff;border-bottom:1px solid #e8e8e8;flex-shrink:0}
+.brand-tab{padding:10px 16px;font-size:14px;font-weight:500;cursor:pointer;color:#8c8c8c;border-bottom:2px solid transparent;margin-bottom:-1px}
+.brand-tab.active{color:#1677ff;border-bottom-color:#1677ff}
+
+/* 筛选 */
+.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 20px;flex-shrink:0}
+.filter-grid{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
+.filter-item{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
+.filter-item label{color:#8c8c8c;flex-shrink:0}
+.filter-item input,.filter-item select{height:30px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:120px}
+.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
+.filter-btns{margin-left:auto;display:flex;gap:8px}
+
+/* 内容区 */
+.content{padding:16px 20px;flex:1;overflow-y:auto}
+
+/* 状态Tab */
+.status-tabs{display:flex;gap:0;border-bottom:1px solid #e8e8e8;margin-bottom:0}
+.status-tab{padding:8px 14px;font-size:13px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
+.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+
+/* 汇总提示 */
+.summary-bar{background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:8px 14px;font-size:12px;color:#d46b08;margin:10px 0;display:flex;align-items:center;justify-content:space-between}
+.summary-bar b{color:#ad4e00}
+
+/* 表格 */
+.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:12px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:9px 10px;vertical-align:middle}
+.cb{width:36px}
+
+/* 通用 */
+.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-sm{padding:2px 8px;font-size:11px;border-radius:4px}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer;white-space:nowrap}
+.btn-link:hover{color:#0958d9}
+.btn-link+.btn-link{margin-left:8px}
+
+.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+.tag-red{background:#fff1f0;color:#cf1322;border-color:#ffa39e}
+.tag-purple{background:#f9f0ff;color:#531dab;border-color:#d3adf7}
+
+.muted{color:#bfbfbf}
+
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:460px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden}
+.modal-header{padding:14px 18px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
+.modal-title{font-size:14px;font-weight:600}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:16px 18px}
+.modal-footer{padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
+.form-item{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
+.form-item label{font-size:12px;color:#595959}
+.form-item select,.form-item input{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff;width:100%}
+.form-item select:focus,.form-item input:focus{border-color:#1677ff}
+.info-row{display:flex;font-size:13px;margin-bottom:8px}
+.info-label{width:90px;color:#8c8c8c;flex-shrink:0}
+</style>
+</head>
+<body>
+<div class="layout">
+
+<!-- 侧边栏 -->
+<div class="sidebar">
+  <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
+  <div class="nav-item">产品分类管理</div>
+  <div class="nav-item">产品管理</div>
+  <div class="nav-item">合伙人申请管理列表</div>
+  <div class="nav-item">合伙人管理列表</div>
+  <div class="nav-group">佣金结算</div>
+  <div class="nav-item active" onclick="switchPage('partner',this)">合伙人佣金结算管理</div>
+  <div class="nav-item" onclick="switchPage('channel',this)">渠道管理员佣金结算</div>
+  <div class="nav-item" onclick="switchPage('assignee',this)">对接人佣金结算</div>
+  <div class="nav-group">其他</div>
+  <div class="nav-item">服务商结算</div>
+  <div class="nav-item">结算服务商付款管理</div>
+  <div class="nav-item">业务服务商付款管理</div>
+  <div class="nav-item">其他付款管理</div>
+</div>
+
+<!-- ===== 合伙人佣金结算管理 ===== -->
+<div id="page-partner" class="page active">
+  <div class="page-header">
+    <span class="page-title">合伙人佣金结算管理</span>
+    <div class="header-btns">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">视图管理</button>
+      <button class="btn">超管工具</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+    </div>
+  </div>
+  <div class="brand-tabs">
+    <div class="brand-tab active">亲亲企服</div>
+    <div class="brand-tab">亲亲小保</div>
+  </div>
+  <div class="filter-wrap">
+    <div class="filter-grid">
+      <div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>用户类型</label><select><option value="">请选择</option><option>企业用户</option><option>个人用户</option></select></div>
+      <div class="filter-item"><label>订单编号</label><input type="text" placeholder="可输入订单编号或业务单号"></div>
+      <div class="filter-item"><label>个人用户手机号</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>合伙人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>状态</label><select><option value="">请选择</option><option>待审核</option><option>已审核</option><option>已取消</option></select></div>
+      <div class="filter-btns">
+        <button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
+        <button class="btn"><i class="ti ti-refresh"></i>重置</button>
+      </div>
+    </div>
+  </div>
+  <div class="content">
+    <div class="status-tabs">
+      <div class="status-tab active">待审核 (195)</div>
+      <div class="status-tab">已审核待入账 (2)</div>
+      <div class="status-tab">已审核 (7)</div>
+      <div class="status-tab">已取消 (1)</div>
+      <div class="status-tab">全部 (205)</div>
+    </div>
+    <div class="summary-bar">
+      <span>共 195 条订单，佣金总金额 <b>¥3,764.11</b>，正向佣金 <b>¥3,764.11</b>，负向佣金 <b>¥0</b></span>
+      <button class="btn btn-sm btn-primary">批量审核</button>
+    </div>
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th class="cb"><input type="checkbox"></th>
+            <th>业务订单编号</th>
+            <th>产品类型</th>
+            <th>产品名称</th>
+            <th>用户类型</th>
+            <th>所属客户</th>
+            <th>合伙人</th>
+            <th>渠道管理员</th>
+            <th>对接人</th>
+            <th>客户经理</th>
+            <th>订单金额</th>
+            <th>佣金金额</th>
+            <th>佣金规则</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356660</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">李明</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356657</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>企业员工社保代缴</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="muted">—</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356654</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>岗位外包</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">审核</button><button class="btn-link">更多</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox"></td>
+            <td style="color:#1677ff;cursor:pointer">1356658</td>
+            <td><span class="tag tag-purple">财税服务</span></td>
+            <td>代理记账</td>
+            <td>企业用户</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>张情</td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d">¥18.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 30%<br>续费持续返佣</td>
+            <td><span class="tag tag-green">已审核</span></td>
+            <td><button class="btn-link">操作记录</button><button class="btn-link">更多</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pagination">
+        <span>共 205 条 &nbsp; <select style="height:26px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px"><option>20条/页</option><option>50条/页</option></select></span>
+        <div style="display:flex;gap:4px">
+          <div class="page-btn"><i class="ti ti-chevron-left"></i></div>
+          <div class="page-btn active">1</div>
+          <div class="page-btn">2</div>
+          <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 渠道管理员佣金结算 ===== -->
+<div id="page-channel" class="page">
+  <div class="page-header">
+    <span class="page-title">渠道管理员佣金结算管理</span>
+    <div class="header-btns">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">视图管理</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+    </div>
+  </div>
+  <div class="brand-tabs">
+    <div class="brand-tab active">亲亲企服</div>
+    <div class="brand-tab">亲亲小保</div>
+  </div>
+  <div class="filter-wrap">
+    <div class="filter-grid">
+      <div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>订单编号</label><input type="text" placeholder="请输入"></div>
+      <div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-btns">
+        <button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
+        <button class="btn"><i class="ti ti-refresh"></i>重置</button>
+      </div>
+    </div>
+  </div>
+  <div class="content">
+    <div class="status-tabs">
+      <div class="status-tab active" id="ch-tab-pending" onclick="chSwitchTab('pending',this)">待审核 (12)</div>
+      <div class="status-tab" id="ch-tab-done" onclick="chSwitchTab('done',this)">已审核 (6)</div>
+      <div class="status-tab" id="ch-tab-all" onclick="chSwitchTab('all',this)">全部 (21)</div>
+    </div>
+    <div class="summary-bar" id="ch-summary">
+      <span>共 12 条订单，待发放佣金合计 <b>¥240.00</b></span>
+      <button class="btn btn-sm btn-primary" id="ch-batch-btn" onclick="openBatchModal()">批量审核</button>
+    </div>
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th class="cb"><input type="checkbox" id="ch-check-all" onchange="chToggleAll(this)"></th>
+            <th>业务订单编号</th>
+            <th>产品类型</th>
+            <th>产品名称</th>
+            <th>所属客户</th>
+            <th>合伙人</th>
+            <th>渠道管理员</th>
+            <th>对接人</th>
+            <th>订单金额</th>
+            <th>佣金金额</th>
+            <th>渠道管理员佣金规则</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody id="ch-tbody">
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356660</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="tag tag-blue">李明</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356657</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>企业员工社保代缴</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="muted">—</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356654</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>岗位外包</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="1.20">¥1.20</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="ch-row-cb" onchange="chUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356655</td>
+            <td><span class="tag tag-purple">财税服务</span></td>
+            <td>代理记账</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff;font-weight:500">王利娟</td>
+            <td><span class="tag tag-blue">刘婷</span></td>
+            <td>800.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="16.00">¥16.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 2%<br>成交额</td>
+            <td><span class="tag tag-green">已审核</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pagination">
+        <span id="ch-sel-tip" style="color:#1677ff;font-size:12px"></span>
+        <div style="display:flex;align-items:center;gap:8px">
+          <span style="color:#8c8c8c">共 21 条</span>
+          <div style="display:flex;gap:4px">
+            <div class="page-btn active">1</div>
+            <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 批量审核弹窗 -->
+<div class="modal-overlay" id="modal-batch">
+  <div class="modal" style="width:440px">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-checks" style="color:#1677ff;margin-right:4px"></i>批量审核确认</span>
+      <i class="ti ti-x" style="font-size:16px;color:#8c8c8c;cursor:pointer" onclick="closeBatchModal()"></i>
+    </div>
+    <div class="modal-body" style="padding:16px 18px">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
+        <div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#1677ff" id="batch-count">0</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
+        </div>
+        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#389e0d" id="batch-amount">¥0.00</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">总计佣金金额</div>
+        </div>
+      </div>
+      <div style="margin-bottom:14px">
+        <div style="font-size:12px;color:#595959;margin-bottom:6px">业绩所属月份 <span style="color:#cf1322">*</span></div>
+        <input type="month" id="batch-month" style="height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;width:100%" onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
+        <div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择该批佣金对应的业绩归属月份</div>
+      </div>
+      <div style="background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:9px 12px;font-size:12px;color:#613400;display:flex;gap:6px;align-items:flex-start">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>审核通过后，佣金将按工资结算方式在次月发放给渠道管理员。请确认数据无误后再提交。</span>
+      </div>
+    </div>
+    <div style="padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0">
+      <button class="btn" onclick="closeBatchModal()">取消</button>
+      <button class="btn btn-primary" onclick="confirmBatch()"><i class="ti ti-check"></i>确认审核通过</button>
+    </div>
+  </div>
+</div>
+
+<!-- ===== 对接人佣金结算 ===== -->
+<div id="page-assignee" class="page">
+  <div class="page-header">
+    <span class="page-title">对接人佣金结算管理</span>
+    <div class="header-btns">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">视图管理</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+    </div>
+  </div>
+  <div class="brand-tabs">
+    <div class="brand-tab active">亲亲企服</div>
+    <div class="brand-tab">亲亲小保</div>
+  </div>
+  <div class="filter-wrap">
+    <div class="filter-grid">
+      <div class="filter-item"><label>产品名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>订单编号</label><input type="text" placeholder="请输入"></div>
+      <div class="filter-item"><label>企业名称</label><input type="text" placeholder="请输入内容"></div>
+      <div class="filter-item"><label>渠道管理员</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-item"><label>对接人</label><input type="text" placeholder="请选择"></div>
+      <div class="filter-btns">
+        <button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
+        <button class="btn"><i class="ti ti-refresh"></i>重置</button>
+      </div>
+    </div>
+  </div>
+  <div class="content">
+    <div class="status-tabs">
+      <div class="status-tab active" onclick="asSwitchTab('pending',this)">待审核 (8)</div>
+      <div class="status-tab" onclick="asSwitchTab('done',this)">已审核 (6)</div>
+      <div class="status-tab" onclick="asSwitchTab('unset',this)">未设置对接人 (3)</div>
+      <div class="status-tab" onclick="asSwitchTab('all',this)">全部 (17)</div>
+    </div>
+    <div class="summary-bar" id="as-summary">
+      <span id="as-summary-text">共 8 条订单，待审核佣金合计 <b>¥43.00</b></span>
+      <button class="btn btn-sm btn-primary" id="as-batch-btn" onclick="openAsBatchModal()">批量审核</button>
+    </div>
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th class="cb"><input type="checkbox" id="as-check-all" onchange="asToggleAll(this)"></th>
+            <th>业务订单编号</th>
+            <th>产品类型</th>
+            <th>产品名称</th>
+            <th>所属客户</th>
+            <th>合伙人</th>
+            <th>渠道管理员</th>
+            <th>对接人</th>
+            <th>订单金额</th>
+            <th>佣金金额</th>
+            <th>对接人佣金规则</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr style="background:#fffbe6">
+            <td class="cb"><input type="checkbox" class="as-row-cb" disabled></td>
+            <td style="color:#1677ff;cursor:pointer">1356657</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>企业员工社保代缴</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td>
+              <span class="muted" style="margin-right:6px">未设置</span>
+              <button class="btn btn-sm" style="color:#d46b08;border-color:#ffd591;background:#fff7e6" onclick="showModal('modal-assign','1356657')">设置对接人</button>
+            </td>
+            <td>60.00</td>
+            <td class="muted">待定</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-red">未设置对接人</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+          <tr style="background:#fffbe6">
+            <td class="cb"><input type="checkbox" class="as-row-cb" disabled></td>
+            <td style="color:#1677ff;cursor:pointer">1356656</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td>
+              <span class="muted" style="margin-right:6px">未设置</span>
+              <button class="btn btn-sm" style="color:#d46b08;border-color:#ffd591;background:#fff7e6" onclick="showModal('modal-assign','1356656')">设置对接人</button>
+            </td>
+            <td>60.00</td>
+            <td class="muted">待定</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-red">未设置对接人</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356660</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>劳务派遣</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">李明</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="3.00">¥3.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356654</td>
+            <td><span class="tag tag-blue">异地用工</span></td>
+            <td>岗位外包</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>60.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="3.00">¥3.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-orange">待审核</span></td>
+            <td><button class="btn-link">审核</button><button class="btn-link" style="margin-left:8px">操作记录</button></td>
+          </tr>
+          <tr>
+            <td class="cb"><input type="checkbox" class="as-row-cb" onchange="asUpdateSel()"></td>
+            <td style="color:#1677ff;cursor:pointer">1356658</td>
+            <td><span class="tag tag-purple">财税服务</span></td>
+            <td>代理记账</td>
+            <td>张情测试合伙人企业</td>
+            <td>15011348374</td>
+            <td style="color:#1677ff">王利娟</td>
+            <td><span class="tag tag-blue">赵磊</span></td>
+            <td>800.00</td>
+            <td style="font-weight:500;color:#389e0d" data-comm="40.00">¥40.00</td>
+            <td style="color:#8c8c8c;font-size:11px">比例 5%<br>成交额</td>
+            <td><span class="tag tag-green">已审核</span></td>
+            <td><button class="btn-link">操作记录</button></td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pagination">
+        <span id="as-sel-tip" style="color:#1677ff;font-size:12px"></span>
+        <div style="display:flex;align-items:center;gap:8px">
+          <span style="color:#8c8c8c">共 17 条</span>
+          <div style="display:flex;gap:4px">
+            <div class="page-btn active">1</div>
+            <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 对接人批量审核弹窗 -->
+<div class="modal-overlay" id="modal-as-batch">
+  <div class="modal" style="width:440px">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-checks" style="color:#1677ff;margin-right:4px"></i>批量审核确认</span>
+      <i class="ti ti-x" style="font-size:16px;color:#8c8c8c;cursor:pointer" onclick="closeAsBatchModal()"></i>
+    </div>
+    <div class="modal-body" style="padding:16px 18px">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
+        <div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#1677ff" id="as-batch-count">0</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
+        </div>
+        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:22px;font-weight:600;color:#389e0d" id="as-batch-amount">¥0.00</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">总计佣金金额</div>
+        </div>
+      </div>
+      <div style="margin-bottom:14px">
+        <div style="font-size:12px;color:#595959;margin-bottom:6px">业绩所属月份 <span style="color:#cf1322">*</span></div>
+        <input type="month" id="as-batch-month" style="height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;width:100%" onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
+        <div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择该批佣金对应的业绩归属月份</div>
+      </div>
+      <div style="background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:9px 12px;font-size:12px;color:#613400;display:flex;gap:6px;align-items:flex-start">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>审核通过后，佣金将按工资结算方式在次月发放给对接人。请确认数据无误后再提交。</span>
+      </div>
+    </div>
+    <div style="padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0">
+      <button class="btn" onclick="closeAsBatchModal()">取消</button>
+      <button class="btn btn-primary" onclick="confirmAsBatch()"><i class="ti ti-check"></i>确认审核通过</button>
+    </div>
+  </div>
+</div>
+
+<!-- 设置对接人弹窗 -->
+<div class="modal-overlay" id="modal-assign">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title">设置对接人</span>
+      <i class="ti ti-x modal-close" onclick="hideModal('modal-assign')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:8px 12px;font-size:12px;color:#0958d9;margin-bottom:14px;display:flex;gap:6px;align-items:center">
+        <i class="ti ti-info-circle"></i>设置后将按产品对应规则自动计算该订单的对接人佣金。
+      </div>
+      <div class="info-row"><span class="info-label">订单编号</span><span id="assign-order-id" style="font-weight:500">—</span></div>
+      <div class="info-row"><span class="info-label">产品名称</span><span>企业员工社保代缴</span></div>
+      <div class="info-row"><span class="info-label">佣金规则</span><span style="color:#8c8c8c;font-size:12px">比例 5% · 成交额</span></div>
+      <div class="form-item" style="margin-top:12px">
+        <label>选择对接人 <span style="color:#cf1322">*</span></label>
+        <select>
+          <option value="">请选择（范围：该产品配置的对接人）</option>
+          <option>李明 · 销售部</option>
+          <option>赵磊 · 销售部</option>
+          <option>刘婷 · 综合服务部</option>
+          <option>王芳 · 财税部</option>
+        </select>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal('modal-assign')">取消</button>
+      <button class="btn btn-primary" onclick="hideModal('modal-assign')"><i class="ti ti-check"></i>确认设置</button>
+    </div>
+  </div>
+</div>
+
+<script>
+function switchPage(id, el) {
+  document.querySelectorAll('.page').forEach(function(p) { p.classList.remove('active'); });
+  document.querySelectorAll('.nav-item').forEach(function(n) { n.classList.remove('active'); });
+  document.getElementById('page-' + id).classList.add('active');
+  if (el) el.classList.add('active');
+}
+
+function chSwitchTab(type, el) {
+  document.querySelectorAll('#page-channel .status-tab').forEach(function(t) { t.classList.remove('active'); });
+  el.classList.add('active');
+  var batchBtn = document.getElementById('ch-batch-btn');
+  var summary = document.getElementById('ch-summary');
+  if (type === 'pending') {
+    summary.style.display = 'flex';
+    batchBtn.style.display = '';
+  } else {
+    batchBtn.style.display = 'none';
+  }
+  document.querySelectorAll('.ch-row-cb').forEach(function(cb) { cb.checked = false; });
+  document.getElementById('ch-check-all').checked = false;
+  chUpdateSel();
+}
+
+function chToggleAll(master) {
+  document.querySelectorAll('.ch-row-cb').forEach(function(cb) { cb.checked = master.checked; });
+  chUpdateSel();
+}
+
+function chUpdateSel() {
+  var cbs = document.querySelectorAll('.ch-row-cb:checked');
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  var tip = document.getElementById('ch-sel-tip');
+  if (cbs.length > 0) {
+    tip.textContent = '已选 ' + cbs.length + ' 条，合计佣金 ¥' + total.toFixed(2);
+  } else {
+    tip.textContent = '';
+  }
+}
+
+function openBatchModal() {
+  var cbs = document.querySelectorAll('.ch-row-cb:checked');
+  if (cbs.length === 0) { alert('请先勾选需要审核的记录'); return; }
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  document.getElementById('batch-count').textContent = cbs.length;
+  document.getElementById('batch-amount').textContent = '¥' + total.toFixed(2);
+  document.getElementById('batch-month').value = '';
+  document.getElementById('batch-month').style.borderColor = '#d9d9d9';
+  document.getElementById('modal-batch').classList.add('show');
+}
+
+function closeBatchModal() {
+  document.getElementById('modal-batch').classList.remove('show');
+}
+
+function confirmBatch() {
+  var m = document.getElementById('batch-month').value;
+  if (!m) {
+    document.getElementById('batch-month').style.borderColor = '#ff4d4f';
+    document.getElementById('batch-month').focus();
+    return;
+  }
+  closeBatchModal();
+}
+
+function asSwitchTab(type, el) {
+  document.querySelectorAll('#page-assignee .status-tab').forEach(function(t) { t.classList.remove('active'); });
+  el.classList.add('active');
+  var batchBtn = document.getElementById('as-batch-btn');
+  var summary = document.getElementById('as-summary');
+  var summaryText = document.getElementById('as-summary-text');
+  if (type === 'pending') {
+    summary.style.display = 'flex';
+    batchBtn.style.display = '';
+    summaryText.innerHTML = '共 8 条订单，待审核佣金合计 <b>¥43.00</b>';
+  } else if (type === 'unset') {
+    summary.style.display = 'flex';
+    batchBtn.style.display = 'none';
+    summaryText.innerHTML = '共 3 条订单未设置对接人，<b style="color:#cf1322">需手动分配后方可计算佣金</b>';
+  } else {
+    summary.style.display = 'none';
+  }
+  document.querySelectorAll('.as-row-cb:not([disabled])').forEach(function(cb) { cb.checked = false; });
+  document.getElementById('as-check-all').checked = false;
+  asUpdateSel();
+}
+
+function asToggleAll(master) {
+  document.querySelectorAll('.as-row-cb:not([disabled])').forEach(function(cb) { cb.checked = master.checked; });
+  asUpdateSel();
+}
+
+function asUpdateSel() {
+  var cbs = document.querySelectorAll('.as-row-cb:not([disabled]):checked');
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  var tip = document.getElementById('as-sel-tip');
+  if (cbs.length > 0) {
+    tip.textContent = '已选 ' + cbs.length + ' 条，合计佣金 ¥' + total.toFixed(2);
+  } else {
+    tip.textContent = '';
+  }
+}
+
+function openAsBatchModal() {
+  var cbs = document.querySelectorAll('.as-row-cb:not([disabled]):checked');
+  if (cbs.length === 0) { alert('请先勾选需要审核的记录'); return; }
+  var total = 0;
+  cbs.forEach(function(cb) {
+    var commTd = cb.closest('tr').querySelector('[data-comm]');
+    if (commTd) total += parseFloat(commTd.dataset.comm);
+  });
+  document.getElementById('as-batch-count').textContent = cbs.length;
+  document.getElementById('as-batch-amount').textContent = '¥' + total.toFixed(2);
+  document.getElementById('as-batch-month').value = '';
+  document.getElementById('as-batch-month').style.borderColor = '#d9d9d9';
+  document.getElementById('modal-as-batch').classList.add('show');
+}
+
+function closeAsBatchModal() {
+  document.getElementById('modal-as-batch').classList.remove('show');
+}
+
+function confirmAsBatch() {
+  var m = document.getElementById('as-batch-month').value;
+  if (!m) {
+    document.getElementById('as-batch-month').style.borderColor = '#ff4d4f';
+    document.getElementById('as-batch-month').focus();
+    return;
+  }
+  closeAsBatchModal();
+}
+
+function showModal(id, orderId) {
+  document.getElementById(id).classList.add('show');
+  if (orderId) {
+    var el = document.getElementById('assign-order-id');
+    if (el) el.textContent = orderId;
+  }
+}
+
+function hideModal(id) {
+  document.getElementById(id).classList.remove('show');
+}
+
+document.querySelectorAll('.brand-tab').forEach(function(t) {
+  t.addEventListener('click', function() {
+    t.closest('.brand-tabs').querySelectorAll('.brand-tab').forEach(function(x) { x.classList.remove('active'); });
+    t.classList.add('active');
+  });
+});
+</script>
+</body>
+</html>

HTML原型/enterprise_product_record.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>企业详情 - 对接人分配表</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+
+/* 整体布局 */
+.layout{display:flex;height:100vh;flex-direction:column}
+.topbar{height:44px;background:#1a1a2e;display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0}
+.topbar-title{color:#fff;font-weight:500;font-size:14px;display:flex;align-items:center;gap:8px}
+.topbar-tag{color:#1677ff;font-size:12px;cursor:pointer}
+.topbar-meta{color:#bfbfbf;font-size:12px;display:flex;align-items:center;gap:16px;margin-left:8px}
+.topbar-meta i{font-size:14px}
+.topbar-user{margin-left:auto;color:#fff;font-size:12px;display:flex;align-items:center;gap:4px}
+
+.body-wrap{display:flex;flex:1;overflow:hidden}
+
+/* 左侧导航 */
+.sidebar{width:200px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
+.tab-wrap{padding:8px 0;border-bottom:1px solid #f0f0f0}
+.enterprise-tab{padding:10px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent;display:flex;align-items:center;justify-content:space-between}
+.enterprise-tab:hover{background:#f5f5f5;color:#1677ff}
+.enterprise-tab.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+.enterprise-tab.highlight{color:#cf1322;font-size:12px;padding:6px 16px 6px 28px}
+.nav-group-title{font-size:11px;color:#bfbfbf;padding:10px 16px 4px;letter-spacing:.04em}
+.nav-item{padding:8px 16px;font-size:13px;color:#595959;cursor:pointer;display:flex;align-items:center;justify-content:space-between}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-badge{font-size:11px;color:#fa8c16;font-weight:500}
+
+/* 主内容 */
+.main{flex:1;overflow-y:auto;background:#f0f2f5}
+.tab-bar{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 16px;display:flex;align-items:center;gap:0}
+.tab-pill{padding:10px 14px;font-size:13px;color:#8c8c8c;cursor:pointer;border-bottom:2px solid transparent;display:flex;align-items:center;gap:4px;white-space:nowrap}
+.tab-pill.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+.tab-pill .close{font-size:10px;color:#bfbfbf;margin-left:2px;cursor:pointer}
+.tab-pill .close:hover{color:#cf1322}
+
+.content{padding:16px}
+
+/* 企业账号详情头 */
+.account-header{background:#fff;border-radius:8px;padding:12px 20px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;border:1px solid #e8e8e8}
+.account-info{font-size:13px;color:#595959;display:flex;align-items:center;gap:20px}
+.account-info b{color:#1a1a1a}
+.account-info a{color:#1677ff;text-decoration:none}
+.account-btns{display:flex;gap:8px}
+
+/* 通用卡片 */
+.card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:12px;overflow:hidden}
+.card-header{padding:12px 16px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
+.card-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
+.card-title i{color:#1677ff}
+.card-body{padding:0}
+
+/* 按钮 */
+.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
+.btn-link:hover{color:#0958d9}
+.btn-link.danger{color:#cf1322}
+
+/* 表格 */
+table{width:100%;border-collapse:collapse;font-size:13px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:10px 14px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap;font-size:12px}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:10px 14px;vertical-align:middle}
+
+.tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 8px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+.tag-purple{background:#f9f0ff;color:#531dab;border-color:#d3adf7}
+
+.person-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:#f0f7ff;border:1px solid #b6d9ff;border-radius:100px;font-size:12px;color:#0958d9}
+
+/* 操作日志区 */
+.log-section{padding:16px}
+.log-title{font-size:13px;font-weight:600;margin-bottom:12px;color:#595959;display:flex;align-items:center;gap:6px}
+.log-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #f5f5f5}
+.log-item:last-child{border-bottom:none}
+.log-avatar{width:28px;height:28px;border-radius:50%;background:#1677ff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px}
+.log-body{flex:1}
+.log-meta{font-size:12px;color:#8c8c8c;margin-bottom:2px}
+.log-meta b{color:#1a1a1a;font-weight:500}
+.log-content{font-size:13px;color:#1a1a1a;line-height:1.6}
+.log-time{font-size:11px;color:#bfbfbf;margin-top:2px}
+
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:center;justify-content:center}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:520px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden}
+.modal-header{padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
+.modal-title{font-size:15px;font-weight:600}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:20px}
+.modal-footer{padding:12px 20px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
+.form-item{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
+.form-item label{font-size:12px;color:#595959}
+.req{color:#cf1322;margin-left:2px}
+.form-item input,.form-item select,.form-item textarea{height:34px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff;width:100%}
+.form-item input:focus,.form-item select:focus{border-color:#1677ff}
+.form-item textarea{height:72px;padding:8px 10px;resize:vertical}
+.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+</style>
+</head>
+<body>
+
+<div class="layout">
+
+  <!-- 顶栏 -->
+  <div class="topbar">
+    <div class="topbar-title">
+      企业详情 <span style="color:#8c8c8c;font-weight:400;font-size:13px">张情测试创建合伙人企业第四家</span>
+      <span class="topbar-tag">切换</span>
+    </div>
+    <div class="topbar-meta">
+      <span><i class="ti ti-wallet"></i> 余额：0.00 元</span>
+      <span><i class="ti ti-phone"></i> 所有者手机号：13810641140</span>
+      <span><i class="ti ti-user"></i> 人事顾问组：张情</span>
+    </div>
+    <div class="topbar-user"><i class="ti ti-user-circle"></i> 李鹏飞</div>
+  </div>
+
+  <div class="body-wrap">
+
+    <!-- 左侧菜单 -->
+    <div class="sidebar">
+      <div class="tab-wrap">
+        <div class="enterprise-tab" onclick="switchTab(this)">企业详情</div>
+        <div class="enterprise-tab active" onclick="switchTab(this)">对接人分配表</div>
+        <div class="enterprise-tab" onclick="switchTab(this)">企业服务资格</div>
+        <div class="enterprise-tab" onclick="switchTab(this)">用户备注</div>
+        <div class="enterprise-tab" onclick="switchTab(this)">计划任务 <span class="nav-badge">0/0</span></div>
+        <div class="enterprise-tab" onclick="switchTab(this)">计划任务-旧</div>
+        <div class="enterprise-tab" onclick="switchTab(this)">用户资料</div>
+        <div class="enterprise-tab" onclick="switchTab(this)">人员信息</div>
+        <div class="enterprise-tab" onclick="switchTab(this)">账户信息</div>
+      </div>
+      <div class="nav-group-title">人力外包</div>
+      <div class="enterprise-tab" onclick="switchTab(this)">人事代理 <span class="nav-badge">0/0</span></div>
+      <div class="enterprise-tab" onclick="switchTab(this)">灵活用工 <span class="nav-badge">0/0</span></div>
+      <div class="nav-group-title">专项业务</div>
+      <div class="enterprise-tab" onclick="switchTab(this)">企业服务专项业务</div>
+      <div class="enterprise-tab" onclick="switchTab(this)">历史专项业务</div>
+    </div>
+
+    <!-- 主内容 -->
+    <div class="main">
+      <!-- Tab栏 -->
+      <div class="tab-bar">
+        <div class="tab-pill">企业详情 <span class="close">✕</span></div>
+        <div class="tab-pill active">对接人分配表 <span class="close">✕</span></div>
+      </div>
+
+      <div class="content">
+
+        <!-- 账号头部信息 -->
+        <div class="account-header">
+          <div class="account-info">
+            <span><b>对接人分配表</b></span>
+          </div>
+          <div class="account-btns">
+            <button class="btn btn-primary" onclick="showModal('modal-add')"><i class="ti ti-plus"></i>添加记录</button>
+          </div>
+        </div>
+
+        <!-- 对接人分配表 -->
+        <div class="card">
+          <div class="card-header">
+            <div class="card-title"><i class="ti ti-table"></i>对接人分配表</div>
+            <div style="font-size:12px;color:#8c8c8c">共 3 条记录</div>
+          </div>
+          <div class="card-body">
+            <div style="background:#e8f4ff;border:1px solid #91caff;border-radius:6px;padding:8px 12px;font-size:12px;color:#0958d9;margin-bottom:12px;display:flex;gap:6px">
+              <i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
+              <span>商机分配对接人且关联本企业后自动写入。新建商机时系统将查询此表，按「产品名称」匹配，命中则自动带入对接人。</span>
+            </div>
+            <table>
+              <thead>
+                <tr>
+                  <th>产品分类</th>
+                  <th>产品名称</th>
+                  <th>合伙人</th>
+                  <th>对接人</th>
+                  <th>渠道管理员</th>
+                  <th>商机状态</th>
+                  <th>写入时间</th>
+                  <th>来源商机</th>
+                  <th>操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><span class="tag tag-blue">异地用工</span></td>
+                  <td style="font-weight:500">岗位外包</td>
+                  <td style="font-size:12px">李鹏飞 / 158****0129</td>
+                  <td><span class="person-tag"><i class="ti ti-user" style="font-size:10px"></i>李明</span></td>
+                  <td style="color:#1677ff">王利娟</td>
+                  <td><span class="tag" style="background:#e6fffb;color:#08979c;border-color:#87e8de">跟进中</span></td>
+                  <td style="color:#8c8c8c;font-size:12px">2026-06-22 15:30</td>
+                  <td><button class="btn-link">LM001</button></td>
+                  <td><button class="btn-link" onclick="showModal('modal-edit')">编辑</button> <button class="btn-link danger" onclick="showModal('modal-delete')">删除</button></td>
+                </tr>
+                <tr>
+                  <td><span class="tag tag-purple">财税服务</span></td>
+                  <td style="font-weight:500">代理记账</td>
+                  <td style="font-size:12px">李鹏飞 / 158****0129</td>
+                  <td><span class="person-tag"><i class="ti ti-user" style="font-size:10px"></i>赵磊</span></td>
+                  <td style="color:#1677ff">王利娟</td>
+                  <td><span class="tag tag-green">已成单</span></td>
+                  <td style="color:#8c8c8c;font-size:12px">2026-06-20 13:50</td>
+                  <td><button class="btn-link">LM003</button></td>
+                  <td><button class="btn-link" onclick="showModal('modal-edit')">编辑</button> <button class="btn-link danger" onclick="showModal('modal-delete')">删除</button></td>
+                </tr>
+                <tr>
+                  <td><span class="tag tag-orange">人事代理</span></td>
+                  <td style="font-weight:500">社保公积金托管</td>
+                  <td style="font-size:12px">赛晓丽 / 137****3269</td>
+                  <td><span class="person-tag"><i class="ti ti-user" style="font-size:10px"></i>王芳</span></td>
+                  <td style="color:#1677ff">王利娟</td>
+                  <td><span class="tag tag-green">已成单</span></td>
+                  <td style="color:#8c8c8c;font-size:12px">2026-06-15 11:00</td>
+                  <td><button class="btn-link">LM005</button></td>
+                  <td><button class="btn-link" onclick="showModal('modal-edit')">编辑</button> <button class="btn-link danger" onclick="showModal('modal-delete')">删除</button></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- 操作日志 -->
+        <div class="card">
+          <div class="card-header">
+            <div class="card-title"><i class="ti ti-history"></i>操作记录</div>
+          </div>
+          <div class="log-section">
+            <div class="log-item">
+              <div class="log-avatar">王</div>
+              <div class="log-body">
+                <div class="log-meta"><b>王利娟</b> 写入了分配记录</div>
+                <div class="log-content">商机 LM001 分配对接人 <b>李明</b>，产品：岗位外包（异地用工）</div>
+                <div class="log-time">2026-06-22 15:30</div>
+              </div>
+            </div>
+            <div class="log-item">
+              <div class="log-avatar">王</div>
+              <div class="log-body">
+                <div class="log-meta"><b>王利娟</b> 写入了分配记录</div>
+                <div class="log-content">商机 LM003 分配对接人 <b>赵磊</b>，产品：代理记账（财税服务）</div>
+                <div class="log-time">2026-06-20 13:50</div>
+              </div>
+            </div>
+            <div class="log-item">
+              <div class="log-avatar" style="background:#389e0d">王</div>
+              <div class="log-body">
+                <div class="log-meta"><b>王利娟</b> 写入了分配记录</div>
+                <div class="log-content">商机 LM005 分配对接人 <b>王芳</b>，产品：社保公积金托管（人事代理）</div>
+                <div class="log-time">2026-06-15 11:00</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 添加分配记录弹窗 -->
+<div class="modal-overlay" id="modal-add">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title">添加分配记录</span>
+      <i class="ti ti-x modal-close" onclick="hideModal('modal-add')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="form-row">
+        <div class="form-item">
+          <label>产品分类<span class="req">*</span></label>
+          <select id="sel-category" onchange="filterProducts(this.value)">
+            <option value="">请选择</option>
+            <option value="异地用工">异地用工</option>
+            <option value="财税服务">财税服务</option>
+            <option value="人事代理">人事代理</option>
+            <option value="智能工资条">智能工资条</option>
+          </select>
+        </div>
+        <div class="form-item">
+          <label>产品名称<span class="req">*</span></label>
+          <select id="sel-product">
+            <option value="">请先选择产品分类</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>业务负责人</label>
+          <input type="text" placeholder="自动带入" id="inp-owner" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>对接人<span class="req">*</span></label>
+          <select>
+            <option value="">请选择（根据产品配置）</option>
+            <option>李明</option><option>赵磊</option><option>刘婷</option><option>王芳</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>订购时间<span class="req">*</span></label>
+          <input type="date">
+        </div>
+        <div class="form-item">
+          <label>状态<span class="req">*</span></label>
+          <select>
+            <option>服务中</option><option>已终止</option><option>暂停</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-item">
+        <label>备注</label>
+        <textarea placeholder="请输入备注信息（选填）"></textarea>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal('modal-add')">取消</button>
+      <button class="btn btn-primary">确认添加</button>
+    </div>
+  </div>
+</div>
+
+<!-- 编辑服务记录弹窗（只可改状态和终止时间） -->
+<div class="modal-overlay" id="modal-edit">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title">编辑服务记录</span>
+      <i class="ti ti-x modal-close" onclick="hideModal('modal-edit')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="background:#fffbe6;border:1px solid #ffe58f;border-radius:6px;padding:8px 12px;font-size:12px;color:#613400;margin-bottom:14px;display:flex;align-items:center;gap:6px">
+        <i class="ti ti-info-circle"></i>仅支持修改「状态」和「服务终止时间」，其他字段不可更改。
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>产品分类</label>
+          <input type="text" value="异地用工" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>产品名称</label>
+          <input type="text" value="岗位外包" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>业务负责人</label>
+          <input type="text" value="李玲玲" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>对接人</label>
+          <input type="text" value="李明" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item">
+          <label>订购时间</label>
+          <input type="text" value="2026-06-15" readonly style="background:#fafafa;color:#8c8c8c">
+        </div>
+        <div class="form-item">
+          <label>状态<span class="req">*</span></label>
+          <select>
+            <option>服务中</option><option>已终止</option><option>暂停</option>
+          </select>
+        </div>
+      </div>
+      <div class="form-item">
+        <label>服务终止时间</label>
+        <input type="date" placeholder="状态为已终止时填写">
+      </div>
+      <div class="form-item">
+        <label>备注</label>
+        <input type="text" value="月度结算" placeholder="请输入备注">
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal('modal-edit')">取消</button>
+      <button class="btn btn-primary">保存修改</button>
+    </div>
+  </div>
+</div>
+
+<!-- 删除确认弹窗 -->
+<div class="modal-overlay" id="modal-delete">
+  <div class="modal" style="width:420px">
+    <div class="modal-header">
+      <span class="modal-title" style="display:flex;align-items:center;gap:6px">
+        <i class="ti ti-alert-triangle" style="color:#cf1322;font-size:18px"></i>确认删除服务记录
+      </span>
+      <i class="ti ti-x modal-close" onclick="hideModal('modal-delete')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="background:#fff1f0;border:1px solid #ffa39e;border-radius:6px;padding:12px 14px;font-size:13px;color:#cf1322;line-height:1.8;display:flex;gap:8px">
+        <i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px;font-size:16px"></i>
+        <span>删除后，该记录产生的佣金将<b>不再给对接人</b>，此操作不可撤销，请确认后再继续。</span>
+      </div>
+      <div style="margin-top:14px;font-size:13px;color:#595959;display:flex;flex-direction:column;gap:6px">
+        <div style="display:flex;gap:8px"><span style="color:#8c8c8c;width:72px;text-align:right;flex-shrink:0">产品名称</span><b>岗位外包</b></div>
+        <div style="display:flex;gap:8px"><span style="color:#8c8c8c;width:72px;text-align:right;flex-shrink:0">对接人</span><span>李明</span></div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal('modal-delete')">取消</button>
+      <button class="btn" style="background:#cf1322;color:#fff;border-color:#cf1322" onclick="hideModal('modal-delete')">
+        <i class="ti ti-trash"></i>确认删除
+      </button>
+    </div>
+  </div>
+</div>
+<script>
+function showModal(id){ document.getElementById(id).classList.add('show'); }
+function hideModal(id){ document.getElementById(id).classList.remove('show'); }
+
+const productMap = {
+  '异地用工':['岗位外包','劳务派遣','企业员工社保代缴'],
+  '财税服务':['代理记账','税务筹划','财务咨询'],
+  '人事代理':['社保公积金托管','人事外包'],
+  '智能工资条':['智能工资条']
+};
+const ownerMap = {
+  '岗位外包':'李玲玲','劳务派遣':'李玲玲','企业员工社保代缴':'李玲玲',
+  '代理记账':'问贝','税务筹划':'问贝','财务咨询':'问贝',
+  '社保公积金托管':'郭欢','人事外包':'郭欢','智能工资条':'张美玉'
+};
+function filterProducts(cat){
+  const sel=document.getElementById('sel-product');
+  sel.innerHTML='<option value="">请选择</option>';
+  (productMap[cat]||[]).forEach(p=>{const o=document.createElement('option');o.value=p;o.textContent=p;sel.appendChild(o);});
+  document.getElementById('inp-owner').value='';
+}
+document.getElementById('sel-product').addEventListener('change',function(){
+  document.getElementById('inp-owner').value=ownerMap[this.value]||'';
+});
+function switchTab(el){
+  document.querySelectorAll('.enterprise-tab').forEach(x=>x.classList.remove('active'));
+  el.classList.add('active');
+}
+</script>
+</body>
+</html>

HTML原型/lead_management_v2.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>商机管理</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+.layout{display:flex;height:100vh}
+.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
+.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
+.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
+.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+.main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
+.page{display:none;flex:1;flex-direction:column;overflow-y:auto}
+.page.active{display:flex}
+.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
+.page-title{font-size:15px;font-weight:600}
+.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-sm{padding:3px 9px;font-size:11px}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
+.btn-link+.btn-link{margin-left:8px}
+.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 24px;flex-shrink:0}
+.filter-grid{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
+.filter-item{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px}
+.filter-item label{color:#8c8c8c}
+.filter-item input,.filter-item select{height:28px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:110px}
+.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
+.filter-btns{margin-left:auto;display:flex;gap:6px}
+.content{padding:16px 24px;flex:1}
+.status-bar{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;flex-shrink:0;display:flex}
+.status-tab{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
+.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:12px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:9px 10px;vertical-align:middle}
+.cell-sub{font-size:11px;color:#bfbfbf;margin-top:2px}
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-cyan{background:#e6fffb;color:#08979c;border-color:#87e8de}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+.tag-gold{background:#fffbe6;color:#d48806;border-color:#ffe58f}
+.tag-purple{background:#f9f0ff;color:#531dab;border-color:#d3adf7}
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:flex-start;justify-content:center;padding:32px 0;overflow-y:auto}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:580px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden;margin:auto}
+.modal-sm{width:440px}
+.modal-lg{width:700px}
+.modal-header{padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;background:#fff}
+.modal-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:18px 20px;max-height:72vh;overflow-y:auto}
+.modal-footer{padding:10px 20px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0;background:#fff}
+.form-sec{margin-bottom:16px}
+.form-sec-title{font-size:12px;font-weight:500;color:#8c8c8c;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #f5f5f5;display:flex;align-items:center;gap:4px}
+.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
+.form-row.full{grid-template-columns:1fr;margin-bottom:10px}
+.form-item{display:flex;flex-direction:column;gap:4px}
+.form-item label{font-size:12px;color:#595959}
+.req{color:#cf1322;margin-left:2px}
+.form-item input,.form-item select,.form-item textarea{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff;width:100%}
+.form-item input:focus,.form-item select:focus{border-color:#1677ff}
+.form-item textarea{height:64px;padding:7px 10px;resize:none}
+.form-item textarea:focus{border-color:#1677ff}
+.ro{background:#fafafa !important;color:#8c8c8c !important}
+.alert-box{border-radius:6px;padding:9px 12px;font-size:12px;display:flex;gap:6px;margin-bottom:10px}
+.alert-red{background:#fff1f0;border:1px solid #ffa39e;color:#820014}
+.alert-blue{background:#e8f4ff;border:1px solid #91caff;color:#0958d9}
+.alert-yellow{background:#fffbe6;border:1px solid #ffe58f;color:#613400}
+.detail-row{display:flex;font-size:13px;padding:7px 0;border-bottom:1px solid #f5f5f5}
+.detail-row:last-child{border-bottom:none}
+.dl{width:90px;flex-shrink:0;color:#8c8c8c;text-align:right;padding-right:12px;line-height:1.6}
+.dv{flex:1;color:#1a1a1a;line-height:1.6}
+.log-item{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid #f5f5f5}
+.log-item:last-child{border-bottom:none}
+.log-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px;background:#1677ff}
+.log-text{font-size:13px;color:#1a1a1a;line-height:1.6}
+.log-meta{font-size:11px;color:#bfbfbf;margin-top:2px}
+</style>
+</head>
+<body>
+<div class="layout">
+<div class="sidebar">
+  <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
+  <div class="nav-group">合伙人管理</div>
+  <div class="nav-item">合伙人管理列表</div>
+  <div class="nav-group">商机管理</div>
+  <div class="nav-item active" onclick="switchPage('leads',this)">商机管理列表</div>
+  <div class="nav-group">佣金结算</div>
+  <div class="nav-item">合伙人佣金结算</div>
+  <div class="nav-item">渠道管理员佣金结算</div>
+  <div class="nav-item">对接人佣金结算</div>
+</div>
+
+<div class="main">
+<div id="page-leads" class="page active">
+  <div class="page-header">
+    <span class="page-title">商机管理列表</span>
+    <div style="display:flex;gap:8px">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn btn-primary" onclick="openAddModal()"><i class="ti ti-plus"></i>新增商机</button>
+    </div>
+  </div>
+  <div class="filter-wrap">
+    <div class="filter-grid">
+      <div class="filter-item"><label>客户名称</label><input type="text" id="f-customer" placeholder="请输入"></div>
+      <div class="filter-item"><label>产品名称</label><input type="text" id="f-product" placeholder="请输入"></div>
+      <div class="filter-item"><label>合伙人</label><input type="text" id="f-partner" placeholder="姓名/手机号"></div>
+      <div class="filter-item"><label>对接人</label><select id="f-assignee"><option value="">全部</option><option>李明</option><option>赵磊</option><option>刘婷</option><option>王芳</option></select></div>
+      <div class="filter-item"><label>商机来源</label><select id="f-source"><option value="">全部</option><option>合伙人添加</option><option>落地页扫码</option><option>后台添加</option></select></div>
+      <div class="filter-btns">
+        <button class="btn btn-primary btn-sm" onclick="renderLeads('')"><i class="ti ti-search"></i>查询</button>
+        <button class="btn btn-sm" onclick="resetF()"><i class="ti ti-refresh"></i>重置</button>
+      </div>
+    </div>
+  </div>
+  <div class="status-bar" id="status-bar">
+    <div class="status-tab active" onclick="renderLeads('待审核',this)">待审核 (2)</div>
+    <div class="status-tab" onclick="renderLeads('待分配',this)">待分配 (1)</div>
+    <div class="status-tab" onclick="renderLeads('跟进中',this)">跟进中 (2)</div>
+    <div class="status-tab" onclick="renderLeads('暂时挂起',this)">暂时挂起 (1)</div>
+    <div class="status-tab" onclick="renderLeads('已成单',this)">已成单 (2)</div>
+    <div class="status-tab" onclick="renderLeads('已作废',this)">已作废 (0)</div>
+    <div class="status-tab" onclick="renderLeads('',this)">全部 (8)</div>
+  </div>
+  <div class="content">
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th>创建时间</th><th>更新时间</th>
+            <th>客户信息</th><th>产品名称</th>
+            <th>关联企业</th>
+            <th>合伙人</th><th>对接人</th><th>渠道管理员</th>
+            <th>商机来源</th><th>状态</th><th>操作</th>
+          </tr>
+        </thead>
+        <tbody id="lead-tbody"></tbody>
+      </table>
+      <div class="pagination">
+        <span id="lead-count">共 8 条</span>
+        <div style="display:flex;gap:4px">
+          <div class="page-btn"><i class="ti ti-chevron-left"></i></div>
+          <div class="page-btn active">1</div>
+          <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+</div>
+
+<!-- 新增商机弹窗（后台添加模式） -->
+<div class="modal-overlay" id="modal-add">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#1677ff"><i class="ti ti-plus"></i>新增商机（后台添加）</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-add')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="form-sec">
+        <div class="form-sec-title"><i class="ti ti-building"></i>关联企业（必填）</div>
+        <div class="form-row full">
+          <div class="form-item">
+            <label>选择企业<span class="req">*</span></label>
+            <select id="add-enterprise" onchange="onEnterpriseChange(this.value)">
+              <option value="">请搜索/选择已有企业</option>
+              <option value="远航科技有限公司">远航科技有限公司</option>
+              <option value="启航教育咨询">启航教育咨询</option>
+              <option value="锦绣餐饮集团">锦绣餐饮集团</option>
+              <option value="新桥律师事务所">新桥律师事务所</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="form-sec">
+        <div class="form-sec-title"><i class="ti ti-package"></i>产品信息</div>
+        <div class="form-row">
+          <div class="form-item">
+            <label>产品分类<span class="req">*</span></label>
+            <select onchange="updateProductsAdd(this.value)">
+              <option value="">请选择</option>
+              <option>异地用工</option><option>财税服务</option><option>人事代理</option><option>AI获客</option>
+            </select>
+          </div>
+          <div class="form-item">
+            <label>产品名称<span class="req">*</span></label>
+            <select id="add-product-sel" onchange="checkBackendDup()"><option value="">请先选择分类</option></select>
+          </div>
+        </div>
+      </div>
+      <div id="backend-dup-alert" style="display:none" class="alert-box alert-red">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>该企业下此产品已有<b>进行中</b>的商机（状态：<b id="dup-status-text">跟进中</b>），将刷新该商机的更新时间，不新建商机。</span>
+      </div>
+      <div id="backend-auto-alert" style="display:none" class="alert-box alert-blue">
+        <i class="ti ti-user-check" style="flex-shrink:0;margin-top:1px"></i>
+        <span>在对接人分配表中查询到匹配记录，已自动带入对接人：<b id="auto-name-text">—</b></span>
+      </div>
+      <div class="form-sec">
+        <div class="form-sec-title"><i class="ti ti-user-check"></i>对接人（必填）</div>
+        <div class="form-row full">
+          <div class="form-item">
+            <label>选择对接人<span class="req">*</span></label>
+            <select id="add-assignee-sel">
+              <option value="">请选择</option>
+              <option>李明 · 销售部</option><option>赵磊 · 销售部</option><option>刘婷 · 综合服务部</option><option>王芳 · 财税部</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <div class="form-sec" style="margin-bottom:0">
+        <div class="form-sec-title"><i class="ti ti-info-circle"></i>其他信息</div>
+        <div class="form-row">
+          <div class="form-item"><label>客户联系人</label><input type="text" placeholder="姓名 / 手机号"></div>
+          <div class="form-item"><label>合伙人<span class="req">*</span></label>
+            <select><option>李鹏飞</option><option>张伟</option><option>王芳</option></select>
+          </div>
+        </div>
+        <div class="form-row full">
+          <div class="form-item"><label>需求描述</label><textarea placeholder="选填"></textarea></div>
+        </div>
+        <div class="form-row">
+          <div class="form-item"><label>商机来源</label><input class="ro" value="后台添加" readonly></div>
+          <div class="form-item"><label>渠道管理员</label><input class="ro" value="王利娟" readonly></div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-add')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-add')"><i class="ti ti-check"></i>确认新增</button>
+    </div>
+  </div>
+</div>
+
+<!-- 关联已有企业弹窗 -->
+<div class="modal-overlay" id="modal-link-enterprise">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#1677ff"><i class="ti ti-link"></i>关联已有企业</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-link-enterprise')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="margin-bottom:10px">
+        <input type="text" placeholder="搜索企业名称..." style="width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none">
+      </div>
+      <div style="background:#fafafa;border:1px solid #e8e8e8;border-radius:6px;overflow:hidden">
+        <div style="padding:8px 12px;background:#f0f0f0;font-size:12px;color:#8c8c8c;display:flex;gap:16px">
+          <span style="flex:2">企业名称</span><span style="flex:1">客户类型</span><span style="flex:1">所在城市</span><span style="width:60px">操作</span>
+        </div>
+        <div style="padding:9px 12px;border-top:1px solid #f5f5f5;display:flex;gap:16px;font-size:13px;align-items:center">
+          <span style="flex:2;font-weight:500">锦绣餐饮集团</span><span style="flex:1"><span class="tag tag-blue">合伙人客户</span></span><span style="flex:1;color:#8c8c8c">北京市</span>
+          <button class="btn btn-sm btn-primary" style="width:60px" onclick="closeModal('modal-link-enterprise')">关联</button>
+        </div>
+        <div style="padding:9px 12px;border-top:1px solid #f5f5f5;display:flex;gap:16px;font-size:13px;align-items:center">
+          <span style="flex:2;font-weight:500">新桥律师事务所</span><span style="flex:1"><span class="tag tag-blue">合伙人客户</span></span><span style="flex:1;color:#8c8c8c">上海市</span>
+          <button class="btn btn-sm btn-primary" style="width:60px" onclick="closeModal('modal-link-enterprise')">关联</button>
+        </div>
+        <div style="padding:9px 12px;border-top:1px solid #f5f5f5;display:flex;gap:16px;font-size:13px;align-items:center">
+          <span style="flex:2;font-weight:500">蓝海投资管理公司</span><span style="flex:1"><span class="tag tag-blue">合伙人客户</span></span><span style="flex:1;color:#8c8c8c">广州市</span>
+          <button class="btn btn-sm btn-primary" style="width:60px" onclick="closeModal('modal-link-enterprise')">关联</button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-link-enterprise')">取消</button>
+    </div>
+  </div>
+</div>
+
+<!-- 创建企业弹窗（商机信息预填） -->
+<div class="modal-overlay" id="modal-create-enterprise">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#389e0d"><i class="ti ti-building-plus"></i>新建企业客户</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-create-enterprise')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="alert-box alert-blue" style="margin-bottom:12px">
+        <i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>已从商机中预填企业名称和联系人，请补充完整后创建。</span>
+      </div>
+      <div class="form-row">
+        <div class="form-item"><label>企业全称<span class="req">*</span></label><input type="text" id="ce-name" value=""></div>
+        <div class="form-item"><label>统一社会信用代码</label><input type="text" placeholder="选填"></div>
+      </div>
+      <div class="form-row">
+        <div class="form-item"><label>客户来源类型<span class="req">*</span></label>
+          <select><option value="partner" selected>合伙人客户</option><option value="direct">直销客户</option></select>
+        </div>
+        <div class="form-item"><label>关联合伙人<span class="req">*</span></label>
+          <select><option>李鹏飞</option><option>华盛机构</option><option>王芳</option></select>
+        </div>
+      </div>
+      <div class="form-row">
+        <div class="form-item"><label>联系人</label><input type="text" id="ce-contact" value=""></div>
+        <div class="form-item"><label>注册地所属城市</label><input type="text" placeholder="省/市"></div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-create-enterprise')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-create-enterprise')"><i class="ti ti-check"></i>创建企业</button>
+    </div>
+  </div>
+</div>
+
+<!-- 状态流转弹窗 -->
+<div class="modal-overlay" id="modal-flow">
+  <div class="modal modal-sm">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#1677ff"><i class="ti ti-arrows-exchange"></i>商机状态流转</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-flow')"></i>
+    </div>
+    <div class="modal-body" id="flow-body"></div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-flow')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-flow')"><i class="ti ti-check"></i>确认</button>
+    </div>
+  </div>
+</div>
+
+<!-- 分配对接人弹窗 -->
+<div class="modal-overlay" id="modal-assign">
+  <div class="modal modal-sm">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#fa8c16"><i class="ti ti-user-plus"></i>分配对接人</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-assign')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="form-row">
+        <div class="form-item"><label>客户名称</label><input class="ro" id="asgn-customer" readonly></div>
+        <div class="form-item"><label>产品名称</label><input class="ro" id="asgn-product" readonly></div>
+      </div>
+      <div class="form-item" style="margin-bottom:10px">
+        <label>选择对接人<span class="req">*</span> <span style="font-size:11px;color:#8c8c8c">（限该产品配置的对接人）</span></label>
+        <select><option value="">请选择...</option><option>李明 · 销售部</option><option>赵磊 · 销售部</option><option>刘婷 · 综合服务部</option><option>王芳 · 财税部</option></select>
+      </div>
+      <div class="alert-box alert-blue">
+        <i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>分配完成后，需关联企业才会将信息写入对接人分配表。</span>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-assign')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-assign')"><i class="ti ti-check"></i>确认分配</button>
+    </div>
+  </div>
+</div>
+
+<!-- 商机详情弹窗 -->
+<div class="modal-overlay" id="modal-detail">
+  <div class="modal modal-lg">
+    <div class="modal-header">
+      <span class="modal-title" style="color:#1677ff"><i class="ti ti-clipboard-list"></i>商机详情</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-detail')"></i>
+    </div>
+    <div class="modal-body" id="detail-body"></div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-detail')">关闭</button>
+      <button class="btn btn-primary" id="detail-flow-btn">流转状态</button>
+    </div>
+  </div>
+</div>
+
+<!-- 操作日志弹窗 -->
+<div class="modal-overlay" id="modal-log">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-history"></i>商机操作日志</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-log')"></i>
+    </div>
+    <div class="modal-body" id="log-body"></div>
+    <div class="modal-footer"><button class="btn" onclick="closeModal('modal-log')">关闭</button></div>
+  </div>
+</div>
+
+<script>
+var LEADS = [
+  { id:'LM001', created:'2026-06-22 09:14', updated:'2026-06-23 10:05',
+    customer:'远航科技有限公司', contact:'张总', phone:'138****5566',
+    product:'岗位外包', catg:'异地用工',
+    enterprise:'远航科技有限公司',
+    partner:'李鹏飞/158****0129', assignee:'李明', channel:'王利娟',
+    source:'合伙人添加', status:'跟进中',
+    logs:[
+      {time:'2026-06-23 10:05',user:'李明（对接人）',action:'状态流转',detail:'待分配 → 跟进中，备注：已电话沟通，客户有意向'},
+      {time:'2026-06-22 15:30',user:'王利娟（渠道管理员）',action:'分配对接人',detail:'分配对接人：李明；已关联企业，信息写入对接人分配表'},
+      {time:'2026-06-22 12:00',user:'王利娟（渠道管理员）',action:'关联企业',detail:'关联企业：远航科技有限公司'},
+      {time:'2026-06-22 09:20',user:'王利娟（渠道管理员）',action:'状态流转',detail:'待审核 → 待分配，核实属实'},
+      {time:'2026-06-22 09:14',user:'李鹏飞（合伙人）',action:'创建商机',detail:'合伙人在小程序报备，来源：合伙人添加'},
+    ]},
+  { id:'LM002', created:'2026-06-23 14:05', updated:'2026-06-23 14:05',
+    customer:'锦绣餐饮集团', contact:'王总', phone:'139****2211',
+    product:'三节福利采购', catg:'员工关怀',
+    enterprise:null,
+    partner:'华盛机构/15011348374', assignee:'—', channel:'王利娟',
+    source:'落地页扫码', status:'待分配',
+    logs:[
+      {time:'2026-06-23 14:10',user:'王利娟（渠道管理员）',action:'状态流转',detail:'待审核 → 待分配，核实属实'},
+      {time:'2026-06-23 14:05',user:'系统（落地页）',action:'创建商机',detail:'客户通过落地页扫码留咨，关联合伙人：华盛机构'},
+    ]},
+  { id:'LM003', created:'2026-06-20 11:30', updated:'2026-06-21 09:00',
+    customer:'启航教育咨询', contact:'李经理', phone:'135****4411',
+    product:'代理记账', catg:'财税服务',
+    enterprise:'启航教育咨询',
+    partner:'李鹏飞/158****0129', assignee:'赵磊', channel:'王利娟',
+    source:'合伙人添加', status:'已成单',
+    logs:[
+      {time:'2026-06-21 09:00',user:'赵磊（对接人）',action:'状态流转',detail:'跟进中 → 已成单，客户签约'},
+      {time:'2026-06-20 14:00',user:'赵磊（对接人）',action:'状态流转',detail:'待分配 → 跟进中'},
+      {time:'2026-06-20 13:50',user:'王利娟（渠道管理员）',action:'分配对接人',detail:'分配对接人：赵磊；已关联企业，信息写入对接人分配表'},
+      {time:'2026-06-20 12:00',user:'王利娟（渠道管理员）',action:'状态流转',detail:'待审核 → 待分配'},
+      {time:'2026-06-20 11:30',user:'李鹏飞（合伙人）',action:'创建商机',detail:'合伙人在小程序报备，来源：合伙人添加'},
+    ]},
+  { id:'LM004', created:'2026-06-18 15:22', updated:'2026-06-19 08:30',
+    customer:'蓝海投资管理公司', contact:'陈总', phone:'151****2216',
+    product:'劳务派遣', catg:'异地用工',
+    enterprise:'蓝海投资管理公司',
+    partner:'李鹏飞/158****0129', assignee:'李明', channel:'王利娟',
+    source:'后台添加', status:'暂时挂起',
+    logs:[
+      {time:'2026-06-19 08:30',user:'李明（对接人）',action:'状态流转',detail:'跟进中 → 暂时挂起，原因：客户暂缓决策，1个月后跟进'},
+      {time:'2026-06-18 16:00',user:'李明（对接人）',action:'状态流转',detail:'待分配 → 跟进中'},
+      {time:'2026-06-18 15:50',user:'王利娟（渠道管理员）',action:'分配对接人',detail:'分配对接人：李明；已关联企业，信息写入对接人分配表'},
+      {time:'2026-06-18 15:30',user:'王利娟（渠道管理员）',action:'状态流转',detail:'待审核 → 待分配'},
+      {time:'2026-06-18 15:22',user:'王利娟（渠道管理员）',action:'创建商机',detail:'后台手动新增，来源：后台添加'},
+    ]},
+  { id:'LM006', created:'2026-06-24 09:22', updated:'2026-06-24 09:22',
+    customer:'新桥律师事务所', contact:'周律', phone:'150****7788',
+    product:'税务筹划', catg:'财税服务',
+    enterprise:null,
+    partner:'王芳/136****8541', assignee:'—', channel:'王利娟',
+    source:'合伙人添加', status:'待审核',
+    logs:[{time:'2026-06-24 09:22',user:'王芳（合伙人）',action:'创建商机',detail:'合伙人在小程序报备，来源：合伙人添加'}]},
+  { id:'LM007', created:'2026-06-24 10:55', updated:'2026-06-24 10:55',
+    customer:'中兴建材集团', contact:'马总', phone:'166****8880',
+    product:'企业员工社保代缴', catg:'异地用工',
+    enterprise:null,
+    partner:'李鹏飞/158****0129', assignee:'—', channel:'王利娟',
+    source:'落地页扫码', status:'待审核',
+    logs:[{time:'2026-06-24 10:55',user:'系统（落地页）',action:'创建商机',detail:'客户通过落地页扫码留咨，关联合伙人：李鹏飞'}]},
+  { id:'LM005', created:'2026-06-15 10:10', updated:'2026-06-16 14:20',
+    customer:'顺达物流有限公司', contact:'吴总', phone:'137****3269',
+    product:'社保公积金托管', catg:'人事代理',
+    enterprise:'顺达物流有限公司',
+    partner:'赛晓丽/137****3269', assignee:'王芳', channel:'王利娟',
+    source:'落地页扫码', status:'已成单',
+    logs:[
+      {time:'2026-06-16 14:20',user:'王芳（对接人）',action:'状态流转',detail:'跟进中 → 已成单'},
+      {time:'2026-06-15 11:00',user:'王利娟（渠道管理员）',action:'分配对接人',detail:'分配对接人：王芳；已关联企业，信息写入对接人分配表'},
+      {time:'2026-06-15 10:10',user:'系统（落地页）',action:'创建商机',detail:'客户通过落地页扫码留咨，关联合伙人：赛晓丽'},
+    ]},
+  { id:'LM008', created:'2026-06-17 11:00', updated:'2026-06-20 16:00',
+    customer:'云端科技股份公司', contact:'黄总', phone:'151****2215',
+    product:'AI获客工具', catg:'AI获客',
+    enterprise:'云端科技股份公司',
+    partner:'张情/166****8880', assignee:'刘婷', channel:'王利娟',
+    source:'后台添加', status:'跟进中',
+    logs:[
+      {time:'2026-06-17 14:00',user:'刘婷（对接人）',action:'状态流转',detail:'待分配 → 跟进中'},
+      {time:'2026-06-17 13:00',user:'王利娟（渠道管理员）',action:'分配对接人',detail:'分配对接人：刘婷；已关联企业，信息写入对接人分配表'},
+      {time:'2026-06-17 11:30',user:'王利娟（渠道管理员）',action:'状态流转',detail:'待审核 → 待分配'},
+      {time:'2026-06-17 11:00',user:'王利娟（渠道管理员）',action:'创建商机',detail:'后台手动新增，来源：后台添加'},
+    ]},
+];
+
+var ST = {'待审核':'tag-orange','待分配':'tag-blue','跟进中':'tag-cyan','已成单':'tag-green','暂时挂起':'tag-gold','已作废':'tag-gray'};
+var SR = {'合伙人添加':'tag-purple','落地页扫码':'tag-blue','后台添加':'tag-gray'};
+var ACTIVE = ['待审核','待分配','跟进中','暂时挂起'];
+var OPS = {
+  '待审核':{ops:['核实属实 → 待分配','核实不实 → 已作废'],role:'渠道管理员',needReason:false},
+  '待分配':{ops:['作废 → 已作废'],role:'渠道管理员',needReason:false},
+  '跟进中':{ops:['标记成单 → 已成单','暂时挂起（需填写原因）','作废 → 已作废'],role:'对接人',needReason:false},
+  '暂时挂起':{ops:['重新跟进 → 跟进中','作废 → 已作废'],role:'对接人',needReason:false},
+};
+var ASSIGN_TABLE = {
+  '远航科技有限公司_岗位外包':'李明',
+  '启航教育咨询_代理记账':'赵磊',
+  '顺达物流有限公司_社保公积金托管':'王芳',
+  '云端科技股份公司_AI获客工具':'刘婷',
+};
+var PRODUCTS = {'异地用工':['岗位外包','劳务派遣','企业员工社保代缴'],'财税服务':['代理记账','税务筹划'],'人事代理':['社保公积金托管','人事外包'],'AI获客':['AI获客工具']};
+
+var curFilter = '';
+function renderLeads(status, el) {
+  if (status !== undefined) curFilter = status;
+  if (el) { document.querySelectorAll('#status-bar .status-tab').forEach(function(t){t.classList.remove('active');}); el.classList.add('active'); }
+  var list = LEADS.filter(function(d) {
+    if (curFilter && d.status !== curFilter) return false;
+    var fc=document.getElementById('f-customer'); if(fc&&fc.value&&d.customer.indexOf(fc.value)<0) return false;
+    var fp=document.getElementById('f-product'); if(fp&&fp.value&&d.product.indexOf(fp.value)<0) return false;
+    var fa=document.getElementById('f-assignee'); if(fa&&fa.value&&d.assignee!==fa.value) return false;
+    var fs=document.getElementById('f-source'); if(fs&&fs.value&&d.source!==fs.value) return false;
+    return true;
+  });
+  document.getElementById('lead-count').textContent = '共 '+list.length+' 条';
+  document.getElementById('lead-tbody').innerHTML = list.map(function(d) {
+    var entCell;
+    if (d.enterprise) {
+      entCell = '<a style="color:#1677ff;cursor:pointer;text-decoration:none" onclick="alert(\'打开企业详情：\'+\''+d.enterprise+'\')">'
+        + d.enterprise + ' <i class="ti ti-external-link" style="font-size:11px"></i></a>';
+    } else {
+      entCell = '<button class="btn-link" style="color:#fa8c16" onclick="openLinkEnt(\''+d.id+'\')">关联</button>'
+        + ' / <button class="btn-link" onclick="openCreateEnt(\''+d.id+'\')">新增</button>';
+    }
+    var ops = '<button class="btn-link" onclick="openDetail(\''+d.id+'\')">详情</button>';
+    if (d.status === '待分配') ops += '<button class="btn-link" onclick="openAssign(\''+d.id+'\')">分配</button>';
+    if (OPS[d.status]) ops += '<button class="btn-link" onclick="openFlow(\''+d.id+'\')">流转</button>';
+    ops += '<button class="btn-link" onclick="openLog(\''+d.id+'\')">日志</button>';
+    return '<tr>'
+      +'<td><span style="font-size:12px;color:#8c8c8c">'+d.created+'</span></td>'
+      +'<td><span style="font-size:12px;color:#8c8c8c">'+d.updated+'</span></td>'
+      +'<td><div style="font-weight:500">'+d.customer+'</div><div class="cell-sub">'+d.contact+' '+d.phone+'</div></td>'
+      +'<td>'+d.product+'<div class="cell-sub">'+d.catg+'</div></td>'
+      +'<td style="font-size:12px">'+entCell+'</td>'
+      +'<td style="font-size:12px">'+d.partner+'</td>'
+      +'<td>'+(d.assignee==='—'?'<span style="color:#bfbfbf">待分配</span>':'<span style="color:#1677ff">'+d.assignee+'</span>')+'</td>'
+      +'<td style="color:#1677ff">'+d.channel+'</td>'
+      +'<td><span class="tag '+SR[d.source]+'">'+d.source+'</span></td>'
+      +'<td><span class="tag '+ST[d.status]+'">'+d.status+'</span></td>'
+      +'<td>'+ops+'</td>'
+      +'</tr>';
+  }).join('') || '<tr><td colspan="11" style="text-align:center;color:#bfbfbf;padding:36px 0">暂无数据</td></tr>';
+}
+function resetF() {
+  ['f-customer','f-product','f-assignee','f-source'].forEach(function(id){ var e=document.getElementById(id);if(e)e.value=''; });
+  renderLeads('');
+}
+
+function openAddModal() { openModal('modal-add'); }
+function updateProductsAdd(cat) {
+  var sel=document.getElementById('add-product-sel');
+  sel.innerHTML='<option value="">请选择</option>';
+  (PRODUCTS[cat]||[]).forEach(function(p){var o=document.createElement('option');o.value=p;o.textContent=p;sel.appendChild(o);});
+  checkBackendDup();
+}
+function onEnterpriseChange(ent) { checkBackendDup(); }
+function checkBackendDup() {
+  var ent = document.getElementById('add-enterprise').value;
+  var prod = document.getElementById('add-product-sel').value;
+  var dupEl = document.getElementById('backend-dup-alert');
+  var autoEl = document.getElementById('backend-auto-alert');
+  var autoName = document.getElementById('auto-name-text');
+  var asgnSel = document.getElementById('add-assignee-sel');
+  if (!ent || !prod) { dupEl.style.display='none'; autoEl.style.display='none'; return; }
+  var dup = LEADS.some(function(d){ return d.enterprise===ent && d.product===prod && ACTIVE.indexOf(d.status)>=0; });
+  dupEl.style.display = dup ? '' : 'none';
+  if (dup) { var ds=LEADS.find(function(d){return d.enterprise===ent&&d.product===prod&&ACTIVE.indexOf(d.status)>=0;}); document.getElementById('dup-status-text').textContent=ds?ds.status:'进行中'; }
+  var key = ent+'_'+prod;
+  var hit = ASSIGN_TABLE[key];
+  autoEl.style.display = (!dup && hit) ? '' : 'none';
+  if (hit) { autoName.textContent=hit; for(var i=0;i<asgnSel.options.length;i++){if(asgnSel.options[i].text.indexOf(hit)>=0){asgnSel.selectedIndex=i;break;}} }
+}
+
+function openLinkEnt(id) { openModal('modal-link-enterprise'); }
+function openCreateEnt(id) {
+  var d = LEADS.find(function(x){return x.id===id;});
+  if(d){ document.getElementById('ce-name').value=d.customer; document.getElementById('ce-contact').value=d.contact+' '+d.phone; }
+  openModal('modal-create-enterprise');
+}
+
+function openAssign(id) {
+  var d=LEADS.find(function(x){return x.id===id;}); if(!d)return;
+  document.getElementById('asgn-customer').value=d.customer;
+  document.getElementById('asgn-product').value=d.product;
+  openModal('modal-assign');
+}
+
+function openFlow(id) {
+  var d=LEADS.find(function(x){return x.id===id;}); if(!d||!OPS[d.status])return;
+  var info=OPS[d.status];
+  var html='<div style="margin-bottom:10px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">'
+    +'<span style="color:#8c8c8c">当前状态：</span><span class="tag '+ST[d.status]+'">'+d.status+'</span>'
+    +'<span style="color:#8c8c8c;margin-left:8px">操作人：</span><span style="color:#1677ff">'+info.role+'</span></div>'
+    +(d.status==='待分配'?'<div class="alert-box alert-blue" style="margin-bottom:10px"><i class="ti ti-info-circle" style="flex-shrink:0;margin-top:1px"></i><span>待分配状态请通过「分配」按钮操作，分配后自动流转为跟进中。</span></div>':'')
+    +'<div style="display:flex;flex-direction:column;gap:8px" id="flow-ops">'+info.ops.map(function(op,i){
+      var needR = op.indexOf('挂起')>=0;
+      return '<label style="display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #e8e8e8;border-radius:6px;cursor:pointer;font-size:13px">'
+        +'<input type="radio" name="fop" value="'+i+'" style="accent-color:#1677ff" onchange="toggleReason('+needR+')">'
+        +'<span>'+op+'</span></label>';
+    }).join('')+'</div>'
+    +'<div id="reason-wrap" style="display:none;margin-top:12px">'
+    +'<div style="font-size:12px;color:#595959;margin-bottom:4px">挂起原因 <span style="color:#cf1322">*</span></div>'
+    +'<textarea style="width:100%;height:60px;border:1px solid #d9d9d9;border-radius:6px;padding:7px 10px;font-size:13px;resize:none;outline:none" placeholder="请填写暂时挂起的原因（必填）"></textarea></div>'
+    +'<div style="margin-top:12px"><div style="font-size:12px;color:#595959;margin-bottom:4px">跟进备注（选填）</div>'
+    +'<textarea style="width:100%;height:52px;border:1px solid #d9d9d9;border-radius:6px;padding:7px 10px;font-size:13px;resize:none;outline:none" placeholder="填写跟进情况"></textarea></div>';
+  document.getElementById('flow-body').innerHTML=html;
+  openModal('modal-flow');
+}
+function toggleReason(show) { document.getElementById('reason-wrap').style.display = show ? '' : 'none'; }
+
+function openDetail(id) {
+  var d=LEADS.find(function(x){return x.id===id;}); if(!d)return;
+  var entTxt = d.enterprise ? '<a style="color:#1677ff">'+d.enterprise+' <i class="ti ti-external-link" style="font-size:11px"></i></a>' : '<span style="color:#bfbfbf">未关联</span>';
+  var html='<div style="display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:14px">'
+    +'<div>'
+    +'<div class="detail-row"><span class="dl">商机编号</span><span class="dv" style="color:#1677ff">'+d.id+'</span></div>'
+    +'<div class="detail-row"><span class="dl">创建时间</span><span class="dv">'+d.created+'</span></div>'
+    +'<div class="detail-row"><span class="dl">更新时间</span><span class="dv">'+d.updated+'</span></div>'
+    +'<div class="detail-row"><span class="dl">商机来源</span><span class="dv"><span class="tag '+SR[d.source]+'">'+d.source+'</span></span></div>'
+    +'<div class="detail-row"><span class="dl">当前状态</span><span class="dv"><span class="tag '+ST[d.status]+'">'+d.status+'</span></span></div>'
+    +'<div class="detail-row"><span class="dl">关联企业</span><span class="dv">'+entTxt+'</span></div>'
+    +'</div>'
+    +'<div>'
+    +'<div class="detail-row"><span class="dl">客户名称</span><span class="dv" style="font-weight:500">'+d.customer+'</span></div>'
+    +'<div class="detail-row"><span class="dl">联系信息</span><span class="dv">'+d.contact+' / '+d.phone+'</span></div>'
+    +'<div class="detail-row"><span class="dl">产品名称</span><span class="dv">'+d.product+'（'+d.catg+'）</span></div>'
+    +'<div class="detail-row"><span class="dl">合伙人</span><span class="dv">'+d.partner+'</span></div>'
+    +'<div class="detail-row"><span class="dl">对接人</span><span class="dv" style="color:#1677ff">'+d.assignee+'</span></div>'
+    +'<div class="detail-row"><span class="dl">渠道管理员</span><span class="dv" style="color:#1677ff">'+d.channel+'</span></div>'
+    +'</div></div>'
+    +'<div style="font-size:12px;font-weight:500;color:#8c8c8c;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #f5f5f5">操作日志</div>'
+    +d.logs.map(function(l){
+      return '<div class="log-item"><div class="log-dot"></div><div><div class="log-text"><b style="color:#595959">'+l.action+'</b>　'+l.detail+'</div><div class="log-meta">'+l.time+'　'+l.user+'</div></div></div>';
+    }).join('');
+  document.getElementById('detail-body').innerHTML=html;
+  var fb=document.getElementById('detail-flow-btn');
+  fb.style.display = OPS[d.status] ? '' : 'none';
+  fb.onclick = function(){closeModal('modal-detail');openFlow(id);};
+  openModal('modal-detail');
+}
+
+function openLog(id) {
+  var d=LEADS.find(function(x){return x.id===id;}); if(!d)return;
+  var html='<div style="font-size:13px;color:#595959;margin-bottom:12px">商机：<b>'+d.customer+' · '+d.product+'</b></div>'
+    +d.logs.map(function(l){
+      return '<div class="log-item"><div class="log-dot"></div><div><div class="log-text"><b style="color:#595959">'+l.action+'</b>　'+l.detail+'</div><div class="log-meta">'+l.time+'　'+l.user+'</div></div></div>';
+    }).join('');
+  document.getElementById('log-body').innerHTML=html;
+  openModal('modal-log');
+}
+
+function openModal(id){document.getElementById(id).classList.add('show');}
+function closeModal(id){document.getElementById(id).classList.remove('show');}
+function switchPage(key,el){
+  document.querySelectorAll('.page').forEach(function(p){p.classList.remove('active');});
+  document.querySelectorAll('.nav-item').forEach(function(n){n.classList.remove('active');});
+  document.getElementById('page-'+key).classList.add('active');
+  el.classList.add('active');
+}
+renderLeads('待审核');
+</script>
+</body>
+</html>

HTML原型/partner_detail (1).html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>合伙人管理详情</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 13px; color: #1a1a1a; background: #f5f6f8; }
+
+  .layout { display: flex; height: 100vh; overflow: hidden; }
+
+  .sidebar { width: 180px; background: #fff; border-right: 1px solid #e8e8e8; display: flex; flex-direction: column; flex-shrink: 0; }
+  .sidebar-logo { padding: 14px 16px; font-size: 13px; font-weight: 600; color: #1677ff; border-bottom: 1px solid #f0f0f0; }
+  .nav-group { padding: 8px 0; }
+  .nav-group-title { padding: 6px 16px 4px; font-size: 11px; color: #999; }
+  .nav-item { padding: 7px 16px; font-size: 13px; color: #595959; cursor: pointer; display: flex; align-items: center; gap: 6px; }
+  .nav-item:hover { background: #f5f5f5; color: #1677ff; }
+  .nav-item.active { background: #e8f0fe; color: #1677ff; font-weight: 500; }
+
+  .main { flex: 1; overflow-y: auto; }
+
+  .page-header { background: #fff; border-bottom: 1px solid #e8e8e8; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 52px; position: sticky; top: 0; z-index: 10; }
+  .page-title-row { display: flex; align-items: center; gap: 8px; }
+  .page-title { font-size: 15px; font-weight: 600; color: #1a1a1a; }
+  .status-badge { font-size: 11px; padding: 2px 8px; border-radius: 100px; background: #f6ffed; color: #389e0d; border: 1px solid #b7eb8f; }
+  .header-btns { display: flex; gap: 8px; }
+  .btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 6px; border: 1px solid #d9d9d9; background: #fff; font-size: 12px; cursor: pointer; color: #595959; transition: all .15s; white-space: nowrap; }
+  .btn:hover { border-color: #1677ff; color: #1677ff; }
+  .btn-danger { border-color: #ffa39e; color: #cf1322; }
+  .btn-danger:hover { background: #fff1f0; border-color: #ff4d4f; }
+  .btn-primary { background: #1677ff; color: #fff; border-color: #1677ff; }
+  .btn-primary:hover { background: #0958d9; border-color: #0958d9; }
+  .btn-success { background: #52c41a; color: #fff; border-color: #52c41a; }
+  .btn-success:hover { background: #389e0d; }
+  .btn-warning { background: #fa8c16; color: #fff; border-color: #fa8c16; font-weight: 500; }
+  .btn-warning:hover { background: #d46b08; border-color: #d46b08; }
+  .btn-locked { background: #f0f0f0; color: #bfbfbf; border-color: #d9d9d9; cursor: not-allowed; pointer-events: none; }
+
+  .content { padding: 16px 24px 32px; }
+
+  .card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
+  .card-header { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; background: #fafafa; display: flex; align-items: center; justify-content: space-between; }
+  .card-title { font-size: 13px; font-weight: 600; color: #1a1a1a; display: flex; align-items: center; gap: 6px; }
+  .card-title i { color: #1677ff; font-size: 15px; }
+  .card-body { padding: 14px 16px; }
+
+  .info-grid { display: grid; grid-template-columns: 1fr 1fr; }
+  .field-row { display: flex; align-items: baseline; padding: 5px 0; }
+  .field-label { width: 84px; flex-shrink: 0; font-size: 13px; color: #8c8c8c; text-align: right; padding-right: 10px; white-space: nowrap; }
+  .field-val { font-size: 13px; color: #1a1a1a; flex: 1; }
+
+  .intro-block { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 12px; overflow: hidden; }
+  .intro-header { padding: 10px 16px; border-bottom: 1px solid #f0f0f0; background: #fafafa; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
+  .intro-header i { color: #1677ff; font-size: 15px; }
+  .intro-body { display: flex; align-items: stretch; }
+  .intro-field { flex: 1; padding: 14px 16px; display: flex; align-items: center; }
+  .intro-field + .intro-field { border-left: 1px solid #f0f0f0; }
+  .intro-label { width: 90px; flex-shrink: 0; font-size: 13px; color: #8c8c8c; text-align: right; padding-right: 10px; white-space: nowrap; }
+  .intro-val { flex: 1; display: flex; align-items: center; gap: 8px; }
+
+  .tag { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 8px; border-radius: 100px; border: 1px solid; white-space: nowrap; }
+  .tag-gray { background: #fafafa; color: #595959; border-color: #d9d9d9; }
+  .tag-green { background: #f6ffed; color: #389e0d; border-color: #b7eb8f; }
+  .tag-orange { background: #fff7e6; color: #d46b08; border-color: #ffd591; }
+  .tag-blue { background: #e8f4ff; color: #1677ff; border-color: #91caff; }
+
+  .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+  .stat-item { background: #f8f9fc; border-radius: 6px; padding: 10px 14px; }
+  .stat-label { font-size: 12px; color: #8c8c8c; margin-bottom: 4px; }
+  .stat-val { font-size: 20px; font-weight: 600; color: #1a1a1a; }
+
+  .tabs { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
+  .tab-nav { display: flex; border-bottom: 1px solid #f0f0f0; padding: 0 16px; background: #fafafa; }
+  .tab-item { padding: 10px 14px; font-size: 13px; color: #8c8c8c; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
+  .tab-item.active { color: #1677ff; border-bottom-color: #1677ff; font-weight: 500; }
+  .tab-body { padding: 32px 16px; text-align: center; color: #bfbfbf; font-size: 13px; }
+  .tab-body i { font-size: 28px; display: block; margin-bottom: 8px; }
+
+  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100; align-items: center; justify-content: center; }
+  .modal-overlay.show { display: flex; }
+  .modal { background: #fff; border-radius: 8px; width: 420px; box-shadow: 0 8px 32px rgba(0,0,0,.15); overflow: hidden; }
+  .modal-header { padding: 14px 16px 12px; border-bottom: 1px solid #f0f0f0; display: flex; align-items: center; justify-content: space-between; }
+  .modal-title { font-size: 14px; font-weight: 600; }
+  .modal-close { font-size: 16px; color: #8c8c8c; cursor: pointer; }
+  .modal-close:hover { color: #1a1a1a; }
+  .modal-body { padding: 16px; }
+  .modal-row { display: flex; align-items: center; margin-bottom: 12px; font-size: 13px; }
+  .modal-row-label { width: 80px; color: #8c8c8c; text-align: right; padding-right: 10px; flex-shrink: 0; }
+  .modal-tip { background: #fffbe6; border: 1px solid #ffe58f; border-radius: 6px; padding: 10px 12px; font-size: 12px; color: #613400; line-height: 1.7; margin-top: 4px; display: flex; gap: 6px; }
+  .modal-footer { padding: 10px 16px 14px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid #f0f0f0; }
+</style>
+</head>
+<body>
+
+<div class="layout">
+  <div class="sidebar">
+    <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
+    <div class="nav-group">
+      <div class="nav-group-title">企业管理</div>
+      <div class="nav-item"><i class="ti ti-building"></i>企业客户</div>
+    </div>
+    <div class="nav-group">
+      <div class="nav-group-title">合伙人</div>
+      <div class="nav-item active"><i class="ti ti-users"></i>合伙人管理</div>
+      <div class="nav-item"><i class="ti ti-clipboard-list"></i>合伙人订单</div>
+      <div class="nav-item"><i class="ti ti-coin"></i>佣金结算</div>
+      <div class="nav-item"><i class="ti ti-settings"></i>功能配置</div>
+    </div>
+  </div>
+
+  <div class="main">
+    <div class="page-header">
+      <div class="page-title-row">
+        <span class="page-title">合伙人管理详情</span>
+        <span class="status-badge">正常</span>
+      </div>
+      <div class="header-btns">
+        <button class="btn btn-danger"><i class="ti ti-ban"></i>禁用</button>
+        <button class="btn"><i class="ti ti-download"></i>导出</button>
+        <button class="btn"><i class="ti ti-tool"></i>管理工具</button>
+        <button class="btn"><i class="ti ti-share"></i>分享</button>
+      </div>
+    </div>
+
+    <div class="content">
+
+      <div class="card">
+        <div class="card-header">
+          <span class="card-title"><i class="ti ti-id-badge"></i>基本信息</span>
+        </div>
+        <div class="card-body">
+          <div class="info-grid">
+            <div>
+              <div class="field-row"><span class="field-label">合伙人类型</span><span class="field-val">个人</span></div>
+              <div class="field-row"><span class="field-label">身份类型</span><span class="field-val">财务</span></div>
+              <div class="field-row"><span class="field-label">来源方式</span><span class="field-val">对接人后台添加</span></div>
+              <div class="field-row"><span class="field-label">创建时间</span><span class="field-val">2026-06-22 14:22</span></div>
+            </div>
+            <div>
+              <div class="field-row"><span class="field-label">合伙人姓名</span><span class="field-val">李鹏飞</span></div>
+              <div class="field-row"><span class="field-label">合伙人用户</span><span class="field-val">158****0129</span></div>
+              <div class="field-row"><span class="field-label">所在城市</span><span class="field-val">福建省厦门市</span></div>
+              <div class="field-row"><span class="field-label">修改时间</span><span class="field-val">2026-06-22 14:22</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 介绍人信息区块 -->
+      <div class="intro-block">
+        <div class="intro-header">
+          <i class="ti ti-user-check"></i>介绍人信息
+        </div>
+        <div class="intro-body">
+          <div class="intro-field">
+            <span class="intro-label">介绍人</span>
+            <div class="intro-val">
+              <span style="color:#1677ff;cursor:pointer;font-size:13px">李鹏飞</span>
+            </div>
+          </div>
+          <div class="intro-field">
+            <span class="intro-label">是否已成单</span>
+            <div class="intro-val">
+              <span style="font-size:13px;color:#1a1a1a">未成单</span>
+            </div>
+          </div>
+          <div class="intro-field">
+            <span class="intro-label">是否已发放奖励</span>
+            <div class="intro-val" id="reward-area">
+              
+              <span id="reward-tag" style="font-size:13px;color:#1a1a1a">无奖励</span>
+              <button class="btn btn-warning" id="reward-btn" onclick="openModal()">
+                <i class="ti ti-check"></i>标记已发放
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="card-header">
+          <span class="card-title"><i class="ti ti-chart-bar"></i>实时统计</span>
+        </div>
+        <div class="card-body">
+          <div class="stats-grid">
+            <div class="stat-item"><div class="stat-label">推广客户数</div><div class="stat-val">0</div></div>
+            <div class="stat-item"><div class="stat-label">产生业务客户数</div><div class="stat-val">0</div></div>
+            <div class="stat-item"><div class="stat-label">累计佣金</div><div class="stat-val">0.00</div></div>
+            <div class="stat-item"><div class="stat-label">可提现金额</div><div class="stat-val">0.00</div></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="tabs">
+        <div class="tab-nav">
+          <div class="tab-item active">个人企业推广记录</div>
+          <div class="tab-item">企业CRM推广记录</div>
+          <div class="tab-item">成单记录</div>
+          <div class="tab-item">备注</div>
+          <div class="tab-item">操作日志</div>
+        </div>
+        <div class="tab-body">
+          <i class="ti ti-inbox"></i>暂无数据
+        </div>
+      </div>
+
+      <!-- 演示切换区 -->
+      <div style="margin-top:16px;padding:12px 16px;background:#fff;border-radius:8px;border:1px dashed #d9d9d9;font-size:12px;color:#8c8c8c;display:flex;align-items:center;gap:10px">
+        <span>演示奖励状态切换：</span>
+        <button class="btn" onclick="setReward('none')" style="font-size:11px;padding:3px 10px">无奖励</button>
+        <button class="btn" onclick="setReward('pending')" style="font-size:11px;padding:3px 10px">待发放（按钮激活）</button>
+        <button class="btn" onclick="setReward('done')" style="font-size:11px;padding:3px 10px">已发放（按钮锁定）</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- 弹窗 -->
+<div class="modal-overlay" id="modal">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title">标记奖励已发放</span>
+      <i class="ti ti-x modal-close" onclick="closeModal()"></i>
+    </div>
+    <div class="modal-body">
+      <div class="modal-row">
+        <span class="modal-row-label">介绍人</span>
+        <span>李鹏飞</span>
+      </div>
+      <div class="modal-row">
+        <span class="modal-row-label">奖励金额</span>
+        <span style="font-size:15px;font-weight:600;color:#d46b08">¥50.00</span>
+      </div>
+      <div class="modal-tip">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>确认发放后，将标记为已发放。请确保已完成线下发放后再操作。</span>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal()">取消</button>
+      <button class="btn btn-success" onclick="confirmReward()"><i class="ti ti-check"></i>确认已发放</button>
+    </div>
+  </div>
+</div>
+
+<script>
+  function openModal() { document.getElementById('modal').classList.add('show'); }
+  function closeModal() { document.getElementById('modal').classList.remove('show'); }
+
+  function setReward(state) {
+    const tag = document.getElementById('reward-tag');
+    const btn = document.getElementById('reward-btn');
+    if (state === 'none') {
+      tag.className = ''; tag.style = 'font-size:13px;color:#1a1a1a'; tag.textContent = '无奖励';
+      btn.className = 'btn btn-warning'; btn.innerHTML = '<i class="ti ti-check"></i>标记已发放';
+    } else if (state === 'pending') {
+      tag.className = ''; tag.style = 'font-size:13px;color:#1a1a1a'; tag.textContent = '待发放';
+      btn.className = 'btn btn-warning'; btn.innerHTML = '<i class="ti ti-check"></i>标记已发放';
+    } else if (state === 'done') {
+      tag.className = 'tag tag-green'; tag.style = ''; tag.innerHTML = '<i class="ti ti-check" style="font-size:10px"></i>已发放';
+      btn.className = 'btn btn-locked'; btn.innerHTML = '<i class="ti ti-lock"></i>已发放';
+    }
+  }
+
+  function confirmReward() {
+    closeModal();
+    setReward('done');
+  }
+
+  document.querySelectorAll('.tab-item').forEach(t => {
+    t.addEventListener('click', () => {
+      document.querySelectorAll('.tab-item').forEach(x => x.classList.remove('active'));
+      t.classList.add('active');
+    });
+  });
+</script>
+</body>
+</html>

HTML原型/partner_detail_leads.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>合伙人详情 - 商机列表</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+
+.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:50px}
+.page-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
+.header-btns{display:flex;gap:8px}
+
+.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-sm{padding:3px 9px;font-size:11px}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
+.btn-danger{border-color:#ffa39e;color:#cf1322}
+.btn-danger:hover{background:#fff1f0}
+
+/* 基本信息卡 */
+.info-card{background:#fff;border-bottom:1px solid #e8e8e8;padding:14px 24px}
+.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
+.field-row{display:flex;align-items:baseline;padding:4px 0}
+.field-label{width:84px;flex-shrink:0;font-size:13px;color:#8c8c8c;text-align:right;padding-right:10px}
+.field-val{font-size:13px;color:#1a1a1a}
+
+/* 渠道状态块 */
+.channel-block{background:#fafafa;border:1px solid #e8e8e8;border-radius:6px;padding:10px 14px;margin:10px 24px 0;display:flex;gap:0}
+.ch-field{flex:1;display:flex;align-items:center;gap:0}
+.ch-field+.ch-field{border-left:1px solid #f0f0f0}
+.ch-label{width:90px;font-size:12px;color:#8c8c8c;text-align:right;padding-right:10px;flex-shrink:0}
+.ch-val{font-size:13px;flex:1;display:flex;align-items:center;gap:8px}
+
+/* Tabs */
+.tabs-bar{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;margin-top:0}
+.tab{padding:10px 14px;font-size:13px;color:#8c8c8c;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
+.tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+
+.content{padding:16px 24px}
+
+/* 筛选 */
+.filter-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:12px 16px;margin-bottom:12px}
+.filter-item{display:flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
+.filter-item label{color:#8c8c8c}
+.filter-item input,.filter-item select{height:28px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:110px}
+.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
+.filter-btns{margin-left:auto;display:flex;gap:6px}
+
+/* 状态Tab */
+.status-tabs{display:flex;gap:0;border-bottom:1px solid #e8e8e8;margin-bottom:0}
+.status-tab{padding:7px 14px;font-size:12px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
+.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+
+/* 表格 */
+.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:12px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:9px 10px;vertical-align:middle}
+.cell-meta{font-size:11px;color:#bfbfbf;margin-top:2px}
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+
+/* 标签 */
+.tag{display:inline-flex;align-items:center;gap:2px;font-size:11px;padding:2px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-cyan{background:#e6fffb;color:#08979c;border-color:#87e8de}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-red{background:#fff1f0;color:#cf1322;border-color:#ffa39e}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+.tag-purple{background:#f9f0ff;color:#531dab;border-color:#d3adf7}
+.tag-gold{background:#fffbe6;color:#d48806;border-color:#ffe58f}
+
+.source-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
+
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:flex-start;justify-content:center;padding:40px 0;overflow-y:auto}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:580px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden;margin:auto}
+.modal-header{padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
+.modal-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:18px 20px}
+.modal-footer{padding:10px 20px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
+.form-section{margin-bottom:16px}
+.form-section-title{font-size:12px;font-weight:500;color:#8c8c8c;margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid #f5f5f5}
+.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
+.form-item{display:flex;flex-direction:column;gap:4px;margin-bottom:0}
+.form-item label{font-size:12px;color:#595959}
+.req{color:#cf1322;margin-left:2px}
+.form-item input,.form-item select,.form-item textarea{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none;background:#fff;width:100%}
+.form-item input:focus,.form-item select:focus{border-color:#1677ff}
+.form-item textarea{height:68px;padding:7px 10px;resize:none}
+.detail-rows{display:flex;flex-direction:column;gap:0}
+.detail-row{display:flex;font-size:13px;padding:7px 0;border-bottom:1px solid #f5f5f5}
+.detail-row:last-child{border-bottom:none}
+.detail-label{width:90px;flex-shrink:0;color:#8c8c8c;text-align:right;padding-right:12px}
+.detail-val{flex:1;color:#1a1a1a;line-height:1.6}
+.status-flow{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:10px}
+.sf-node{padding:4px 12px;border-radius:100px;font-size:12px;border:1px solid}
+.sf-arrow{color:#bfbfbf;font-size:14px}
+</style>
+</head>
+<body>
+<div style="background:#f0f2f5;min-height:100vh">
+
+  <div class="page-header">
+    <div class="page-title">
+      <button class="btn" onclick="history.back()" style="border:none;background:none;padding:0;color:#595959;cursor:pointer"><i class="ti ti-arrow-left"></i></button>
+      合伙人管理详情
+      <span class="tag tag-green" style="font-size:11px">正常</span>
+    </div>
+    <div class="header-btns">
+      <button class="btn btn-danger btn-sm"><i class="ti ti-ban"></i>禁用</button>
+      <button class="btn btn-sm"><i class="ti ti-download"></i>导出</button>
+      <button class="btn btn-sm">管理工具</button>
+    </div>
+  </div>
+
+  <div class="info-card">
+    <div class="info-grid">
+      <div>
+        <div class="field-row"><span class="field-label">合伙人类型</span><span class="field-val">个人</span></div>
+        <div class="field-row"><span class="field-label">身份类型</span><span class="field-val">财务</span></div>
+        <div class="field-row"><span class="field-label">来源方式</span><span class="field-val">对接人后台添加</span></div>
+        <div class="field-row"><span class="field-label">创建时间</span><span class="field-val">2026-06-22 14:22</span></div>
+      </div>
+      <div>
+        <div class="field-row"><span class="field-label">合伙人姓名</span><span class="field-val">李鹏飞</span></div>
+        <div class="field-row"><span class="field-label">合伙人用户</span><span class="field-val">158****0129</span></div>
+        <div class="field-row"><span class="field-label">所在城市</span><span class="field-val">福建省厦门市</span></div>
+        <div class="field-row"><span class="field-label">修改时间</span><span class="field-val">2026-06-22 14:22</span></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="channel-block">
+    <div class="ch-field">
+      <span class="ch-label">介绍人</span>
+      <div class="ch-val"><span style="color:#1677ff;cursor:pointer">王利娟</span></div>
+    </div>
+    <div class="ch-field">
+      <span class="ch-label">是否已成单</span>
+      <div class="ch-val">已成单</div>
+    </div>
+    <div class="ch-field">
+      <span class="ch-label">是否已发放奖励</span>
+      <div class="ch-val">
+        <span class="tag tag-green">已发放</span>
+      </div>
+    </div>
+  </div>
+
+  <div style="height:10px;background:#f0f2f5"></div>
+
+  <div class="tabs-bar">
+    <div class="tab active" onclick="switchTab('lead',this)">商机列表</div>
+    <div class="tab" onclick="switchTab('promote',this)">个人企业推广记录</div>
+    <div class="tab" onclick="switchTab('crm',this)">企业CRM推广记录</div>
+    <div class="tab" onclick="switchTab('deal',this)">成单记录</div>
+    <div class="tab" onclick="switchTab('note',this)">备注</div>
+    <div class="tab" onclick="switchTab('log',this)">操作日志</div>
+  </div>
+
+  <!-- 商机列表Tab内容 -->
+  <div id="tab-lead" class="content" style="display:none">
+
+    <div class="filter-bar">
+      <div class="filter-item"><label>商机状态</label>
+        <select id="f-status"><option value="">全部</option><option>待审核</option><option>待分配</option><option>跟进中</option><option>已成单</option><option>暂时挂起</option><option>已作废</option></select>
+      </div>
+      <div class="filter-item"><label>商机来源</label>
+        <select id="f-source"><option value="">全部</option><option>合伙人添加</option><option>落地页扫码</option><option>后台添加</option></select>
+      </div>
+      <div class="filter-item"><label>客户名称</label>
+        <input type="text" id="f-customer" placeholder="搜索客户名称">
+      </div>
+      <div class="filter-btns">
+        <button class="btn btn-primary btn-sm" onclick="renderLeads()"><i class="ti ti-search"></i>查询</button>
+        <button class="btn btn-sm" onclick="resetFilter()"><i class="ti ti-refresh"></i>重置</button>
+        <button class="btn btn-primary btn-sm" onclick="openModal('modal-add-lead')"><i class="ti ti-plus"></i>新增商机</button>
+      </div>
+    </div>
+
+    <div class="table-card">
+      <table>
+        <thead>
+          <tr>
+            <th>创建时间</th>
+            <th>更新时间</th>
+            <th>客户信息</th>
+            <th>产品名称</th>
+            <th>商机来源</th>
+            <th>对接人</th>
+            <th>渠道管理员</th>
+            <th>状态</th>
+            <th>操作</th>
+          </tr>
+        </thead>
+        <tbody id="lead-tbody"></tbody>
+      </table>
+      <div class="pagination">
+        <span id="lead-count">共 8 条</span>
+        <div style="display:flex;gap:4px">
+          <div class="page-btn"><i class="ti ti-chevron-left"></i></div>
+          <div class="page-btn active">1</div>
+          <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 其他Tab占位 -->
+  <div id="tab-promote" class="content" style="display:none">
+    <div style="background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:40px;text-align:center;color:#bfbfbf"><i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>暂无数据</div>
+  </div>
+  <div id="tab-crm" class="content" style="display:none">
+    <div style="background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:40px;text-align:center;color:#bfbfbf"><i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>暂无数据</div>
+  </div>
+  <div id="tab-deal" class="content" style="display:none">
+    <div style="background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:40px;text-align:center;color:#bfbfbf"><i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>暂无数据</div>
+  </div>
+  <div id="tab-note" class="content" style="display:none">
+    <div style="background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:40px;text-align:center;color:#bfbfbf"><i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>暂无数据</div>
+  </div>
+  <div id="tab-log" class="content" style="display:none">
+    <div style="background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:40px;text-align:center;color:#bfbfbf"><i class="ti ti-inbox" style="font-size:28px;display:block;margin-bottom:8px"></i>暂无数据</div>
+  </div>
+
+</div>
+
+<!-- 商机详情弹窗 -->
+<div class="modal-overlay" id="modal-detail">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-clipboard-list" style="color:#1677ff"></i>商机详情</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-detail')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="form-section">
+        <div class="form-section-title">基本信息</div>
+        <div class="detail-rows">
+          <div class="detail-row"><span class="detail-label">创建时间</span><span class="detail-val">2026-06-22 09:14:33</span></div>
+          <div class="detail-row"><span class="detail-label">更新时间</span><span class="detail-val">2026-06-23 10:05:12</span></div>
+          <div class="detail-row"><span class="detail-label">商机来源</span><span class="detail-val"><span class="tag tag-purple">合伙人添加</span></span></div>
+          <div class="detail-row"><span class="detail-label">当前状态</span><span class="detail-val"><span class="tag tag-cyan">跟进中</span></span></div>
+        </div>
+      </div>
+      <div class="form-section">
+        <div class="form-section-title">客户信息</div>
+        <div class="detail-rows">
+          <div class="detail-row"><span class="detail-label">客户名称</span><span class="detail-val" style="font-weight:500">远航科技有限公司</span></div>
+          <div class="detail-row"><span class="detail-label">联系人</span><span class="detail-val">张总 / 138****5566</span></div>
+          <div class="detail-row"><span class="detail-label">需求描述</span><span class="detail-val" style="color:#595959">咨询岗位外包服务，约50人规模</span></div>
+        </div>
+      </div>
+      <div class="form-section">
+        <div class="form-section-title">产品信息</div>
+        <div class="detail-rows">
+          <div class="detail-row"><span class="detail-label">产品分类</span><span class="detail-val">异地用工</span></div>
+          <div class="detail-row"><span class="detail-label">产品名称</span><span class="detail-val">岗位外包</span></div>
+        </div>
+      </div>
+      <div class="form-section">
+        <div class="form-section-title">关联人员</div>
+        <div class="detail-rows">
+          <div class="detail-row"><span class="detail-label">合伙人</span><span class="detail-val">李鹏飞 / 158****0129</span></div>
+          <div class="detail-row"><span class="detail-label">对接人</span><span class="detail-val" style="color:#1677ff">李明</span></div>
+          <div class="detail-row"><span class="detail-label">渠道管理员</span><span class="detail-val" style="color:#1677ff">王利娟</span></div>
+        </div>
+      </div>
+      <div class="form-section" style="margin-bottom:0">
+        <div class="form-section-title">状态流转说明</div>
+        <div class="status-flow">
+          <span class="sf-node" style="background:#fff7e6;color:#d46b08;border-color:#ffd591">待审核</span>
+          <span class="sf-arrow">→</span>
+          <span class="sf-node" style="background:#e8f4ff;color:#1677ff;border-color:#91caff">待分配</span>
+          <span class="sf-arrow">→</span>
+          <span class="sf-node" style="background:#e6fffb;color:#08979c;border-color:#87e8de">跟进中</span>
+          <span class="sf-arrow">→</span>
+          <span class="sf-node" style="background:#f6ffed;color:#389e0d;border-color:#b7eb8f">已成单</span>
+        </div>
+        <div class="status-flow" style="margin-top:6px">
+          <span style="font-size:11px;color:#8c8c8c">分支：跟进中 →</span>
+          <span class="sf-node" style="background:#fffbe6;color:#d48806;border-color:#ffe58f">暂时挂起</span>
+          <span class="sf-arrow">→</span>
+          <span class="sf-node" style="background:#e6fffb;color:#08979c;border-color:#87e8de">跟进中</span>
+          <span style="font-size:11px;color:#8c8c8c;margin-left:4px">或</span>
+          <span class="sf-node" style="background:#fafafa;color:#8c8c8c;border-color:#d9d9d9">已作废</span>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-detail')">关闭</button>
+      <button class="btn btn-primary">流转状态</button>
+    </div>
+  </div>
+</div>
+
+<!-- 新增商机弹窗 -->
+<div class="modal-overlay" id="modal-add-lead">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-plus" style="color:#1677ff"></i>后台新增商机</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-add-lead')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="form-section">
+        <div class="form-section-title">客户信息</div>
+        <div class="form-row" style="margin-bottom:10px">
+          <div class="form-item"><label>客户名称<span class="req">*</span></label><input type="text" placeholder="请输入企业名称"></div>
+          <div class="form-item"><label>联系人</label><input type="text" placeholder="姓名 / 手机号"></div>
+        </div>
+        <div class="form-item" style="margin-bottom:10px"><label>需求描述</label><textarea placeholder="简要描述客户需求"></textarea></div>
+      </div>
+      <div class="form-section">
+        <div class="form-section-title">产品信息</div>
+        <div class="form-row" style="margin-bottom:0">
+          <div class="form-item"><label>产品分类<span class="req">*</span></label>
+            <select><option value="">请选择</option><option>异地用工</option><option>财税服务</option><option>人事代理</option></select>
+          </div>
+          <div class="form-item"><label>产品名称<span class="req">*</span></label>
+            <select><option value="">请先选择分类</option></select>
+          </div>
+        </div>
+      </div>
+      <div class="form-section" style="margin-bottom:0">
+        <div class="form-section-title">商机信息</div>
+        <div class="form-row">
+          <div class="form-item"><label>商机来源</label>
+            <input type="text" value="后台添加" readonly style="background:#fafafa;color:#8c8c8c">
+          </div>
+          <div class="form-item"><label>合伙人</label>
+            <input type="text" value="李鹏飞" readonly style="background:#fafafa;color:#8c8c8c">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-add-lead')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-add-lead')"><i class="ti ti-check"></i>确认新增</button>
+    </div>
+  </div>
+</div>
+
+<!-- 状态流转弹窗 -->
+<div class="modal-overlay" id="modal-status">
+  <div class="modal" style="width:420px">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-arrows-exchange" style="color:#1677ff"></i>商机状态流转</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-status')"></i>
+    </div>
+    <div class="modal-body" id="status-body"></div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-status')">取消</button>
+      <button class="btn btn-primary" onclick="closeModal('modal-status')"><i class="ti ti-check"></i>确认</button>
+    </div>
+  </div>
+</div>
+
+<!-- 操作日志弹窗 -->
+<div class="modal-overlay" id="modal-log">
+  <div class="modal" style="width:520px">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-history" style="color:#1677ff"></i>商机操作日志</span>
+      <i class="ti ti-x modal-close" onclick="closeModal('modal-log')"></i>
+    </div>
+    <div class="modal-body" id="log-body"></div>
+    <div class="modal-footer">
+      <button class="btn" onclick="closeModal('modal-log')">关闭</button>
+    </div>
+  </div>
+</div>
+
+<script>
+var LEADS = [
+  { id:'LM001', created:'2026-06-22 09:14', updated:'2026-06-23 10:05', customer:'远航科技有限公司', contact:'张总/138****5566', catg:'异地用工', product:'岗位外包', source:'合伙人添加', assignee:'李明', channel:'王利娟', status:'跟进中' },
+  { id:'LM002', created:'2026-06-23 14:05', updated:'2026-06-23 14:05', customer:'锦绣餐饮集团', contact:'王总/139****2211', catg:'员工关怀', product:'三节福利采购', source:'落地页扫码', assignee:'—', channel:'王利娟', status:'待分配' },
+  { id:'LM003', created:'2026-06-20 11:30', updated:'2026-06-21 09:00', customer:'启航教育咨询', contact:'李经理/135****4411', catg:'财税服务', product:'代理记账', source:'合伙人添加', assignee:'赵磊', channel:'王利娟', status:'已成单' },
+  { id:'LM004', created:'2026-06-18 15:22', updated:'2026-06-19 08:30', customer:'蓝海投资管理公司', contact:'陈总/151****2216', catg:'异地用工', product:'劳务派遣', source:'后台添加', assignee:'李明', channel:'王利娟', status:'暂时挂起' },
+  { id:'LM005', created:'2026-06-15 10:10', updated:'2026-06-16 14:20', customer:'顺达物流有限公司', contact:'吴总/137****3269', catg:'人事代理', product:'社保公积金托管', source:'落地页扫码', assignee:'王芳', channel:'王利娟', status:'已成单' },
+  { id:'LM006', created:'2026-06-24 09:22', updated:'2026-06-24 09:22', customer:'新桥律师事务所', contact:'周律/150****7788', catg:'财税服务', product:'税务筹划', source:'合伙人添加', assignee:'—', channel:'王利娟', status:'待审核' },
+  { id:'LM007', created:'2026-06-24 10:55', updated:'2026-06-24 10:55', customer:'中兴建材集团', contact:'马总/166****8880', catg:'异地用工', product:'企业员工社保代缴', source:'落地页扫码', assignee:'—', channel:'王利娟', status:'待审核' },
+  { id:'LM008', created:'2026-06-17 11:00', updated:'2026-06-20 16:00', customer:'云端科技股份公司', contact:'黄总/151****2215', catg:'AI获客', product:'AI获客工具', source:'后台添加', assignee:'刘婷', channel:'王利娟', status:'跟进中' },
+];
+
+var STATUS_TAG = {
+  '待审核':'tag-orange','待分配':'tag-blue','跟进中':'tag-cyan',
+  '已成单':'tag-green','暂时挂起':'tag-gold','已作废':'tag-gray'
+};
+var STATUS_OP = {
+  '待审核':  { ops:['核实通过→待分配','核实不实→已作废'], role:'渠道管理员' },
+  '待分配':  { ops:['分配对接人→跟进中','作废→已作废'], role:'渠道管理员' },
+  '跟进中':  { ops:['标记成单→已成单','暂时挂起','作废→已作废'], role:'对接人' },
+  '暂时挂起':{ ops:['重新跟进→跟进中','作废→已作废'], role:'对接人' },
+};
+var SOURCE_COLOR = { '合伙人添加':'tag-purple','落地页扫码':'tag-blue','后台添加':'tag-gray' };
+
+var currentFilter = '';
+function renderLeads(statusFilter) {
+  if (statusFilter !== undefined) currentFilter = statusFilter;
+  var list = LEADS.filter(function(d) {
+    if (currentFilter && d.status !== currentFilter) return false;
+    var fs = document.getElementById('f-status'); if (fs && fs.value && d.status !== fs.value) return false;
+    var fc = document.getElementById('f-customer'); if (fc && fc.value && d.customer.indexOf(fc.value) < 0) return false;
+    var fso = document.getElementById('f-source'); if (fso && fso.value && d.source !== fso.value) return false;
+    return true;
+  });
+  document.getElementById('lead-count').textContent = '共 ' + list.length + ' 条';
+  document.getElementById('lead-tbody').innerHTML = list.map(function(d) {
+    return '<tr>'
+      + '<td><span style="font-size:12px;color:#8c8c8c">' + d.created + '</span></td>'
+      + '<td><span style="font-size:12px;color:#8c8c8c">' + d.updated + '</span></td>'
+      + '<td><div style="font-weight:500">' + d.customer + '</div><div class="cell-meta">' + d.contact + '</div></td>'
+      + '<td>' + d.product + '</td>'
+      + '<td><span class="tag ' + SOURCE_COLOR[d.source] + '">' + d.source + '</span></td>'
+      + '<td>' + (d.assignee === '—' ? '<span style="color:#bfbfbf">待分配</span>' : '<span style="color:#1677ff">' + d.assignee + '</span>') + '</td>'
+      + '<td style="color:#1677ff">' + d.channel + '</td>'
+      + '<td><span class="tag ' + STATUS_TAG[d.status] + '">' + d.status + '</span></td>'
+      + '<td><button class="btn-link" onclick="openDetail(\'' + d.id + '\')">详情</button>'
+      + (STATUS_OP[d.status] ? ' <button class="btn-link" onclick="openStatus(\'' + d.id + '\')">流转</button>' : '')
+      + ' <button class="btn-link" onclick="openLog(\'' + d.id + '\')">操作日志</button>'
+      + '</td>'
+      + '</tr>';
+  }).join('') || '<tr><td colspan="9" style="text-align:center;color:#bfbfbf;padding:36px 0">暂无数据</td></tr>';
+}
+
+function resetFilter() {
+  document.getElementById('f-status').value = '';
+  document.getElementById('f-source').value = '';
+  document.getElementById('f-customer').value = '';
+  renderLeads('');
+}
+
+var LEAD_LOGS = {
+  'LM001':[
+    { time:'2026-06-23 10:05', user:'李明（对接人）', action:'状态流转', detail:'待分配 → 跟进中，备注：已电话沟通，客户有意向' },
+    { time:'2026-06-22 15:30', user:'王利娟（渠道管理员）', action:'分配对接人', detail:'分配对接人：李明' },
+    { time:'2026-06-22 09:20', user:'王利娟（渠道管理员）', action:'状态流转', detail:'待审核 → 待分配，核实真实' },
+    { time:'2026-06-22 09:14', user:'李鹏飞（合伙人）', action:'创建商机', detail:'合伙人在小程序报备，来源：合伙人添加' },
+  ],
+  'LM002':[
+    { time:'2026-06-23 14:05', user:'系统', action:'创建商机', detail:'落地页扫码留资，关联合伙人：李鹏飞' },
+  ],
+  'LM006':[
+    { time:'2026-06-24 09:22', user:'李鹏飞（合伙人）', action:'创建商机', detail:'合伙人在小程序报备，来源：合伙人添加' },
+  ],
+};
+
+function openLog(id) {
+  var logs = LEAD_LOGS[id] || [];
+  var d = LEADS.filter(function(x){ return x.id === id; })[0];
+  var html = '<div style="margin-bottom:12px;font-size:13px;color:#595959">商机：<b>' + (d ? d.customer : id) + '</b></div>';
+  if (logs.length === 0) {
+    html += '<div style="text-align:center;color:#bfbfbf;padding:24px 0;font-size:13px">暂无操作记录</div>';
+  } else {
+    html += '<div style="display:flex;flex-direction:column;gap:0">';
+    logs.forEach(function(l) {
+      html += '<div style="display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f5f5f5">'
+        + '<div style="width:8px;height:8px;border-radius:50%;background:#1677ff;flex-shrink:0;margin-top:5px"></div>'
+        + '<div style="flex:1">'
+        + '<div style="font-size:13px;color:#1a1a1a"><b style="color:#595959">' + l.action + '</b>　' + l.detail + '</div>'
+        + '<div style="font-size:11px;color:#bfbfbf;margin-top:2px">' + l.time + '　' + l.user + '</div>'
+        + '</div></div>';
+    });
+    html += '</div>';
+  }
+  document.getElementById('log-body').innerHTML = html;
+  openModal('modal-log');
+}
+
+function openDetail(id) { openModal('modal-detail'); }
+function openStatus(id) {
+  var d = LEADS.filter(function(x){ return x.id === id; })[0];
+  if (!d || !STATUS_OP[d.status]) return;
+  var info = STATUS_OP[d.status];
+  var html = '<div style="margin-bottom:12px;font-size:13px;display:flex;gap:8px;flex-wrap:wrap;align-items:center">'
+    + '<span style="color:#8c8c8c">当前状态：</span><span class="tag ' + STATUS_TAG[d.status] + '">' + d.status + '</span>'
+    + '<span style="color:#8c8c8c;margin-left:8px">操作人：</span><span style="color:#1677ff">' + info.role + '</span>'
+    + '</div>'
+    + '<div style="font-size:12px;color:#8c8c8c;margin-bottom:8px">可流转操作：</div>'
+    + '<div style="display:flex;flex-direction:column;gap:8px">'
+    + info.ops.map(function(op) {
+        return '<label style="display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #e8e8e8;border-radius:6px;cursor:pointer;font-size:13px">'
+          + '<input type="radio" name="op" style="accent-color:#1677ff"><span>' + op + '</span></label>';
+      }).join('')
+    + '</div>'
+    + '<div style="margin-top:12px"><div style="font-size:12px;color:#595959;margin-bottom:4px">跟进备注</div>'
+    + '<textarea style="width:100%;height:64px;border:1px solid #d9d9d9;border-radius:6px;padding:7px 10px;font-size:13px;resize:none;outline:none" placeholder="选填"></textarea></div>';
+  document.getElementById('status-body').innerHTML = html;
+  openModal('modal-status');
+}
+
+function openModal(id) { document.getElementById(id).classList.add('show'); }
+function closeModal(id) { document.getElementById(id).classList.remove('show'); }
+
+function switchTab(key, el) {
+  document.querySelectorAll('.tab').forEach(function(t){ t.classList.remove('active'); });
+  el.classList.add('active');
+  ['lead','promote','crm','deal','note','log'].forEach(function(k){
+    var el2 = document.getElementById('tab-'+k);
+    if (el2) el2.style.display = k === key ? '' : 'none';
+  });
+  if (key === 'lead') renderLeads();
+}
+
+renderLeads();
+switchTab('lead', document.querySelector('.tab:first-child'));
+</script>
+</body>
+</html>

HTML原型/partner_performance.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>合伙人客户业绩统计</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+.layout{display:flex;height:100vh}
+.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
+.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
+.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
+.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+.main{flex:1;display:flex;flex-direction:column;min-height:0}
+.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
+.page-title{font-size:15px;font-weight:600}
+.header-btns{display:flex;gap:8px}
+.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 24px;flex-shrink:0}
+.filter-grid{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
+.filter-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
+.filter-item label{color:#8c8c8c;font-size:13px}
+.filter-item input,.filter-item select{height:30px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:120px}
+.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
+.filter-btns{margin-left:auto;display:flex;gap:8px}
+.content{padding:16px 24px;flex:1;overflow-y:auto}
+/* 汇总卡片 */
+.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
+.sum-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;padding:14px 16px}
+.sum-card-label{font-size:12px;color:#8c8c8c;margin-bottom:6px;display:flex;align-items:center;gap:4px}
+.sum-card-val{font-size:22px;font-weight:600}
+.sum-card-sub{font-size:11px;color:#8c8c8c;margin-top:3px}
+/* 提示 */
+.realtime-tip{background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:8px 14px;font-size:12px;color:#0958d9;margin-bottom:12px;display:flex;align-items:center;gap:6px}
+/* 表格 */
+.table-wrap{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:auto}
+table{width:100%;border-collapse:collapse;font-size:12px;min-width:1100px}
+thead tr{background:#fafafa}
+thead tr:first-child th{border-bottom:1px solid #e8e8e8}
+thead tr:last-child th{border-bottom:1px solid #e8e8e8}
+th{padding:9px 10px;text-align:center;color:#8c8c8c;font-weight:500;white-space:nowrap;border-right:1px solid #f0f0f0}
+th:last-child{border-right:none}
+th.left{text-align:left}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:9px 10px;text-align:center;vertical-align:middle;border-right:1px solid #f5f5f5}
+td:last-child{border-right:none}
+td.left{text-align:left}
+.tag{display:inline-flex;align-items:center;font-size:11px;padding:2px 8px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.tag-purple{background:#f9f0ff;color:#531dab;border-color:#d3adf7}
+.pos{color:#389e0d;font-weight:500}
+.neg{color:#cf1322;font-weight:500}
+.zero{color:#bfbfbf}
+.total-col{background:#fafcff;font-weight:600}
+.foot-row{background:#f5f8ff;font-weight:600;border-top:2px solid #d9e8ff}
+.foot-row td{color:#1677ff}
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+</style>
+</head>
+<body>
+<div class="layout">
+  <div class="sidebar">
+    <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
+    <div class="nav-group">佣金结算</div>
+    <div class="nav-item">合伙人佣金结算管理</div>
+    <div class="nav-item">渠道管理员佣金结算</div>
+    <div class="nav-item">对接人佣金结算</div>
+    <div class="nav-item">介绍人奖励记录</div>
+    <div class="nav-item active">合伙人客户业绩统计</div>
+    <div class="nav-group">其他</div>
+    <div class="nav-item">服务商结算</div>
+  </div>
+
+  <div class="main">
+    <div class="page-header">
+      <span class="page-title">合伙人客户业绩统计</span>
+      <div class="header-btns">
+        <button class="btn"><i class="ti ti-download"></i>导出</button>
+        <button class="btn"><i class="ti ti-share"></i>分享</button>
+      </div>
+    </div>
+
+    <div class="filter-wrap">
+      <div class="filter-grid">
+        <div class="filter-item">
+          <label>业绩所属月份</label>
+          <input type="month" id="f-month" value="2026-06">
+        </div>
+        <div class="filter-item">
+          <label>类型</label>
+          <select id="f-type">
+            <option value="">全部</option>
+            <option value="channel">渠道管理员</option>
+            <option value="assignee">对接人</option>
+          </select>
+        </div>
+        <div class="filter-item">
+          <label>姓名</label>
+          <input type="text" id="f-name" placeholder="搜索姓名">
+        </div>
+        <div class="filter-btns">
+          <button class="btn btn-primary" onclick="renderTable()"><i class="ti ti-search"></i>查询</button>
+          <button class="btn" onclick="resetFilter()"><i class="ti ti-refresh"></i>重置</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <div class="realtime-tip">
+        <i class="ti ti-bolt"></i>
+        数据实时统计，来源为渠道管理员和对接人<b style="margin:0 3px">审核通过</b>的佣金订单金额，正负单均计入。
+      </div>
+
+      <div class="summary-cards" id="summary-cards"></div>
+
+      <div class="table-wrap">
+        <table>
+          <thead>
+            <tr>
+              <th class="left" rowspan="2" style="min-width:70px">业绩月份</th>
+              <th class="left" rowspan="2" style="min-width:60px">类型</th>
+              <th class="left" rowspan="2" style="min-width:70px">姓名</th>
+              <th rowspan="2" style="min-width:80px">总业绩</th>
+              <th colspan="7" style="background:#f0f7ff;color:#1677ff">各产品线业绩</th>
+            </tr>
+            <tr>
+              <th style="min-width:80px;background:#fafcff">法财税+</th>
+              <th style="min-width:80px;background:#fafcff">AI获客</th>
+              <th style="min-width:90px;background:#fafcff">企业出海服务</th>
+              <th style="min-width:80px;background:#fafcff">人才发展</th>
+              <th style="min-width:80px;background:#fafcff">员工关怀</th>
+              <th style="min-width:80px;background:#fafcff">业务工具</th>
+              <th style="min-width:80px;background:#fafcff">用工合规</th>
+            </tr>
+          </thead>
+          <tbody id="perf-tbody"></tbody>
+          <tfoot id="perf-tfoot"></tfoot>
+        </table>
+        <div class="pagination">
+          <span id="perf-count">共 0 条</span>
+          <div style="display:flex;gap:4px">
+            <div class="page-btn active">1</div>
+            <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+var RAW_DATA = [
+  { month:'2026-06', type:'channel', name:'王利娟',
+    cats:{ '法财税+':240, 'AI获客':0, '企业出海服务':80, '人才发展':0, '员工关怀':120, '业务工具':0, '用工合规':360 } },
+  { month:'2026-06', type:'assignee', name:'李明',
+    cats:{ '法财税+':150, 'AI获客':60, '企业出海服务':0, '人才发展':200, '员工关怀':0, '业务工具':40, '用工合规':180 } },
+  { month:'2026-06', type:'assignee', name:'赵磊',
+    cats:{ '法财税+':800, 'AI获客':0, '企业出海服务':0, '人才发展':0, '员工关怀':50, '业务工具':0, '用工合规':120 } },
+  { month:'2026-06', type:'assignee', name:'刘婷',
+    cats:{ '法财税+':-60, 'AI获客':0, '企业出海服务':200, '人才发展':100, '员工关怀':0, '业务工具':80, '用工合规':0 } },
+  { month:'2026-06', type:'assignee', name:'王芳',
+    cats:{ '法财税+':0, 'AI获客':300, '企业出海服务':0, '人才发展':0, '员工关怀':160, '业务工具':0, '用工合规':90 } },
+  { month:'2026-05', type:'channel', name:'王利娟',
+    cats:{ '法财税+':180, 'AI获客':0, '企业出海服务':60, '人才发展':0, '员工关怀':90, '业务工具':0, '用工合规':240 } },
+  { month:'2026-05', type:'assignee', name:'李明',
+    cats:{ '法财税+':120, 'AI获客':40, '企业出海服务':0, '人才发展':150, '员工关怀':0, '业务工具':30, '用工合规':140 } },
+  { month:'2026-05', type:'assignee', name:'赵磊',
+    cats:{ '法财税+':600, 'AI获客':0, '企业出海服务':-100, '人才发展':0, '员工关怀':40, '业务工具':0, '用工合规':90 } },
+];
+
+var CATS = ['法财税+','AI获客','企业出海服务','人才发展','员工关怀','业务工具','用工合规'];
+var TYPE_LABEL = { channel:'渠道管理员', assignee:'对接人' };
+var TYPE_TAG = { channel:'tag-blue', assignee:'tag-purple' };
+
+function fmtAmt(v) {
+  if (v === 0) return '<span class="zero">—</span>';
+  return v > 0
+    ? '<span class="pos">¥' + v.toFixed(2) + '</span>'
+    : '<span class="neg">-¥' + Math.abs(v).toFixed(2) + '</span>';
+}
+function fmtTotal(v) {
+  if (v === 0) return '<span class="zero">¥0.00</span>';
+  return v > 0
+    ? '<span class="pos">¥' + v.toFixed(2) + '</span>'
+    : '<span class="neg">-¥' + Math.abs(v).toFixed(2) + '</span>';
+}
+
+function getFiltered() {
+  var month = document.getElementById('f-month').value;
+  var type  = document.getElementById('f-type').value;
+  var name  = document.getElementById('f-name').value.trim();
+  return RAW_DATA.filter(function(d) {
+    if (month && d.month !== month) return false;
+    if (type  && d.type  !== type)  return false;
+    if (name  && d.name.indexOf(name) < 0) return false;
+    return true;
+  });
+}
+
+function renderSummary(data) {
+  var totalAll = 0, channelAmt = 0, assigneeAmt = 0, posAmt = 0, negAmt = 0;
+  data.forEach(function(d) {
+    var sum = CATS.reduce(function(a,c){ return a + (d.cats[c]||0); }, 0);
+    totalAll += sum;
+    if (d.type === 'channel') channelAmt += sum;
+    else assigneeAmt += sum;
+    if (sum > 0) posAmt += sum;
+    else negAmt += sum;
+  });
+  var html = [
+    { label:'总业绩', val: totalAll, sub: '正负单合计', color: totalAll >= 0 ? '#1677ff' : '#cf1322' },
+    { label:'渠道管理员业绩', val: channelAmt, sub: '渠道管理员', color: '#1677ff' },
+    { label:'对接人业绩', val: assigneeAmt, sub: '对接人', color: '#531dab' },
+    { label:'负向业绩', val: negAmt, sub: '退款/冲减', color: '#cf1322' },
+  ].map(function(s) {
+    return '<div class="sum-card">'
+      + '<div class="sum-card-label"><i class="ti ti-chart-bar"></i>' + s.label + '</div>'
+      + '<div class="sum-card-val" style="color:' + s.color + '">'
+      + (s.val >= 0 ? '¥' : '-¥') + Math.abs(s.val).toFixed(2)
+      + '</div><div class="sum-card-sub">' + s.sub + '</div></div>';
+  }).join('');
+  document.getElementById('summary-cards').innerHTML = html;
+}
+
+function renderTable() {
+  var data = getFiltered();
+  renderSummary(data);
+  document.getElementById('perf-count').textContent = '共 ' + data.length + ' 条';
+
+  // tbody
+  var tbodyHtml = data.map(function(d) {
+    var total = CATS.reduce(function(a,c){ return a + (d.cats[c]||0); }, 0);
+    var catCells = CATS.map(function(c){
+      return '<td>' + fmtAmt(d.cats[c]||0) + '</td>';
+    }).join('');
+    return '<tr>'
+      + '<td class="left" style="color:#8c8c8c">' + d.month + '</td>'
+      + '<td><span class="tag ' + TYPE_TAG[d.type] + '">' + TYPE_LABEL[d.type] + '</span></td>'
+      + '<td class="left" style="font-weight:500">' + d.name + '</td>'
+      + '<td class="total-col">' + fmtTotal(total) + '</td>'
+      + catCells
+      + '</tr>';
+  }).join('');
+  document.getElementById('perf-tbody').innerHTML = tbodyHtml || '<tr><td colspan="11" style="text-align:center;color:#bfbfbf;padding:40px 0">暂无数据</td></tr>';
+
+  // tfoot 合计行
+  var footTotals = CATS.map(function(c) {
+    return data.reduce(function(a,d){ return a + (d.cats[c]||0); }, 0);
+  });
+  var grandTotal = footTotals.reduce(function(a,v){ return a+v; }, 0);
+  var footHtml = '<tr class="foot-row">'
+    + '<td class="left" colspan="3">合计</td>'
+    + '<td class="total-col">' + fmtTotal(grandTotal) + '</td>'
+    + footTotals.map(function(v){ return '<td>' + fmtAmt(v) + '</td>'; }).join('')
+    + '</tr>';
+  document.getElementById('perf-tfoot').innerHTML = data.length ? footHtml : '';
+}
+
+function resetFilter() {
+  document.getElementById('f-month').value = '2026-06';
+  document.getElementById('f-type').value = '';
+  document.getElementById('f-name').value = '';
+  renderTable();
+}
+
+renderTable();
+</script>
+</body>
+</html>

HTML原型/product_pages.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>产品目录管理</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f5f6f8}
+.btn{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
+.btn-link.danger{color:#cf1322}
+.tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:1px 7px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+.view{display:none}.view.active{display:block}
+
+/* 列表 */
+.list-page{padding:20px 24px}
+.list-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
+.list-title{font-size:16px;font-weight:600}
+.tabs-nav{display:flex;border-bottom:1px solid #e8e8e8;margin-bottom:16px}
+.tab-nav-item{padding:8px 16px;font-size:13px;color:#8c8c8c;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
+.tab-nav-item.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:12px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:9px 10px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
+tbody tr{border-bottom:1px solid #f5f5f5}
+tbody tr:hover{background:#fafcff}
+td{padding:9px 10px;vertical-align:middle}
+.comm-cell{font-size:12px;line-height:1.7}
+.comm-cell .role{color:#8c8c8c;font-size:11px}
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+
+/* 详情 */
+.detail-page{padding:20px 24px}
+.detail-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
+.detail-title{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
+.card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;margin-bottom:12px;overflow:hidden}
+.card-header{padding:10px 16px;border-bottom:1px solid #f0f0f0;background:#fafafa;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
+.card-header i{color:#1677ff;font-size:15px}
+.card-body{padding:14px 16px}
+
+/* 基本信息：固定左列宽，左右对齐 */
+.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
+.field-row{display:flex;padding:5px 0}
+.field-label{width:90px;flex-shrink:0;font-size:13px;color:#8c8c8c;text-align:right;padding-right:12px;line-height:1.6}
+.field-val{font-size:13px;color:#1a1a1a;flex:1;line-height:1.6}
+.field-val.muted{color:#bfbfbf}
+
+/* 图文介绍 */
+.richtext-preview{border:1px solid #f0f0f0;border-radius:6px;padding:12px;min-height:60px;font-size:13px;color:#595959;line-height:1.8;background:#fafafa}
+
+/* 附件 */
+.attachment-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
+.attachment-item{border:1px dashed #91caff;border-radius:6px;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#1677ff;font-size:12px;background:#e8f4ff}
+.attachment-item i{font-size:22px;color:#bfbfbf}
+.attachment-filled{border:1px solid #e8e8e8;background:#f0f7ff;color:#1677ff}
+.attachment-filled i{color:#1677ff}
+
+/* 分佣 */
+.commission-block{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
+.comm-role-card{border:1px solid #e8e8e8;border-radius:6px;padding:12px 14px}
+.comm-role-title{font-size:12px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:4px}
+.comm-field{display:flex;justify-content:space-between;padding:3px 0;font-size:12px;border-bottom:1px solid #f5f5f5}
+.comm-field:last-child{border-bottom:none}
+.comm-field-label{color:#8c8c8c}
+.comm-field-val{color:#1a1a1a;font-weight:500}
+
+/* 对接人 */
+.person-tags{display:flex;flex-wrap:wrap;gap:6px}
+.person-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:#f0f7ff;border:1px solid #b6d9ff;border-radius:100px;font-size:12px;color:#0958d9}
+
+/* detail tabs */
+.detail-tabs{display:flex;border-bottom:1px solid #f0f0f0;padding:0 16px;background:#fafafa}
+.detail-tab{padding:10px 14px;font-size:13px;color:#8c8c8c;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
+.detail-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+.empty-state{text-align:center;padding:40px;color:#bfbfbf;font-size:13px}
+.empty-state i{font-size:28px;display:block;margin-bottom:8px}
+
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:flex-start;justify-content:center;overflow-y:auto;padding:32px 0}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:740px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden;margin:auto}
+.modal-header{padding:14px 20px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
+.modal-title{font-size:15px;font-weight:600}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:20px;max-height:76vh;overflow-y:auto}
+.modal-footer{padding:12px 20px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0;position:sticky;bottom:0;background:#fff}
+
+/* 表单 */
+.form-section{margin-bottom:22px}
+.form-section-title{font-size:13px;font-weight:600;color:#1a1a1a;margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;gap:6px}
+.form-section-title i{color:#1677ff}
+.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
+.form-row.full{grid-template-columns:1fr}
+.form-row.tri{grid-template-columns:1fr 1fr 1fr}
+.form-item{display:flex;flex-direction:column;gap:4px}
+.form-item label{font-size:12px;color:#595959}
+.req{color:#cf1322;margin-left:2px}
+.form-item input,.form-item select,.form-item textarea{height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;color:#1a1a1a;outline:none;background:#fff;width:100%}
+.form-item input:focus,.form-item select:focus,.form-item textarea:focus{border-color:#1677ff}
+.form-item textarea{height:80px;padding:8px 10px;resize:vertical}
+
+/* 富文本模拟 */
+.rich-toolbar{display:flex;flex-wrap:wrap;gap:2px;padding:6px 8px;border:1px solid #d9d9d9;border-bottom:none;border-radius:6px 6px 0 0;background:#fafafa}
+.rich-btn{padding:2px 6px;border-radius:4px;border:1px solid transparent;font-size:12px;cursor:pointer;color:#595959}
+.rich-btn:hover{background:#e8e8e8}
+.rich-area{border:1px solid #d9d9d9;border-radius:0 0 6px 6px;min-height:100px;padding:10px;font-size:13px;color:#8c8c8c;background:#fff}
+
+/* 附件上传 */
+.upload-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
+.upload-box{border:1px dashed #91caff;border-radius:6px;aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#1677ff;font-size:11px;background:#e8f4ff;cursor:pointer}
+.upload-box:hover{border-color:#1677ff;color:#1677ff}
+.upload-box i{font-size:20px}
+.upload-label{font-size:11px;color:#8c8c8c;margin-top:6px}
+
+/* 分佣规则 */
+.comm-rule-block{border:1px solid #e8e8e8;border-radius:6px;overflow:hidden;margin-bottom:10px}
+.comm-rule-header{padding:8px 12px;background:#fafafa;border-bottom:1px solid #f0f0f0;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
+.comm-rule-body{padding:12px}
+.comm-fields-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
+.comm-fields-row .form-item{min-width:120px;flex:1}
+
+/* 对接人搜索 */
+.person-search-wrap{position:relative}
+.person-search-input{width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px 0 30px;font-size:13px;outline:none}
+.person-search-input:focus{border-color:#1677ff}
+.search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);color:#8c8c8c;font-size:14px}
+.person-dropdown{border:1px solid #d9d9d9;border-radius:6px;margin-top:4px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08)}
+.person-option{padding:7px 12px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px}
+.person-option:hover{background:#f0f7ff}
+.person-option input[type=checkbox]{accent-color:#1677ff}
+.selected-persons{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;min-height:20px}
+.sel-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:#f0f7ff;border:1px solid #b6d9ff;border-radius:100px;font-size:12px;color:#0958d9}
+.sel-tag .rm{cursor:pointer;color:#8c8c8c;margin-left:2px;font-size:11px}
+.sel-tag .rm:hover{color:#cf1322}
+</style>
+</head>
+<body>
+
+<!-- ========== 列表页 ========== -->
+<div id="view-list" class="view active">
+<div class="list-page">
+  <div class="list-header">
+    <span class="list-title">产品目录管理</span>
+    <div style="display:flex;gap:8px">
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">超管工具</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+      <button class="btn btn-primary" onclick="showModal()"><i class="ti ti-plus"></i>新增合伙人推广产品</button>
+    </div>
+  </div>
+  <div class="tabs-nav">
+    <div class="tab-nav-item active">亲亲企服 (12)</div>
+    <div class="tab-nav-item">亲亲小保 (4)</div>
+  </div>
+  <div class="table-card">
+    <table>
+      <thead>
+        <tr>
+          <th>产品分类</th><th>产品名称</th><th>业务负责人</th><th>对接人</th>
+          <th>关联产品</th><th>价格区间</th><th>分佣规则</th>
+          <th>状态</th><th>是否主推</th><th>优先级</th><th>物料</th><th>操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>异地用工</td>
+          <td><span style="color:#1677ff;cursor:pointer" onclick="showDetail()">岗位外包</span></td>
+          <td>李玲玲</td>
+          <td><span class="tag tag-blue">李明</span> <span class="tag tag-blue">赵磊</span></td>
+          <td>—</td><td>61元/人/月</td>
+          <td><div class="comm-cell"><div><span class="role">渠道：</span>比例 2%·续费</div><div><span class="role">对接人：</span>比例 5%·续费</div><div><span class="role">合伙人：</span>比例 30%·续费</div></div></td>
+          <td><span class="tag tag-green">已上架</span></td><td>是</td><td>0</td><td>0</td>
+          <td><button class="btn-link danger">下架</button> <button class="btn-link" onclick="showDetail()">详情</button></td>
+        </tr>
+        <tr>
+          <td>财税服务</td>
+          <td><span style="color:#1677ff;cursor:pointer" onclick="showDetail()">测试固定返佣产品</span></td>
+          <td>李玲玲</td>
+          <td><span class="tag tag-blue">刘婷</span></td>
+          <td>—</td><td>1000-14000元/人</td>
+          <td><div class="comm-cell"><div><span class="role">渠道：</span>固定 ¥60·一次性</div><div><span class="role">对接人：</span>固定 ¥150·一次性</div><div><span class="role">合伙人：</span>固定 ¥300·一次性</div></div></td>
+          <td><span class="tag tag-green">已上架</span></td><td>是</td><td>0</td><td>0</td>
+          <td><button class="btn-link danger">下架</button> <button class="btn-link" onclick="showDetail()">详情</button></td>
+        </tr>
+        <tr>
+          <td>人事代理</td>
+          <td><span style="color:#1677ff;cursor:pointer">社保公积金托管</span></td>
+          <td>郭欢</td>
+          <td><span style="color:#bfbfbf;font-size:12px">未配置</span></td>
+          <td>—</td><td>1-5人 1,000元/年…</td>
+          <td><div class="comm-cell"><div><span class="role">渠道：</span>比例 2%·续费</div><div><span class="role">对接人：</span>比例 5%·续费</div><div><span class="role">合伙人：</span>比例 30%·续费</div></div></td>
+          <td><span class="tag tag-green">已上架</span></td><td>否</td><td>0</td><td>0</td>
+          <td><button class="btn-link danger">下架</button> <button class="btn-link">详情</button></td>
+        </tr>
+        <tr>
+          <td>财税服务</td>
+          <td><span style="color:#1677ff;cursor:pointer">测测试</span></td>
+          <td>问贝</td>
+          <td><span style="color:#bfbfbf;font-size:12px">未配置</span></td>
+          <td>—</td><td>33</td>
+          <td><div class="comm-cell"><div><span class="role">渠道：</span>固定 ¥200·一次性</div><div><span class="role">对接人：</span>固定 ¥400·一次性</div><div><span class="role">合伙人：</span>固定 ¥800·一次性</div></div></td>
+          <td><span class="tag tag-gray">草稿</span></td><td>否</td><td>0</td><td>0</td>
+          <td><button class="btn-link">上架</button> <button class="btn-link">详情</button></td>
+        </tr>
+      </tbody>
+    </table>
+    <div class="pagination">
+      <span>共 12 条</span>
+      <div style="display:flex;gap:4px">
+        <div class="page-btn"><i class="ti ti-chevron-left"></i></div>
+        <div class="page-btn active">1</div>
+        <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+
+<!-- ========== 详情页 ========== -->
+<div id="view-detail" class="view">
+<div class="detail-page">
+  <div class="detail-header">
+    <div style="display:flex;align-items:center;gap:10px">
+      <button class="btn" onclick="showList()"><i class="ti ti-arrow-left"></i>返回列表</button>
+      <span class="detail-title">合伙人推广产品详情 <span class="tag tag-green">已上架</span></span>
+    </div>
+    <div style="display:flex;gap:8px">
+      <button class="btn btn-primary" onclick="showModal()"><i class="ti ti-edit"></i>编辑</button>
+      <button class="btn"><i class="ti ti-download"></i>导出</button>
+      <button class="btn">管理工具</button>
+      <button class="btn"><i class="ti ti-share"></i>分享</button>
+    </div>
+  </div>
+
+  <!-- 基本信息：左右各7行均衡 -->
+  <div class="card">
+    <div class="card-header"><i class="ti ti-info-circle"></i>基本信息</div>
+    <div class="card-body">
+      <div class="info-grid">
+        <div>
+          <div class="field-row"><span class="field-label">产品分类</span><span class="field-val">异地用工</span></div>
+          <div class="field-row"><span class="field-label">产品名称</span><span class="field-val">岗位外包</span></div>
+          <div class="field-row"><span class="field-label">订单类型</span><span class="field-val">企业岗位外包</span></div>
+          <div class="field-row"><span class="field-label">产品介绍</span><span class="field-val">为企业异地用工提供员工社保、薪酬、个税一站式管理服务，解决异地注册分公司流程繁琐问题。</span></div>
+          <div class="field-row"><span class="field-label">价格区间</span><span class="field-val">61元/人/月</span></div>
+        </div>
+        <div>
+          <div class="field-row"><span class="field-label">是否主推</span><span class="field-val">是</span></div>
+          <div class="field-row"><span class="field-label">推广标语</span><span class="field-val">解决异地用工问题</span></div>
+          <div class="field-row"><span class="field-label">优先级</span><span class="field-val">0</span></div>
+          <div class="field-row"><span class="field-label">创建时间</span><span class="field-val">2026-06-12 16:26:08</span></div>
+          <div class="field-row"><span class="field-label">修改时间</span><span class="field-val">2026-06-23 14:34:12</span></div>
+          <div class="field-row"><span class="field-label">返佣方式</span><span class="field-val">续费持续返佣</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 对接人 & 业务负责人 -->
+  <div class="card">
+    <div class="card-header"><i class="ti ti-users"></i>对接人 &amp; 业务负责人</div>
+    <div class="card-body">
+      <div class="info-grid">
+        <div>
+          <div class="field-row">
+            <span class="field-label">对接人</span>
+            <span class="field-val">
+              <div class="person-tags">
+                <span class="person-tag"><i class="ti ti-user" style="font-size:11px"></i>李明</span>
+                <span class="person-tag"><i class="ti ti-user" style="font-size:11px"></i>赵磊</span>
+                <span class="person-tag"><i class="ti ti-user" style="font-size:11px"></i>刘婷</span>
+              </div>
+            </span>
+          </div>
+        </div>
+        <div>
+          <div class="field-row">
+            <span class="field-label">业务负责人</span>
+            <span class="field-val">李玲玲</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 分佣规则 -->
+  <div class="card">
+    <div class="card-header"><i class="ti ti-coin"></i>分佣规则配置</div>
+    <div class="card-body">
+      <div class="commission-block">
+        <div class="comm-role-card">
+          <div class="comm-role-title" style="color:#1677ff"><i class="ti ti-building"></i>渠道管理员分佣规则</div>
+          <div class="comm-field"><span class="comm-field-label">计算方式</span><span class="comm-field-val">比例</span></div>
+          <div class="comm-field"><span class="comm-field-label">计算基准</span><span class="comm-field-val">成交额</span></div>
+          <div class="comm-field"><span class="comm-field-label">比例设置</span><span class="comm-field-val">2%</span></div>
+        </div>
+        <div class="comm-role-card">
+          <div class="comm-role-title" style="color:#389e0d"><i class="ti ti-user-check"></i>对接人分佣规则</div>
+          <div class="comm-field"><span class="comm-field-label">计算方式</span><span class="comm-field-val">比例</span></div>
+          <div class="comm-field"><span class="comm-field-label">计算基准</span><span class="comm-field-val">成交额</span></div>
+          <div class="comm-field"><span class="comm-field-label">比例设置</span><span class="comm-field-val">5%</span></div>
+        </div>
+        <div class="comm-role-card">
+          <div class="comm-role-title" style="color:#d46b08"><i class="ti ti-users"></i>合伙人分佣规则</div>
+          <div class="comm-field"><span class="comm-field-label">计算方式</span><span class="comm-field-val">比例</span></div>
+          <div class="comm-field"><span class="comm-field-label">计算基准</span><span class="comm-field-val">成交额</span></div>
+          <div class="comm-field"><span class="comm-field-label">比例设置</span><span class="comm-field-val">30%</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- 产品图文介绍 -->
+  <div class="card">
+    <div class="card-header"><i class="ti ti-file-text"></i>产品图文介绍</div>
+    <div class="card-body">
+      <div class="richtext-preview" style="color:#bfbfbf">暂无图文内容</div>
+    </div>
+  </div>
+
+  <!-- 附件 -->
+  <div class="card">
+    <div class="card-header"><i class="ti ti-paperclip"></i>落地页 &amp; 海报模板</div>
+    <div class="card-body">
+      <div class="attachment-grid">
+        <div><div class="attachment-item"><i class="ti ti-photo"></i><span>用户落地页</span></div></div>
+        <div><div class="attachment-item attachment-filled"><i class="ti ti-photo"></i><span>合伙人落地页</span></div></div>
+        <div><div class="attachment-item"><i class="ti ti-photo"></i><span>对接人海报模板</span></div></div>
+        <div><div class="attachment-item"><i class="ti ti-photo"></i><span>合伙人海报模板</span></div></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Tabs -->
+  <div class="card">
+    <div class="detail-tabs">
+      <div class="detail-tab active">物料管理</div>
+      <div class="detail-tab">备注</div>
+      <div class="detail-tab">操作日志</div>
+    </div>
+    <div class="empty-state"><i class="ti ti-inbox"></i>暂无数据</div>
+  </div>
+</div>
+</div>
+
+<!-- ========== 新增/编辑弹窗 ========== -->
+<div class="modal-overlay" id="modal">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title">新增合伙人推广产品</span>
+      <i class="ti ti-x modal-close" onclick="hideModal()"></i>
+    </div>
+    <div class="modal-body">
+
+      <!-- 基本信息 -->
+      <div class="form-section">
+        <div class="form-section-title"><i class="ti ti-info-circle"></i>基本信息</div>
+        <div class="form-row">
+          <div class="form-item"><label>产品类型<span class="req">*</span></label>
+            <select><option value="">请选择</option><option>异地用工</option><option>财税服务</option><option>人事代理</option></select></div>
+          <div class="form-item"><label>产品名称<span class="req">*</span></label>
+            <input type="text" placeholder="请输入产品名称"></div>
+        </div>
+        <div class="form-row full">
+          <div class="form-item"><label>产品介绍<span class="req">*</span></label>
+            <textarea placeholder="请输入产品介绍"></textarea></div>
+        </div>
+        <div class="form-row">
+          <div class="form-item"><label>订单类型<span class="req">*</span></label>
+            <select><option value="">请选择</option><option>企业岗位外包</option><option>劳务派遣</option></select></div>
+          <div class="form-item"><label>价格区间<span class="req">*</span></label>
+            <input type="text" placeholder="如：61元/人/月"></div>
+        </div>
+        <div class="form-row">
+          <div class="form-item"><label>业务负责人<span class="req">*</span></label>
+            <input type="text" placeholder="请输入"></div>
+          <div class="form-item"><label>返佣方式<span class="req">*</span></label>
+            <select><option value="">请选择</option><option>续费持续返佣</option><option>一次性返佣</option></select></div>
+        </div>
+        <div class="form-row">
+          <div class="form-item"><label>推广标语</label>
+            <input type="text" placeholder="请输入推广标语"></div>
+          <div class="form-item"><label>是否主推<span class="req">*</span></label>
+            <select><option>否</option><option>是</option></select></div>
+        </div>
+        <div class="form-row">
+          <div class="form-item"><label>优先级（越小越靠前）</label>
+            <input type="number" placeholder="0" value="0"></div>
+          <div class="form-item"></div>
+        </div>
+      </div>
+
+      <!-- 对接人配置 -->
+      <div class="form-section">
+        <div class="form-section-title"><i class="ti ti-users"></i>对接人配置</div>
+        <div class="form-item">
+          <label>选择对接人（支持搜索、多选）</label>
+          <div class="person-search-wrap">
+            <i class="ti ti-search search-icon"></i>
+            <input class="person-search-input" type="text" placeholder="搜索员工姓名..." id="personSearch"
+              oninput="filterPersons(this.value)" onfocus="showDropdown()" onblur="setTimeout(hideDropdown,200)">
+          </div>
+          <div class="person-dropdown" id="personDropdown" style="display:none">
+            <div class="person-option" onclick="togglePerson('李明','cb-lm')"><input type="checkbox" id="cb-lm"><label for="cb-lm" style="cursor:pointer">李明 · 销售部</label></div>
+            <div class="person-option" onclick="togglePerson('赵磊','cb-zl')"><input type="checkbox" id="cb-zl"><label for="cb-zl" style="cursor:pointer">赵磊 · 销售部</label></div>
+            <div class="person-option" onclick="togglePerson('刘婷','cb-lt')"><input type="checkbox" id="cb-lt"><label for="cb-lt" style="cursor:pointer">刘婷 · 综合服务部</label></div>
+            <div class="person-option" onclick="togglePerson('王芳','cb-wf')"><input type="checkbox" id="cb-wf"><label for="cb-wf" style="cursor:pointer">王芳 · 财税部</label></div>
+            <div class="person-option" onclick="togglePerson('陈晓','cb-cx')"><input type="checkbox" id="cb-cx"><label for="cb-cx" style="cursor:pointer">陈晓 · 人事部</label></div>
+          </div>
+          <div class="selected-persons" id="selectedPersons"></div>
+        </div>
+      </div>
+
+      <!-- 分佣规则 -->
+      <div class="form-section">
+        <div class="form-section-title"><i class="ti ti-coin"></i>分佣规则配置</div>
+
+        <div class="comm-rule-block">
+          <div class="comm-rule-header" style="color:#1677ff"><i class="ti ti-building"></i>渠道管理员分佣规则</div>
+          <div class="comm-rule-body">
+            <div class="comm-fields-row">
+              <div class="form-item" style="min-width:130px;max-width:150px">
+                <label>计算方式<span class="req">*</span></label>
+                <select onchange="toggleComm('ch',this.value)">
+                  <option value="">请选择</option><option value="ratio">比例</option><option value="fixed">固定金额</option>
+                </select>
+              </div>
+              <div class="form-item" id="ch-base" style="display:none">
+                <label>佣金计算基准<span class="req">*</span></label>
+                <select><option value="">请选择</option><option>成交额</option><option>服务费</option><option>利润</option></select>
+              </div>
+              <div class="form-item" id="ch-ratio" style="display:none;max-width:120px">
+                <label>比例设置<span class="req">*</span></label>
+                <input type="number" placeholder="如：2" style="padding-right:24px">
+              </div>
+              <div class="form-item" id="ch-amount" style="display:none;max-width:140px">
+                <label>金额（元）<span class="req">*</span></label>
+                <input type="number" placeholder="如：60">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="comm-rule-block">
+          <div class="comm-rule-header" style="color:#389e0d"><i class="ti ti-user-check"></i>对接人分佣规则</div>
+          <div class="comm-rule-body">
+            <div class="comm-fields-row">
+              <div class="form-item" style="min-width:130px;max-width:150px">
+                <label>计算方式<span class="req">*</span></label>
+                <select onchange="toggleComm('as',this.value)">
+                  <option value="">请选择</option><option value="ratio">比例</option><option value="fixed">固定金额</option>
+                </select>
+              </div>
+              <div class="form-item" id="as-base" style="display:none">
+                <label>佣金计算基准<span class="req">*</span></label>
+                <select><option value="">请选择</option><option>成交额</option><option>服务费</option><option>利润</option></select>
+              </div>
+              <div class="form-item" id="as-ratio" style="display:none;max-width:120px">
+                <label>比例设置<span class="req">*</span></label>
+                <input type="number" placeholder="如：5">
+              </div>
+              <div class="form-item" id="as-amount" style="display:none;max-width:140px">
+                <label>金额（元）<span class="req">*</span></label>
+                <input type="number" placeholder="如：150">
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="comm-rule-block">
+          <div class="comm-rule-header" style="color:#d46b08"><i class="ti ti-users"></i>合伙人分佣规则</div>
+          <div class="comm-rule-body">
+            <div class="comm-fields-row">
+              <div class="form-item" style="min-width:130px;max-width:150px">
+                <label>计算方式<span class="req">*</span></label>
+                <select onchange="toggleComm('pt',this.value)">
+                  <option value="">请选择</option><option value="ratio">比例</option><option value="fixed">固定金额</option>
+                </select>
+              </div>
+              <div class="form-item" id="pt-base" style="display:none">
+                <label>佣金计算基准<span class="req">*</span></label>
+                <select><option value="">请选择</option><option>成交额</option><option>服务费</option><option>利润</option></select>
+              </div>
+              <div class="form-item" id="pt-ratio" style="display:none;max-width:120px">
+                <label>比例设置<span class="req">*</span></label>
+                <input type="number" placeholder="如：30">
+              </div>
+              <div class="form-item" id="pt-amount" style="display:none;max-width:140px">
+                <label>金额（元）<span class="req">*</span></label>
+                <input type="number" placeholder="如：300">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 产品图文介绍 -->
+      <div class="form-section">
+        <div class="form-section-title"><i class="ti ti-file-text"></i>产品图文介绍</div>
+        <div class="rich-toolbar">
+          <button class="rich-btn">正文▾</button>
+          <button class="rich-btn"><b>B</b></button>
+          <button class="rich-btn"><u>U</u></button>
+          <button class="rich-btn"><i>I</i></button>
+          <button class="rich-btn">A▾</button>
+          <button class="rich-btn">字号▾</button>
+          <button class="rich-btn">字体▾</button>
+          <button class="rich-btn">行高▾</button>
+          <button class="rich-btn">≡</button>
+          <button class="rich-btn">有序列表</button>
+          <button class="rich-btn">对齐▾</button>
+          <button class="rich-btn">↩</button>
+          <button class="rich-btn">↪</button>
+          <button class="rich-btn">表格▾</button>
+          <button class="rich-btn">🖼 上传图片</button>
+          <button class="rich-btn">更多▾</button>
+        </div>
+        <div class="rich-area" contenteditable="true">请输入内容...</div>
+      </div>
+
+      <!-- 附件上传 -->
+      <div class="form-section">
+        <div class="form-section-title"><i class="ti ti-paperclip"></i>落地页 &amp; 海报模板</div>
+        <div class="upload-grid">
+          <div>
+            <div class="upload-box"><i class="ti ti-plus"></i></div>
+            <div class="upload-label">用户落地页</div>
+          </div>
+          <div>
+            <div class="upload-box"><i class="ti ti-plus"></i></div>
+            <div class="upload-label">合伙人落地页</div>
+          </div>
+          <div>
+            <div class="upload-box"><i class="ti ti-plus"></i></div>
+            <div class="upload-label">对接人海报模板</div>
+          </div>
+          <div>
+            <div class="upload-box"><i class="ti ti-plus"></i></div>
+            <div class="upload-label">合伙人海报模板</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal()">取消</button>
+      <button class="btn btn-primary">确定</button>
+    </div>
+  </div>
+</div>
+
+<script>
+function showList(){ document.getElementById('view-list').classList.add('active'); document.getElementById('view-detail').classList.remove('active'); }
+function showDetail(){ document.getElementById('view-detail').classList.add('active'); document.getElementById('view-list').classList.remove('active'); }
+function showModal(){ document.getElementById('modal').classList.add('show'); }
+function hideModal(){ document.getElementById('modal').classList.remove('show'); }
+
+function toggleComm(prefix, val) {
+  ['base','ratio','amount'].forEach(f => {
+    const el = document.getElementById(prefix+'-'+f);
+    if (!el) return;
+    if (val === 'ratio')  el.style.display = f==='amount' ? 'none' : '';
+    else if (val === 'fixed') el.style.display = f==='amount' ? '' : 'none';
+    else el.style.display = 'none';
+  });
+}
+
+const selected = new Set();
+function togglePerson(name, cbId) {
+  if (selected.has(name)) selected.delete(name); else selected.add(name);
+  const cb = document.getElementById(cbId);
+  if (cb) cb.checked = selected.has(name);
+  renderSelected();
+}
+function renderSelected() {
+  document.getElementById('selectedPersons').innerHTML = [...selected].map(n =>
+    `<span class="sel-tag"><i class="ti ti-user" style="font-size:10px"></i>${n}<span class="rm" onclick="removePerson('${n}')">✕</span></span>`
+  ).join('');
+}
+function removePerson(name) { selected.delete(name); renderSelected(); }
+function showDropdown(){ document.getElementById('personDropdown').style.display='block'; }
+function hideDropdown(){ document.getElementById('personDropdown').style.display='none'; }
+function filterPersons(val) {
+  document.querySelectorAll('#personDropdown .person-option').forEach(o=>{
+    o.style.display = o.textContent.trim().includes(val) ? '' : 'none';
+  });
+}
+document.querySelectorAll('.detail-tab').forEach(t=>{
+  t.addEventListener('click',()=>{ document.querySelectorAll('.detail-tab').forEach(x=>x.classList.remove('active')); t.classList.add('active'); });
+});
+document.querySelectorAll('.tab-nav-item').forEach(t=>{
+  t.addEventListener('click',()=>{ document.querySelectorAll('.tab-nav-item').forEach(x=>x.classList.remove('active')); t.classList.add('active'); });
+});
+</script>
+</body>
+</html>

HTML原型/referrer_reward.html

+<!DOCTYPE html>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<title>介绍人奖励记录</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;color:#1a1a1a;background:#f0f2f5}
+.layout{display:flex;height:100vh;overflow:hidden}
+
+.sidebar{width:190px;background:#fff;border-right:1px solid #e8e8e8;display:flex;flex-direction:column;flex-shrink:0}
+.sidebar-logo{padding:12px 16px;font-size:13px;font-weight:600;color:#1677ff;border-bottom:1px solid #f0f0f0}
+.nav-group{padding:10px 16px 4px;font-size:11px;color:#bfbfbf;letter-spacing:.04em}
+.nav-item{padding:9px 16px;font-size:13px;color:#595959;cursor:pointer;border-left:3px solid transparent}
+.nav-item:hover{background:#f5f5f5;color:#1677ff}
+.nav-item.active{color:#1677ff;background:#e8f0fe;border-left-color:#1677ff;font-weight:500}
+
+.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
+
+.page-header{background:#fff;border-bottom:1px solid #e8e8e8;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:50px;flex-shrink:0}
+.page-title{font-size:15px;font-weight:600}
+.header-btns{display:flex;gap:8px}
+
+.filter-wrap{background:#fff;border-bottom:1px solid #e8e8e8;padding:12px 24px;flex-shrink:0}
+.filter-grid{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center}
+.filter-item{display:flex;align-items:center;gap:6px;white-space:nowrap}
+.filter-item label{color:#8c8c8c;font-size:13px}
+.filter-item input,.filter-item select{height:30px;border:1px solid #d9d9d9;border-radius:6px;padding:0 8px;font-size:12px;outline:none;background:#fff;min-width:130px}
+.filter-item input:focus,.filter-item select:focus{border-color:#1677ff}
+.filter-btns{margin-left:auto;display:flex;gap:8px}
+
+.content{padding:16px 24px;flex:1}
+
+.status-tabs{display:flex;gap:0;border-bottom:1px solid #e8e8e8;margin-bottom:0}
+.status-tab{padding:8px 16px;font-size:13px;color:#595959;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
+.status-tab.active{color:#1677ff;border-bottom-color:#1677ff;font-weight:500}
+
+.summary-bar{background:#f0f7ff;border:1px solid #b6d9ff;border-radius:6px;padding:8px 14px;font-size:12px;color:#0958d9;margin:10px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
+.summary-bar .nums{display:flex;gap:24px}
+.summary-num{display:flex;flex-direction:column;align-items:center;gap:1px}
+.summary-num .val{font-size:18px;font-weight:600;color:#1677ff}
+.summary-num .lbl{font-size:11px;color:#8c8c8c}
+
+.table-card{background:#fff;border:1px solid #e8e8e8;border-radius:8px;overflow:hidden}
+table{width:100%;border-collapse:collapse;font-size:12px}
+thead tr{background:#fafafa;border-bottom:1px solid #e8e8e8}
+th{padding:10px 12px;text-align:left;color:#8c8c8c;font-weight:500;white-space:nowrap}
+tbody tr{border-bottom:1px solid #f5f5f5;transition:background .1s}
+tbody tr:hover{background:#fafcff}
+tbody tr:last-child{border-bottom:none}
+td{padding:10px 12px;vertical-align:middle}
+
+.btn{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:6px;border:1px solid #d9d9d9;background:#fff;font-size:12px;cursor:pointer;color:#595959;white-space:nowrap;transition:all .15s}
+.btn:hover{border-color:#1677ff;color:#1677ff}
+.btn-primary{background:#1677ff;color:#fff;border-color:#1677ff}
+.btn-primary:hover{background:#0958d9}
+.btn-warning{background:#fa8c16;color:#fff;border-color:#fa8c16;font-weight:500}
+.btn-warning:hover{background:#d46b08}
+.btn-sm{padding:2px 8px;font-size:11px;border-radius:4px}
+.btn-link{border:none;background:none;color:#1677ff;padding:0;font-size:12px;cursor:pointer}
+.btn-link:hover{color:#0958d9}
+
+.tag{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 8px;border-radius:100px;border:1px solid;white-space:nowrap}
+.tag-green{background:#f6ffed;color:#389e0d;border-color:#b7eb8f}
+.tag-orange{background:#fff7e6;color:#d46b08;border-color:#ffd591}
+.tag-gray{background:#fafafa;color:#8c8c8c;border-color:#d9d9d9}
+.tag-blue{background:#e8f4ff;color:#1677ff;border-color:#91caff}
+
+.avatar{width:26px;height:26px;border-radius:50%;background:#1677ff;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;flex-shrink:0}
+
+.pagination{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-top:1px solid #f0f0f0;font-size:12px;color:#8c8c8c}
+.page-btn{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid #d9d9d9;background:#fff;cursor:pointer;font-size:12px}
+.page-btn.active{background:#1677ff;color:#fff;border-color:#1677ff}
+
+/* 弹窗 */
+.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100;align-items:center;justify-content:center}
+.modal-overlay.show{display:flex}
+.modal{background:#fff;border-radius:8px;width:420px;box-shadow:0 8px 32px rgba(0,0,0,.15);overflow:hidden}
+.modal-header{padding:14px 18px 12px;border-bottom:1px solid #f0f0f0;display:flex;align-items:center;justify-content:space-between}
+.modal-title{font-size:14px;font-weight:600}
+.modal-close{font-size:16px;color:#8c8c8c;cursor:pointer}
+.modal-body{padding:16px 18px}
+.modal-footer{padding:10px 18px 14px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #f0f0f0}
+.info-row{display:flex;font-size:13px;margin-bottom:10px;align-items:center}
+.info-label{width:80px;color:#8c8c8c;flex-shrink:0;text-align:right;padding-right:10px}
+.warn-box{background:#fff1f0;border:1px solid #ffa39e;border-radius:6px;padding:10px 12px;font-size:12px;color:#cf1322;line-height:1.7;display:flex;gap:6px;margin-top:4px}
+</style>
+</head>
+<body>
+<div class="layout">
+
+  <!-- 侧边栏 -->
+  <div class="sidebar">
+    <div class="sidebar-logo"><i class="ti ti-building"></i> 亲亲创客</div>
+    <div class="nav-group">佣金结算</div>
+    <div class="nav-item">合伙人佣金结算管理</div>
+    <div class="nav-item">渠道管理员佣金结算</div>
+    <div class="nav-item">对接人佣金结算</div>
+    <div class="nav-item active">介绍人奖励记录</div>
+    <div class="nav-group">其他</div>
+    <div class="nav-item">服务商结算</div>
+    <div class="nav-item">结算服务商付款管理</div>
+  </div>
+
+  <div class="main">
+    <div class="page-header">
+      <span class="page-title">介绍人奖励记录</span>
+      <div class="header-btns">
+        <button class="btn"><i class="ti ti-download"></i>导出</button>
+        <button class="btn"><i class="ti ti-share"></i>分享</button>
+      </div>
+    </div>
+
+    <!-- 筛选 -->
+    <div class="filter-wrap">
+      <div class="filter-grid">
+        <div class="filter-item"><label>介绍人</label><input type="text" placeholder="搜索姓名"></div>
+        <div class="filter-item"><label>合伙人</label><input type="text" placeholder="搜索姓名/手机号"></div>
+        <div class="filter-item"><label>所属客户</label><input type="text" placeholder="搜索企业名称"></div>
+        <div class="filter-item"><label>触发时间</label>
+          <div style="display:flex;align-items:center;gap:4px">
+            <input type="date" style="min-width:120px">
+            <span style="color:#bfbfbf">至</span>
+            <input type="date" style="min-width:120px">
+          </div>
+        </div>
+        <div class="filter-btns">
+          <button class="btn btn-primary"><i class="ti ti-search"></i>查询</button>
+          <button class="btn"><i class="ti ti-refresh"></i>重置</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="content">
+      <!-- 状态Tab -->
+      <div class="status-tabs">
+        <div class="status-tab" onclick="switchTab(this,'pending')">待发放 (4)</div>
+        <div class="status-tab" onclick="switchTab(this,'done')">已发放 (6)</div>
+        <div class="status-tab active" onclick="switchTab(this,'all')">全部 (10)</div>
+      </div>
+
+      <!-- 待发放时显示批量操作栏 -->
+      <div id="batch-action-bar" style="display:none;padding:10px 0 8px;display:none;align-items:center;justify-content:space-between">
+        <div style="display:flex;align-items:center;gap:8px">
+          <input type="checkbox" id="check-all" onchange="toggleAll(this)" style="width:14px;height:14px;accent-color:#1677ff">
+          <span style="font-size:13px;color:#595959">全选</span>
+          <span id="sel-tip" style="font-size:12px;color:#fa8c16;font-weight:500;margin-left:8px"></span>
+        </div>
+        <button class="btn btn-warning" onclick="openBatchConfirm()">
+          <i class="ti ti-checks"></i>批量标记已发放
+        </button>
+      </div>
+
+      <div class="table-card">
+        <table>
+          <thead>
+            <tr>
+              <th style="width:36px"></th>
+              <th>介绍人</th>
+              <th>部门</th>
+              <th>合伙人</th>
+              <th>所属客户（首单）</th>
+              <th>奖励金额</th>
+              <th>首单触发时间</th>
+              <th>状态</th>
+              <th>发放时间</th>
+              <th>发放备注</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody id="table-body">
+          </tbody>
+        </table>
+        <div class="pagination">
+          <div style="display:flex;align-items:center;gap:12px">
+            <span>共 10 条 &nbsp;
+              <select style="height:26px;border:1px solid #d9d9d9;border-radius:4px;font-size:12px">
+                <option>20条/页</option><option>50条/页</option>
+              </select>
+            </span>
+            <span id="sel-tip" style="color:#fa8c16;font-size:12px;font-weight:500"></span>
+          </div>
+          <div style="display:flex;gap:4px">
+            <div class="page-btn"><i class="ti ti-chevron-left"></i></div>
+            <div class="page-btn active">1</div>
+            <div class="page-btn"><i class="ti ti-chevron-right"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- 单条发放确认弹窗 -->
+<div class="modal-overlay" id="modal-confirm" style="z-index:9999">
+  <div class="modal">
+    <div class="modal-header">
+      <span class="modal-title">确认发放奖励</span>
+      <i class="ti ti-x modal-close" onclick="hideModal('modal-confirm')"></i>
+    </div>
+    <div class="modal-body">
+      <div class="info-row"><span class="info-label">介绍人</span><span id="m-name" style="font-weight:500">—</span></div>
+      <div class="info-row"><span class="info-label">合伙人</span><span id="m-partner">—</span></div>
+      <div class="info-row"><span class="info-label">所属客户</span><span id="m-customer">—</span></div>
+      <div class="info-row">
+        <span class="info-label">奖励金额</span>
+        <span id="m-amount" style="font-size:16px;font-weight:600;color:#d46b08">¥50.00</span>
+      </div>
+      <div class="warn-box">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>确认发放后将标记为「已发放」，请确保已完成线下转账后再操作。此操作不可撤销。</span>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal('modal-confirm')">取消</button>
+      <button class="btn btn-warning" onclick="confirmPay()"><i class="ti ti-check"></i>确认已发放</button>
+    </div>
+  </div>
+</div>
+
+<!-- 批量发放确认弹窗 -->
+<div class="modal-overlay" id="modal-batch" style="z-index:9999">
+  <div class="modal" style="width:420px">
+    <div class="modal-header">
+      <span class="modal-title"><i class="ti ti-checks" style="color:#fa8c16;margin-right:4px"></i>批量标记已发放</span>
+      <i class="ti ti-x modal-close" onclick="hideModal('modal-batch')"></i>
+    </div>
+    <div class="modal-body">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px">
+        <div style="background:#fff7e6;border:1px solid #ffd591;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:24px;font-weight:600;color:#d46b08" id="batch-count">0</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">已选条数</div>
+        </div>
+        <div style="background:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;padding:12px 14px;text-align:center">
+          <div style="font-size:24px;font-weight:600;color:#389e0d" id="batch-amount">¥0.00</div>
+          <div style="font-size:12px;color:#8c8c8c;margin-top:2px">总奖励金额</div>
+        </div>
+      </div>
+      <div style="margin-bottom:14px">
+        <div style="font-size:12px;color:#595959;margin-bottom:6px">发放时间 <span style="color:#cf1322">*</span></div>
+        <input type="date" id="batch-pay-date" style="width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none"
+          onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
+        <div style="font-size:11px;color:#8c8c8c;margin-top:4px">请选择实际完成线下发放的日期</div>
+      </div>
+      <div style="margin-bottom:14px">
+        <div style="font-size:12px;color:#595959;margin-bottom:6px">发放备注</div>
+        <input type="text" id="batch-pay-remark" placeholder="如：微信转账、企业转账等（选填）"
+          style="width:100%;height:32px;border:1px solid #d9d9d9;border-radius:6px;padding:0 10px;font-size:13px;outline:none"
+          onfocus="this.style.borderColor='#1677ff'" onblur="this.style.borderColor='#d9d9d9'">
+      </div>
+      <div class="warn-box">
+        <i class="ti ti-alert-triangle" style="flex-shrink:0;margin-top:1px"></i>
+        <span>批量确认后将全部标记为「已发放」，此操作不可撤销。</span>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn" onclick="hideModal('modal-batch')">取消</button>
+      <button class="btn btn-warning" onclick="confirmBatchPay()"><i class="ti ti-check"></i>确认全部已发放</button>
+    </div>
+  </div>
+</div>
+
+<script>
+var data = [
+  { name:'李明',   dept:'销售部',   partner:'张伟 / 138****5566', customer:'远航科技有限公司',   amount:50, triggerTime:'2026-06-05 10:22', status:'done', payTime:'2026-06-06 09:00', remark:'微信转账' },
+  { name:'陈晓',   dept:'行政部',   partner:'王芳 / 139****8822', customer:'启航教育咨询',       amount:50, triggerTime:'2026-06-08 14:35', status:'done', payTime:'2026-06-09 10:15', remark:'微信转账' },
+  { name:'张美玉', dept:'人事部',   partner:'李强 / 136****4411', customer:'锦绣餐饮集团',       amount:50, triggerTime:'2026-06-10 09:18', status:'done', payTime:'2026-06-11 11:00', remark:'企业转账' },
+  { name:'赵磊',   dept:'销售部',   partner:'刘敏 / 150****7878', customer:'新桥律师事务所',     amount:50, triggerTime:'2026-06-12 16:40', status:'done', payTime:'2026-06-13 09:30', remark:'微信转账' },
+  { name:'郭欢',   dept:'服务部',   partner:'陈涛 / 134****7950', customer:'华盛机构',           amount:50, triggerTime:'2026-06-15 11:05', status:'done', payTime:'2026-06-16 10:00', remark:'微信转账' },
+  { name:'刘婷',   dept:'综合部',   partner:'周磊 / 151****2216', customer:'某某科技有限公司',   amount:50, triggerTime:'2026-06-18 15:22', status:'done', payTime:'2026-06-19 09:45', remark:'微信转账' },
+  { name:'王芳',   dept:'财税部',   partner:'孙杰 / 136****8541', customer:'蓝海投资管理公司',   amount:50, triggerTime:'2026-06-20 10:10', status:'pending', payTime:'—', remark:'—' },
+  { name:'李鹏飞', dept:'销售部',   partner:'赵琳 / 151****2215', customer:'中兴建材集团',       amount:50, triggerTime:'2026-06-21 13:30', status:'pending', payTime:'—', remark:'—' },
+  { name:'赛晓丽', dept:'渠道部',   partner:'吴伟 / 137****3269', customer:'顺达物流有限公司',   amount:50, triggerTime:'2026-06-22 09:55', status:'pending', payTime:'—', remark:'—' },
+  { name:'张情',   dept:'市场部',   partner:'黄磊 / 166****8880', customer:'云端科技股份公司',   amount:50, triggerTime:'2026-06-23 14:48', status:'pending', payTime:'—', remark:'—' },
+];
+
+var currentFilter = 'all';
+var confirmIdx = -1;
+
+function avatarColor(name) {
+  var colors = ['#1677ff','#389e0d','#d46b08','#531dab','#cf1322','#085041'];
+  var h = 0;
+  for (var i = 0; i < name.length; i++) h += name.charCodeAt(i);
+  return colors[h % colors.length];
+}
+
+function nowTs() {
+  var n = new Date();
+  return n.getFullYear() + '-'
+    + String(n.getMonth()+1).padStart(2,'0') + '-'
+    + String(n.getDate()).padStart(2,'0') + ' '
+    + String(n.getHours()).padStart(2,'0') + ':'
+    + String(n.getMinutes()).padStart(2,'0');
+}
+
+function isPending() { return currentFilter === 'pending'; }
+
+function render(filter) {
+  currentFilter = filter;
+  var list = filter === 'all' ? data : data.filter(function(d){ return d.status === filter; });
+  var showCb = filter === 'pending';
+  var bar = document.getElementById('batch-action-bar');
+  var checkAll = document.getElementById('check-all');
+  bar.style.display = showCb ? 'flex' : 'none';
+  if (checkAll) checkAll.checked = false;
+  document.getElementById('sel-tip').textContent = '';
+
+  var tbody = document.getElementById('table-body');
+  tbody.innerHTML = list.map(function(d) {
+    var idx = data.indexOf(d);
+    var cbCell = showCb
+      ? '<td style="text-align:center"><input type="checkbox" class="row-cb" data-idx="' + idx + '" onchange="updateSel()"></td>'
+      : '<td></td>';
+    return '<tr>'
+      + cbCell
+      + '<td><div style="display:flex;align-items:center;gap:8px"><div class="avatar" style="background:' + avatarColor(d.name) + '">' + d.name[0] + '</div><span style="font-weight:500">' + d.name + '</span></div></td>'
+      + '<td style="color:#8c8c8c">' + d.dept + '</td>'
+      + '<td>' + d.partner + '</td>'
+      + '<td style="font-weight:500">' + d.customer + '</td>'
+      + '<td style="font-size:14px;font-weight:600;color:#d46b08">¥' + d.amount + '.00</td>'
+      + '<td style="color:#8c8c8c;font-size:12px">' + d.triggerTime + '</td>'
+      + '<td>' + (d.status === 'done'
+          ? '<span class="tag tag-green"><i class="ti ti-check" style="font-size:10px"></i>已发放</span>'
+          : '<span class="tag tag-orange">待发放</span>') + '</td>'
+      + '<td style="color:#8c8c8c;font-size:12px">' + d.payTime + '</td>'
+      + '<td style="color:#8c8c8c;font-size:12px">' + d.remark + '</td>'
+      + '<td>' + (d.status === 'pending'
+          ? '<button class="btn btn-warning btn-sm" onclick="openConfirm(' + idx + ')"><i class="ti ti-coin"></i>标记已发放</button>'
+          : '<span style="color:#bfbfbf;font-size:12px">—</span>') + '</td>'
+      + '</tr>';
+  }).join('');
+}
+
+function updateSel() {
+  var cbs = document.querySelectorAll('.row-cb:checked');
+  var total = 0;
+  cbs.forEach(function(cb) { total += data[parseInt(cb.dataset.idx)].amount; });
+  var tip = document.getElementById('sel-tip');
+  tip.textContent = cbs.length > 0 ? '已选 ' + cbs.length + ' 条，合计 ¥' + total.toFixed(2) : '';
+}
+
+function toggleAll(master) {
+  document.querySelectorAll('.row-cb').forEach(function(cb) { cb.checked = master.checked; });
+  updateSel();
+}
+
+function switchTab(el, filter) {
+  document.querySelectorAll('.status-tab').forEach(function(t) { t.classList.remove('active'); });
+  el.classList.add('active');
+  render(filter);
+}
+
+function openConfirm(idx) {
+  confirmIdx = idx;
+  var d = data[idx];
+  document.getElementById('m-name').textContent = d.name + '（' + d.dept + '）';
+  document.getElementById('m-partner').textContent = d.partner;
+  document.getElementById('m-customer').textContent = d.customer;
+  document.getElementById('m-amount').textContent = '¥' + d.amount + '.00';
+  document.getElementById('modal-confirm').classList.add('show');
+}
+
+function openBatchConfirm() {
+  var cbs = document.querySelectorAll('.row-cb:checked');
+  if (cbs.length === 0) { alert('请先勾选需要发放的记录'); return; }
+  var total = 0;
+  cbs.forEach(function(cb) { total += data[parseInt(cb.dataset.idx)].amount; });
+  document.getElementById('batch-count').textContent = cbs.length;
+  document.getElementById('batch-amount').textContent = '¥' + total.toFixed(2);
+  document.getElementById('batch-pay-date').value = '';
+  document.getElementById('batch-pay-date').style.borderColor = '#d9d9d9';
+  document.getElementById('batch-pay-remark').value = '';
+  document.getElementById('modal-batch').classList.add('show');
+}
+
+function hideModal(id) { document.getElementById(id).classList.remove('show'); }
+
+function confirmPay() {
+  if (confirmIdx >= 0) {
+    var ts = nowTs();
+    data[confirmIdx].status = 'done';
+    data[confirmIdx].payTime = ts;
+    data[confirmIdx].remark = '线下发放';
+  }
+  hideModal('modal-confirm');
+  render(currentFilter);
+}
+
+function confirmBatchPay() {
+  var dateVal = document.getElementById('batch-pay-date').value;
+  if (!dateVal) {
+    document.getElementById('batch-pay-date').style.borderColor = '#ff4d4f';
+    document.getElementById('batch-pay-date').focus();
+    return;
+  }
+  var cbs = document.querySelectorAll('.row-cb:checked');
+  var remarkVal = document.getElementById('batch-pay-remark').value.trim() || '线下批量发放';
+  cbs.forEach(function(cb) {
+    var d = data[parseInt(cb.dataset.idx)];
+    d.status = 'done';
+    d.payTime = dateVal;
+    d.remark = remarkVal;
+  });
+  hideModal('modal-batch');
+  render(currentFilter);
+}
+
+render('all');
+</script>
+</body>
+</html>