v 0.1.1

frontend/src/pages/KnowledgeGraph.tsx

@@ -94,7 +94,7 @@ export default function KnowledgeGraph() {
   const { data, loading, error, reload } = useApi(api.knowledgeGraph);
   const coursesState = useApi(api.courses);
   const [domain, setDomain] = useState("初等");
-  const [viewMode, setViewMode] = useState<GraphViewMode>("graph");
+  const [viewMode, setViewMode] = useState<GraphViewMode>("tree");
   const [selected, setSelected] = useState<KnowledgeGraphNode | null>(null);
   const [editOpen, setEditOpen] = useState(false);
   const [editing, setEditing] = useState<KnowledgeGraphNode | null>(null);
@@ -536,23 +536,37 @@ export default function KnowledgeGraph() {
                     key={resource.id}
                     color={tagColor.info}
                     closable
+                    className="graph-resource-tag"
                     onClose={(event) => {
                       event.preventDefault();
                       removeResource(resource.id);
                     }}
+                  >
+                    <span
+                      className="graph-resource-name"
+                      title={resource.title || resource.url}
                     >
                       {resource.title || resource.url}
+                    </span>
                   </Tag>
                 ))}
                 {(selected.resources ?? []).length === 0 && <Hint>{t("graph.none")}</Hint>}
               </Space>
-              <Space.Compact style={{ marginTop: 8, width: "100%" }}>
+              {/*
+                不能再用 Space.Compact + width:100%：选中长课程名时，
+                Select 的 min-content 会把整个控件撑长、把「关联」挤出面板。
+                改成 flex 行，Select 占剩余宽度且允许收缩，按钮宽度固定。
+              */}
+              <Flex gap={8} align="center" style={{ marginTop: 8 }}>
                 <Select
                   allowClear
-                  style={{ width: "100%" }}
+                  style={{ flex: 1, minWidth: 0 }}
                   placeholder={courses.length ? t("graph.coursePlaceholder") : t("graph.coursePlaceholderEmpty")}
                   value={courseId}
                   onChange={setCourseId}
+                  popupMatchSelectWidth={false}
+                  classNames={{ popup: { root: "long-option-select" } }}
+                  styles={{ popup: { root: { minWidth: 260, maxWidth: 420 } } }}
                   options={courses.map((course) => ({
                     value: course.id,
                     label: course.name,
@@ -561,7 +575,7 @@ export default function KnowledgeGraph() {
                 <Button type="primary" onClick={() => addResource(selected)}>
                   {t("graph.link")}
                 </Button>
-              </Space.Compact>
+              </Flex>
             </div>
           </Space>
           </>

frontend/src/styles.css

@@ -1090,6 +1090,45 @@ body {
   top: 76px;
 }
 
+/*
+ * 详情面板里的课程/资源标签：课程名可能很长，antd 的 Tag 默认 nowrap 会撑出面板。
+ * 这里让它占满一行、在标签内部换行，关闭按钮留在右上角。
+ */
+.graph-detail .ant-tag.graph-resource-tag {
+  display: inline-flex;
+  /* 居中：关闭按钮跟着整块标签垂直居中，不再贴首行顶部 */
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: auto;
+  padding-block: 2px;
+  white-space: normal;
+}
+
+/* 关闭按钮自带 7px 左边距，与 flex 的 gap 叠加会偏右：间距统一交给 gap */
+.graph-detail .ant-tag.graph-resource-tag .ant-tag-close-icon {
+  margin-inline-start: 0;
+  line-height: 1;
+}
+
+.graph-resource-name {
+  min-width: 0;
+  line-height: 1.7;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+/*
+ * 长选项下拉（课程名等）：下拉框按内容自适应、最宽 420px，
+ * 名字再长就在选项里折行，而不是被裁成一句省略号。
+ */
+.long-option-select .ant-select-item-option-content {
+  white-space: normal;
+  overflow-wrap: anywhere;
+  line-height: 1.7;
+  padding-block: 2px;
+}
+
 /* 树视图：和画布同一块高度，长了在自己内部滚 */
 .graph-tree {
   max-height: 560px;