feat: show supplies stages open status

close #287
arkntools · Jan 4, 2025 · c16b74a · c16b74a
1 parent a9543d0
commit c16b74a
Show file tree

Hide file tree

Showing 15 changed files with 348 additions and 41 deletions.
diff --git a/src/components/global/MiniChip.vue b/src/components/global/MiniChip.vue
@@ -4,6 +4,24 @@
   ></span>
 </template>
 
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  height: {
+    type: Number,
+    default: 16,
+  },
+  fontSize: {
+    type: Number,
+    default: 12,
+  },
+});
+
+const heightCss = computed(() => `${props.height}px`);
+const fontSizeCss = computed(() => `${props.fontSize}px`);
+</script>
+
 <style lang="scss" scoped>
 .mini-chip {
   align-items: center;
@@ -17,9 +35,9 @@
   text-decoration: none;
   vertical-align: middle;
   white-space: nowrap;
-  border-radius: 8px;
-  font-size: 12px;
-  height: 16px;
+  border-radius: 100px;
+  font-size: v-bind(fontSizeCss);
+  height: v-bind(heightCss);
   &::before {
     background-color: currentColor;
     bottom: 0;
@@ -42,6 +60,7 @@
     display: inline-flex;
     height: 100%;
     max-width: 100%;
+    line-height: v-bind(heightCss);
   }
 }
 </style>
diff --git a/src/components/material/DropDialog.vue b/src/components/material/DropDialog.vue
@@ -1,39 +1,43 @@
 <template>
   <div class="mdui-dialog mdui-typo" ref="dialogRef">
     <div class="mdui-dialog-title mdui-p-b-1">
-      {{ $t(`material.${dropFocus}`) }}
-      <small class="mdui-p-l-1 mdui-text-color-theme-secondary"
-        >{{ parent.inputs[dropFocus].need || 0 }} | {{ parent.inputs[dropFocus].have || 0 }} |
-        <span v-theme-class="$root.color.pinkText"
-          >{{ parent.gaps[dropFocus][0] || 0
-          }}<small v-if="parent.gaps[dropFocus][1] > 0">
-            ({{ parent.gaps[dropFocus][1] }})</small
-          ></span
-        ></small
-      >
-      <span class="mdui-p-l-1">
-        <button
-          v-if="
-            parent.showSyntBtn(materialTable[dropFocus]) &&
-            parent.getSynthesizeMaxTimes(dropFocus) > 1
-          "
-          v-longpress="() => parent.customSynthesize(dropFocus)"
-          @click="parent.synthesize(dropFocus)"
-          @contextmenu.prevent="parent.customSynthesize(dropFocus)"
-          class="synt-btn mdui-btn mdui-ripple mdui-btn-dense small-btn mdui-p-x-1 mdui-m-l-05"
-          v-theme-class="$root.color.pinkText"
-          >{{ $t('common.synthesize') }} {{ parent.getSynthesizeMaxTimes(dropFocus) }}</button
-        >
-        <button
-          v-if="parent.showSyntBtn(materialTable[dropFocus])"
-          v-longpress="() => parent.customSynthesize(dropFocus)"
-          @click="parent.synthesize(dropFocus, 1)"
-          @contextmenu.prevent="parent.customSynthesize(dropFocus)"
-          class="synt-btn mdui-btn mdui-ripple mdui-btn-dense small-btn mdui-p-x-1 mdui-m-l-05"
-          v-theme-class="$root.color.pinkText"
-          >{{ $t('common.synthesize') }} 1</button
-        >
-      </span>
+      <div class="mdui-valign">
+        <div class="flex" style="align-items: baseline">
+          {{ $t(`material.${dropFocus}`) }}
+          <small class="mdui-p-l-1 mdui-text-color-theme-secondary" style="line-height: 1"
+            >{{ parent.inputs[dropFocus].need || 0 }} | {{ parent.inputs[dropFocus].have || 0 }} |
+            <span v-theme-class="$root.color.pinkText"
+              >{{ parent.gaps[dropFocus][0] || 0
+              }}<span v-if="parent.gaps[dropFocus][1] > 0">
+                ({{ parent.gaps[dropFocus][1] }})</span
+              ></span
+            ></small
+          >
+        </div>
+        <span class="mdui-p-l-1">
+          <button
+            v-if="
+              parent.showSyntBtn(materialTable[dropFocus]) &&
+              parent.getSynthesizeMaxTimes(dropFocus) > 1
+            "
+            v-longpress="() => parent.customSynthesize(dropFocus)"
+            @click="parent.synthesize(dropFocus)"
+            @contextmenu.prevent="parent.customSynthesize(dropFocus)"
+            class="synt-btn mdui-btn mdui-ripple mdui-btn-dense small-btn mdui-p-x-1 mdui-m-l-05"
+            v-theme-class="$root.color.pinkText"
+            >{{ $t('common.synthesize') }} {{ parent.getSynthesizeMaxTimes(dropFocus) }}</button
+          >
+          <button
+            v-if="parent.showSyntBtn(materialTable[dropFocus])"
+            v-longpress="() => parent.customSynthesize(dropFocus)"
+            @click="parent.synthesize(dropFocus, 1)"
+            @contextmenu.prevent="parent.customSynthesize(dropFocus)"
+            class="synt-btn mdui-btn mdui-ripple mdui-btn-dense small-btn mdui-p-x-1 mdui-m-l-05"
+            v-theme-class="$root.color.pinkText"
+            >{{ $t('common.synthesize') }} 1</button
+          >
+        </span>
+      </div>
       <div class="mdui-text-color-theme-secondary text-10px">{{
         parent.formulaTooltips[dropFocus]
       }}</div>
@@ -47,6 +51,7 @@
           >{{ $t(`character.${char}`) }}</span
         ></div
       >
+      <SuppliesStagesOpenInfo class="mdui-m-y-1" :item-id="dropFocus" />
       <p v-if="parent.dropDetails.length > 0" class="mdui-m-b-0 mdui-m-t-1 text-16px"
         >{{ $t('common.stage') }} | {{ $t('cultivate.dropDetail.expectedAP') }}⚡ |
         {{ $t('cultivate.dropDetail.apEfficiency') }} |
@@ -118,9 +123,10 @@
 
 <script setup>
 import { computed, inject, ref } from 'vue';
-import ArknNumItem from '@/components/ArknNumItem.vue';
 import { MDUI_DIALOG_EMITS, useMduiDialog } from '@/mixins/mduiDialog';
 import { useDataStore } from '@/store/data';
+import ArknNumItem from '@/components/ArknNumItem.vue';
+import SuppliesStagesOpenInfo from './SuppliesStagesOpenInfo.vue';
 
 const parent = inject('parent')();
 const dropFocus = computed(() => parent.dropFocus);

diff --git a/src/components/material/PlannerDialog.vue b/src/components/material/PlannerDialog.vue
@@ -56,7 +56,17 @@
             class="from-name mdui-text-color-theme-secondary mdui-text-truncate"
             >{{ $t(`zone.${parent.stageFromNameIdTable[stage.code]}`) }}</small
           >
+          <SuppliesStagesOpenInfo
+            v-if="$root.screenWidth >= 650"
+            :stage-code="stage.code"
+            style="margin-left: auto"
+          />
         </h5>
+        <SuppliesStagesOpenInfo
+          v-if="$root.screenWidth < 650"
+          class="mdui-m-t-2 mdui-m-b-1"
+          :stage-code="stage.code"
+        />
         <div class="num-item-list">
           <ArknNumItem
             v-for="drop in stage.drops"
@@ -148,9 +158,10 @@
 
 <script setup>
 import { computed, inject, ref } from 'vue';
+import { MDUI_DIALOG_EMITS, useMduiDialog } from '@/mixins/mduiDialog';
 import PlanSetting from '@/components/material/PlanSetting.vue';
 import ArknNumItem from '@/components/ArknNumItem.vue';
-import { MDUI_DIALOG_EMITS, useMduiDialog } from '@/mixins/mduiDialog';
+import SuppliesStagesOpenInfo from './SuppliesStagesOpenInfo.vue';
 
 const parent = inject('parent')();
 const plan = computed(() => parent.plan);

diff --git a/src/components/material/SuppliesStagesOpenInfo.vue b/src/components/material/SuppliesStagesOpenInfo.vue
@@ -0,0 +1,97 @@
+<template>
+  <div v-if="info" class="supplies-info" :class="{ 'is-dark': isDark }">
+    <MiniChip
+      class="flex-no-shrink"
+      :class="{
+        'mdui-color-green-700': info.isOpen,
+        'mdui-color-grey-600': !info.isOpen,
+      }"
+      :height="18"
+      >{{ $t(`cultivate.suppliesStages.${info.isOpen ? 'open' : 'close'}`) }}</MiniChip
+    >
+    <div v-if="info.days" class="open-days mdui-m-l-1">
+      <div
+        v-for="i in 7"
+        :key="i"
+        class="open-days-item"
+        :class="{
+          'is-open': info.days.has(i),
+          'is-today': store.curDay === i,
+        }"
+        >{{ i }}</div
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue';
+import { useSuppliesStagesOpenStore } from '@/store/suppliesStagesOpen';
+
+const props = defineProps({
+  itemId: [String, Number],
+  stageCode: String,
+});
+
+const store = useSuppliesStagesOpenStore();
+
+const isDark = inject('isDark')();
+
+const info = computed(() =>
+  props.itemId
+    ? store.getItemSuppliesStageOpenInfo(props.itemId)
+    : props.stageCode
+      ? store.getSuppliesStageOpenInfo(props.stageCode)
+      : undefined,
+);
+</script>
+
+<style lang="scss" scoped>
+.supplies-info {
+  display: flex;
+  align-items: center;
+}
+
+.open-days {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.open-days-item {
+  --text-color: #444;
+  --active-text-color: #fff;
+  --active-bg-color: #666;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  line-height: 1;
+  font-weight: bold;
+  width: 14px;
+  height: 14px;
+  color: var(--text-color);
+  border: solid 2px var(--active-bg-color);
+
+  &.is-open {
+    background-color: var(--active-bg-color);
+    color: var(--active-text-color);
+  }
+
+  &.is-today::before {
+    content: 'TODAY';
+    position: absolute;
+    color: var(--text-color);
+    top: calc(-100% - 2px);
+  }
+}
+
+.is-dark {
+  .open-days-item {
+    --text-color: #ccc;
+    --active-text-color: #000;
+    --active-bg-color: #aaa;
+  }
+}
+</style>
diff --git a/src/data/changelog.json b/src/data/changelog.json
@@ -1,4 +1,8 @@
 [
+  {
+    "time": "2025-01-04",
+    "changes": ["【精英材料计算】显示资源收集关卡开放状态"]
+  },
   {
     "time": "2024-12-07",
     "changes": [

diff --git a/src/locales/cn/cultivate.json b/src/locales/cn/cultivate.json
@@ -113,5 +113,9 @@
     "accountManagement": "账号管理",
     "editName": "编辑名称",
     "deleteConfirm": "确定删除账号“{0}”吗？"
+  },
+  "suppliesStages": {
+    "open": "开放中",
+    "close": "未开放"
   }
 }
diff --git a/src/locales/jp/cultivate.json b/src/locales/jp/cultivate.json
@@ -111,5 +111,9 @@
     "accountManagement": "アカウント管理",
     "editName": "名前を編集します",
     "deleteConfirm": "アカウント「{0}」を削除したいですか？"
+  },
+  "suppliesStages": {
+    "open": "開催中",
+    "close": "未開催"
   }
 }
diff --git a/src/locales/tw/cultivate.json b/src/locales/tw/cultivate.json
@@ -110,5 +110,9 @@
     "accountManagement": "帳號管理",
     "editName": "編輯名稱",
     "deleteConfirm": "確定刪除帳號「{0}」嗎？"
+  },
+  "suppliesStages": {
+    "open": "開放中",
+    "close": "未開放"
   }
 }
diff --git a/src/locales/us/cultivate.json b/src/locales/us/cultivate.json
@@ -112,5 +112,9 @@
     "accountManagement": "Account management",
     "editName": "Edit name",
     "deleteConfirm": "Are you sure to delete the account \"{0}\"?"
+  },
+  "suppliesStages": {
+    "open": "OPEN",
+    "close": "CLOSED"
   }
 }
diff --git a/src/main.js b/src/main.js
@@ -3,8 +3,8 @@ import './utils/polyfills';
 import './utils/migration';
 import './registerServiceWorker';
 import _ from 'lodash';
-import Vue from 'vue';
-import { mapActions } from 'pinia';
+import Vue, { computed } from 'vue';
+import { mapActions, mapWritableState } from 'pinia';
 import Mdui from 'mdui';
 import App from './App.vue';
 import { router } from './router';
@@ -18,6 +18,7 @@ import { loadVConsole } from '@/utils/vConsole';
 import { encodeURIComponentEUCJP } from '@/utils/coder';
 import { IS_DEV } from '@/utils/env';
 import { useHotUpdateStore } from '@/store/hotUpdate';
+import { useGlobalStore } from '@/store/global';
 
 import defineVueProperty from './plugins/defineVueProperty';
 import './plugins/globalComponents';
@@ -59,6 +60,7 @@ new Vue({
     return {
       isReleasedChar: this.isReleasedChar,
       getRoot: () => this,
+      isDark: () => computed(() => this.dark),
     };
   },
   data: {
@@ -80,7 +82,6 @@ new Vue({
       darkThemeFollowSystem: true,
     },
     systemDarkTheme: false,
-    server: locales[0].short,
     locales,
     servers,
     themeEnum: {
@@ -116,6 +117,7 @@ new Vue({
     },
   },
   computed: {
+    ...mapWritableState(useGlobalStore, ['server']),
     smallScreen() {
       return this.screenWidth <= 450;
     },

diff --git a/src/store/global.js b/src/store/global.js
@@ -0,0 +1,8 @@
+import { defineStore } from 'pinia';
+import { locales } from '@/constant/lang';
+
+export const useGlobalStore = defineStore('globalData', {
+  state: () => ({
+    server: locales[0].short,
+  }),
+});