dev

backend/api/routes/openapi.py

@@ -47,6 +47,23 @@ async def get_skills_list(redis: RedisDep, skillName: Annotated[str, Param(...,
     return response(data=data)
 
 
+@router.get('/{jobId}/{jobGrowId}/skills/', operation_id='skillsByJob')
+async def get_cn_skills_by_job(redis: RedisDep, jobId: Annotated[str, Path(..., description='职业')], jobGrowId: Annotated[str, Path(..., description='转职')]) -> SkillsListResponse:
+    """
+    获取职业技能列表
+    """
+    key = f'openapi:{jobId}:{jobGrowId}:skills'
+
+    def get_skills_by_job():
+        # This function should retrieve the skills by job and jobGrow
+        # For now, we return a placeholder list
+        with open(f'./openapi/data/{jobId}/{jobGrowId}/cn/skill_tree.json', encoding='utf-8') as f:
+            skills_data = json.load(f)
+        return skills_data
+
+    skills_list = get_redis_info(redis, key, get_skills_by_job)
+    return response(data=skills_list)
+
 @router.get('/{jobId}/{jobGrowId}/{skillId}/', operation_id='skillDetail')
 async def get_cn_skill_info(redis: RedisDep, jobId: Annotated[str, Path(..., description='职业')], jobGrowId: Annotated[str, Path(..., description='转职')], skillId: Annotated[str, Path(..., description='技能')], level: Annotated[int, Param(..., description='技能等级')] = None) -> SkillDetailResponse:
     """

frontend/src/components/dnf/Equipment/RaritySelect/index.vue

@@ -20,11 +20,11 @@ const value = defineModel<string>()
 const rarities = [
   {
     value: '稀有',
-    background: '#d06eff',
+    background: '#9879da',
   },
   {
     value: '神器',
-    background: '#fe11ff',
+    background: '#ef28c1',
   },
   {
     value: '传说',
@@ -32,11 +32,11 @@ const rarities = [
   },
   {
     value: '史诗',
-    background: '#feca11',
+    background: '#fcb600',
   },
   {
     value: '太初',
-    background: 'linear-gradient(180deg, #70faa7 0%, #7bfefe 100%)',
+    background: 'linear-gradient(to bottom, #58fa84 20%, #58decc 40%, #58c6ff 60%)',
   },
 ]
 

frontend/src/pages/Character/Index.vue

@@ -14,7 +14,7 @@
       >
         <RouterView></RouterView>
       </div>
-      <div class="m-1 ml-auto h-auto overflow-x-auto z-2 box-border">
+      <div class="m-1 ml-auto h-auto z-2 box-border">
         <Result></Result>
       </div>
     </div>

frontend/src/pages/Character/Skill/components/SkillDetail/index.tsx

@@ -60,10 +60,11 @@ export default defineComponent({
     const desc = computed(() => skillInfo.value?.descDetail.split('\n'))
 
     const detail = computed(() => {
-      const items = skillInfo.value?.attribute.optionDesc?.split('\n').filter((item) => !!item) ?? []
+      const items =
+        skillInfo.value?.attribute.optionDesc?.split('\n').filter((item) => !!item) ?? []
       const details = items?.map((a) => {
         const beforeReplace = a.match(/^(.+?\s*:\s*[^\{]+)(\{value\d+\}.*)$/)
-        if(beforeReplace) {
+        if (beforeReplace) {
           a = `${beforeReplace[1]}<span class="skill_info_value">${beforeReplace[2]}</span>`
         }
         const matches = a.match(/{([^}]+)}/g)
@@ -74,10 +75,7 @@ export default defineComponent({
             if (/^value.+/.test(key)) {
               const value = skillInfo.value?.attribute.optionValue[key as `value${string}`] ?? '-'
               if (value) {
-                a = a.replace(
+                a = a.replace(match, `<span style="padding:0px 2px;color:#4AA256">${value}</span>`)
-                  match,
-                  `<span style="padding:0px 2px;color:#4AA256">${value}</span>`,
-                )
               }
             }
           })
@@ -104,20 +102,30 @@ export default defineComponent({
         <div class="skill_title">技能描述</div>
         <div class="h-auto max-h-250px">
           <div class="h-full overflow-y-auto bg-#161816 p-2px">
-            {desc.value?.map((item) => item.startsWith("[") ? (<div class="min-h-10px">{item}</div>) :(
+            {desc.value?.map((item) =>
-              <div class="min-h-10px" style="text-indent:20px;">{item}</div>
+              item.startsWith('[') ? (
-            ))}
+                <div class="min-h-10px">{item}</div>
+              ) : (
+                <div class="min-h-10px" style="text-indent:20px;">
+                  {item}
+                </div>
+              ),
+            )}
           </div>
         </div>
+        {(detail.value.length > 0 ) && (
+          <>
             <div class="skill_title">技能属性</div>
             <div class="flex-1 overflow-y-auto">
               <div class=" flex flex-col gap-2px">
-            {detail.value?.map((item) => (
+                {detail.value.map((item) => (
                   <div class="flex justify-between item items-center" v-html={item}></div>
                 ))}
               </div>
             </div>
           </>
+        )}
+      </>
     )
 
     const renderSkillVp = () => (
@@ -144,7 +152,7 @@ export default defineComponent({
 
     onMounted(() => {
       watchEffect(() => {
-        (skillInfo.value?.evolution?.length ?? 0) == 0 && (curTab.value = 0)
+        ;(skillInfo.value?.evolution?.length ?? 0) == 0 && (curTab.value = 0)
       })
     })
 

frontend/src/pages/Character/Skill/index.vue

@@ -50,7 +50,7 @@
     </div>
 
     <div
-      class="absolute right--60px"
+      class="absolute right--65px"
       v-if="curCurrentSkill.skillId && curCurrentSkill.level > 0 && !showSkillDetail"
     >
       <div class="text-#AE8D5A p-1px box-border flex pl-2 w-auto">

frontend/src/style/app.scss

@@ -282,16 +282,16 @@ body,
   color: #68d5ed;
 }
 .rare {
-  color: #b36bff;
+  color: #9879da;
 }
 .artifact {
-  color: #ff00ff;
+  color: #ef28c1;
 }
 .legend {
-  color: #e96e00;
+  color: #ff7700;
 }
 .epic {
-  color: #ffb400;
+  color: #fcb600;
 }
 .chronicle {
   color: #ff6666;
@@ -314,7 +314,7 @@ body,
 }
 
 .primeval {
-  background-image: -webkit-linear-gradient(top, #28d931, #33acea);
+  background-image: linear-gradient(to bottom, #5aff62, #58c6ff);
   color: transparent;
   background-clip: text;
   text-shadow: none;