新增日历表头时间，修改模版布局

Paimon_Calendar/draw.py

@@ -1,96 +0,0 @@
-from PIL import Image, ImageDraw, ImageFont
-from pathlib import Path
-
-res_path = Path(__file__).parent.parent / 'res'
-font = ImageFont.truetype(str(res_path / 'wqy-microhei.ttc'), 20)
-
-width = 500
-
-color = [
-    {'front': 'black', 'back': 'white'},
-    {'front': 'white', 'back': 'ForestGreen'},
-    {'front': 'white', 'back': 'DarkOrange'},
-    {'front': 'white', 'back': 'BlueViolet'},
-]
-
-
-def create_image(item_number):
-    height = item_number * 30
-    im = Image.new('RGBA', (width, height), (255, 255, 255, 0))
-    return im
-
-
-def draw_rec(im, color, x, y, w, h, r):
-    draw = ImageDraw.Draw(im)
-    draw.rectangle((x+r, y, x+w-r, y+h), fill=color)
-    draw.rectangle((x, y+r, x+w, y+h-r), fill=color)
-    r = r * 2
-    draw.ellipse((x, y, x+r, y+r), fill=color)
-    draw.ellipse((x+w-r, y, x+w, y+r), fill=color)
-    draw.ellipse((x, y+h-r, x+r, y+h), fill=color)
-    draw.ellipse((x+w-r, y+h-r, x+w, y+h), fill=color)
-
-
-def draw_text(im, x, y, w, h, text, align, color):
-    draw = ImageDraw.Draw(im)
-    tw, th = draw.textsize(text, font=font)
-    y = y + (h - th) / 2
-    if align == 0:  # 居中
-        x = x + (w - tw) / 2
-    elif align == 1:  # 左对齐
-        x = x + 5
-    elif align == 2:  # 右对齐
-        x = x + w - tw - 5
-    draw.text((x, y), text, fill=color, font=font)
-
-
-def draw_item(im, n, t, text, days, forever):
-    if t >= len(color):
-        t = 1
-    x = 0
-    y = n * 30
-    height = 28
-
-    draw_rec(im, color[t]['back'], x, y, width, height, 6)
-
-    im1 = Image.new('RGBA', (width - 120, 28), (255, 255, 255, 0))
-    draw_text(im1, 0, 0, width, height, text, 1, color[t]['front'])
-    _, _, _, a = im1.split()
-    im.paste(im1, (x, y), mask=a)
-
-    if days > 0:
-        if forever:
-            text1 = '永久开放'
-        else:
-            text1 = f'{days}天后结束'
-    elif days < 0:
-        text1 = f'{-days}天后开始'
-    else:
-        text1 = '即将结束'
-    draw_text(im, x, y, width, height, text1, 2, color[t]['front'])
-
-
-def draw_title(im, n, left=None, middle=None, right=None):
-    x = 0
-    y = n * 30
-    height = 28
-
-    draw_rec(im, color[0]['back'], x, y, width, height, 6)
-    if middle:
-        draw_text(im, x, y, width, height, middle, 0, color[0]['front'])
-    if left:
-        draw_text(im, x, y, width, height, left, 1, color[0]['front'])
-    if right:
-        draw_text(im, x, y, width, height, right, 2, color[0]['front'])
-
-
-def draw_title1(im, n, day_list):
-    x = 0
-    y = n * 30
-    height = 28
-    color = 'black'
-
-    n = len(day_list)
-    for i in range(n):
-        x = width / n * i
-        draw_text(im, x, y, width, height, day_list[i], 1, color)

Paimon_Calendar/generate.py

@@ -1,13 +1,14 @@
+import jinja2
 from nonebot import require
-
 require("nonebot_plugin_htmlrender")
 from nonebot_plugin_htmlrender import html_to_pic
-import jinja2
-
 from .event import *
-from .draw import *
+from datetime import datetime, timedelta
+
 
 body = []
+weeks = []
+weekList = ['一', '二', '三', '四', '五', '六', '日']
 template_path = Path(__file__).parent / 'template'
 env = jinja2.Environment(loader=jinja2.FileSystemLoader(template_path), enable_async=True)
 
@@ -15,8 +16,24 @@ env = jinja2.Environment(loader=jinja2.FileSystemLoader(template_path), enable_a
 async def generate_day_schedule(server='cn'):
     events = await get_events(server, 0, 15)
     has_prediction = False
-    """ 追加数据前先执行清除，以防数据叠加 """
     body.clear()
+    weeks.clear()
+    t = datetime.now()
+
+    for i in range(7):
+        d2 = (t + timedelta(days=i)).strftime("%Y-%m-%d")
+        """ 分割 [年|月|日]"""
+        date_full = str(d2).split("-")
+
+        current = 'm-events-calendar__table-header-current' if t.strftime("%d") == date_full[2] else ""
+        date = re.search(r'0\d+', date_full[1]).group(0).replace('0', '') if re.search(r'0\d+', date_full[1]) else date_full[1]
+
+        week = datetime(int(date_full[0]), int(date_full[1]), int(date_full[2])).isoweekday()
+        weeks.append({
+            'week': f'星期{weekList[week - 1]}',
+            'date': f'{date}.{date_full[2]}',
+            'current': current
+        })
 
     for event in events:
         if event['start_days'] > 0:
@@ -45,5 +62,5 @@ async def generate_day_schedule(server='cn'):
                     'banner': event['banner']
                 })
 
-    content = await template.render_async(body=body, css_path=template_path)
+    content = await template.render_async(body=body, css_path=template_path, week=weeks)
-    return await html_to_pic(content, wait=0, viewport={"width": 600, "height": 100})
+    return await html_to_pic(content, wait=0, viewport={"width": 600, "height": 10})

Paimon_Calendar/template/calendar.html

@@ -6,16 +6,33 @@
 	<title>原神日历</title>
 	<link rel="stylesheet" href="{{ css_path }}/iview.css" />
 	<link rel="stylesheet" href="{{ css_path }}/index.css" />
+	<link rel="stylesheet" href="{{ css_path }}/normalize.css">
 </head>
 
 <body>
-
 	<div class="calendar-wapper">
 		<div class="m-events-calendar">
 			<div class="m-events-calendar">
 				<div class="m-events-calenda__m-right">
+					<div class="m-events-calendar__line-container">
+						<div class="m-events-calendar__line-item"></div>
+						<div class="m-events-calendar__line-item"></div>
+						<div class="m-events-calendar__line-item"></div>
+						<div class="m-events-calendar__line-item"></div>
+						<div class="m-events-calendar__line-item"></div>
+						<div class="m-events-calendar__line-item"></div>
+						<div class="m-events-calendar__line-item"></div>
+					</div>
+					<div class="m-events-calendar__table-header">
+						{% for weeks in week %}
+						<div class="m-events-calendar__table-header-item {{ weeks.current }}">
+							<div class="m-events-calendar__table-header-week">{{ weeks.week }}</div>
+							<div class="m-events-calendar__table-header-date">{{ weeks.date }}</div>
+						</div>
+						{% endfor%}
+					</div>
 					{% for item in body %}
-					<div class="m-events-calendar__event-item-container" style="width: 535px; transform: translate(0px);">
+					<div class="m-events-calendar__event-item-container" style="width: 544px; transform: translate(0px);">
 						<div class="m-events-calendar__event-item-bg" style="background-image: url('{{ item.banner }}');">
 						</div>
 
@@ -35,6 +52,7 @@
 					{% endfor%}
 				</div>
 			</div>
+			<div class="text">All Rights Reserved.@NepPure<br>Create By @nicklly for LittlePaimon</div>
 		</div>
 	</div>
 

Paimon_Calendar/template/index.css

@@ -1,4 +1,3 @@
-@import url("normalize.css");
 @font-face {
   font-family: "FFXIV-EN";
   src: url("~/assets/font/EORZEA.TTF") format("truetype");

Paimon_Calendar/template/normalize.css

@@ -0,0 +1,310 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  font-family: -apple-system, BlinkMacSystemFont, Source Sans Pro,
+    Helvetica Neue, Arial, PingFang SC, Microsoft YaHei, sans-serif,
+    Apple Color Emoji, Segoe UI Emoji;
+  font-weight: 500;
+}
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+  scroll-behavior: smooth;
+}
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}