From d8e1eb9ca328d3bbaa8b243fa30a80cab742ae8c Mon Sep 17 00:00:00 2001
From: xiaozhu <2395895331@qq.com>
Date: Wed, 2 Sep 2026 16:37:43 +0800
Subject: [PATCH] =?UTF-8?q?update:=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/features/admin/UserFormDialog.tsx     | 99 ++++++++++++-------
 .../app/features/platform/PythonEditor.tsx    |  3 +-
 .../app/features/platform/ScriptWorkspace.tsx |  3 +-
 frontend/app/features/platform/scriptPath.ts  | 16 +++
 4 files changed, 81 insertions(+), 40 deletions(-)
 create mode 100644 frontend/app/features/platform/scriptPath.ts

diff --git a/frontend/app/features/admin/UserFormDialog.tsx b/frontend/app/features/admin/UserFormDialog.tsx
index 12ad2c3..f13ea44 100644
--- a/frontend/app/features/admin/UserFormDialog.tsx
+++ b/frontend/app/features/admin/UserFormDialog.tsx
@@ -1,3 +1,5 @@
+import { useMemo, useState } from "react";
+import { ChevronDown } from "lucide-react";
 import type { Employee, Role, Workspace } from "../../services/api";
 import {
   AppFormDialog,
@@ -59,6 +61,18 @@ export function UserFormDialog({
   onClose: () => void;
   onResetPassword?: () => void;
 }) {
+  const roleOptions = useMemo(
+    () => (editing ? roles : createRoleOptions),
+    [editing, roles, createRoleOptions],
+  );
+  const [roleMenuOpen, setRoleMenuOpen] = useState(false);
+  const roleDisabled = editing
+    ? editing.user_id === currentUserId || roles.length === 0
+    : createRoleOptions.length === 0;
+  const selectedRole =
+    roleOptions.find((role) => role.role_code === form.role_code) ??
+    roleOptions[0];
+
   return (
     <AppFormDialog
       open={open}
@@ -122,45 +136,54 @@ export function UserFormDialog({
         </label>
         <label className={formFieldClass}>
           <span>角色</span>
-          <select
-            className={formInputClass}
-            value={form.role_code}
-            disabled={
-              editing
-                ? editing.user_id === currentUserId || roles.length === 0
-                : createRoleOptions.length === 0
-            }
-            onChange={(event) =>
-              onChangeForm({
-                ...form,
-                role_code: event.target.value as UserFormState["role_code"],
-              })
-            }
-          >
-            {editing ? (
-              roles.length === 0 ? (
-                <option value="" disabled>
-                  加载中…
-                </option>
-              ) : (
-                roles.map((role) => (
-                  <option key={role.role_code} value={role.role_code}>
-                    {role.role_name}
-                  </option>
-                ))
-              )
-            ) : createRoleOptions.length === 0 ? (
-              <option value="" disabled>
-                加载中…
-              </option>
-            ) : (
-              createRoleOptions.map((role) => (
-                <option key={role.role_code} value={role.role_code}>
-                  {role.role_name}
-                </option>
-              ))
+          <div className="relative">
+            <button
+              type="button"
+              disabled={roleDisabled}
+              className={`${formInputClass} flex items-center justify-between gap-2 ${
+                roleDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+              }`}
+              onClick={() => !roleDisabled && setRoleMenuOpen((open) => !open)}
+            >
+              <span className="truncate text-left">
+                {selectedRole ? selectedRole.role_name : "加载中…"}
+              </span>
+              <ChevronDown
+                size={15}
+                className={`shrink-0 text-[#7890a8] transition-transform ${
+                  roleMenuOpen ? "rotate-180" : "rotate-0"
+                }`}
+              />
+            </button>
+            {roleMenuOpen && !roleDisabled && (
+              <div className="absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-[#d6e0e9] bg-white shadow-lg">
+                <div className="max-h-[180px] overflow-y-auto">
+                  {roleOptions.map((role) => {
+                    const isSelected = role.role_code === form.role_code;
+                    return (
+                      <button
+                        key={role.role_code}
+                        type="button"
+                        className={`flex w-full items-center justify-between border-0 bg-white px-3 py-2 text-left text-[12px] text-[#2b4056] hover:bg-[#f3f7fb] ${
+                          isSelected ? "bg-[#edf5ff] font-semibold text-[#176cc0]" : ""
+                        }`}
+                        onClick={() => {
+                          onChangeForm({
+                            ...form,
+                            role_code: role.role_code as UserFormState["role_code"],
+                          });
+                          setRoleMenuOpen(false);
+                        }}
+                      >
+                        <span className="truncate">{role.role_name}</span>
+                        {isSelected && <span className="ml-2 text-[11px]">✓</span>}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
             )}
-          </select>
+          </div>
         </label>
         {!editing && (
           <CreateUserProjectField
diff --git a/frontend/app/features/platform/PythonEditor.tsx b/frontend/app/features/platform/PythonEditor.tsx
index 90d9f85..63f85b1 100644
--- a/frontend/app/features/platform/PythonEditor.tsx
+++ b/frontend/app/features/platform/PythonEditor.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
+import { displayScriptPath } from "./scriptPath";
 import { Info, Loader2Icon } from "lucide-react";
 
 import type { ScriptItem } from "../../services/api";
@@ -114,7 +115,7 @@ export function PythonEditor({
           <i className="size-1.5 rounded-full bg-[#20b77d]" />
           Workspace Python Editor
         </span>
-        <span>{script.relative_path}</span>
+        <span>{displayScriptPath(script.relative_path)}</span>
       </div>
       <div className="relative min-h-0 flex-1 overflow-hidden">
         <Editor
diff --git a/frontend/app/features/platform/ScriptWorkspace.tsx b/frontend/app/features/platform/ScriptWorkspace.tsx
index dcc84fb..9d301fb 100644
--- a/frontend/app/features/platform/ScriptWorkspace.tsx
+++ b/frontend/app/features/platform/ScriptWorkspace.tsx
@@ -26,6 +26,7 @@ import {type PythonEditorBuffer, useScriptWorkspaceStore} from "./state/scriptWo
 import { useAuth } from "../../context/AuthContext";
 import { getScriptContent } from "../../services/api";
 import {PythonEditor} from "~/features/platform/PythonEditor";
+import { displayScriptPath } from "./scriptPath";
 
 function fileIconTone(type: ScriptType | "data") {
   if (type === "notebook") return "text-[#e15e50] bg-[#fff0ed]";
@@ -761,7 +762,7 @@ export function ScriptWorkspace({
                   {script.script_name}
                 </h2>
                 <p className="m-0 font-mono text-[10px] text-[#8997a6]">
-                  {script.relative_path}
+                  {displayScriptPath(script.relative_path)}
                 </p>
               </div>
               <button
diff --git a/frontend/app/features/platform/scriptPath.ts b/frontend/app/features/platform/scriptPath.ts
new file mode 100644
index 0000000..cc170bc
--- /dev/null
+++ b/frontend/app/features/platform/scriptPath.ts
@@ -0,0 +1,16 @@
+/**
+ * Storage metadata keeps workspace files under
+ * `workspace/<owner-user-id>/<logical-path>`.  That owner segment is an
+ * implementation detail and should never be presented as part of a script's
+ * user-facing path.
+ */
+export function displayScriptPath(relativePath: string): string {
+  const normalized = relativePath.replaceAll("\\", "/");
+  const parts = normalized.split("/");
+
+  if (parts[0] === "workspace" && parts[1] && parts.length > 2) {
+    return parts.slice(2).join("/");
+  }
+
+  return normalized;
+}